/* Party-Brett: Anzeige (ui/boardhud.js, Vorlage art/mockups/m3/brett_hud.png) und Szenen/Glücksrad (ui/boardscenes.js, Vorlagen szene_kristall.png,
   szene_gluecksrad.png). Bausteine .wood, .switch, .pt, Farben und Fredoka kommen aus style.css; Spielerfarbe je Element als --pc. */
.bh { position: absolute; inset: 0; pointer-events: none; z-index: 6; font-family: 'Fredoka', system-ui, sans-serif; }
.bh > * { pointer-events: auto; }
.bh .hidden { display: none !important; }
.bh-ic { display: block; object-fit: contain; user-select: none; -webkit-user-select: none; pointer-events: none; }
.bh-ic.miss { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6, #0000 60%), #c9a36a; box-shadow: inset 0 0 0 2px #7a4a26; }
/* Umriss-Schrift wie in den Vorlagen (weiß mit Holzrand) */
.bh-lap, .bh-swl, .bh-sht.out { color: #fff; text-shadow: 0 2px 0 #5e3a19, 0 -1px 0 #5e3a19, 2px 0 0 #5e3a19, -2px 0 0 #5e3a19, 0 3px 6px #0007; }

/* ---------- Spielerkarten ---------- */
.bh-cards { position: absolute; left: 8px; right: 8px; top: calc(env(safe-area-inset-top) + 8px); display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.bh-card { position: relative; flex: 0 1 88px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 3px 5px; pointer-events: auto;
  background: linear-gradient(#fffaf0, #f3e2bf); border: 3px solid var(--pc); border-radius: 15px;
  box-shadow: inset 0 0 0 2px #fff8, 0 3px 0 color-mix(in srgb, var(--pc) 55%, #3a2410), 0 6px 12px #0004; transition: transform .2s, box-shadow .2s; }
.bh-card.active { transform: translateY(2px) scale(1.05); z-index: 1;
  box-shadow: inset 0 0 0 2px #fff8, 0 0 0 3px #ffe38a, 0 0 18px 4px #ffd23acc, 0 3px 0 color-mix(in srgb, var(--pc) 55%, #3a2410); }
.bh-card.done { background: linear-gradient(#fffbe8, #f1e6b8); }
.bh-face { width: 64px; height: 64px; margin-top: -1px; }
.bh-face .bh-stk { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px #0004); }
.bh-face .pt { width: 100%; height: 100%; box-shadow: 0 0 0 3px var(--pc), 0 2px 4px #0004; }
.bh-row { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 22px; }
.bh-row b { font: 700 20px/1 'Fredoka', system-ui; color: #5e3a19; min-width: 18px; }
.bh-row .coin { width: 22px; height: 22px; }
.bh-row .cry { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px #0003); }
.bh-dots { display: flex; gap: 1px; height: 13px; }
.bh-dots .dot { width: 13px; height: 13px; opacity: .22; filter: grayscale(1); transition: opacity .2s; }
.bh-dots .dot.on { opacity: 1; filter: none; }
.bh-mini { display: flex; gap: 2px; height: 17px; }
.bh-mini .mi { width: 17px; height: 17px; filter: drop-shadow(0 1px 1px #0004); }
.bh-mini .mi.hid { opacity: .8; filter: saturate(.55) drop-shadow(0 1px 1px #0004); }
.bh-badge { position: absolute; right: -5px; top: -7px; padding: 2px 6px 3px; border-radius: 8px; font: 700 11px/1 'Fredoka'; color: #fff; background: #6d4520; box-shadow: 0 2px 0 #0004; white-space: nowrap; }
.bh-badge.goal { background: #2fa52a; } .bh-badge.skip { background: #d94cae; } .bh-badge.wall { background: #6b8aa8; }
.bh-fly { position: absolute; left: 0; right: 0; top: 34px; height: 0; pointer-events: none; }
.bh-f { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font: 700 22px/1 'Fredoka'; white-space: nowrap; animation: bhFly 1.2s ease-out forwards;
  text-shadow: 0 2px 0 #5e3a19, 0 -1px 0 #5e3a19, 2px 0 0 #5e3a19, -2px 0 0 #5e3a19; }
.bh-f.up.c { color: #ffd23a; } .bh-f.down.c { color: #ff6a5a; } .bh-f.up.k { color: #ff9ee0; } .bh-f.down.k { color: #b9a4ff; }
@keyframes bhFly { from { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } to { opacity: 0; transform: translate(-50%, -34px) scale(1); } }
.bh-card.gain { animation: rtBump .35s ease-out; }
.bh-card.loss { animation: rtLoss .4s ease-out; }

/* ---------- Übersicht + Runden, Ticker ---------- */
.bh-side { position: absolute; right: 10px; top: calc(env(safe-area-inset-top) + 160px); width: 96px; display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; }
.bh-ov { width: 64px; height: 64px; border-radius: 50%; pointer-events: auto; background: radial-gradient(circle at 50% 35%, #fff8ea, #ecd6ae); border: 4px solid #9a6438;
  box-shadow: inset 0 0 0 2px #fff8, 0 3px 0 #5e3a19, 0 6px 12px #0005; display: flex; align-items: center; justify-content: center; }
.bh-ov .map { width: 40px; height: 40px; }
.bh-ov:active { transform: translateY(2px); }
.bh-ov.on { border-color: #f5a623; box-shadow: 0 0 0 3px #ffd23a, 0 0 14px #ffc93c, 0 3px 0 #5e3a19; }
.bh-lap { font: 700 16px/1.1 'Fredoka'; white-space: nowrap; }
.bh-round { font: 600 12px/1 'Fredoka'; color: #fff; padding: 3px 8px 4px; border-radius: 9px; background: #5e3a19bb; }
.bh-ticker { position: absolute; left: 10px; right: 112px; top: calc(env(safe-area-inset-top) + 162px); display: flex; flex-direction: column; align-items: flex-start; gap: 5px; pointer-events: none; }
.bh-tl { max-width: 100%; padding: 5px 10px 6px; border-radius: 12px; font: 600 14px/1.2 'Fredoka'; color: #5e3a19; background: #fff4def0; border: 2px solid #c99a62;
  box-shadow: 0 2px 0 #8a5a2b, 0 4px 8px #0003; animation: bhTick .3s cubic-bezier(.2, 1.5, .4, 1); transition: opacity .4s, transform .4s; }
.bh-tl.out { opacity: 0; transform: translateY(-6px); }
@keyframes bhTick { from { opacity: 0; transform: translateX(-16px) scale(.9); } }
.bh-wait { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 176px); transform: translateX(-50%); display: flex; align-items: center; gap: 7px;
  padding: 4px 14px 4px 4px; border-radius: 22px; background: #fff4def2; border: 3px solid var(--pc); box-shadow: 0 3px 0 #0004, 0 6px 12px #0003;
  font: 700 16px/1 'Fredoka'; color: #5e3a19; white-space: nowrap; pointer-events: none; }
.bh-wstk { width: 34px; height: 34px; display: block; }
.bh-wait .pt { width: 34px; height: 34px; }
.bh-dotsan { width: 22px; height: 6px; background: radial-gradient(circle, #8a5a2b 2.5px, #0000 3px) 0 0 / 7.3px 6px repeat-x; animation: bhDots 1s steps(4) infinite; }
@keyframes bhDots { from { width: 0; } to { width: 29px; } }

/* ---------- Unten: Items, Würfeln, Helden-Würfel, Fähigkeit ---------- */
.bh-bottom { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 12px); height: 150px; pointer-events: none; transition: opacity .2s, filter .2s; }
.bh-bottom > * { pointer-events: auto; }
.bh-bottom.off { opacity: .72; }
.bh-bottom.off .bh-rollwrap { filter: saturate(.5); }
.bh-items { position: absolute; left: 6px; bottom: 6px; width: 122px; height: 122px; }
.bh-slot { position: absolute; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, #fff8ea, #ead3ae 70%); border: 5px solid #9a6438; box-shadow: inset 0 0 0 2px #c9a36a, 0 3px 0 #5e3a19, 0 6px 10px #0005; transition: transform .1s; }
.bh-slot:nth-child(1) { left: 32px; top: 0; }
.bh-slot:nth-child(2) { left: 0; top: 62px; }
.bh-slot:nth-child(3) { left: 64px; top: 62px; }
.bh-slot .it { width: 42px; height: 42px; filter: drop-shadow(0 2px 2px #0004); }
.bh-slot.empty { background: radial-gradient(circle at 50% 38%, #f4e6cc, #dcc39b 70%); opacity: .8; }
.bh-slot.hid .it { opacity: .75; filter: saturate(.55) drop-shadow(0 2px 2px #0004); }
.bh-slot.usable { border-color: #f5a623; box-shadow: inset 0 0 0 2px #ffe38a, 0 0 0 3px #ffd23a, 0 0 14px #ffc93c, 0 3px 0 #5e3a19; animation: bhGlow 1.3s ease-in-out infinite alternate; }
.bh-slot:active { transform: scale(.93); }
@keyframes bhGlow { to { box-shadow: inset 0 0 0 2px #ffe38a, 0 0 0 3px #ffd23a, 0 0 22px 4px #ffc93c, 0 3px 0 #5e3a19; } }
.bh-rollwrap { position: absolute; left: 128px; right: 108px; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bh-roll { width: 100%; max-width: 150px; display: flex; flex-direction: column; align-items: center; padding: 0 6px 12px; font-size: 25px; border-radius: 16px; margin-top: 26px; }
.bh-roll .die { width: 58px; height: 58px; margin: -30px 0 2px; filter: drop-shadow(0 4px 4px #0006); transition: transform .2s; }
.bh-roll.hero .die { transform: rotate(-8deg) scale(1.05); }
.bh-roll:not(:disabled) .die { animation: bhWiggle 2.4s ease-in-out infinite; }
@keyframes bhWiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-10deg); } 90% { transform: rotate(9deg); } 95% { transform: rotate(-4deg); } }
.bh-swrow { display: flex; align-items: center; gap: 8px; }
.bh-swl { font: 700 13px/1.05 'Fredoka'; white-space: pre; text-align: right; }
.bh-sw { width: 58px; height: 30px; background: #a07a50; border: 2px solid #5e3a19; }
.bh-sw.on { background: #3fa7f0; }
.bh-sw::after { top: 1px; left: 2px; }
.bh-sw.on::after { transform: translateX(26px); }
.bh-abil { position: absolute; right: 10px; bottom: 16px; width: 94px; height: 94px; border-radius: 50%; }
.bh-ring { position: absolute; inset: 4px; border-radius: 50%; background: conic-gradient(#46c2ff var(--ch, 0%), #2a1c1288 0);
  -webkit-mask: radial-gradient(circle, transparent 33px, #000 34px); mask: radial-gradient(circle, transparent 33px, #000 34px); }
.bh-abil { background: radial-gradient(circle at 50% 35%, #c28a52, #7a4a26); border-radius: 50%; box-shadow: 0 0 0 3px #5e3a19, 0 4px 0 #4a2c12, 0 8px 16px #0006; }
.bh-abil::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: #1f6fb0; box-shadow: 0 0 0 3px #fff, inset 0 0 8px #0006; }
.bh-abface { position: absolute; inset: 14px; border-radius: 50%; overflow: hidden; }
.bh-abface .pt { width: 100%; height: 100%; }
.bh-abil:not(.ready) .bh-abface { filter: grayscale(.85) brightness(.85); }
.bh-abil.ready .bh-ring { background: conic-gradient(#46c2ff 0 100%); }
.bh-abil.usable .bh-ring { background: conic-gradient(from 0deg, #46c2ff, #b6f0ff, #46c2ff, #b6f0ff, #46c2ff); animation: spin 2.4s linear infinite; }
.bh-abil.usable { filter: drop-shadow(0 0 10px #6fd3ffcc); }
.bh-abil:active { transform: scale(.95); }
.bh-abname { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); padding: 2px 8px 3px; border-radius: 8px; white-space: nowrap; font: 700 12px/1 'Fredoka';
  color: #fff; background: #1f6fb0; border: 2px solid #fff; box-shadow: 0 2px 0 #0004; }
.bh-info { position: absolute; right: -2px; top: -2px; width: 26px; height: 26px; border-radius: 50%; font: italic 700 17px/23px Georgia, serif; text-align: center; color: #1f6fb0;
  background: #fff; border: 2px solid #1f6fb0; box-shadow: 0 2px 0 #0004; }

/* ---------- Kurz-Info ---------- */
.bh-pop { position: absolute; bottom: calc(env(safe-area-inset-bottom) + 176px); width: 236px; padding: 10px 12px 11px; background: var(--karte); border: 3px solid var(--rand);
  border-radius: 16px; box-shadow: var(--schatten); pointer-events: none; animation: bhPop .2s cubic-bezier(.2, 1.5, .4, 1); z-index: 3; }
.bh-pop.left { left: 10px; } .bh-pop.right { right: 10px; } .bh-pop.mid { left: 50%; margin-left: -118px; }
@keyframes bhPop { from { opacity: 0; transform: scale(.85) translateY(8px); } }
.bh-popt { font: 700 18px/1.1 'Fredoka'; color: #5e3a19; margin-bottom: 3px; }
.bh-popl { font: 500 14px/1.25 'Fredoka'; color: #8a5a2b; }
.bh-faces { display: flex; gap: 4px; margin-top: 7px; }
.bh-fc { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font: 700 18px/1 'Fredoka'; color: #1f4f8a;
  background: linear-gradient(#ffffff, #dbeeff); border: 2px solid #3f8fe0; box-shadow: 0 2px 0 #1f5fa8; }
.bh-fc.coins { color: #9a6410; background: linear-gradient(#fff6d6, #ffd970); border-color: #d9a200; box-shadow: 0 2px 0 #a8780a; font-size: 15px; }
.bh-fc.again { font-size: 10px; color: #8a2a9a; background: linear-gradient(#fff, #f1dcff); border-color: #b060d0; box-shadow: 0 2px 0 #7a3a9a; }

/* ---------- Entscheidungs-Tafeln ---------- */
.bh-panel { position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none; display: flex; justify-content: center; }
.bh-panel > * { pointer-events: auto; }
.bh-panel.bottom { bottom: 0; }
.bh-panel.bottom::before { content: ''; position: fixed; inset: 0; background: linear-gradient(#0000 35%, #0006); pointer-events: none; }
.bh-panel.center { top: 0; bottom: 0; align-items: center; background: #0006; padding: 16px; }
.bh-panel.top { top: calc(env(safe-area-inset-top) + 156px); padding: 0 10px; }
.bh-sheet { position: relative; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 16px; background: var(--karte); border: 4px solid var(--rand);
  box-shadow: var(--schatten); animation: shUp .22s ease-out; }
.bh-panel.bottom .bh-sheet { border-bottom: 0; border-radius: 26px 26px 0 0; padding-bottom: calc(env(safe-area-inset-bottom) + 18px); }
.bh-panel.center .bh-sheet { max-width: 320px; border-radius: 24px; text-align: center; align-items: center; animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); }
.bh-panel.top .bh-sheet { border-radius: 20px; padding: 10px 12px 12px; gap: 6px; animation: bhPop .25s cubic-bezier(.2, 1.5, .4, 1); }
.bh-sht { font: 700 24px/1.1 'Fredoka'; color: #5e3a19; }
.bh-shh { font: 600 15px/1.2 'Fredoka'; color: #a0784e; margin-top: -4px; }
.bh-panel.top .bh-sht { font-size: 19px; }
.bh-panel.top .bh-shh { font-size: 13px; }
.bh-btnrow { display: flex; gap: 10px; width: 100%; }
.bh-btnrow .wood { flex: 1; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.bh-skip { align-self: center; min-width: 50%; }
/* Händler */
.bh-sheet.shop .bh-sht { padding-left: 64px; min-height: 44px; display: flex; align-items: center; }
.bh-sheet.shop::before { content: ''; position: absolute; left: 12px; top: -20px; width: 64px; height: 64px; background: url('../img/board/field_haendler.png') center / contain no-repeat; filter: drop-shadow(0 3px 3px #0005); }
.bh-sheet.shop .bh-shh { padding-left: 64px; margin-top: -12px; }
.bh-shop { display: flex; flex-direction: column; gap: 6px; }
.bh-offer { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 16px; background: #fff7e6; border: 3px solid #e7d2ab; text-align: left; transition: transform .1s; }
.bh-offer:active:not(:disabled) { transform: scale(.98); border-color: #f5a623; }
.bh-offer .oi { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 2px 2px #0004); }
.bh-otx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bh-otx b { font: 700 17px/1.1 'Fredoka'; color: #5e3a19; }
.bh-otx small { font: 500 13px/1.15 'Fredoka'; color: #a0784e; }
.bh-price { flex: none; display: flex; align-items: center; gap: 3px; padding: 5px 9px 5px 5px; border-radius: 14px; background: linear-gradient(#ffe38a, #f5b547); border: 2px solid #c07a10; box-shadow: 0 2px 0 #9a5512; }
.bh-price .coin { width: 20px; height: 20px; }
.bh-price b { font: 700 17px/1 'Fredoka'; color: #6d3a08; }
.bh-offer.poor { opacity: .5; filter: grayscale(.6); }
/* Kristall */
.bh-crart { position: relative; width: 150px; height: 130px; margin: -70px 0 -6px; }
.bh-crart::before { content: ''; position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, #fff 0, #ffd6f5aa 25%, #a8e8ff55 50%, #0000 70%); animation: bhPulse 1.6s ease-in-out infinite alternate; }
.bh-crart .big { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 6px 10px #b04aa088); animation: bhFloat 2.2s ease-in-out infinite; }
@keyframes bhFloat { 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes bhPulse { to { transform: scale(1.15); opacity: .8; } }
.bh-panel.center .bh-sheet.crystal { padding-top: 10px; }
/* M6 Angebote (Fähre, Ballon, Regenbogen) wie der Kristall; Regenbogen ohne Feld-Bild als gemalter Bogen */
.bh-panel.center .bh-sheet.offer { padding-top: 10px; }
.bh-sheet.offer .bh-crart { width: 130px; height: 112px; margin-top: -60px; }
.bh-rainbow { position: relative; display: block; width: 100%; height: 100%; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: radial-gradient(circle at 50% 100%, #0000 0 38%, #8a5cf0 38% 44%, #3aa7e0 44% 50%, #43b04a 50% 56%, #f6c431 56% 62%, #f39a2b 62% 68%, #e8453c 68% 74%, #0000 74%);
  filter: drop-shadow(0 4px 6px #0003); animation: bhFloat 2.2s ease-in-out infinite; }
.bh-fork.detour { opacity: 0.85; }
.bh-fork.detour > b { background: repeating-linear-gradient(135deg, var(--fc) 0 6px, #c9542c 6px 12px); }
/* Tasche voll */
.bh-new { display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 18px/1 'Fredoka'; color: #5e3a19; }
.bh-new .oi { width: 52px; height: 52px; animation: bhFloat 2s ease-in-out infinite; }
.bh-swap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bh-swapb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 16px; background: #fff7e6; border: 3px solid #e7d2ab; }
.bh-swapb .oi { width: 44px; height: 44px; }
.bh-swapb span { font: 700 14px/1.1 'Fredoka'; color: #5e3a19; }
.bh-swapb small { font: 600 12px/1 'Fredoka'; color: #c0392b; }
/* Spieler / Gebiet / Zahl */
.bh-prow { display: flex; gap: 8px; justify-content: center; }
.bh-pbtn { flex: 1; max-width: 110px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 8px; border-radius: 18px; background: #fff7e6; border: 3px solid var(--pc);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--pc) 55%, #3a2410); }
.bh-pbtn:active { transform: translateY(2px); }
.bh-pstk { width: 62px; height: 62px; display: block; }
.bh-pbtn .pt { width: 62px; height: 62px; }
.bh-pn { font: 700 16px/1.1 'Fredoka'; color: #5e3a19; }
.bh-pbtn small { font: 600 12px/1 'Fredoka'; color: #a0784e; }
.bh-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bh-secb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 16px; color: #fff; border: 3px solid #0003; box-shadow: 0 3px 0 #0004;
  text-shadow: 0 1px 2px #0007; }
.bh-secb b { font: 700 19px/1 'Fredoka'; } .bh-secb small { font: 600 13px/1 'Fredoka'; opacity: .95; }
.sec-strand { background: linear-gradient(#f5d78e, #d9a857); } .sec-dschungel { background: linear-gradient(#6fcf5a, #2f9a2a); }
.sec-vulkan { background: linear-gradient(#ff8a5a, #d23a1e); } .sec-leuchtturm { background: linear-gradient(#6fc0ff, #2a7ad5); }
.bh-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bh-nums.n10 { grid-template-columns: repeat(5, 1fr); }
.bh-num { height: 54px; border-radius: 14px; font: 700 26px/1 'Fredoka'; color: #6d3a08; background: linear-gradient(#fff6d6, #ffd970); border: 3px solid #d9a200; box-shadow: 0 3px 0 #a8780a; }
.bh-num:active { transform: translateY(2px); box-shadow: 0 1px 0 #a8780a; }
/* Abzweigung */
.bh-forks { display: flex; flex-direction: column; gap: 6px; }
.bh-fork { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 14px; background: #fff7e6; border: 3px solid var(--fc); box-shadow: 0 2px 0 #0003; }
.bh-fork.f0 { --fc: #33c6e8; } .bh-fork.f1 { --fc: #e85ad2; }
.bh-fork > b { flex: none; padding: 4px 7px 5px; border-radius: 9px; font: 700 13px/1 'Fredoka'; color: #fff; background: var(--fc); white-space: nowrap; }
.bh-ffs { flex: 1; display: flex; gap: 3px; justify-content: space-between; }
.bh-ff { position: relative; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #f1ebe0, #c9bfae); box-shadow: inset 0 -2px 0 #0002, 0 1px 2px #0003; }
.bh-ff .bh-ic { position: absolute; inset: 2px; width: 26px; height: 26px; }
.bh-ff .trap { inset: auto -3px -3px auto; width: 15px; height: 15px; }
.bh-ff .shard { inset: -4px -3px auto auto; width: 14px; height: 14px; }
/* Falle */
.bh-sheet.trap { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.bh-trapic .oi { width: 44px; height: 44px; }
.bh-sheet.trap .bh-sht { flex: 1; min-width: 0; }
.bh-sheet.trap .bh-shh { width: 100%; margin-top: -2px; order: 3; }
.bh-sheet.trap .wood { order: 2; }

/* ---------- Gerät weitergeben ---------- */
.bh-hand { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(circle at 50% 40%, #3a2a1ccc, #140c06ee); }
.bh-hcard { width: min(100%, 320px); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 18px 20px; text-align: center; background: var(--karte);
  border: 4px solid var(--pc); border-radius: 26px; box-shadow: 0 0 0 4px #fff8, 0 0 30px color-mix(in srgb, var(--pc) 70%, #0000), var(--schatten); animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); }
.bh-hstk { width: 150px; height: 150px; margin: -76px 0 0; display: block; filter: drop-shadow(0 6px 8px #0006); animation: bhFloat 2.4s ease-in-out infinite; }
.bh-hcard .pt { width: 140px; height: 140px; margin-top: -70px; border: 6px solid #fff; box-shadow: 0 0 0 4px var(--pc); }
.bh-ht { font: 700 30px/1.1 'Fredoka'; color: #5e3a19; }
.bh-hh { font: 600 17px/1.2 'Fredoka'; color: #a0784e; margin-bottom: 8px; }

/* ================= Szenen (ui/boardscenes.js) ================= */
.bs { position: absolute; inset: 0; z-index: 20; overflow: hidden; pointer-events: auto; font-family: 'Fredoka', system-ui, sans-serif; }
.bs-dim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, #0000 0, #0000 20%, #140a0499 75%); animation: bsFade .3s ease-out; }
@keyframes bsFade { from { opacity: 0; } }
.bs.out { animation: bsOut .28s ease-in forwards; }
@keyframes bsOut { to { opacity: 0; } }
.bs-title { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 18%); transform: translateX(-50%); padding: 10px 22px 12px; white-space: nowrap;
  font: 700 32px/1 'Fredoka'; color: #fff; border-radius: 16px; background: linear-gradient(#ffffff22, #0000 45%, #0000001f), url('../img/tex/wood.jpg') 0 36% / 150% auto; background-color: #b27a44;
  border: 3px solid #5e3a19; box-shadow: inset 0 2px 0 #ffffff55, 0 5px 0 #4a2c12, 0 10px 20px #0007;
  text-shadow: 0 2px 0 #5e3a19, 0 -2px 0 #5e3a19, 2px 0 0 #5e3a19, -2px 0 0 #5e3a19, 0 4px 6px #0007; animation: bsDrop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bsDrop { from { transform: translate(-50%, -60px) rotate(-6deg); opacity: 0; } }
.bs-sub { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 20%); transform: translateX(-50%); width: max-content; max-width: 88%; padding: 9px 16px 10px; text-align: center;
  font: 700 18px/1.25 'Fredoka'; color: #5e3a19; background: var(--karte); border: 3px solid var(--rand); border-radius: 16px; box-shadow: var(--schatten); animation: bsUp .4s .25s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes bsUp { from { transform: translate(-50%, 30px); opacity: 0; } }
.bs-art { position: absolute; left: 50%; top: 46%; width: 190px; height: 190px; margin: -95px 0 0 -95px; filter: drop-shadow(0 8px 12px #0006); }
.bs-stk { position: absolute; width: 110px; height: 110px; filter: drop-shadow(0 6px 8px #0006); }
.bs-stk .pt { width: 100%; height: 100%; border: 5px solid #fff; box-shadow: 0 0 0 3px var(--pc); }
.bs-skip { position: absolute; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 12px); font: 600 12px/1 'Fredoka'; color: #fff9; }
.bs-glow { position: absolute; left: 50%; top: 46%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; }
.bs-rays { position: absolute; left: 50%; top: 46%; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%; opacity: .55;
  background: repeating-conic-gradient(#fff6 0 7deg, #0000 7deg 20deg); -webkit-mask: radial-gradient(circle, #000 20%, #0000 65%); mask: radial-gradient(circle, #000 20%, #0000 65%); animation: spin 14s linear infinite; }
.bs-spark { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px #b6f0ff; animation: bsSpark 1.4s ease-out infinite; }
@keyframes bsSpark { from { transform: scale(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 0; } }
.bs-coin { position: absolute; width: 38px; height: 38px; animation: bsCoin 1.1s ease-in forwards; }
@keyframes bsCoin { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(360deg) scale(.6); opacity: 0; } }
.bs-num { position: absolute; font: 700 34px/1 'Fredoka'; color: #ff6a5a; text-shadow: 0 2px 0 #5e3a19, 0 -2px 0 #5e3a19, 2px 0 0 #5e3a19, -2px 0 0 #5e3a19; animation: bsNum 1.4s .5s ease-out both; }
.bs-num.plus { color: #ffd23a; }
@keyframes bsNum { from { transform: scale(.3); opacity: 0; } 30% { transform: scale(1.2); opacity: 1; } to { transform: translateY(-30px); opacity: 0; } }
/* Kristallkauf */
.bs.kristall .bs-glow { background: radial-gradient(circle, #fff 0, #ffc6f0cc 18%, #9fe6ff88 38%, #0000 68%); animation: bhPulse 1s ease-in-out infinite alternate; }
.bs.kristall .bs-art { animation: bsCrystal 2.6s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes bsCrystal { 0% { transform: translateY(120px) scale(.2) rotate(-40deg); opacity: 0; } 30% { transform: translateY(-10px) scale(1.1) rotate(8deg); opacity: 1; }
  60% { transform: translateY(0) scale(1) rotate(-4deg); } 100% { transform: translateY(-14px) scale(1.03) rotate(3deg); } }
.bs.kristall .bs-stk { left: 50%; bottom: 25%; margin-left: -55px; animation: bsJump .6s .4s cubic-bezier(.3, 1.8, .5, 1) 3 alternate both; }
@keyframes bsJump { to { transform: translateY(-26px) scale(1.06); } }
/* Blitz */
.bs.blitz .bs-dim { background: radial-gradient(circle at 50% 40%, #fff7 0, #20306099 60%, #0a0f24dd); }
.bs-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: bsFlash .9s ease-out; }
@keyframes bsFlash { 0%, 30% { opacity: 0; } 34% { opacity: .95; } 44% { opacity: 0; } 52% { opacity: .7; } 70%, 100% { opacity: 0; } }
.bs.blitz .bs-art { top: 30%; width: 160px; height: 160px; margin: -80px 0 0 -80px; animation: bsStrike .5s .25s cubic-bezier(.5, 0, 1, .5) both; }
@keyframes bsStrike { from { transform: translateY(-260px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.bs.blitz .bs-stk.hit { left: 50%; top: 46%; margin-left: -55px; animation: bsHit .5s .6s ease-out both; }
@keyframes bsHit { 20% { transform: translateX(-10px) rotate(-8deg); filter: brightness(2) drop-shadow(0 0 16px #fff36a); } 40% { transform: translateX(8px) rotate(6deg); } 60% { transform: translateX(-5px); } }
/* Vulkan (Qualm, Ausbruch, Meteor) */
.bs.vulkan .bs-dim, .bs.qualm .bs-dim { background: radial-gradient(circle at 50% 60%, #ff8a3a55 0, #3a1206cc 70%); }
.bs-mount { position: absolute; left: 50%; bottom: 18%; width: 300px; height: 170px; margin-left: -150px; background: linear-gradient(#7a5a48, #4a3226); clip-path: polygon(0 100%, 36% 8%, 64% 8%, 100% 100%); }
.bs-mount::before { content: ''; position: absolute; left: 36%; right: 36%; top: 6%; height: 20px; background: linear-gradient(#ffdf5a, #ff5a1e); border-radius: 50%; box-shadow: 0 0 20px #ff6a1e; }
.bs.vulkan .bs-mount { animation: bsShake .12s linear 10 alternate; }
@keyframes bsShake { from { transform: translateX(-4px); } to { transform: translateX(4px); } }
.bs-puff { position: absolute; left: 50%; bottom: calc(18% + 150px); width: 70px; height: 70px; margin-left: -35px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e6e0da, #8a807a); opacity: 0;
  animation: bsPuff 2.2s ease-out infinite; animation-delay: var(--d); }
@keyframes bsPuff { 0% { transform: translate(0, 0) scale(.3); opacity: 0; } 20% { opacity: .95; } 100% { transform: translate(var(--dx), -200px) scale(1.8); opacity: 0; } }
.bs-fire { position: absolute; width: 60px; height: 60px; left: 50%; bottom: calc(18% + 150px); margin-left: -30px; animation: bsLava 1.4s cubic-bezier(.2, .8, .6, 1) both; animation-delay: var(--d); }
@keyframes bsLava { 0% { transform: translate(0, 40px) scale(.3); opacity: 0; } 15% { opacity: 1; } 55% { transform: translate(calc(var(--dx) * .6), -220px) scale(1); } 100% { transform: translate(var(--dx), 120px) scale(.8); opacity: 0; } }
.bs.vulkan .bs-art { display: none; }
/* Wirbel */
.bs.wirbel .bs-dim { background: radial-gradient(circle at 50% 46%, #7ff0e855 0, #0a3a40cc 72%); }
.bs.wirbel .bs-art { animation: bsSpin 2.4s ease-in-out both; }
@keyframes bsSpin { from { transform: scale(.2) rotate(-200deg); opacity: 0; } 25% { transform: scale(1.1) rotate(0); opacity: 1; } to { transform: scale(1) rotate(30deg); } }
.bs.wirbel .bs-stk { top: 46%; margin-top: -55px; }
.bs.wirbel .bs-stk.a { left: 8%; animation: bsSwapA 2.2s .3s ease-in-out both; }
.bs.wirbel .bs-stk.b { right: 8%; animation: bsSwapB 2.2s .3s ease-in-out both; }
@keyframes bsSwapA { 50% { transform: translate(90px, -80px) rotate(180deg) scale(.7); } to { transform: translate(calc(84vw - 110px), 0) rotate(360deg); } }
@keyframes bsSwapB { 50% { transform: translate(-90px, 80px) rotate(-180deg) scale(.7); } to { transform: translate(calc(-84vw + 110px), 0) rotate(-360deg); } }
/* Steinwächter */
.bs.boss .bs-dim { background: radial-gradient(circle at 50% 46%, #ffb34733 0, #1a1410ee 70%); }
.bs.boss .bs-art { width: 230px; height: 230px; margin: -115px 0 0 -115px; filter: brightness(.45) drop-shadow(0 8px 12px #000a); animation: bsWake 2.4s ease-out both, bsShake .1s 1.1s linear 8 alternate; }
@keyframes bsWake { 0% { transform: scale(.9); filter: brightness(.3); } 40% { filter: brightness(.35); } 48% { transform: scale(1.12); filter: brightness(1.25) drop-shadow(0 0 30px #ffb347); } 100% { transform: scale(1.05); filter: brightness(1) drop-shadow(0 0 16px #ffb347aa); } }
/* Portal */
.bs.portal .bs-dim { background: radial-gradient(circle at 50% 46%, #b06aff55 0, #1a0a33dd 72%); }
.bs.portal .bs-art { animation: spin 1.2s linear infinite, bsGrow .5s ease-out both; }
@keyframes bsGrow { from { transform: scale(0); } }
.bs.portal .bs-stk { left: 50%; top: 46%; margin: -55px 0 0 -55px; animation: bsSuck 1.6s .5s ease-in both; }
@keyframes bsSuck { 0% { transform: translateY(160px); } 40% { transform: translateY(0) scale(1); } 100% { transform: rotate(540deg) scale(0); opacity: 0; } }
/* Brücke */
.bs.bruecke .bs-dim { background: radial-gradient(circle at 50% 50%, #0000 0, #0b2a3acc 70%); }
.bs-bridge { position: absolute; left: 6%; right: 6%; top: 46%; height: 60px; display: flex; }
.bs-bridge i { flex: 1; margin: 0 2px; height: 34px; border-radius: 4px; background: linear-gradient(#c28a52, #8e5a2c); border: 2px solid #5e3a19; box-shadow: 0 3px 0 #4a2c12; }
.bs-bridge::before, .bs-bridge::after { content: ''; position: absolute; left: -4%; right: -4%; height: 4px; background: #d9b47a; border-radius: 2px; box-shadow: 0 1px 0 #6d4520; }
.bs-bridge::before { top: -18px; } .bs-bridge::after { top: 14px; }
.bs-bridge i { animation: bsFall 1.4s ease-in both; animation-delay: var(--d); }
@keyframes bsFall { 0%, 35% { transform: none; opacity: 1; } 100% { transform: translateY(320px) rotate(var(--r)); opacity: 0; } }
.bs-bridge i.keep { animation: none; }
/* Aufholjagd */
.bs.aufholjagd .bs-dim { background: radial-gradient(circle at 50% 46%, #ffd23a44 0, #3a1a06cc 72%); }
.bs.aufholjagd .bs-title { font-size: 40px; background-color: #d2502a; animation: bsDrop .45s cubic-bezier(.2, 1.6, .4, 1), bsBeat .5s .5s ease-in-out 4 alternate; }
@keyframes bsBeat { to { transform: translateX(-50%) scale(1.08); } }
.bs.aufholjagd .bs-art { width: 120px; height: 120px; margin: -60px 0 0 -60px; top: 42%; animation: bsGrow .5s .3s cubic-bezier(.2, 1.6, .4, 1) both; }
.bs.aufholjagd .bs-stk { left: 50%; top: 56%; margin-left: -55px; animation: bsJump .5s .5s ease-in-out 4 alternate both; }
/* Ziel */
.bs.ziel .bs-dim { background: radial-gradient(circle at 50% 46%, #fff3 0, #1a3a10cc 72%); }
.bs-flag { position: absolute; left: 50%; top: 30%; width: 120px; height: 90px; margin-left: -60px; background: repeating-conic-gradient(#222 0 25%, #fff 0 50%) 0 0 / 30px 30px; border: 3px solid #333;
  border-radius: 4px; transform-origin: left; animation: bsWave .6s ease-in-out infinite alternate; }
.bs-flag::before { content: ''; position: absolute; left: -9px; top: -6px; width: 6px; height: 180px; background: #6d4520; border-radius: 3px; }
@keyframes bsWave { to { transform: skewY(-6deg) scaleX(.94); } }
.bs.ziel .bs-stk { left: 50%; top: 50%; margin-left: -55px; animation: bsJump .45s .2s ease-in-out 5 alternate both; }
.bs-conf { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: bsConf 2.4s linear both; animation-delay: var(--d); }
@keyframes bsConf { to { transform: translate(var(--dx), 110vh) rotate(720deg); } }
/* Bonus-Kristall aufdecken */
.bs.bonus .bs-dim { background: radial-gradient(circle at 50% 46%, #ffe7a044 0, #2a1a3add 72%); }
.bs-card3d { position: absolute; left: 50%; top: 42%; width: 240px; height: 150px; margin: -75px 0 0 -120px; perspective: 700px; }
.bs-card3d > div { position: absolute; inset: 0; transform-style: preserve-3d; animation: bsFlip .7s .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.bs-card3d .fr, .bs-card3d .bk { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; text-align: center; }
.bs-card3d .bk { background: linear-gradient(135deg, #8a5ad6, #d25ab0); border: 4px solid #fff; box-shadow: 0 8px 20px #0007; }
.bs-card3d .bk .bh-ic { width: 70px; height: 70px; opacity: .9; }
.bs-card3d .fr { transform: rotateY(180deg); background: var(--karte); border: 4px solid var(--rand); box-shadow: var(--schatten); font: 700 21px/1.15 'Fredoka'; color: #5e3a19; }
.bs-card3d .fr small { font: 600 14px/1 'Fredoka'; color: #a0784e; }
@keyframes bsFlip { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
.bs-row { position: absolute; left: 0; right: 0; top: 64%; display: flex; justify-content: center; gap: 10px; }
.bs-row .bs-stk { position: relative; width: 84px; height: 84px; animation: bsGrow .4s 1.2s cubic-bezier(.2, 1.6, .4, 1) both; }
.bs-row .bs-mc { position: absolute; right: -6px; top: -8px; width: 34px; height: 34px; animation: bsGrow .4s 1.5s cubic-bezier(.2, 1.6, .4, 1) both; }

/* ================= Glücksrad ================= */
.bw { position: absolute; inset: 0; z-index: 20; overflow: hidden; pointer-events: auto; background: radial-gradient(circle at 50% 42%, #0000 0, #0000 30%, #0b1a2a99 80%); animation: bsFade .3s ease-out; }
.bw-title { top: calc(env(safe-area-inset-top) + 34px); font-size: 36px; padding: 12px 30px 14px; }
.bw-wheel { position: absolute; left: 50%; top: 45%; width: min(84vw, 360px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.bw-disc { position: absolute; inset: 0; border-radius: 50%; border: 12px solid #8e5a2c; box-shadow: inset 0 0 0 3px #5e3a19, 0 0 0 3px #5e3a19, 0 12px 28px #0008; overflow: hidden;
  background-color: #b27a44; }
.bw-rot { position: absolute; inset: 0; border-radius: 50%; will-change: transform; }
.bw-seg { position: absolute; left: 50%; top: 0; width: 0; height: 50%; transform-origin: 50% 100%; }
.bw-seg .bw-sign { position: absolute; left: 50%; top: 6%; width: 120px; margin-left: -60px; display: flex; flex-direction: column; align-items: center; }
.bw-sign .bh-ic { width: calc(min(84vw, 360px) * .2); height: calc(min(84vw, 360px) * .2); border-radius: 10px; filter: drop-shadow(0 3px 3px #0006); }
.bw-sign b { margin: -2px 0 3px; font: 700 13px/1 'Fredoka'; color: #fff; white-space: nowrap; text-shadow: 0 1px 0 #0008, 0 0 4px #0006; }
.bw-bolt { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b0, #d9a200 60%, #8a6000); }
.bw-hub { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff2b0, #f5b800 55%, #a87400); box-shadow: 0 4px 8px #0006, inset 0 -3px 0 #0003; }
.bw-hub::before { content: ''; position: absolute; left: 50%; top: -36px; margin-left: -14px; border: 14px solid transparent; border-bottom: 40px solid #f5b800; border-top: 0; filter: drop-shadow(0 -1px 0 #a87400); }
.bw-pin { position: absolute; left: 50%; top: -22px; width: 44px; height: 58px; margin-left: -22px; background: radial-gradient(circle at 50% 30%, #fff 0 7px, #0000 8px), linear-gradient(#ffe066, #d99a00);
  clip-path: polygon(50% 100%, 0 38%, 0 22%, 22% 0, 78% 0, 100% 22%, 100% 38%); filter: drop-shadow(0 3px 3px #0007); z-index: 2; }
.bw-seg.win .bw-sign { animation: bsBeat2 .4s ease-in-out 5 alternate; }
@keyframes bsBeat2 { to { transform: scale(1.18); } }
.bw-light { position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity .3s; }
.bw-light.on { opacity: 1; }
.bw-name { position: absolute; left: 50%; top: calc(45% + min(42vw, 180px) + 18px); transform: translateX(-50%); padding: 8px 18px 9px; white-space: nowrap; font: 700 22px/1 'Fredoka'; color: #5e3a19;
  background: var(--karte); border: 3px solid var(--rand); border-radius: 16px; box-shadow: var(--schatten); animation: bsUp .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.bw-team { font-size: 15px; display: flex; align-items: center; gap: 6px; }
.bw-team img { width: 30px; height: 30px; }
.bw-players { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 10px); display: flex; justify-content: center; gap: 4px; }
.bw-players .bs-stk { position: relative; width: 84px; height: 84px; animation: bsJump .5s ease-in-out infinite alternate; animation-delay: var(--d); }

/* ---------- Partie in der App (ui/boardmatch.js, M3b Task 5/6) ---------- */
#bd { position: absolute; inset: 0; pointer-events: none; }
.bd-layer { position: absolute; inset: 0; pointer-events: none; }
.bd-layer > * { pointer-events: auto; }
.bd-layer > .bh { pointer-events: none; }
.bd-layer.hidden { display: none; }
/* Zeitraffer-Schalter unter „Spielrunde n“ */
.bd-fast { margin-top: 4px; pointer-events: auto; padding: 4px 10px 5px; border-radius: 12px; font: 700 13px/1 'Fredoka'; color: #6d4520; background: #fff4def0;
  border: 2px solid #c99a62; box-shadow: 0 2px 0 #8a5a2b; }
.bd-fast.on { color: #fff; background: #f39a2b; border-color: #b8651a; text-shadow: 0 1px 1px #8a4a0c; }
.bd-fast:active { transform: translateY(2px); box-shadow: none; }
/* Brett-Blatt: Inselrunden, gespeicherte Partie */
.ax-laps { grid-template-columns: repeat(3, 1fr); }
.ax-laps .pill.on { background: #33c6e8; border-color: #1f8fb0; color: #fff; text-shadow: 0 1px 2px #16607a; }
.ax-resume { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; background: #fff0f8; border: 3px solid #e89ac8; }
.ax-rtx { flex: 1; font-size: 15px; font-weight: 600; color: #7a3a5e; line-height: 1.25; }
/* M6 Brett-Wahl: drei Karten mit Vorschaubild */
.ax-boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ax-board { display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 4px 4px 6px; border-radius: 16px; background: #fff7e6; border: 3px solid #e7d2ab;
  font: 700 13px/1.1 'Fredoka'; color: #6d4520; }
.ax-board img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 11px; display: block; }
.ax-board.on { background: #fff1c4; border-color: #f39a2b; box-shadow: 0 3px 0 #b8651a; color: #8a4a0c; }
.ax-board:not(.on) img { filter: saturate(.75); }
/* Siegerehrung: Statistik-Tafel unter den Stickern */
.bd-stats { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 150px); transform: translateX(-50%); width: min(92vw, 400px); padding: 8px 10px 9px;
  background: #fff4def2; border: 3px solid #c99a62; border-radius: 16px; box-shadow: 0 3px 0 #8a5a2b, 0 8px 16px #0004; pointer-events: auto; animation: bhTick .4s cubic-bezier(.2, 1.4, .4, 1) both; }
.bd-stats table { width: 100%; border-collapse: collapse; font: 600 14px/1.2 'Fredoka'; color: #5e3a19; }
.bd-stats th { font-size: 11px; font-weight: 600; color: #a0784e; text-transform: uppercase; letter-spacing: .5px; padding-bottom: 3px; }
.bd-stats td { text-align: center; padding: 2px 0; }
.bd-stats td:first-child { text-align: left; white-space: nowrap; }
.bd-stats i { display: inline-block; width: 11px; height: 11px; margin-right: 5px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 2px #fff; vertical-align: -1px; }
.bd-stats .bh-ic { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
/* In der App liegt „Zurück“ (ui/hud.js action) links unter den Spielerkarten: Ticker rückt daneben */
.hud-action.on-board .rt-back { top: calc(env(safe-area-inset-top) + 164px); }
.bd-layer .bh-ticker { left: 60px; }
.hud-action.on-board .rt-back { z-index: 5; } /* offene Tafeln der Anzeige (z 6) liegen darüber */

/* ================= M3c: Team-Karte, Duell, Team-Ergebnis, Boss-Ergebnis (Vorlage art/mockups/m3/szene_teams.png) ================= */
.bs.teams .bs-dim, .bs.duell .bs-dim { background: radial-gradient(circle at 50% 50%, #fff3 0, #140a04aa 75%); }
.bs-tsign { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 7%); transform: translateX(-50%); padding: 12px 30px 14px; white-space: nowrap;
  font: 700 38px/1 'Fredoka'; color: #ffe0a8; border-radius: 18px; background: url('../img/tex/wood.jpg') 0 36% / 150% auto #b27a44;
  border: 5px solid #d8b27a; outline: 3px solid #6d4520; box-shadow: inset 0 2px 0 #ffffff55, 0 6px 0 #4a2c12, 0 12px 22px #0007;
  text-shadow: 0 2px 0 #6d4520, 0 -2px 0 #6d4520, 2px 0 0 #6d4520, -2px 0 0 #6d4520, 0 5px 6px #0007; animation: bsDrop .45s cubic-bezier(.2, 1.6, .4, 1); }
.bs-tname { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 7% + 78px); transform: translateX(-50%); white-space: nowrap; font: 700 24px/1 'Fredoka'; color: #fff;
  text-shadow: 0 2px 0 #5e3a19, 0 -2px 0 #5e3a19, 2px 0 0 #5e3a19, -2px 0 0 #5e3a19, 0 4px 8px #000a; animation: bsUp .4s .15s cubic-bezier(.2, 1.4, .4, 1) both; }
.bs-tboard { position: absolute; inset: 0; margin: auto; width: min(88vw, 420px); height: min(56vh, 430px); box-sizing: border-box; display: flex; gap: 12px; padding: 16px;
  border-radius: 20px; background: var(--karte, #fdf3dc); border: 8px solid #a8733f; outline: 3px solid #5e3a19; box-shadow: inset 0 0 0 3px #e9d2a6, 0 10px 26px #0008;
  animation: bsGrow .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.bs-tcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; border-radius: 14px; padding: 8px 4px;
  background: linear-gradient(color-mix(in srgb, var(--tc) 78%, #fff), var(--tc)); box-shadow: inset 0 2px 0 #fff6, inset 0 -3px 0 #0002; }
.bs-tcol > b { font: 700 18px/1 'Fredoka'; color: #fff; text-shadow: 0 2px 3px #0006; }
.bs-tslot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bs-tslot span { font: 700 15px/1 'Fredoka'; color: #fff; text-shadow: 0 1px 2px #0008; }
.bs-tcol .bs-stk { position: relative; width: min(24vw, 96px); height: min(24vw, 96px); animation: bsGrow .4s .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.bs-tcol.t0 .bs-tslot:nth-of-type(2) .bs-stk, .bs-tcol.t1 .bs-tslot:nth-of-type(2) .bs-stk { animation-delay: .5s; }
.bs-tcol.t1 .bs-tslot:nth-of-type(3) .bs-stk { animation-delay: .65s; }
.bs-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 54px/1 'Fredoka'; color: #ffb21f; font-style: italic;
  text-shadow: 0 3px 0 #a0400a, 0 -3px 0 #a0400a, 3px 0 0 #a0400a, -3px 0 0 #a0400a, 0 6px 8px #0008; animation: bsVs .5s .7s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes bsVs { from { transform: translate(-50%, -50%) scale(2.5); opacity: 0; } }
.bs-trule { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 13% + 62px); transform: translateX(-50%); width: max-content; max-width: 86%; text-align: center;
  font: 700 16px/1.25 'Fredoka'; color: #5e3a19; background: var(--karte, #fdf3dc); border: 3px solid var(--rand, #b07a45); border-radius: 14px; padding: 7px 14px 8px;
  animation: bsUp .4s .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.bs-go { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 9%); transform: translateX(-50%); min-width: 170px; outline: 5px solid #a8733f; animation: bsUp .4s .6s both; }
.bs-go:active { transform: translate(-50%, 3px); }
.bs.teams .bs-skip { display: none; }
/* Duell */
.bs-duel { position: absolute; left: 50%; top: 47%; width: min(86vw, 380px); height: 150px; transform: translate(-50%, -50%); }
.bs-duel .bs-stk { top: 10px; width: 130px; height: 130px; }
.bs-duel .bs-stk.a { left: 0; animation: bsInL .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.bs-duel .bs-stk.b { right: 0; animation: bsInR .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes bsInL { from { transform: translateX(-60vw); } }
@keyframes bsInR { from { transform: translateX(60vw); } }
/* Team-Ergebnis */
.bs.teamwin .bs-dim { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--tc, #fff) 30%, #0000) 0, #140a04bb 75%); }
.bs-row.bs-win { top: 42%; }
.bs-row.bs-win .bs-stk { width: 110px; height: 110px; animation-delay: .3s; }
.bs-row.bs-win .bs-stk .pt, .bs-row.bs-win .bs-stk img { border-radius: 50%; box-shadow: 0 0 0 5px var(--tc); }
/* Boss-Ergebnis */
.bs.bossend .bs-dim { background: radial-gradient(circle at 50% 46%, #ffb34733 0, #1a1410ee 70%); }
.bs-bossart { top: 40%; animation: bsGrow .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.bs-bossart.won { filter: grayscale(.8) brightness(.7) drop-shadow(0 8px 12px #000a); animation: bsShake .1s .2s linear 6 alternate; }
.bs-row.bs-dmg { top: 64%; }
.bs-dnum { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); min-width: 34px; padding: 3px 8px 4px; border-radius: 10px; background: var(--karte, #fdf3dc);
  border: 2px solid #a8733f; font: 700 17px/1 'Fredoka'; color: #c0392b; font-style: normal; text-align: center; }
.bs.bossend .bs-title { white-space: normal; width: max-content; max-width: 90%; text-align: center; font-size: 27px; line-height: 1.1; }
.bs.teamwin .bs-title, .bs.duell .bs-title { white-space: normal; width: max-content; max-width: 90%; text-align: center; font-size: 28px; line-height: 1.1; }
/* Online-Brett-Blatt (M3e, showOnlineBoardSheet): Stand der Partie im Raum */
.mb-state { flex-direction: column; align-items: stretch; }
.mb-players { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-p { display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; border-radius: 14px; background: #fff; border: 2px solid #f1c6de; font-size: 13px; color: #5a3048; }
.mb-p .pt { width: 26px; height: 26px; flex: none; }
.mb-p small { color: #9a6a86; font-weight: 600; }
.mb-p.bot b::after { content: ' (Bot)'; font-weight: 500; color: #9a6a86; }
.mb-p.away { opacity: .6; }
.mb-levels { justify-content: center; }