:root {
  --bg: #0d0f12;
  --panel: #161a20;
  --panel-2: #1e232b;
  --line: #2a313b;
  --text: #f2f4f7;
  --muted: #8b95a3;
  --signal: #c6f432;      /* field-readable lime */
  --signal-ink: #10140a;
  --danger: #ff4d4f;
  --warn: #ffb020;
  --ok: #3ddc84;
  --team: #3b82f6;
  --radius: 14px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); }
body { overscroll-behavior: none; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.boot { height: 100vh; display: grid; place-items: center; font-weight: 900; letter-spacing: .3em; color: var(--muted); }

/* ---------- Login ---------- */
.login { min-height: 100vh; padding: calc(40px + var(--safe-top)) 24px calc(24px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 22px; max-width: 460px; margin: 0 auto; }
.wordmark { font-weight: 900; font-size: 44px; letter-spacing: .08em; line-height: 1; }
.wordmark span { color: var(--signal); }
.login h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.code-input { width: 100%; font-family: var(--mono); font-size: 40px; letter-spacing: .35em; text-align: center; padding: 18px 8px; background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); outline: none; }
.code-input:focus { border-color: var(--signal); }
.consent { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; font-size: 14px; line-height: 1.45; color: #c9d0d9; }
.consent label { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; color: var(--text); font-weight: 600; }
.consent input { width: 22px; height: 22px; accent-color: var(--signal); flex: none; margin: 0; }
.hint { background: #1d1a0e; border: 1px solid #4a4012; color: #ffe08a; border-radius: var(--radius); padding: 12px 14px; font-size: 14px; line-height: 1.45; }
.error { color: var(--danger); font-weight: 600; min-height: 1.2em; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--radius); padding: 16px 18px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--panel-2); cursor: pointer; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; }
.btn.primary { background: var(--signal); color: var(--signal-ink); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.block { width: 100%; }

/* ---------- Shell ---------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 10; padding: calc(24px + var(--safe-top)) 16px 10px; display: flex; align-items: center; gap: 10px; background: rgba(13,15,18,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar .brand { font-weight: 900; letter-spacing: .1em; font-size: 15px; }
.topbar .brand span { color: var(--signal); }
.team-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--panel-2); }
.team-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--team); display: inline-block; }
.conn { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 3px rgba(255,77,79,.2); }
.conn.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(61,220,132,.18); }
main { flex: 1; padding: 16px 16px calc(96px + var(--safe-bottom)); max-width: 640px; width: 100%; margin: 0 auto; }

.tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(13,15,18,.96); border-top: 1px solid var(--line); padding-bottom: var(--safe-bottom); }
.tabs button { background: none; border: 0; padding: 12px 2px 10px; font-size: 10px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; min-width: 0; text-transform: uppercase; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tabs button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabs button.on { color: var(--signal); }

/* ---------- Cards ---------- */
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.title { font-size: 30px; font-weight: 900; line-height: 1.05; margin: 0 0 14px; letter-spacing: -.01em; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.card h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.row { display: flex; align-items: center; gap: 10px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stat { font-family: var(--mono); font-size: 34px; font-weight: 800; }
.big-status { text-align: center; padding: 26px 16px; border-radius: var(--radius); font-weight: 900; font-size: 28px; letter-spacing: .04em; margin-bottom: 14px; }
.big-status small { display: block; font-size: 14px; font-weight: 600; letter-spacing: 0; margin-top: 8px; opacity: .85; }
.big-status.wanted { background: var(--danger); color: #fff; }
.big-status.hunting { background: var(--signal); color: var(--signal-ink); }
.big-status.caught { background: var(--panel-2); color: var(--muted); border: 1px dashed var(--line); }
.big-status.wait { background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: 20px; }

.capture-code { font-family: var(--mono); font-size: 64px; font-weight: 800; letter-spacing: .25em; text-align: center; padding: 18px 0 18px .25em; background: #fff; color: #000; border-radius: var(--radius); margin: 10px 0; }
.timers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.timer { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.timer b { display: block; font-family: var(--mono); font-size: 26px; margin-top: 2px; }
.timer.alert b { color: var(--warn); }

.tracking-banner { display: flex; gap: 10px; align-items: center; background: #14240a; border: 1px solid #3c5c12; color: #d9f99d; border-radius: var(--radius); padding: 12px 14px; font-size: 14px; line-height: 1.35; margin-bottom: 14px; }
.tracking-banner.bad { background: #2a0f10; border-color: #6b1d20; color: #ffc9ca; }
.pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--signal); flex: none; animation: pulse 1.6s infinite; }
.tracking-banner.bad .pulse { background: var(--danger); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(198,244,50,.6); } 100% { box-shadow: 0 0 0 12px rgba(198,244,50,0); } }
.tracking-banner > div { flex: 1; min-width: 0; }
.tb-btn { display: flex; width: 100%; margin-top: 10px; padding: 12px; font-size: 13px; }
.tb-note { display: block; margin-top: 6px; opacity: .85; }
/* Dauer-Tracking am Spieltag: dezente Statuszeile */
.gd-line { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: 13px; line-height: 1.4; padding: 8px 12px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(22,26,32,.6); }
.gd-line > span { flex: none; font-size: 14px; line-height: 1.3; }
.gd-line > div { flex: 1; min-width: 0; }
.gd-line.bad { color: #ffc9ca; border-color: #6b1d20; background: #2a0f10; }
.gd-hint { display: block; margin-top: 3px; opacity: .9; }
.gd-hint .link-btn { color: var(--text); font-weight: 600; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; }
a.btn { text-decoration: none; color: var(--text); }

/* ---------- EWWP-App für Android ---------- */
.app-offer { margin-top: 12px; padding: 14px; border-radius: var(--radius); border: 1px solid #3c5c12; background: #121a0b; }
.app-steps { padding-left: 20px; line-height: 1.5; margin: 12px 0; font-size: 14px; }
.app-offer .btn + .btn, .native-actions .btn + .btn { margin-top: 8px; }
.native-err { margin: 12px 0 0; color: var(--danger); font-weight: 700; font-size: 14px; line-height: 1.4; }
.native-hints { margin: 12px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.45; color: #ffe08a; }
.native-hints li + li { margin-top: 6px; }
.native-hints a { color: var(--signal); }
.native-actions { margin-top: 14px; }

.code-entry { display: flex; gap: 10px; }
.code-entry input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 34px; letter-spacing: .3em; text-align: center; padding: 12px 6px; background: var(--bg); border: 2px solid var(--line); border-radius: var(--radius); outline: none; }
.code-entry input:focus { border-color: var(--signal); }

.map { position: relative; z-index: 0; isolation: isolate; height: 320px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #222; }
.leaflet-container { font-family: var(--sans); }
.geo-map { height: 52vh; min-height: 300px; }
.geo-submit { position: sticky; bottom: calc(84px + var(--safe-bottom)); z-index: 5; margin-top: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.55); }
.geo-pin { transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; }
.geo-pin span { background: var(--signal); color: var(--signal-ink); font-weight: 800; font-size: 12px; padding: 4px 8px; border-radius: 8px; border: 2px solid #fff; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.geo-pin::after { content: ""; width: 3px; height: 14px; background: #fff; }
.geo-pin.target span { background: var(--danger); color: #fff; }
.ping-label { display: inline-block; transform: translate(-50%, -130%); background: var(--danger); color: #fff; font-weight: 800; font-size: 12px; padding: 3px 7px; border-radius: 6px; white-space: nowrap; border: 2px solid #fff; }

.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; margin-right: 8px; }
.dot.on { background: var(--ok); }
.pill { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.pill.ok { background: rgba(61,220,132,.16); color: var(--ok); }
.pill.warn { background: rgba(255,176,32,.16); color: var(--warn); }
.pill.bad { background: rgba(255,77,79,.16); color: var(--danger); }

.score-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.score-row:last-child { border-bottom: 0; }
.score-row .place { font-family: var(--mono); font-weight: 800; font-size: 20px; color: var(--muted); }
.score-row .name { font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.score-row .name i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.score-row .pts { font-family: var(--mono); font-weight: 800; font-size: 24px; }
.score-row.mine .name { color: var(--signal); }

.challenge { border-left: 4px solid var(--signal); }
.challenge.closed { border-left-color: var(--line); opacity: .75; }
.challenge .task { font-size: 20px; font-weight: 800; line-height: 1.25; margin: 4px 0 12px; }
.sub-list { margin: 10px 0 0; font-size: 14px; }
.sub-list li { padding: 8px 0; }

.setting { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.setting:last-child { border-bottom: 0; }
.switch { position: relative; width: 52px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--panel-2); border-radius: 999px; border: 1px solid var(--line); transition: .2s; }
.switch span::after { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; background: var(--muted); border-radius: 50%; transition: .2s; }
.switch input:checked + span { background: var(--signal); border-color: var(--signal); }
.switch input:checked + span::after { transform: translateX(22px); background: var(--signal-ink); }

.message { background: #0f1d2e; border: 1px solid #1f3a5c; border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; font-size: 15px; }
.message small { display: block; color: var(--muted); margin-top: 4px; font-size: 12px; }

/* ---------- Overlay / Camera ---------- */
#overlay { position: fixed; inset: 0; z-index: 50; background: rgba(5,7,10,.84); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.ov-card { width: 100%; max-width: 420px; text-align: center; padding: 30px 22px; border-radius: 22px; background: linear-gradient(165deg, #1c222b, #12161c 60%, #0f1216); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 30px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.07); }
.ov-card .ov-title { font-size: 32px; font-weight: 900; line-height: 1.05; margin: 8px 0 12px; }
.ov-card.good { background: linear-gradient(165deg, #d8ff55, #c6f432 50%, #a3d61f); color: var(--signal-ink); border: 0; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 70px rgba(198,244,50,.22); }
.ov-card.bad { background: linear-gradient(165deg, #ff6466, #ef2d31 50%, #b8161b); color: #fff; border: 0; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 70px rgba(255,77,79,.28); }
.ov-card p { font-size: 16px; line-height: 1.4; margin: 0 0 22px; }
.ov-card .btn { width: 100%; }
.ov-card.good .btn { background: var(--signal-ink); color: var(--signal); }
.ov-card.bad .btn { background: #fff; color: var(--danger); }

.camera { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; flex-direction: column; }
.camera .cam-top { padding: calc(26px + var(--safe-top)) 16px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff; }
.camera .cam-top .task { font-weight: 700; font-size: 14px; opacity: .9; }
.camera .stage { flex: 1; position: relative; overflow: hidden; }
.camera video, .camera .cam-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.camera .cam-shot { z-index: 2; }
.camera .cam-msg { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; color: #fff; font-weight: 700; pointer-events: none; }
.camera .cam-msg .btn { pointer-events: auto; }
.shutter:disabled { opacity: .35; }
.camera .cam-bottom { padding: 18px 16px calc(22px + var(--safe-bottom)); display: flex; align-items: center; justify-content: center; gap: 12px; }
.shutter { width: 78px; height: 78px; border-radius: 50%; border: 5px solid #fff; background: transparent; padding: 0; display: grid; place-items: center; }
.shutter::after { content: ""; width: 60px; height: 60px; border-radius: 50%; background: #fff; transition: transform .1s; }
.shutter:active::after { transform: scale(.88); }
.camera .cam-bottom .btn { flex: 1; }
.cam-close { background: rgba(255,255,255,.15); border: 0; color: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 700; }

#toasts { position: fixed; left: 12px; right: 12px; top: calc(78px + var(--safe-top)); z-index: 70; display: flex; flex-direction: column; gap: 8px; pointer-events: none; align-items: center; }
.toast { max-width: 480px; width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--signal); padding: 12px 14px; border-radius: 12px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: tin .2s ease-out; }
.toast.bad { border-left-color: var(--danger); }
@keyframes tin { from { transform: translateY(-8px); opacity: 0; } }

.maint { background: var(--warn); color: #000; text-align: center; font-weight: 800; padding: 8px; font-size: 14px; }

/* ---------- Manhunt-Zone ---------- */
.zone-alert { text-align: center; padding: 18px 16px; border-radius: var(--radius); background: #2a0f10; border: 2px solid var(--danger); color: #ffc9ca; font-weight: 900; font-size: 20px; letter-spacing: .04em; margin-bottom: 14px; animation: zone-pulse 1s ease-in-out infinite alternate; }
.zone-alert b { display: block; font-family: var(--mono); font-size: 44px; color: #fff; margin: 6px 0; }
.zone-alert small { display: block; font-size: 14px; font-weight: 600; letter-spacing: 0; }
@keyframes zone-pulse { from { box-shadow: 0 0 0 0 rgba(255,77,79,.0); } to { box-shadow: 0 0 0 6px rgba(255,77,79,.35); } }
.zone-dist { margin: 0 0 10px; font-weight: 800; font-size: 15px; }
.zone-dist.in { color: var(--ok); }
.zone-dist.near { color: var(--warn); }
.zone-dist.out { color: var(--danger); }

/* ---------- Animationen ---------- */
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 86; pointer-events: none; }
.fx-flash { position: fixed; inset: 0; z-index: 65; pointer-events: none; animation: fx-flash .7s ease-out forwards; }
@keyframes fx-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

/* Bildschirmwechsel: Inhalt gleitet sanft herein, Karten leicht versetzt */
main.enter > * { animation: rise .32s cubic-bezier(.2,.8,.2,1) both; }
main.enter > *:nth-child(2) { animation-delay: .04s; }
main.enter > *:nth-child(3) { animation-delay: .08s; }
main.enter > *:nth-child(4) { animation-delay: .12s; }
main.enter > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.tabs button svg { transition: transform .2s; }
.tabs button.on svg { transform: translateY(-2px) scale(1.12); }
.tabs button:active svg { transform: scale(.88); }
.btn { transition: transform .1s, filter .15s; }

/* Gesucht: Status pulsiert wie ein Herzschlag */
.big-status.wanted { animation: heartbeat 1.6s ease-in-out infinite; }
@keyframes heartbeat { 0%, 40%, 100% { transform: scale(1); } 12% { transform: scale(1.025); } 24% { transform: scale(.995); } }
.big-status.hunting { animation: rise .4s both; }

/* Vollbild-Meldungen */
#overlay:not([hidden]) { animation: ov-bg .25s ease-out both; }
@keyframes ov-bg { from { background: rgba(0,0,0,0); } }
.ov-card { animation: ov-pop .42s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes ov-pop { from { opacity: 0; transform: scale(.7) translateY(20px); } }
.ov-card.fx-caught { animation: ov-drop .5s cubic-bezier(.2,1.2,.4,1) .1s both; }
@keyframes ov-drop { from { opacity: 0; transform: translateY(-60px) scale(1.15); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 15%, 55% { transform: translateX(-12px) rotate(-1.5deg); } 35%, 75% { transform: translateX(12px) rotate(1.5deg); } }
.ov-crosshair { width: 96px; height: 96px; margin: -6px auto 4px; display: block; fill: none; stroke: #fff; stroke-width: 4; animation: lock-on .7s cubic-bezier(.3,1.3,.5,1) .2s both; }
.ov-crosshair .dot { fill: #fff; stroke: none; animation: blink .5s steps(2) 1s 4; }
@keyframes lock-on { from { transform: scale(2.6) rotate(-90deg); opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }
.ov-emoji { font-size: 64px; line-height: 1; margin: -6px 0 6px; }
.ov-emoji.bounce { animation: bounce-in .8s cubic-bezier(.2,1.6,.4,1) .15s both, wiggle 2.4s ease-in-out 1.2s infinite; }
@keyframes bounce-in { from { transform: scale(0) rotate(-30deg); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-10deg); } 20% { transform: rotate(8deg); } 30% { transform: rotate(0); } }
.ov-card.fx-win .ov-title, .ov-card.fx-ceremony .ov-title { animation: title-pop .6s cubic-bezier(.2,1.6,.4,1) .25s both; }
@keyframes title-pop { from { transform: scale(.4); opacity: 0; } }

/* Geburtstag */
.ov-card.party { background: linear-gradient(140deg, #ff4d8d 0%, #a855f7 50%, #3b82f6 100%); color: #fff; border: 0; box-shadow: 0 20px 60px rgba(168,85,247,.45); }
.ov-card.party .btn { background: #fff; color: #7c3aed; }
.bday-title { font-size: 46px; font-weight: 900; line-height: .95; letter-spacing: .02em; margin: 4px 0 10px; }
.bday-title span { display: inline-block; animation: letter 1.6s ease-in-out infinite; text-shadow: 0 3px 0 rgba(0,0,0,.18); }
@keyframes letter { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-10px); } }
.bday-name { font-size: 30px; font-weight: 900; margin-bottom: 12px; animation: title-pop .6s cubic-bezier(.2,1.6,.4,1) .8s both; }
.bday-banner { background: linear-gradient(90deg, rgba(255,77,141,.18), rgba(168,85,247,.18)); border: 1px solid rgba(168,85,247,.45); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; font-size: 15px; }

/* Siegerehrung */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; height: 220px; margin: 6px 0 16px; }
.pod { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.pod-name { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: rise .4s both; animation-delay: calc(var(--d) + .5s); }
.pod-pts { font-family: var(--mono); font-weight: 800; font-size: 18px; margin: 2px 0 6px; }
.pod-bar { height: var(--h); border-radius: 10px 10px 4px 4px; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; transform-origin: bottom; animation: grow .8s cubic-bezier(.2,1.1,.4,1) both; animation-delay: var(--d); box-shadow: inset 0 -30px 40px rgba(0,0,0,.18); }
.pod-bar b { font-size: 26px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.pod.mine .pod-bar { outline: 3px solid #fff; outline-offset: 2px; }
@keyframes grow { from { transform: scaleY(0); } }
.pod-rest { text-align: left; margin: -4px 0 16px; padding-left: 22px; font-size: 14px; opacity: .85; }
.pod-rest .mine { font-weight: 800; }

/* ---------- Spieltag-Start: Begrüßung ---------- */
.welcome { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.welcome .wl-top { position: relative; background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
.wl-glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; filter: blur(70px); opacity: .32; z-index: -1; pointer-events: none; }
.wl-glow.a { background: var(--signal); top: -120px; right: -140px; animation: wl-drift-a 14s ease-in-out infinite alternate; }
.wl-glow.b { background: var(--team); bottom: -160px; left: -160px; opacity: .3; animation: wl-drift-b 18s ease-in-out infinite alternate; }
@keyframes wl-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(-70px, 90px) scale(1.15); } }
@keyframes wl-drift-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(90px, -70px) scale(1.1); } }
.wl-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 20px 24px 12px; max-width: 520px; width: 100%; margin: 0 auto; }
.wl-main > * { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.wl-main > *:nth-child(2) { animation-delay: .08s; }
.wl-main > *:nth-child(3) { animation-delay: .16s; }
.wl-main > *:nth-child(4) { animation-delay: .26s; }
.wl-greet { font-size: 38px; font-weight: 900; line-height: 1.02; letter-spacing: -.01em; margin: 0 0 10px; overflow-wrap: anywhere; }
.wl-greet span { color: var(--signal); }
.wl-team { font-weight: 800; font-size: 16px; letter-spacing: .04em; margin-bottom: 26px; }
.wl-count { background: rgba(22,26,32,.78); border: 1px solid var(--line); border-radius: 20px; padding: 20px 18px 18px; text-align: center; backdrop-filter: blur(8px); }
.wl-count .eyebrow { margin-bottom: 8px; }
.wl-clock { font-family: var(--mono); font-size: 54px; font-weight: 800; letter-spacing: .02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.wl-when { margin: 10px 0 0; color: var(--muted); font-weight: 600; font-size: 15px; }
.wl-msg { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.3; }
.wl-wait { margin: 10px 0 0; color: var(--muted); font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.wl-dots { display: inline-flex; gap: 5px; align-items: center; }
.wl-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); animation: wl-dot 1.4s ease-in-out infinite; }
.wl-dots i:nth-child(2) { animation-delay: .2s; }
.wl-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes wl-dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.15); } }
.wl-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 24px calc(22px + var(--safe-bottom)); max-width: 520px; width: 100%; margin: 0 auto; }
.wl-actions .btn { padding: 14px 10px; font-size: 13px; }
.wl-gd { margin: 0 auto; padding: 0 24px; max-width: 520px; width: 100%; color: var(--muted); font-size: 12px; line-height: 1.4; text-align: center; }
main.gated { padding-bottom: calc(24px + var(--safe-bottom)); }
.wl-back { margin-bottom: 16px; text-transform: none; letter-spacing: 0; font-size: 15px; justify-content: flex-start; }

/* Start-Animation */
.kickoff { position: fixed; inset: 0; z-index: 66; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(120% 90% at 50% 40%, #1c2410 0%, #0d0f12 65%); animation: ov-bg .3s ease-out both; }
.kickoff.out { animation: ko-out .3s ease-in forwards; }
@keyframes ko-out { to { opacity: 0; } }
.ko-stage { width: 100%; max-width: 420px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ko-num { font-family: var(--mono); font-size: 180px; font-weight: 800; line-height: 1; color: var(--signal); text-shadow: 0 0 60px rgba(198,244,50,.55); animation: ko-pop .9s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes ko-pop { 0% { transform: scale(.2); opacity: 0; } 55% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.ko-los { animation: ko-pop .7s cubic-bezier(.2,1.5,.4,1) both; }
.ko-title { font-size: 56px; font-weight: 900; line-height: .95; letter-spacing: -.01em; color: var(--signal); text-shadow: 0 0 50px rgba(198,244,50,.5); }
.ko-sub { margin-top: 14px; font-size: 16px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ko-go { min-width: 200px; animation: rise .4s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition: none !important; }
  .wl-glow { opacity: .18; }
  .wl-dots i { opacity: .8; }
}

/* ---------- Among Us: Minispiele ---------- */
.tg-sheet { position: fixed; inset: 0; z-index: 58; background: radial-gradient(120% 80% at 50% 0%, #1b2430 0%, #0b0e12 70%); display: flex; flex-direction: column; align-items: center; padding: calc(26px + var(--safe-top)) 16px calc(16px + var(--safe-bottom)); overflow-y: auto; animation: rise .25s ease-out both; touch-action: none; }
.tg-sheet.out { animation: tg-out .2s ease-in forwards; }
@keyframes tg-out { to { opacity: 0; transform: translateY(12px); } }
.tg-head { width: 100%; max-width: 440px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tg-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.tg-title { font-size: 22px; font-weight: 900; }
.tg-close { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 18px; }
.tg-stage { position: relative; width: min(100%, 440px); aspect-ratio: 1 / 1; border-radius: 18px; background: #12161b; border: 2px solid #343c47; box-shadow: inset 0 0 0 4px #0b0d10, 0 18px 40px rgba(0,0,0,.45); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; }
.tg-stage.tg-shake { animation: shake .45s; }
.tg-svg { width: 100%; height: 100%; display: block; touch-action: none; }
.tg-grab { cursor: grab; }
.tg-hint { width: 100%; max-width: 440px; margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.4; text-align: center; }
.tg-status { width: 100%; max-width: 440px; min-height: 22px; margin-top: 12px; text-align: center; font-weight: 800; }
.tg-status.bad { color: var(--danger); }
.tg-status.ok { color: var(--ok); }
.tg-done { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(10,30,16,.82); color: #5cff8a; font-weight: 900; letter-spacing: .12em; animation: ov-pop .35s cubic-bezier(.2,1.4,.4,1) both; z-index: 5; }
.tg-done b { font-size: 84px; line-height: 1; text-shadow: 0 0 30px rgba(92,255,138,.6); }
.tg-info { color: #c9d3df; font-weight: 700; text-align: center; margin: 10px 0; font-size: 14px; }
.tg-big { min-width: 220px; margin-top: 8px; }
.tg-blink { animation: blink .6s steps(2) infinite; }
.tg-win { filter: drop-shadow(0 0 18px rgba(90,169,255,.8)); }

.tg-space { position: absolute; inset: 0; background: radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent), radial-gradient(1px 1px at 70% 60%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 40% 80%, #cfe 50%, transparent), radial-gradient(1px 1px at 85% 15%, #fff 50%, transparent), radial-gradient(1px 1px at 10% 70%, #fff 50%, transparent), #05080e; touch-action: none; }
.tg-hud { position: absolute; top: 10px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-weight: 800; color: #5cff8a; z-index: 2; }
.tg-rock { position: absolute; left: 0; top: 0; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; background: radial-gradient(circle at 35% 35%, #a58b6f, #6b5440 60%, #3f3024); box-shadow: inset -4px -4px 0 rgba(0,0,0,.25); }
.tg-rock.boom { background: radial-gradient(circle, #fff6b0, #ff9f2e 40%, rgba(255,77,79,0) 70%); transition: transform .3s, opacity .3s; opacity: 0; }
.tg-cross { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid #5cff8a; border-radius: 50%; left: 50%; top: 50%; pointer-events: none; transition: left .12s, top .12s; }
.tg-hex { fill: #dff3ff; stroke: #5aa9ff; filter: drop-shadow(0 0 6px rgba(90,169,255,.7)); transition: fill .15s; cursor: pointer; }
.tg-hex.off { fill: #ff4d4f; stroke: #8a1f21; filter: none; }

.tg-unlock { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 18px; width: 100%; height: 100%; background: #2a2f36; align-content: center; }
.tg-unlock.bad { animation: shake .35s; }
.tg-num { aspect-ratio: 1; border-radius: 12px; border: 3px solid #5b6470; background: linear-gradient(#5d6672, #3d444e); color: #fff; font-weight: 900; font-size: 24px; }
.tg-num.lit { background: linear-gradient(#5cff8a, #23a855); border-color: #1b7a3f; color: #062b12; }

.tg-simon { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; height: 100%; padding: 14px; background: #2a2f36; }
.tg-simon.bad { animation: shake .4s; }
.tg-simon-side { display: flex; flex-direction: column; gap: 10px; }
.tg-leds { display: flex; gap: 5px; justify-content: center; }
.tg-leds i { width: 12px; height: 12px; border-radius: 50%; background: #3a2020; border: 2px solid #111; }
.tg-leds i.on { background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.tg-simon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex: 1; }
.tg-cell { border-radius: 8px; background: #11161c; border: 2px solid #0b0d10; }
.show .tg-cell.lit { background: #5aa9ff; box-shadow: 0 0 16px #5aa9ff; }
.in .tg-cell { background: linear-gradient(#5d6672, #3d444e); border-color: #5b6470; }
.in .tg-cell.lit { background: #5aa9ff; }

.tg-calib { display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; padding: 12px; background: #2a2f36; }
.tg-calib-row { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px; border-radius: 12px; background: #1d2229; opacity: .55; }
.tg-calib-row.active { opacity: 1; outline: 2px solid #ffd400; }
.tg-calib-row.done { opacity: 1; outline: 2px solid #3ddc84; }
.tg-calib-row.bad { animation: shake .35s; outline-color: var(--danger); }
.tg-gauge { height: 100%; max-height: 110px; aspect-ratio: 1; min-height: 0; }
.tg-stop { background: #ff4d4f; color: #fff; min-width: 110px; }

.tg-trash { display: flex; align-items: center; justify-content: center; gap: 28px; width: 100%; height: 100%; background: #2a2f36; }
.tg-bin { position: relative; width: 46%; height: 78%; border: 6px solid #6b7480; border-top-width: 14px; border-radius: 8px 8px 18px 18px; background: #12161b; overflow: hidden; }
.tg-bin-level { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: linear-gradient(#6b5440, #3f3024); }
.tg-bin-items { position: absolute; inset: 8px; font-size: 34px; line-height: 1.2; word-break: break-all; z-index: 1; }
.tg-bin.empty { border-color: #3ddc84; }
.tg-lever { position: relative; width: 26px; height: 78%; border-radius: 13px; background: #0b0d10; }
.tg-lever-handle { position: absolute; left: -22px; top: 0; width: 70px; height: 54px; border-radius: 12px; border: 3px solid #5b6470; background: linear-gradient(#ff6b6b, #c92a2a); transition: top .2s; touch-action: none; }
.tg-lever-handle.on { top: calc(100% - 54px); transition: top .35s; }

.tg-transfer { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 18px; background: #1d2229; }
.tg-folders { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 54px; }
.tg-folder { display: flex; flex-direction: column; align-items: center; }
.tg-folder small { font-size: 12px; color: var(--muted); font-weight: 700; }
.tg-flight { flex: 1; height: 4px; margin: 0 8px; background: repeating-linear-gradient(90deg, #5aa9ff 0 10px, transparent 10px 20px); opacity: .3; }
.tg-transfer.run .tg-flight { opacity: 1; animation: flow .5s linear infinite; }
@keyframes flow { to { background-position: 20px 0; } }
.tg-bar { width: 100%; height: 22px; border-radius: 11px; background: #0b0d10; border: 2px solid #343c47; overflow: hidden; margin: 14px 0 4px; }
.tg-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #5aa9ff, #3ddc84); }
.tg-bar.green i { background: #3ddc84; }

.tg-fuel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; height: 100%; background: #2a2f36; }
.tg-tank { position: relative; width: 120px; height: 160px; border: 6px solid #9aa4b0; border-radius: 16px 16px 10px 10px; background: #12161b; overflow: hidden; }
.tg-tank.big { width: 180px; height: 150px; border-radius: 50px 50px 14px 14px; }
.tg-tank i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(#ffd400, #ff9f2e); }
.tg-tank span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; letter-spacing: .1em; color: rgba(255,255,255,.75); }
.tg-tank.full { border-color: #3ddc84; }
.btn.on { filter: brightness(1.25); transform: scale(.97); }

.tg-accept { display: grid; place-items: center; width: 100%; height: 100%; background: #2a2f36; }
.tg-power { width: 64%; aspect-ratio: 1; border-radius: 50%; border: 8px solid #5b6470; background: radial-gradient(circle, #3d444e, #1d2229); color: #9aa4b0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: all .4s; }
.tg-power span { font-size: 64px; line-height: 1; }
.tg-power small { font-weight: 900; letter-spacing: .1em; }
.tg-power.on { border-color: #3ddc84; color: #5cff8a; box-shadow: 0 0 40px rgba(61,220,132,.6); transform: rotate(360deg); }

.tg-samples { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 16px; background: #2a2f36; }
.tg-tubes { display: flex; gap: 14px; height: 55%; align-items: flex-end; margin-bottom: 10px; }
.tg-tube { position: relative; width: 38px; height: 100%; border: 4px solid #c9d3df; border-top: 0; border-radius: 0 0 20px 20px; background: rgba(255,255,255,.06); overflow: hidden; padding: 0; }
.tg-tube::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 0; transition: height 1s; }
.tg-samples.filling .tg-tube::after, .tg-tube.full::after { height: 70%; background: #5cff8a; }
.tg-tube.red::after { background: #ff6b6b; }
.tg-tube.blue::after { background: #3d8bff; }
.tg-tube.chosen { outline: 4px solid #3ddc84; outline-offset: 4px; }
.tg-tube.wrong { animation: shake .35s; outline: 4px solid var(--danger); outline-offset: 4px; }

.tg-medscan { position: relative; flex: 1; width: 100%; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, #0d3a1e, #071a0e 70%); overflow: hidden; }
.tg-body { height: 80%; fill: rgba(92,255,138,.25); stroke: #5cff8a; stroke-width: 2; filter: drop-shadow(0 0 10px #5cff8a); }
.tg-scanline { position: absolute; left: 0; right: 0; height: 18px; background: linear-gradient(transparent, rgba(92,255,138,.85), transparent); animation: scan 1.6s ease-in-out infinite alternate; }
@keyframes scan { from { top: 4%; } to { top: 90%; } }
.tg-scaninfo { position: absolute; left: 12px; top: 12px; font-family: var(--mono); font-size: 12px; color: #5cff8a; text-align: left; line-height: 1.6; text-shadow: 0 0 6px #5cff8a; }
.tg-medscan + .tg-scaninfo + .tg-bar { position: absolute; bottom: 12px; left: 12px; right: 12px; width: auto; margin: 0; }

.tg-lights { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; width: 100%; height: 100%; background: #2a2f36; }
.tg-bulbs { display: flex; gap: 14px; }
.tg-bulbs i { width: 30px; height: 30px; border-radius: 50%; background: #3a2020; border: 3px solid #111; }
.tg-bulbs i.on { background: #3ddc84; box-shadow: 0 0 14px #3ddc84; }
.tg-switches { display: flex; gap: 14px; }
.tg-switch { position: relative; width: 46px; height: 110px; border-radius: 10px; background: #0b0d10; border: 3px solid #5b6470; }
.tg-switch::after { content: ''; position: absolute; left: 4px; right: 4px; height: 46px; bottom: 4px; border-radius: 6px; background: linear-gradient(#9aa4b0, #5b6470); transition: bottom .15s; }
.tg-switch.up::after { bottom: calc(100% - 50px); background: linear-gradient(#5cff8a, #23a855); }

.tg-comms { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 12px; background: #2a2f36; }
.tg-scope { width: 100%; height: 30%; background: #071a0e; border-radius: 10px; border: 3px solid #0b0d10; }
.tg-dial { width: 55%; touch-action: none; }

.tg-reactor { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background: radial-gradient(circle, #3a1214, #12161b 70%); }
.tg-hand { width: 62%; aspect-ratio: 1; border-radius: 24px; border: 6px solid #5b6470; background: #0b0d10; color: #5aa9ff; font-size: 90px; touch-action: none; transition: all .2s; }
.tg-hand.on { border-color: #5aa9ff; box-shadow: 0 0 40px rgba(90,169,255,.7), inset 0 0 40px rgba(90,169,255,.35); }

.tg-keypad { display: flex; flex-direction: column; gap: 12px; width: 100%; height: 100%; padding: 16px; background: #2a2f36; }
.tg-display { font-family: var(--mono); font-size: 34px; font-weight: 800; text-align: center; padding: 10px; border-radius: 10px; background: #071a0e; color: #5cff8a; letter-spacing: .1em; }
.tg-keys { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tg-key { border-radius: 12px; border: 3px solid #5b6470; background: linear-gradient(#5d6672, #3d444e); color: #fff; font-size: 24px; font-weight: 900; }
.tg-key.ok { background: linear-gradient(#5cff8a, #23a855); color: #062b12; }

/* ---------- Among Us: Ansichten ---------- */
.au-crew-t { color: #38fedc; } .au-imp-t { color: #ff4d4f; }
.au-rules p { margin: 0 0 8px; font-size: 15px; line-height: 1.45; }
.au-practice { display: flex; flex-wrap: wrap; gap: 8px; }
.au-chip { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 999px; padding: 9px 13px; font-weight: 700; font-size: 13px; }
.au-chip:active { transform: scale(.96); }
.au-role { border-radius: var(--radius); padding: 16px; margin-bottom: 14px; text-align: center; border: 2px solid; }
.au-role.crew { background: linear-gradient(160deg, #06343a, #0b1c22); border-color: #38fedc; color: #b6fff4; }
.au-role.imp { background: linear-gradient(160deg, #3a0607, #1c0b0b); border-color: #ff4d4f; color: #ffc9ca; }
.au-role.ghost { opacity: .75; border-style: dashed; }
.au-role-name { font-size: 30px; font-weight: 900; letter-spacing: .12em; color: #fff; text-shadow: 0 0 18px currentColor; }
.au-role.crew .au-role-name { color: #38fedc; } .au-role.imp .au-role-name { color: #ff4d4f; }
.au-role small { display: block; font-size: 14px; margin-top: 4px; font-weight: 600; }
.au-banner { border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; font-size: 15px; border: 1px solid; }
.au-banner small { display: block; font-size: 13px; margin-top: 3px; opacity: .9; }
.au-banner.info { background: #0f1d2e; border-color: #1f3a5c; }
.au-banner.warn { background: #2a2208; border-color: #6b5412; color: #ffe08a; }
.au-banner.pause { background: var(--panel-2); border-color: var(--line); text-align: center; font-weight: 800; }
.au-banner.crit { background: #3a0607; border-color: var(--danger); color: #ffd3d3; animation: au-alarm 1s ease-in-out infinite alternate; }
@keyframes au-alarm { from { box-shadow: 0 0 0 0 rgba(255,77,79,0); } to { box-shadow: 0 0 0 6px rgba(255,77,79,.4); background: #5a0a0c; } }
.au-clock { font-family: var(--mono); font-weight: 900; font-size: 1.15em; }
.au-live { border-color: #2c4a6b; }
.au-live .btn { width: 100%; margin-top: 8px; flex-direction: column; gap: 2px; }
.au-live .btn small { font-size: 11px; font-weight: 700; opacity: .8; letter-spacing: .04em; }
.au-report { background: #ff4d4f; color: #fff; font-size: 20px; padding: 18px; animation: au-alarm 1s infinite alternate; }
.au-emergency { background: #b91c1c; color: #fff; font-size: 18px; border: 3px solid #fca5a5; }
.au-kill { background: #1c0b0b; border: 1px solid #6b1d20; border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.au-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-weight: 800; font-size: 17px; }
.au-row .btn { width: auto; margin: 0; padding: 12px 18px; }
.au-note { font-size: 12px; color: #ffb3b4; margin-top: 8px; }
.au-info { background: #0f1d2e; border: 1px solid #1f3a5c; border-radius: 12px; padding: 12px; margin-top: 8px; }
.au-rooms div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #1f3a5c; }
.au-rooms b { color: #5aa9ff; letter-spacing: .1em; }
.au-vitals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.au-vitals span { padding: 5px 9px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.au-vitals .ok { background: rgba(61,220,132,.15); color: var(--ok); }
.au-vitals .dead { background: rgba(255,77,79,.15); color: var(--danger); }
.au-code div { font-family: var(--mono); font-size: 40px; font-weight: 900; letter-spacing: .2em; color: #5cff8a; text-align: center; margin: 6px 0; }
.au-bar { margin-bottom: 14px; }
.au-bar span { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--muted); }
.au-bar div { height: 18px; border-radius: 6px; background: #1d2229; border: 2px solid #343c47; overflow: hidden; margin-top: 4px; }
.au-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2fbf5b, #5cff8a); transition: width .6s; }
.au-tasks { list-style: none; margin: 10px 0 0; padding: 0; }
.au-tasks li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.au-tasks li:last-child { border-bottom: 0; }
.au-tasks li small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.au-tasks li.done { opacity: .5; }
.au-tasks li.done b { text-decoration: line-through; }
.au-check { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line); display: grid; place-items: center; color: var(--ok); font-weight: 900; }
.au-dim { opacity: .85; border-style: dashed; }
.au-dark { background: #050607; text-align: center; padding: 26px 16px; }
.au-sab { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.au-sab-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 12px; border: 1px solid #6b1d20; background: #1c0b0b; color: #ffd3d3; font-weight: 800; font-size: 13px; }
.au-sab-btn span { font-size: 26px; }
.au-sab-btn.crit { border-color: var(--danger); }
.au-sab-btn:disabled { opacity: .4; }
.au-sab-btn small { font-weight: 600; opacity: .8; }

.au-meet-head { text-align: center; padding: 18px; border-radius: var(--radius); margin-bottom: 14px; background: linear-gradient(160deg, #6b0a0c, #2a0607); border: 2px solid var(--danger); }
.au-meet-head b { display: block; font-size: 26px; font-weight: 900; letter-spacing: .06em; color: #fff; }
.au-meet-head small { display: block; font-size: 15px; margin-top: 4px; color: #ffd3d3; }
.au-siren { font-size: 44px; animation: wiggle 1s ease-in-out infinite; }
.au-phase { font-size: 12px; font-weight: 900; letter-spacing: .2em; color: var(--danger); }
.au-big { font-size: 22px; font-weight: 900; margin: 4px 0; }
.au-clockline { color: var(--muted); font-weight: 700; }
.au-roster { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.au-person { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); color: var(--text); font-weight: 800; font-size: 15px; text-align: left; }
.au-person.dead { opacity: .45; text-decoration: line-through; }
.au-person.sel { border-color: var(--signal); background: #1c2410; }
.au-person.mine { border-color: var(--ok); }
.au-person small { margin-left: auto; }
.au-voted { position: absolute; right: 8px; bottom: -8px; font-style: normal; font-size: 10px; background: var(--ok); color: #062b12; padding: 2px 6px; border-radius: 999px; }
.au-vote-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-bottom: 14px; }
.au-bean { flex: none; display: inline-block; position: relative; width: 26px; height: 32px; border-radius: 12px 12px 6px 6px; background: var(--c); box-shadow: inset -4px -3px 0 rgba(0,0,0,.25); }
.au-bean::after { content: ''; position: absolute; top: 6px; right: -3px; width: 18px; height: 10px; border-radius: 6px; background: #9fe6ff; border: 2px solid #1d2229; }
.au-bean.big { width: 78px; height: 96px; border-radius: 36px 36px 16px 16px; }
.au-bean.big::after { top: 18px; right: -8px; width: 52px; height: 28px; border-radius: 16px; border-width: 4px; }
.au-eject { position: relative; height: 260px; border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; background: #02040a; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; }
.au-stars { position: absolute; inset: 0; background: radial-gradient(1px 1px at 10% 20%, #fff 50%, transparent), radial-gradient(1px 1px at 30% 70%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 60% 30%, #fff 50%, transparent), radial-gradient(1px 1px at 80% 80%, #fff 50%, transparent), radial-gradient(1px 1px at 50% 55%, #fff 50%, transparent), radial-gradient(1px 1px at 90% 10%, #fff 50%, transparent); animation: stars 6s linear infinite; }
@keyframes stars { to { transform: translateX(-60px); } }
.au-float { position: absolute; top: 34%; left: -90px; animation: float-by 4.5s linear forwards; }
@keyframes float-by { to { left: 110%; transform: rotate(540deg); } }
.au-eject-text { position: relative; font-size: 22px; font-weight: 900; color: #fff; margin-top: 110px; animation: type-in 1.4s steps(30) .6s both; }
@keyframes type-in { from { opacity: 0; letter-spacing: .3em; } }
.au-eject small { position: relative; color: #c9d3df; margin-top: 6px; font-weight: 700; }

.au-win { text-align: center; padding: 24px 16px; border-radius: var(--radius); margin-bottom: 14px; }
.au-win.crew { background: linear-gradient(160deg, #06343a, #031418); border: 2px solid #38fedc; color: #38fedc; }
.au-win.imp { background: linear-gradient(160deg, #3a0607, #140303); border: 2px solid #ff4d4f; color: #ff4d4f; }
.au-win small { display: block; font-weight: 900; letter-spacing: .3em; font-size: 13px; }
.au-win b { display: block; font-size: 32px; font-weight: 900; letter-spacing: .06em; margin: 6px 0; text-shadow: 0 0 22px currentColor; animation: title-pop .6s cubic-bezier(.2,1.6,.4,1) both; }
.au-win span { color: var(--text); font-weight: 700; }
.au-table { display: flex; flex-direction: column; gap: 8px; }
.au-tr { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: var(--panel-2); border-left: 4px solid #38fedc; }
.au-tr.impostor { border-left-color: #ff4d4f; background: #221012; }
.au-tr small { display: block; color: var(--muted); font-size: 12px; }
.au-stats { margin-left: auto; display: flex; gap: 8px; font-family: var(--mono); font-size: 13px; font-weight: 700; white-space: nowrap; }
.au-reveal { padding: 6px 0; }
.au-reveal .au-bean.big { margin: 0 auto 10px; animation: bounce-in .8s cubic-bezier(.2,1.6,.4,1) both; }
.au-reveal-name { font-size: 44px; font-weight: 900; letter-spacing: .1em; margin-bottom: 8px; animation: title-pop .7s cubic-bezier(.2,1.6,.4,1) .3s both; }
.au-reveal.crew .au-reveal-name { color: #38fedc; text-shadow: 0 0 24px rgba(56,254,220,.6); }
.au-reveal.imp .au-reveal-name { color: #fff; text-shadow: 0 0 24px rgba(0,0,0,.4); }
.au-reveal p { margin: 0 0 12px; }
.au-reveal-note { font-size: 13px; opacity: .85; }

/* ---------- Outbreak: Ansichten ---------- */
:root { --ob-s: #38bdf8; --ob-z: #ff4d4f; --ob-x: #22e07a; --ob-h: #4ade80; --ob-o: #ff8a3d; }
.ob-s-t { color: var(--ob-s); }
.ob-z-t { color: var(--ob-z); }
.ob-test { color: var(--warn); }
.ob-rules p { margin: 0 0 10px; font-size: 15px; line-height: 1.45; }
.ob-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ob-facts span { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; font-size: 13px; font-weight: 700; }
.ob-safety { border-color: #6b5412; background: #1d1a0e; }
.ob-safety h3 { color: #ffe08a; }
.ob-safety ul { margin: 0; padding-left: 18px; color: #ffe08a; line-height: 1.5; font-size: 14px; }
.ob-hero { text-align: center; padding: 22px 16px 18px; margin-bottom: 14px; border-radius: var(--radius); border: 1px solid #1f3a5c;
  background: radial-gradient(120% 90% at 50% 0%, rgba(56,189,248,.18), transparent 60%), radial-gradient(80% 80% at 50% 120%, rgba(255,77,79,.22), transparent 60%), var(--panel); }
.ob-hero-name { font-size: 44px; font-weight: 900; letter-spacing: .14em; line-height: 1; background: linear-gradient(90deg, var(--ob-s), #fff 45%, var(--ob-z)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ob-hero-sub { margin-top: 6px; font-size: 13px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.ob-hero p { margin: 12px 0 0; font-size: 15px; line-height: 1.45; color: #c9d0d9; }
.btn.ob-big { padding: 20px; font-size: 18px; margin-bottom: 14px; }
.btn.ob-ready { width: 100%; flex-direction: column; gap: 2px; padding: 18px; margin-bottom: 14px; font-size: 18px; background: var(--panel-2); border: 2px solid var(--line); }
.btn.ob-ready small { font-size: 11px; font-weight: 700; opacity: .75; letter-spacing: .04em; text-transform: none; }
.btn.ob-ready.on { background: #0f2a16; border-color: var(--ok); color: #b6f5cd; }
.ob-lobby li { padding: 9px 0; }

.ob-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; }
.ob-phase { font-size: 11px; font-weight: 900; letter-spacing: .14em; padding: 6px 9px; border-radius: 8px; background: var(--panel-2); color: var(--muted); }
.ob-phase.grace { background: #0f1d2e; color: var(--ob-s); }
.ob-phase.outbreak { background: #3a0607; color: #ffd3d3; }
.ob-phase.final { background: #2a1606; color: var(--ob-o); }
.ob-phase.extraction { background: #0a2a17; color: var(--ob-x); }
.ob-time { text-align: center; line-height: 1; }
.ob-time b { font-family: var(--mono); font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ob-time small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; margin-top: 3px; }
.ob-counts { display: flex; gap: 6px; font-family: var(--mono); font-weight: 800; font-size: 14px; }
.ob-counts span { padding: 4px 7px; border-radius: 8px; background: var(--panel-2); }
.ob-counts .s { color: var(--ob-s); } .ob-counts .z { color: var(--ob-z); } .ob-counts .x { color: var(--ob-x); }
.ob-counts.big { justify-content: space-around; font-size: 22px; }
.ob-top .ob-counts { flex-wrap: wrap; justify-content: flex-end; } /* schmale Handys: Zähler umbrechen statt überlaufen */
@media (max-width: 400px) {
  .ob-top { gap: 6px; padding: 10px; }
  .ob-time b { font-size: 22px; }
  .ob-top .ob-counts { gap: 4px; font-size: 13px; }
  .ob-top .ob-counts span { padding: 3px 5px; }
}

.ob-banner { border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; text-align: center; border: 2px solid; }
.ob-banner > span { display: block; font-size: 13px; font-weight: 900; letter-spacing: .18em; }
.ob-banner b { display: block; font-family: var(--mono); font-size: 40px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ob-banner small { display: block; font-size: 13px; font-weight: 600; opacity: .9; margin-top: 2px; }
.ob-banner.grace { background: #0f1d2e; border-color: var(--ob-s); color: #cdeefe; }
.ob-banner.ex { background: #0a2014; border-color: var(--ob-x); color: #c9f9da; }
.ob-banner.ex.open { animation: ob-glow 1.4s ease-in-out infinite alternate; }
@keyframes ob-glow { from { box-shadow: 0 0 0 rgba(34,224,122,0); } to { box-shadow: 0 0 26px rgba(34,224,122,.45); } }

.ob-events { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ob-event { padding: 7px 11px; border-radius: 999px; font-size: 12px; font-weight: 900; letter-spacing: .08em; background: #0f1d2e; border: 1px solid #1f3a5c; color: #cdeefe; }
.ob-event b { font-family: var(--mono); margin-left: 4px; }
.ob-event.zombie_frenzy, .ob-event.radar_jam, .ob-event.blackout { background: #3a0607; border-color: var(--ob-z); color: #ffd3d3; }
.ob-event.double_health, .ob-event.supply_drop, .ob-event.moving_health_zone { background: #0c2414; border-color: #2fbf5b; color: #c9f9da; }
.ob-role { border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; display: flex; align-items: baseline; gap: 12px; border: 2px solid; }
.ob-role span { font-size: 24px; font-weight: 900; letter-spacing: .14em; text-shadow: 0 0 18px currentColor; }
.ob-role small { font-size: 13px; font-weight: 700; opacity: .85; }
.ob-role.survivor { background: linear-gradient(160deg, #06263a, #0b151c); border-color: var(--ob-s); color: #cdeefe; }
.ob-role.survivor span { color: var(--ob-s); }
.ob-role.zombie { background: linear-gradient(160deg, #3a0607, #1c0b0b); border-color: var(--ob-z); color: #ffc9ca; }
.ob-role.zombie span { color: var(--ob-z); }

.ob-health { padding: 14px 16px; }
.ob-hp-label { font-size: 12px; font-weight: 900; letter-spacing: .18em; color: var(--muted); }
.ob-hp-meta { font-size: 12px; font-weight: 700; color: var(--muted); }
.ob-hp-row { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.ob-hp-num { font-family: var(--mono); font-size: 46px; font-weight: 800; line-height: 1; min-width: 92px; color: var(--ob-h); font-variant-numeric: tabular-nums; }
.ob-hp-bar { flex: 1; position: relative; height: 20px; border-radius: 8px; background: #11161c; border: 2px solid #2a313b; overflow: hidden; }
.ob-hp-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #16a34a, var(--ob-h)); transition: width .6s ease; }
.ob-hp-bar em { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #e6edf5; opacity: .7; }
.ob-hp.low .ob-hp-num, .ob-hp.low .ob-hp-label { color: var(--warn); }
.ob-hp.low .ob-hp-bar i { background: linear-gradient(90deg, #b45309, var(--warn)); }
.ob-hp.critical .ob-hp-num, .ob-hp.critical .ob-hp-label { color: var(--ob-o); }
.ob-hp.critical .ob-hp-bar i { background: linear-gradient(90deg, #9a3412, var(--ob-o)); }
.ob-hp.imminent .ob-hp-num, .ob-hp.imminent .ob-hp-label { color: var(--ob-z); }
.ob-hp.imminent .ob-hp-bar i { background: var(--ob-z); }
.ob-health:has(.ob-hp.critical), .ob-health:has(.ob-hp.imminent) { border-color: var(--ob-z); animation: au-alarm 1s ease-in-out infinite alternate; }
.ob-hp.imminent .ob-hp-num { animation: heartbeat 1s ease-in-out infinite; }

.ob-hold { border-radius: var(--radius); padding: 14px; margin-bottom: 12px; text-align: center; border: 2px solid; }
.ob-hold b { display: block; font-size: 14px; font-weight: 900; letter-spacing: .14em; }
.ob-hold small { display: block; font-size: 13px; font-weight: 700; margin-top: 6px; opacity: .9; }
.ob-hold .btn { margin-top: 10px; padding: 10px 14px; }
.ob-hold.h { background: #0c2414; border-color: var(--ob-h); color: #c9f9da; }
.ob-hold.x { background: #082414; border-color: var(--ob-x); color: #c9f9da; animation: ob-glow 1s ease-in-out infinite alternate; }
.ob-hold.x.off { animation: none; border-style: dashed; }
.ob-hold-num { font-family: var(--mono); font-size: 72px; font-weight: 800; line-height: 1; margin: 6px 0; color: #fff; text-shadow: 0 0 30px rgba(34,224,122,.6); }
.ob-hold-bar { height: 12px; border-radius: 6px; background: rgba(0,0,0,.35); overflow: hidden; margin-top: 8px; }
.ob-hold-bar i { display: block; height: 100%; background: currentColor; transition: width .9s linear; }

.ob-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ob-act { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); font-weight: 900; font-size: 13px; letter-spacing: .06em; }
.ob-act span { font-size: 26px; line-height: 1.1; }
.ob-act small { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.ob-act:active { transform: scale(.97); }
.ob-act.code { border-color: #1f3a5c; }
.ob-act.give { border-color: #3c5c12; }
.ob-act.shop { border-color: #4c2b6b; }

.ob-near { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 14px; margin-bottom: 12px; }
.ob-near-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-weight: 800; font-size: 14px; border-bottom: 1px solid var(--line); }
.ob-near-row:last-child { border-bottom: 0; }
.ob-near-row b { font-family: var(--mono); font-size: 17px; }
.ob-near-row.h { color: var(--ob-h); } .ob-near-row.x { color: var(--ob-x); } .ob-near-row.z { color: #ff9a9c; } .ob-near-row.s { color: var(--ob-s); } .ob-near-row.shop { color: #d8b4fe; }
.ob-near-row.muted { color: var(--muted); font-weight: 600; }

.ob-ztiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ob-ztiles div { background: var(--panel); border: 1px solid #6b1d20; border-radius: var(--radius); padding: 10px; text-align: center; }
.ob-ztiles small { display: block; font-size: 11px; font-weight: 900; letter-spacing: .14em; color: #ff9a9c; }
.ob-ztiles b { font-family: var(--mono); font-size: 30px; font-weight: 800; }
.ob-infect { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 16px; margin-bottom: 10px; border: 3px solid #fca5a5; border-radius: 18px;
  background: radial-gradient(circle at 50% 30%, #ef4444, #991b1b); color: #fff; font-size: 26px; font-weight: 900; letter-spacing: .14em; box-shadow: 0 10px 30px rgba(255,77,79,.35); animation: au-alarm 1.2s ease-in-out infinite alternate; }
.ob-infect small { font-size: 12px; font-weight: 700; letter-spacing: .04em; opacity: .9; }
.ob-infect-ico { font-size: 34px; line-height: 1; }
.ob-infect.cool { background: var(--panel-2); border-color: var(--line); color: var(--muted); box-shadow: none; animation: none; }
.ob-infect:active { transform: scale(.98); }
.ob-pulse { width: 100%; padding: 12px; margin-bottom: 10px; border-radius: var(--radius); border: 2px solid #6b1d20; background: #1c0b0b; color: #ffc9ca; font-weight: 900; letter-spacing: .12em; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.ob-pulse b { font-family: var(--mono); font-size: 15px; }
.ob-pulse b.ready { color: var(--ob-z); } .ob-pulse b.on { color: #fff; }
.ob-pulse:disabled { opacity: .7; }
.btn.ob-shop-z { flex-direction: column; gap: 2px; margin-bottom: 12px; }
.btn.ob-shop-z small { font-size: 11px; opacity: .7; text-transform: none; letter-spacing: 0; }

.ob-radar-card { padding: 12px; }
.ob-radar-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.ob-seg { display: inline-flex; background: var(--panel-2); border-radius: 10px; padding: 3px; margin-right: auto; }
.ob-seg button { border: 0; background: none; padding: 7px 12px; border-radius: 8px; font-weight: 800; font-size: 13px; color: var(--muted); }
.ob-seg button.on { background: var(--bg); color: var(--text); }
.ob-chip { border: 1px solid var(--line); background: var(--panel-2); border-radius: 999px; padding: 7px 11px; font-weight: 800; font-size: 12px; }
.ob-chip.on { border-color: var(--signal); color: var(--signal); }
.ob-chip:disabled { opacity: .4; }
.ob-radar { display: flex; justify-content: center; }
.ob-radar canvas { display: block; max-width: 100%; touch-action: manipulation; }
.ob-map { height: 360px; }
.ob-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.ob-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; background: currentColor; vertical-align: -1px; }
.ob-legend .s { color: var(--ob-s); } .ob-legend .z { color: var(--ob-z); } .ob-legend .h { color: var(--ob-h); } .ob-legend .x { color: var(--ob-x); } .ob-legend .shop { color: #c084fc; } .ob-legend .c { color: #e6edf5; }

.ob-items { display: flex; flex-direction: column; gap: 8px; }
.ob-item, .ob-shop-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.ob-item.on { border-color: var(--signal); background: #1c2410; }
.ob-item small, .ob-shop-item small { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.ob-item .btn, .ob-shop-item .btn { padding: 10px 12px; font-size: 13px; flex-direction: column; gap: 0; }
.ob-shop-item .btn small { font-size: 10px; color: inherit; opacity: .8; text-transform: none; letter-spacing: 0; }
.ob-item-ico { font-size: 26px; text-align: center; }
.ob-foot { font-size: 13px; text-align: center; }

.ob-infected { text-align: center; padding: 30px 18px; border-radius: var(--radius); border: 2px solid var(--ob-z); background: radial-gradient(circle at 50% 20%, #5a0a0c, #1c0b0b 70%); color: #ffd3d3; animation: au-alarm 1s ease-in-out infinite alternate; }
.ob-infected b { display: block; font-size: 26px; font-weight: 900; letter-spacing: .08em; }
.ob-infected small { display: block; margin-top: 10px; font-size: 14px; font-weight: 600; }
.ob-biohazard { font-size: 70px; line-height: 1; animation: wiggle 1.2s ease-in-out infinite; }
.ob-turn { font-family: var(--mono); font-size: 110px; font-weight: 800; line-height: 1; color: #fff; text-shadow: 0 0 40px rgba(255,77,79,.8); margin: 10px 0; }
.ob-turn.small { font-size: 64px; margin: 0 0 18px; }
.ob-extracted { text-align: center; padding: 26px 16px; border-radius: var(--radius); border: 2px solid var(--ob-x); background: radial-gradient(circle at 50% 10%, rgba(34,224,122,.3), #0a1a10 70%); margin-bottom: 14px; color: #c9f9da; }
.ob-extracted small { display: block; font-size: 12px; font-weight: 900; letter-spacing: .24em; }
.ob-extracted b { display: block; font-size: 36px; font-weight: 900; color: #fff; text-shadow: 0 0 24px rgba(34,224,122,.7); animation: title-pop .7s both; }
.ob-extracted span { display: block; margin-top: 6px; font-weight: 700; }
.ob-heli { font-size: 54px; animation: bounce-in .7s both; }

.ob-announce { position: fixed; z-index: 69; left: 50%; top: calc(70px + var(--safe-top)); transform: translateX(-50%); width: min(92vw, 480px); text-align: center; padding: 14px 16px; border-radius: 16px; border: 2px solid; box-shadow: 0 18px 40px rgba(0,0,0,.55); animation: ob-in .45s cubic-bezier(.2,1.4,.4,1) both; pointer-events: none; }
.ob-announce b { display: block; font-size: 22px; font-weight: 900; letter-spacing: .1em; line-height: 1.1; }
.ob-announce small { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; }
.ob-announce.bad { background: #3a0607; border-color: var(--ob-z); color: #ffd3d3; }
.ob-announce.good { background: #0a2014; border-color: var(--ob-x); color: #c9f9da; }
.ob-announce.info { background: #0f1d2e; border-color: var(--ob-s); color: #cdeefe; }
.ob-announce.out { animation: ob-out .4s ease-in both; }
@keyframes ob-in { from { opacity: 0; transform: translate(-50%, -30px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes ob-out { to { opacity: 0; transform: translate(-50%, -20px); } }
.ob-float { position: fixed; z-index: 69; left: 50%; top: 42%; transform: translateX(-50%); font-family: var(--mono); font-size: 44px; font-weight: 800; pointer-events: none; animation: ob-float 1.8s ease-out both; text-shadow: 0 0 24px currentColor; }
.ob-float.good { color: var(--ob-h); }
@keyframes ob-float { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -80px) scale(1); } }

.ob-sheet { position: fixed; inset: 0; z-index: 49; background: radial-gradient(120% 80% at 50% 0%, #1b2430 0%, #0b0e12 70%); display: flex; flex-direction: column; padding: calc(26px + var(--safe-top)) 16px calc(16px + var(--safe-bottom)); overflow-y: auto; animation: rise .25s ease-out both; }
.ob-sheet.scan { background: #000; }
.ob-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 520px; margin: 0 auto 14px; }
.ob-sheet-head small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ob-sheet-head b { font-size: 24px; font-weight: 900; letter-spacing: .06em; }
.ob-sheet-close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); font-size: 18px; flex: none; }
.ob-sheet-body { width: 100%; max-width: 520px; margin: 0 auto; }
.ob-codebox { text-align: center; }
.ob-qr { width: min(78vw, 320px); aspect-ratio: 1; image-rendering: pixelated; background: #fff; border-radius: 14px; padding: 10px; display: block; margin: 0 auto 14px; }
.ob-code { font-family: var(--mono); font-size: 52px; font-weight: 800; letter-spacing: .14em; background: #fff; color: #000; border-radius: 14px; padding: 8px 10px; display: inline-flex; align-items: center; gap: 8px; }
.ob-code i { width: 10px; }
.ob-ttl { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; margin: 16px auto 10px; max-width: 320px; }
.ob-ttl i { display: block; height: 100%; width: 100%; background: var(--ob-s); transform-origin: left; animation: ob-ttl linear forwards; }
@keyframes ob-ttl { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ob-codebox p { font-size: 14px; line-height: 1.45; }
.ob-cam { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 56vh; border-radius: 16px; overflow: hidden; background: #111; }
.ob-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ob-cam-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: #fff; font-weight: 700; z-index: 2; }
.ob-cam-frame { position: absolute; inset: 18%; border: 3px solid rgba(255,77,79,.9); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); z-index: 1; animation: au-alarm 1.2s ease-in-out infinite alternate; }
.ob-code-entry { display: flex; gap: 10px; margin-top: 14px; }
.ob-code-entry input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 30px; letter-spacing: .25em; text-align: center; padding: 12px 6px; background: var(--bg); border: 2px solid var(--line); border-radius: var(--radius); outline: none; }
.ob-code-entry input:focus { border-color: var(--ob-z); }
.ob-code-entry .btn { padding: 12px 16px; }
.ob-scan-status { text-align: center; font-weight: 700; margin: 12px 0 0; color: #e6edf5; }
.ob-scan-status.bad { color: var(--ob-z); }
.ob-shop-where { padding: 10px 12px; border-radius: 12px; background: #2a2208; border: 1px solid #6b5412; color: #ffe08a; font-weight: 700; margin: 0 0 10px; }
.ob-shop-where.ok { background: #0c2414; border-color: #2fbf5b; color: #c9f9da; }
.ob-shop { display: flex; flex-direction: column; gap: 8px; }
.ob-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.ob-pick .au-person small { margin-left: auto; color: var(--muted); }
.ob-amount { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 10px; }
.ob-amount b { font-family: var(--mono); font-size: 44px; min-width: 90px; text-align: center; }
.ob-amount-quick { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }

.ob-reveal { text-align: center; }
.ob-reveal-ico { font-size: 80px; line-height: 1; animation: bounce-in .7s both; }
.ob-reveal-name { font-size: 44px; font-weight: 900; letter-spacing: .1em; animation: title-pop .7s both; }
.ob-reveal.s .ob-reveal-name { color: var(--ob-s); text-shadow: 0 0 24px rgba(56,189,248,.6); }
.ob-reveal.z .ob-reveal-name { color: #fff; }
.ob-reveal p { margin: 8px 0 14px; }

.ob-complete { text-align: center; padding: 24px 16px; border-radius: var(--radius); border: 2px solid var(--line); margin-bottom: 14px; background: var(--panel); }
.ob-complete small { display: block; font-size: 12px; font-weight: 900; letter-spacing: .3em; color: var(--muted); }
.ob-complete b { display: block; font-size: 36px; font-weight: 900; margin: 6px 0; animation: title-pop .7s both; }
.ob-complete span { color: var(--text); font-weight: 700; }
.ob-complete.x { border-color: var(--ob-x); background: radial-gradient(circle at 50% 0%, rgba(34,224,122,.25), var(--panel) 70%); }
.ob-complete.x b { color: var(--ob-x); }
.ob-complete.s { border-color: var(--ob-s); background: radial-gradient(circle at 50% 0%, rgba(56,189,248,.22), var(--panel) 70%); }
.ob-complete.s b { color: var(--ob-s); }
.ob-complete.z { border-color: var(--ob-z); background: radial-gradient(circle at 50% 0%, rgba(255,77,79,.25), var(--panel) 70%); }
.ob-complete.z b { color: var(--ob-z); }
.ob-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ob-stats div { background: var(--panel-2); border-radius: 12px; padding: 10px 8px; text-align: center; }
.ob-stats small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ob-stats b { display: block; font-family: var(--mono); font-size: 17px; margin-top: 3px; }
.ob-lb { display: flex; flex-direction: column; gap: 6px; }
.ob-lb-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; background: var(--panel-2); border-left: 4px solid var(--line); }
.ob-lb-row .place { font-family: var(--mono); font-size: 18px; color: var(--muted); }
.ob-lb-row small { display: block; font-size: 12px; color: var(--muted); }
.ob-lb-row.x { border-left-color: var(--ob-x); } .ob-lb-row.s { border-left-color: var(--ob-s); } .ob-lb-row.z { border-left-color: var(--ob-z); }
.ob-lb-val { font-family: var(--mono); font-weight: 800; }
.ob-sum li { padding: 9px 0; }
.ob-sum b { text-align: right; }

/* OpenStreetMap im Dark Mode (Einstellungen → Karte): Kacheln invertieren, Farbtöne zurückdrehen */
.leaflet-container .tiles-dark { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.6); }
.leaflet-container:has(.tiles-dark) { background: #1b1e22; }

/* ---------- Finale (Rennen) ---------- */
.race-hero { text-align: center; padding: 22px 18px; border-radius: var(--radius); background: linear-gradient(160deg, #1d2a0a, #10150a); border: 2px solid var(--signal); margin-bottom: 14px; }
.race-hero .rh-flag { font-size: 48px; line-height: 1; animation: title-pop .6s cubic-bezier(.2,1.6,.4,1) both; }
.race-hero .eyebrow { color: var(--signal); margin: 10px 0 2px; }
.race-hero .rh-title { font-size: 32px; font-weight: 900; letter-spacing: .02em; line-height: 1.1; }
.race-hero p { margin: 10px 0 0; line-height: 1.45; }
.race-hero.done { background: linear-gradient(160deg, #3a2c05, #141003); border-color: #ffd400; }
.race-hero.done .eyebrow, .race-hero.done .rh-title { color: #ffd400; }
.race-hero.done .rh-title { font-size: 44px; text-shadow: 0 0 24px rgba(255,212,0,.45); }

.race-stage { border: 2px solid var(--signal); background: linear-gradient(180deg, #1a2210, var(--panel) 70%); }
.race-stage.mate { border-color: var(--team); background: var(--panel); }
.rs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rs-step { font-family: var(--mono); font-weight: 900; font-size: 15px; letter-spacing: .12em; color: var(--signal); }
.race-stage.mate .rs-step { color: var(--text); }
.rs-name { font-size: 26px; font-weight: 900; line-height: 1.15; margin: 8px 0 0; overflow-wrap: anywhere; }
.rs-hint { margin: 8px 0 0; line-height: 1.45; color: #dfe5ec; }
.race-seg { display: flex; gap: 4px; margin-top: 12px; }
.race-seg i { flex: 1; height: 8px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); }
.race-seg i.on { background: var(--signal); border-color: transparent; }
.rs-nav { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.rs-arrow { width: 92px; height: 92px; flex: none; }
.rs-arrow svg { width: 100%; height: 100%; transition: transform .35s ease-out; }
.rs-arrow circle { fill: var(--bg); stroke: var(--line); stroke-width: 3; }
.rs-arrow path { fill: var(--signal); stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.rs-arrow.idle path { fill: var(--panel-2); stroke: var(--muted); }
.rs-arrow.near circle { stroke: var(--signal); animation: pulse 1.4s infinite; }
.rs-dist { min-width: 0; }
.rs-dist b { display: block; font-family: var(--mono); font-size: 34px; font-weight: 900; line-height: 1.05; }
.rs-dist span { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; line-height: 1.35; }
.race-map { height: 42vh; min-height: 260px; margin-bottom: 14px; }
.race-pin { transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: var(--signal); color: var(--signal-ink); border: 3px solid #fff; display: grid; place-items: center; font-weight: 900; font-size: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.race-form input { font-size: 26px; letter-spacing: .14em; text-transform: uppercase; }
.race-form input::placeholder { color: #4a535f; }
.race-code-card.locked { border-color: #6b1d20; }
.race-lock { margin: 10px 0 0; color: var(--danger); font-weight: 700; }
.race-lock b { font-family: var(--mono); }
.shake { animation: shake .45s ease-in-out; border-color: var(--danger) !important; }

.race-cheer { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--team); margin-bottom: 14px; }
.race-cheer .rc-mega { font-size: 34px; animation: title-pop .6s cubic-bezier(.2,1.6,.4,1) both; }
.race-cheer b { display: block; font-size: 22px; font-weight: 900; }
.race-cheer span { color: var(--muted); font-size: 14px; }

.race-board .rb-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 12px 0 12px 10px; border-bottom: 1px solid var(--line); border-left: 4px solid var(--tc); }
.race-board .rb-row:last-child { border-bottom: 0; }
.race-board .rb-row.mine { background: rgba(198,244,50,.05); }
.race-board .rb-row.mine .rb-top b { color: var(--signal); }
.rb-pos { font-family: var(--mono); font-weight: 900; font-size: 20px; color: var(--muted); }
.rb-row.fin .rb-pos { color: #ffd400; }
.rb-main { min-width: 0; }
.rb-top { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.rb-top b { font-size: 17px; white-space: nowrap; }
.rb-top span { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-main .race-seg { margin-top: 7px; }
.rb-main .race-seg i { height: 7px; }
.rb-state { text-align: right; font-family: var(--mono); font-weight: 800; font-size: 16px; white-space: nowrap; }
.rb-state small { display: block; font-family: var(--sans); font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rb-row.fin .rb-state { color: #ffd400; }
.rb-row.fin .rb-state small { font-family: var(--mono); font-size: 13px; letter-spacing: 0; color: var(--text); }

.race-place { font-size: 46px; font-weight: 900; margin: 0 0 14px; animation: title-pop .7s cubic-bezier(.2,1.6,.4,1) .2s both; }
.race-final { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; }
.race-final li { padding: 9px 12px; border-left: 5px solid var(--tc); background: rgba(0,0,0,.18); border-radius: 8px; margin-bottom: 6px; font-weight: 800; }
.race-final li span { font-weight: 600; opacity: .8; font-size: 14px; }
.rs-arrow { position: relative; }
.rs-arrow.near path { opacity: 0; }
.rs-arrow.near::after { content: "🎯"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 42px; animation: title-pop .5s cubic-bezier(.2,1.6,.4,1) both; }
.race-map.mate { height: 30vh; min-height: 200px; }

/* ---------- Finale gegen die Zeit: Stress-Timer ---------- */
.race-timer { --rt: var(--signal); --rt-bg: #141a0b; position: sticky; top: calc(var(--safe-top) + 65px); z-index: 8; margin: 0 -4px 14px; padding: 10px 16px 12px; border-radius: 18px; background: linear-gradient(180deg, var(--rt-bg), #0f1216); border: 2px solid var(--rt); box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 0 0 transparent; color: var(--rt); transition: border-color .4s, color .4s, background .4s; }
.rt-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.rt-stage { font-family: var(--mono); color: var(--text); opacity: .85; }
.rt-digits { font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: clamp(72px, 23vw, 96px); font-weight: 900; line-height: .98; text-align: center; letter-spacing: -.02em; margin: 2px 0 6px; text-shadow: 0 0 28px color-mix(in srgb, var(--rt) 45%, transparent); }
.rt-bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.rt-bar i { display: block; height: 100%; background: var(--rt); transform-origin: left center; border-radius: 6px; transition: transform .25s linear, background .4s; box-shadow: 0 0 12px var(--rt); }
.rt-sub { margin-top: 8px; text-align: center; font-size: 14px; font-weight: 700; color: var(--text); }
.rt-sub b { font-variant-numeric: tabular-nums; color: var(--rt); }
.race-timer.lv-amber { --rt: var(--warn); --rt-bg: #241a06; }
.race-timer.lv-red, .race-timer.lv-crit, .race-timer.lv-final, .race-timer.lv-over { --rt: var(--danger); --rt-bg: #2a0b0c; }
.race-timer.lv-red { animation: rt-pulse 2s ease-in-out infinite; }
.race-timer.lv-crit { animation: rt-pulse .8s ease-in-out infinite; }
.race-timer.lv-crit .rt-digits { animation: rt-jitter 1s linear infinite; }
.race-timer.lv-final { background: linear-gradient(180deg, #4a0709, #1a0606); animation: rt-pulse .5s ease-in-out infinite; }
.race-timer.lv-final .rt-digits { color: #fff; text-shadow: 0 0 22px var(--danger), 0 0 4px var(--danger); animation: rt-jitter .5s linear infinite, rt-beat 1s ease-out infinite; }
.race-timer.lv-over .rt-digits { opacity: .7; }
@keyframes rt-pulse { 0%, 100% { box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 0 0 rgba(255,77,79,0); } 50% { box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 22px 4px rgba(255,77,79,.55); } }
@keyframes rt-jitter { 0%, 70%, 100% { transform: translate(0, 0); } 74% { transform: translate(-2px, 1px); } 78% { transform: translate(2px, -1px); } 82% { transform: translate(-1px, -1px); } 86% { transform: translate(1px, 1px); } }
@keyframes rt-beat { 0% { scale: 1.08; } 30% { scale: 1; } }
.race-timer.hit { animation: shake .45s ease-in-out; }
.race-timer.boost { box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 30px 6px rgba(198,244,50,.6); }
/* Toasts nicht über den Timer legen, sondern darunter einblenden */
body:has(.race-timer) #toasts { top: calc(var(--safe-top) + 326px); }
body:has(.race-timer.mate) #toasts { top: calc(var(--safe-top) + 296px); }
/* Teamkollegen: gleicher Timer, kleiner */
.race-timer.mate { padding: 8px 14px 10px; }
.race-timer.mate .rt-digits { font-size: 56px; margin: 0 0 6px; }
.race-timer.mate .rt-bar { height: 7px; }
.race-timer.mate .rt-sub { font-size: 13px; margin-top: 6px; }

/* Vignette am Bildschirmrand ab 60 s, letzte 10 s stärker */
#race-vignette { position: fixed; inset: 0; z-index: 45; pointer-events: none; background: radial-gradient(ellipse 75% 65% at 50% 50%, transparent 55%, rgba(255,30,30,.28) 78%, rgba(255,30,30,.6) 100%); animation: rt-vig 1s ease-in-out infinite; }
#race-vignette.lv-final { background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 45%, rgba(255,20,20,.4) 72%, rgba(255,20,20,.8) 100%); animation-duration: .5s; }
@keyframes rt-vig { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* +1:00 / −0:30 fliegt aus dem Timer */
.rt-fly { position: fixed; z-index: 75; pointer-events: none; transform: translate(-50%, -50%); font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: 72px; font-weight: 900; white-space: nowrap; animation: rt-fly 1.8s cubic-bezier(.2,.8,.2,1) forwards; }
.rt-fly.plus { color: var(--signal); -webkit-text-stroke: 3px #10140a; paint-order: stroke fill; text-shadow: 0 0 26px rgba(198,244,50,.85); }
.rt-fly.minus { color: var(--danger); -webkit-text-stroke: 3px #1a0505; paint-order: stroke fill; text-shadow: 0 0 26px rgba(255,77,79,.85); animation-name: rt-fly-down; }
@keyframes rt-fly { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, calc(-50% + var(--dy, -150px))) scale(.75); } 100% { opacity: 0; transform: translate(-50%, calc(-50% + var(--dy, -150px))) scale(.4); } }
@keyframes rt-fly-down { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 25% { transform: translate(calc(-50% - 10px), -50%); } 35% { transform: translate(calc(-50% + 10px), -50%); } 45% { transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, calc(-50% + var(--dy, 170px))) scale(.9); } }

/* Vorstart, Zeit abgelaufen, Overlay-Zusatz, Rangliste */
.race-hero.clock .rh-clock { font-variant-numeric: tabular-nums; font-size: 64px; font-weight: 900; line-height: 1; margin: 12px 0 4px; color: var(--signal); text-shadow: 0 0 24px rgba(198,244,50,.4); }
.race-hero .rh-rules { font-size: 14px; font-weight: 700; color: var(--signal); margin-top: 4px; }
.race-hero.over { background: linear-gradient(160deg, #3a0709, #140405); border-color: var(--danger); }
.race-hero.over .eyebrow, .race-hero.over .rh-title { color: var(--danger); }
.race-hero.over .rh-title { font-size: 36px; text-shadow: 0 0 24px rgba(255,77,79,.45); }
.race-ov-time { margin: -8px 0 20px; font-size: 18px; font-weight: 800; }
.race-ov-time b { font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 900; }
.race-ov-time .rot-bonus { display: block; width: fit-content; margin: 0 auto 8px; padding: 4px 12px; border-radius: 999px; background: var(--signal-ink); color: var(--signal); font-size: 15px; letter-spacing: .04em; }
.pill.rb-mode { font-size: 11px; vertical-align: middle; margin-left: 6px; }
.rb-left { font-variant-numeric: tabular-nums; font-size: 18px; color: var(--signal); }
.rb-left.lv-amber { color: var(--warn); }
.rb-left.lv-red, .rb-left.lv-crit, .rb-left.lv-final, .rb-left.lv-over { color: var(--danger); }
.race-board.time .rb-state { font-family: var(--sans); font-variant-numeric: tabular-nums; font-weight: 900; }
.rb-row.over { opacity: .75; }
.rb-row.over .rb-state { color: var(--danger); font-size: 13px; }
.rb-row.fin .rb-state:has(small) { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  /* Keine Wackler und kein Pulsieren – Farben und Text bleiben */
  .race-timer, .race-timer .rt-digits, #race-vignette { animation: none !important; }
  #race-vignette { opacity: .85; }
  .rt-fly { animation: rt-fade 1.8s steps(1, end) forwards !important; }
  @keyframes rt-fade { to { opacity: 0; } }
}
.race-board.time .rb-row.fin .rb-state small { font-family: var(--sans); font-size: 11px; letter-spacing: .06em; color: var(--muted); }

/* ---------- Manhunt-Recap (gemeinsam mit /shared/recap.js, gleicher Block in admin.css und style.css) ---------- */
html.rc-lock, html.rc-lock body { overflow: hidden; }
.recap { --rc-bg: #0b0d10; --rc-panel: #151920; --rc-panel-2: #1d222a; --rc-line: #2a313b; --rc-text: #f2f4f7; --rc-muted: #8b95a3; --rc-signal: #c6f432; --rc-bad: #ff4d4f; --rc-cc: #ffd23f;
  position: fixed; inset: 0; z-index: 48; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% 0%, #17202b 0%, var(--rc-bg) 55%); color: var(--rc-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif; font-size: 15px; animation: rc-in .28s ease-out both; }
@keyframes rc-in { from { opacity: 0; transform: translateY(14px); } }
.rc-top { flex: none; display: flex; align-items: center; gap: 12px; padding: calc(24px + env(safe-area-inset-top, 0px)) 14px 10px; border-bottom: 1px solid var(--rc-line); background: rgba(11,13,16,.85); backdrop-filter: blur(10px); }
.rc-top-t { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; flex: 1; }
.rc-top-t span { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--rc-signal); }
.rc-top-t b { font-size: 19px; font-weight: 900; letter-spacing: .02em; }
.rc-x { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--rc-line); background: var(--rc-panel); color: var(--rc-text); font-size: 18px; cursor: pointer; }
.rc-btn { flex: none; border: 1px solid var(--rc-line); background: var(--rc-panel-2); color: var(--rc-text); border-radius: 10px; padding: 9px 14px; font-weight: 800; font-size: 13px; cursor: pointer; }
.rc-btn:disabled { opacity: .5; }
.rc-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; }
.rc-body > * { width: 100%; max-width: 640px; margin: 0 auto; }
.rc-loading { margin: auto; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; color: var(--rc-muted); }
.rc-loading i { width: 10px; height: 10px; border-radius: 50%; background: var(--rc-signal); animation: rc-dots 1s ease-in-out infinite; }
.rc-loading i:nth-child(2) { animation-delay: .15s; } .rc-loading i:nth-child(3) { animation-delay: .3s; }
.rc-loading p { flex-basis: 100%; text-align: center; margin: 6px 0 0; }
@keyframes rc-dots { 50% { transform: translateY(-8px); opacity: .4; } }
.rc-empty { margin: auto; text-align: center; color: var(--rc-muted); max-width: 320px; }
.rc-empty-ic { font-size: 44px; } .rc-empty p { color: var(--rc-text); line-height: 1.45; }

.rc-hero { text-align: center; padding: 4px 0 0; }
.rc-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.rc-team { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px 10px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 28%, transparent), color-mix(in srgb, var(--c) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.rc-team i { width: 22px; height: 4px; border-radius: 4px; background: var(--c); }
.rc-team.r i { background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 10px); }
.rc-team b { font-size: 19px; font-weight: 900; }
.rc-team small { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rc-muted); }
.rc-vs-x { font-weight: 900; font-style: italic; color: var(--rc-muted); font-size: 15px; letter-spacing: .1em; }
.rc-verdict { margin: 14px 0 12px; font-size: 24px; font-weight: 900; line-height: 1.1; letter-spacing: -.01em; }
.rc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rc-kpis div { background: var(--rc-panel); border: 1px solid var(--rc-line); border-radius: 12px; padding: 9px 4px 8px; display: flex; flex-direction: column; gap: 2px; }
.rc-kpis b { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rc-kpis b em { font-style: normal; color: var(--rc-muted); font-size: 14px; }
.rc-kpis small { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-muted); }
.rc-reason { margin: 10px 0 0; font-size: 13px; color: var(--rc-muted); }

.rc-stage { display: flex; flex-direction: column; gap: 10px; }
.rc-mapwrap { position: relative; height: min(56vh, 480px); min-height: 300px; border-radius: 18px; overflow: hidden; border: 1px solid var(--rc-line); background: #171b21; isolation: isolate; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.rc-map { position: absolute; inset: 0; z-index: 0; background: #171b21 radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0) 0 0 / 22px 22px; }
.rc-mapwrap.flash::after { content: ''; position: absolute; inset: 0; z-index: 900; pointer-events: none; background: radial-gradient(circle, rgba(255,77,79,0) 30%, rgba(255,77,79,.45) 100%); animation: rc-mflash .9s ease-out forwards; }
@keyframes rc-mflash { from { opacity: 1; } to { opacity: 0; } }
.rc-clock { position: absolute; z-index: 800; left: 10px; bottom: 10px; display: flex; align-items: baseline; gap: 8px; padding: 6px 12px 7px; border-radius: 12px; background: rgba(11,13,16,.82); border: 1px solid var(--rc-line); backdrop-filter: blur(6px); pointer-events: none; }
.rc-clock b { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rc-clock span { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rc-signal); }
.rc-clock.head span { color: #ffb020; }
.rc-banner { position: absolute; z-index: 850; left: 50%; top: 12px; transform: translate(-50%, -16px); opacity: 0; padding: 8px 14px; border-radius: 999px; font-weight: 900; font-size: 14px; white-space: nowrap; pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.2,1.4,.4,1); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.rc-banner.on { opacity: 1; transform: translate(-50%, 0); }
.rc-banner.cap { background: var(--rc-bad); color: #fff; }
.rc-banner.ping { background: #5aa9ff; color: #06121f; }
.rc-ping { position: absolute; transform: translate(4px, -26px); font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.rc-banner.cc { background: var(--rc-cc); color: #1a1500; }
.rc-nomap { position: absolute; inset: 0; z-index: 700; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--rc-muted); }
.recap .leaflet-container { background: transparent; font-family: inherit; }
.recap .leaflet-container:has(.tiles-dark) { background: #1b1e22; }
.recap .leaflet-control-attribution { font-size: 9px; background: rgba(11,13,16,.6); color: var(--rc-muted); }
.recap .leaflet-control-attribution a { color: var(--rc-muted); }
.recap .leaflet-bar a { background: rgba(21,25,32,.92); color: var(--rc-text); border-color: var(--rc-line); }

.rc-ev { background: none; border: 0; }
.rc-ev.rc-hide { visibility: hidden; }
.rc-dot { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 900; font-size: 12px; line-height: 1; letter-spacing: -.02em; border: 2px solid #0b0d10; box-shadow: 0 0 0 2px var(--c), 0 4px 12px rgba(0,0,0,.55); text-shadow: 0 1px 2px rgba(0,0,0,.45); transition: opacity .3s, filter .3s; }
.rc-dot.hunting { border-radius: 8px; }
.rc-dot.me { width: 32px; height: 32px; font-size: 13px; box-shadow: 0 0 0 2px var(--c), 0 0 0 6px color-mix(in srgb, var(--c) 30%, transparent), 0 4px 14px rgba(0,0,0,.6); }
.recap.playing .rc-dot.me { animation: rc-me 1.6s ease-in-out infinite; }
@keyframes rc-me { 50% { box-shadow: 0 0 0 2px var(--c), 0 0 0 11px color-mix(in srgb, var(--c) 0%, transparent), 0 4px 14px rgba(0,0,0,.6); } }
.rc-dot.out { filter: grayscale(1) brightness(.7); opacity: .75; }
.rc-dot.out::after { content: '✕'; position: absolute; right: -7px; top: -8px; width: 15px; height: 15px; border-radius: 50%; background: var(--rc-bad); color: #fff; font-size: 9px; display: grid; place-items: center; border: 1.5px solid #0b0d10; }
.rc-pin { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 5px; border-radius: 999px; white-space: nowrap; font-weight: 900; font-size: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.5); animation: rc-pop .35s cubic-bezier(.2,1.5,.4,1) both; }
.rc-pin.cc { background: var(--rc-cc); color: #1a1500; cursor: pointer; transform: translate(-50%, calc(-100% - 6px)); }
.rc-pin.cc::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--rc-cc); }
.rc-pin.cc.below { transform: translate(-50%, 6px); }
.rc-pin.cc.below::after { bottom: auto; top: -5px; border-top: 0; border-bottom: 5px solid var(--rc-cc); }
.rc-pin.cap { background: var(--rc-bad); color: #fff; padding-left: 3px; }
.rc-pin.cap i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: var(--rc-bad); display: grid; place-items: center; font-size: 11px; }
@keyframes rc-pop { from { opacity: 0; scale: .4; } }
.rc-flash { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 4px solid var(--rc-bad); animation: rc-ring 1.4s ease-out forwards; pointer-events: none; }
@keyframes rc-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(4); opacity: 0; } }
.rc-link { position: absolute; transform: translate(-50%, 16px); padding: 2px 7px; border-radius: 8px; background: #1a1500; color: var(--rc-cc); border: 1px solid var(--rc-cc); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 800; font-size: 12px; white-space: nowrap; }

.rc-ctrl { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "play scrub" "speed speed"; gap: 8px 12px; align-items: center; background: var(--rc-panel); border: 1px solid var(--rc-line); border-radius: 16px; padding: 10px 12px; }
.rc-play { grid-area: play; width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--rc-signal); color: #10140a; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px color-mix(in srgb, var(--rc-signal) 35%, transparent); }
.rc-play svg { width: 22px; height: 22px; fill: currentColor; }
.rc-play:active { transform: scale(.94); }
.rc-scrub { grid-area: scrub; position: relative; padding-top: 4px; }
.rc-track { position: relative; height: 10px; border-radius: 6px; background: var(--rc-panel-2); overflow: hidden; }
.rc-track .rc-head { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(255,176,32,.28) 0 4px, transparent 4px 8px); }
.rc-track .rc-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--rc-signal) 25%, transparent), color-mix(in srgb, var(--rc-signal) 55%, transparent)); pointer-events: none; }
.rc-track i { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; z-index: 1; border-radius: 2px; }
.rc-track i.cc { background: var(--rc-cc); }
.rc-track i.cap { background: var(--rc-bad); width: 4px; margin-left: -2px; }
.rc-track i.ping { background: #5aa9ff; opacity: .7; width: 2px; margin-left: -1px; }
.rc-range { position: absolute; left: 0; right: 0; top: -6px; width: 100%; height: 30px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.rc-range::-webkit-slider-runnable-track { height: 30px; background: transparent; }
.rc-range::-moz-range-track { height: 30px; background: transparent; }
.rc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: 5px; border-radius: 50%; background: #fff; border: 3px solid var(--rc-signal); box-shadow: 0 2px 8px rgba(0,0,0,.6); }
.rc-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--rc-signal); }
.rc-times { display: flex; justify-content: space-between; margin-top: 8px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--rc-muted); font-variant-numeric: tabular-nums; }
.rc-times .rc-now { color: var(--rc-text); font-weight: 800; }
.rc-speed { grid-area: speed; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--rc-bg); border-radius: 10px; padding: 3px; }
.rc-speed button { border: 0; background: transparent; color: var(--rc-muted); font-weight: 800; font-size: 13px; padding: 7px 0; border-radius: 8px; cursor: pointer; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.rc-speed button.on { background: var(--rc-panel-2); color: var(--rc-text); box-shadow: inset 0 0 0 1px var(--rc-line); }
.rc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; font-weight: 700; color: #c9d0d9; padding: 0 4px; }
.rc-lg { display: inline-flex; align-items: center; gap: 6px; }
.rc-lg svg { width: 26px; height: 8px; }
.rc-lg em, .rc-pl em { font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #10140a; background: var(--rc-signal); border-radius: 5px; padding: 1px 5px; vertical-align: 2px; }

.rc-side { display: flex; flex-direction: column; gap: 14px; }
.rc-sec h3 { margin: 6px 2px 10px; font-size: 13px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; display: flex; align-items: baseline; gap: 10px; }
.rc-sec h3 span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: none; color: var(--rc-muted); }
.rc-muted { color: var(--rc-muted); margin: 0; line-height: 1.45; font-size: 14px; }
.rc-calls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rc-cc { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 9px 12px 9px 9px; border-radius: 14px; background: var(--rc-panel); border: 1px solid var(--rc-line); color: var(--rc-text); cursor: pointer; transition: border-color .15s, background .15s; }
.rc-cc:hover { border-color: #3a4350; }
.rc-cc.on { border-color: var(--rc-cc); background: linear-gradient(90deg, rgba(255,210,63,.14), var(--rc-panel) 70%); }
.rc-rank { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--rc-panel-2); font-weight: 900; font-size: 14px; color: var(--rc-cc); }
li:first-child .rc-rank { background: var(--rc-cc); color: #1a1500; }
.rc-cc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-cc-main b { font-size: 15px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-cc-main small { font-size: 12px; color: var(--rc-muted); }
.rc-cc-main em { font-style: normal; color: var(--rc-signal); font-weight: 700; }
.rc-cc-main em.bad { color: var(--rc-bad); }
.rc-cc-d { flex: none; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 22px; font-weight: 800; color: var(--rc-cc); font-variant-numeric: tabular-nums; }
.rc-cc-d small { font-size: 12px; margin-left: 2px; color: var(--rc-muted); }
.rc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rc-tile { --c: var(--rc-signal); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 11px; border-radius: 14px; background: var(--rc-panel); border: 1px solid var(--rc-line); }
.rc-tile:last-child:nth-child(odd) { grid-column: span 2; }
.rc-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.rc-tile-ic { position: absolute; right: 10px; top: 8px; font-size: 20px; opacity: .9; }
.rc-tile small { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-muted); padding-right: 26px; }
.rc-tile b { font-size: 20px; font-weight: 900; margin-top: 4px; }
.rc-tile span:last-child { font-size: 13px; color: #c9d0d9; font-variant-numeric: tabular-nums; }
.rc-players { display: flex; flex-direction: column; gap: 6px; }
.rc-pl { display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 9px; border-radius: 14px; background: var(--rc-panel); border: 1px solid var(--rc-line); }
.rc-pl.me { border-color: color-mix(in srgb, var(--rc-signal) 50%, var(--rc-line)); }
.rc-dot-s { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 900; font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.rc-dot-s.hunting { border-radius: 9px; }
.rc-pl-n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-pl-n b { font-size: 15px; }
.rc-st { font-size: 12px; color: var(--rc-muted); }
.rc-st.ok { color: var(--rc-signal); font-weight: 700; } .rc-st.bad { color: #ff8a8b; }
.rc-pl-d { flex: none; text-align: right; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 800; font-size: 15px; display: flex; flex-direction: column; }
.rc-pl-d small { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif; font-weight: 600; font-size: 11px; color: var(--rc-muted); }

/* Breite Bildschirme (Admin, Tablet): Karte links groß, Rest rechts */
@media (min-width: 980px) {
  .rc-body { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto 1fr; gap: 16px 20px; padding: 18px 22px 22px; }
  .rc-body > * { max-width: none; margin: 0; }
  .rc-body > .rc-loading, .rc-body > .rc-empty { grid-column: 1 / -1; margin: auto; }
  .rc-stage { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 0; align-self: start; }
  .rc-mapwrap { height: calc(100vh - 230px); min-height: 420px; }
  .rc-hero { grid-column: 2; grid-row: 1; }
  .rc-side { grid-column: 2; grid-row: 2; }
  .rc-ctrl { grid-template-columns: auto 1fr 190px; grid-template-areas: "play scrub speed"; }
}
@media (prefers-reduced-motion: reduce) {
  .recap, .rc-pin, .rc-banner, .recap.playing .rc-dot.me { animation: none !important; transition: none !important; }
}

/* Recap-Einstieg in der Manhunt-Ansicht und in der Rundenende-Meldung */
.recap-cta { position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 16px 16px 16px 14px; border-radius: 18px; border: 1px solid rgba(198,244,50,.45); background: radial-gradient(140% 120% at 0% 0%, rgba(198,244,50,.22) 0%, rgba(198,244,50,.05) 45%, var(--panel) 75%); color: var(--text); text-align: left; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.recap-cta:active { transform: scale(.985); }
.rcc-ic { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--signal); color: var(--signal-ink); box-shadow: 0 0 0 6px rgba(198,244,50,.14); animation: rcc-pulse 2.2s ease-in-out infinite; }
.rcc-ic svg { width: 22px; height: 22px; fill: currentColor; margin-left: 3px; }
@keyframes rcc-pulse { 50% { box-shadow: 0 0 0 12px rgba(198,244,50,0); } }
.rcc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; }
.rcc-t small { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }
.rcc-t b { font-size: 22px; font-weight: 900; letter-spacing: .01em; }
.rcc-t span { font-size: 13px; color: #c9d0d9; line-height: 1.35; }
.rcc-art { flex: none; width: 64px; height: 52px; opacity: .9; }
.recap-list { display: flex; flex-direction: column; gap: 6px; }
.recap-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); text-align: left; cursor: pointer; }
.recap-row b { flex: none; font-weight: 900; }
.recap-row span { flex: 1; min-width: 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recap-row em { flex: none; font-style: normal; font-weight: 800; color: var(--signal); font-size: 13px; letter-spacing: .04em; }
.ov-card .btn.ov-recap { margin-bottom: 10px; background: rgba(0,0,0,.22); color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.ov-card:not(.good):not(.bad):not(.party) .btn.ov-recap { background: var(--signal); color: var(--signal-ink); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .rcc-ic { animation: none; } }

/* ---------- Momente: Vollbild-Sequenzen je Spielmodus (moments.js) ---------- */
.mo { --mo-bg: #07090c; position: fixed; inset: 0; z-index: 80; overflow: hidden; background: var(--mo-bg); color: #fff; display: flex; align-items: center; justify-content: center; isolation: isolate; -webkit-user-select: none; user-select: none; animation: mo-in .18s ease-out both; }
.mo.out { animation: mo-out .48s ease-in forwards; pointer-events: none; }
@keyframes mo-in { from { opacity: 0; } }
@keyframes mo-out { to { opacity: 0; } }
.mo::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 48%, rgba(0,0,0,.7) 100%); }
.mo-grain { position: absolute; inset: -50%; width: 200%; height: 200%; z-index: 3; pointer-events: none; background-image: var(--mo-noise); opacity: .055; mix-blend-mode: screen; animation: mo-grain 1.1s steps(6) infinite; }
@keyframes mo-grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-4%); } 60% { transform: translate(-4%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(-1%,4%); } }
.mo-stage { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.mo.mo-shake .mo-stage { animation: mo-shake .42s linear; }
@keyframes mo-shake { 0%,100% { transform: translate(0,0); } 10% { transform: translate(-10px,5px); } 20% { transform: translate(9px,-7px); } 30% { transform: translate(-8px,-3px); } 40% { transform: translate(7px,5px); } 50% { transform: translate(-5px,2px); } 60% { transform: translate(4px,-4px); } 70% { transform: translate(-3px,3px); } 80% { transform: translate(2px,-2px); } 90% { transform: translate(-1px,1px); } }
.mo-flash { position: absolute; inset: 0; z-index: 4; pointer-events: none; animation: fx-flash .38s ease-out forwards; }
.mo-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 560px; }
.mo-center.mo-below { margin-top: 42vh; }
.mo-center.mo-low { margin-top: 18vh; }
.mo-eyebrow { font-size: 12px; font-weight: 900; letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.mo-mono { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; min-height: 1.3em; color: rgba(255,255,255,.88); }
.mo-mono:not(:empty)::after { content: "_"; animation: blink .7s steps(2) infinite; }
.mo-word { font-size: clamp(52px, 17vw, 112px); font-weight: 900; line-height: .92; letter-spacing: -.02em; text-transform: uppercase; color: #fff; }
.mo-word.hot { color: #fff; text-shadow: 0 0 30px rgba(255,77,79,.95), 0 0 80px rgba(255,77,79,.55); }
.mo-word.small { font-size: clamp(34px, 10.5vw, 70px); }
.mo-word.red { color: var(--danger); text-shadow: 0 0 36px rgba(255,77,79,.65), 0 0 90px rgba(255,77,79,.35); }
.mo-word.lime { color: var(--signal); text-shadow: 0 0 36px rgba(198,244,50,.6), 0 0 90px rgba(198,244,50,.3); }
.mo-word.green { color: var(--ob-x); text-shadow: 0 0 36px rgba(34,224,122,.6), 0 0 90px rgba(34,224,122,.3); }
.mo-word.ob { background: linear-gradient(90deg, var(--ob-s), #fff 45%, var(--ob-z)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .06em; filter: drop-shadow(0 0 28px rgba(56,189,248,.45)); }
.mo-sub { font-size: 17px; font-weight: 800; letter-spacing: .04em; line-height: 1.35; color: rgba(255,255,255,.88); max-width: 34ch; }
.mo-hide { opacity: 0; }
.mo-slam { animation: mo-slam .36s cubic-bezier(.1,.9,.2,1) both; }
@keyframes mo-slam { 0% { opacity: 0; transform: scale(2.7); filter: blur(8px); } 55% { opacity: 1; transform: scale(.95); filter: blur(0); } 100% { opacity: 1; transform: scale(1); } }
.mo-rise { animation: mo-rise .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mo-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mo-fade { animation: mo-fade .4s ease-out both; }
@keyframes mo-fade { from { opacity: 0; } to { opacity: 1; } }
.mo-count { font-family: var(--mono); font-size: clamp(64px, 20vw, 120px); font-weight: 800; line-height: 1; color: #fff; text-shadow: 0 0 40px rgba(255,77,79,.8); animation: heartbeat 1s ease-in-out infinite; }
/* Glitch: zwei versetzte, farbige Kopien des Wortes flackern kurz */
.mo-glitch { position: relative; }
.mo-glitch::before, .mo-glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0; text-shadow: none; }
.mo-glitch.mo-slam::before { color: #4ff0ff; animation: mo-gl1 .5s steps(1) .1s 1 forwards; }
.mo-glitch.mo-slam::after { color: #ff3df0; animation: mo-gl2 .5s steps(1) .1s 1 forwards; }
@keyframes mo-gl1 { 0% { opacity: .85; clip-path: inset(0 0 72% 0); transform: translate(-7px,-2px); } 25% { clip-path: inset(28% 0 44% 0); transform: translate(6px,1px); } 50% { clip-path: inset(62% 0 8% 0); transform: translate(-4px,2px); } 75% { clip-path: inset(8% 0 82% 0); transform: translate(7px,-1px); } 100% { opacity: 0; } }
@keyframes mo-gl2 { 0% { opacity: .85; clip-path: inset(58% 0 12% 0); transform: translate(7px,2px); } 25% { clip-path: inset(10% 0 70% 0); transform: translate(-6px,-1px); } 50% { clip-path: inset(36% 0 36% 0); transform: translate(5px,-2px); } 75% { clip-path: inset(70% 0 4% 0); transform: translate(-7px,1px); } 100% { opacity: 0; } }
/* Scanlinie (Überwachung) */
.mo-scan { position: absolute; left: 0; right: 0; top: -3px; height: 3px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); box-shadow: 0 0 22px rgba(255,255,255,.55); animation: mo-scan .95s cubic-bezier(.4,0,.6,1) both; }
@keyframes mo-scan { from { top: -3px; } to { top: 100%; } }
/* Fadenkreuz */
.mo-reticle { position: absolute; width: min(80vw, 380px); height: min(80vw, 380px); fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.4; opacity: 0; transform: scale(2.6) rotate(-60deg); }
.mo.on .mo-reticle { animation: mo-ret-in .76s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes mo-ret-in { 0% { opacity: 0; transform: scale(2.8) rotate(-70deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.mo-reticle .r-outer { stroke-dasharray: 5 11; animation: mo-spin 7s linear infinite; transform-origin: center; }
.mo-reticle .r-mid { stroke-dasharray: 44 20; animation: mo-spin 10s linear infinite reverse; transform-origin: center; }
.mo-reticle .r-ticks { stroke-width: 2.2; }
.mo-reticle .r-dot { fill: #fff; stroke: none; }
.mo .mo-reticle.locked { opacity: 1; transform: none; stroke: var(--danger); filter: drop-shadow(0 0 14px rgba(255,77,79,.75)); animation: mo-ret-lock .26s cubic-bezier(.2,1.4,.4,1) both; }
.mo .mo-reticle.locked .r-outer, .mo .mo-reticle.locked .r-mid { animation-play-state: paused; }
.mo .mo-reticle.locked .r-dot { fill: var(--danger); animation: blink .35s steps(2) 5; }
@keyframes mo-ret-lock { from { transform: scale(1.2); } to { transform: scale(1); } }
.mo .mo-reticle.break { animation: mo-ret-break .9s ease-in forwards; }
@keyframes mo-ret-break { to { transform: scale(1.7); opacity: 0; filter: blur(5px); } }
.mo .mo-reticle.shatter { animation: mo-ret-shatter .7s cubic-bezier(.2,.8,.3,1) forwards; }
.mo .mo-reticle.shatter .r-outer { stroke-dasharray: 60 90; animation: mo-spin 1.2s linear infinite; }
@keyframes mo-ret-shatter { 30% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(2.4) rotate(40deg); opacity: 0; filter: blur(6px); } }
@keyframes mo-spin { to { transform: rotate(360deg); } }
.mo-brackets { position: absolute; width: min(64vw, 300px); height: min(64vw, 300px); opacity: 0; }
.mo-brackets i { position: absolute; width: 30px; height: 30px; border: 3px solid var(--danger); box-shadow: 0 0 12px rgba(255,77,79,.5); }
.mo-brackets i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.mo-brackets i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.mo-brackets i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.mo-brackets i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.mo-brackets.on { animation: mo-br .28s cubic-bezier(.2,1.3,.4,1) forwards; }
@keyframes mo-br { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: scale(1); } }
.mo .mo-brackets.break { opacity: 1; animation: mo-ret-break .9s ease-in forwards; }
/* Sonar, Radar, Kreuz */
.mo-sonar { position: absolute; width: 60px; height: 60px; }
.mo-sonar i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--danger); box-shadow: 0 0 20px rgba(255,77,79,.5); animation: mo-sonar 2s cubic-bezier(.1,.6,.3,1) infinite; }
.mo-sonar i:nth-child(2) { animation-delay: .65s; }
.mo-sonar i:nth-child(3) { animation-delay: 1.3s; }
@keyframes mo-sonar { from { transform: scale(.2); opacity: .95; } to { transform: scale(16); opacity: 0; } }
.mo-sonar.lime i { border-color: var(--signal); box-shadow: 0 0 20px rgba(198,244,50,.5); }
.mo-me { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 22px #fff, 0 0 60px rgba(255,255,255,.5); }
.mo-radar { position: absolute; width: min(88vw, 400px); height: min(88vw, 400px); color: var(--signal); opacity: 0; animation: mo-radar-in .7s cubic-bezier(.2,.9,.3,1) forwards; transition: opacity .5s; }
.mo-radar.cyan { color: #38bdf8; }
@keyframes mo-radar-in { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
.mo-radar.dim { animation: none; opacity: .5; }
.mo-radar.fade { animation: none; opacity: .12; transition-duration: 1.2s; }
.mo-radar svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mo-radar .rd-bg { fill: currentColor; fill-opacity: .045; }
.mo-radar .rd-grid { fill: none; stroke: currentColor; stroke-opacity: .26; stroke-width: .5; }
.mo-radar .rd-ticks { stroke-opacity: .55; stroke-width: .7; }
.mo-radar .rd-outer { stroke-opacity: .7; stroke-width: 1.1; }
.mo-radar .rd-sweep { fill: currentColor; }
.mo-radar .rd-lead { stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.mo-radar .rd-me { fill: #fff; }
.mo-radar .rd-blip { opacity: 0; animation: rd-blip 2.4s linear infinite; }
.mo-radar .rd-blip circle { fill: var(--danger); }
.mo-radar .rd-blip .halo { fill: none; stroke: var(--danger); stroke-width: .9; transform-box: fill-box; transform-origin: center; animation: rd-halo 2.4s ease-out infinite; }
@keyframes rd-blip { 0% { opacity: 1; } 60% { opacity: .18; } 100% { opacity: 0; } }
@keyframes rd-halo { 0% { transform: scale(1); opacity: .9; } 30% { transform: scale(3.6); opacity: 0; } 100% { transform: scale(3.6); opacity: 0; } }
/* Among Us: Sterne, Szene, Beans */
.mo-stars { position: absolute; inset: 0; background: radial-gradient(1px 1px at 10% 20%, #fff 50%, transparent), radial-gradient(1px 1px at 30% 70%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 60% 30%, #fff 50%, transparent), radial-gradient(1px 1px at 80% 80%, #fff 50%, transparent), radial-gradient(1px 1px at 50% 55%, #fff 50%, transparent), radial-gradient(1px 1px at 90% 10%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 20% 90%, #cfe 50%, transparent), radial-gradient(1px 1px at 72% 58%, #fff 50%, transparent), #02040a; animation: stars 9s linear infinite; opacity: .9; }
.mo-dim { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; }
.mo-dim.flick { animation: mo-flick .6s steps(1) both; }
@keyframes mo-flick { 0% { opacity: .75; } 12% { opacity: 0; } 30% { opacity: .6; } 42% { opacity: 0; } 70% { opacity: .35; } 80% { opacity: 0; } }
.mo-scene { position: absolute; left: 0; right: 0; top: 38%; height: 170px; display: flex; align-items: flex-end; justify-content: center; transition: opacity .5s; }
.mo-scene.dim { opacity: .22; }
.mo-bean { width: 110px; height: auto; display: block; }
.mo-victim { position: relative; }
.mo-bean .bn-top, .mo-bean .bn-bot, .mo-bean .bn-bone { transform-box: fill-box; }
.mo-bean .bn-bone { transform-origin: center; transform: scale(0); }
.mo-victim.dead .bn-top { transform-origin: left bottom; animation: bn-top .55s cubic-bezier(.3,0,.7,1) forwards; }
@keyframes bn-top { 40% { transform: rotate(-16deg) translate(-6px, 2px); } 100% { transform: rotate(-34deg) translate(-26px, 26px); opacity: .95; } }
.mo-victim.dead .bn-bone { animation: bn-bone .4s cubic-bezier(.2,1.6,.4,1) .08s forwards; }
@keyframes bn-bone { to { transform: scale(1); } }
.mo-splat { position: absolute; left: 50%; bottom: -14px; width: 210px; height: 74px; margin-left: -105px; border-radius: 50%; background: radial-gradient(ellipse, #c4121b, rgba(196,18,27,.55) 45%, rgba(196,18,27,0) 72%); transform: scale(0); z-index: -1; }
.mo-victim.dead .mo-splat { animation: mo-splat .45s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes mo-splat { to { transform: scale(1); } }
.mo-killer { position: absolute; left: calc(50% + 48px); bottom: 0; transform: translateX(95vw); }
.mo-killer .mo-bean { width: 118px; transform: scaleX(-1); }
.mo-killer.in { animation: mo-dash-in .22s cubic-bezier(.2,.9,.3,1) forwards; }
.mo-killer.out { animation: mo-dash-out .32s ease-in forwards; }
@keyframes mo-dash-in { to { transform: translateX(0); } }
@keyframes mo-dash-out { from { transform: translateX(0); } to { transform: translateX(95vw); } }
.mo-slash { position: absolute; left: 50%; bottom: 70px; width: 240px; height: 5px; margin-left: -120px; background: #fff; box-shadow: 0 0 18px #fff; border-radius: 3px; transform: rotate(-32deg) scaleX(0); transform-origin: left center; opacity: 0; }
.mo-slash.on { animation: mo-slash .22s ease-out forwards; }
@keyframes mo-slash { 0% { opacity: 1; transform: rotate(-32deg) scaleX(0); } 55% { opacity: 1; transform: rotate(-32deg) scaleX(1); } 100% { opacity: 0; transform: rotate(-32deg) scaleX(1); } }
.mo-ghost { position: absolute; left: 50%; bottom: 0; margin-left: -55px; opacity: 0; }
.mo-ghost .mo-bean { filter: drop-shadow(0 0 16px rgba(159,230,255,.8)); }
.mo-ghost.on { animation: mo-ghost 1.6s ease-out forwards; }
@keyframes mo-ghost { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: .55; } 100% { opacity: .5; transform: translateY(-110px); } }
.mo-crew { position: absolute; top: 24%; display: flex; gap: 22px; align-items: flex-end; }
.mo-crew .mo-bean { width: 58px; animation: mo-walk .42s ease-in-out infinite alternate; }
.mo-crew .w1 { animation-delay: .1s; } .mo-crew .w2 { animation-delay: .2s; } .mo-crew .w3 { animation-delay: .3s; }
.mo-crew.halt .mo-bean { animation: none; }
@keyframes mo-walk { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-7px) rotate(4deg); } }
/* Outbreak: EKG, Adern, Biohazard, Übernahme, Rotor */
.mo-ekg { position: absolute; left: 0; right: 0; top: 50%; height: 120px; margin-top: -60px; width: 100%; fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; opacity: .95; }
.mo-ekg .ekg-beat { stroke: var(--ob-h); filter: drop-shadow(0 0 8px rgba(74,222,128,.8)); }
.mo-ekg.draw .ekg-beat { animation: mo-draw 1.35s linear forwards; }
@keyframes mo-draw { to { stroke-dashoffset: 0; } }
.mo-ekg .ekg-flat { stroke: var(--danger); stroke-dasharray: 800; stroke-dashoffset: 800; filter: drop-shadow(0 0 10px rgba(255,77,79,.9)); }
.mo-ekg.flat .ekg-beat { animation: mo-fadeout .3s ease-out forwards; }
.mo-ekg.flat .ekg-flat { animation: mo-draw .5s linear forwards; }
@keyframes mo-fadeout { to { opacity: 0; } }
.mo-veins { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255,77,79,.7); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255,77,79,.6)); }
.mo-veins path { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.mo-veins path.main { stroke-width: 3.5; }
.mo-veins.grow path { animation: mo-draw 1.9s ease-out forwards; animation-delay: calc(var(--i, 0) * 40ms); }
.mo-bio { width: min(46vw, 200px); height: min(46vw, 200px); color: var(--danger); filter: drop-shadow(0 0 22px rgba(255,77,79,.75)); }
.mo-bio.on { animation: mo-bio-in .55s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes mo-bio-in { 0% { transform: scale(2.4) rotate(-40deg); opacity: 0; filter: blur(6px); } 40% { transform: scale(.92); opacity: 1; filter: blur(0); } 52% { transform: translate(-7px,0) scale(1); opacity: .5; } 60% { transform: translate(7px,0) scale(1); opacity: 1; } 68% { transform: translate(-3px,2px); opacity: .7; } 100% { transform: none; opacity: 1; } }
.mo-bio .bio-cut { stroke: var(--mo-bg, #07090c); }
.mo-bio.spin .bio-cut { stroke: transparent; }
.mo-bio.spin { position: absolute; width: min(120vw, 620px); height: min(120vw, 620px); opacity: 0; color: rgba(255,77,79,.16); filter: none; }
.mo-bio.spin.on { animation: mo-bio-spin 14s linear infinite, mo-fade .6s ease-out both; }
@keyframes mo-bio-spin { to { transform: rotate(360deg); } }
.mo-takeover { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle, #6a0a0e, #2c0608 55%, #150406 100%); transform: scale(0); }
.mo-takeover.on { animation: mo-takeover 1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes mo-takeover { to { transform: scale(110); } }
.mo-rotor { position: absolute; top: 9vh; width: 72vw; max-width: 420px; height: 7px; border-radius: 4px; background: linear-gradient(90deg, transparent, #cfd8e3 30%, #fff 50%, #cfd8e3 70%, transparent); animation: mo-rotor .09s linear infinite; opacity: .9; }
@keyframes mo-rotor { from { transform: rotate(0) scaleX(1); } 50% { transform: rotate(90deg) scaleX(.35); } to { transform: rotate(180deg) scaleX(1); } }
.mo-cone { position: absolute; top: 9vh; width: 70vw; height: 64vh; background: linear-gradient(180deg, rgba(34,224,122,.42), rgba(34,224,122,.08) 70%, transparent); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); transform-origin: top; animation: mo-cone 2.6s ease-in-out infinite alternate; }
@keyframes mo-cone { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
/* Finale: Startampel, Stoppuhr, Flagge */
.mo-lights { display: flex; gap: min(14px, 3vw); padding: 16px min(22px, 5vw); border-radius: 24px; background: linear-gradient(180deg, #1a1e24, #0e1115); border: 2px solid #2a313b; box-shadow: 0 26px 70px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06); margin: 6px 0 10px; }
.mo-lights i { width: min(54px, 13vw); height: min(54px, 13vw); border-radius: 50%; background: #241011; border: 3px solid #3a1a1c; box-shadow: inset 0 -8px 16px rgba(0,0,0,.55); transition: background .07s, box-shadow .07s; }
.mo-lights i.on { background: radial-gradient(circle at 40% 35%, #ff9d9e, #ff2c30 55%, #a50b0e); box-shadow: 0 0 28px 7px rgba(255,44,48,.7), inset 0 -8px 16px rgba(0,0,0,.4); }
.mo-lights.out i { background: #170c0d; box-shadow: inset 0 -8px 16px rgba(0,0,0,.55); }
.mo-watch { width: min(44vw, 190px); height: auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.6)); }
.mo-watch .w-hand { transform-origin: 0 0; }
.mo-watch.run .w-hand { animation: mo-hand 1.1s cubic-bezier(.1,.75,.25,1) forwards; }
@keyframes mo-hand { to { transform: rotate(1080deg); } }
.mo-watch.stop { animation: mo-watch-stop .3s cubic-bezier(.2,1.6,.4,1); }
@keyframes mo-watch-stop { 30% { transform: scale(1.06) rotate(-3deg); } 60% { transform: scale(.98) rotate(2deg); } }
.mo-digits { position: relative; font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: clamp(64px, 22vw, 128px); font-weight: 900; line-height: 1; letter-spacing: -.02em; color: #fff; }
.mo-digits span { display: block; }
.mo-digits span + span { position: absolute; inset: 0; }
.mo-digits span:first-child { clip-path: polygon(0 0, 100% 0, 100% 34%, 0 66%); }
.mo-digits span:last-child { clip-path: polygon(0 66%, 100% 34%, 100% 100%, 0 100%); }
.mo-digits.crack { color: var(--danger); text-shadow: 0 0 30px rgba(255,77,79,.7); }
.mo-digits.crack span:first-child { animation: mo-crack-a .55s cubic-bezier(.2,.9,.3,1) forwards; }
.mo-digits.crack span:last-child { animation: mo-crack-b .55s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes mo-crack-a { to { transform: translate(-9px, -7px) rotate(-2.5deg); } }
@keyframes mo-crack-b { to { transform: translate(9px, 7px) rotate(2deg); } }
.mo-flag { position: absolute; inset: -12%; background: repeating-conic-gradient(#fff 0 25%, #0b0d10 0 50%) 0 0 / 54px 54px; opacity: 0; -webkit-mask: radial-gradient(ellipse at center, #000 20%, transparent 70%); mask: radial-gradient(ellipse at center, #000 20%, transparent 70%); }
.mo-flag.on { animation: mo-flag-in .5s ease-out forwards, mo-wave 1.4s ease-in-out .3s infinite; }
@keyframes mo-flag-in { to { opacity: .16; } }
@keyframes mo-wave { 0%, 100% { transform: skewY(-5deg) translateY(0); } 50% { transform: skewY(5deg) translateY(-12px); } }
/* Geo: Raster, Pin · Photo: Verschluss */
.mo-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(198,244,50,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(198,244,50,.09) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask: radial-gradient(circle, #000 25%, transparent 74%); mask: radial-gradient(circle, #000 25%, transparent 74%); }
.mo-pin { width: 92px; height: auto; transform: translateY(-120vh); filter: drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
.mo-pin.drop { animation: mo-drop .5s cubic-bezier(.55,0,1,.6) forwards, mo-bounce .5s ease-out .5s; }
@keyframes mo-drop { to { transform: translateY(0); } }
@keyframes mo-bounce { 0% { transform: translateY(0) scaleY(.82); } 35% { transform: translateY(-26px) scaleY(1.04); } 100% { transform: translateY(0); } }
.mo-center .mo-sonar { position: absolute; top: 56px; left: 50%; margin-left: -30px; }
.mo-shutter { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mo-shutter i { position: absolute; left: 0; right: 0; height: 51%; background: #0b0d10; box-shadow: 0 0 40px rgba(0,0,0,.8); transition: transform .3s cubic-bezier(.2,.9,.3,1); }
.mo-shutter i:first-child { top: 0; transform: translateY(-100%); }
.mo-shutter i:last-child { bottom: 0; transform: translateY(100%); }
.mo-shutter.close i { transform: translateY(0); transition-duration: .17s; transition-timing-function: ease-in; }
/* Infektion: roter Puls während der Flatline, Biohazard flackert vor dem Einschlag herein */
.mo-redpulse { position: absolute; inset: 0; z-index: 0; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(255,40,44,.32), rgba(120,6,10,.18) 45%, transparent 75%); }
.mo-redpulse.on { animation: mo-redpulse .55s ease-in-out infinite alternate; }
@keyframes mo-redpulse { from { opacity: .25; } to { opacity: 1; } }
.mo-bio.flick { animation: mo-bio-flick .28s steps(2) infinite; }
@keyframes mo-bio-flick { 0% { opacity: .18; transform: scale(1.12) translate(-4px, 0); filter: blur(2px); } 100% { opacity: .5; transform: scale(1.06) translate(4px, 1px); filter: blur(0); } }
.mo-ekg.gone { transition: opacity .5s; opacity: .15; }
.mo-word.cyan { color: #38bdf8; text-shadow: 0 0 36px rgba(56,189,248,.65), 0 0 90px rgba(56,189,248,.3); }
/* Manhunt: Fang für Sucher (Fadenkreuz wird limettengrün), Zone */
.mo.got .mo-reticle, .mo.got .mo-brackets i { stroke: var(--signal); border-color: var(--signal); }
.mo-zone { position: absolute; width: min(78vw, 360px); height: min(78vw, 360px); }
.mo-zone i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--danger); background: radial-gradient(circle, rgba(255,40,44,.05), rgba(255,40,44,.16)); box-shadow: 0 0 40px rgba(255,40,44,.35), inset 0 0 40px rgba(255,40,44,.2); transform: scale(1.5); opacity: 0; }
.mo-zone i + i { border-style: dashed; border-width: 2px; background: none; box-shadow: none; }
.mo-zone.on i:first-child { animation: mo-zone-in .9s cubic-bezier(.2,.9,.3,1) forwards, mo-zone-breathe 1.2s ease-in-out .9s infinite alternate; }
.mo-zone.on i + i { animation: mo-zone-ring 1.6s ease-out .3s infinite; }
@keyframes mo-zone-in { to { transform: scale(1); opacity: 1; } }
@keyframes mo-zone-breathe { from { transform: scale(1); } to { transform: scale(.94); } }
@keyframes mo-zone-ring { 0% { transform: scale(1.35); opacity: .9; } 100% { transform: scale(.9); opacity: 0; } }
.mo-me.mo-out { transform: translate(min(33vw, 153px), max(-33vw, -153px)); background: var(--danger); box-shadow: 0 0 22px var(--danger), 0 0 60px rgba(255,40,44,.6); animation: blink .5s steps(2) infinite; }
/* Among Us: Rundumleuchte, Notfallknopf, Sabotage, Sieger */
.mo-beacon { position: absolute; inset: -40%; opacity: 0; background: conic-gradient(from 0deg, rgba(255,30,36,.55), transparent 16%, transparent 50%, rgba(255,30,36,.55) 50%, transparent 66%, transparent); }
.mo-beacon.on { animation: mo-fade .3s ease-out forwards, mo-spin 1.1s linear infinite; }
.mo-ebtn { width: min(40vw, 170px); height: auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.6)); }
.mo-ebtn .cap { transform-box: fill-box; transform-origin: center; transition: transform .12s ease-in; }
.mo-ebtn.press .cap { transform: scale(.86); filter: brightness(1.3); }
.mo-center .mo-victim { margin-bottom: 18px; }
.mo-center .mo-victim .mo-bean { width: 96px; }
.mo-strobe { position: absolute; inset: 0; background: #ff1e24; opacity: 0; }
.mo-strobe.on { animation: mo-strobe .5s steps(1) infinite; }
@keyframes mo-strobe { 0% { opacity: .22; } 50% { opacity: 0; } }
.mo-hazard { position: absolute; left: -10%; right: -10%; height: 38px; background: repeating-linear-gradient(-45deg, #f5c400 0 22px, #14100a 22px 44px); box-shadow: 0 0 30px rgba(245,196,0,.35); opacity: 0; }
.mo-hazard.top { top: calc(10px + var(--safe-top, 0px)); }
.mo-hazard.bot { bottom: calc(10px + var(--safe-bottom, 0px)); }
.mo-hazard.on { animation: mo-fade .25s ease-out forwards, mo-hazard 1s linear infinite; }
@keyframes mo-hazard { to { background-position: 62px 0; } }
.mo-trefoil { width: min(38vw, 160px); height: auto; filter: drop-shadow(0 0 26px rgba(245,196,0,.55)); }
.mo-trefoil.run { animation: mo-slam .36s cubic-bezier(.1,.9,.2,1) both, mo-spin 3.2s linear .36s infinite; }
.mo-o2 { width: min(38vw, 160px); height: auto; filter: drop-shadow(0 0 22px rgba(56,189,248,.45)); }
.mo-o2 .o2-bg { fill: #0d141c; stroke: rgba(255,255,255,.12); stroke-width: 8; }
.mo-o2 .o2-ring { fill: none; stroke: #38bdf8; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 0; }
.mo-o2.run .o2-ring { animation: mo-o2 2.4s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes mo-o2 { 60% { stroke: #f5c400; } to { stroke-dashoffset: 290; stroke: var(--danger); } }
.mo-o2 text { fill: #fff; font: 900 34px var(--sans, sans-serif); }
.mo-winners { position: absolute; top: 22%; display: flex; gap: 14px; align-items: flex-end; }
.mo-winners.crew .mo-bean { width: 54px; animation: mo-hop .5s cubic-bezier(.3,0,.5,1) infinite alternate; }
.mo-winners .h1 { animation-delay: .1s !important; } .mo-winners .h2 { animation-delay: .2s !important; } .mo-winners .h3 { animation-delay: .3s !important; } .mo-winners .h4 { animation-delay: .4s !important; }
@keyframes mo-hop { from { transform: translateY(0); } to { transform: translateY(-22px); } }
.mo-winners.imps .mo-bean { width: 110px; filter: drop-shadow(0 0 30px rgba(197,17,17,.7)); }
.mo-winners.imps .i2 { width: 90px; margin-left: -30px; opacity: .8; }
/* Outbreak: Patient Zero, Shield, Ende */
.mo-zero { position: absolute; top: 18%; width: min(52vw, 220px); height: min(52vw, 220px); display: grid; place-items: center; }
.mo-zero .z-ring { position: absolute; inset: 0; border-radius: 50%; border: 4px solid #e6edf5; box-shadow: 0 0 34px rgba(230,237,245,.45); opacity: 0; transform: scale(.7); transition: transform .6s cubic-bezier(.2,.9,.3,1), opacity .6s; }
.mo-zero.on .z-ring { opacity: 1; transform: none; }
.mo-zero.crack .z-ring { border-color: var(--danger); border-style: dashed; box-shadow: 0 0 40px rgba(255,40,44,.6); transform: scale(1.25); opacity: 0; transition-duration: .9s; }
.mo-zero .z-bio { position: absolute; width: 74%; height: 74%; opacity: 0; transform: scale(.3) rotate(-90deg); }
.mo-zero.crack .z-bio { opacity: 1; transform: none; transition: transform .7s cubic-bezier(.2,1.2,.4,1), opacity .3s; animation: mo-spin 9s linear .7s infinite; }
.mo-hex { position: absolute; top: 20%; width: min(48vw, 210px); height: auto; fill: rgba(56,189,248,.08); stroke: #38bdf8; stroke-width: 3; filter: drop-shadow(0 0 22px rgba(56,189,248,.6)); opacity: 0; transform: scale(.5); }
.mo-hex .in { fill: none; stroke-width: 1.5; stroke-opacity: .6; }
.mo-hex.on { animation: mo-slam .45s cubic-bezier(.1,.9,.2,1) forwards; }
.mo-hex.hit { opacity: 1; transform: none; animation: mo-hex-hit .45s ease-out; fill: rgba(56,189,248,.35); }
@keyframes mo-hex-hit { 0% { transform: scale(1.12); filter: drop-shadow(0 0 50px #38bdf8) brightness(1.8); } 100% { transform: none; } }
.mo-strike { position: absolute; top: calc(20% + min(24vw, 105px)); left: 0; width: 46vw; height: 6px; margin-top: -3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--danger)); box-shadow: 0 0 20px var(--danger); transform: translateX(-100%); opacity: 0; }
.mo-strike.on { animation: mo-strike .3s cubic-bezier(.6,0,1,.6) forwards; }
@keyframes mo-strike { 0% { opacity: 1; transform: translateX(-100%); } 80% { opacity: 1; transform: translateX(calc(50vw - min(24vw, 105px) - 46vw + 10px)); } 100% { opacity: 0; transform: translateX(calc(50vw - min(24vw, 105px) - 46vw - 50px)) scaleX(.3); } }
.mo-ripple { position: absolute; top: calc(20% + min(24vw, 105px)); left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid #38bdf8; opacity: 0; }
.mo-ripple.on { animation: mo-ripple .8s ease-out forwards; }
@keyframes mo-ripple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(9); } }
/* Finale: Etappen-Leiste */
.mo-steps { position: relative; display: flex; justify-content: space-between; align-items: center; width: min(84vw, 420px); margin: 8px 0 14px; opacity: 0; }
.mo-steps.on { animation: mo-fade .35s ease-out forwards; }
.mo-steps::before, .mo-steps b { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(255,255,255,.14); }
.mo-steps b { right: auto; width: calc((100% - 18px) * (var(--k, 0))); background: var(--signal); box-shadow: 0 0 12px rgba(198,244,50,.6); transition: width .45s cubic-bezier(.2,.9,.3,1); }
.mo-steps i { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: #1a1f26; border: 3px solid rgba(255,255,255,.22); }
.mo-steps i.done { background: var(--signal); border-color: var(--signal); }
.mo-steps.fill i.now { background: var(--signal); border-color: #fff; animation: mo-step-pop .5s cubic-bezier(.2,1.6,.4,1); box-shadow: 0 0 0 0 rgba(198,244,50,.7), 0 0 18px rgba(198,244,50,.8); }
@keyframes mo-step-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.7); } 100% { transform: scale(1); } }
/* Geo: Zielscheibe · Photo: Polaroid mit Stempel */
.mo-target { position: absolute; width: min(70vw, 300px); height: min(70vw, 300px); }
.mo-target i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(198,244,50,.55); opacity: 0; transform: scale(.2); }
.mo-target i:nth-child(2) { inset: 20%; } .mo-target i:nth-child(3) { inset: 40%; background: rgba(198,244,50,.18); }
.mo-target.on i { animation: mo-target-in .6s cubic-bezier(.2,1.2,.4,1) forwards; }
.mo-target.on i:nth-child(2) { animation-delay: .08s; } .mo-target.on i:nth-child(3) { animation-delay: .16s; }
@keyframes mo-target-in { to { opacity: 1; transform: none; } }
.mo-target .mo-pin { position: absolute; left: 50%; bottom: 50%; width: 80px; margin-left: -40px; }
.mo-center.mo-geo-txt { margin-top: calc(min(70vw, 300px) + 80px); }
.mo-sub.mo-bonus { color: var(--signal); font-family: var(--mono); letter-spacing: .18em; text-transform: uppercase; font-size: 14px; }
.mo-target.hit i { animation: none; opacity: 1; transform: none; border-color: var(--signal); box-shadow: 0 0 24px rgba(198,244,50,.5); }
.mo-polaroid { position: relative; width: min(64vw, 260px); padding: 12px 12px 0; background: #f4f1ea; border-radius: 4px; box-shadow: 0 30px 70px rgba(0,0,0,.7); transform: rotate(-4deg); }
.mo-polaroid.drop { animation: mo-pol-drop .5s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes mo-pol-drop { from { opacity: 0; transform: translateY(-60vh) rotate(18deg); } to { opacity: 1; transform: rotate(-4deg); } }
.mo-polaroid .pl-img { aspect-ratio: 1; background: radial-gradient(circle at 30% 30%, #4b5b70, #1d242e 70%); border-radius: 2px; }
.mo-polaroid .pl-cap { min-height: 52px; padding: 10px 4px; color: #2a2a2a; font-weight: 800; font-size: 15px; line-height: 1.25; display: flex; align-items: center; justify-content: center; text-align: center; }
.mo-stamp { position: absolute; left: 50%; top: 40%; padding: 6px 16px; border: 5px solid; border-radius: 10px; font-size: clamp(24px, 8vw, 38px); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.06); opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(3); white-space: nowrap; }
.mo-stamp.ok { color: #18b45b; border-color: #18b45b; }
.mo-stamp.no { color: #e5262c; border-color: #e5262c; }
.mo-stamp.on { animation: mo-stamp .22s cubic-bezier(.5,0,.8,.4) forwards; }
@keyframes mo-stamp { to { opacity: .95; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } }
/* Vollbild-Meldung wartet, bis der Moment vorbei ist */
#overlay.ov-wait { animation: none; }
#overlay.ov-wait .ov-card { visibility: hidden; animation: none; }

/* ---------- Minigames (Reiter, Blätter, Snake, Tetris, Block Blast) ---------- */
.wl-games { grid-column: 1 / -1; gap: 10px; }
.wl-games svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mg-section { margin: 18px 0 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mg-game { padding: 0; overflow: hidden; }
.mg-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; background: none; border: 0; text-align: left; color: inherit; }
.mg-head:not(.static):active { background: var(--panel-2); }
.mg-icon { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--panel-2); color: var(--signal); }
.mg-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mg-icon.snake { color: #c6f432; background: rgba(198,244,50,.12); }
.mg-icon.tetris { color: #22d3ee; background: rgba(34,211,238,.12); }
.mg-icon.blast { color: #ff4d8d; background: rgba(255,77,141,.12); }
.mg-icon.uno { color: #ffb020; background: rgba(255,176,32,.12); }
.mg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mg-txt b { font-size: 17px; font-weight: 900; }
.mg-txt small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.mg-best { flex: none; text-align: right; font-family: var(--mono); font-weight: 800; font-size: 20px; display: flex; flex-direction: column; align-items: flex-end; }
.mg-best small { font-family: var(--sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.mg-top { border-top: 1px solid var(--line); padding: 0 16px; }
.mg-top summary { padding: 10px 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.mg-top summary::after { content: "▾"; }
.mg-top[open] summary::after { content: "▴"; }
.mg-top ol { margin: 0; padding: 0 0 10px 0; list-style: none; counter-reset: top; }
.mg-top li { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-weight: 700; counter-increment: top; }
.mg-top li span { display: flex; align-items: center; gap: 8px; }
.mg-top li span::before { content: counter(top); font-family: var(--mono); color: var(--muted); width: 18px; }
.mg-top li i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.mg-top li b { font-family: var(--mono); }
.mg-top li.me { color: var(--signal); }
.mg-rooms { padding: 0 16px 16px; }
.mg-roomrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.mg-roomrow > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mg-roomrow small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-roomrow .btn { padding: 10px 14px; font-size: 12px; flex: none; }
.mg-rooms .btn.block { margin-top: 12px; }
.mg-room-banner { border-color: #4a3d12; background: #1d1a0e; }
.mg-room-banner .btn { padding: 10px 14px; font-size: 12px; }

.mg-sheet { position: fixed; inset: 0; z-index: 45; background: radial-gradient(120% 80% at 50% 0%, #1b2430 0%, #0b0e12 70%); display: flex; flex-direction: column; align-items: center; padding: calc(24px + var(--safe-top)) 14px calc(14px + var(--safe-bottom)); overflow-y: auto; animation: rise .25s ease-out; }
.mg-sheet.out { animation: tg-out .2s ease-in forwards; }
.mg-sheet-head { width: 100%; max-width: 440px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex: none; }
.mg-sheet-head > div:first-child { flex: 1; min-width: 0; }
.mg-score { text-align: right; font-family: var(--mono); font-weight: 800; font-size: 22px; line-height: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.mg-score small { font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mg-body { position: relative; width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; flex: 1; }
.mg-stage { position: relative; width: min(100%, 340px); border-radius: 16px; background: #12161b; border: 2px solid #343c47; box-shadow: inset 0 0 0 3px #0b0d10, 0 18px 40px rgba(0,0,0,.45); overflow: hidden; }
.mg-stage.flash { animation: mg-flash .3s; }
@keyframes mg-flash { 0% { box-shadow: inset 0 0 0 3px #0b0d10, 0 0 0 0 rgba(198,244,50,0); } 40% { box-shadow: inset 0 0 0 3px #c6f432, 0 0 40px rgba(198,244,50,.5); } }
.mg-canvas { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.mg-pad { display: grid; grid-template-columns: repeat(3, 64px); grid-template-areas: ". up ." "left down right"; gap: 8px; margin-top: 14px; }
.mg-pad button { width: 64px; height: 56px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 20px; touch-action: none; user-select: none; -webkit-user-select: none; }
.mg-pad button:active { background: var(--panel-2); transform: scale(.96); }
.mg-pad button[data-d="up"] { grid-area: up; }
.mg-pad button[data-d="left"] { grid-area: left; }
.mg-pad button[data-d="down"] { grid-area: down; }
.mg-pad button[data-d="right"] { grid-area: right; }
.mg-pad.tetris { grid-template-columns: repeat(5, 1fr); grid-template-areas: none; width: 100%; max-width: 360px; }
.mg-pad.tetris button { width: 100%; grid-area: auto; }
.mg-pad.tetris button[data-k="rotate"], .mg-pad.tetris button[data-k="drop"] { color: var(--signal); }
.mg-tetris { display: flex; gap: 12px; width: 100%; justify-content: center; align-items: flex-start; }
.mg-stage.tall { width: min(60vw, 230px); aspect-ratio: 1 / 2; }
.mg-stage.tall canvas { width: 100%; height: 100%; }
.mg-side { display: flex; flex-direction: column; gap: 10px; width: 92px; }
.mg-next, .mg-info > div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mg-next small, .mg-info small { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mg-next-canvas { width: 68px; height: 34px; display: block; }
.mg-info { display: flex; flex-direction: column; gap: 10px; }
.mg-info b { font-family: var(--mono); font-size: 20px; }
.mg-tray { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(100%, 340px); margin-top: 14px; touch-action: none; }
.mg-slot { height: 78px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; }
.mg-slot.stuck { opacity: .35; }
.mg-slot.lifted .mg-mini { opacity: .25; }
.mg-mini { position: relative; }
.mg-mini i, .mg-ghost i { position: absolute; border-radius: 3px; }
.mg-ghost { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; filter: drop-shadow(0 12px 16px rgba(0,0,0,.5)); }
.mg-over, .mg-pause { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5,7,10,.72); backdrop-filter: blur(6px); animation: ov-bg .25s ease-out both; }
.mg-over-card { width: 100%; max-width: 320px; text-align: center; padding: 24px 18px; border-radius: 22px; background: linear-gradient(165deg, #1c222b, #12161c 60%, #0f1216); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 30px 80px rgba(0,0,0,.65); animation: ov-pop .42s cubic-bezier(.2,1.4,.4,1) both; }
.mg-over-card .ov-title { font-size: 28px; font-weight: 900; margin: 4px 0 8px; }
.mg-over-card .btn + .btn { margin-top: 10px; }
.mg-over-score { font-family: var(--mono); font-size: 56px; font-weight: 800; line-height: 1; color: var(--signal); margin: 6px 0 10px; }
.mg-over-card p { margin: 0 0 18px; font-size: 15px; }

/* ---------- Uno ---------- */
.uno-sheet .mg-body { max-width: 480px; }
.uno-lobby, .uno-result { width: 100%; }
.uno-rules { margin-top: 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.uno-rules summary { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; cursor: pointer; }
.uno-scores { margin: 8px 0 0; font-size: 15px; }
.ov-card.good .uno-scores li { border-color: rgba(16,20,10,.2); }
.uc { position: relative; flex: none; width: 58px; height: 86px; border-radius: 9px; background: #e9edf2; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 0 0 3px #f6f8fa; font-weight: 900; user-select: none; -webkit-user-select: none; }
.uc-r { background: #e8252b; } .uc-g { background: #27a84a; } .uc-b { background: #1f6fe8; } .uc-y { background: #f6c000; } .uc-w { background: #1b1f26; }
.uc-mid { width: 44px; height: 60px; border-radius: 50% / 50%; background: rgba(255,255,255,.22); transform: rotate(-22deg); display: grid; place-items: center; overflow: hidden; }
.uc-mid b { font-size: 26px; transform: rotate(22deg); text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.uc-wild { position: absolute; inset: 0; background: conic-gradient(#e8252b 0 25%, #1f6fe8 0 50%, #f6c000 0 75%, #27a84a 0); }
.uc-wild + b { position: relative; font-size: 20px; }
.uc-corner { position: absolute; left: 6px; top: 4px; font-size: 11px; }
.uc-corner.b { left: auto; right: 6px; top: auto; bottom: 4px; transform: rotate(180deg); }
.uc-back { background: repeating-linear-gradient(135deg, #1b1f26 0 6px, #2a313b 6px 12px); box-shadow: inset 0 0 0 3px #f6f8fa, 0 6px 14px rgba(0,0,0,.45); }
.uc-back::after { content: "UNO"; position: absolute; inset: 0; display: grid; place-items: center; color: #ffb020; font-size: 14px; letter-spacing: .05em; transform: rotate(-22deg); }
.uno-opps { display: flex; gap: 8px; width: 100%; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.uno-opps::-webkit-scrollbar { display: none; }
.uno-opp { flex: none; min-width: 96px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.uno-opp.turn { border-color: var(--signal); box-shadow: 0 0 0 2px rgba(198,244,50,.25); }
.uno-opp-name { font-weight: 800; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uno-opp-cards { display: flex; align-items: center; gap: 6px; }
.uno-count { font-family: var(--mono); font-size: 22px; font-weight: 800; }
.uno-count::after { content: "🂠"; font-size: 16px; margin-left: 3px; opacity: .6; }
.uno-badge { background: var(--danger); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .1em; padding: 2px 6px; border-radius: 999px; }
.uno-catch { padding: 8px 10px; font-size: 11px; margin-top: 2px; animation: pulse 1s infinite; }
.uno-table { display: flex; align-items: center; justify-content: center; gap: 22px; width: 100%; padding: 14px 0 8px; }
.uno-pile { position: relative; background: none; border: 0; padding: 0; }
.uno-pile:disabled { opacity: .45; }
.uno-pile:not(:disabled) .uc { animation: pulse 1.6s infinite; }
.uno-pile small { position: absolute; right: -6px; top: -6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: 11px; font-weight: 800; padding: 2px 7px; }
.uno-top { position: relative; }
.uno-top .uc { width: 72px; height: 106px; }
.uno-top .uc .uc-mid { width: 54px; height: 74px; }
.uno-top .uc .uc-mid b { font-size: 32px; }
.uno-color { position: absolute; right: -10px; bottom: -10px; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #0b0e12; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.c-r { background: #e8252b; } .c-g { background: #27a84a; } .c-b { background: #1f6fe8; } .c-y { background: #f6c000; }
.uno-dir { font-size: 30px; color: var(--muted); width: 40px; text-align: center; }
.uno-dir.rev { color: var(--warn); }
.uno-status { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 8px; font-weight: 800; text-align: center; }
.uno-status.mine { border-color: var(--signal); color: var(--signal); }
.uno-timer { height: 4px; border-radius: 2px; background: var(--line); margin-top: 8px; overflow: hidden; }
.uno-timer i { display: block; height: 100%; width: 100%; background: var(--signal); transition: width .5s linear; }
.uno-timer i.low { background: var(--danger); }
.uno-pick { width: 100%; margin-top: 12px; text-align: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; animation: rise .2s ease-out; }
.uno-pick-row { display: flex; justify-content: center; gap: 12px; margin: 6px 0 10px; }
.uno-pick-btn { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.4); }
.uno-pick-btn:active { transform: scale(.92); }
.uno-hand { display: flex; gap: 8px; width: 100%; overflow-x: auto; padding: 18px 8px 12px; margin-top: 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; min-height: 120px; }
.uno-hand .uc { scroll-snap-align: center; transition: transform .15s, opacity .15s; }
.uno-hand .uc.ok { transform: translateY(-10px); box-shadow: 0 10px 22px rgba(0,0,0,.5), 0 0 0 3px var(--signal), inset 0 0 0 3px #f6f8fa; }
.uno-hand .uc.dim { opacity: .55; }
.uno-hand .uc.drawn { box-shadow: 0 10px 22px rgba(0,0,0,.5), 0 0 0 3px var(--warn), inset 0 0 0 3px #f6f8fa; }
.uno-hand .uc.shake { animation: shake .4s; }
.uno-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; margin-top: 6px; }
.uno-actions .btn { padding: 12px 16px; font-size: 13px; }
.uno-btn { background: var(--danger); color: #fff; font-size: 16px; animation: pulse 1.2s infinite; }

/* ---------- Punkteverlauf, Beiträge ---------- */
.seg { display: inline-flex; background: var(--panel-2); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; cursor: pointer; }
.seg button.on { background: var(--signal); color: var(--signal-ink); }
.hist-head { flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.hist-group { margin-top: 14px; }
.hist-title { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.hist-title span { font-weight: 600; letter-spacing: .04em; opacity: .75; }
.hist-item { display: grid; grid-template-columns: 42px 10px 1fr; gap: 10px; align-items: start; padding: 10px 6px; border-bottom: 1px solid var(--line); border-radius: 8px; }
.hist-item:last-child { border-bottom: 0; }
.hi-time { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 2px; }
.hi-dot { width: 10px; height: 10px; border-radius: 3px; margin-top: 5px; }
.hi-text { line-height: 1.35; font-size: 15px; word-break: break-word; }
.hi-pts { font-family: var(--mono); font-weight: 800; margin-right: 4px; color: var(--ok); }
.hist-item.neg .hi-pts { color: var(--danger); }
.hi-body small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.hist-item.mine { background: rgba(198,244,50,.06); box-shadow: inset 3px 0 0 var(--signal); }
.hist-item.new { animation: histNew 3.4s ease-out; }
@keyframes histNew { 0% { background: rgba(198,244,50,.45); } 100% { background: rgba(198,244,50,0); } }
@media (prefers-reduced-motion: reduce) { .hist-item.new { animation: none; background: rgba(198,244,50,.16); } }
.contrib li { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(40px, 90px) 52px; gap: 10px; align-items: center; }
.contrib li.me .c-name { color: var(--signal); font-weight: 800; }
.c-bar { height: 6px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.c-bar i { display: block; height: 100%; background: var(--team); border-radius: 4px; }
.c-pts { font-family: var(--mono); text-align: right; }
.c-pts.neg { color: var(--danger); }

/* ---------- Auszeichnungen (Siegerehrung) ---------- */
.mo-aw-glow { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 70% 50% at 50% 45%, color-mix(in srgb, var(--aw) 38%, transparent), transparent 70%); }
.mo-aw-emoji { font-size: clamp(84px, 30vw, 170px); line-height: 1; filter: drop-shadow(0 8px 28px rgba(0,0,0,.6)); }
.mo-aw-name { font-size: clamp(32px, 10vw, 60px); font-weight: 900; line-height: 1.05; letter-spacing: -.01em; text-shadow: 0 0 34px currentColor; word-break: break-word; }
.mo-aw-team { font-size: 13px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: -4px; }
.mo-aw-me { color: var(--signal); }
.aw-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.aw-list li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.aw-list li.me { box-shadow: inset 3px 0 0 var(--signal); background: rgba(198,244,50,.08); }
.aw-e { font-size: 32px; line-height: 1; flex: none; }
.aw-who { display: flex; align-items: center; gap: 7px; font-weight: 700; margin-top: 2px; }
.aw-who i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.aw-list small { display: block; color: var(--muted); margin-top: 2px; font-size: 13px; }
.ov-card .aw-list { color: var(--text); max-height: 46vh; overflow: auto; }
.aw-replay { padding: 8px 12px; font-size: 12px; }

/* ---------- Rückblick ---------- */
.review-cta { margin-bottom: 14px; }
.review { position: fixed; inset: 0; z-index: 47; background: radial-gradient(120% 60% at 50% 0%, #17202b 0%, var(--bg) 60%); display: flex; flex-direction: column; animation: rise .25s ease-out both; }
.rv-top { display: flex; align-items: center; gap: 10px; padding: calc(24px + var(--safe-top)) 14px 10px; border-bottom: 1px solid var(--line); font-size: 17px; }
.rv-sp { flex: 1; }
.rv-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--panel-2); font-size: 18px; cursor: pointer; }
.rv-sharebtn { padding: 8px 14px; font-size: 12px; }
.rv-body { flex: 1; overflow-y: auto; padding: 14px 14px calc(30px + var(--safe-bottom)); max-width: 640px; width: 100%; margin: 0 auto; }
.rv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: baseline; }
.rv-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rv-photo { margin: 0; background: var(--panel-2); border-radius: 12px; overflow: hidden; border: 2px solid transparent; }
.rv-photo.mine { border-color: var(--signal); }
.rv-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #222; }
.rv-photo figcaption { padding: 8px 10px 10px; font-size: 13px; line-height: 1.35; }
.rv-save { display: block; width: 100%; margin-top: 8px; padding: 8px 6px; font-size: 11px; }
@media (max-width: 380px) { .rv-photos { grid-template-columns: 1fr; } }
html.rv-open, html.rv-open body { overflow: hidden; }

/* ---------- Hilferuf ---------- */
.top-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
.top-actions .conn { margin-left: 0; }
.sos { border: 1px solid rgba(255,77,79,.55); background: rgba(255,77,79,.12); color: #fff; border-radius: 999px; min-width: 38px; height: 32px; padding: 0 9px; font-size: 16px; line-height: 1; cursor: pointer; }
.sos.on { background: var(--danger); border-color: var(--danger); animation: sos-pulse 1.4s ease-out infinite; }
@keyframes sos-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,79,.7); } 100% { box-shadow: 0 0 0 14px rgba(255,77,79,0); } }
@media (prefers-reduced-motion: reduce) { .sos.on { animation: none; } }
.help-card { border-color: rgba(255,77,79,.35); }
.help-link { color: #ff9a9b; border-color: rgba(255,77,79,.45); }
.help-sheet { position: fixed; inset: 0; z-index: 49; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% 0%, #2a1214 0%, var(--bg) 62%); animation: rise .25s ease-out both; }
.hs-top { display: flex; align-items: center; justify-content: space-between; padding: calc(24px + var(--safe-top)) 14px 10px; border-bottom: 1px solid var(--line); font-size: 17px; }
.hs-body { flex: 1; overflow-y: auto; padding: 16px 16px calc(28px + var(--safe-bottom)); max-width: 560px; width: 100%; margin: 0 auto; }
.hs-lead { margin: 0 0 14px; line-height: 1.45; }
.hs-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.hs-kind { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel); color: var(--text); font-weight: 800; font-size: 15px; cursor: pointer; }
.hs-kind span { font-size: 30px; line-height: 1; }
.hs-kind.on { border-color: var(--danger); background: rgba(255,77,79,.16); }
.hs-text { display: block; font-weight: 700; margin-bottom: 16px; }
.hs-text textarea { display: block; width: 100%; margin-top: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-weight: 400; resize: vertical; }
.hs-text small { display: block; text-align: right; margin-top: 4px; font-weight: 400; }
.help-hold { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; border: 2px solid var(--danger); border-radius: 18px; padding: 22px 16px; background: #35100f; color: #fff; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.help-hold b, .help-hold small { position: relative; z-index: 1; }
.help-hold b { font-size: 22px; letter-spacing: .04em; }
.help-hold small { opacity: .8; font-size: 13px; }
.hh-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--danger); transition: width .15s ease-out; }
.help-hold.holding .hh-fill { width: 100%; transition: width 2s linear; }
.help-hold.shake { animation: hs-shake .35s linear; }
@keyframes hs-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.hs-note { margin: 12px 0 0; font-size: 13px; line-height: 1.4; text-align: center; }
.hs-sent { text-align: center; }
.hs-sent .btn { margin-top: 10px; }
.hs-big { font-size: 56px; line-height: 1; margin-top: 8px; }
.hs-sent h2 { margin: 8px 0 4px; font-size: 26px; }
.hs-time { margin: 0 0 10px; color: var(--muted); font-weight: 700; }
.hs-quote { margin: 0 0 10px; font-style: italic; }
.hs-busy { text-align: center; padding-top: 18vh; }
.hs-spin { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; border: 5px solid rgba(255,77,79,.25); border-top-color: var(--danger); animation: hs-spin .9s linear infinite; }
@keyframes hs-spin { to { transform: rotate(360deg); } }

/* ---------- Nachrichten ---------- */
.msgbtn { position: relative; border: 1px solid var(--line); background: var(--panel-2); color: #fff; border-radius: 999px; min-width: 38px; height: 32px; padding: 0 9px; font-size: 16px; line-height: 1; cursor: pointer; }
.msgbtn .badge { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.msg-line { margin: -6px 0 10px; text-align: right; }
.message .msg-all { display: block; margin-top: 8px; }
.msg-sheet { position: fixed; inset: 0; z-index: 49; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% 0%, #17202b 0%, var(--bg) 62%); animation: rise .25s ease-out both; }
.ms-list { flex: 1; overflow-y: auto; padding: 14px 14px 8px; max-width: 560px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.ms-empty { margin: auto; text-align: center; line-height: 1.5; }
.mb { align-self: flex-start; max-width: 86%; background: var(--panel); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 10px 12px; }
.mb.mine { align-self: flex-end; background: rgba(198,244,50,.12); border-color: rgba(198,244,50,.3); border-radius: 16px 16px 4px 16px; }
.mb-text { white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
.mb small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.ms-form { display: flex; gap: 8px; align-items: flex-end; max-width: 560px; width: 100%; margin: 0 auto; padding: 8px 14px calc(12px + var(--safe-bottom)); border-top: 1px solid var(--line); background: rgba(13,15,18,.9); }
.ms-form textarea { flex: 1; resize: none; min-height: 44px; max-height: 120px; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; }
.ms-form .btn { padding: 12px 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Spielanleitung beim Spielstart (intro.js) ---------- */
.gi-sheet { position: fixed; inset: 0; z-index: 49; display: flex; flex-direction: column; background: radial-gradient(130% 70% at 50% 0%, #1a2210 0%, var(--bg) 60%); animation: rise .25s ease-out both; }
.gi-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(24px + var(--safe-top)) 20px 6px; }
.gi-top small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2px; }
.gi-top b { font-size: 22px; letter-spacing: .01em; }
.gi-skip { background: none; border: 0; color: var(--muted); font: inherit; font-size: 15px; padding: 10px 4px; }
.gi-slide { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px 26px; min-height: 0; }
.gi-slide.in .gi-stage { animation: gi-stage .45s cubic-bezier(.2,.8,.2,1) both; }
.gi-slide.in h2, .gi-slide.in p { animation: gi-text .45s .08s cubic-bezier(.2,.8,.2,1) both; }
@keyframes gi-stage { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes gi-text { from { opacity: 0; transform: translateY(10px); } }
.gi-stage { width: min(100%, 380px); margin-bottom: 26px; filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }
.gi-slide h2 { margin: 0 0 10px; font-size: 26px; letter-spacing: -.01em; }
.gi-slide p { margin: 0; max-width: 400px; font-size: 17px; line-height: 1.55; color: #c9d1d9; }
.gi-foot { padding: 10px 20px calc(18px + var(--safe-bottom)); display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.gi-dots { display: flex; gap: 6px; }
.gi-dots i { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.18); transition: width .3s, background .3s; }
.gi-dots i.done { background: rgba(198,244,50,.45); }
.gi-dots i.on { background: var(--signal); width: 26px; }
.gi-count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.gi-btns { grid-column: 1 / -1; display: grid; }
.gi-btns .btn { padding: 15px; font-size: 16px; }

/* Illustrationen (SVG 320 × 200): Linien in Signalgrün, Teams in Blau/Rot, ruhige Endlos-Animationen */
.gi-art { display: block; width: 100%; height: auto; overflow: visible; }
.gi-art * { transform-box: fill-box; transform-origin: center; }
.gi-art text { font-family: var(--sans); text-anchor: middle; }
.a-bg { fill: #10151c; stroke: #232b35; stroke-width: 1.5; }
.a-grid { stroke: #1a212a; stroke-width: 1; fill: none; }
.a-blue { fill: #3b82f6; } .a-red { fill: #ff4d4f; }
.a-lbl { font-size: 11px; font-weight: 800; letter-spacing: .16em; } .a-lbl-blue { fill: #6ea2f8; } .a-lbl-red { fill: #ff7a7c; }
.a-small { font-size: 11px; font-weight: 800; letter-spacing: .14em; fill: #8b95a3; } .a-redtxt { fill: #ff7a7c; }
.a-big { font-size: 40px; font-weight: 900; fill: #f2f4f7; font-variant-numeric: tabular-nums; }
.a-chev { fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; animation: a-blink 1.4s ease-in-out infinite; }
@keyframes a-blink { 50% { opacity: .25; } }
.a-ring { fill: none; stroke: var(--signal); stroke-width: 2; animation: a-ring 2.4s ease-out infinite; }
.a-ring.d2 { animation-delay: 1.2s; } .a-ringr { stroke: #ff4d4f; }
@keyframes a-ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.a-dotb { fill: #3b82f6; stroke: #10151c; stroke-width: 3; }
.a-dash { fill: none; stroke: #ff4d4f; stroke-width: 2; stroke-dasharray: 5 6; animation: a-march 1s linear infinite; }
@keyframes a-march { to { stroke-dashoffset: -22; } }
.a-clock { fill: #10151c; stroke: #2a313b; stroke-width: 3; }
.a-clockarc { fill: none; stroke: var(--signal); stroke-width: 3; stroke-dasharray: 100; transform: rotate(-90deg); animation: a-arc 4s linear infinite; }
@keyframes a-arc { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100; } }
.a-hand { stroke: #f2f4f7; stroke-width: 2.5; stroke-linecap: round; transform-box: view-box; transform-origin: 0 0; animation: a-spin 4s linear infinite; }
@keyframes a-spin { to { transform: rotate(360deg); } }
.a-phone { fill: #0b0f14; stroke: #3a4350; stroke-width: 2.5; } .a-notch { fill: #2a313b; }
.a-box { fill: #161c24; stroke: #2f3844; stroke-width: 1.5; }
.a-digit { font-size: 15px; font-weight: 800; fill: #f2f4f7; font-family: var(--mono); opacity: 0; animation: a-type 3s infinite; } .a-digitl { fill: var(--signal); }
@keyframes a-type { 0%, 8% { opacity: 0; transform: translateY(4px); } 14%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.a-qr rect { fill: #e9edf1; }
.a-scanbox { fill: none; stroke: var(--signal); stroke-width: 2.5; stroke-dasharray: 22 8; }
.a-scanline { fill: var(--signal); opacity: .9; animation: a-scan 2.2s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(198,244,50,.8)); }
.a-scanr { fill: #ff4d4f; filter: drop-shadow(0 0 6px rgba(255,77,79,.8)); }
@keyframes a-scan { 50% { transform: translateY(84px); } }
.a-zone { fill: rgba(198,244,50,.06); stroke: var(--signal); stroke-width: 2.5; stroke-dasharray: 8 7; animation: a-shrink 4s ease-in-out infinite; }
@keyframes a-shrink { 50% { transform: scale(.72); } }
.a-out { fill: #ff4d4f; animation: a-blink .9s ease-in-out infinite; }
.a-bar { fill: #26303b; transform-origin: bottom; animation: a-grow 3s cubic-bezier(.2,.8,.2,1) infinite; } .a-barb { fill: var(--signal); }
.a-bar.b2 { animation-delay: .15s; } .a-bar.b3 { animation-delay: .3s; }
@keyframes a-grow { 0% { transform: scaleY(.1); } 35%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.1); } }
.a-plus { font-size: 22px; font-weight: 900; fill: var(--signal); animation: a-float 3s ease-out infinite; }
@keyframes a-float { 0%, 25% { opacity: 0; transform: translateY(14px); } 45%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
.a-paper { fill: #f2f4f7; } .a-head { fill: #10151c; } .a-line { fill: #c3cad3; }
.a-card { animation: a-slide 3.2s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes a-slide { 0% { transform: translateX(-30px); opacity: 0; } 20%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.a-badge circle { fill: var(--signal); } .a-badge path { fill: none; stroke: #10140a; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.a-badge { animation: a-pop 3.2s cubic-bezier(.3,1.6,.5,1) infinite; }
@keyframes a-pop { 0%, 30% { transform: scale(0); } 42%, 85% { transform: scale(1); } 100% { transform: scale(0); } }
.a-corner { fill: none; stroke: #f2f4f7; stroke-width: 4; stroke-linecap: round; }
.a-focus { fill: none; stroke: var(--signal); stroke-width: 2.5; animation: a-focus 2.6s ease-in-out infinite; }
@keyframes a-focus { 0% { transform: scale(1.5); opacity: 0; } 30%, 70% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
.a-flash { fill: #fff; opacity: 0; animation: a-flash 2.6s ease-out infinite; }
@keyframes a-flash { 0%, 72% { opacity: 0; } 76% { opacity: .85; } 100% { opacity: 0; } }
.a-photo { fill: #1d2631; stroke: #3a4350; stroke-width: 2; } .a-mount { fill: #2e3b4a; } .a-sun { fill: #ffb020; }
.a-checkc { fill: none; stroke: var(--signal); stroke-width: 4; stroke-dasharray: 100; animation: a-draw 3s ease-out infinite; transform: rotate(-90deg); }
.a-check { fill: none; stroke: var(--signal); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: a-draw 3s .35s ease-out infinite; }
@keyframes a-draw { 0% { stroke-dashoffset: 100; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.a-pod { fill: #26303b; transform-origin: bottom; animation: a-grow 3.2s cubic-bezier(.2,.8,.2,1) infinite; } .a-podl { fill: var(--signal); }
.a-pod.p1 { animation-delay: .3s; } .a-pod.p3 { animation-delay: .15s; }
.a-num { font-size: 22px; font-weight: 900; fill: #8b95a3; } .a-numd { fill: #10140a; }
.a-pinq path { fill: #2a313b; stroke: var(--signal); stroke-width: 2; } .a-pinq .a-hole { fill: none; }
.a-q { font-size: 17px; font-weight: 900; fill: var(--signal); animation: a-blink 1.6s ease-in-out infinite; }
.a-pinl path { fill: var(--signal); } .a-hole { fill: #10151c; }
.a-dropg { animation: a-drop 2.8s cubic-bezier(.3,0,.3,1) infinite; }
@keyframes a-drop { 0% { transform: translateY(-70px); opacity: 0; } 30% { transform: none; opacity: 1; } 38% { transform: translateY(-8px); } 46%, 88% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.a-shadow { fill: rgba(0,0,0,.5); animation: a-shadow 2.8s cubic-bezier(.3,0,.3,1) infinite; }
@keyframes a-shadow { 0% { transform: scale(.2); } 30%, 88% { transform: scale(1); } }
.a-cross { stroke: #8b95a3; stroke-width: 2; }
.a-road { fill: none; stroke: #232c37; stroke-width: 10; stroke-linecap: round; }
.a-mapapp rect { fill: #1d2631; stroke: #3a4350; stroke-width: 2; } .a-mapapp path { fill: none; stroke: #8b95a3; stroke-width: 3; stroke-linejoin: round; }
.a-strike { stroke: #ff4d4f; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; animation: a-draw 2.6s ease-out infinite; }
.a-flag path:first-child { stroke: #f2f4f7; stroke-width: 3; stroke-linecap: round; } .a-flagc { fill: var(--signal); animation: a-wave 1.2s ease-in-out infinite; transform-origin: left center; }
@keyframes a-wave { 50% { transform: scaleX(.86) skewY(-4deg); } }
.a-meas { fill: none; stroke: var(--signal); stroke-width: 2.5; stroke-dasharray: 4 5; stroke-dasharray: 100; animation: a-draw 3s ease-out infinite; }
.a-tag rect { fill: var(--signal); } .a-tag text { font-size: 15px; font-weight: 900; fill: #10140a; } .a-tag { animation: a-pop 3s .6s cubic-bezier(.3,1.6,.5,1) infinite; }
.a-rcard { stroke-width: 2.5; } .a-rcrew { fill: #121d33; stroke: #3b82f6; } .a-rimp { fill: #2a1214; stroke: #ff4d4f; }
.a-rtxt { font-size: 13px; font-weight: 900; letter-spacing: .14em; fill: #6ea2f8; }
.a-flipa { animation: a-flipa 4s ease-in-out infinite; } .a-flipb { animation: a-flipb 4s ease-in-out infinite; }
@keyframes a-flipa { 0%, 40% { transform: scaleX(1); } 50%, 90% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes a-flipb { 0%, 50% { transform: scaleX(0); } 60%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.a-link { fill: none; stroke: #2a313b; stroke-width: 3; stroke-dasharray: 6 6; }
.a-st { fill: #161c24; stroke: #3a4350; stroke-width: 3; animation: a-st 4s infinite; }
.a-st.s2 { animation-delay: .5s; } .a-st.s3 { animation-delay: 1s; } .a-st.s4 { animation-delay: 1.5s; }
@keyframes a-st { 0%, 15% { fill: #161c24; stroke: #3a4350; } 25%, 85% { fill: var(--signal); stroke: var(--signal); } 100% { fill: #161c24; stroke: #3a4350; } }
.a-track { fill: #1d2631; }
.a-fill { fill: var(--signal); transform-origin: left; animation: a-fillx 4s ease-in-out infinite; }
@keyframes a-fillx { 0% { transform: scaleX(0); } 70%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.a-range { fill: rgba(255,77,79,.08); stroke: #ff4d4f; stroke-width: 2; stroke-dasharray: 6 6; animation: a-spin 12s linear infinite; }
.a-stalk { animation: a-stalk 3.6s ease-in-out infinite; }
@keyframes a-stalk { 50% { transform: translateX(70px); } }
.a-alert { fill: none; stroke: #ff4d4f; stroke-width: 2.5; opacity: 0; animation: a-alert 3.6s ease-in-out infinite; }
@keyframes a-alert { 0%, 30% { opacity: 0; transform: scale(.7); } 45%, 60% { opacity: 1; transform: scale(1); } 75%, 100% { opacity: 0; } }
.a-alarm { fill: #ff4d4f; animation: a-alarm 1s ease-in-out infinite; }
@keyframes a-alarm { 50% { fill: #7a1d1f; } }
.a-rays { stroke: #ff4d4f; stroke-width: 3; stroke-linecap: round; animation: a-blink 1s ease-in-out infinite; }
.a-vote rect { fill: #161c24; stroke: #3a4350; stroke-width: 2; } .a-vote path { fill: none; stroke: var(--signal); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.a-vote { animation: a-vote 3.6s infinite both; }
@keyframes a-vote { 0% { opacity: .35; transform: scale(.9); } 12%, 85% { opacity: 1; transform: none; } 100% { opacity: .35; } }
.a-ghost path { fill: rgba(242,244,247,.85); } .a-eye { fill: #10151c; }
.a-ghost { animation: a-ghost 3.4s ease-in-out infinite; }
@keyframes a-ghost { 0%, 100% { transform: translateY(6px); opacity: .95; } 50% { transform: translateY(-10px); opacity: .45; } }
.a-wave { fill: none; stroke: #2a313b; stroke-width: 3; stroke-linecap: round; }
.a-routebg { fill: none; stroke: #232c37; stroke-width: 8; stroke-linecap: round; }
.a-routefg { fill: none; stroke: var(--signal); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; animation: a-route 4s ease-in-out infinite; }
@keyframes a-route { 0% { stroke-dashoffset: 100; } 80%, 95% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
.a-cp { fill: #10151c; stroke: var(--signal); stroke-width: 3; }
.a-runner { fill: #f2f4f7; stroke: var(--signal); stroke-width: 3; animation: a-runner 4s ease-in-out infinite; }
@keyframes a-runner { 0% { transform: translate(0, 0); } 27% { transform: translate(80px, -60px); } 54% { transform: translate(170px, -100px); } 80%, 95% { transform: translate(244px, -108px); } 100% { transform: translate(0, 0); } }
.a-comp { fill: #10151c; stroke: #3a4350; stroke-width: 3; } .a-ticks { stroke: #8b95a3; stroke-width: 2; }
.a-needle { transform-origin: 120px 100px; transform-box: view-box; animation: a-needle 4s cubic-bezier(.5,0,.3,1.4) infinite; }
.a-needlef { fill: var(--signal); } .a-needleb { fill: #3a4350; } .a-hub { fill: #f2f4f7; }
@keyframes a-needle { 0% { transform: rotate(-70deg); } 30%, 100% { transform: rotate(38deg); } }
.a-lock { fill: #1d2631; stroke: var(--signal); stroke-width: 3; } .a-hole2 { fill: var(--signal); }
.a-shackle { fill: none; stroke: #8b95a3; stroke-width: 7; stroke-linecap: round; animation: a-shackle 3s ease-in-out infinite; }
@keyframes a-shackle { 0%, 45% { transform: none; stroke: #8b95a3; } 55%, 88% { transform: translateY(-10px); stroke: var(--signal); } 100% { transform: none; } }
.a-race { transform-origin: left; animation: a-race 4s cubic-bezier(.3,0,.2,1) infinite; }
.a-tb1 { fill: var(--signal); } .a-tb2 { fill: #3b82f6; animation-duration: 4.6s; } .a-tb3 { fill: #ff4d4f; animation-duration: 5.2s; }
@keyframes a-race { 0% { transform: scaleX(.05); } 75%, 92% { transform: scaleX(1); } 100% { transform: scaleX(.05); } }
.a-surv { fill: var(--signal); }
.a-turn { animation: a-turn 4s ease-in-out infinite; }
@keyframes a-turn { 0%, 35% { fill: var(--signal); } 45%, 90% { fill: #ff4d4f; } 100% { fill: var(--signal); } }
.a-zomb { fill: #ff4d4f; stroke: #10151c; stroke-width: 3; }
.a-heart { fill: #ff4d4f; animation: a-beat 1.1s ease-in-out infinite; }
@keyframes a-beat { 15% { transform: scale(1.12); } 30% { transform: scale(1); } }
.a-hp { fill: var(--signal); transform-origin: left; animation: a-hp 5s ease-in-out infinite; }
@keyframes a-hp { 0% { transform: scaleX(1); fill: var(--signal); } 55% { transform: scaleX(.22); fill: #ffb020; } 70% { transform: scaleX(.22); } 90%, 100% { transform: scaleX(1); fill: var(--signal); } }
.a-hz { fill: rgba(198,244,50,.1); stroke: var(--signal); stroke-width: 2.5; animation: a-hz 5s ease-in-out infinite; }
@keyframes a-hz { 55%, 85% { fill: rgba(198,244,50,.32); } }
.a-beam { stroke: #ff4d4f; stroke-width: 2.5; stroke-dasharray: 5 6; animation: a-march .8s linear infinite reverse; }
.a-ezone { fill: rgba(198,244,50,.05); stroke: var(--signal); stroke-width: 2.5; stroke-dasharray: 10 8; animation: a-spin 14s linear infinite; }
.a-ezone2 { fill: none; stroke: var(--signal); stroke-width: 1.5; opacity: .5; animation: a-ring 2.4s ease-out infinite; }
.a-chevin { fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; animation: a-blink 1.2s ease-in-out infinite; }
.a-enter { animation: a-enter 3.6s ease-in-out infinite; }
@keyframes a-enter { 0% { transform: none; } 60%, 90% { transform: translateX(140px); } 100% { transform: none; } }
.a-shield { fill: rgba(198,244,50,.06); stroke: var(--signal); stroke-width: 3.5; stroke-linejoin: round; }
.a-checks { animation-delay: .2s; }
.a-trophy { fill: none; stroke: var(--signal); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; animation: a-float2 3s ease-in-out infinite; }
@keyframes a-float2 { 50% { transform: translateY(-6px); } }
.a-spark { fill: var(--signal); animation: a-spark 2.4s ease-in-out infinite; } .a-spark.k2 { animation-delay: .6s; } .a-spark.k3 { animation-delay: 1.2s; }
@keyframes a-spark { 0%, 100% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.8); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .gi-sheet, .gi-slide.in .gi-stage, .gi-slide.in h2, .gi-slide.in p { animation: none; }
  .gi-art * { animation: none !important; }
  .a-digit { opacity: 1; } .a-flash { opacity: 0; }
}

/* Manhunt-Szene: Rot flieht, Ping, Blau fängt (eine gemeinsame Zeitachse von 7 s) */
.m-scene { animation: m-fade 7s linear infinite; }
@keyframes m-fade { 0% { opacity: 0; } 4%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
.m-red { animation: m-red 7s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes m-red { 0%, 5% { transform: none; } 34%, 100% { transform: translateX(100px); } }
.m-blue { animation: m-blue 7s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes m-blue { 0%, 9% { transform: none; } 34%, 52% { transform: translateX(52px); } 78%, 100% { transform: translateX(116px); } }
.m-ping { fill: rgba(198,244,50,.06); stroke: var(--signal); stroke-width: 2.5; opacity: 0; animation: m-ping 7s ease-out infinite; }
.m-ping.m2 { animation-delay: .5s; }
@keyframes m-ping { 0%, 35% { opacity: 0; transform: scale(.2); } 37% { opacity: 1; transform: scale(.2); } 50%, 100% { opacity: 0; transform: scale(1.25); } }
.m-tag rect { fill: var(--signal); } .m-tag text { font-size: 12px; font-weight: 900; letter-spacing: .14em; fill: #10140a; }
.m-pinglbl { opacity: 0; animation: m-lbl 7s ease-out infinite; }
@keyframes m-lbl { 0%, 36% { opacity: 0; transform: translateY(6px); } 40%, 56% { opacity: 1; transform: none; } 62%, 100% { opacity: 0; } }
.m-red .a-red { animation: m-grey 7s linear infinite; }
@keyframes m-grey { 0%, 79% { fill: #ff4d4f; } 82%, 100% { fill: #5b6470; } }
.m-scene .a-lbl { animation: m-lblout 7s linear infinite; }
@keyframes m-lblout { 0%, 58% { opacity: 1; } 66%, 100% { opacity: 0; } }
.m-burst { fill: none; stroke: #f2f4f7; stroke-width: 3; opacity: 0; animation: m-burst 7s ease-out infinite; }
@keyframes m-burst { 0%, 78% { opacity: 0; transform: scale(.3); } 80% { opacity: 1; transform: scale(.4); } 90%, 100% { opacity: 0; transform: scale(1.4); } }
.m-caught { opacity: 0; animation: m-caught 7s cubic-bezier(.3,1.6,.5,1) infinite; }
@keyframes m-caught { 0%, 80% { opacity: 0; transform: scale(.6); } 84%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.a-dotr { fill: #ff4d4f; stroke: #10151c; stroke-width: 3; } .a-dashb { stroke: #3b82f6; }
@media (prefers-reduced-motion: reduce) { .m-scene, .m-red, .m-blue { animation: none !important; } }