html, body { overflow: hidden; cursor: none; }
#bg { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#viewport { position: fixed; inset: 0; }
#stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform-origin: center; overflow: hidden;
}
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; mix-blend-mode: screen; z-index: 5; }
#unlock {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 20; cursor: pointer;
  font: 700 22px var(--font); padding: 16px 28px; border-radius: 999px; border: 2px solid #fff; background: #000c; color: #fff;
}
#offline {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 20; font: 28px var(--mono);
  background: #000c; padding: 6px 16px; border: 1px solid var(--bad); color: var(--bad); display: none;
}
html[data-online='0'] #offline { display: block; }
html[data-online='0'] body, #unlock:not([hidden]) ~ * { cursor: default; }

.layer, .sc { position: absolute; inset: 0; }
.sc { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; perspective: 1400px; }
.blackout { position: absolute; inset: -10px; background: #000; opacity: 0; transition: opacity .6s; pointer-events: none; z-index: 10; }
.blackout.on { opacity: 1; }
body:has(.blackout.on) #bg { opacity: 0; transition: opacity .6s; }

/* ---------- Laufbänder (kinetische Typo oben/unten) ---------- */
.bands { position: absolute; inset: 0; pointer-events: none; }
.band { position: absolute; left: -10%; width: 120%; overflow: hidden; white-space: nowrap; opacity: .55; }
.band.top { top: 26px; transform: rotate(-2deg); }
.band.bottom { bottom: 120px; transform: rotate(2deg); }
.band .track { display: inline-block; animation: band 40s linear infinite; }
.band.bottom .track { animation-direction: reverse; }
.band span {
  font: 900 64px/1 var(--font); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em;
  padding-right: 40px; color: var(--accent);
}
.band span.o { color: transparent; -webkit-text-stroke: 2px var(--accent); }
@keyframes band { to { transform: translateX(-50%); } }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; }
.hud.on { opacity: 1; }
.hud-logo {
  position: absolute; left: 56px; top: 120px; font: 900 34px var(--font); font-stretch: 125%;
  letter-spacing: .02em; color: #fff; text-shadow: 0 0 24px var(--accent);
}
.hud-badge {
  position: absolute; right: 56px; top: 116px; display: flex; gap: 0; border: 2px solid var(--accent);
  font: 800 26px var(--font); text-transform: uppercase; box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 50%, transparent);
}
.hud-badge span { padding: 8px 18px; }
.hb-game { background: var(--accent); color: #000; }
.hb-level { background: #000a; }
.hud-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100px; display: flex; align-items: center; gap: 26px;
  padding: 0 56px; background: linear-gradient(0deg, #000d, #0000);
}
.hud-count { font: 40px var(--mono); color: var(--muted); min-width: 140px; }
.hud-count b { color: #fff; font-weight: 400; font-size: 54px; }
.hud-chips { display: flex; gap: 14px; }
.chip {
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  font: 800 30px var(--font); border: 2px solid #fff4; background: #0008;
}
.chip.new { background: var(--accent); color: #000; border-color: var(--accent); box-shadow: 0 0 24px var(--accent); }

/* ---------- Muster-Raster ---------- */
.pgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 210px; aspect-ratio: 1; }
.pgrid i { border: 2px solid #fff6; border-radius: 4px; position: relative; transition: background .25s, box-shadow .25s; }
.pgrid i.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 18px var(--accent); }
.pgrid.mid { width: 260px; gap: 10px; }
.pgrid.big { width: 560px; gap: 14px; }
.pgrid.big i { border-width: 3px; border-radius: 8px; }

/* ---------- Logo ---------- */
.logo { font: 900 150px/1 var(--font); font-stretch: 112%; letter-spacing: -.02em; display: flex; max-width: 1760px; }
.logo .ch { display: inline-block; text-shadow: 0 0 40px var(--accent), 0 0 4px #fff; transform-style: preserve-3d; }
.logo.big { font-size: 165px; }

/* Lobby */
.lobby .tag { font: 700 44px var(--font); letter-spacing: .4em; text-transform: uppercase; margin-top: 20px; color: var(--accent-2); }
.lobby-count { font: 200px/1 var(--mono); margin-top: 40px; color: #fff; text-shadow: 0 0 30px var(--accent); }
.lobby-msg { position: absolute; bottom: 230px; font: 600 44px var(--font); color: #fffc; }

/* Intro */
.intro-hello { font: 600 56px var(--font); letter-spacing: .3em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 10px; }
.intro .levels { position: absolute; top: 470px; display: flex; gap: 90px; }
.lvl { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 30px 40px; background: #000a; border: 2px solid var(--accent); }
.lvl-n { font: 900 40px var(--font); font-stretch: 125%; color: var(--accent); }
.lvl-t { font: 700 30px var(--font); }
.intro-shout { position: absolute; bottom: 210px; font: 700 48px var(--font); }
.intro-shout b { color: var(--accent); font-stretch: 125%; font-weight: 900; }

/* Spiel-Intro */
.game-intro .slices { position: relative; width: 100%; }
.slice { height: 127px; overflow: hidden; display: flex; justify-content: center; }
.slice span { font: 900 380px/1 var(--font); font-stretch: 125%; white-space: nowrap; color: #fff; text-shadow: 0 0 60px var(--accent); }
.slice.s0 span { transform: translateY(0); margin-top: 0; }
.slice.s1 span { margin-top: -127px; color: var(--accent); }
.slice.s2 span { margin-top: -254px; }
.gi-sub { margin-top: 70px; font: 600 48px var(--font); }
.gi-sub b { color: var(--accent); }

/* Level-Intro */
.level-intro { flex-direction: row; gap: 140px; }
.li-text { text-align: left; max-width: 900px; }
.li-level { font: 900 90px var(--font); font-stretch: 125%; color: var(--accent); }
.li-level b { font-size: 1.6em; }
.li-title { font: 900 120px/1 var(--font); margin: 10px 0 20px; }
.li-sub { font: 500 44px var(--font); color: #fffc; }
.li-prize { margin-top: 50px; display: inline-flex; flex-direction: column; font: 800 46px var(--font); padding: 18px 30px; border-left: 8px solid var(--accent); background: #000a; }
.li-prize span { font: 32px var(--mono); color: var(--accent); text-transform: uppercase; }

/* Ziehung */
.draw { flex-direction: row; justify-content: space-between; padding: 0 140px; }
.d-side { width: 300px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.d-label { font: 34px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.d-ptitle { font: 700 30px var(--font); }
.d-last { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.ln { font: 900 80px/1 var(--font); font-stretch: 125%; opacity: .9; }
.ln:nth-child(2) { opacity: .7; } .ln:nth-child(3) { opacity: .5; } .ln:nth-child(4) { opacity: .35; } .ln:nth-child(5) { opacity: .2; }
.d-center { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.d-num { position: relative; font: 900 560px/0.85 var(--font); font-stretch: 125%; letter-spacing: -.02em; }
.d-num .main { position: relative; display: inline-block; color: #fff; text-shadow: 0 0 50px var(--accent), 0 0 120px var(--accent); }
.d-num .echo { position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 4px var(--accent); opacity: 0; }
.d-roll { position: absolute; font: 300px var(--mono); color: var(--accent); opacity: 0; filter: blur(2px); }
.d-caption { margin-top: 40px; font: 44px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #fffa; }
.d-paused { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); font: 60px var(--mono); color: var(--bad); display: none; }
.draw.paused .d-paused { display: block; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Claim */
.claim { gap: 0; overflow: hidden; }
.cl-row { width: 100%; overflow: hidden; white-space: nowrap; }
.cl-row span { display: inline-block; font: 900 210px/0.95 var(--font); font-stretch: 125%; color: #fff; text-shadow: 0 0 40px var(--accent); }
.cl-row.o span { color: transparent; -webkit-text-stroke: 4px var(--accent); text-shadow: none; }

/* Prüfung */
.verify.wait { gap: 40px; }
.scanbox { position: relative; width: 380px; height: 380px; }
.scanbox .c { position: absolute; width: 90px; height: 90px; border: 0 solid var(--accent); }
.scanbox .tl { left: 0; top: 0; border-left-width: 10px; border-top-width: 10px; }
.scanbox .tr { right: 0; top: 0; border-right-width: 10px; border-top-width: 10px; }
.scanbox .bl { left: 0; bottom: 0; border-left-width: 10px; border-bottom-width: 10px; }
.scanbox .br { right: 0; bottom: 0; border-right-width: 10px; border-bottom-width: 10px; }
.scanline { position: absolute; left: 20px; right: 20px; height: 6px; background: var(--accent); box-shadow: 0 0 30px 6px var(--accent); }
.vw-title { font: 900 100px var(--font); font-stretch: 125%; text-transform: uppercase; }
.vw-sub { font: 600 42px var(--font); color: #fffc; }

.verify:not(.wait) {
  display: grid; grid-template-columns: auto minmax(0, 640px); gap: 90px; align-items: center; justify-content: center;
  padding: 90px 80px 40px; text-align: left;
}
.v-left { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.v-head { display: flex; gap: 24px; align-items: baseline; }
.v-booklet { font: 900 76px/1 var(--font); font-stretch: 125%; color: #fff; text-shadow: 0 0 30px var(--accent); }
.v-serial { font: 40px var(--mono); color: #fffb; }
.vcard { display: grid; grid-template-columns: repeat(5, 118px); grid-auto-rows: 118px; gap: 10px; padding: 18px; background: #fff; border-radius: 10px; transform-style: preserve-3d; flex: none; box-shadow: 0 30px 80px -20px #000c; }
.vcard.empty { width: 600px; min-height: 600px; display: grid; place-items: center; font: 900 300px var(--font); color: #000; }
.vc { position: relative; display: grid; place-items: center; border: 3px solid #111; border-radius: 6px; background: #fff; color: #111; font: 900 58px var(--font); }
.vc span { position: relative; z-index: 1; }
.vc .mark { position: absolute; inset: 12px; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(2); transition: opacity .15s, transform .25s cubic-bezier(.3, 1.8, .5, 1); }
.vc.marked .mark { opacity: .35; transform: scale(1); }
.vc.pat.marked .mark { opacity: 1; }
.vcard.show-pattern .vc.pat { border-color: #000; box-shadow: inset 0 0 0 8px #000; }
.vcard.show-pattern.ok .vc.pat { border-color: #10c45f; box-shadow: inset 0 0 0 8px #10c45f; }
.vcard.show-pattern .vc.pat.missing { border-color: var(--bad); box-shadow: inset 0 0 0 6px var(--bad); animation: missing .6s steps(2) infinite; }
@keyframes missing { 50% { background: #ffd0d6; } }
.v-legend { display: flex; align-items: center; gap: 10px; font: 30px var(--mono); color: #fffc; text-transform: uppercase; }
.v-legend .lg { width: 26px; height: 26px; border-radius: 6px; margin-left: 18px; }
.v-legend .lg:first-child { margin-left: 0; }
.lg.drawn { background: var(--accent); border-radius: 50%; }
.lg.pat { box-shadow: inset 0 0 0 5px #000, 0 0 0 2px #fff; background: #fff; }
.lg.miss { box-shadow: inset 0 0 0 5px var(--bad); background: #fff; }
.v-result { padding: 36px 44px; border: 10px solid; text-align: center; background: #000d; max-width: 640px; }
.v-result.ok { color: var(--ok); border-color: var(--ok); box-shadow: 0 0 60px var(--ok); }
.v-result.bad { color: var(--bad); border-color: var(--bad); box-shadow: 0 0 60px var(--bad); }
.vr-title { font: 900 72px/1.02 var(--font); font-stretch: 105%; overflow-wrap: anywhere; }
.vr-sub { font: 600 34px var(--font); color: #fff; margin-top: 14px; }
.bands { transition: opacity .6s; }
.bands.dim { opacity: .15; }

/* Gewinner */
.w-title { font: 900 250px/1 var(--font); font-stretch: 125%; display: flex; }
.w-title .ch { display: inline-block; background: linear-gradient(180deg, #fff 30%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px var(--accent)); }
.w-booklet { font: 800 90px var(--font); margin-top: 10px; }
.w-booklet b { color: var(--accent); font-size: 1.3em; }
.w-prize { margin-top: 40px; display: flex; flex-direction: column; font: 900 70px var(--font); padding: 24px 60px; background: var(--accent); color: #000; transform: rotate(-2deg); }
.w-prize span { font: 36px var(--mono); text-transform: uppercase; }
.w-meta { margin-top: 40px; font: 40px var(--mono); color: #fffa; text-transform: uppercase; }

/* Kein Bingo */
.b-title { position: relative; font: 900 260px/1 var(--font); font-stretch: 125%; color: var(--bad); text-shadow: 6px 0 #00e5ff, -6px 0 #ff00aa; }
.b-sub { font: 800 70px var(--font); margin-top: 30px; }

/* Pause / Finale */
.im-title, .fi-title { font: 900 260px/1 var(--font); font-stretch: 125%; display: flex; }
.im-title .ch, .fi-title .ch { display: inline-block; text-shadow: 0 0 50px var(--accent); }
.im-count { font: 220px/1 var(--mono); color: var(--accent); text-shadow: 0 0 40px var(--accent); }
.im-next { font: 600 48px var(--font); margin-top: 10px; }
.im-next b { color: var(--accent); }
.im-msg { position: absolute; bottom: 230px; font: 600 40px var(--font); color: #fffc; }
.fi-sub { font: 700 60px var(--font); color: var(--accent-2); }
.wl { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 1400px; }
.wl li { width: 440px; }
.intermission .wl { position: absolute; right: 60px; top: 220px; flex-direction: column; }
.intermission .wl li { width: 400px; }
.wl li { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; text-align: left; padding: 12px 18px; background: #000a; border-left: 6px solid var(--accent); }
.wl span { font: 26px var(--mono); color: var(--muted); }
.wl b { font: 800 30px var(--font); text-align: right; }
.wl em { grid-column: 1 / -1; font: 600 24px var(--font); font-style: normal; color: #fffc; }

/* Nachricht */
.m-title { font: 900 150px/1 var(--font); font-stretch: 120%; text-shadow: 0 0 40px var(--accent); max-width: 1700px; }
.m-text { font: 600 56px var(--font); margin-top: 30px; max-width: 1500px; color: #fffd; }

/* ---------- Seitenbildschirm ---------- */
.side { position: absolute; inset: 0; padding: 60px 70px; display: flex; flex-direction: column; gap: 40px; transition: opacity .6s; }
.side.dim { opacity: .25; }
.sv-top { display: flex; justify-content: space-between; align-items: center; }
.sv-label { font: 34px var(--mono); color: var(--muted); text-transform: uppercase; }
.sv-num { font: 900 300px/1 var(--font); font-stretch: 125%; text-shadow: 0 0 50px var(--accent); }
.sv-pattern { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sv-ptitle { font: 700 30px var(--font); }
.sv-board { display: grid; grid-template-columns: repeat(15, 1fr); gap: 10px; flex: 1; }
.sv-board i { display: grid; place-items: center; font: 800 40px var(--font); font-style: normal; color: #fff3; border: 2px solid #fff1; transition: all .4s; }
.sv-board i.on { color: #000; background: var(--accent); border-color: var(--accent); }
.sv-board i.last { background: #fff; box-shadow: 0 0 30px var(--accent); }
.sv-status { font: 40px var(--mono); text-transform: uppercase; color: #fffc; }
.sv-status b { color: var(--accent); font-weight: 400; }
.sv-alert { position: absolute; inset: 0; display: grid; place-items: center; font: 900 200px var(--font); font-stretch: 125%; background: #000d; opacity: 0; pointer-events: none; transition: opacity .3s; text-transform: uppercase; color: var(--accent); }
.sv-alert.on { opacity: 1; }

/* ---------- Laufband ---------- */
body[data-role='ticker'] #stage { left: 0; top: 0; width: 100vw; height: 100vh; transform: none !important; }
.ticker { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; background: #000; border-block: 4px solid var(--accent); }
.tk-track { white-space: nowrap; font: 900 70vh/1 var(--font); font-stretch: 125%; color: var(--accent); text-shadow: 0 0 20px var(--accent); }