/* Hybrid-Brett: HUD im selben Stil wie das Spiel-HUD (dunkle Glasflächen, Fredoka/Cinzel, Gold als Akzent). Handy quer 844 x 390. */
#bdHud { position: absolute; inset: 0; pointer-events: none; display: none; z-index: 7; }
body.board-on #bdHud { display: block; }
#bdHud button { pointer-events: auto; }
/* Im Brettbetrieb ruhen Joystick, Fähigkeiten, Kontextknopf und Ziel; in der eigenen Aufgabe kommen sie zurück */
body.board-on:not(.board-play) #joyLayer, body.board-on:not(.board-play) .pad-layer, body.board-on:not(.board-play) .hud-br,
body.board-on:not(.board-play) .hud-tl .goal, body.board-on:not(.board-play) .me-status, body.board-on .party-frames { display: none !important; }
body.board-dodge .pad-layer { display: none !important; }
body.board-play .bd-top, body.board-play .bd-bag, body.board-play .bd-zoom, body.board-play .bd-back, body.board-play .bd-flag { display: none !important; }

/* oben: Tag mit Mondscheibe, daneben Ruhm-Leiste */
.bd-top { position: absolute; top: calc(8px + var(--st)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; }
.bd-day { position: relative; width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; align-content: center; border-radius: 50%; background: rgba(12, 18, 30, .7); box-shadow: inset 0 0 0 1.5px rgba(255, 236, 200, .35), 0 3px 10px rgba(0, 0, 0, .35); }
.bd-day svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.bd-day .bg { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 3; }
.bd-day .fg { fill: none; stroke: #ff5a3c; stroke-width: 3; stroke-dasharray: 100; stroke-linecap: round; transition: stroke-dashoffset .8s; filter: drop-shadow(0 0 3px #ff6a40); }
.bd-day b { font: 700 17px/1 Cinzel, serif; color: #fff3d6; }
.bd-day small { font: 600 8px/1 Fredoka, sans-serif; color: #ffd9a0; letter-spacing: .04em; margin-top: 1px; }
.bd-fame { display: flex; gap: 4px; }
.bdf { position: relative; display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: 999px; background: rgba(12, 18, 30, .62); font: 600 11px/1 Fredoka, sans-serif; color: #fff3d6; box-shadow: inset 0 0 0 1px rgba(255, 236, 200, .18); }
.bdf em { position: absolute; left: -3px; top: -5px; font: 800 9px/13px Fredoka, sans-serif; font-style: normal; width: 13px; height: 13px; text-align: center; border-radius: 50%; background: #2a2f3c; color: #ffd9a0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.bdf:first-child em { background: linear-gradient(#ffe38a, #d79a1e); color: #2a1a04; }
.bdf i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 Fredoka, sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.bdf span { max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bdf b { color: #ffd166; font-weight: 700; }
.bdf b::before, .bd-flag b::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 2px; background: #ffcf5a; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); vertical-align: -0.5px; }
.bdf u { display: flex; gap: 2px; text-decoration: none; }
.bdf u s { width: 6px; height: 9px; clip-path: polygon(50% 0, 100% 40%, 75% 100%, 25% 100%, 0 40%); }
.bdf.cur { box-shadow: inset 0 0 0 1.5px #ffd166, 0 0 12px rgba(255, 209, 102, .45); }
.bdf.away { opacity: .5; }
.bd-info { position: absolute; top: calc(62px + var(--st)); left: 50%; transform: translate(-50%, -6px); padding: 5px 12px; border-radius: 10px; background: rgba(12, 18, 30, .72); font: 600 11.5px/1.2 Fredoka, sans-serif; color: #ffe8b8; opacity: 0; transition: opacity .3s, transform .3s; white-space: nowrap; }
.bd-info.on { opacity: 1; transform: translate(-50%, 0); }

/* links unten: Beutel; rechts: Zoom; rechts unten: Würfelknopf an der Stelle des Grundangriffs */
.bd-bag { position: absolute; left: calc(12px + var(--sl)); bottom: calc(12px + var(--sb)); display: flex; gap: 5px; flex-wrap: wrap; max-width: 300px; }
.bd-bag span { padding: 4px 9px; border-radius: 9px; background: rgba(12, 18, 30, .66); font: 600 11px/1 Fredoka, sans-serif; color: #fff3d6; box-shadow: inset 0 0 0 1px rgba(255, 236, 200, .2); }
.bd-bag .coin::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff0b0, #e0a020 60%, #8a5a08); vertical-align: -1px; }
.bd-zoom { position: absolute; right: calc(10px + var(--sr)); top: calc(118px + var(--st)); display: flex; flex-direction: column; gap: 6px; }
.bd-zoom .mini-btn { font: 700 18px/1 Fredoka, sans-serif; }
body.board-on .side-col, body.board-on .side-tog { display: none !important; }
.bd-back { position: absolute; left: 50%; bottom: calc(14px + var(--sb)); transform: translateX(-50%); padding: 7px 14px; border: 0; border-radius: 12px; background: rgba(12, 18, 30, .8); color: #ffd166; font: 700 12px Fredoka, sans-serif; box-shadow: inset 0 0 0 1.5px rgba(255, 209, 102, .55); }
.bd-roll { position: absolute; right: calc(16px + var(--sr)); bottom: calc(14px + var(--sb)); display: flex; align-items: flex-end; gap: 8px; opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s; pointer-events: none; }
.bd-roll.on { opacity: 1; transform: none; pointer-events: auto; }
.bd-dice { position: relative; width: 74px; height: 74px; border: 0; border-radius: 22px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 40% 30%, #fff6dc, #ffcf6a 55%, #d8891c); box-shadow: 0 0 0 3px #fff0c0, 0 0 26px 6px rgba(255, 200, 80, .55), 0 6px 16px rgba(0, 0, 0, .45); animation: bdpulse 1.2s ease-in-out infinite; }
.bd-dice svg { width: 46px; height: 46px; }
.bd-dice rect { fill: #fffaf0; stroke: #8a4a10; stroke-width: 2.5; }
.bd-dice circle { fill: #c8381c; }
.bd-dice:active { transform: scale(.93); }
@keyframes bdpulse { 50% { box-shadow: 0 0 0 3px #fff7d8, 0 0 36px 12px rgba(255, 210, 90, .8), 0 6px 16px rgba(0, 0, 0, .45); } }
.bd-items { display: flex; flex-direction: column; gap: 5px; }
.bd-item { border: 0; padding: 6px 10px; border-radius: 10px; background: rgba(12, 18, 30, .8); color: #fff3d6; font: 600 11px Fredoka, sans-serif; box-shadow: inset 0 0 0 1.5px rgba(255, 236, 200, .3); }
.bd-item.on { background: #ffd166; color: #2a1a04; }
.bd-shove { position: absolute; right: calc(24px + var(--sr)); bottom: calc(22px + var(--sb)); width: 66px; height: 66px; border: 0; border-radius: 50%; display: none; font: 700 11px Fredoka, sans-serif; color: #fff; background: radial-gradient(circle at 40% 30%, #9ad8ff, #2a7fd0 60%, #134a80); box-shadow: 0 0 0 2.5px #dff3ff, 0 5px 14px rgba(0, 0, 0, .45); }
body.board-bridge .bd-shove { display: block; }
body.board-bridge #bdHud { display: block; }

/* Kreuzung: beschriftete Knöpfe an den Pfeilen */
.bd-dirs { position: absolute; inset: 0; }
.bd-dir { position: absolute; left: 0; top: 0; border: 0; padding: 6px 11px 5px; border-radius: 11px; background: rgba(12, 18, 30, .85); color: #ffe8b8; font: 700 12px/1.15 Fredoka, sans-serif; text-align: center; box-shadow: inset 0 0 0 1.5px #ffd166, 0 4px 12px rgba(0, 0, 0, .4); white-space: nowrap; }
.bd-dir small { display: block; font-size: 9.5px; font-weight: 600; color: rgba(255, 232, 184, .7); }

/* Karten (Ereignis, Händler, Haltefeld, Partner) */
.bd-card { position: absolute; left: 50%; top: 50%; width: 330px; max-width: calc(100vw - 340px); min-width: 280px; transform: translate(-50%, -46%) scale(.94); opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
  padding: 14px 16px 12px; border-radius: 16px; background: linear-gradient(180deg, rgba(34, 28, 22, .96), rgba(18, 16, 14, .96)); box-shadow: inset 0 0 0 1.5px rgba(255, 214, 140, .45), 0 12px 40px rgba(0, 0, 0, .55); color: #fff3d6; text-align: center; }
.bd-card.on { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.bd-card.other { top: calc(64px + var(--st)); transform: translate(-50%, 0) scale(.62); transform-origin: 50% 0; pointer-events: none; }
.bd-card.other.on { opacity: .9; }
.bd-card.other .bdc-opts, .bd-card.other .bdc-ico { display: none; }
.bd-card .bdc-ico, .bd-task .bdt-ico { width: 46px; height: 46px; margin: -36px auto 4px; border-radius: 50%; background-size: cover; box-shadow: 0 0 0 2.5px #ffe3a8, 0 4px 12px rgba(0, 0, 0, .5); }
.bd-card small, .bd-task small { display: block; font: 600 10px/1.2 Fredoka, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #ffd9a0; }
.bd-card b, .bd-task b { display: block; font: 700 18px/1.15 Cinzel, serif; margin: 3px 0 4px; }
.bd-card p, .bd-task p { margin: 0 0 9px; font: 500 12.5px/1.35 Fredoka, sans-serif; color: rgba(255, 243, 214, .88); }
.bdc-opts { display: flex; flex-direction: column; gap: 5px; max-height: 150px; overflow-y: auto; }
.bdc-opt { border: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 236, 200, .1); color: #fff3d6; font: 600 12px/1.25 Fredoka, sans-serif; box-shadow: inset 0 0 0 1px rgba(255, 236, 200, .28); text-align: left; }
.bdc-opt:not(:disabled):active, .bdc-opt.pick { background: #ffd166; color: #2a1a04; }
.bd-card.other .bdc-opt { opacity: .75; }
.bdc-opt:disabled:not(.pick) { opacity: .45; }
.bd-card:not(.other) .bdc-opt:disabled:not(.pick) { opacity: .4; }
.bdc-t { height: 3px; margin-top: 9px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.bdc-t i { display: block; height: 100%; background: #ffd166; transform-origin: 0 50%; }

/* Aufgaben-Karte und Ergebnis-Karte */
.bd-task { position: absolute; left: 50%; top: 50%; width: 340px; transform: translate(-50%, -44%) scale(.9); opacity: 0; transition: opacity .3s, transform .3s; padding: 16px 18px 13px; border-radius: 18px; text-align: center; color: #fff3d6;
  background: linear-gradient(180deg, rgba(24, 34, 44, .96), rgba(12, 16, 24, .97)); box-shadow: inset 0 0 0 1.5px rgba(140, 220, 255, .45), 0 14px 44px rgba(0, 0, 0, .6); }
.bd-task.on { opacity: 1; transform: translate(-50%, -50%); }
.bdt-meta { display: flex; justify-content: space-between; gap: 8px; font: 600 10.5px/1.2 Fredoka, sans-serif; color: rgba(255, 232, 184, .75); margin-bottom: 6px; }
.bdt-meta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.bdt-you { font: 700 12px Fredoka, sans-serif; color: #8fe0ff; }
.bdt-count { height: 3px; margin-top: 8px; background: rgba(255, 255, 255, .1); border-radius: 2px; overflow: hidden; }
.bdt-count i { display: block; height: 100%; background: #8fe0ff; transform-origin: 0 50%; animation: bdcount linear forwards; }
@keyframes bdcount { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.bdt-medal { width: 54px; height: 54px; margin: -40px auto 6px; border-radius: 50%; display: grid; place-items: center; font: 900 22px Cinzel, serif; color: #2a1a04; box-shadow: 0 0 0 3px rgba(255, 255, 255, .7), 0 6px 18px rgba(0, 0, 0, .5); }
.bdt-medal.gold { background: radial-gradient(circle at 35% 30%, #fff6c8, #ffc83a 55%, #b07810); }
.bdt-medal.silber { background: radial-gradient(circle at 35% 30%, #ffffff, #c8d2dc 55%, #7c8894); }
.bdt-medal.bronze { background: radial-gradient(circle at 35% 30%, #ffe0c0, #d48a4a 55%, #8a4a1a); }
.bdt-medal.none { background: #444; color: #ccc; }
.bdt-lach { font-style: italic; color: #ffd9a0 !important; }
.bdt-gain { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 10px; font: 600 12px Fredoka, sans-serif; }
.bdt-gain b { display: inline; font: 700 13px Fredoka, sans-serif; color: #ffd166; margin: 0; }

/* Tageswechsel */
.bd-dayov { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; opacity: 0; transition: opacity .6s; background: radial-gradient(ellipse at center, rgba(10, 8, 20, .55), rgba(10, 8, 20, .2) 70%); color: #fff3d6; }
.bd-dayov.on { opacity: 1; }
.bd-dayov small { font: 600 11px Fredoka, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #ffd9a0; }
.bd-dayov b { font: 900 44px/1.1 Cinzel, serif; text-shadow: 0 3px 0 #6a2a10, 0 10px 30px rgba(0, 0, 0, .6); }
.bd-dayov span { font: 600 13px Fredoka, sans-serif; color: #ffb0a0; }

/* Ende und Lobby */
.bd-end, .bd-lobby { position: absolute; left: 50%; top: 50%; width: 380px; max-width: calc(100vw - 40px); transform: translate(-50%, -46%); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; padding: 16px 18px 14px; border-radius: 18px; text-align: center; color: #fff3d6;
  background: linear-gradient(180deg, rgba(34, 28, 22, .97), rgba(16, 14, 12, .97)); box-shadow: inset 0 0 0 1.5px rgba(255, 214, 140, .5), 0 14px 44px rgba(0, 0, 0, .6); }
.bd-end.on, .bd-lobby.on { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
#bdHud .bd-lobby { z-index: 3; }
body:not(.board-on) #bdHud { display: block; }
body:not(.board-on) #bdHud > :not(.bd-lobby):not(.bd-end) { display: none; }
.bd-end small, .bd-lobby small { font: 600 10px Fredoka, sans-serif; letter-spacing: .12em; color: #ffd9a0; }
.bd-end > b, .bd-lobby > b { display: block; font: 700 16px/1.2 Cinzel, serif; margin: 2px 0 6px; }
.bd-lobby { padding: 12px 16px 12px; } .bd-lobby p { font-size: 11.5px !important; margin-bottom: 8px !important; }
.bd-end ol { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bd-end li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 2px 8px; padding: 5px 10px; border-radius: 10px; background: rgba(255, 236, 200, .07); text-align: left; font: 600 13px Fredoka, sans-serif; }
.bd-end li em { font-style: normal; color: #ffd9a0; } .bd-end li b { color: #ffd166; font-size: 15px; } .bd-end li small { grid-column: 2 / 4; letter-spacing: 0; color: rgba(255, 232, 184, .6); }
.bd-end li.me { box-shadow: inset 0 0 0 1.5px #ffd166; }
.bd-lobby p { margin: 0 0 10px; font: 500 12px/1.35 Fredoka, sans-serif; color: rgba(255, 243, 214, .85); }
.bdl-row { display: flex; gap: 6px; margin-bottom: 8px; }
.bdl-opt { flex: 1; border: 0; padding: 7px 6px; border-radius: 11px; background: rgba(255, 236, 200, .08); color: #fff3d6; box-shadow: inset 0 0 0 1px rgba(255, 236, 200, .25); }
.bdl-opt b { display: block; font: 700 13px Fredoka, sans-serif; } .bdl-opt small { font-size: 9.5px; letter-spacing: 0; }
.bdl-opt.on { background: rgba(255, 209, 102, .2); box-shadow: inset 0 0 0 2px #ffd166; }
.bdl-tog { display: block; font: 600 12px Fredoka, sans-serif; margin-bottom: 8px; } .bdl-tog small { letter-spacing: 0; }
.bdl-who { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; font: 600 11.5px Fredoka, sans-serif; margin-bottom: 10px; }
.bdl-who i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.bdl-btns { display: flex; gap: 8px; justify-content: center; align-items: center; } .bdl-wait { font: 600 12px Fredoka, sans-serif; color: #ffd9a0; }

/* Fahnen über den Figuren und Zahlen */
.bd-layer { position: absolute; inset: 0; }
.bd-flag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 4px; padding: 2px 7px 2px 3px; border-radius: 9px; background: rgba(12, 18, 30, .72); font: 600 11px/1.1 Fredoka, sans-serif; color: #fff; white-space: nowrap; will-change: transform; box-shadow: inset 0 0 0 1px rgba(255, 236, 200, .2); }
.bd-flag em { font-style: normal; font: 800 10px/15px Fredoka, sans-serif; min-width: 18px; height: 15px; padding: 0 3px; border-radius: 5px; text-align: center; background: #3a4050; color: #ffe8b8; }
.bd-flag em.r1 { background: linear-gradient(#ffe38a, #d79a1e); color: #2a1a04; } .bd-flag em.r2 { background: linear-gradient(#f4f6fa, #a8b2bc); color: #1a1e24; } .bd-flag em.r3 { background: linear-gradient(#ffd2b0, #b86a30); color: #2a1206; }
.bd-flag b { color: #ffd166; }
.bd-flag.cur { box-shadow: inset 0 0 0 1.5px #ffd166, 0 0 10px rgba(255, 209, 102, .5); }
.bd-pop { position: absolute; left: 0; top: 0; font: 900 40px/1 Cinzel, serif; color: #fff3d6; text-shadow: 0 3px 0 #8a3a10, 0 0 18px rgba(255, 190, 80, .8); pointer-events: none; }
body.board-on:not(.board-play) .nametag { display: none !important; }
/* Seil über die Schlucht */
.sl-top { position: absolute; top: calc(10px + var(--st)); left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; padding: 6px 14px; border-radius: 14px; background: rgba(12, 18, 30, .72); font: 600 12px Fredoka, sans-serif; color: #ffe8b8; }
.sl-top b { font: 700 16px Fredoka, sans-serif; color: #fff3d6; } .sl-top b.low { color: #ff7a6a; }
.sl-rope { position: absolute; left: 12%; right: 12%; top: calc(62px + var(--st)); height: 26px; }
.sl-line { position: absolute; left: 0; right: 0; top: 12px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #c8a060, #8a6430); box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.sl-rope u { position: absolute; top: 2px; width: 6px; height: 22px; margin-left: -3px; border-radius: 2px; background: #5a3a1a; }
.sl-rope em { position: absolute; top: 0; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe8b0, #e09a30); box-shadow: 0 0 0 2px #fff3d6, 0 3px 8px rgba(0, 0, 0, .5); transition: left .12s linear; }
.sl-rope em.fall { background: #ff6a5a; }
.sl-bal { position: absolute; left: 50%; bottom: calc(26px + var(--sb)); width: 230px; transform: translateX(-50%); text-align: center; }
.sl-bal svg { width: 230px; }
.sl-bal .arc { fill: none; stroke: rgba(255, 243, 214, .35); stroke-width: 10; stroke-linecap: round; }
.sl-bal .red { fill: none; stroke: rgba(255, 90, 70, .75); stroke-width: 10; stroke-linecap: round; }
.sl-bal line { stroke: #fff3d6; stroke-width: 5; stroke-linecap: round; transition: transform .1s linear; } .sl-bal line.hot { stroke: #ff7a6a; }
.sl-bal circle { fill: #fff3d6; }
.sl-wind { height: 18px; font: 700 13px Fredoka, sans-serif; color: #9fe3ff; opacity: 0; transition: opacity .2s; } .sl-wind.on { opacity: 1; }
.sl-btn { position: absolute; bottom: calc(24px + var(--sb)); width: 120px; height: 84px; border: 0; border-radius: 20px; display: flex; align-items: center; justify-content: center; gap: 4px; font: 700 15px Fredoka, sans-serif; color: #fff3d6; background: rgba(12, 18, 30, .7); box-shadow: inset 0 0 0 2px rgba(255, 236, 200, .4); pointer-events: auto; touch-action: none; }
.sl-btn svg { width: 24px; height: 24px; fill: none; stroke: #ffd166; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sl-btn.l { left: calc(18px + var(--sl)); } .sl-btn.r { right: calc(18px + var(--sr)); }
.sl-btn.on { background: rgba(255, 209, 102, .35); box-shadow: inset 0 0 0 2.5px #ffd166; }
.bd-tchip { position: absolute; top: calc(60px + var(--st)); left: 50%; transform: translateX(-50%); display: none; gap: 8px; align-items: center; padding: 5px 12px; border-radius: 12px; background: rgba(12, 18, 30, .78); box-shadow: inset 0 0 0 1px rgba(140, 220, 255, .45); font: 600 11.5px/1.2 Fredoka, sans-serif; color: #dff3ff; white-space: nowrap; }
.bd-tchip.on { display: flex; } .bd-tchip b { font: 700 12px Fredoka, sans-serif; color: #fff3d6; }
body.board-play .bd-tchip { top: auto; bottom: calc(56px + var(--sb)); }
body.in-mg .bd-tchip { display: none !important; }
/* Karten und Fenster liegen über den Fahnen der Figuren (deckend), Profil-Gold ruht während der Partie (es zählen Münzen) */
.bd-layer { z-index: 0; } .bd-card, .bd-task, .bd-end, .bd-lobby, .bd-dayov, .bd-dirs { z-index: 2; }
.bd-dirs { pointer-events: none; } .bd-dir { pointer-events: auto; }
body.board-on .hud-tr .gold { display: none !important; }
.bd-dirs { position: absolute; inset: auto; left: 50%; bottom: calc(14px + var(--sb)); transform: translateX(-50%); display: flex; gap: 8px; }
.bd-dir { position: relative; display: flex; align-items: center; gap: 7px; text-align: left; padding: 7px 12px 6px 8px; }
.bd-dir svg { width: 22px; height: 22px; flex: 0 0 auto; fill: #ffd166; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
/* Händler und lange Wahllisten: zwei Spalten, damit alles ohne Scrollen ins Querformat passt */
.bd-card { width: 400px; max-width: calc(100vw - 120px); }
.bdc-opts.two { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; max-height: none; }
.bdc-opts.two .bdc-opt { font-size: 11px; padding: 6px 8px; }
/* 5 bis 6 Spieler: Ruhm-Leiste ohne Namen (Kreis mit Anfangsbuchstabe und Ruhm), damit sie nicht in die Knöpfe ragt */
.bd-fame.compact .bdf span { display: none; }
.bd-fame.compact .bdf { padding-right: 6px; }
body.board-on:not(.board-play) .area-banner { display: none !important; }
.bdl-opt small { display: block; white-space: nowrap; }

/* ---------- Schritt 3: Partie-Bogen ---------- */
/* Akt-Zeile unter Tag und Ruhm-Leiste, Letzte Chance */
.bd-akt { position: absolute; top: calc(57px + var(--st)); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; font: 600 9.5px/1 Fredoka, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 217, 160, .75); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); white-space: nowrap; pointer-events: none; }
.bd-akt em { font-style: normal; letter-spacing: .04em; padding: 2px 6px; border-radius: 6px; background: linear-gradient(#ff8a4a, #c83a1a); color: #fff3e0; text-shadow: none; box-shadow: 0 0 10px rgba(255, 90, 40, .6); }
body.board-play .bd-akt, body.board-on .bd-tchip.on ~ .bd-akt { display: none; }
.bdf.cult { box-shadow: inset 0 0 0 1.5px #ff4a2a, 0 0 10px rgba(255, 60, 30, .45); }
.bdf.cult i { box-shadow: 0 0 0 2px #ff4a2a; }
.bd-flag.cult { box-shadow: inset 0 0 0 1.5px #ff4a2a; } .bd-flag.cult::after { content: 'Kult'; margin-left: 3px; padding: 1px 4px; border-radius: 4px; background: #8a1a10; font-size: 9px; color: #ffd0b8; }
/* Beutel: Splitter, Hinweise, geheime Zeichen */
.bd-bag .sh { --c: #fff; color: #10141c; background: var(--c); box-shadow: 0 0 10px var(--c); font-weight: 700; }
.bd-bag .hintbtn { pointer-events: auto; border: 0; padding: 4px 9px; border-radius: 9px; background: rgba(60, 30, 90, .78); color: #f0e0ff; font: 600 11px/1 Fredoka, sans-serif; box-shadow: inset 0 0 0 1px rgba(210, 170, 255, .5); }
.bd-bag .ash { background: rgba(90, 16, 12, .85) !important; color: #ffc0a8 !important; box-shadow: inset 0 0 0 1px rgba(255, 90, 60, .6) !important; }
.bd-bag .gift { background: rgba(60, 30, 90, .78) !important; color: #f0e0ff !important; }
.bd-bag .cultb { background: #8a1a10 !important; color: #ffe0d0 !important; }
/* Maelis' Gaben beim Würfeln */
.bd-gold { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 150px; }
.bd-item.gold { background: linear-gradient(#ffe38a, #c8901c); color: #2a1a04; box-shadow: 0 0 10px rgba(255, 200, 80, .6); min-width: 30px; }
.bd-item.ash { background: rgba(90, 30, 110, .9); color: #f4e4ff; box-shadow: inset 0 0 0 1.5px #c49aff; }
/* Geheime Wahl (nur dieses Handy) */
.bd-secret, .bd-reckon { position: absolute; left: 50%; top: 50%; width: 430px; max-width: calc(100vw - 110px); transform: translate(-50%, -46%) scale(.95); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 4;
  padding: 15px 18px 12px; border-radius: 18px; text-align: center; color: #f4e8ff; background: radial-gradient(ellipse at 50% 0, rgba(110, 50, 160, .97), rgba(30, 14, 44, .98) 70%); box-shadow: inset 0 0 0 1.5px rgba(210, 170, 255, .6), 0 0 40px rgba(150, 80, 255, .35), 0 14px 44px rgba(0, 0, 0, .6); }
.bd-secret.on, .bd-reckon.on { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.bd-secret .eye { width: 42px; height: 42px; margin: -36px auto 4px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #ffe0a0 0 14%, #c060ff 15% 30%, #2a0a3a 31%); box-shadow: 0 0 0 2.5px #e8d0ff, 0 0 22px rgba(190, 120, 255, .8); }
.bd-secret small, .bd-reckon small { display: block; font: 600 10px/1.2 Fredoka, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #d8b8ff; }
.bd-secret > b, .bd-reckon > b { display: block; font: 700 18px/1.15 Cinzel, serif; margin: 3px 0 4px; color: #fff4ff; }
.bd-secret p, .bd-reckon p { margin: 0 0 9px; font: 500 12px/1.35 Fredoka, sans-serif; color: rgba(244, 232, 255, .9); }
.bd-secret .opts, .bd-reckon .opts { display: flex; gap: 6px; }
.bd-secret .opts button, .bd-reckon .opts button { flex: 1; border: 0; padding: 8px 8px 7px; border-radius: 12px; text-align: left; color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(220, 190, 255, .35); }
.bd-secret .opts button b, .bd-reckon .opts button b { display: block; font: 700 12px/1.2 Fredoka, sans-serif; margin-bottom: 3px; }
.bd-secret .opts button span, .bd-reckon .opts button span { display: block; font: 500 10.5px/1.25 Fredoka, sans-serif; color: rgba(244, 232, 255, .75); }
.bd-secret .opts button.gift { background: linear-gradient(180deg, rgba(255, 140, 60, .22), rgba(120, 20, 10, .3)); box-shadow: inset 0 0 0 1px rgba(255, 150, 90, .55); }
.bd-secret .opts button.pick, .bd-reckon .opts button.pick { background: #e8d0ff; color: #2a0a3a; } .bd-secret .opts button.pick span, .bd-reckon .opts button.pick span { color: #4a2a5a; }
.bd-secret .opts button:disabled:not(.pick), .bd-reckon .opts button:disabled:not(.pick) { opacity: .4; }
.bd-secret .bdc-t i, .bd-reckon .bdc-t i { background: #d8b8ff; }
.bd-reckon { background: radial-gradient(ellipse at 50% 0, rgba(140, 30, 20, .97), rgba(30, 8, 8, .98) 70%); box-shadow: inset 0 0 0 1.5px rgba(255, 140, 100, .6), 0 0 50px rgba(255, 60, 20, .35), 0 14px 44px rgba(0, 0, 0, .6); color: #ffeee8; }
.bd-reckon small { color: #ffb8a0; } .bd-reckon .opts button.kult { background: linear-gradient(180deg, rgba(255, 60, 30, .35), rgba(90, 10, 6, .5)); box-shadow: inset 0 0 0 1px rgba(255, 110, 70, .7); }
.bd-reckon .opts button.held { background: rgba(255, 236, 200, .12); }
.rk-foot { display: flex; align-items: center; gap: 10px; font: 600 10.5px Fredoka, sans-serif; color: rgba(255, 220, 200, .75); margin-top: 6px; } .rk-foot .bdc-t { flex: 1; margin: 0; } .bd-reckon .bdc-t i { background: #ff9a6a; }
/* Geheim erhalten / offengelegter Hinweis (kleine Karte oben) */
.bd-gotsec { position: absolute; top: calc(62px + var(--st)); left: 50%; width: 360px; transform: translate(-50%, -10px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 4; padding: 9px 14px 8px; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, rgba(70, 34, 104, .96), rgba(30, 14, 44, .97)); box-shadow: inset 0 0 0 1.5px rgba(210, 170, 255, .55), 0 10px 30px rgba(0, 0, 0, .5); color: #f4e8ff; }
.bd-gotsec.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.bd-gotsec.pub { background: linear-gradient(180deg, rgba(34, 28, 22, .97), rgba(16, 14, 12, .97)); box-shadow: inset 0 0 0 1.5px rgba(255, 214, 140, .55), 0 10px 30px rgba(0, 0, 0, .5); color: #fff3d6; }
.bd-gotsec small { display: block; font: 600 9.5px/1.2 Fredoka, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #d8b8ff; } .bd-gotsec.pub small { color: #ffd9a0; }
.bd-gotsec b { display: block; font: 700 14px/1.2 Cinzel, serif; margin: 2px 0 3px; } .bd-gotsec p { margin: 0; font: 500 11.5px/1.32 Fredoka, sans-serif; }
.bd-gotsec p.ash { margin-top: 4px; color: #ffb0a0; } .bd-gotsec p.why { margin-top: 3px; color: rgba(244, 232, 255, .6); font-size: 10px; }
/* Hinweis-Tafel */
.bd-hints { position: absolute; left: 50%; top: 50%; width: 520px; max-width: calc(100vw - 80px); max-height: calc(100vh - 40px); transform: translate(-50%, -48%); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 5; padding: 12px 16px 10px; border-radius: 18px; color: #f4e8ff;
  background: linear-gradient(180deg, rgba(40, 20, 60, .98), rgba(18, 10, 28, .98)); box-shadow: inset 0 0 0 1.5px rgba(210, 170, 255, .5), 0 14px 44px rgba(0, 0, 0, .6); display: flex; flex-direction: column; }
.bd-hints.on { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.bd-hints small { font: 600 10px Fredoka, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #d8b8ff; } .bd-hints > b { font: 700 16px Cinzel, serif; margin: 2px 0 6px; }
.bd-hints .x { position: absolute; right: 10px; top: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font: 700 16px Fredoka, sans-serif; }
.bd-hints .list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow-y: auto; min-height: 0; }
.bd-hints .h { position: relative; padding: 7px 9px; border-radius: 11px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(210, 170, 255, .25); text-align: left; }
.bd-hints .h.mine { background: rgba(160, 100, 255, .12); }
.bd-hints .h b { display: block; font: 700 12px Fredoka, sans-serif; color: #fff; } .bd-hints .h p { margin: 2px 0 4px; font: 500 10.5px/1.3 Fredoka, sans-serif; color: rgba(244, 232, 255, .82); }
.bd-hints .h em { font: 600 9.5px Fredoka, sans-serif; font-style: normal; color: #c8a8f0; }
.bd-hints .h button { border: 0; padding: 4px 9px; border-radius: 8px; background: #e8d0ff; color: #2a0a3a; font: 700 10.5px Fredoka, sans-serif; }
.bd-hints .none { grid-column: 1 / 3; margin: 6px 0; font: 500 12px Fredoka, sans-serif; color: rgba(244, 232, 255, .7); }
.bd-hints .foot { margin: 7px 0 0; font: 500 10px/1.3 Fredoka, sans-serif; color: rgba(244, 232, 255, .6); }
/* Szenen: Verrat, Masken fallen, Splitter, Finale */
.bd-scene { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; opacity: 0; transition: opacity .7s; pointer-events: none; z-index: 3; padding: 0 12%; color: #fff3d6; }
.bd-scene.on { opacity: 1; }
.bd-scene small { font: 600 11px Fredoka, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #ffd9a0; }
.bd-scene > b { font: 900 34px/1.1 Cinzel, serif; margin: 4px 0 8px; text-shadow: 0 3px 0 #4a0a04, 0 10px 30px rgba(0, 0, 0, .7); }
.bd-scene p { margin: 0 0 6px; max-width: 560px; font: 500 13.5px/1.4 Fredoka, sans-serif; text-shadow: 0 2px 6px rgba(0, 0, 0, .9); }
.bd-scene p.q { font: italic 600 15px/1.4 Cinzel, serif; color: #ffd0b8; }
.bd-scene.verrat, .bd-scene.finale { background: radial-gradient(ellipse at center, rgba(60, 6, 2, .35), rgba(30, 2, 0, .82) 75%); }
.bd-scene.verrat > b, .bd-scene.finale > b { color: #ffb08a; animation: bdburn 2.4s ease-in-out infinite; }
@keyframes bdburn { 50% { text-shadow: 0 3px 0 #4a0a04, 0 0 30px rgba(255, 90, 30, .9); } }
.bd-scene.reveal { background: radial-gradient(ellipse at center, rgba(20, 6, 6, .55), rgba(10, 2, 2, .85) 75%); }
.bd-scene ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 5px; min-width: 360px; }
.bd-scene li { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 11px; background: rgba(255, 236, 200, .08); font: 600 13px Fredoka, sans-serif; text-align: left; }
.bd-scene li.c { background: rgba(140, 20, 10, .55); box-shadow: inset 0 0 0 1.5px #ff5a3a; }
.bd-scene li i { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; } .bd-scene li em { font-style: normal; font-weight: 500; color: rgba(255, 230, 210, .85); }
.bd-scene p.m { color: #ff9a7a; }
.bd-scene.shard { background: radial-gradient(ellipse at center, rgba(10, 20, 40, .2), rgba(5, 10, 20, .55) 70%); align-content: end; padding-bottom: calc(40px + var(--sb)); }
.bd-scene.shard > b { font-size: 28px; }
.bd-scene .gem { width: 26px; height: 40px; background: var(--c); clip-path: polygon(50% 0, 100% 38%, 72% 100%, 28% 100%, 0 38%); filter: drop-shadow(0 0 12px var(--c)); margin-bottom: 4px; animation: bdgem 1.4s ease-in-out infinite; }
@keyframes bdgem { 50% { transform: translateY(-4px) scale(1.08); } }
/* Kultist im Finale: Schattenrolle */
.bd-shadow { position: absolute; right: calc(14px + var(--sr)); bottom: calc(14px + var(--sb)); width: 250px; padding: 10px 12px; border-radius: 16px; display: none; z-index: 4; pointer-events: auto; color: #ffe8e0; text-align: center;
  background: radial-gradient(ellipse at 50% 0, rgba(140, 26, 14, .95), rgba(30, 6, 4, .95) 75%); box-shadow: inset 0 0 0 1.5px rgba(255, 120, 80, .65), 0 0 30px rgba(255, 60, 20, .35); }
.bd-shadow.on { display: block; }
.bd-shadow small { font: 600 9.5px Fredoka, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #ffb0a0; } .bd-shadow > b { display: block; font: 700 14px Cinzel, serif; margin: 2px 0 7px; }
.bds-btns { display: flex; gap: 7px; }
.bds-btns button { position: relative; flex: 1; border: 0; padding: 9px 4px 7px; border-radius: 13px; color: #fff; font: 700 11.5px Fredoka, sans-serif; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 150, 110, .6); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bds-btns button i { width: 30px; height: 30px; border-radius: 50%; } .bds-btns i.f { background: radial-gradient(circle, #fff0a0 10%, #ff7a2a 40%, #a01a08 72%, transparent 74%); } .bds-btns i.d { background: radial-gradient(circle at 50% 38%, #e0c0b0 0 22%, transparent 23%), radial-gradient(ellipse at 50% 90%, #5a1a14 0 48%, transparent 49%), #2a0806; box-shadow: inset 0 0 0 2px #ff6a4a; }
.bds-btns button em { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 13px; font: 700 16px Fredoka, sans-serif; font-style: normal; color: #fff; background: rgba(0, 0, 0, .55); }
.bds-btns button em:empty { display: none; }
.bds-btns button:disabled { opacity: .85; }
body.board-shadow .bd-bag, body.board-shadow .bd-zoom { display: none !important; }
/* Aufgaben-Karte: Kennzeichen */
.bdt-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: -3px 0 7px; }
.bdt-tags span { padding: 2px 7px; border-radius: 6px; font: 600 10px Fredoka, sans-serif; background: rgba(255, 255, 255, .1); color: #dff3ff; }
.bdt-tags .cult { background: rgba(160, 30, 14, .7); color: #ffd8c8; } .bdt-tags .last { background: linear-gradient(#ff8a4a, #c83a1a); color: #fff; } .bdt-tags .weak { background: rgba(80, 160, 90, .4); color: #e0ffe0; } .bdt-tags .tr { background: rgba(255, 209, 102, .22); color: #ffe8b8; }
/* Lobby: Verrat-Schalter */
.bdl-tog { display: flex; width: 100%; align-items: center; gap: 10px; border: 0; padding: 6px 10px; margin: 0 0 8px; border-radius: 11px; background: rgba(255, 236, 200, .06); color: #fff3d6; text-align: left; box-shadow: inset 0 0 0 1px rgba(255, 236, 200, .2); }
.bdl-tog i { position: relative; width: 34px; height: 19px; flex: 0 0 auto; border-radius: 10px; background: rgba(255, 255, 255, .18); transition: background .2s; }
.bdl-tog i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff3d6; transition: transform .2s; }
.bdl-tog.on i { background: #c8402a; } .bdl-tog.on i::after { transform: translateX(15px); }
.bdl-tog b { display: block; font: 700 12px Fredoka, sans-serif; } .bdl-tog small { display: block; font: 500 10px/1.25 Fredoka, sans-serif; letter-spacing: 0; color: rgba(255, 232, 184, .7); }
/* Siegerehrung */
.bd-end.story { width: 700px; max-width: calc(100vw - 30px); display: flex; gap: 14px; padding: 14px 16px 12px; text-align: left; }
.bd-end.story .be-l { flex: 1.05; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bd-end.story .be-l > b { display: block; font: 900 24px/1.1 Cinzel, serif; margin: 3px 0 4px; color: #ffe2a0; text-shadow: 0 2px 0 #5a2a08; }
.bd-end.story .be-l.asche > b { color: #ff9a7a; }
.bd-end.story .be-l p { margin: 0 0 6px; font: 500 11.5px/1.35 Fredoka, sans-serif; color: rgba(255, 243, 214, .85); }
.bd-end .pod { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 4px 0 6px; }
.bd-end .pod .p { position: relative; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px 18px; border-radius: 12px 12px 6px 6px; background: rgba(255, 236, 200, .08); }
.bd-end .pod .p1 { order: 2; padding-bottom: 34px; background: linear-gradient(180deg, rgba(255, 209, 102, .3), rgba(255, 209, 102, .08)); box-shadow: inset 0 0 0 1.5px #ffd166; } .bd-end .pod .p2 { order: 1; padding-bottom: 24px; } .bd-end .pod .p3 { order: 3; }
.bd-end .pod i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 14px Fredoka, sans-serif; font-style: normal; color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.bd-end .pod span { font: 600 11px Fredoka, sans-serif; max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bd-end .pod b { font: 700 16px Fredoka, sans-serif; color: #ffd166; }
.bd-end .pod em { font: 600 9px/1.1 Fredoka, sans-serif; font-style: normal; color: #ffb88a; }
.bd-end .pod u { position: absolute; bottom: 3px; text-decoration: none; font: 900 13px Cinzel, serif; color: rgba(255, 236, 200, .6); }
.bd-end .loot, .bd-end .ttl { font: 600 11.5px Fredoka, sans-serif; margin-top: 2px; } .bd-end .loot span { color: rgba(255, 232, 184, .6); font-size: 10px; } .bd-end .ttl b { display: inline; color: #ffd166; }
.bd-end.story .be-r { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.bd-end.story .be-r ol { flex: 1; overflow-y: auto; max-height: 250px; margin-bottom: 8px; }
.bd-end.story li small { font-size: 9.5px; line-height: 1.25; }
.bd-end li.cult { background: rgba(140, 20, 10, .3); } .bd-end li s { text-decoration: none; font-size: 9.5px; padding: 1px 5px; border-radius: 5px; background: #8a1a10; color: #ffd8c8; }
.bd-end.story .btn { align-self: center; }
.bd-akt.hide { display: none; }
.bdf:first-child em:not(.pl1) { background: #2a2f3c; color: #ffd9a0; } .bdf em.pl1 { background: linear-gradient(#ffe38a, #d79a1e); color: #2a1a04; }
body.bd-cine .bd-flag, body.bd-cine .bd-akt, body.bd-cine .bd-info { display: none !important; }
.bd-bag .sh s { display: inline-block; width: 7px; height: 11px; margin-right: 4px; background: #10141c; clip-path: polygon(50% 0, 100% 40%, 75% 100%, 25% 100%, 0 40%); vertical-align: -1px; text-decoration: none; }
body.board-shadow .bd-tchip { top: auto; bottom: calc(14px + var(--sb)); left: calc(16px + var(--sl)); transform: none; max-width: 52vw; overflow: hidden; }
body.bd-endon .bd-bag, body.bd-endon .bd-akt, body.bd-endon .bd-flag { display: none !important; }
body.bd-endon .bd-top { display: none !important; }