/* Spiel-Screen: Vollbild-Canvas + HUD + Phasen-Overlays (Glücksrad, Regelkarte, Countdown, Ergebnis, Endwertung).
   Schichten: Canvas (0) → Hinweisleiste (10) → Overlays (20; nur die Karten fangen Klicks, der Rest ist durchlässig) → HUD-Kopfleiste (25, Knöpfe immer klickbar) → Banner (30, nie klickbar).
   Der Audit in der Konsole (`__audit()`, js/audit.js) meldet Knöpfe, die von etwas überdeckt werden – nach Änderungen an Overlays ausführen. */

.screen-game { background: #DCE6FF; }
.game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; z-index: 0; }

/* ── HUD ──────────────────────────────────────────────────────────────────── */
.hud { position: absolute; inset: 0; pointer-events: none; }                 /* bewusst kein z-index: die Kinder sortieren sich direkt zwischen Canvas und Overlays */
.hud-top { position: absolute; z-index: 25; top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px var(--pad) 0; }
.hud-left, .hud-right { flex: 1 1 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hud-right { justify-content: flex-end; }
.hud-pill { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 14px; background: rgba(255,255,255,.92); color: var(--ink); font: 600 17px var(--font-display); box-shadow: 0 4px 0 rgba(43,42,85,.14); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hud-round { background: var(--ink); color: #fff; flex: none; }
.hud-timer { flex: none; min-width: 84px; height: 46px; display: grid; place-items: center; padding: 0 18px; border-radius: 16px; background: var(--sun); color: var(--ink); font: 700 28px var(--font-display); font-variant-numeric: tabular-nums; box-shadow: 0 5px 0 var(--sun-d); }
.hud-timer.low { background: var(--coral); color: #fff; box-shadow: 0 5px 0 var(--coral-d); animation: tick .5s ease-in-out infinite; }
@keyframes tick { 50% { transform: scale(1.08); } }
.hud-btn { pointer-events: auto; background: rgba(255,255,255,.92); box-shadow: 0 4px 0 rgba(43,42,85,.14); height: 40px; width: 40px; border-radius: 14px; }
.hud-btn:hover { background: #fff; }
.hud-hint { position: absolute; z-index: 10; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 var(--pad); }
.hud-hint .chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 12px; background: rgba(43,42,85,.82); color: #fff; font: 700 14px var(--font-ui); }
.hud-hint kbd { background: #fff; border-color: transparent; box-shadow: none; padding: 0 8px; }
.hud-banner { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none; }
.banner-text { font: 700 clamp(56px, 16vw, 168px)/1 var(--font-display); color: var(--sun); -webkit-text-stroke: clamp(5px, 1.2vw, 12px) var(--ink); paint-order: stroke fill; text-shadow: 0 clamp(6px, 1.2vw, 14px) 0 var(--ink); animation: banner 1.4s var(--ease) forwards; text-align: center; padding: 0 12px; }
@keyframes banner { 0% { opacity: 0; transform: scale(.4) rotate(-6deg); } 18% { opacity: 1; transform: scale(1.08) rotate(2deg); } 30% { transform: scale(1) rotate(0); } 78% { opacity: 1; } 100% { opacity: 0; transform: scale(1.12); } }
.hud-conn { position: absolute; z-index: 26; top: 72px; left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 99px; background: var(--red); color: #fff; font: 700 14px var(--font-ui); box-shadow: 0 4px 0 #A32A3D; }

/* ── Overlays ─────────────────────────────────────────────────────────────── */
.overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: calc(var(--pad) + 40px) var(--pad) var(--pad); overflow: hidden; background: rgba(43,42,85,.30); pointer-events: none; }
.overlay > .card, .pick-card { pointer-events: auto; }
.overlay > .card { max-height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; }
.overlay > .card > * { flex: none; }                                       /* Kinder nie zusammendrücken (sonst überlappen sie) – die Karte scrollt stattdessen senkrecht */
.ov-pick { background: repeating-conic-gradient(from 0deg at 50% 48%, #7B6BF2 0 9deg, #6C5CE7 9deg 18deg); }      /* Showbühne: Strahlen in Violett */
.ov-results, .ov-final { background: rgba(43,42,85,.58); }
.ov-count { background: rgba(43,42,85,.12); }

/* Glücksrad */
.pick-card { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(100%, 720px); }
.pick-title { font: 700 clamp(24px, 4.6vw, 40px) var(--font-display); color: #fff; text-shadow: 0 4px 0 rgba(43,42,85,.5); text-align: center; }
.pick-canvas { width: min(88vw, 60dvh, 560px); aspect-ratio: 1; display: block; }
.pick-result { min-height: 58px; display: flex; align-items: center; justify-content: center; }
.pick-result .bubble { padding: 10px 26px; border-radius: 22px; background: var(--sun); color: var(--ink); font: 700 clamp(24px, 4vw, 34px) var(--font-display); box-shadow: 0 6px 0 var(--sun-d); animation: pop .45s var(--ease); }

/* Regelkarte */
.intro-card { width: min(100%, 760px); display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; animation: pop .4s var(--ease); }
.intro-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.intro-ico { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; background: var(--tile, var(--lilac)); }
.intro-ico svg { width: 62px; height: 62px; }
.intro-head h2 { font: 700 clamp(28px, 5vw, 42px)/1.05 var(--font-display); }
.intro-head p { color: var(--ink-2); font: 700 17px var(--font-ui); margin-top: 2px; }
.intro-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.intro-rules { margin: 0; padding-left: 22px; color: var(--ink); font-size: 17px; line-height: 1.45; }
.intro-rules li { margin: 4px 0; }
.intro-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; }
.team-card { --tc: var(--violet); padding: 10px 12px; border-radius: 18px; background: var(--paper-2); box-shadow: inset 0 6px 0 var(--tc); padding-top: 16px; min-width: 0; }
.team-card.mine { background: var(--lilac); }
.team-card h4 { font: 600 16px var(--font-display); color: var(--ink); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.team-members { display: flex; flex-wrap: wrap; gap: 6px; }
.member { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 34px; padding: 0 10px 0 2px; border-radius: 99px; background: #fff; font: 700 14px var(--font-ui); }
.member img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.member span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member.me { background: var(--sun); }
.intro-foot, .results-foot { position: sticky; bottom: -1px; z-index: 1; background: var(--paper); padding: 8px 0 2px; }   /* bleibt bei kleinen Höhen sichtbar, während die Karte scrollt */
.intro-foot { display: flex; align-items: center; gap: 12px; }
.timebar { flex: 1; height: 10px; border-radius: 10px; background: var(--bg); overflow: hidden; }
.timebar i { display: block; height: 100%; width: 100%; background: var(--violet); border-radius: 10px; transform-origin: left; }
.you-note { font: 700 16px var(--font-ui); color: var(--violet-d); }

/* Countdown */
.count-num { font: 700 clamp(120px, 34vw, 340px)/1 var(--font-display); color: #fff; -webkit-text-stroke: clamp(8px, 2vw, 18px) var(--ink); paint-order: stroke fill; text-shadow: 0 clamp(8px, 2vw, 20px) 0 var(--ink); animation: count 1s var(--ease) infinite; }
@keyframes count { 0% { transform: scale(1.6); opacity: 0; } 25% { transform: scale(.95); opacity: 1; } 40% { transform: scale(1); } 100% { transform: scale(.9); opacity: .9; } }

/* Ergebnis */
.results-card { width: min(100%, 980px); display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; animation: pop .4s var(--ease); }
.results-head { display: flex; align-items: center; gap: 14px; }
.results-head .intro-ico { width: 56px; height: 56px; border-radius: 18px; flex: none; }
.results-head .intro-ico svg { width: 40px; height: 40px; }
.results-head h2 { font: 700 clamp(22px, 4vw, 32px)/1.1 var(--font-display); }
.results-head p { color: var(--ink-2); font-weight: 700; }
.results-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.results-cols h3 { font: 600 17px var(--font-display); color: var(--ink-2); margin-bottom: 8px; }
.res-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.res-row { --pc: var(--violet); display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px 6px 8px; border-radius: 16px; background: var(--paper-2); animation: rowIn .45s var(--ease) both; animation-delay: calc(var(--i) * 55ms); }
.res-row.me { background: var(--lilac); }
.res-place { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); font: 700 17px var(--font-display); }
.res-place.p1 { background: var(--sun); } .res-place.p2 { background: #D5DBEA; } .res-place.p3 { background: #F0B98F; }
.res-name { min-width: 0; }
.res-name b { display: block; font: 600 17px/1.15 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-name small { display: block; color: var(--ink-2); font: 700 13px var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-avs { display: flex; margin-right: 2px; }
.res-avs img { width: 28px; height: 28px; margin-left: -8px; object-fit: contain; }
.res-avs img:first-child { margin-left: 0; }
.res-pts { min-width: 54px; text-align: right; font: 700 20px var(--font-display); color: var(--green); }
.res-pts.zero { color: var(--ink-3); }
.res-total { display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; }
.res-total b { font: 700 20px var(--font-display); }
.res-total .up { color: var(--green); font: 700 14px var(--font-ui); }
.res-total .down { color: var(--red); font: 700 14px var(--font-ui); }
.res-bar { grid-column: 2 / 4; height: 6px; border-radius: 6px; background: var(--bg); overflow: hidden; }
.res-bar i { display: block; height: 100%; background: var(--pc); border-radius: 6px; transform-origin: left; animation: grow .8s var(--ease) both; animation-delay: calc(var(--i) * 55ms + .2s); }
.res-row.tot { grid-template-columns: 38px minmax(0, 1fr) auto; row-gap: 4px; }
.res-row.tot .res-bar { grid-column: 2 / 4; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-14px); } }
@keyframes grow { from { transform: scaleX(0); } }
.results-foot { display: flex; align-items: center; gap: 12px; }
@media (max-width: 760px) { .results-cols { grid-template-columns: minmax(0, 1fr); } }

/* Endwertung */
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.final-card { position: relative; width: min(100%, 860px); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 22px 20px; animation: pop .5s var(--ease); }
.final-card h2 { font: 700 clamp(28px, 6vw, 46px)/1 var(--font-display); }
.podium { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; min-height: 0; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; animation: podIn .7s var(--ease) both; animation-delay: calc(var(--d) * 220ms + .2s); }
.pod img { width: clamp(56px, 12vw, 110px); aspect-ratio: 1; object-fit: contain; }
.pod .pn { max-width: 100%; font: 600 clamp(15px, 2.6vw, 20px) var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .pp { font: 700 15px var(--font-ui); color: var(--ink-2); }
.pod .block { width: 100%; border-radius: 18px 18px 0 0; display: grid; place-items: start center; padding-top: 8px; font: 700 clamp(28px, 5vw, 44px) var(--font-display); color: var(--ink); }
.pod.p1 .block { height: clamp(64px, 17dvh, 130px); background: var(--sun); } .pod.p2 .block { height: clamp(48px, 12.5dvh, 96px); background: #D5DBEA; } .pod.p3 .block { height: clamp(36px, 9dvh, 70px); background: #F0B98F; }
.pod.me .pn { color: var(--violet-d); }
@keyframes podIn { from { opacity: 0; transform: translateY(40px) scale(.9); } }
.final-rest { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 6px; max-height: clamp(96px, 22dvh, 190px); overflow-x: hidden; overflow-y: auto; }
.final-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }

@media (max-height: 560px) {
  .overlay { padding-top: 56px; }
  .intro-card, .results-card { padding: 14px 16px; gap: 10px; }
  .intro-ico { width: 60px; height: 60px; } .intro-ico svg { width: 44px; height: 44px; }
}

@media (max-width: 520px) {                                   /* Handy hochkant: Kopfleiste verschlanken, damit Runde · Zeit · Knöpfe nebeneinander passen */
  .hud-game, #hud-rules { display: none; }
  .hud-right { gap: 4px; }
  .hud-btn { width: 38px; height: 38px; }
  .hud-pill { padding: 0 12px; font-size: 15px; }
  .hud-timer { min-width: 66px; height: 42px; padding: 0 12px; font-size: 24px; }
}