/* Zügelchaos z'Basel — calm European Christmas on the winter-evening map.
   Night-navy fields, a soft warm serif for titles (Fraunces), clean Inter for UI, lantern amber + a little pine and
   Christmas red, fairy lights, gentle snow. Restraint over decoration (user: not cheesy, not too "designy").
   Type scale, line-heights, tracking and spacing are tokens (see DESIGN-SYSTEM.md): use them, no loose px values. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..800;1,9..144,300..800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --night: #0d1726; --night2: #142238; --night3: #1c2d47;
  --ink: #eef1f4; --mute: #8e9db2; --faint: #5d6c82;
  --line: rgba(238, 241, 244, 0.14); --line2: rgba(238, 241, 244, 0.28);
  --amber: #ffbe6b; --amber2: #f08f2e; --snow: #f7f3ec; --red: #c8382f; --green: #57c18a; --pine: #2f6b4f; --berry: #b8322c;
  --gold: #d9a93c; --basel: #b8322c;
  --title: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ui: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --r: 14px;

  --u: 4px;   /* spacing base unit: 4 px on phone/desk; 0.5 vh on the big screen (.host) */
  /* type scale (phone / desk pages) */
  --fs-xs: 13px; --fs-s: 15px; --fs-m: 17px; --fs-l: 19px; --fs-xl: 22px;
  --fs-2xl: clamp(28px, 3.6vw, 56px); --fs-3xl: clamp(56px, 7vw, 120px);
  /* line-heights and tracking */
  --lh-num: 1; --lh-display: 1.06; --lh-title: 1.15; --lh-body: 1.35; --lh-text: 1.5;
  --ls-display: -0.02em; --ls-title: -0.01em; --ls-label: 0.08em;
}
/* spacing: ONE scale of steps on the base unit. Declared on .host too, so the steps re-resolve with its vh unit. */
:root, .host {
  --s1:calc(var(--u) * 1);  --s2: calc(var(--u) * 2);  --s3: calc(var(--u) * 3);  --s4: calc(var(--u) * 4);
  --s5: calc(var(--u) * 5);  --s6: calc(var(--u) * 6);  --s7: calc(var(--u) * 8);  --s8: calc(var(--u) * 12);
  --s9: calc(var(--u) * 16); --s10: calc(var(--u) * 24);
}
/* big screen: everything in vh (16:9 TVs and projectors are height-bound); 2.5 vh is the floor for anything people read */
.host {
  --u: max(3px, 0.5vh);
  --fs-xs: max(12px, 2vh);   /* operator-only UI (hover bar), never audience text */
  --fs-s: 2.5vh; --fs-m: 3vh; --fs-l: 3.6vh; --fs-xl: 5vh;
  --fs-2xl: min(8vh, 5vw); --fs-3xl: min(13vh, 8vw);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--ink); font-family: var(--ui); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }

/* ---------- type roles ---------- */
.t-xxl { font: 600 var(--fs-3xl)/0.95 var(--title); letter-spacing: var(--ls-display); font-variation-settings: 'SOFT' 100; }
.t-xl  { font: 600 var(--fs-2xl)/var(--lh-display) var(--title); letter-spacing: var(--ls-display); font-variation-settings: 'SOFT' 100; text-wrap: balance; }
.t-l   { font: 600 var(--fs-xl)/var(--lh-title) var(--title); letter-spacing: var(--ls-title); text-wrap: balance; }
.t-m   { font: 500 var(--fs-l)/var(--lh-body) var(--title); letter-spacing: 0; text-wrap: pretty; }
.t-s   { font: 500 var(--fs-xs)/1.2 var(--ui); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--mute); }
.host .t-s { font-size: var(--fs-s); }
em, .it { font-style: italic; font-family: var(--title); }
.amber { color: var(--amber); }
.mute { color: var(--mute); }
.dot { display: inline-block; width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--amber); vertical-align: 0.06em; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* team swatches carry the team symbol: never colour alone */
.swatch { display: inline-grid !important; place-items: center; width: 1.25em !important; height: 1.25em !important; min-width: 18px; min-height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(10,15,30,0.55) !important; vertical-align: middle; flex: none; }
.swatch::after { content: attr(data-s); font: 700 0.72em/1 'Segoe UI Symbol', 'Apple Symbols', sans-serif; letter-spacing: 0; }

/* drawn icons (icons.js): inherit colour, sit on the text baseline; coins in gold */
.ico { width: 1em; height: 1em; vertical-align: -0.14em; margin-left: 0.12em; flex: none; }
.ico.gold { color: #d9a25a; }   /* Grättimaa: baked bread colour */

/* ================================================================ big screen */
.host { position: fixed; inset: 0; overflow: hidden; font-size: var(--fs-m); }
.host #map { position: absolute; inset: 0; }
.host #map canvas { display: block; }
.layer { position: absolute; inset: 0; pointer-events: none; }
.layer > * { pointer-events: auto; }
.shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,23,38,0.72) 0%, rgba(13,23,38,0) 18%, rgba(13,23,38,0) 72%, rgba(13,23,38,0.78) 100%); pointer-events: none; }
.glow { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(60vw 40vh at 0% 100%, rgba(255, 170, 80, 0.16), transparent 70%),
  radial-gradient(50vw 35vh at 100% 100%, rgba(255, 170, 80, 0.12), transparent 70%); }
canvas.snowcv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.veil { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }

/* HUD: one safe edge (s7 = 4 vh) for everything pinned to the screen border */
.hud-top { position: absolute; left: var(--s7); top: var(--s7); right: var(--s7); display: flex; align-items: baseline; gap: var(--s6); }
.hud-top .brand { font: 700 var(--fs-m)/var(--lh-num) var(--title); letter-spacing: var(--ls-title); }
.hud-top .phase { display: none; }
.hud-top .grow { flex: 1; }
.hud-top .round { font: 500 var(--fs-s)/var(--lh-num) var(--ui); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--mute); }

.host { --board-w: clamp(380px, max(30vw, 56vh), 44vw); }   /* the team bar grows with the vh type: names keep ~16 characters on tall and small screens */
.board { position: absolute; right: var(--s7); top: calc(var(--s7) * 2 + var(--fs-m)); width: var(--board-w); background: rgba(13, 23, 38, 0.82); backdrop-filter: blur(8px); border-top: 2px solid var(--amber); padding: var(--s4) var(--s5) var(--s3); }
.board h4 { margin: 0 0 var(--s2); }
.board .row { display: grid; grid-template-columns: 1.2em auto minmax(0, 1fr) auto 2em 2.7em; align-items: center; column-gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--line); font: 500 var(--fs-m)/var(--lh-num) var(--ui); transition: transform .5s, background .5s; }
.board .row .n { font: 700 var(--fs-m)/var(--lh-num) var(--title); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.board .row .num { font: 700 var(--fs-m)/var(--lh-num) var(--title); font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.1em; }
.board .row .num .ico { width: 0.85em; height: 0.85em; color: var(--mute); }
.board .row .num .ico.gold { color: #d9a25a; }
/* round 13b: always-on rank badge (ties share a place; the leader in lamp), fixed number columns so rows line up,
   names get the free width (no empty item rings on the board; the bar width follows the vh type, --board-w) */
.board .row .rk { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line2); font: 700 var(--fs-s)/var(--lh-num) var(--ui); font-variant-numeric: tabular-nums; color: var(--mute); }
.board .row .rk.one { background: var(--amber); color: var(--night); box-shadow: none; }
.board .row .num.c b { font-weight: inherit; }
.board .row .num.c.bump { animation: bump .35s cubic-bezier(.2,1,.4,1); }
@keyframes bump { 40% { transform: scale(1.18); color: var(--amber); } }
.board .row .inv .it.e { display: none; }

/* ---------- snow badge: the ONE treatment for everything that pops up over the 3D scene (DESIGN-SYSTEM.md «Popups»)
   cream fill + night ink (17:1 on its own fill, whatever is behind) · night keyline (separates from snow) ·
   soft drop shadow (lifts off rooftops) · scale-pop + settle in, calm fade out; reduced motion = fade only. */
:root, .host {
  --badge: #fffaf2; --badge-ink: #0d1726; --badge-sub: #44526a;   /* sub-line: 7.6:1 on the badge */
  --badge-plus: #2c6649; --badge-minus: #b02f29; --badge-gold: #8a5d1c;   /* 6.5 / 6.2 / 5.5:1 on the badge */
  --kl: 2px; --badge-shadow: 0 0 0 var(--kl) rgba(13, 23, 38, 0.92), 0 var(--s2) var(--s6) rgba(13, 23, 38, 0.45);
}
.host { --kl: max(2px, 0.35vh); }
@keyframes badge-in { 0% { opacity: 0; transform: var(--at) scale(0.6); } 55% { opacity: 1; transform: var(--at) scale(1.08); } 100% { opacity: 1; transform: var(--at) scale(1); } }
@keyframes badge-fade { from { opacity: 0; } to { opacity: 1; } }

/* event ticker: bottom left; lifts above the turn banner when both are on; a soft dark vignette sits behind it */
.ticker { position: absolute; left: var(--s7); right: var(--s7); bottom: var(--s7); display: none; transition: bottom .4s; }
.ticker.on { display: block; }
.ticker.on::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(90vw 70vh at 20% 100%, rgba(13, 23, 38, 0.55), rgba(13, 23, 38, 0) 70%); animation: badge-fade .6s ease both; }
.host:has(.turnban.on) .ticker { bottom: calc(var(--s7) * 2 + 11vh); }
.ticker .msg { --at: translateY(0); display: inline-block; max-width: 62vw; padding: var(--s4) var(--s6) var(--s5); border-radius: var(--s5); background: var(--badge); color: var(--badge-ink); box-shadow: var(--badge-shadow);
  font: 700 var(--fs-xl)/var(--lh-title) var(--title); letter-spacing: var(--ls-title); text-wrap: balance; transform-origin: left bottom; animation: badge-in .5s cubic-bezier(.2,1,.4,1) both; }
.ticker .msg small { display: block; font: 500 var(--fs-m)/var(--lh-body) var(--ui); letter-spacing: 0; color: var(--badge-sub); margin-top: var(--s2); text-wrap: pretty; }
.timer { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--line); }
.timer i { display: block; height: 100%; background: var(--amber); transform-origin: left; }

/* full-screen stage for minigames / results / standings / finale.
   Padding leaves s10 at the bottom so the countdown (bottom-left) never touches content. */
.stage { position: absolute; inset: 0; display: none; align-content: center; background: rgba(13, 23, 38, 0.9); backdrop-filter: blur(6px); padding: var(--s8) var(--s10) var(--s10); }
.stage.on { display: grid; }
.stage > div:not(.cd) { width: 100%; }
.stage .kicker { margin-bottom: var(--s3); }
.stage .t-xl { max-width: 26ch; }
.stage .cd { position: absolute; left: var(--s10); bottom: var(--s6); font: 500 var(--fs-2xl)/var(--lh-num) var(--title); color: var(--amber); font-variant-numeric: tabular-nums; }
.stage .grid2 { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s9); align-items: start; }
.grid2.geo { grid-template-columns: 0.7fr 1.3fr; gap: var(--s9); align-items: center; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s8); margin-top: var(--s8); }
.opt { display: flex; align-items: baseline; gap: var(--s4); margin-inline: calc(-1 * var(--s3)); padding: var(--s4) var(--s3) var(--s2); border-top: 2px solid var(--line2); font: 600 var(--fs-l)/var(--lh-title) var(--title); letter-spacing: 0; text-wrap: balance; }
.opt b { color: var(--amber); font-weight: 800; min-width: 1.2em; flex: none; }
.opt.right { border-color: var(--green); background: rgba(87, 193, 138, 0.16); border-radius: 12px; }
.opt.right b { font-size: 0; min-width: calc(var(--fs-l) * 1.2); }   /* the ✓ keeps the letter column width */
.opt.right b::after { content: '✓'; font-size: var(--fs-l); color: var(--green); }
.opt.wrong { opacity: 0.32; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }
.chip { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4) var(--s2) var(--s3); border: 1px solid var(--line2); border-radius: 99px; font: 600 var(--fs-s)/var(--lh-num) var(--ui); transition: background .3s, border-color .3s; }
.chip.done { border-color: var(--amber); background: rgba(255, 180, 92, 0.12); }
.chip.ok { border-color: var(--green); background: rgba(87, 193, 138, 0.14); }
.chip.no { opacity: 0.45; }
.chip.done::after { content: '✓'; color: var(--amber); }
.chip.ok::after { content: '✓✓'; color: var(--green); }
.chip.no::after { content: '✗'; }
.picture { position: relative; aspect-ratio: 1; background: #000; overflow: hidden; }
.picture.wide { aspect-ratio: 16 / 10; }
.grid2.geo .picture:not(.wide) { max-height: 74vh; aspect-ratio: 1; width: auto; }
.picture img, .picture canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.credit { font: 500 var(--fs-s)/var(--lh-body) var(--ui); color: var(--faint); margin-top: var(--s2); }

/* result tables: columns sized in em so the 1.25 em swatch always fits its column */
.resrow { display: grid; grid-template-columns: 1.2em 1.25em minmax(0, 1fr) auto 3em; gap: var(--s4); align-items: center; padding: var(--s2) 0; border-top: 1px solid var(--line); font: 600 var(--fs-l)/var(--lh-title) var(--title); letter-spacing: 0; }
.resrow > span:nth-child(3) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resrow .x { font: 500 var(--fs-m)/var(--lh-num) var(--ui); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.resrow .c { text-align: right; color: var(--amber); font-variant-numeric: tabular-nums; }
.stand { columns: 2; column-gap: var(--s10); margin-top: var(--s7); }
.stand .resrow { break-inside: avoid; grid-template-columns: 1.2em 1.25em minmax(0, 1fr) 3.2em 3.6em; }

/* podium (finale) */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s8); align-items: end; margin-top: var(--s7); max-width: min(1200px, 70vw); }
.podium .p { border-top: 3px solid var(--line2); padding-top: var(--s3); }
.podium .p.first { border-color: var(--amber); }
.podium .p .rank { font: 700 var(--fs-3xl)/0.85 var(--title); letter-spacing: var(--ls-display); }
.podium .p.first .rank { color: var(--amber); }
.podium .p .mute { font: 500 var(--fs-s)/var(--lh-body) var(--ui); margin-top: var(--s1); }
.podium .bar { max-height: 24vh; background: rgba(255,255,255,0.06); margin-bottom: var(--s3); display: flex; align-items: flex-end; justify-content: center; font-size: var(--fs-xl); }
.podium ~ p { margin-top: var(--s6) !important; }   /* inline 44/22 px from host.js: back on the scale */

/* poster title cards (intro / round / minigame) */
.card { position: absolute; inset: 0; display: none; align-content: end; padding: var(--s9) var(--s10) calc(var(--s10) + var(--s5)); background: linear-gradient(180deg, rgba(13,23,38,0) 30%, rgba(13,23,38,0.9) 100%); }
.card.on { display: grid; animation: fadein .6s ease both; }
.card .t-xl { max-width: 26ch; }
.card .line { width: var(--s10); height: 3px; background: var(--amber); margin: var(--s5) 0 var(--s4); }
.card.soft { background: none; align-content: center; justify-content: center; }
.softword { font: 400 var(--fs-3xl)/var(--lh-num) var(--title); color: #fffaf2; letter-spacing: var(--ls-display); text-shadow: 0 0 50px rgba(255,200,140,0.5); }
@keyframes fadein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.caption { position: absolute; left: var(--s10); bottom: var(--s10); max-width: 980px; opacity: 0; transition: opacity 1s; }
.caption.on { opacity: 1; }

/* dice */
.dice { position: absolute; left: var(--s7); right: 400px; top: var(--s10); display: flex; flex-wrap: wrap; gap: var(--s6) var(--s7); }
.die-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s2); width: 84px; }
.die-wrap .lab { font: 600 var(--fs-s)/var(--lh-title) var(--ui); text-align: center; color: var(--mute); }
.die { width: 64px; height: 64px; position: relative; transform-style: preserve-3d; transition: transform 1.25s cubic-bezier(.2,.9,.25,1.05); }
.die .f { position: absolute; inset: 0; background: var(--snow); border-radius: 12px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 10px; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.12); backface-visibility: hidden; }
.die .f i { width: 11px; height: 11px; border-radius: 50%; background: var(--night); place-self: center; }
.die .f.f1 { transform: translateZ(32px); } .die .f.f6 { transform: rotateY(180deg) translateZ(32px); }
.die .f.f2 { transform: rotateY(90deg) translateZ(32px); } .die .f.f5 { transform: rotateY(-90deg) translateZ(32px); }
.die .f.f3 { transform: rotateX(90deg) translateZ(32px); } .die .f.f4 { transform: rotateX(-90deg) translateZ(32px); }
.die.rolling { animation: tumble .45s linear infinite; transition: none; }
@keyframes tumble { from { transform: rotateX(0) rotateY(0) rotateZ(0); } to { transform: rotateX(360deg) rotateY(720deg) rotateZ(180deg); } }
.die-wrap .val { font: 700 var(--fs-l)/var(--lh-num) var(--title); color: var(--amber); min-height: 1em; }
/* one team's turn: a single big die, centred low, glowing in the team colour */
.dice.solo { left: 0; right: 0; top: auto; bottom: 16vh; justify-content: center; }
.dice.solo .die-wrap { transform: scale(2.1); transform-origin: center bottom; width: 120px; }
.dice.solo .die { filter: drop-shadow(0 0 18px var(--team, #ffbe6b)); }
.dice.solo .lab { display: none; }
.dice.solo .val { text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.rollval { position: absolute; left: 0; right: 0; bottom: var(--s9); text-align: center; z-index: 8; font: 700 var(--fs-3xl)/var(--lh-num) var(--ui); opacity: 0; transform: scale(0.6); transition: opacity .35s, transform .45s cubic-bezier(.2,1.4,.4,1); pointer-events: none; }
.rollval.on { opacity: 1; transform: scale(1); }
.rollval b { display: inline-flex; align-items: baseline; padding: var(--s3) var(--s7); border-radius: 99px; background: var(--badge); color: var(--badge-ink); font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 var(--s2) var(--team, var(--amber)), var(--badge-shadow); }   /* team colour as a thick ring, number always night on cream */
.rollval small { font-size: var(--fs-xl); letter-spacing: 0; margin-left: 0.15em; color: var(--badge-plus); }

/* floating popups over the map (coins, boxes, duel, notes): snow badges, readable from the back of the room.
   Numbers fs-2xl (8 vh), words fs-xl (5 vh); host.js stacks several pops at one pawn and keeps them on screen. */
.pop { --at: translate(-50%, -100%); position: absolute; display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s5); border-radius: 99px;
  background: var(--badge); color: var(--badge-ink); box-shadow: var(--badge-shadow); font: 700 var(--fs-2xl)/var(--lh-num) var(--ui); letter-spacing: 0;
  white-space: nowrap; font-variant-numeric: tabular-nums; transform: var(--at); transform-origin: 50% 100%; pointer-events: none;
  animation: badge-in .5s cubic-bezier(.2,1,.4,1) both, pop-out .6s ease-in 2.6s forwards; }
.pop.word { font: 700 var(--fs-xl)/var(--lh-num) var(--title); letter-spacing: var(--ls-title); }   /* numbers in Inter (a Fraunces «3» reads like «5»), words in Fraunces */
.pop.plus { color: var(--badge-plus); } .pop.minus { color: var(--badge-minus); } .pop.box { color: var(--badge-ink); }
.pop small { font: 600 var(--fs-l)/var(--lh-num) var(--ui); letter-spacing: 0; color: var(--badge-sub); display: inline-flex; align-items: center; gap: 0.15em; }
.pop .ico { width: 0.9em; height: 0.9em; margin: 0; }
.pop small .ico { width: 1.1em; height: 1.1em; }
.pop .ico.gold, .tag .ico.gold, .ticker .ico.gold, .toast .ico.gold { color: var(--badge-gold); }   /* bread colour, darkened to ≥ 4.5:1 on the badge */
@keyframes pop-out { to { opacity: 0; transform: var(--at) translateY(-2vh); } }

/* name tags over the pawns and boxes: the same snow badge, small */
.tag { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4) var(--s2) var(--s2); border-radius: 99px;
  background: var(--badge); color: var(--badge-ink); box-shadow: var(--badge-shadow); font: 600 var(--fs-s)/var(--lh-num) var(--ui); white-space: nowrap; transition: opacity .4s; will-change: transform; }
.tag i { width: 0.6em; height: 0.6em; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(13, 23, 38, 0.5); }
.tag .swatch { box-shadow: 0 0 0 1px rgba(13, 23, 38, 0.5) !important; }
.tag.boxtag { background: var(--amber); color: var(--night); font-size: var(--fs-m); padding: var(--s1) var(--s3); }
.tag.boxtag .ico { width: 1.3em; height: 1.3em; margin: 0; }
.tag.active { font: 700 var(--fs-l)/var(--lh-num) var(--title); padding: var(--s2) var(--s5) var(--s2) var(--s2); box-shadow: 0 0 0 max(3px, 0.5vh) rgba(13, 23, 38, 0.92), 0 var(--s2) var(--s6) rgba(13, 23, 38, 0.45); z-index: 2; }
.tag.hid { opacity: 0 !important; }   /* under the top badge (ride pick): steps aside */

/* whose turn: a big banner, bottom left, for the whole roll and walk */
.turnban { position: absolute; left: var(--s7); bottom: var(--s7); z-index: 7; display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s7) var(--s4) var(--s4); border-radius: 99px; background: rgba(13,23,38,0.86); box-shadow: 0 12px 40px rgba(0,0,0,0.35); transform: translateY(160%); transition: transform .5s cubic-bezier(.2,1.2,.4,1); }
.turnban.on { transform: none; }
.turnban .swatch { width: 7vh !important; height: 7vh !important; font-size: 5vh; }
.turnban .nm { font: 600 var(--fs-xl)/var(--lh-num) var(--title); letter-spacing: var(--ls-title); color: #fffaf2; }
.turnban .steps { font: 600 var(--fs-xl)/var(--lh-num) var(--title); color: var(--amber); margin-left: var(--s3); min-width: 1.2em; text-align: center; }
.turnban .steps small { display: block; font: 600 var(--fs-s)/var(--lh-num) var(--ui); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--mute); margin-top: var(--s1); }

/* speech bubble (the driver), anchored in 3D by the host */
.bubble { position: absolute; z-index: 8; max-width: 18em; padding: var(--s5) var(--s6); background: var(--badge); color: var(--badge-ink); border-radius: var(--s6); font: 500 var(--fs-l)/var(--lh-body) var(--title); text-wrap: pretty;
  box-shadow: var(--badge-shadow); opacity: 0; transform: translate(-50%, -100%) scale(0.92); transition: opacity .6s, transform .6s cubic-bezier(.2,1.3,.4,1); pointer-events: none; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: calc(var(--s4) * -1 + 1px); margin-left: calc(var(--s3) * -1); border: var(--s3) solid transparent; border-top: var(--s4) solid var(--badge); border-bottom: 0; filter: drop-shadow(0 var(--kl) 0 rgba(13, 23, 38, 0.92)); }
.bubble.on { opacity: 1; transform: translate(-50%, -100%) scale(1); }

/* moderator bar (operator only, on hover) */
.mod { position: absolute; left: 50%; bottom: var(--s2); transform: translateX(-50%); display: flex; gap: var(--s1); opacity: 0; transition: opacity .3s; z-index: 5; }
.host:hover .mod { opacity: 1; }
.host:not(.mousey) .mod { opacity: 0 !important; }
.mod button { background: rgba(13,23,38,0.85); border: 1px solid var(--line2); border-radius: 99px; padding: var(--s1) var(--s3); font: 600 var(--fs-xs)/var(--lh-num) var(--ui); cursor: pointer; }
.mod button.on { border-color: var(--amber); color: var(--amber); }

/* ---- zen start: the scene under a veil of clouds, a quiet title, a small QR, team dots that fade in */
.lobby { position: absolute; inset: 0; display: block; padding: 0; background: none; z-index: 7; pointer-events: none; }
.lobby:not([hidden]) { animation: fadein 1.6s ease both; }
.ztitle { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font: 400 var(--fs-3xl)/var(--lh-num) var(--title); letter-spacing: var(--ls-display); color: #fffaf2;
  text-shadow: 0 0 40px rgba(255, 220, 180, 0.45), 0 2px 18px rgba(30, 30, 60, 0.25); transition: opacity 1.4s ease, transform 2.4s ease; }
.ztitle small { display: block; margin-top: var(--s3); font: italic 400 var(--fs-l)/var(--lh-num) var(--title); letter-spacing: 0; opacity: 0.8; }
.ztitle .resume { margin-top: var(--s6); font: 600 var(--fs-s)/var(--lh-num) var(--ui); letter-spacing: 0; color: #fffaf2; opacity: 0.85; }
.ztitle.out { opacity: 0; transform: translateY(-30px); }
.zqr { position: absolute; right: 5vh; bottom: 5vh; pointer-events: auto; transition: opacity 1s; }
.zqr .qr { width: min(34vh, 30vw); padding: var(--s4); background: rgba(255, 252, 247, 0.92); border-radius: 18px; box-shadow: 0 10px 40px rgba(20, 20, 50, 0.25); }
.zqr .qr img { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.zteams { position: absolute; left: var(--s7); bottom: var(--s7); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); max-width: 60vw; transition: opacity 1s; }
.zteams .tm { display: flex; align-items: center; gap: var(--s2); font: 500 var(--fs-m)/var(--lh-num) var(--title); color: #fffaf2; text-shadow: 0 1px 10px rgba(20, 20, 50, 0.4); animation: fadein 1.2s ease both; }
.zteams .tm i { width: 0.75em; height: 0.75em; border-radius: 50%; box-shadow: 0 0 14px currentColor; }
.zteams .tm b { font: 600 var(--fs-s)/var(--lh-num) var(--ui); opacity: 0.7; }
.lobby.out .zqr, .lobby.out .zteams { opacity: 0; }

/* try menu: sits left of the lobby QR (.zqr = right 5vh, width min(34vh,30vw)) with a 4vh gap, above the team list (.zteams = bottom 50px); wraps upward */
.trymenu { position: absolute; left: 48px; right: calc(5vh + min(34vh, 30vw) + 4vh); bottom: max(9vh, 100px); z-index: 9; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-end; gap: 1.1vh 1vh; animation: fadein .5s ease both; }
.trymenu button { background: rgba(255, 250, 242, 0.92); color: #23262e; border: 0; border-radius: 99px; padding: max(12px, 1.3vh) max(18px, 2vh); font: 500 max(20px, 2.5vh)/1 var(--title); white-space: nowrap; cursor: pointer; box-shadow: 0 8px 30px rgba(10,15,30,0.25); }
.trymenu button:hover { background: #fff; transform: translateY(-2px); }
.trymenu .x { padding: max(12px, 1.3vh) max(16px, 1.6vh); opacity: 0.7; }

/* geo rush: after the first pin a calm ring runs down around the number (design system: amber, no flashing) */
.stage .cd.rush { display: grid; place-items: center; width: clamp(90px, 8vw, 150px); aspect-ratio: 1; font-size: clamp(34px, 3.4vw, 64px); }
.stage .cd.rush::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--amber) calc(var(--p, 1) * 360deg), color-mix(in srgb, var(--amber) 16%, transparent) 0);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%); mask: radial-gradient(circle, transparent 60%, #000 61%); }

/* playtest diagnostics (key D): a dev panel, desk-sized on purpose */
.diag { position: absolute; right: var(--s5); bottom: var(--s10); width: min(460px, 40vw); max-height: 70vh; overflow: auto; z-index: 40; background: rgba(13,23,38,0.94); border: 1px solid var(--line2); border-radius: 16px; padding: 18px 20px; font: 500 14px/1.45 var(--ui); color: var(--ink); backdrop-filter: blur(8px); }
.diag .t-s { font-size: 13px; }
.diag .kv { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 4px 12px; margin: 8px 0 12px; }
.diag .kv span { color: var(--mute); } .diag .kv b { text-align: right; font-variant-numeric: tabular-nums; }
.diag .ok { color: #9fd3a6; } .diag .warn { color: var(--amber); } .diag .bad { color: #ff9c8a; }
.diag .tl { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; font-size: 13px; }
.diag .tl .swatch { margin-right: 4px; }
.diag p { margin: 4px 0; font-size: 13px; }

/* ================================================================ phone */
.phone { min-height: 100%; display: flex; flex-direction: column; background: var(--night); }
.phone header { position: relative; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--s2); }
.phone header .team { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 var(--fs-xl)/var(--lh-title) var(--title); letter-spacing: var(--ls-title); }
.phone header .grow { flex: 1; }
.phone header .stat { flex: none; font: 700 var(--fs-m)/var(--lh-num) var(--title); text-align: right; font-variant-numeric: tabular-nums; }
.phone header .stat small { display: block; margin-top: var(--s1); font: 500 var(--fs-xs)/var(--lh-num) var(--ui); letter-spacing: 0; color: var(--mute); }
.phone header .stat .ico { width: 0.9em; height: 0.9em; }
.phone header .report { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); background: none; color: var(--amber); font: 700 var(--fs-l)/var(--lh-num) var(--title); }
.phone main { flex: 1; padding: var(--s6) var(--s5) var(--s7); display: flex; flex-direction: column; gap: var(--s4); }
.phone main > * { margin: 0; }                         /* the flex gap is the only vertical rhythm */
.phone main > .t-s + .big { margin-top: calc(-1 * var(--s2)); }   /* a kicker belongs to its heading */
.phone .big { font: 600 var(--fs-2xl)/var(--lh-title) var(--title); letter-spacing: var(--ls-title); text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.phone .lead { font: 400 var(--fs-m)/var(--lh-text) var(--ui); color: #cfd7e2; text-wrap: pretty; }
.phone .status { font: 600 var(--fs-s)/var(--lh-body) var(--ui); color: var(--mute); text-align: center; text-wrap: balance; }
.phone .status b { font-weight: 700; color: var(--ink); }
.phone .status.rush { color: var(--amber); }
.phone .note { font: 500 var(--fs-s)/var(--lh-body) var(--ui); color: var(--mute); }
.btn { appearance: none; border: 0; border-radius: var(--r); background: var(--amber); color: var(--night); font: 700 var(--fs-xl)/var(--lh-num) var(--title); letter-spacing: var(--ls-title); padding: var(--s6) var(--s4); width: 100%; cursor: pointer; box-shadow: 0 -4px 0 rgba(0,0,0,0.18) inset; transition: transform .08s; touch-action: manipulation; }
.btn:active { transform: translateY(2px); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line2); box-shadow: none; font-size: var(--fs-l); padding: var(--s5) var(--s4); }
.btn.red { background: var(--berry); color: var(--snow); }
.btn[disabled] { opacity: 0.35; }
.choices { display: grid; gap: var(--s3); }
.choice { appearance: none; text-align: left; border: 1px solid var(--line2); background: var(--night2); border-radius: var(--r); padding: var(--s4); font: 700 var(--fs-l)/var(--lh-title) var(--title); letter-spacing: 0; color: var(--ink); display: flex; align-items: center; gap: var(--s3); cursor: pointer; touch-action: manipulation; }
.choice b { color: var(--amber); font-weight: 800; min-width: 1.1em; flex: none; }
.choice b.key { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fffaf2; font: 700 var(--fs-xl)/var(--lh-num) var(--title); box-shadow: 0 0 0 3px rgba(255,255,255,0.85); }
.choice .boxn { margin-left: auto; flex: none; background: var(--amber); color: var(--night); border-radius: 99px; padding: var(--s1) var(--s3); font: 700 var(--fs-s)/var(--lh-num) var(--ui); }
.choice.sel { border-color: var(--amber); background: rgba(255,180,92,0.14); }
.choices.two { grid-template-columns: 1fr 1fr; }   /* yes/no: replaces the inline styles in play.js answerUI */
.choices.two .choice { justify-content: center; text-align: center; font-size: var(--fs-xl); padding: var(--s7) var(--s2); }
.teampick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }   /* minmax: long names never push the grid off a 375 px phone */
.teampick button { appearance: none; border: 1px solid var(--line2); background: var(--night2); border-radius: var(--r); text-align: left; color: var(--ink); cursor: pointer; min-width: 0; padding: var(--s3) var(--s3); }
.teampick button .nm { display: flex; align-items: center; gap: var(--s2); font: 700 clamp(14px, 4.1vw, 17px)/1.1 var(--title); min-width: 0; overflow-wrap: anywhere; hyphens: auto; letter-spacing: -0.01em; }
.teampick button .nm .swatch { flex: none; }
.teampick button small { display: block; margin-top: var(--s2); color: var(--mute); font-size: 14px !important; }
.teampick button.sel { border-color: var(--amber); }
.field { width: 100%; padding: var(--s4); border-radius: var(--r); border: 1px solid var(--line2); background: var(--night2); color: var(--ink); font: 600 var(--fs-l)/var(--lh-num) var(--ui); }
textarea.field { line-height: var(--lh-body); resize: vertical; font-weight: 500; }
.pmap { position: relative; height: 46vh; border-radius: var(--r); overflow: hidden; background: #1b2638; touch-action: none; }
.pmap canvas { width: 100%; height: 100%; display: block; }
.pmap .zoom { position: absolute; right: var(--s3); top: var(--s3); display: grid; gap: var(--s2); }
.pmap .zoom button { width: 52px; height: 52px; padding: 0; border-radius: 10px; border: 0; background: rgba(13,23,38,0.85); color: var(--ink); font: 700 var(--fs-xl)/var(--lh-num) var(--title); }
.pano { position: relative; height: 36vh; border-radius: var(--r); overflow: hidden; background: #000; touch-action: none; }
.pano canvas { width: 100%; height: 100%; display: block; }
.pano .walk { position: absolute; left: var(--s3); right: var(--s3); bottom: var(--s3); display: flex; gap: var(--s2); }
.pano .walk button { flex: 1; border: 0; border-radius: 10px; padding: var(--s3); background: rgba(13,23,38,0.85); color: var(--ink); font: 700 var(--fs-s)/var(--lh-num) var(--title); }
.phone .pdie { width: 140px; height: 140px; margin: var(--s2) auto; }
.phone .pdie .f { border-radius: 26px; padding: 22px; } .phone .pdie .f i { width: 22px; height: 22px; }
.phone .pdie .f.f1 { transform: translateZ(70px); } .phone .pdie .f.f6 { transform: rotateY(180deg) translateZ(70px); }
.phone .pdie .f.f2 { transform: rotateY(90deg) translateZ(70px); } .phone .pdie .f.f5 { transform: rotateY(-90deg) translateZ(70px); }
.phone .pdie .f.f3 { transform: rotateX(90deg) translateZ(70px); } .phone .pdie .f.f4 { transform: rotateX(-90deg) translateZ(70px); }
.phone .bigval { font: 700 var(--fs-3xl)/var(--lh-num) var(--title); letter-spacing: var(--ls-display); color: var(--amber); text-align: center; text-wrap: balance; font-variant-numeric: tabular-nums; }
.phone .earned { font: 700 var(--fs-3xl)/var(--lh-num) var(--title); color: var(--amber); text-align: center; }
.phone .earned small { display: block; margin-top: var(--s2); font: 600 var(--fs-xs)/var(--lh-body) var(--ui); color: var(--mute); letter-spacing: var(--ls-label); text-transform: uppercase; }
.phone .slider { width: 100%; -webkit-appearance: none; appearance: none; height: 12px; border-radius: 99px; background: var(--night3); }
.phone .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; border-radius: 50%; background: var(--amber); border: 4px solid #fffaf2; }
.phone .slider::-moz-range-thumb { width: 44px; height: 44px; border-radius: 50%; background: var(--amber); border: 4px solid #fffaf2; }
.phone .turn { display: grid; place-items: center; gap: var(--s4); padding-top: var(--s10); text-align: center; }
.phone .turn .dotc { width: 54px; height: 54px; border-radius: 50%; box-shadow: 0 0 30px currentColor; }
.phone .yourturn { border-radius: 18px; padding: var(--s4) var(--s5); text-align: center; font: 700 var(--fs-2xl)/var(--lh-title) var(--title); letter-spacing: var(--ls-title); box-shadow: 0 10px 30px rgba(0,0,0,0.3); animation: fadein .4s ease both; }

/* phone problem report + feedback, offline hint */
.sheet { position: fixed; inset: auto 0 0 0; z-index: 50; background: var(--night); border-top: 1px solid var(--line2); border-radius: 22px 22px 0 0; padding: var(--s6) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--s4); box-shadow: 0 -20px 60px rgba(0,0,0,0.5); }
.sheet .chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: 0; }
.sheet .chips button, .fb .stars button { border: 1px solid var(--line2); background: none; color: var(--ink); border-radius: 99px; padding: var(--s3) var(--s4); font: 600 var(--fs-s)/var(--lh-num) var(--ui); }
.sheet .chips button.sel, .fb .stars button.sel { background: var(--amber); border-color: var(--amber); color: var(--night); }
.sheet .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.fb { display: flex; flex-direction: column; gap: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s5); }
.fb > * { margin: 0; }
.fb .lead { margin-top: var(--s2); }
.fb .stars { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); }
.fb .stars button { padding: var(--s4) 0; font-size: var(--fs-m); }
body.offline .phone header::after { content: 'Verbindung weg — versuche es wieder …'; position: fixed; left: var(--s3); right: var(--s3); top: calc(var(--s2) + env(safe-area-inset-top)); z-index: 60; background: #8a3b30; color: #fff; border-radius: 12px; padding: var(--s3) var(--s4); font: 600 var(--fs-s)/var(--lh-title) var(--ui); text-align: center; }

/* phone toasts: the same snow badge for phone feedback (+3, box found, item used) — classes for play.js:
   <div class="toast plus|minus|box"><b>+3</b><small>Feld</small></div>, removed after 3 s */
.toast { --at: translateX(-50%); position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + var(--s4)); z-index: 50; display: inline-flex; align-items: center; gap: var(--s2);
  max-width: calc(100vw - var(--s8)); padding: var(--s2) var(--s5); border-radius: 99px; background: var(--badge); color: var(--badge-ink); box-shadow: var(--badge-shadow);
  font: 700 var(--fs-l)/var(--lh-num) var(--title); transform: var(--at); pointer-events: none; animation: badge-in .45s cubic-bezier(.2,1,.4,1) both, pop-out .5s ease-in 2.5s forwards; }
.toast b { font: 700 var(--fs-2xl)/var(--lh-num) var(--ui); font-variant-numeric: tabular-nums; }
.toast small { font: 600 var(--fs-s)/var(--lh-title) var(--ui); color: var(--badge-sub); white-space: normal; }
.toast.plus b { color: var(--badge-plus); } .toast.minus b { color: var(--badge-minus); }
.toast .ico { width: 1em; height: 1em; margin: 0; }

/* calm: no scale-pop, no drift for people who asked for less motion — popups only fade */
@media (prefers-reduced-motion: reduce) {
  .pop, .toast { animation: badge-fade .3s ease both, pop-fade .5s ease-in 2.6s forwards; }
  .ticker .msg, .ticker.on::before { animation: badge-fade .3s ease both; }
  .bubble, .rollval { transition: opacity .3s; }
  .bubble { transform: translate(-50%, -100%) !important; } .rollval { transform: none !important; }
}
@keyframes pop-fade { to { opacity: 0; } }

/* ---------- round 13 gimmicks (GIMMICKS.md) ---------- */
/* big screen: the team's three item slots beside its name (drawn icons; a parcel on its way is dimmed, empty = faint ring) */
.board .row .inv { display: inline-flex; gap: var(--s1); align-items: center; }
.board .row .inv .it { display: inline-grid; place-items: center; width: 2.5vh; height: 2.5vh; border-radius: 50%; color: var(--snow); }
.board .row .inv .it .ico { width: 2.5vh; height: 2.5vh; }
.board .row .inv .it.ord { opacity: 0.45; }
.board .row .inv .it.e { width: 1.2vh; height: 1.2vh; margin: 0 0.65vh; box-shadow: inset 0 0 0 1px var(--line2); }
/* who did what: a small snow-badge line at the top centre, clear of the HUD row and the scoreboard */
.who { position: absolute; top: var(--s7); left: 50%; z-index: 7; max-width: 46vw; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity .5s; }
.who.on { opacity: 1; }
.who .msg { --at: translateY(0); display: inline-flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s5) var(--s2) var(--s2); border-radius: 99px; background: var(--badge); color: var(--badge-sub); box-shadow: var(--badge-shadow);
  font: 600 var(--fs-s)/var(--lh-title) var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who.on .msg { animation: badge-in .5s cubic-bezier(.2,1,.4,1) both; }
.who .msg b { font: 700 var(--fs-s)/var(--lh-num) var(--title); color: var(--badge-ink); }
.who .msg span { overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .who.on .msg { animation: badge-fade .3s ease both; } }

/* phone: item bar under the header (three slots + «Online bestellen») */
.itembar { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s5); border-bottom: 1px solid var(--line); }
.itembar[hidden] { display: none; }
.itembar .slots { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); min-width: 0; }
.itembar .slot { display: flex; align-items: center; gap: var(--s1); min-width: 0; min-height: 36px; padding: var(--s1) var(--s2); border-radius: 10px; background: var(--night2); color: var(--ink); }
.itembar .slot .ico { width: 22px; height: 22px; flex: none; color: var(--amber); }
.itembar .slot small { font: 600 var(--fs-xs)/var(--lh-title) var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.itembar .slot.ord { opacity: 0.55; }
.itembar .slot.e { background: none; box-shadow: inset 0 0 0 1px var(--line); justify-content: center; }
.itembar .slot.e i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line2); }
.itembar .obtn { flex: none; min-width: 52px; min-height: 44px; padding: var(--s1) var(--s2); border-radius: 12px; border: 1px solid var(--line2); background: transparent; color: var(--ink); display: grid; place-items: center; gap: 2px; cursor: pointer; touch-action: manipulation; }
.itembar .obtn .ico { width: 20px; height: 20px; }
.itembar .obtn span { font: 600 10px/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; }
.itembar .obtn[disabled] { opacity: 0.35; }
/* phone: items to use before rolling; shop and wish lists */
.phone .items { display: grid; gap: var(--s2); }
.itembtn { appearance: none; display: flex; align-items: center; gap: var(--s3); text-align: left; padding: var(--s3) var(--s4); border-radius: var(--r); border: 1px solid var(--line2); background: var(--night2); color: var(--ink); cursor: pointer; touch-action: manipulation; }
.itembtn .ico, .itemch .ico { width: 28px; height: 28px; flex: none; color: var(--amber); }
.itembtn b { display: block; font: 700 var(--fs-m)/var(--lh-title) var(--title); }
.itembtn small, .itemch .nm small { display: block; margin-top: 2px; font: 500 var(--fs-xs)/var(--lh-body) var(--ui); color: var(--mute); }
.itembtn.sel, .choice.sel { border-color: var(--amber); }
.itembtn[disabled]:not(.sel), .choice[disabled]:not(.sel) { opacity: 0.4; }
.itemch .nm { flex: 1; min-width: 0; }
.itemch .price { flex: none; display: inline-flex; align-items: center; gap: 2px; font: 700 var(--fs-l)/var(--lh-num) var(--title); font-variant-numeric: tabular-nums; }
.itemch .price .ico { width: 18px; height: 18px; color: #d9a25a; }
.sheet .choices { max-height: 50vh; overflow: auto; }
/* phone: colour + symbol picker when founding a team (the colour-blind-safe set, always with its symbol) */
.slotpick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2); }
.slotpick button { appearance: none; aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px; border: 2px solid transparent; background: var(--night2); cursor: pointer; touch-action: manipulation; }
.slotpick button .swatch { width: 30px !important; height: 30px !important; font-size: 18px; }
.slotpick button.sel { border-color: var(--amber); }
/* phone: the wheel's ten segments, at a glance */
.wheelkey { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
.wheelkey span { padding: var(--s1) var(--s3); border-radius: 99px; background: var(--night2); font: 600 var(--fs-xs)/var(--lh-num) var(--ui); color: #cfd7e2; }
.wheelkey .mid { color: var(--amber); } .wheelkey .bad { color: #f08a80; }
.mc-ln .snowed { color: var(--mute); font-weight: 600; }

/* ================================================================ round 13b — big screen components (DESIGN-SYSTEM.md)
   ride pick badge · winner moment · cheers · Zwischenstand · geo reveal · final screen */
/* ride pick: one small snow badge top centre (team swatch, line icon, «Wohi fahre mir?» / the chosen stop) */
.ask { position: absolute; left: 50%; top: var(--s7); transform: translateX(-50%); z-index: 6; pointer-events: none; opacity: 0; transition: opacity .3s; }
.ask.on { opacity: 1; }
.ask .msg { --at: translateY(0); display: inline-flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s6) var(--s2) var(--s2); border-radius: 99px; background: var(--badge); color: var(--badge-ink); box-shadow: var(--badge-shadow); font: 700 var(--fs-xl)/var(--lh-num) var(--title); letter-spacing: var(--ls-title); white-space: nowrap; animation: badge-in .5s cubic-bezier(.2,1,.4,1) both; }
.ask .swatch { width: 1.1em !important; height: 1.1em !important; }
.ask .lnb { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; color: var(--snow); }
.ask .lnb .ico { width: 1em; height: 1em; margin: 0; }

/* winner moment: upper part of the screen, clear of the team bar on the right and of the cheering pawn in the centre */
.winner { position: absolute; z-index: 6; left: var(--s7); right: calc(var(--board-w) + var(--s7) * 2); top: var(--s9); display: grid; justify-items: center; gap: var(--s4); pointer-events: none; }
.winner .why { font: 600 var(--fs-s)/var(--lh-num) var(--ui); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--snow); text-shadow: 0 1px 8px rgba(13,23,38,0.8); animation: badge-fade .3s ease both; }
.winner .w1, .winner .w2 { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); }
.winner .wb { --at: translateY(0); display: inline-flex; align-items: center; gap: var(--s3); border-radius: 99px; background: var(--badge); color: var(--badge-ink); box-shadow: var(--badge-shadow); white-space: nowrap; animation: badge-in .5s cubic-bezier(.2,1,.4,1) both; }
.winner .wb .nm { font: 700 1em/var(--lh-num) var(--title); letter-spacing: var(--ls-title); max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
.winner .wb .am { display: inline-flex; align-items: center; gap: 0.1em; font: 700 0.8em/var(--lh-num) var(--ui); font-variant-numeric: tabular-nums; color: var(--badge-plus); }
.winner .wb .am .ico { width: 1em; height: 1em; margin: 0; color: var(--badge-gold); }
.winner .wb.big { font-size: var(--fs-2xl); padding: var(--s3) var(--s7) var(--s3) var(--s3); box-shadow: 0 0 0 max(3px, 0.5vh) rgba(13,23,38,0.92), 0 0 0 max(6px, 1.1vh) var(--amber), 0 var(--s2) var(--s7) rgba(13,23,38,0.5); }
.winner .wb.big .swatch { width: 1.1em !important; height: 1.1em !important; font-size: 0.6em; }
.winner .wb.mid { font-size: var(--fs-l); padding: var(--s2) var(--s5) var(--s2) var(--s2); animation-delay: .25s; }
.winner .w3 { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s5); max-width: 100%; padding: var(--s2) var(--s5); border-radius: var(--s5); background: rgba(255,250,242,0.92); color: var(--badge-ink); box-shadow: var(--badge-shadow); font: 600 var(--fs-s)/var(--lh-title) var(--ui); animation: badge-fade .4s ease .45s both; }
.winner .w3 span { display: inline-flex; align-items: center; gap: var(--s1); white-space: nowrap; } .winner .w3 b { color: var(--badge-plus); }
.winner.out { transition: opacity .4s ease-in; opacity: 0; }
.flycoin { position: absolute; left: 0; top: 0; z-index: 9; width: 3.6vh; height: 3.6vh; margin: -1.8vh 0 0 -1.8vh; display: grid; place-items: center; border-radius: 50%; background: var(--badge); box-shadow: var(--badge-shadow); pointer-events: none; }
.flycoin .ico { width: 2.6vh; height: 2.6vh; margin: 0; color: var(--badge-gold); }
/* cheers from the phones: a team-symbol badge rises from the bottom edge, six sparks in the team colour */
.cheer { position: absolute; bottom: var(--s7); z-index: 7; width: 5vh; height: 5vh; display: grid; place-items: center; border-radius: 50%; background: var(--badge); box-shadow: var(--badge-shadow); pointer-events: none; animation: cheer-up 1.8s cubic-bezier(.2,1,.4,1) forwards; }
.cheer .swatch { width: 3vh !important; height: 3vh !important; font-size: 1.8vh; }
.cheer b { position: absolute; left: 50%; top: 50%; width: 1vh; height: 1vh; margin: -0.5vh; border-radius: 50%; animation: spark 0.9s ease-out .25s both; }
@keyframes cheer-up { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; transform: translateY(-8vh) scale(1.08); } 75% { opacity: 1; } 100% { transform: translateY(-26vh) scale(1); opacity: 0; } }
@keyframes spark { from { transform: rotate(var(--a)) translateX(0); opacity: 1; } to { transform: rotate(var(--a)) translateX(5vh); opacity: 0; } }

/* Zwischenstand: one row per team (place/crown, ↑/↓, swatch, name, box icons, Grättimanne, gap to the leader) */
.standing .srows { margin-top: var(--s7); max-width: min(1500px, 86vw); }
.standing .srows.two { columns: 2; column-gap: var(--s9); }
.srow { break-inside: avoid; display: grid; grid-template-columns: 1.4em 0.9em 1.25em minmax(0, 1fr) 3.2em 3.2em 3.2em; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line); font: 600 var(--fs-l)/var(--lh-title) var(--title); }
.srow .rk { font: 700 4vh/var(--lh-num) var(--ui); color: var(--mute); text-align: center; font-variant-numeric: tabular-nums; }
.srow.lead .rk { color: var(--amber); } .srow .rk .crown { width: 1.2em; height: 1.2em; margin: 0; }
.srow.lead .nm { color: var(--amber); }
.srow .mv { font: 700 var(--fs-s)/var(--lh-num) var(--ui); } .srow .mv.up { color: var(--green); } .srow .mv.dn { color: #f08a80; }
.srow .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .bx { display: inline-flex; align-items: center; justify-content: flex-end; color: var(--ink); } .srow .bx .ico { width: 1em; height: 1em; margin: 0 -0.05em; } .srow .bx small { font: 700 var(--fs-m)/1 var(--ui); margin-left: 0.15em; }
.srow .cn, .srow .gp { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.1em; font: 700 4vh/var(--lh-num) var(--ui);   /* numbers ≥ 4 vh (back of the room) */ font-variant-numeric: tabular-nums; }
.srow .gp { color: var(--mute); font-weight: 600; } .srow .ico { width: 0.9em; height: 0.9em; } .srow .ico.gold { color: #d9a25a; }
.standing .scheer { margin-top: var(--s6); color: var(--amber); }

/* geo reveal: the map fills the stage under a small kicker */
.georev { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s3); height: calc(100vh - var(--s8) - var(--s10)); }
.georev .rmap { position: relative; border-radius: var(--s5); overflow: hidden; box-shadow: 0 0 0 1px var(--line2); }
.georev .rmap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.georev .credit { font: 500 var(--fs-xs)/1 var(--ui); color: var(--mute); }

/* final screen: the winner card on its own snow fill (never depends on the turning island or clouds behind it) */
.endcard { position: absolute; z-index: 6; left: var(--s9); top: 0; bottom: 0; margin: auto 0; height: fit-content; width: min(40vw, 74vh); max-height: 86vh; overflow: hidden; display: grid; gap: var(--s3); padding: var(--s6) var(--s7) var(--s5); border-radius: var(--s6); background: var(--badge); color: var(--badge-ink); box-shadow: var(--badge-shadow); animation: fadein 1.2s ease both; }
.endcard .ec-crown { color: var(--badge-gold); } .endcard .ec-crown .ico { width: var(--fs-2xl); height: var(--fs-2xl); margin: 0; }
.endcard .ec-w { display: flex; align-items: center; gap: var(--s3); font: 700 var(--fs-2xl)/var(--lh-display) var(--title); letter-spacing: var(--ls-display); min-width: 0; }
.endcard .ec-w span { min-width: 0; overflow-wrap: anywhere; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.endcard .ec-w .swatch { flex: none; width: 0.9em !important; height: 0.9em !important; font-size: 0.5em; }
.endcard .ec-n { display: flex; align-items: center; gap: var(--s1); font: 700 var(--fs-xl)/var(--lh-num) var(--ui); font-variant-numeric: tabular-nums; }
.endcard .ec-n span { display: inline-flex; align-items: center; gap: var(--s1); margin-left: var(--s5); color: var(--badge-sub); }
.endcard .ec-n .ico { width: 1em; height: 1em; margin: 0; } .endcard .ec-n .ico.gold { color: var(--badge-gold); }
.endcard .ec-rows { display: grid; gap: 0; border-top: 1px solid rgba(13,23,38,0.15); }
.endcard .ec-r { display: grid; grid-template-columns: 1.4em 1.1em minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s1) 0; border-bottom: 1px solid rgba(13,23,38,0.1); font: 600 var(--fs-m)/var(--lh-title) var(--title); }
.endcard .ec-r b { font: 700 var(--fs-s)/1 var(--ui); color: var(--badge-sub); text-align: center; }
.endcard .ec-r span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.endcard .ec-r em { font: 700 var(--fs-s)/1 var(--ui); font-style: normal; display: inline-flex; align-items: center; gap: 0.15em; } .endcard .ec-r em .ico { width: 1.1em; height: 1.1em; margin: 0; }
.endcard .ec-x { margin-top: var(--s2); font: italic 500 var(--fs-l)/var(--lh-num) var(--title); color: var(--basel); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .ask .msg, .winner .wb { animation: badge-fade .3s ease both; } .cheer { animation: badge-fade .3s ease both, pop-fade .5s ease-in 1.2s forwards; } .cheer b { display: none; }
}

/* ================================================================ round 13b — phone */
.phone .ridehead { display: flex; align-items: center; gap: var(--s3); }
.phone .ridehead .lnb { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--snow); box-shadow: 0 0 0 3px rgba(247,243,236,0.85); }
.phone .ridehead .lnb .ico { width: 26px; height: 26px; margin: 0; }
.phone .rmap { height: 52vh; }
.phone .cheerbtn { min-height: 120px; font-size: var(--fs-2xl); border-radius: 60px; }
.phone .cheerbtn:active { transform: scale(0.96); }
.phone .myrank { font: 700 var(--fs-3xl)/var(--lh-num) var(--title); color: var(--amber); text-align: center; font-variant-numeric: tabular-nums; }
.phone .myrank small { display: block; margin-top: var(--s2); font: 600 var(--fs-m)/var(--lh-body) var(--ui); color: var(--mute); }

/* ================================================================ round 13d — phone app for everybody (body.phone-app, play.html only)
   ~50 people of all ages, no explanation: body ≥ 18 px, key info ≥ 28 px, primary button ≥ 56 px, every tap target ≥ 44 px,
   who-am-I header + «now» strip always visible, calm breathing dots for waiting, one edge glow instead of a flash. */
.phone-app {
  --fs-xs: 14px; --fs-s: 16px; --fs-m: 18px; --fs-l: 20px; --fs-xl: 22px;
  --fs-2xl: clamp(28px, 8vw, 40px); --fs-3xl: clamp(56px, 18vw, 96px);
  color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.phone-app .phone { min-height: 100vh; min-height: 100dvh; }
.phone-app .phone header { flex-wrap: wrap; row-gap: var(--s2); padding: calc(var(--s3) + env(safe-area-inset-top, 0px)) calc(var(--s4) + env(safe-area-inset-right, 0px)) var(--s3) calc(var(--s4) + env(safe-area-inset-left, 0px)); min-height: 64px; }
.phone-app .phone header > .swatch { width: 32px !important; height: 32px !important; font-size: 20px; box-shadow: 0 0 0 2px rgba(247,243,236,0.85) !important; }
.phone-app .phone header .team { flex: 1 1 0; min-width: 64px; font-size: var(--fs-xl); }
.phone-app .phone header .grow { display: none; }
.phone-app .phone header .stat { min-width: 44px; font-size: var(--fs-l); }
.phone-app .phone header .stat small { font-size: 12px; }
.phone-app .phone header .report { width: 44px; height: 44px; }
.phone-app .phone main { padding: var(--s5) calc(var(--s4) + env(safe-area-inset-right, 0px)) calc(var(--s7) + env(safe-area-inset-bottom, 0px)) calc(var(--s4) + env(safe-area-inset-left, 0px)); max-width: 640px; width: 100%; margin: 0 auto; }
.phone-app .phone .lead { font-size: var(--fs-m); color: #dde3ea; }
.phone-app .phone .status, .phone-app .phone .note { font-size: var(--fs-m); color: #b5c0cf; }   /* 9:1 on night */
.phone-app .center { text-align: center; }
.phone-app .t-s { color: #a9b5c5; }

/* the «now» strip: what is happening, in one line, always the same height (no layout jumps) */
.phone-app .now { display: flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 52px; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); background: var(--night2); font: 600 var(--fs-m)/var(--lh-title) var(--ui); color: #dde3ea; text-align: center; transition: background-color .3s ease, color .3s ease; }
.phone-app .now b { font: 700 var(--fs-l)/var(--lh-num) var(--title); }
.phone-app .now .ico { width: 24px; height: 24px; margin: 0; flex: none; }
.phone-app .now span { min-width: 0; }
.phone-app .now .who { display: inline-flex; align-items: center; gap: var(--s1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b5c0cf; }
.phone-app .now .who .swatch { font-size: 14px; }
.phone-app .now.off { display: none; }
.phone-app .now.ask { font-size: var(--fs-l); box-shadow: inset 0 -3px 0 rgba(13,23,38,0.25); }
.phone-app .now.ask b { font-size: var(--fs-xl); }
.phone-app .now.mine { color: var(--amber); }
.phone-app .now.mine span { color: #b5c0cf; font: 600 var(--fs-s)/1 var(--ui); }
.phone-app .now.conn { color: var(--amber); background: rgba(255,190,107,0.10); }

/* waiting: three dots breathing like the board's lamps (2.4 s), never blinking */
.breath { display: inline-flex; gap: 6px; align-items: center; justify-content: center; flex: none; }
.breath i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: 0.35; animation: breath 2.4s ease-in-out infinite; }
.breath i:nth-child(2) { animation-delay: .3s; } .breath i:nth-child(3) { animation-delay: .6s; }
@keyframes breath { 0%, 100% { opacity: 0.3; transform: scale(0.85); } 45% { opacity: 1; transform: scale(1); } }
.phone-app .waitbox { display: grid; justify-items: center; gap: var(--s3); padding: var(--s7) 0 var(--s4); text-align: center; color: var(--amber); }
.phone-app .waitbox .big { color: var(--ink); }
.phone-app .waitbox .breath i { width: 12px; height: 12px; }
.phone-app .look { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; padding: var(--s2) var(--s4); border-radius: 99px; background: rgba(247,243,236,0.07); font: 600 var(--fs-m)/var(--lh-title) var(--ui); color: #dde3ea; }
.phone-app .look .ico { width: 24px; height: 24px; margin: 0; color: var(--amber); }
.phone-app .turn { padding-top: var(--s7); color: var(--amber); }
.phone-app .turn > .swatch { width: 64px !important; height: 64px !important; font-size: 38px; box-shadow: 0 0 0 3px rgba(247,243,236,0.85), 0 0 30px rgba(255,190,107,0.25) !important; }
.phone-app .turn .big { color: var(--ink); }
.phone-app .teamcard { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-radius: var(--r); background: var(--night2); box-shadow: inset 6px 0 0 var(--c, var(--amber)); }
.phone-app .teamcard .swatch { width: 48px !important; height: 48px !important; font-size: 28px; }
.phone-app .teamcard .big { min-width: 0; overflow-wrap: anywhere; }

/* one big primary action: ≥ 56 px, thumb-size; secondary actions are ghosts */
.phone-app .btn { min-height: 64px; padding: var(--s4); display: flex; align-items: center; justify-content: center; gap: var(--s2); text-align: center; overflow-wrap: anywhere; }
.phone-app .btn.ghost { min-height: 56px; padding: var(--s3) var(--s4); }
.phone-app .btn[disabled] { opacity: 0.45; }
.phone-app .btn .ico { width: 26px; height: 26px; margin: 0; flex: none; }
.phone-app .bigchoice { min-height: 96px; justify-content: flex-start; gap: var(--s4); padding: var(--s4) var(--s5); text-align: left; font-size: var(--fs-xl); }
.phone-app .bigchoice .ico { width: 40px; height: 40px; }
.phone-app .bigchoice small { display: block; margin-top: var(--s1); font: 600 var(--fs-s)/1.2 var(--ui); letter-spacing: 0; opacity: 0.8; }
.phone-app .bigchoice.alt { background: var(--night2); color: var(--ink); border: 2px solid var(--amber); box-shadow: none; }
.phone-app .bigchoice.alt .ico { color: var(--amber); }
.phone-app .soundbtn { font: 600 var(--fs-m)/1 var(--ui); letter-spacing: 0; }
.phone-app .cheerbtn { min-height: 120px; }
.phone-app .choice { min-height: 60px; font-size: var(--fs-l); overflow-wrap: anywhere; }
.phone-app .choice .nm { flex: 1; min-width: 0; }
.phone-app .choices.two .choice { min-height: 96px; }
.phone-app .itembtn { min-height: 60px; }
.phone-app .itembtn small, .phone-app .itemch .nm small { font-size: var(--fs-s); color: #b5c0cf; }
.phone-app .ask-l { font: 600 var(--fs-xl)/var(--lh-title) var(--title); }
.phone-app .field { min-height: 56px; font-size: max(16px, var(--fs-l)); }   /* ≥ 16 px: iOS never zooms on focus */
.phone-app .timer { display: inline-flex; align-self: center; align-items: center; gap: var(--s2); min-height: 44px; margin: 0; padding: var(--s1) var(--s4); border-radius: 99px; background: var(--night2); font: 600 var(--fs-m)/1 var(--ui); color: #dde3ea; font-variant-numeric: tabular-nums; }
.phone-app .timer b { min-width: 3.2ch; text-align: right; font: 700 var(--fs-xl)/1 var(--ui); }
.phone-app .timer .ico { width: 22px; height: 22px; margin: 0; color: var(--amber); }
.phone-app .timer.low { color: var(--amber); box-shadow: inset 0 0 0 2px var(--amber); }
.phone-app .statrow { display: flex; justify-content: center; gap: var(--s7); }
.phone-app .statrow span { display: grid; justify-items: center; gap: var(--s1); }
.phone-app .statrow b { font: 700 var(--fs-2xl)/1 var(--title); font-variant-numeric: tabular-nums; }
.phone-app .statrow .ico { width: 26px; height: 26px; margin: 0; color: var(--amber); }
.phone-app .statrow small { font: 600 var(--fs-s)/1 var(--ui); color: #b5c0cf; }
.phone-app .myrank small, .phone-app .earned small { font-size: var(--fs-m); letter-spacing: 0; text-transform: none; color: #b5c0cf; }
.phone-app .earned.no { color: #f08a80; }

/* join: big team rows, one column on narrow / zoomed screens */
.phone-app .teampick { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.phone-app .teampick button { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s3); min-height: 72px; padding: var(--s3); }
.phone-app .teampick button .swatch { grid-row: span 2; width: 40px !important; height: 40px !important; font-size: 24px; }
.phone-app .teampick button .nm { font: 700 var(--fs-l)/1.15 var(--title); overflow-wrap: anywhere; }
.phone-app .teampick button small { margin-top: var(--s1); font-size: 15px !important; color: #b5c0cf; }
.phone-app .slotpick { grid-template-columns: repeat(auto-fill, 52px); justify-content: space-between; gap: var(--s2); }
.phone-app .slotpick button { width: 52px; height: 52px; aspect-ratio: auto; border-width: 3px; }
.phone-app .slotpick button.sel { box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--amber); }

/* small controls grow to 44 px */
.phone-app .sheet .chips button, .phone-app .fb .stars button { min-height: 44px; font-size: var(--fs-s); }
.phone-app .pano .walk button { min-height: 48px; font-size: var(--fs-m); }
.phone-app .itembar { padding: var(--s2) var(--s4); }
.phone-app .itembar .slot { min-height: 44px; }
.phone-app .wheelkey span { font-size: var(--fs-s); padding: var(--s2) var(--s3); }
.phone-app .pmap { height: min(46vh, 420px); min-height: 220px; }
.phone-app .rmap { height: min(50vh, 460px); min-height: 220px; }
.phone-app .phone .pdie { width: 120px; height: 120px; }
.phone-app .phone .pdie .f.f1 { transform: translateZ(60px); } .phone-app .phone .pdie .f.f6 { transform: rotateY(180deg) translateZ(60px); }
.phone-app .phone .pdie .f.f2 { transform: rotateY(90deg) translateZ(60px); } .phone-app .phone .pdie .f.f5 { transform: rotateY(-90deg) translateZ(60px); }
.phone-app .phone .pdie .f.f3 { transform: rotateX(90deg) translateZ(60px); } .phone-app .phone .pdie .f.f4 { transform: rotateX(-90deg) translateZ(60px); }

/* feedback where the phone cannot vibrate (iOS): the edge glows once in the team colour (fade in/out, no blink) */
.edgeglow { position: fixed; inset: 0; z-index: 70; pointer-events: none; box-shadow: inset 0 0 0 6px var(--c, #ffbe6b), inset 0 0 48px 8px var(--c, #ffbe6b); opacity: 0; animation: edgeglow 1.6s ease-in-out both; }
@keyframes edgeglow { 0% { opacity: 0; } 30% { opacity: 0.9; } 100% { opacity: 0; } }
/* the old red «Verbindung weg» banner is replaced by the calm «now» strip */
.phone-app.offline .phone header::after { content: none; }

/* landscape phones: less vertical padding, the map keeps a usable height */
@media (orientation: landscape) and (max-height: 500px) {
  .phone-app .phone header { min-height: 52px; padding-top: var(--s2); padding-bottom: var(--s2); }
  .phone-app .now { min-height: 44px; }
  .phone-app .phone main { padding-top: var(--s3); }
  .phone-app .waitbox, .phone-app .turn { padding-top: var(--s3); }
  .phone-app .pmap, .phone-app .rmap { height: 70vh; min-height: 180px; }
  .phone-app .bigchoice { min-height: 72px; }
}
/* very narrow or zoomed (320 px, 200 % text): stats stay readable, the header wraps instead of clipping */
@media (max-width: 360px) {
  .phone-app .phone header .stat small { display: none; }
  .phone-app .phone header { gap: var(--s2); }
  .phone-app .phone header .stat { min-width: 0; }
  .phone-app .statrow { gap: var(--s5); }
}
@media (prefers-reduced-motion: reduce) {
  .breath i { animation: none; opacity: 0.7; }
  .phone-app .now { transition: none; }
}

/* ================================================================ round 13f — «Probe» practice round + «Reaktionszyt» */
/* big screen: the practice round wears one snow badge at the top right of the stage */
.stage > div.probetag { width: auto; position: absolute; top: var(--s7); right: var(--s10); padding: var(--s2) var(--s5); border-radius: 99px; --at: translateY(0); background: var(--badge); color: var(--badge-ink); box-shadow: var(--badge-shadow); font: 700 var(--fs-xl)/var(--lh-num) var(--title); letter-spacing: var(--ls-title); animation: badge-in .5s cubic-bezier(.2,1,.4,1) both; }
/* Reaktionszyt: the live ranking (best ms), on the reveal + the team average (Ø, trivia) */
.stage .rxrank { margin-top: var(--s8); max-width: 72vw; }
.stage .rxrank.two { columns: 2; column-gap: var(--s9); max-width: none; }
.stage .rxrank .resrow { break-inside: avoid; grid-template-columns: 1.2em 1.25em minmax(0, 1fr) auto 4.6em; }
.stage .rxrank .resrow .c, .stage .rxrank .resrow .x { font-variant-numeric: tabular-nums; }
.stage .rxrank .resrow small { font-size: 0.62em; font-weight: 500; color: var(--mute); }
.stage .rxrank .resrow.top { color: var(--amber); }
/* phone: the «Probe» label in the kicker, the reaction test */
.phone .t-s .probe { display: inline-block; margin-right: var(--s2); padding: 3px var(--s3); border-radius: 99px; background: #fffaf2; color: #0d1726; font: 700 var(--fs-s)/1.2 var(--ui); letter-spacing: var(--ls-label); text-transform: uppercase; vertical-align: 1px; }
.phone-app .rx { display: grid; gap: var(--s4); }
.phone-app .rxstart { min-height: max(160px, 34vh); font-size: var(--fs-2xl); }
.phone-app .rxhint { margin: 0; text-align: center; font: 600 var(--fs-m)/var(--lh-body) var(--ui); color: #dde3ea; }
.phone-app .rxbest { margin: 0; text-align: center; font: 600 var(--fs-l)/var(--lh-body) var(--ui); color: #dde3ea; }
.phone-app .rxbest b { color: var(--amber); font-variant-numeric: tabular-nums; }
.phone-app .rxmsg { display: grid; justify-items: center; gap: var(--s2); text-align: center; font: 600 var(--fs-m)/var(--lh-body) var(--ui); color: #dde3ea; }
.phone-app .rxmsg b { font: 700 var(--fs-2xl)/var(--lh-title) var(--title); color: var(--ink); }
.phone-app .rxmsg.early b { color: var(--amber); }
.phone-app .rxmsg b.rxms { font-size: var(--fs-3xl); line-height: 1; color: var(--amber); font-variant-numeric: tabular-nums; }
.phone-app .rxms small { font: 600 var(--fs-l)/1 var(--ui); color: #b5c0cf; }
/* the test itself covers the whole screen (one big tap area); calm deep blue → bright amber, no transition (the switch IS
   the signal; blue/amber is safe for every colour-vision type, luminance ratio ≈ 9:1) */
.rxo { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: var(--s4); padding: var(--s6); text-align: center; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; transition: none; }
.rxo b { font: 700 clamp(44px, 13vw, 110px)/1 var(--title); letter-spacing: var(--ls-display); }
.rxo span { font: 600 var(--fs-l)/var(--lh-body) var(--ui); }
.rxo.wait { background: #12264a; color: #f7f3ec; }
.rxo.go { background: #ffbe6b; color: #0d1726; }
/* stat cards (Statistisches Amt): one snow badge in the middle, label · big Inter number · who; ~2 s each (host.js statCards) */
.statcard { --at: translate(-50%, -50%); position: absolute; left: 50%; top: 46%; z-index: 40; transform: var(--at); min-width: 40vh; max-width: 72vw; padding: var(--s6) var(--s8) var(--s7); border-radius: var(--s5); background: var(--badge); color: var(--badge-ink); box-shadow: var(--badge-shadow); text-align: center; display: grid; justify-items: center; gap: var(--s3); animation: badge-in .5s cubic-bezier(.2,1,.4,1) both; }
.statcard.out { animation: stat-out .45s ease-in both; }
@keyframes stat-out { from { opacity: 1; transform: var(--at); } to { opacity: 0; transform: var(--at) translateY(2vh); } }
.statcard .sk { font: 600 var(--fs-s)/var(--lh-num) var(--ui); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--badge-sub); }
.statcard .sv { font: 700 var(--fs-3xl)/var(--lh-num) var(--ui); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.statcard .sv small { margin-left: 0.2em; font: 600 var(--fs-l)/1 var(--ui); color: var(--badge-sub); }
.statcard .sw { display: inline-flex; align-items: center; gap: var(--s2); font: 700 var(--fs-l)/var(--lh-title) var(--title); }
.statcard .sw span { font: 600 var(--fs-m)/1 var(--ui); color: var(--badge-sub); }
.statcard .ss { font: 600 var(--fs-m)/var(--lh-body) var(--ui); color: var(--badge-sub); }
.statcard.evening { min-width: min(64vw, 110vh); gap: var(--s2); }
.statcard.evening .sk { margin-bottom: var(--s2); }
.statcard .er { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.9fr); align-items: center; gap: var(--s5); padding: var(--s2) 0; border-top: 1px solid rgba(13,23,38,0.12); text-align: left; }
.statcard .er .ek { font: 600 var(--fs-m)/var(--lh-title) var(--ui); color: var(--badge-sub); }
.statcard .er b { font: 700 var(--fs-xl)/1 var(--ui); font-variant-numeric: tabular-nums; text-align: right; }
.statcard .er .et { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; font: 700 var(--fs-m)/var(--lh-title) var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes stat-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .statcard { animation: stat-fade .3s ease both; } .statcard.out { animation: none; opacity: 0; transition: opacity .3s; } }

/* ================================================================ round 14 — stage screens in the scene (DESIGN-SYSTEM.md «Stage screens»)
   The board stays behind, blurred under a dusk wash (evening MOODS: sky #22305a → hemi ground #363150 → horizon #e9a27a),
   a few slow cloud puffs (veil colours) drift at the edges, the board's snowfall keeps falling. Content sits on ONE
   snow card: cream fill, night ink, a lumpy snow cap with the night keyline, soft dusk shadow. Answers are snow pills. */
:root, .host {
  --lamp-ink: #94520f;   /* lamp amber as text on the cream card: 5.8:1 */
  --dusk-ink: #5b4a86;   /* dusk purple kickers on the card: 7.3:1 */
  --pill: #f1ecf6;       /* lilac snow pill on the card: night ink 15.5:1 */
  --dusk-shadow: 0 0 0 var(--kl) rgba(13, 23, 38, 0.92), 0 var(--s4) var(--s9) rgba(28, 22, 58, 0.55);
  --cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 44' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C40,44 60,30 110,28 C150,10 210,8 240,24 C270,6 340,4 370,22 C400,12 450,14 470,26 C500,4 580,2 610,22 C640,10 700,10 720,24 C750,8 820,8 850,26 C880,22 920,30 940,36 C960,42 980,44 1000,44 Z' fill='%23fffaf2'/%3E%3Cpath d='M130,40 C170,30 210,30 240,36 M480,40 C520,30 580,30 610,38 M730,40 C770,32 820,32 850,40' fill='none' stroke='%23e6dff0' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0,44 C40,44 60,30 110,28 C150,10 210,8 240,24 C270,6 340,4 370,22 C400,12 450,14 470,26 C500,4 580,2 610,22 C640,10 700,10 720,24 C750,8 820,8 850,26 C880,22 920,30 940,36 C960,42 980,44 1000,44' fill='none' stroke='%230d1726' stroke-opacity='.92' stroke-width='3.6' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
/* backdrop: blur + dusk wash instead of a flat black panel */
.stage { isolation: isolate; grid-template-columns: 100%; justify-items: center; backdrop-filter: blur(7px) saturate(0.85);
  background: radial-gradient(90vw 46vh at 50% 108%, rgba(233, 162, 122, 0.30), rgba(233, 162, 122, 0) 70%),
    linear-gradient(180deg, rgba(34, 48, 90, 0.66) 0%, rgba(54, 49, 80, 0.52) 58%, rgba(77, 70, 120, 0.46) 100%); }
.stage::before { content: ''; position: absolute; inset: -8vh -8vw; z-index: -1; pointer-events: none;
  background: radial-gradient(30vw 13vh at 12% 12%, rgba(214, 206, 226, 0.30), transparent 70%),
    radial-gradient(22vw 10vh at 30% 5%, rgba(188, 184, 212, 0.26), transparent 70%),
    radial-gradient(26vw 11vh at 58% 2%, rgba(214, 206, 226, 0.18), transparent 70%),
    radial-gradient(32vw 14vh at 90% 92%, rgba(214, 206, 226, 0.26), transparent 70%),
    radial-gradient(24vw 10vh at 68% 100%, rgba(188, 184, 212, 0.22), transparent 70%),
    radial-gradient(26vw 12vh at 5% 90%, rgba(200, 194, 222, 0.22), transparent 70%);
  animation: cloud-drift 52s ease-in-out infinite alternate; }
@keyframes cloud-drift { from { transform: translateX(-2.5vw); } to { transform: translateX(2.5vw); } }
/* the team bar stays crisp above the wash; the card keeps clear of it */
.host:has(.stage.on) .board:not([hidden]) { z-index: 4; }
.host:has(#board:not([hidden])) .stage { padding-right: calc(var(--board-w) + var(--s7) * 2); padding-left: var(--s9); }

/* the snow card: the stage's content wrapper */
.stage > div:not(.cd):not(.probetag) { position: relative; width: auto; min-width: min(100%, 110vh); max-width: min(100%, 168vh); margin-top: var(--s5); padding: var(--s7) var(--s8) var(--s8);
  border-radius: var(--s7); background: linear-gradient(180deg, #fffaf2 0%, #fbf5ee 100%); color: var(--badge-ink); box-shadow: var(--dusk-shadow);
  animation: card-in .5s cubic-bezier(.2,1,.4,1) both; }
.stage > div:not(.cd):not(.probetag)::before, #card > div:not(.softword)::before, .statcard::before, .endcard::before {
  content: ''; position: absolute; left: var(--s7); right: var(--s7); bottom: 100%; height: 4.4vh; background: var(--cap) 0 0 / 100% 100% no-repeat; pointer-events: none; }
@keyframes card-in { from { opacity: 0; transform: translateY(2vh) scale(0.97); } to { opacity: 1; transform: none; } }
.stage .t-s, #card .t-s { color: var(--dusk-ink); }
.stage .mute, #card .mute { color: var(--badge-sub); }
.stage .amber, #card .amber { color: var(--lamp-ink); }
.stage .credit { color: var(--badge-sub); }
.stage .kicker { display: inline-flex; align-items: center; gap: var(--s2); }
.stage .kicker::before { content: ''; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 max(2px, 0.25vh) var(--badge-ink); }
.stage .t-xxl { font: 700 var(--fs-3xl)/var(--lh-num) var(--ui); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.stage .t-xxl .unit { font: 600 var(--fs-xl)/1 var(--title); letter-spacing: var(--ls-title); color: var(--badge-ink); }

/* answers: snow pills, the letter in a lamp disc; the right one turns pine with a drawn check */
.opts { gap: var(--s4) var(--s5); margin-top: var(--s7); }
.opt { align-items: center; margin: 0; padding: var(--s3) var(--s5) var(--s3) var(--s3); border: 0; border-radius: 99px; background: var(--pill); color: var(--badge-ink);
  box-shadow: inset 0 0 0 max(1px, 0.15vh) rgba(13, 23, 38, 0.16), inset 0 -0.5vh 0 rgba(91, 74, 134, 0.10); transition: background .3s, opacity .3s, box-shadow .3s; }
.opt b { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; min-width: 0; border-radius: 50%; background: var(--amber); color: var(--badge-ink);
  box-shadow: 0 0 0 max(2px, 0.25vh) var(--badge-ink); font: 700 0.8em/1 var(--ui); }
.opt b .ico { width: 1.1em; height: 1.1em; margin: 0; }
.opt.right { background: #e3efe6; border-radius: 99px; box-shadow: inset 0 0 0 max(3px, 0.45vh) var(--badge-plus); }
.opt.right b { font-size: 0; width: calc(var(--fs-l) * 1.28); height: calc(var(--fs-l) * 1.28); background: var(--badge-plus); min-width: 0; }
.opt.right b > * { display: none; }
.opt.right b::after { content: ''; width: calc(var(--fs-l) * 0.85); height: calc(var(--fs-l) * 0.85); color: #fffaf2; background: currentColor; -webkit-mask: var(--ic-check) center / contain no-repeat; mask: var(--ic-check) center / contain no-repeat; }
.opt.wrong { opacity: 0.4; }
:root, .host {
  --ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --ic-check2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12.5l4.5 4.5L16 7.5M12 15l2 2 9.5-9.5'/%3E%3C/svg%3E");
  --ic-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
}
/* team chips: small snow pills; answered = lamp fill + drawn check */
.stage .chips { gap: var(--s2) var(--s3); margin-top: var(--s7); }
.stage .chip { padding: var(--s2) var(--s4) var(--s2) var(--s2); border: 0; background: var(--pill); color: var(--badge-ink); box-shadow: inset 0 0 0 max(1px, 0.15vh) rgba(13, 23, 38, 0.16); }
.stage .chip::after { content: none; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--ic-check) center / contain no-repeat; mask: var(--ic-check) center / contain no-repeat; }
.stage .chip.done { background: var(--amber); box-shadow: inset 0 0 0 max(2px, 0.25vh) var(--badge-ink); }
.stage .chip.done::after { content: ''; color: var(--badge-ink); }
.stage .chip.ok { background: #e3efe6; box-shadow: inset 0 0 0 max(2px, 0.25vh) var(--badge-plus); }
.stage .chip.ok::after { content: ''; width: 1.25em; color: var(--badge-plus); -webkit-mask-image: var(--ic-check2); mask-image: var(--ic-check2); }
.stage .chip.no { opacity: 0.5; }
.stage .chip.no::after { content: ''; color: var(--badge-minus); -webkit-mask-image: var(--ic-cross); mask-image: var(--ic-cross); }

/* geo: the picture framed like a window on the card */
.stage .picture { border-radius: var(--s5); box-shadow: 0 0 0 var(--kl) rgba(13, 23, 38, 0.92); background: var(--night2); }
.stage .grid2.geo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s6); }
.stage > .grid2.geo { padding-inline: var(--s6); }
.stage .grid2.geo:has(.picture:not(.wide)) { grid-template-columns: minmax(0, 1fr) 46vh; }
.stage .grid2.geo .picture:not(.wide) { width: 46vh; height: 46vh; max-height: none; }
.stage .grid2.geo .chips { margin-top: var(--s6); }
.georev { height: calc(100vh - var(--s8) - var(--s10) - var(--s7) - var(--s8) - var(--s5)); }
.georev .rmap { box-shadow: 0 0 0 var(--kl) rgba(13, 23, 38, 0.92); }

/* result tables, Reaktionszyt, Zwischenstand on the card: night ink, numbers in Inter, lamp tint for the leader */
.stage .resrow, .stage .srow { border-top-color: rgba(13, 23, 38, 0.12); }
.stage .resrow { grid-template-columns: 1.6em 1.25em minmax(0, 1fr) auto 3.2em; }
.stage .resrow > span:first-child, .stage .srow .rk { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--pill); color: var(--badge-sub); font: 700 0.8em/1 var(--ui); font-variant-numeric: tabular-nums; }
.stage .resrow > span:first-child:empty { background: none; }
.stage .resrow .x { color: var(--badge-sub); }
.stage .resrow .c { font: 700 var(--fs-xl)/var(--lh-num) var(--ui); color: var(--badge-plus); }
.stage .rxrank .resrow .c { color: var(--badge-ink); }
.stage .rxrank .resrow small { color: var(--badge-sub); }
.stage .rxrank .resrow.top, .stage .srow.lead { color: var(--badge-ink); background: rgba(255, 190, 107, 0.36); border-radius: var(--s3); border-top-color: transparent; }
.stage .rxrank .resrow.top > span:first-child, .stage .srow.lead .rk { background: var(--amber); color: var(--badge-ink); }
.stage .srow { grid-template-columns: 1.6em 0.9em 1.25em minmax(0, 1fr) 3.4em 3.4em 3.4em; padding-inline: var(--s2); }
.stage .srow.lead .nm { color: var(--badge-ink); }
.stage .srow .rk .crown { width: 0.95em; height: 0.95em; color: var(--badge-gold); }
.stage .srow.lead .rk .crown { color: var(--badge-ink); }
.stage .srow .mv.up { color: var(--badge-plus); } .stage .srow .mv.dn { color: var(--badge-minus); }
.stage .srow .bx { color: var(--badge-ink); }
.stage .srow .cn { font-size: var(--fs-xl); }
.stage .srow .gp { color: var(--badge-sub); }
.stage .srow .ico.gold, .stage .resrow .ico.gold { color: var(--badge-gold); }
.stage .standing .scheer { color: var(--lamp-ink); font-weight: 600; }
.stage .standing .srows { max-width: none; }

/* countdown: a round snow badge bottom-left, Inter number, lamp ring; hidden when empty */
.stage .cd { left: var(--s9); bottom: var(--s5); display: grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 var(--s2); border-radius: 99px; background: var(--badge); color: var(--badge-ink);
  box-shadow: 0 0 0 max(3px, 0.45vh) var(--amber), var(--badge-shadow); font: 700 var(--fs-xl)/1 var(--ui); }
.stage .cd:empty { display: none; }
.stage .cd.rush { width: 1.6em; min-width: 0; height: 1.6em; padding: 0; font-size: var(--fs-xl); background: var(--badge); }
.stage .cd.rush::before { inset: calc(-1 * max(5px, 0.8vh)); }
/* Probe: the snow badge sits on the card's top-right, like a sticker, never over the team bar */
.host:has(#board:not([hidden])) .stage > div.probetag { left: calc((var(--s9) + 100% - var(--board-w) - var(--s7) * 2) / 2); }
.stage > div.probetag { top: var(--s5); right: auto; left: 50%; transform: translateX(-50%); --at: translateX(-50%); z-index: 2; box-shadow: 0 0 0 max(3px, 0.45vh) var(--amber), var(--badge-shadow); }

/* poster title cards and captions (minigame intro, Finale, bonus boxes): the same snow card, bottom-left */
#card:not(.soft) { background: linear-gradient(180deg, rgba(34, 48, 90, 0) 35%, rgba(54, 49, 80, 0.55) 100%); }
#card:not(.soft) > div:not(.softword) { position: relative; justify-self: start; max-width: min(64vw, 120vh); padding: var(--s6) var(--s8) var(--s7); border-radius: var(--s7);
  background: var(--badge); color: var(--badge-ink); box-shadow: var(--dusk-shadow); opacity: 1; }
.host:has(#board:not([hidden])) #card:not(.soft) > div { max-width: calc(100vw - var(--board-w) - var(--s7) * 3 - var(--s10)); }
#card .line { background: var(--amber); height: max(3px, 0.4vh); border-radius: 99px; }

/* stat cards: centred in the free area (left of the team bar), dusk shadow and snow cap; the stage card steps back */
.statcard { box-shadow: var(--dusk-shadow); border-radius: var(--s7); padding-top: var(--s7); }
.host:has(#board:not([hidden])) .statcard { left: calc((100% - var(--board-w) - var(--s7)) / 2); max-width: calc(100vw - var(--board-w) - var(--s7) * 4); }
.stage > div:not(.cd):not(.probetag) { transition: filter .3s; }
.host:has(.statcard:not(.out)) .stage > div:not(.cd):not(.probetag) { filter: opacity(0.3) blur(2px); }   /* filter, not opacity: card-in's fill would win */
.statcard .sk { color: var(--dusk-ink); }
.statcard .sv small { color: var(--badge-sub); }
.endcard { overflow: clip; overflow-clip-margin: 4vh; box-shadow: var(--dusk-shadow); }

/* the turn banner slides out below the edge when off; its empty pill must not peek out over the stage corner */
.turnban { transition: transform .5s cubic-bezier(.2,1.2,.4,1), opacity .3s; }
.turnban:not(.on) { opacity: 0; pointer-events: none; }
/* tutorial (round 13c / 18): calm snow-card pages right of the small Samichlaus (his canvas: left 1 vh, 40 vh wide);
   one cell per space: the board's own face (host.js tutFaces) as a toy tile, big, and one plain sentence below */
.stage > div.tutcard { justify-self: start; margin-left: 38vh; min-width: 0; max-width: calc(100vw - 38vh - var(--s10) * 2); }
.tutcells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); margin-top: var(--s6); }   /* 2 × 2 at most: calm */
.tcell.span { grid-column: 1 / -1; }   /* the three stops need the whole row */
.tcell { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s6); min-width: 0; opacity: 0; --at: translate(0, 0); }
.tcell.in { animation: badge-in .5s cubic-bezier(.2,1,.4,1) both; }   /* host.js pops the cells in one by one */
.tcell p { margin: 0; font: 600 var(--fs-l)/var(--lh-title) var(--title); letter-spacing: var(--ls-title); color: var(--badge-ink); text-wrap: balance; }
/* the tile: face in a brass rim on a cream stone base with a little thickness and a night keyline (as on the board) */
.ttile { position: relative; display: grid; place-items: center; flex: none; width: 15vh; height: 15vh; margin: 1.8vh 1.8vh 3vh; border-radius: 50%; overflow: visible; background: #f3ead8;
  box-shadow: 0 0 0 0.9vh #f0c76a, 0 0 0 1.7vh #f3ead8, 0 1.2vh 0 1.7vh #d6c8ad, 0 1.2vh 0 calc(1.7vh + var(--kl)) var(--badge-ink), 0 0 0 calc(1.7vh + var(--kl)) var(--badge-ink), 0 2.2vh 2.4vh 1.7vh rgba(28, 22, 58, 0.28); }
.ttile img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.ttile.maert { box-shadow: 0 0 0 0.9vh #e0b24a, 0 0 0 1.7vh #f3ead8, 0 1.2vh 0 1.7vh #d6c8ad, 0 1.2vh 0 calc(1.7vh + var(--kl)) var(--badge-ink), 0 0 0 calc(1.7vh + var(--kl)) var(--badge-ink), 0 0 4vh 1.7vh rgba(255, 190, 107, 0.55); }
.ttile.itm { background: #ffbe6b; color: var(--badge-ink); width: 14vh; height: 14vh; box-shadow: 0 0 0 var(--kl) var(--badge-ink), inset 0 -1vh 0 rgba(13, 23, 38, 0.16), 0 1.4vh 2vh rgba(28, 22, 58, 0.25); }
.ttile.itm .ico { width: 9vh; height: 9vh; margin: 0; }
.ttiles { display: inline-flex; }
.ttiles .ttile { width: 9.5vh; height: 9.5vh; margin: 1.8vh 1.8vh 3vh; }
.ttiles .ttile + .ttile { margin-left: 0; }
/* «Weiter» (tutorial): a lamp snow pill left of «Überspringen»; dimmed while a page still pops in */
.nextbtn { position: absolute; right: calc(var(--s7) + 26.5vh); bottom: var(--s6); z-index: 9; display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s7); border: 0; border-radius: 99px;
  background: var(--badge); color: var(--badge-ink); box-shadow: 0 0 0 0.45vh var(--amber), var(--badge-shadow); font: 700 var(--fs-m)/var(--lh-num) var(--ui); cursor: pointer; opacity: 0.55; transition: opacity .3s; }
.nextbtn.ready { opacity: 1; animation: next-glow 2.4s ease-in-out infinite; }
.nextbtn::after { content: ''; width: 0.9em; height: 0.9em; background: currentColor; -webkit-mask: var(--ic-next) center / contain no-repeat; mask: var(--ic-next) center / contain no-repeat; }
@keyframes next-glow { 50% { box-shadow: 0 0 0 0.45vh var(--amber), 0 0 3vh rgba(255, 190, 107, 0.6), var(--badge-shadow); } }
:root, .host { --ic-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
/* phone mirror of the tutorial page (play.js): small discs in the space colours, an optional «Weiter» */
.ptut { display: grid; gap: 10px; margin-top: 12px; }
.ptut > div { display: flex; align-items: center; gap: 12px; }
.ptut i { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); color: var(--fg); box-shadow: 0 0 0 1.5px var(--night); }
.ptut i .ico { width: 22px; height: 22px; margin: 0; }
/* «Überspringen» (intro / tutorial): a quiet snow pill bottom right, full only on hover */
.skipbtn { position: absolute; right: var(--s7); bottom: var(--s6); z-index: 9; display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s5); border: 0; border-radius: 99px;
  background: rgba(255, 250, 242, 0.88); color: var(--badge-ink); box-shadow: var(--badge-shadow); font: 600 var(--fs-s)/var(--lh-num) var(--ui); cursor: pointer; opacity: 0.82; transition: opacity .3s; }
.skipbtn::after { content: ''; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--ic-skip) center / contain no-repeat; mask: var(--ic-skip) center / contain no-repeat; }
.skipbtn:hover, .skipbtn:focus-visible { opacity: 1; background: var(--badge); }
:root, .host { --ic-skip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6l6 6-6 6M12 6l6 6-6 6'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
  .stage::before { animation: none; }
  .tcell.in { animation: badge-fade .3s ease both; } .nextbtn.ready { animation: none; }
  .stage > div:not(.cd):not(.probetag) { animation: badge-fade .3s ease both; }
}

/* ================================================================ OVERLAY TEXT FAMILY «Lamplight» (user, 9 Nov 2026; DESIGN-SYSTEM.md)
   Text over the 3D scene is lit by the street lamps, not stuck on it. Three members, one light:
   1 LAMPLIT LETTERING — night ink with a warm lamp halo (no box): HUD, who-line, ticker, quiet name tags, start title, resume line.
   2 SNOW PLAQUE — a cream clay plaque, no keyline: lilac underside, soft dusk contact shadow, warm lamp glow, a soft snow cap
     on the bigger ones: the active name tag, the turn banner, popups, roll number, speech bubble, ride-pick ask, box tag, operator bar.
   3 LAMP FLAG — the yellow «Probe» pennant (below).
   Measured on the real board (snow, sky/clouds, rooftops, river; worst 2nd percentile of the pixels under the glyphs):
   lettering ≥ 9:1 (small labels ≥ 11:1), plaque ink 15:1, sub-lines 6.7:1. */
:root, .host {
  --halo: #fff3df;   /* lamp-warm snow light */
  --lamplit: 0 0 0.06em var(--halo), 0 0 0.12em var(--halo), 0 0 0.2em #ffe6c0, 0 0 0.35em #ffe1b5, 0 0 0.6em rgba(255, 210, 150, 0.9), 0 0 1.1em rgba(255, 190, 107, 0.7);
  --plaque: linear-gradient(180deg, #fffaf2 0%, #f8f1e8 68%, #ece3f0 100%);
  --plaque-shadow: inset 0 calc(var(--s1) * -1) 0 rgba(120, 100, 160, 0.16), 0 calc(var(--s1) / 2) 0 #d9cfe4, 0 var(--s3) var(--s5) calc(var(--s1) * -1) rgba(28, 22, 58, 0.55), 0 0 var(--s7) rgba(255, 190, 107, 0.3);
  --capsoft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 44' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C40,44 60,30 110,28 C150,10 210,8 240,24 C270,6 340,4 370,22 C400,12 450,14 470,26 C500,4 580,2 610,22 C640,10 700,10 720,24 C750,8 820,8 850,26 C880,22 920,30 940,36 C960,42 980,44 1000,44 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}
/* 1 lamplit lettering */
.hud-top .brand, .hud-top .round, .who .msg, .ticker .msg, .ztitle, .ztitle .resume, .tag:not(.active):not(.boxtag) {
  background: none; box-shadow: none; color: var(--badge-ink); text-shadow: var(--lamplit); }
.hud-top .brand { font: 700 var(--fs-l)/var(--lh-num) var(--title); }
.hud-top .round { font: 700 var(--fs-m)/var(--lh-num) var(--ui); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.who .msg { overflow: visible; padding: var(--s1) var(--s3); font: 600 var(--fs-m)/var(--lh-title) var(--ui); color: var(--badge-ink); }
.who .msg b { font-size: var(--fs-m); }
.ticker .msg { padding: 0; border-radius: 0; }
.ticker .msg small { color: var(--badge-ink); font-weight: 600; }
.ticker.on::before { background: radial-gradient(70vw 55vh at 12% 100%, rgba(255, 236, 205, 0.32), rgba(255, 236, 205, 0) 65%); }   /* a pool of lamp light, not a dark vignette */
.tag:not(.active):not(.boxtag) { font-weight: 700; padding: var(--s1) var(--s2); }
.ztitle { text-shadow: 0 0 0.06em var(--halo), 0 0 0.14em #ffeccc, 0 0 0.3em #ffe1b5, 0 0 0.6em rgba(255, 200, 130, 0.8); }
.ztitle small { opacity: 1; color: var(--badge-ink); text-shadow: var(--lamplit); }
.ztitle .resume { display: inline-block; opacity: 1; padding: 0; }
/* 2 snow plaques */
.tag.active, .turnban, .pop, .bubble, .ask .msg, .winner .wb, .toast, .mod button { background: var(--plaque); box-shadow: var(--plaque-shadow); }
/* the cord: host.js updateTags sets --cord when a tag is lifted (active tag: always a short one; crowded spaces: stacked rows) */
.tag:not(.boxtag)::after { content: ''; position: absolute; left: 50%; top: 100%; width: max(2px, 0.25vh); height: var(--cord, 0px); margin-left: min(-1px, -0.125vh); background: rgba(13, 23, 38, 0.6); box-shadow: 0 0 0.4vh var(--halo); pointer-events: none; }
.tag.active::after { background: rgba(13, 23, 38, 0.75); }
.tag.active::before, .turnban::before { content: ''; position: absolute; left: var(--s3); right: var(--s3); bottom: calc(100% - var(--s1)); height: var(--s4); background: var(--capsoft) 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 -0.2vh 0.3vh rgba(28, 22, 58, 0.18)); pointer-events: none; }
.turnban::before { left: var(--s8); right: var(--s8); height: var(--s5); }
.turnban .nm { color: var(--badge-ink); }
.turnban .steps { color: var(--lamp-ink); }
.turnban .steps small { color: var(--badge-sub); }
.tag.boxtag { box-shadow: inset 0 calc(var(--s1) * -1) 0 rgba(148, 82, 15, 0.25), 0 var(--s2) var(--s4) calc(var(--s1) * -1) rgba(28, 22, 58, 0.5), 0 0 var(--s6) rgba(255, 190, 107, 0.55); }
.rollval b { box-shadow: 0 0 0 var(--s2) var(--team, var(--amber)), var(--plaque-shadow); background: var(--plaque); }
.winner .w3, .flycoin, .cheer { box-shadow: var(--plaque-shadow); }
.winner .wb.big { box-shadow: 0 0 0 max(6px, 1.1vh) var(--amber), var(--plaque-shadow); }
.winner .why { color: var(--badge-ink); text-shadow: var(--lamplit); }
.who .msg span { padding: 0.35em 0.5em; margin: -0.35em -0.5em; }   /* room for the halo inside the ellipsis box */
.bubble::after { border-top-color: #f2eaee; filter: drop-shadow(0 0.4vh 0.4vh rgba(28, 22, 58, 0.35)); }
.mod button { color: var(--badge-ink); border: 0; font-size: max(var(--fs-xs), 1.8vh); }   /* operator bar: small plaques, readable over clouds */
.mod button.on { background: var(--amber); color: var(--badge-ink); }

/* «Probe» = a yellow flag at the top right of the question card (user, 9 Nov): warm yellow from the lamp/star family,
   night ink (≈ 11:1), swallowtail pennant on a short night pole, a slow wave; big enough for the back of the room. */
@keyframes flagwave { 0%, 100% { transform: rotate(-2deg) skewY(0deg); } 50% { transform: rotate(1.5deg) skewY(-1.5deg); } }
.stage .probetag { position: absolute; top: calc(-1 * var(--s6)); right: var(--s8); left: auto; z-index: 3; width: auto; min-width: 0; max-width: none; margin: 0;
  padding: var(--s3) calc(var(--s8) + 1.4vh) var(--s3) var(--s6); border-radius: 0; background: linear-gradient(180deg, #f8d66a, #f0bf45); color: var(--night);
  font: 700 max(5vh, 34px)/1 var(--title); letter-spacing: 0.01em; box-shadow: none; border-left: max(6px, 0.9vh) solid var(--night);
  clip-path: polygon(0 0, 100% 0, 84% 50%, 100% 100%, 0 100%); filter: drop-shadow(0 0.8vh 1.2vh rgba(13, 23, 38, 0.45));
  transform-origin: 0 50%; animation: flagwave 3.2s ease-in-out infinite; }
.stage .probetag::before, .stage .probetag::after { display: none !important; }
@media (prefers-reduced-motion: reduce) { .stage .probetag { animation: none; } }
.phone .t-s .probe { padding: 4px 18px 4px 10px; border-radius: 0; background: linear-gradient(180deg, #f8d66a, #f0bf45); color: #0d1726; border-left: 3px solid #0d1726;
  clip-path: polygon(0 0, 100% 0, 84% 50%, 100% 100%, 0 100%); font-weight: 700; }
/* Wo bin ich from above (orthophoto + Alter Plan 1786, PM 9 Nov 2026): the picture is the game: 60vh square, read from the back of the room */
.stage .grid2.geo:has(.picture:not(.wide)) { grid-template-columns: minmax(0, 1fr) 60vh; }
.stage .grid2.geo .picture:not(.wide) { width: 60vh; height: 60vh; }
.stage .picture.oldplan { background: #efe6cf; }
/* Zwischenstand / Endspurt (user, 9 Nov): boxes as ONE count + icon (5 vh, like the Grättimanne) so the column has one
   width for 1 … 9 boxes and never runs into the names; with two columns (8+ teams) the gap-to-leader column steps out
   (the order already says it) so names keep ~10 characters at 1280 × 720 too. */
.stage .srow { grid-template-columns: 1.45em 0.9em 1.25em minmax(0, 1fr) 2.9em 3.4em 3.4em; }
.stage .srow .bx { gap: 0.1em; padding-right: 0.3em; font: 700 var(--fs-xl)/var(--lh-num) var(--ui); font-variant-numeric: tabular-nums; }
.stage .srow .bx b { font-weight: 700; } .stage .srow .bx .ico { width: 0.9em; height: 0.9em; margin: 0; }
.stage .srows.two .srow { grid-template-columns: 1.45em 0.9em 1.25em minmax(0, 1fr) 2.9em 3.4em; gap: var(--s2); }
.stage .srows.two .srow .gp { display: none; }

/* ================================================================ STAGE ROUND 20 (9 Nov 2026, DESIGN-SYSTEM.md «Scene title», «Payout», «Siegerehrung»)
   user: big words over the city unreadable; payout + Siegerehrung «weird chaos with large labels»; Weiter beside Überspringen. */
/* Scene title 1 — the chapter slot: a snow plaque top-left (replaces the brand during play): kicker «Runde 3 / 14» + title */
.hud-top .chapter { display: none; align-self: flex-start; position: relative; flex-direction: column; gap: var(--s1); padding: var(--s3) var(--s6) var(--s3) var(--s5); border-radius: var(--s5);
  background: var(--plaque); box-shadow: var(--plaque-shadow); color: var(--badge-ink); transition: opacity .3s ease; max-width: calc(100vw - var(--board-w) - var(--s7) * 4); }
.hud-top .chapter.on { display: inline-flex; }
.hud-top .chapter small { font: 700 var(--fs-s)/var(--lh-num) var(--ui); letter-spacing: var(--ls-label); text-transform: uppercase; color: #4b3c78;   /* deeper dusk: ≥ 8:1 on the whole plaque gradient (small label) */ font-variant-numeric: tabular-nums; }
.hud-top .chapter small:empty { display: none; }
.hud-top .chapter b { font: 700 var(--fs-xl)/var(--lh-title) var(--title); letter-spacing: var(--ls-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-top .chapter.kon { padding: var(--s2) var(--s5); } .hud-top .chapter.kon b { display: none; }
.hud-top .chapter::before { content: ''; position: absolute; left: var(--s4); right: var(--s4); bottom: calc(100% - var(--s1)); height: var(--s4); background: var(--capsoft) 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 -0.2vh 0.3vh rgba(28, 22, 58, 0.18)); pointer-events: none; }
.hud-top .chapter.wait { opacity: 0; transition: none; }
.host.playing .hud-top .brand, .host.playing .hud-top .round { display: none; }
.host:has(.stage.on) .hud-top .chapter, .host:has(#card.on:not(.soft)) .hud-top .chapter, .host:has(#endcard) .hud-top .chapter { opacity: 0; }   /* the card carries the title */
/* Scene title 2 — the big moment: the same plaque, big, in the centre; then host.js glides it into the slot */
.sceneword { position: absolute; left: 50%; top: 40%; z-index: 30; transform: translate(-50%, -50%); padding: var(--s5) var(--s9) var(--s6); border-radius: var(--s8);
  background: var(--plaque); box-shadow: 0 0 0 max(4px, 0.6vh) var(--amber), var(--plaque-shadow), 0 0 12vh rgba(255, 190, 107, 0.35); color: var(--badge-ink); pointer-events: none; white-space: nowrap;
  animation: sw-in .5s cubic-bezier(.2,1,.4,1) both; }
.sceneword b { display: block; font: 700 var(--fs-3xl)/var(--lh-num) var(--title); letter-spacing: var(--ls-display); }
#card > div.sceneword::before, .sceneword::before { content: ''; position: absolute; left: var(--s8); right: var(--s8); bottom: calc(100% - var(--s2)); top: auto; height: var(--s6); background: var(--capsoft) 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 -0.3vh 0.4vh rgba(28, 22, 58, 0.18)); pointer-events: none; border: 0; }
.sceneword.out { transition: opacity .4s ease-in; opacity: 0; }
@keyframes sw-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 55% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* standings panel (top right): lamplit lettering rows instead of the navy box (PM); each value keeps the halo */
.board { background: none; backdrop-filter: none; border-top: 0; padding: 0 var(--s2); }
.board h4 { display: flex; align-items: center; justify-content: flex-end; gap: var(--s1); margin: 0 0 var(--s2); font: 700 var(--fs-m)/var(--lh-num) var(--ui); letter-spacing: 0; text-transform: none; color: var(--badge-ink); text-shadow: var(--lamplit); }
.board h4 .ico { width: 1.1em; height: 1.1em; margin: 0; color: var(--badge-ink); filter: drop-shadow(0 0 0.08em var(--halo)) drop-shadow(0 0 0.18em var(--halo)) drop-shadow(0 0 0.35em #ffe1b5); }
.board h4 .ico.gold { color: var(--badge-gold); }
.board .row { border-top: 0; padding: var(--s1) 0; color: var(--badge-ink); text-shadow: var(--lamplit); }
.board .row .n, .board .row .num { color: var(--badge-ink); }
.board .row .num .ico, .board .row .inv .it .ico { color: var(--badge-ink); filter: drop-shadow(0 0 0.08em var(--halo)) drop-shadow(0 0 0.18em var(--halo)) drop-shadow(0 0 0.35em #ffe1b5); }
.board .row .num .ico.gold { color: var(--badge-gold); }
.board .row .inv .it { color: var(--badge-ink); }
.board .row .rk { background: var(--plaque); color: var(--badge-ink); box-shadow: 0 0 0 max(1px, 0.15vh) rgba(13, 23, 38, 0.5), 0 0 0.6vh var(--halo); text-shadow: none; }
.board .row .rk.one { background: var(--amber); box-shadow: 0 0 0 max(1px, 0.15vh) rgba(13, 23, 38, 0.6), 0 0 1vh rgba(255, 190, 107, 0.8); }
.board .row .swatch { box-shadow: 0 0 0 max(1px, 0.15vh) rgba(13, 23, 38, 0.5), 0 0 0.6vh var(--halo) !important; }
.board .row .num.c.bump { animation: bump-ink .35s cubic-bezier(.2,1,.4,1); }
@keyframes bump-ink { 40% { transform: scale(1.18); } }

/* winner moment (payout a): ONE plaque, the winner only */
.winner { top: 22vh; }   /* below the chapter slot, above the cheering pawn (screen centre) */
.winner .w1 { gap: var(--s6); }

/* payout (b): one tidy ranking list on a snow card, left of the team bar, rows in aligned columns */
.ranklist { position: absolute; z-index: 6; left: var(--s9); top: var(--s9); bottom: var(--s5); height: fit-content; max-height: calc(100vh - var(--s9) - var(--s5)); margin: auto 0; width: min(64vw, calc(100vw - var(--board-w) - var(--s7) * 3 - var(--s9)));
  padding: var(--s6) var(--s7) var(--s6); border-radius: var(--s7); background: linear-gradient(180deg, #fffaf2 0%, #fbf5ee 100%); color: var(--badge-ink); box-shadow: var(--dusk-shadow);
  animation: card-in .5s cubic-bezier(.2,1,.4,1) both; pointer-events: none; }
.ranklist::before { content: ''; position: absolute; left: var(--s7); right: var(--s7); bottom: 100%; height: 4.4vh; background: var(--cap) 0 0 / 100% 100% no-repeat; }
.ranklist.out { transition: opacity .4s ease-in; opacity: 0; }
.ranklist .rl { display: grid; grid-template-columns: 1.45em 1.25em minmax(0, 1fr) 5em 4.6em; align-items: center; gap: var(--s4) var(--s5); padding: var(--s2) var(--s3);
  border-top: 1px solid rgba(13, 23, 38, 0.12); font: 600 var(--fs-l)/var(--lh-title) var(--title); animation: rl-in .4s ease both; animation-delay: calc(var(--i) * 70ms); }
.ranklist .rl:first-child { border-top-color: transparent; }
.ranklist .rl.lead { background: rgba(255, 190, 107, 0.36); border-radius: var(--s3); border-top-color: transparent; }
.ranklist .rl.lead + .rl { border-top-color: transparent; }
.ranklist .rk { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--pill); color: var(--badge-sub); font: 700 0.8em/1 var(--ui); font-variant-numeric: tabular-nums; }
.ranklist .rl.lead .rk { background: var(--amber); color: var(--badge-ink); }
.ranklist .swatch { width: 1.25em !important; height: 1.25em !important; font-size: 0.8em; }
.ranklist .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ranklist .vl { justify-self: end; font: 700 var(--fs-m)/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--badge-sub); white-space: nowrap; }
.ranklist .vl small { font: inherit; font-weight: 600; }
.ranklist .am { justify-self: end; display: inline-flex; align-items: center; gap: 0.1em; font: 700 var(--fs-xl)/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--badge-plus); }
.ranklist .am .ico { width: 0.9em; height: 0.9em; margin: 0; color: var(--badge-gold); }
.ranklist .am .z { color: var(--badge-sub); font-weight: 600; }
.ranklist.many .rl { font-size: var(--fs-m); padding-block: var(--s1); } .ranklist.many .am { font-size: var(--fs-l); } .ranklist.many .vl { font-size: var(--fs-s); }
.xm { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: var(--badge-minus); -webkit-mask: var(--ic-cross) center / contain no-repeat; mask: var(--ic-cross) center / contain no-repeat; }
@keyframes rl-in { from { opacity: 0; transform: translateY(1vh); } to { opacity: 1; transform: none; } }

/* Siegerehrung: three snow-plaque podium blocks (2nd · 1st · 3rd), revealed 3rd → 2nd → 1st; boxes are the big number */
.podium3 { position: absolute; z-index: 6; left: var(--s9); right: var(--s9); bottom: 0; display: flex; justify-content: center; align-items: flex-end; gap: var(--s6); pointer-events: none; }
.podium3 .pd { --h: 40vh; position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s2); width: min(30vw, 42vh); height: var(--h); padding: var(--s6) var(--s4) 0;
  border-radius: var(--s7) var(--s7) 0 0; background: var(--plaque); box-shadow: var(--plaque-shadow); color: var(--badge-ink); opacity: 0; transform: translateY(8vh);
  transition: opacity .5s ease, transform .6s cubic-bezier(.45,0,.55,1); }
.podium3 .pd::before { content: ''; position: absolute; left: var(--s5); right: var(--s5); bottom: calc(100% - var(--s2)); height: var(--s6); background: var(--capsoft) 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 -0.3vh 0.4vh rgba(28, 22, 58, 0.18)); }
.podium3 .pd.in { opacity: 1; transform: none; }
.podium3 .pd.p1 { --h: 54vh; width: min(34vw, 48vh); box-shadow: 0 0 0 max(4px, 0.6vh) var(--amber), var(--plaque-shadow), 0 0 10vh rgba(255, 190, 107, 0.45); }
.podium3 .pd.p3 { --h: 33vh; }
.podium3 .pd-team { display: flex; align-items: center; justify-content: center; gap: var(--s2); max-width: 100%; font: 700 var(--fs-l)/var(--lh-title) var(--title); letter-spacing: var(--ls-title); text-align: center; }
.podium3 .pd-team .nm { min-width: 0; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.podium3 .pd-team .swatch { flex: none; width: 1.1em !important; height: 1.1em !important; font-size: 0.8em; }
.podium3 .p1 .pd-team { font-size: var(--fs-xl); }
.podium3 .pd-n { display: flex; align-items: center; gap: 0.08em; font: 700 var(--fs-2xl)/1 var(--ui); font-variant-numeric: tabular-nums; }
.podium3 .p1 .pd-n { font-size: var(--fs-3xl); }
.podium3 .pd-n .ico { width: 0.75em; height: 0.75em; margin: 0; }
.podium3 .pd-c { display: flex; align-items: center; gap: 0.1em; font: 600 var(--fs-m)/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--badge-sub); }
.podium3 .pd-c .ico { width: 1em; height: 1em; margin: 0; color: var(--badge-gold); }
.podium3 .pd-block { margin-top: auto; padding-bottom: var(--s6); }
.podium3 .pd-block span { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--pill); box-shadow: 0 0 0 max(2px, 0.25vh) var(--badge-ink); font: 700 var(--fs-xl)/1 var(--ui); color: var(--badge-ink); }
.podium3 .p1 .pd-block span { background: var(--amber); }
.podium3 .pd-block .crown { width: 0.95em; height: 0.95em; margin: 0; color: var(--badge-ink); }
.podium3.out { transition: opacity .45s ease-in; opacity: 0; }

/* tutorial controls, separated by role: «Weiter» = the primary action where the eye ends (bottom centre of the card,
   a round arrow on the Samichlaus bubble, or bottom centre of the screen); «Überspringen» = quiet lettering in the corner */
.nextbtn { right: auto; left: 50%; bottom: var(--s10); transform: translateX(-50%);   /* beats without card/bubble: above the bottom edge (the «Menü · Esc» button lives there) */ padding: var(--s3) var(--s6) var(--s3) var(--s7); background: var(--amber); color: var(--badge-ink);
  box-shadow: 0 0 0 max(2px, 0.3vh) var(--badge-ink), 0 var(--s2) var(--s5) rgba(28, 22, 58, 0.45), 0 0 4vh rgba(255, 190, 107, 0.5); font: 700 var(--fs-l)/var(--lh-num) var(--ui); opacity: 0.45; pointer-events: auto; }
.nextbtn.ready { opacity: 1; animation: none; }
.nextbtn.ready::after { animation: next-nudge 1.6s ease-in-out infinite; }
@keyframes next-nudge { 50% { transform: translateX(0.28em); } }
.nextbtn.incard { position: absolute; bottom: 0; transform: translate(-50%, 50%); }
.nextbtn.inbub { position: absolute; left: auto; right: calc(-1 * var(--s4)); bottom: calc(-1 * var(--s4)); transform: none; width: 2.2em; height: 2.2em; padding: 0; justify-content: center; border-radius: 50%; font-size: var(--fs-l); }
.nextbtn.inbub span { display: none; }
.nextbtn.inbub::after { width: 1.1em; height: 1.1em; }
.skipbtn { right: var(--s7); bottom: var(--s6); padding: var(--s1) var(--s2); background: none; box-shadow: none; color: var(--badge-ink); text-shadow: var(--lamplit); font: 600 var(--fs-s)/var(--lh-num) var(--ui); opacity: 0.85; }
.skipbtn::after { filter: drop-shadow(0 0 0.1em var(--halo)) drop-shadow(0 0 0.25em #ffe1b5); }
.skipbtn:hover, .skipbtn:focus-visible { background: none; opacity: 1; text-decoration: underline; text-underline-offset: 0.2em; }
.stage > div.tutcard { padding-bottom: var(--s9); }   /* room for «Weiter» straddling the card's foot */

@media (prefers-reduced-motion: reduce) {
  .sceneword { animation: badge-fade .3s ease both; }
  .ranklist, .ranklist .rl { animation: badge-fade .3s ease both; }
  .podium3 .pd { transform: none; transition: opacity .3s ease; }
  .nextbtn.ready::after { animation: none; }
}

/* Endspurt / Zwischenstand with two columns at 720p: the names keep room (numbers one step smaller in this mode) */
.stage .srows.two { column-gap: var(--s7); }
.stage .srows.two .srow { font-size: var(--fs-m); grid-template-columns: 1.45em 0.9em 1.25em minmax(0, 1fr) 3em 3.4em; }
.stage .srows.two .srow .bx, .stage .srows.two .srow .cn { font-size: var(--fs-l); }
/* while the Zwischenstand / Endspurt card is up, it IS the standings: the team bar steps out and the card takes its width
   (two columns keep whole names at 720p with 10 teams) */
.host:has(.stage.on .standing) .board { display: none; }
.host:has(#stage.on .standing) #stage { padding-right: var(--s9); }
.stage > div.standing:has(.srows.two) { width: min(100%, 150vh); }
/* Esc menu (PM, 9 Nov 2026): a snow plaque in the middle, the game paused behind a soft night veil */
.escmenu { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(13, 23, 38, 0.45); backdrop-filter: blur(3px); }
.escbox { min-width: min(560px, 86vw); background: var(--plaque, #fffaf2); color: var(--night, #1c2333); border-radius: var(--s5, 24px); padding: var(--s6, 32px); box-shadow: var(--plaque-shadow, 0 18px 50px rgba(0,0,0,.35)); display: flex; flex-direction: column; gap: var(--s2, 10px); }
.escbox .esct { font: 700 max(5vh, 34px)/1.05 var(--title); margin-bottom: var(--s2, 10px); }
.escbox button { display: flex; justify-content: space-between; align-items: center; gap: var(--s4, 18px); padding: var(--s3, 14px) var(--s4, 18px); border: 0; border-radius: 99px; background: rgba(28, 35, 51, 0.07); color: inherit; font: 600 max(2.4vh, 17px)/1.2 var(--ui); cursor: pointer; text-align: left; }
.escbox button:hover, .escbox button:focus-visible { background: rgba(240, 191, 69, 0.35); outline: none; }
.escbox button:first-of-type { background: var(--night, #1c2333); color: #fffaf2; }
.escbox button.warn { background: #f8d66a; color: var(--night, #1c2333); }
.escbox kbd { font: 700 max(1.7vh, 13px)/1 var(--ui); padding: 4px 9px; border-radius: 8px; background: rgba(28, 35, 51, 0.12); }
.escbox button:first-of-type kbd { background: rgba(255, 250, 242, 0.2); }
.escbox .esckeys { margin-top: var(--s2, 10px); font: 500 max(1.7vh, 13px)/1.4 var(--ui); opacity: 0.75; }
/* the bottom operator bar is now one quiet «Menü · Esc» button (mouse only); everything else lives in the Esc menu (user, 9 Nov 2026) */
.mod .menubtn { display: inline-flex; align-items: center; gap: 8px; }
.mod .menubtn kbd { font: 700 max(1.5vh, 11px)/1 var(--ui); padding: 3px 7px; border-radius: 7px; background: rgba(28, 35, 51, 0.12); }
/* team names never break mid-word (podium, end card): one line, host.js fitLine() shrinks the font (PM, 9 Nov 2026) */
.podium3 .pd-team .nm, .endcard .ec-w span { display: block; white-space: nowrap; overflow: hidden; overflow-wrap: normal; hyphens: manual; -webkit-line-clamp: unset; max-width: 100%; }
.endcard { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.endcard .ec-rows { min-height: 0; overflow: hidden; }
.endcard.many .ec-r { padding: 0.15em 0; }
.endcard .ec-x { position: relative; z-index: 1; }
/* DEMO (host.html?demo=1): the Esc menu gets a second column «Demo» — segments with their keys, the minigame picker, a
   Probe toggle and one legend line. Same snow plaque, same buttons; only the first button of the left column is dark. */
.escbox.demo { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr); column-gap: var(--s6, 32px); width: min(1500px, 94vw); max-height: 94vh; overflow: auto; }
.escbox.demo .escmain, .escbox .escdemo { display: flex; flex-direction: column; gap: var(--s2, 10px); min-width: 0; }
.escbox .escdemo .kicker { margin-top: var(--s2, 10px); }
.escbox .escdemo .dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2, 10px); }
.escbox .escdemo .dgrid.mg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.escbox .escdemo button, .escbox .escdemo button:first-of-type { background: rgba(28, 35, 51, 0.07); color: inherit; padding: var(--s2, 10px) var(--s4, 18px); font-size: max(2.1vh, 15px); }
.escbox .escdemo button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.escbox .escdemo button:hover, .escbox .escdemo button:focus-visible { background: rgba(240, 191, 69, 0.35); }
.escbox .escdemo button kbd, .escbox .escdemo button:first-of-type kbd { background: rgba(28, 35, 51, 0.12); }
.escbox .escdemo button.probe.on { background: var(--lamp, #ffbe6b); }
@media (max-width: 900px) { .escbox.demo { grid-template-columns: 1fr; } }
/* the open Esc menu hides the 3D name / box tags and popups (they were drawn over the menu) — demo and normal game (PM, 9 Nov 2026) */
.host:has(#escmenu) #tags, .host:has(#escmenu) #pops { visibility: hidden; }