/* Spielhallen-Stil (Vorlage: mockup/): Vollbild-Spielwelt dahinter, Schalttafel davor. System-Monospace statt Webfont. */
:root{--bg:#07060d;--s1:#0e0c1a;--s2:#1b1a27;--line:#3a3752;--text:#f2ede3;--mute:#a49fbb;--coin:#ffcc33;--coin-d:#b8860b;--surv:#ff4f6d;--ok:#59e38a;--mono:ui-monospace,Menlo,Consolas,"Courier New",monospace}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--mono);overflow-x:hidden}

/* Hintergrund: laufende Survivor-Demo, Pixel bleiben hart */
#welt{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:0}
.schleier{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),
             radial-gradient(ellipse at 66% 50%,transparent 35%,rgba(4,3,10,.75) 100%),
             linear-gradient(90deg,rgba(7,6,13,.8),transparent 55%)}

.buehne{position:relative;z-index:2;min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:28px clamp(20px,6vw,96px) 64px}
#logo{display:block;image-rendering:pixelated;max-width:100%;filter:drop-shadow(0 0 14px rgba(255,204,51,.4));animation:neon 6s steps(1) infinite}
@keyframes neon{0%,93%,96%,100%{opacity:1}94%,97%{opacity:.55}}
.motto{display:inline-block;margin:-8px 0 0;padding:3px 8px;font-size:12px;letter-spacing:.28em;color:#d4cfe6;background:rgba(7,6,13,.82)}

/* Schalttafel: abgeschrägte Pixel-Ecken statt runder Karte */
.deck{width:100%;max-width:410px;background:rgba(14,12,26,.9);backdrop-filter:blur(3px);
  clip-path:polygon(0 12px,4px 12px,4px 8px,8px 8px,8px 4px,12px 4px,12px 0,calc(100% - 12px) 0,calc(100% - 12px) 4px,calc(100% - 8px) 4px,calc(100% - 8px) 8px,calc(100% - 4px) 8px,calc(100% - 4px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 4px) calc(100% - 12px),calc(100% - 4px) calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) calc(100% - 4px),calc(100% - 12px) calc(100% - 4px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 4px),8px calc(100% - 4px),8px calc(100% - 8px),4px calc(100% - 8px),4px calc(100% - 12px),0 calc(100% - 12px))}
.deck-kopf{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 10px;background:var(--surv);color:#1a0a10;font-size:12px;font-weight:700;letter-spacing:.2em}
.deck-kopf i{display:flex;gap:5px}
.deck-kopf i::before,.deck-kopf i::after{content:"";width:9px;height:9px;background:#1a0a10}
.deck-kopf i::after{background:var(--coin)}
.deck-inhalt{padding:22px 22px 24px;border:4px solid #1b1a2c;border-top:0}
h1{margin:0 0 6px;font-size:20px;letter-spacing:.06em;color:var(--coin)}
p{margin:0 0 16px;color:var(--mute);font-size:14px}
label{display:block;margin:0 0 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
input{display:block;width:100%;margin-top:6px;padding:12px;background:#05040a;border:3px solid var(--line);border-radius:0;color:var(--text);font:16px var(--mono)}
input:focus{outline:none;border-color:var(--coin);box-shadow:0 0 0 3px rgba(255,204,51,.18)}
button,.knopf{display:inline-block;width:100%;margin-top:8px;padding:15px 18px;border:0;border-radius:0;background:var(--coin);color:#1a1206;font:700 14px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;box-shadow:0 5px 0 var(--coin-d);transition:transform .08s,box-shadow .08s}
button:hover,.knopf:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--coin-d)}
button:active{transform:translateY(5px);box-shadow:0 0 0 var(--coin-d)}
button:focus-visible,.knopf:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:3px}
button[disabled]{opacity:.6;cursor:wait}
.zweit{background:var(--s2);color:var(--text);box-shadow:0 5px 0 #05040a}
.meldung{min-height:1.4em;margin:12px 0 0;font-size:14px;color:var(--surv)}
.meldung.ok{color:var(--ok)}
.code{display:block;margin:0 0 10px;border:3px dashed var(--coin);color:var(--text);font-size:14px;word-break:break-all}
.klein{margin:16px 0 0;font-size:13px;text-align:center}
a{color:var(--coin)}
[hidden]{display:none!important}

/* LED-Laufband am unteren Rand */
.led{position:fixed;left:0;right:0;bottom:0;z-index:3;background:#050508;border-top:2px solid #1c1a10;overflow:hidden;white-space:nowrap;padding:8px 0}
.led div{display:inline-block;padding-left:100%;font-size:11px;letter-spacing:.14em;color:var(--coin);text-shadow:0 0 6px rgba(255,204,51,.55);animation:lauf 46s linear infinite}
.led i{font-style:normal;color:var(--surv);margin:0 18px}
@keyframes lauf{to{transform:translateX(-100%)}}

@media (max-width:700px){
  .buehne{justify-content:space-between;gap:18px}
  .schleier{background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 36%,transparent 30%,rgba(4,3,10,.7) 100%),linear-gradient(0deg,rgba(7,6,13,.7),transparent 45%)}
  .deck{max-width:none}
  .deck-inhalt{padding:14px 16px 16px}
  h1{font-size:18px}
  p{margin-bottom:10px;font-size:13px}
  label{margin-bottom:10px}
  input{padding:9px 10px;font-size:15px}
  button,.knopf{padding:12px 14px}
  .klein{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){#logo,.led div{animation:none}.led div{padding-left:16px}button,.knopf{transition:none}}