:root{
  --bg:#0a0e13; --panel:rgba(12,18,26,.92); --panel2:#131c27; --line:#243244; --text:#e8eef5; --muted:#8a9aab;
  --accent:#ffd23f; --good:#4ade80; --bad:#f87171; --cube:#7dff4f;
  color-scheme: dark;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; overflow:hidden; }
button{ font:inherit; color:inherit; }

.stage{ position:fixed; inset:0; background:#0b1430; user-select:none; -webkit-user-select:none; }
canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }

/* ===== HUD ===== */
.hud{ position:absolute; left:12px; right:12px; top:12px; display:flex; align-items:center; gap:10px; z-index:2;
  pointer-events:none; }
.hud[hidden]{ display:none; }
.hud > *{ pointer-events:auto; }
.pill{ padding:5px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(10,14,19,.75);
  font-variant-numeric:tabular-nums; white-space:nowrap; font-size:13px; }
.balken-oben{ position:relative; flex:1; max-width:440px; margin:0 auto; height:14px; border-radius:7px;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.35); overflow:hidden; pointer-events:none; }
.balken-oben i{ position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg, #4ade80, #7dff4f); }
.balken-oben span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; text-shadow:0 1px 2px #000; font-variant-numeric:tabular-nums; }
.hud-rechts{ display:flex; gap:6px; min-width:44px; justify-content:flex-end; }
.hud-rechts [hidden]{ display:none; }

.meldung{ position:absolute; left:50%; top:20%; transform:translateX(-50%); z-index:2; pointer-events:none;
  font-size:clamp(22px,4vw,40px); font-weight:900; letter-spacing:.04em; color:var(--accent);
  text-shadow:0 3px 0 rgba(0,0,0,.5); animation:auf .25s ease-out; white-space:nowrap; }
.meldung[hidden]{ display:none; }
@keyframes auf{ from{ transform:translateX(-50%) scale(.6); opacity:0; } to{ transform:translateX(-50%) scale(1); opacity:1; } }

/* ===== Menüs ===== */
.menue{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, rgba(5,8,12,.55), rgba(5,8,12,.85)); padding:16px; overflow:auto; }
.menue[hidden]{ display:none; }
.screen{ width:min(980px,100%); max-height:100%; margin:auto; }
.screen.schmal{ width:min(520px,100%); }
.screen[hidden]{ display:none; }
.logo{ font-size:clamp(46px,10vw,96px); font-weight:900; letter-spacing:.22em; margin:0; text-align:center;
  color:var(--cube); text-shadow:0 5px 0 rgba(0,0,0,.45), 0 0 30px rgba(125,255,79,.35); }
.untertitel{ text-align:center; color:var(--muted); margin:4px 0 26px; }
.gross-titel{ text-align:center; font-size:44px; font-weight:900; margin:0 0 16px; }
.gross-titel.gut{ color:var(--good); }
.mitte{ text-align:center; }
.leise{ color:var(--muted); font-size:13px; }

.knoepfe{ display:flex; flex-direction:column; gap:10px; width:min(420px,100%); margin:0 auto; }
.knoepfe.reihe{ flex-direction:row; flex-wrap:wrap; justify-content:center; width:auto; margin-top:14px; }
.knopf{ padding:12px 16px; border-radius:12px; border:1px solid var(--line); background:var(--panel2);
  cursor:pointer; font-size:16px; text-align:left; transition:transform .08s, border-color .15s, background .15s; }
.knopf:hover, .knopf:focus-visible{ border-color:var(--accent); background:#1a2533; outline:none; }
.knopf:active{ transform:scale(.98); }
.knopf.gross{ font-size:18px; font-weight:700; padding:14px 18px; }
.knopf-klein{ padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--panel2);
  cursor:pointer; font-size:13px; }
.knopf-klein:hover, .knopf-klein:focus-visible{ border-color:var(--accent); outline:none; }
.knopf-klein.aktiv{ background:var(--accent); color:#111; border-color:var(--accent); font-weight:700; }

.kopf{ display:flex; align-items:center; gap:14px; margin-bottom:8px; flex-wrap:wrap; }
.kopf h2{ margin:0; font-size:24px; flex:1; }
.umschalter{ display:flex; gap:4px; padding:3px; border:1px solid var(--line); border-radius:999px; background:var(--panel); }
.umschalter .knopf-klein{ border-color:transparent; }

/* Level-Karten */
.karten{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin-top:12px; }
.karte{ border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color .15s, transform .08s; text-align:left; }
.karte:hover, .karte:focus-within{ border-color:var(--accent); }
.karte canvas{ position:static; width:100%; height:auto; aspect-ratio:16/6; cursor:pointer; }
.karte .inhalt{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; }
.karte h3{ margin:0; font-size:18px; display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.karte h3 small{ color:var(--accent); font-size:13px; letter-spacing:.1em; white-space:nowrap; }
.karte .zeile{ display:grid; grid-template-columns:62px 1fr 42px; align-items:center; gap:8px; font-size:12px;
  color:var(--muted); font-variant-numeric:tabular-nums; }
.karte .zeile b{ color:var(--text); text-align:right; font-weight:600; }
.karte .zeile i{ display:block; height:8px; border-radius:4px; background:#233042; overflow:hidden; }
.karte .zeile i::after{ content:""; display:block; height:100%; width:var(--w); background:var(--good); border-radius:4px; }
.karte .zeile.uebung i::after{ background:#38bdf8; }
.karte .aktionen{ display:flex; gap:6px; margin-top:4px; align-items:center; }
.karte .aktionen .knopf{ padding:8px 14px; font-size:15px; font-weight:700; }
.karte .aktionen .leise{ margin-left:auto; }
.karte.geschafft h3::after{ content:"✓"; color:var(--good); margin-left:auto; }

.tasten{ display:grid; grid-template-columns:auto 1fr; gap:10px 16px; padding:14px 16px; border:1px solid var(--line);
  border-radius:14px; background:var(--panel); margin:10px 0 0; }
.tasten dt{ font-weight:700; color:var(--accent); font-size:14px; }
.tasten dd{ margin:0; font-size:14px; color:var(--text); }
@media (max-width:560px){ .tasten{ grid-template-columns:1fr; gap:2px; } .tasten dd{ margin-bottom:8px; } }

.werte{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:min(380px,100%); margin:0 auto; }
.werte div{ padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); text-align:center; }
.werte b{ display:block; font-size:22px; font-variant-numeric:tabular-nums; }
.werte span{ font-size:12px; color:var(--muted); }

/* Spieler-Auswahl */
.spieler-vorschau{ position:static; width:100%; height:auto; aspect-ratio:520/200; border:1px solid var(--line);
  border-radius:14px; background:var(--panel); }
.feldname{ margin:14px 0 6px; font-size:13px; color:var(--muted); }
.stile{ display:flex; gap:8px; flex-wrap:wrap; }
.stile button{ padding:6px; border-radius:12px; border:2px solid var(--line); background:var(--panel2); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; color:var(--muted); }
.stile button canvas{ position:static; width:52px; height:52px; }
.stile button:hover{ border-color:var(--muted); }
.stile button.aktiv{ border-color:var(--accent); color:var(--text); }
.farben{ display:flex; gap:8px; flex-wrap:wrap; }
.farben button{ width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,.2); cursor:pointer; }
.farben button:hover{ border-color:rgba(255,255,255,.6); }
.farben button.aktiv{ border-color:#fff; box-shadow:0 0 0 3px var(--accent); }

/* Namensfeld (Hauptmenü) und Rangliste */
.namensfeld{ display:block; width:min(420px,100%); margin:0 auto 18px; }
.namensfeld[hidden]{ display:none; }
.namensfeld span{ display:block; font-size:13px; color:var(--muted); margin-bottom:5px; }
.namensfeld input{ width:100%; padding:11px 14px; font-size:17px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel2); color:var(--text); outline:none; font:inherit; }
.namensfeld input:focus{ border-color:var(--accent); }
.namensfeld small{ display:block; margin-top:5px; font-size:12px; color:var(--muted); min-height:1.2em; }
.namensfeld small.fehler{ color:var(--bad); }
.namensfeld small.gut{ color:var(--good); }
.rangliste{ width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:6px; }
.rangliste th{ text-align:left; font-weight:500; color:var(--muted); font-size:12px; padding:8px 10px; border-bottom:1px solid var(--line); }
.rangliste td{ padding:7px 10px; border-bottom:1px solid rgba(255,255,255,.04); }
.rangliste td:first-child{ color:var(--muted); width:42px; }
.rangliste tr.ich td{ background:rgba(255,210,63,.12); color:var(--accent); font-weight:700; }
.rangliste tr.luecke td{ text-align:center; color:var(--muted); }
.rang-zeile{ margin:12px 0 0; color:var(--accent); font-weight:700; }
.rang-zeile[hidden]{ display:none; }
.knopf-klein[hidden]{ display:none; }