/* Spielbildschirm: WebGL-Fläche + HUD */
.screen-game { background: #0b0e1c; }
.gl-wrap { position: absolute; inset: 0; }
.gl-wrap canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.tag-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tag { --pc: #888; position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; font: 700 14px var(--font-ui); letter-spacing: .05em; color: #fff; text-shadow: 0 0 6px #000, 0 1px 2px #000; will-change: transform; white-space: nowrap; transition: opacity .15s; }
.tag span { padding: 1px 9px; border-radius: 99px; background: color-mix(in srgb, var(--pc) 55%, rgba(0,0,0,.55)); border: 1px solid color-mix(in srgb, var(--pc) 80%, transparent); }
.tag.me span { box-shadow: 0 0 10px var(--pc); }
.speedlines { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(ellipse 85% 70% at 50% 50%, transparent 55%, rgba(255,255,255,.16) 100%); mix-blend-mode: screen; }
.speedlines.on { opacity: 1; }
.hud { position: absolute; inset: 0; pointer-events: none; overflow: hidden; font-family: var(--font-ui); }
.game-menu-btn { position: absolute; z-index: 20; right: 10px; top: 10px; background: rgba(7,10,24,.6); border: 1px solid var(--line-2); backdrop-filter: blur(4px); }
.game-fs-btn { position: absolute; z-index: 20; right: 10px; bottom: 10px; background: rgba(7,10,24,.6); border: 1px solid var(--line-2); backdrop-filter: blur(4px); opacity: .75; }
.game-fs-btn:hover { opacity: 1; }

.hud-tl { position: absolute; left: 14px; top: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hud-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 16px 7px; border-radius: 14px; background: linear-gradient(180deg, rgba(14,20,52,.78), rgba(7,10,24,.78)); border: 1px solid var(--line-2); backdrop-filter: blur(5px); transform: skewX(-6deg); }
.hud-chip > * { transform: skewX(6deg); }
.hud-dist b { font: 400 40px/1 var(--font-display); color: #fff3d0; text-shadow: 0 0 16px rgba(255,179,0,.6); }
.hud-dist span { font: 700 16px var(--font-ui); letter-spacing: .1em; color: var(--amber-2); }
.hud-time { gap: 10px; } .hud-time b { font: 400 22px/1 var(--font-display); color: var(--text); } .hud-time span { font: 700 12px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.hud-time.low b { color: var(--hot); animation: pulse 1s infinite; }
.hud-zone { padding: 3px 12px; border-radius: 99px; background: rgba(7,10,24,.62); border: 1px solid var(--line-2); font: 700 13px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); transition: opacity .6s; }

.hud-tr { position: absolute; right: 62px; top: 12px; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; max-width: 40vw; }
.stand { --pc: #888; display: grid; grid-template-columns: 22px auto 1fr; align-items: center; gap: 8px; min-width: 190px; padding: 4px 12px 4px 8px; border-radius: 10px; background: rgba(7,10,24,.68); border: 1px solid var(--line); border-left: 4px solid var(--pc); backdrop-filter: blur(4px); font: 700 15px var(--font-ui); transition: transform .3s var(--ease); }
.stand.me { border-color: color-mix(in srgb, var(--pc) 75%, transparent); background: color-mix(in srgb, var(--pc) 14%, rgba(7,10,24,.72)); box-shadow: 0 0 14px color-mix(in srgb, var(--pc) 30%, transparent); }
.stand i { font: 400 14px var(--font-display); font-style: normal; color: var(--text-3); text-align: center; }
.stand em { font-style: normal; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand b { text-align: right; font-weight: 700; color: var(--amber-2); font-variant-numeric: tabular-nums; }
.hud-train { padding: 5px 12px; border-radius: 12px; background: rgba(7,10,24,.62); border: 1px solid var(--line-2); font: 600 13px var(--font-ui); letter-spacing: .06em; color: var(--text-2); text-align: right; }
.hud-train b { color: var(--amber-2); letter-spacing: .12em; text-transform: uppercase; display: block; }

.hud-bl { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; width: min(300px, 44vw); }
.gauge { position: relative; height: 12px; border-radius: 8px; background: rgba(7,10,24,.7); border: 1px solid var(--line-2); overflow: hidden; transform: skewX(-18deg); }
.gauge i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--cyan), var(--amber), var(--hot)); transition: width .08s linear; box-shadow: 0 0 12px rgba(255,138,42,.5); }
.gauge-row { display: flex; justify-content: space-between; font: 700 13px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); text-shadow: 0 1px 3px #000; }
.gauge-row b { color: var(--amber-2); }
.hud-hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 7px 16px; border-radius: 99px; background: rgba(7,10,24,.6); border: 1px solid var(--line); color: var(--text-2); font: 600 14px var(--font-ui); letter-spacing: .06em; white-space: nowrap; }
.hud-debug { position: absolute; left: 14px; top: 124px; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.6); border: 1px solid var(--line); font: 600 13px/1.5 ui-monospace, Consolas, monospace; color: #cfe; white-space: pre; }
.hud-center { position: absolute; left: 0; right: 0; top: 28%; display: grid; place-items: center; pointer-events: none; }

.banner { position: absolute; z-index: 15; left: 0; right: 0; top: 26%; display: flex; justify-content: center; align-items: center; text-align: center; pointer-events: none;
  font: 400 clamp(60px, 16vh, 190px)/1 var(--font-display); letter-spacing: .02em; color: #fff3d0; text-shadow: 0 6px 0 rgba(60,20,0,.85), 0 0 50px rgba(255,138,42,.8); opacity: 0; transform: skewX(-8deg) scale(1.25); }
.banner.show { animation: bannerIn .55s var(--ease) both; }
.banner.go { color: #d6fff0; text-shadow: 0 6px 0 rgba(0,60,40,.85), 0 0 60px rgba(90,240,138,.85); }
.banner.end { font-size: clamp(34px, 8vh, 90px); color: #ffd9e8; text-shadow: 0 5px 0 rgba(80,0,40,.85), 0 0 50px rgba(255,61,139,.8); }
.banner.zone { font-size: clamp(28px, 6vh, 60px); top: 14%; color: #d8fbff; text-shadow: 0 4px 0 rgba(0,40,70,.85), 0 0 40px rgba(45,226,255,.8); }
@keyframes bannerIn { from { opacity: 0; transform: skewX(-8deg) scale(1.9); filter: blur(10px); } to { opacity: 1; transform: skewX(-8deg); filter: none; } }

/* Menü (Pause) */
.dialog-menu { width: min(92vw, 420px); padding: 26px 24px 20px; }
.dialog-menu form { display: flex; flex-direction: column; gap: 16px; }
.dialog-menu h3 { text-align: center; font-size: 22px; text-shadow: 0 0 20px rgba(45,226,255,.4); }
.menu-buttons { display: flex; flex-direction: column; gap: 12px; }
.menu-buttons .btn { width: 100%; }
.menu-note { text-align: center; font-size: 14px; }

/* Endtafel */
.end-overlay { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; background: rgba(4,6,16,.74); backdrop-filter: blur(6px); }
.end-card { width: min(94vw, 680px); padding: 26px 28px 22px; border-radius: 22px; background: linear-gradient(180deg, rgba(26,34,82,.96), rgba(8,11,30,.97)); border: 1px solid var(--line-3); box-shadow: 0 0 80px rgba(45,226,255,.16), 0 30px 80px rgba(0,0,0,.8); text-align: center; animation: cardIn .5s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.94); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.end-head { font: 400 clamp(28px, 5.5vh, 46px)/1.1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--amber-2); text-shadow: 0 0 30px rgba(255,179,0,.5); }
.end-sub { margin: 6px 0 14px; color: var(--text-3); font: 700 13px var(--font-ui); letter-spacing: .22em; text-transform: uppercase; }
.end-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.end-table th { font: 700 12px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding: 6px 8px; }
.end-table td { padding: 9px 8px; font: 700 18px var(--font-ui); border-top: 1px solid var(--line); }
.end-table tr { --pc: #888; }
.end-table td.pl { width: 46px; color: var(--pc); font: 400 18px var(--font-display); }
.end-table td.nm { text-align: left; color: var(--pc); font-weight: 800; }
.end-table td.mt { text-align: right; color: var(--amber-2); font-variant-numeric: tabular-nums; }
.end-table tr.first td { background: color-mix(in srgb, var(--pc) 12%, transparent); }
.end-wait { color: var(--text-2); font-weight: 600; }
@media (max-width: 820px) { .hud-tr { max-width: 52vw; } .stand { min-width: 140px; } .hud-dist b { font-size: 30px; } }

/* ── Erweiterungen: Roulette, Boost, Item-Fach, Status, Last Man Standing ─────────────────────────────── */
.tag .roulette { font-size: 34px; line-height: 1; margin-bottom: 4px; filter: drop-shadow(0 0 8px rgba(255,255,255,.6)) drop-shadow(0 2px 2px #000); }
.tag .roulette.spin { animation: rouletteSpin .18s linear infinite; }
@keyframes rouletteSpin { 0% { transform: translateY(-3px) scale(.92); } 50% { transform: translateY(2px) scale(1.08); } 100% { transform: translateY(-3px) scale(.92); } }
.banner.hot { color: #fff1c9; text-shadow: 0 6px 0 rgba(90,20,0,.9), 0 0 60px rgba(255,120,30,.95); }

.boost-row { display: flex; align-items: center; gap: 10px; font: 700 12px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); text-shadow: 0 1px 3px #000; }
.boost-row[hidden] { display: none; }
.boost { position: relative; flex: 1; height: 14px; border-radius: 8px; background: rgba(7,10,24,.72); border: 1px solid var(--line-2); overflow: hidden; transform: skewX(-18deg); }
.boost i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 8px; background: linear-gradient(90deg, #ffb300, #ffe066); box-shadow: 0 0 12px rgba(255,200,40,.6); transition: width .08s linear; }
.boost.on i { background: linear-gradient(90deg, #ff6a1a, #ffd24a); box-shadow: 0 0 18px rgba(255,140,30,.95); }
.boost.empty { border-color: rgba(255,80,80,.5); }
.gauge.over i { background: linear-gradient(90deg, #ffb300, #ff6a1a, #ff3d8b); }

.hud-item { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 10px 22px 10px 14px; border-radius: 18px; background: linear-gradient(180deg, rgba(14,20,52,.86), rgba(7,10,24,.86)); border: 2px solid var(--line-2); backdrop-filter: blur(5px); box-shadow: 0 0 22px rgba(0,0,0,.5); }
.hud-item[hidden] { display: none; }
.hud-item[data-kind="u"] { border-color: #3ad6c4; box-shadow: 0 0 22px rgba(58,214,196,.35); }
.hud-item[data-kind="t"] { border-color: #ff7a3a; box-shadow: 0 0 22px rgba(255,122,58,.4); }
.hud-item > b { font-size: 46px; line-height: 1; filter: drop-shadow(0 2px 3px #000); min-width: 52px; text-align: center; }
.hud-item.spin > b { animation: rouletteSpin .18s linear infinite; }
.hud-item > div { display: flex; flex-direction: column; gap: 2px; }
.hud-item span { font: 800 17px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.hud-item em { font: 600 13px var(--font-ui); font-style: normal; letter-spacing: .05em; color: var(--text-2); }

.hud-status { display: flex; flex-wrap: wrap; gap: 6px; max-width: 320px; }
.stat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: rgba(7,10,24,.7); border: 1px solid var(--line-2); font: 700 13px var(--font-ui); letter-spacing: .06em; color: #fff; animation: pulse 1.2s infinite; }
.stat-chip b { font-size: 16px; }
.stat-chip em { font-style: normal; color: var(--amber-2); font-variant-numeric: tabular-nums; }
.stat-chip.burn { border-color: #ff7a1a; } .stat-chip.ko { border-color: #ffe066; } .stat-chip.ice { border-color: #8fe3ff; } .stat-chip.shield { border-color: #6ad0ff; animation: none; } .stat-chip.frog { border-color: #8bff5a; animation: none; } .stat-chip.jet { border-color: #ffb02e; animation: none; }
.hud-alive b { font: 400 22px/1 var(--font-display); color: #ffd9e8; text-shadow: 0 0 14px rgba(255,61,139,.7); }
.hud-alive span { font: 700 12px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.edge-warn { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .12s; background: radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(255,40,70,.5) 100%); mix-blend-mode: screen; }
.stand.out { opacity: .5; text-decoration: line-through; }
.stand.out i { color: #ff6a8a; }

.end-scroll { max-height: 56vh; overflow: auto; margin-bottom: 14px; }
.end-table td.sx, .end-table td.sv { text-align: center; font-size: 16px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.end-table th { white-space: nowrap; }
@media (max-width: 820px) { .hud-item { transform: translateX(-50%) scale(.85); } }