/* ============================================================
   MR. BASKETBALL — UI
   Designsprache aus der Gerber-Software-Website übernommen:
   theme-mrbasketball Palette, Orbitron als Display, Permanent
   Marker für Aktionen, Inter für Fliesstext, harte Offset-
   Schatten statt Rundungen, Laufbänder als Trenner.
   ============================================================ */

:root {
  --bg:#0d0a08;
  --bg-soft:#14100c;
  --card:#1a140e;
  --card-hi:#221a12;
  --border:rgba(255,140,26,.18);
  --border-soft:rgba(255,255,255,.07);
  --accent:#ff8c1a;
  --accent2:#e06700;
  --accent-glow:rgba(255,140,26,.33);
  --accent-faint:rgba(255,140,26,.06);
  --text:#ffffff;
  --muted:#9ca3af;
  --dim:#6b7280;
  --gold:#f0b429;
  --ok:#6fbf5a;
  --bad:#e0483d;
  --violet:#9b83ff;

  /* Orbitron nur fuer Ueberschriften: seine Null ist ein durch-
     gestrichenes Rechteck, auf Anzeigetafeln unlesbar. Ziffern -> Inter. */
  --display:'Orbitron','Arial Black',sans-serif;
  --marker:'Permanent Marker','Orbitron',sans-serif;
  --ui:'Inter',system-ui,-apple-system,sans-serif;

  --noise:none;
  --ease:cubic-bezier(.2,.9,.25,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:var(--ui); }
body { -webkit-font-smoothing:antialiased;
  /* Ohne die Vorsilben markiert ein langer Tipp auf dem Handy Text
     statt zu zielen — CrazyGames prüft genau das. */
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
img { display:block; }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#0a0806; }
::-webkit-scrollbar-thumb { background:#2a2018; border:2px solid #0a0806; }
::-webkit-scrollbar-thumb:hover { background:var(--accent2); }

/* ---------- Bühne ---------- */
#stage { position:fixed; inset:0; display:grid; place-items:center; }
#c { display:block; touch-action:none; }

#scrim {
  position:fixed; inset:0; pointer-events:none; opacity:0;
  transition:opacity .4s var(--ease);
  background:
    radial-gradient(130% 100% at 50% 38%, rgba(13,10,8,.62), rgba(6,4,3,.96)),
    linear-gradient(180deg, var(--accent-faint), transparent 45%);
  backdrop-filter:blur(4px) saturate(.6);
}
body.menu-open #scrim { opacity:1; }

/* Schwebende Emoji im Hintergrund der Menüs */
#floaters { position:fixed; inset:0; pointer-events:none; opacity:0; transition:opacity .5s; z-index:1; }
body.menu-open #floaters { opacity:1; }
#floaters span {
  position:absolute; font-size:var(--size,2rem); opacity:.16;
  animation:floaty var(--dur,7s) ease-in-out var(--delay,0s) infinite;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));
}
@keyframes floaty {
  0%,100% { transform:translateY(0) rotate(var(--rot,0deg)); }
  50%     { transform:translateY(-26px) rotate(calc(var(--rot,0deg) * -1)); }
}

/* ============================================================
   BAUSTEINE
   ============================================================ */
.kicker {
  display:inline-block; padding:7px 16px;
  font:600 11px/1 var(--ui); letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--accent);
  background:rgba(255,140,26,.06);
}
.label {
  font:600 10px/1 var(--ui); letter-spacing:.24em; text-transform:uppercase; color:var(--dim);
}

/* Laufband */
/* Das Laufband ist reine Zierde. Ohne pointer-events:none faengt
   es am Handy die Beruehrungen ab — dann sind Shop, Einstellungen
   und das Beitreten-Feld darunter nicht mehr antippbar. Auf dem
   Rechner faellt das nicht auf, weil dort der Zeiger genauer ist
   und man neben das Band trifft. */
.ticker {
  pointer-events:none;
  overflow:hidden; white-space:nowrap;
  background:var(--accent); color:#000;
  font-family:var(--marker); font-size:15px;
  padding:9px 0; transform:rotate(-1.2deg) scale(1.03);
  box-shadow:0 8px 34px rgba(0,0,0,.55);
  position:relative; z-index:3;
}
.ticker.reverse {
  transform:rotate(1.2deg) scale(1.03);
  background:#000; color:var(--accent);
  border-top:2px solid var(--accent); border-bottom:2px solid var(--accent);
}
.ticker .track { display:inline-block; animation:marquee 22s linear infinite; }
.ticker.reverse .track { animation-direction:reverse; }
.ticker span { margin:0 26px; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ---------- Buttons: harte Offset-Schatten, keine Rundungen ---------- */
.btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--marker); letter-spacing:.02em;
  border:2px solid var(--accent);
  transition:box-shadow .18s var(--ease), transform .18s var(--ease),
             background .18s, color .18s;
}
.btn-primary { background:var(--accent); color:#000; box-shadow:7px 7px 0 #000, 9px 9px 0 var(--accent-glow); }
.btn-primary:hover:not(:disabled) { box-shadow:11px 11px 0 #000, 13px 13px 0 var(--accent-glow); transform:translate(-2px,-2px); }
.btn-primary:active:not(:disabled) { box-shadow:1px 1px 0 #000; transform:translate(5px,5px); }

.btn-ghost { background:#000; color:var(--accent); box-shadow:7px 7px 0 rgba(255,255,255,.16); }
.btn-ghost:hover:not(:disabled) { box-shadow:11px 11px 0 rgba(255,255,255,.16); transform:translate(-2px,-2px); background:var(--accent); color:#000; }
.btn-ghost:active:not(:disabled) { box-shadow:1px 1px 0 rgba(255,255,255,.16); transform:translate(5px,5px); }

.btn:disabled { opacity:.32; cursor:not-allowed; box-shadow:3px 3px 0 #000; }

.btn-play { width:100%; height:104px; padding:0 30px; gap:20px; font-size:clamp(22px,2.4vw,33px); justify-content:flex-start; }
.btn-play .txt { flex:1; text-align:left; white-space:nowrap; }
.btn-play .sub { text-align:right; font-family:var(--ui); }
.btn-play .sub b { display:block; font:600 12px/1.5 var(--ui); letter-spacing:.14em; text-transform:uppercase; }
.btn-play .sub span { font:400 11px/1.5 var(--ui); letter-spacing:.06em; opacity:.65; }
.btn-play .ball { width:44px; height:44px; flex:none; animation:spin 9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.btn-sm { flex:1; height:64px; font-size:21px; gap:12px; }
.btn-tiny { height:42px; padding:0 18px; font-size:14px; gap:8px; box-shadow:5px 5px 0 #000; }
.btn-tiny:hover:not(:disabled) { box-shadow:8px 8px 0 #000; transform:translate(-2px,-2px); }
.btn-tiny.danger { border-color:var(--bad); color:var(--bad); background:#000; box-shadow:5px 5px 0 rgba(224,72,61,.3); }
.btn-tiny.danger:hover:not(:disabled) { background:var(--bad); color:#fff; box-shadow:8px 8px 0 rgba(224,72,61,.3); }

/* ---------- Münzen ---------- */
.coins { display:inline-flex; align-items:center; gap:9px; }
.coin, .c-mini {
  border-radius:50%; flex:none; display:inline-block;
  background:radial-gradient(circle at 34% 30%, #ffe08a, var(--gold) 46%, #8a5c0c);
  box-shadow:inset 0 0 0 2px rgba(80,52,6,.6), 0 2px 6px rgba(0,0,0,.6);
}
.coin { width:20px; height:20px; position:relative; }
.coin::after {
  content:"$"; position:absolute; inset:0; display:grid; place-items:center;
  font:800 11px/1 var(--ui); color:#6b4708;
}
.c-mini { width:13px; height:13px; margin-left:7px; vertical-align:-2px; box-shadow:inset 0 0 0 1.5px rgba(80,52,6,.6); }
/* Inter statt Orbitron: Orbitrons Null ist ein durchgestrichenes
   Rechteck und liest sich bei dieser Grösse wie ein Fehlzeichen. */
.coins b { font:600 19px/1 var(--ui); color:var(--gold); font-variant-numeric:tabular-nums; letter-spacing:.02em; }

/* ============================================================
   HAUPTMENÜ
   ============================================================ */
.screen { position:fixed; inset:0; z-index:10; display:none; }
.screen.show { display:block; }

#menu { place-items:center; }
#menu.show { display:grid; }
.menu-box { width:min(660px,92vw); position:relative; z-index:2; }

.title-block { margin-bottom:38px; text-align:center; }
.title-block .kicker { margin-bottom:20px; }
.title-main {
  font-family:var(--display); font-weight:600;
  font-size:clamp(50px,7.2vw,86px); line-height:.98;
  letter-spacing:.01em; text-transform:uppercase; white-space:nowrap;
}
.title-main em { font-style:normal; color:var(--accent); text-shadow:0 0 44px var(--accent-glow); }
.tagline { margin-top:16px; font:300 15px/1.6 var(--ui); color:var(--muted); }

.menu-actions { display:flex; flex-direction:column; gap:16px; }
.menu-row { display:flex; gap:16px; }

/* Ausrüstungs-Streifen */
.loadout {
  margin-top:30px; padding:16px 20px; display:flex; align-items:center; gap:18px;
  background:var(--card); border:1px solid var(--border);
  transition:border-color .2s, background .2s;
}
.loadout:hover { border-color:var(--accent); background:var(--card-hi); }
.loadout .thumb { width:54px; height:54px; flex:none; position:relative; }
.loadout .thumb img { width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.8)); animation:bob 3.4s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-6deg)} 50%{transform:translateY(-6px) rotate(6deg)} }
.loadout .info { flex:1; min-width:0; }
.loadout .nm { font:600 13px/1.3 var(--ui); letter-spacing:.12em; text-transform:uppercase; }
.loadout .cond-row { display:flex; align-items:center; gap:12px; margin-top:9px; }

/* Zustandsbalken */
.cond { flex:1; height:9px; background:#000; border:1px solid var(--border-soft); position:relative; overflow:hidden; }
.cond i { position:absolute; inset:0 auto 0 0; display:block; transition:width .5s var(--ease); }
.cond::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 8px, rgba(0,0,0,.7) 8px 10px);
}
.cond-tag { font:600 9px/1 var(--ui); letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; }

/* Einblenden gestaffelt */
.stagger > * { opacity:0; transform:translateY(16px); animation:rise .55s var(--ease) forwards; }
.stagger > *:nth-child(1){animation-delay:.05s} .stagger > *:nth-child(2){animation-delay:.13s}
.stagger > *:nth-child(3){animation-delay:.21s} .stagger > *:nth-child(4){animation-delay:.29s}
@keyframes rise { to { opacity:1; transform:none; } }

/* ============================================================
   PANELS
   ============================================================ */
/* Zentriert, wenn Platz da ist — scrollbar, wenn nicht.
   Wichtig: mit place-items:center in einem Grid wird bei Ueberlauf
   der OBERE Teil abgeschnitten und ist per Scrollen nicht mehr
   erreichbar. Genau das passierte auf dem Handy im Querformat mit
   der Ergebniskarte. margin:auto am Kind hat dieses Problem nicht. */
.panel-wrap {
  position:fixed; inset:0; z-index:2;
  display:flex; padding:24px;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.panel-wrap > * { margin:auto; }
.panel {
  width:min(1160px,96vw); height:min(790px,92vh);
  display:flex; flex-direction:column;
  background:var(--bg-soft); border:2px solid var(--accent);
  box-shadow:14px 14px 0 #000, 0 0 70px rgba(0,0,0,.8);
  animation:panelIn .38s var(--ease);
}
@keyframes panelIn { from { opacity:0; transform:translateY(26px) scale(.97); } }
.panel-head { display:flex; align-items:center; gap:22px; padding:20px 26px; border-bottom:1px solid var(--border); }
.panel-head h2 { font-family:var(--display); font-weight:600; font-size:27px; letter-spacing:.06em; text-transform:uppercase; }
.panel-head h2 em { font-style:normal; color:var(--accent); }
.panel-head .spacer { flex:1; }
.panel-body { flex:1; display:flex; min-height:0; position:relative; }
/* Verlauf als Hinweis, dass unten noch mehr kommt */
.panel-body::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:56px; pointer-events:none;
  background:linear-gradient(transparent, var(--bg-soft));
}

.x-btn {
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  border:2px solid var(--border); color:var(--muted); font-size:20px;
  transition:.18s var(--ease);
}
.x-btn:hover { background:var(--bad); border-color:var(--bad); color:#fff; box-shadow:5px 5px 0 rgba(224,72,61,.3); transform:translate(-2px,-2px); }

/* ---------- Shop: Liste ---------- */
.shop-list { width:326px; flex:none; overflow-y:auto; padding:18px; border-right:1px solid var(--border); display:flex; flex-direction:column; gap:12px; }
.ball-card {
  position:relative; display:flex; align-items:center; gap:15px; padding:14px; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--border-soft);
  transition:.2s var(--ease);
}
.ball-card:hover { border-color:var(--accent); background:var(--card-hi); transform:translateX(4px); }
.ball-card.sel { border-color:var(--accent); background:var(--card-hi); box-shadow:6px 6px 0 #000; }
.ball-card.sel::before { content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:4px; background:var(--accent); }
.ball-card img { width:50px; height:50px; object-fit:contain; flex:none; filter:drop-shadow(0 4px 7px rgba(0,0,0,.8)); transition:transform .3s var(--ease); }
.ball-card:hover img { transform:rotate(18deg) scale(1.08); }
.ball-card .cn { flex:1; min-width:0; }
.ball-card .cn b { display:block; font:600 12px/1.3 var(--ui); letter-spacing:.1em; text-transform:uppercase; }
.ball-card .cn small { display:block; margin-top:5px; font:600 10px/1 var(--ui); letter-spacing:.1em; }
.ball-card .cond { margin-top:9px; height:5px; }
.owned { color:var(--ok); } .locked { color:var(--gold); }
.equipped-tag {
  position:absolute; top:0; right:0; padding:4px 9px;
  font-family:var(--marker); font-size:10px; letter-spacing:.08em;
  background:var(--accent); color:#000;
}

/* ---------- Shop: Detail ---------- */
.shop-detail { flex:1; overflow-y:auto; padding:26px 30px 70px; min-width:0; }
.detail-top { display:flex; gap:30px; align-items:center; margin-bottom:6px; }
.detail-art {
  width:190px; height:190px; flex:none; display:grid; place-items:center; position:relative;
}
.detail-art::before {
  content:""; position:absolute; inset:8%;
  background:radial-gradient(circle, var(--accent-glow), transparent 66%);
  animation:pulseGlow 3.6s ease-in-out infinite;
}
@keyframes pulseGlow { 0%,100%{opacity:.5;transform:scale(.92)} 50%{opacity:1;transform:scale(1.06)} }
.detail-art img {
  width:160px; height:160px; object-fit:contain; position:relative;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.85));
  animation:hover3d 5.5s ease-in-out infinite;
}
@keyframes hover3d { 0%,100%{transform:translateY(0) rotate(-7deg)} 50%{transform:translateY(-14px) rotate(7deg)} }
.detail-head h3 { font-family:var(--display); font-weight:600; font-size:32px; letter-spacing:.02em; text-transform:uppercase; line-height:1.05; }
.detail-head p { margin-top:11px; font:300 13px/1.65 var(--ui); color:var(--muted); max-width:44ch; }
.tier { display:inline-block; margin-bottom:11px; padding:4px 11px; font:600 9px/1 var(--ui); letter-spacing:.22em; border:1px solid currentColor; }
.tier-1 { color:var(--muted); } .tier-2 { color:var(--violet); } .tier-3 { color:var(--gold); }

.sec { margin-top:28px; }
.sec > .label { margin-bottom:14px; display:flex; align-items:center; gap:12px; }
.sec > .label::after { content:""; flex:1; height:1px; background:var(--border); }

/* Statbalken */
.stat { display:flex; align-items:center; gap:16px; margin-bottom:10px; }
.stat .sn { width:76px; font:600 10px/1 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.stat .bar { flex:1; display:flex; gap:3px; height:14px; }
.stat .bar i {
  flex:1; background:#241c14; transform:scaleY(.55); transform-origin:bottom;
  animation:segIn .4s var(--ease) forwards;
}
.stat .bar i:nth-child(1){animation-delay:.02s} .stat .bar i:nth-child(2){animation-delay:.05s}
.stat .bar i:nth-child(3){animation-delay:.08s} .stat .bar i:nth-child(4){animation-delay:.11s}
.stat .bar i:nth-child(5){animation-delay:.14s} .stat .bar i:nth-child(6){animation-delay:.17s}
.stat .bar i:nth-child(7){animation-delay:.20s} .stat .bar i:nth-child(8){animation-delay:.23s}
.stat .bar i:nth-child(9){animation-delay:.26s} .stat .bar i:nth-child(10){animation-delay:.29s}
@keyframes segIn { to { transform:scaleY(1); } }
.stat .bar i.f { background:linear-gradient(180deg, var(--accent), var(--accent2)); box-shadow:0 0 12px var(--accent-glow); }
.stat .bar i.u { background:linear-gradient(180deg, #7ce8ff, #1f8fb5); box-shadow:0 0 12px rgba(124,232,255,.35); }
.stat .bar i.w { background:#3a2d20; }
.stat .sv { width:58px; text-align:right; font:600 11px/1 var(--ui); font-variant-numeric:tabular-nums; }

/* Upgrade-Zeilen */
.upg {
  display:flex; align-items:center; gap:16px; padding:12px 14px; margin-bottom:9px;
  background:var(--card); border:1px solid var(--border-soft); transition:.2s var(--ease);
}
.upg:hover { border-color:var(--border); background:var(--card-hi); }
.upg .un { width:76px; flex:none; font:600 11px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; }
.upg .ud { flex:1; font:300 11px/1.5 var(--ui); color:var(--dim); }
.pips { display:flex; gap:5px; flex:none; }
.pips i { width:16px; height:16px; background:#000; border:1px solid var(--border-soft); transition:.2s var(--ease); }
.pips i.on { background:var(--accent); border-color:var(--accent); box-shadow:0 0 10px var(--accent-glow); }

.actions { display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }
.actions .btn-tiny { min-width:170px; height:48px; }

.hint-line { margin-top:15px; font:300 11px/1.7 var(--ui); color:var(--dim); }
.hint-line b { color:var(--accent); font-weight:600; }

/* ---------- Einstellungen ---------- */
.set-body { padding:26px 32px; overflow-y:auto; flex:1; }
.set-row { display:flex; align-items:center; gap:22px; padding:16px 0; border-bottom:1px solid var(--border-soft); }
.set-row .sl { flex:1; }
.set-row .sl b { display:block; font:600 12px/1.4 var(--ui); letter-spacing:.12em; text-transform:uppercase; }
.set-row .sl span { display:block; margin-top:5px; font:300 11px/1.5 var(--ui); color:var(--dim); }
.seg { display:flex; border:1px solid var(--border); flex:none; }
.seg button {
  padding:10px 18px; font:600 10px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); border-right:1px solid var(--border); transition:.16s;
}
.seg button:last-child { border-right:none; }
.seg button:hover { color:#fff; background:var(--card-hi); }
.seg button.on { background:var(--accent); color:#000; }

/* ============================================================
   MATCH-HUD
   ============================================================ */
#hud-top {
  position:fixed; top:0; left:0; right:0; z-index:5; padding:16px 22px;
  display:flex; align-items:flex-start; gap:18px; pointer-events:none;
  opacity:0; transition:opacity .35s;
}
body.playing #hud-top { opacity:1; }
#hud-top .esc { pointer-events:auto; }
#hud-info { margin-left:auto; display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; max-width:36%; }
.hud-chip {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  font:600 10px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--border-soft); background:rgba(8,6,4,.82);
}
.hud-chip .dot { width:7px; height:7px; border-radius:50%; flex:none; }

.scoreboard {
  position:absolute; left:50%; top:12px; transform:translateX(-50%);
  display:flex; align-items:center; gap:24px; padding:12px 28px;
  background:#000; border:2px solid var(--accent);
  box-shadow:7px 7px 0 rgba(255,140,26,.22), 0 10px 34px rgba(0,0,0,.7);
}
.sb-side { display:flex; align-items:center; gap:12px; }
.sb-lbl { font:600 10px/1 var(--ui); letter-spacing:.22em; text-transform:uppercase; color:var(--dim); }
.sb-num { font:700 34px/1 var(--ui); font-variant-numeric:tabular-nums; min-width:32px; text-align:center; transition:transform .18s var(--ease); }
.sb-num.p { color:var(--accent); text-shadow:0 0 20px var(--accent-glow); }
.sb-num.a { color:var(--violet); text-shadow:0 0 20px rgba(155,131,255,.4); }
.sb-num.pop { animation:scorePop .45s var(--ease); }
@keyframes scorePop { 0%{transform:scale(1)} 35%{transform:scale(1.5)} 100%{transform:scale(1)} }
.sb-clock {
  font:700 26px/1 var(--ui); font-variant-numeric:tabular-nums; color:#fff;
  padding:0 20px; border-left:1px solid var(--border); border-right:1px solid var(--border);
  transition:color .2s;
}
.sb-clock.urgent { color:var(--bad); animation:tick .9s steps(2) infinite; }
@keyframes tick { 50% { opacity:.4; } }

/* ============================================================
   ERGEBNIS
   ============================================================ */
.result-card {
  width:min(520px,92vw); padding:32px 34px;
  background:var(--bg-soft); border:2px solid var(--accent);
  box-shadow:14px 14px 0 #000, 0 0 60px rgba(0,0,0,.8);
  animation:panelIn .38s var(--ease);
}
.result-card h2 { font-family:var(--display); font-weight:600; font-size:44px; line-height:1; text-transform:uppercase; }
.result-card .swish { margin-top:12px; font-family:var(--marker); font-size:17px; color:#5ce1ff; }
.final-score { display:flex; align-items:center; gap:20px; margin-top:20px; }
.final-score .fs-side { display:flex; align-items:center; gap:13px; }
.final-score i { font:600 10px/1 var(--ui); letter-spacing:.22em; text-transform:uppercase; color:var(--dim); font-style:normal; }
.final-score b { font:700 46px/1 var(--ui); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.final-score b.p { color:var(--accent); } .final-score b.a { color:var(--violet); }
.final-score .fs-sep { font:700 30px/1 var(--ui); color:var(--dim); }

.payout { margin:26px 0 8px; }
.pay-row { display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid var(--border-soft);
  opacity:0; animation:rise .4s var(--ease) forwards; }
.pay-row:nth-child(1){animation-delay:.10s} .pay-row:nth-child(2){animation-delay:.19s}
.pay-row:nth-child(3){animation-delay:.28s} .pay-row:nth-child(4){animation-delay:.37s}
.pay-row:nth-child(5){animation-delay:.46s} .pay-row:nth-child(6){animation-delay:.55s}
.pay-row .pl { flex:1; font:600 11px/1 var(--ui); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.pay-row .pv { font:600 15px/1 var(--ui); font-variant-numeric:tabular-nums; }
.pay-row.tot .pl { color:#fff; }
.pay-row.tot .pv { color:var(--gold); font-size:23px; }
.pay-row.neg .pv { color:var(--bad); }
.result-card .actions .btn-tiny { flex:1; min-width:0; height:50px; }
/* Ohne eigene Zeile schob sich der Verdoppeln-Knopf ueber die
   Aktionen darunter — auf flachen Schirmen unbedienbar. */
#btn-double { position:relative; z-index:1; }
.result-card .actions { position:relative; z-index:2; clear:both; }
.ad-optional { position:relative; z-index:2; }

/* ---------- Toast ---------- */
#toast {
  position:fixed; left:50%; bottom:84px; transform:translate(-50%,16px); z-index:40;
  padding:13px 24px; font-family:var(--marker); font-size:14px;
  border:2px solid var(--accent); background:#000; color:var(--accent);
  box-shadow:6px 6px 0 var(--accent-glow);
  opacity:0; pointer-events:none; transition:opacity .22s, transform .22s var(--ease);
}
#toast.show { opacity:1; transform:translate(-50%,0); }
#toast.bad { border-color:var(--bad); color:var(--bad); box-shadow:6px 6px 0 rgba(224,72,61,.3); }
#toast.good { border-color:var(--gold); color:var(--gold); box-shadow:6px 6px 0 rgba(240,180,41,.3); }

#hint {
  position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:5;
  font:400 10px/1 var(--ui); letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .35s;
}
body.playing #hint { opacity:1; }

#boot { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--bg); }
#boot span { font-family:var(--marker); font-size:16px; letter-spacing:.1em; color:var(--accent); animation:tick 1.2s ease-in-out infinite; }

/* ============================================================
   SHOP-REITER, BOOSTER, GEGNERSUCHE
   ============================================================ */
#pane-balls { flex:1; display:flex; min-height:0; }
.pane-scroll { flex:1; overflow-y:auto; padding:26px 30px 70px; }
.panel-head .seg { margin-left:6px; }

/* Steckplätze */
.slots { display:flex; gap:14px; }
.slot {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 10px;
  background:var(--card); border:1px dashed var(--border); color:var(--dim);
  transition:.2s var(--ease);
}
.slot.filled { border-style:solid; border-color:var(--accent); color:var(--text); background:var(--card-hi); }
.slot:hover { transform:translateY(-3px); box-shadow:5px 5px 0 #000; }
.slot .si { font-size:26px; line-height:1; }
.slot .sn { font:600 10px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; }
.slot .sc { font:700 11px/1 var(--ui); color:var(--gold); }

/* Kartenraster */
.bgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.bcard {
  position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; padding:15px 10px;
  background:var(--card); border:1px solid var(--border-soft); transition:.2s var(--ease);
}
.bcard:hover { border-color:var(--accent); transform:translateY(-3px); }
.bcard.sel { border-color:var(--accent); background:var(--card-hi); box-shadow:6px 6px 0 #000; }
.bcard b { font:600 11px/1.2 var(--ui); letter-spacing:.08em; text-transform:uppercase; text-align:center; }
.bcard .bch { font:600 10px/1 var(--ui); color:var(--gold); }
.bico { font-size:30px; line-height:1; filter:drop-shadow(0 3px 6px rgba(0,0,0,.7)); }
.bico.big { font-size:56px; }
.pips.small i { width:11px; height:11px; }

.bdetail { display:flex; gap:22px; align-items:center; margin-top:26px; padding:20px;
  background:var(--card); border:1px solid var(--border); }
.bdetail h3 { font-family:var(--display); font-weight:600; font-size:22px; text-transform:uppercase; }
.bdetail p { margin-top:7px; font:300 12px/1.6 var(--ui); color:var(--muted); }

/* Booster-Leiste im Match */
#boostbar {
  position:fixed; left:50%; bottom:44px; transform:translateX(-50%); z-index:5;
  display:flex; gap:12px; opacity:0; transition:opacity .3s; pointer-events:none;
}
body.playing #boostbar { opacity:1; pointer-events:auto; }
.bslot {
  position:relative; width:64px; height:64px; display:grid; place-items:center;
  background:rgba(8,6,4,.85); border:2px solid var(--border);
  font-size:26px; transition:.16s var(--ease);
}
.bslot:hover:not(.spent) { border-color:var(--accent); transform:translateY(-4px); box-shadow:5px 5px 0 #000; }
.bslot.spent { opacity:.35; cursor:not-allowed; }
.bslot.empty { color:var(--dim); font:600 14px/1 var(--ui); border-style:dashed; }
.bslot .k { position:absolute; top:3px; left:5px; font:700 9px/1 var(--ui); color:var(--dim); }
.bslot .n { position:absolute; bottom:2px; right:5px; font:700 11px/1 var(--ui); color:var(--gold); }

/* Gegnersuche */
#mm-dots { display:flex; gap:9px; justify-content:center; margin:22px 0; }
#mm-dots i { width:10px; height:10px; background:var(--accent); animation:mmb 1.1s ease-in-out infinite; }
#mm-dots i:nth-child(2) { animation-delay:.16s; } #mm-dots i:nth-child(3) { animation-delay:.32s; }
@keyframes mmb { 0%,100% { opacity:.2; transform:translateY(0);} 50% { opacity:1; transform:translateY(-9px);} }
#mm-status { min-height:60px; display:grid; place-items:center; }
.mm-hint { font:300 12px/1.6 var(--ui); color:var(--dim); }
.mm-vs { display:flex; align-items:center; gap:16px; font:700 16px/1 var(--ui); }
.mm-vs i { font-style:normal; font:600 10px/1 var(--ui); letter-spacing:.22em; text-transform:uppercase; color:var(--dim); }
.mm-vs .opp { color:var(--violet); }

/* ---------- Simulierte Werbung ---------- */
#adsim {
  position:fixed; inset:0; z-index:60; display:none; place-items:center;
  background:rgba(4,3,2,.94); backdrop-filter:blur(6px);
}
#adsim.show { display:grid; }
.adsim-box {
  width:min(460px,90vw); padding:28px 30px; text-align:center;
  background:var(--bg-soft); border:2px solid var(--accent);
  box-shadow:12px 12px 0 #000;
}
.adsim-tag {
  display:inline-block; padding:5px 12px; margin-bottom:20px;
  font:600 9px/1 var(--ui); letter-spacing:.2em; text-transform:uppercase;
  color:var(--bad); border:1px solid var(--bad);
}
.adsim-art { font-size:64px; line-height:1; animation:spin 4s linear infinite; margin-bottom:14px; }
.adsim-box b { display:block; font-family:var(--display); font-size:20px; text-transform:uppercase; }
.adsim-track { height:6px; background:#000; border:1px solid var(--border); margin:20px 0 10px; }
.adsim-track i { display:block; height:100%; width:0; background:var(--accent); transition:width .1s linear; }
#adsim-count { display:block; font:700 12px/1 var(--ui); color:var(--dim); margin-bottom:20px; }
#adsim-skip { width:100%; }

/* ---------- Effet-Regler (Touch) ---------- */
#spinbar {
  position:fixed; right:22px; bottom:44px; z-index:5;
  display:flex; align-items:center; gap:8px;
  opacity:0; transition:opacity .3s; pointer-events:none;
}
body.playing #spinbar { opacity:1; pointer-events:auto; }
#spinbar button {
  width:56px; height:56px; font-size:24px; line-height:1;
  color:var(--accent); background:rgba(8,6,4,.85); border:2px solid var(--border);
  transition:.16s var(--ease);
}
#spinbar button:hover { border-color:var(--accent); background:var(--accent); color:#000; }
#spinbar button:active { transform:translateY(2px); }
#spin-val {
  min-width:52px; text-align:center;
  font:700 13px/1 var(--ui); font-variant-numeric:tabular-nums; color:var(--dim);
}
#spin-val.act { color:#5ce1ff; }

/* ---------- Hochkant-Hinweis ---------- */
#rotate { position:fixed; inset:0; z-index:80; display:none; place-items:center;
  background:var(--bg); text-align:center; padding:30px; }
#rotate div { display:grid; gap:12px; }
.rot-ico { font-size:56px; animation:tilt 1.8s ease-in-out infinite; }
@keyframes tilt { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-90deg)} }
#rotate b { font-family:var(--display); font-size:22px; text-transform:uppercase; }
#rotate span:last-child { font:300 13px/1.6 var(--ui); color:var(--muted); }
@media (orientation:portrait) and (max-width:900px) { #rotate { display:grid; } }

/* Flacher Bildschirm = Handy quer. Nicht nach Breite gehen: ein
   Handy im Querformat ist breit, aber sehr niedrig. */
@media (max-height:560px) {
  #hint { display:none; }
  #hud-top { padding:8px 10px; }
  .scoreboard { top:6px; gap:12px; padding:6px 14px; box-shadow:4px 4px 0 rgba(255,140,26,.22); }
  .sb-num { font-size:22px; min-width:22px; }
  .sb-clock { font-size:17px; padding:0 11px; }
  .sb-lbl { font-size:8px; letter-spacing:.14em; max-width:74px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #hud-info { max-width:30%; gap:5px; }
  .hud-chip { padding:6px 9px; font-size:8px; letter-spacing:.1em; }
  #hud-info .hud-chip:first-child { display:none; }   /* Ballzustand weglassen */
  .btn-tiny.esc { height:34px; padding:0 12px; font-size:12px; }
  .bslot { width:46px; height:46px; font-size:19px; }
  .bslot .k { font-size:7px; } .bslot .n { font-size:9px; }
  #spinbar button { width:44px; height:44px; font-size:18px; }
  #spin-val { min-width:40px; font-size:11px; }
  #boostbar { bottom:10px; gap:8px; }
  #spinbar { bottom:10px; right:10px; gap:6px; }
}

/* Lange Gegnernamen nicht abschneiden, sondern sauber kuerzen */
.sb-lbl { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Eigenwerbung ---------- */
#housead { position:fixed; inset:0; z-index:60; display:none; place-items:center;
  background:rgba(4,3,2,.96); backdrop-filter:blur(6px); padding:20px; }
#housead.show { display:grid; }
.house-box { width:min(720px,94vw); background:var(--bg-soft);
  border:2px solid var(--accent); box-shadow:12px 12px 0 #000; padding:18px; }
.house-tag { display:inline-block; margin-bottom:12px; padding:4px 11px;
  font:600 9px/1 var(--ui); letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--border); }
#house-player { position:relative; width:100%; aspect-ratio:16/9; background:#000; }
#house-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
#house-note { display:block; margin:12px 0; font:300 11px/1.5 var(--ui); color:var(--dim); }
#house-cta { display:flex; align-items:center; gap:14px; padding:13px 16px;
  background:var(--accent); color:#000; text-decoration:none; transition:.16s var(--ease); }
#house-cta:hover { box-shadow:7px 7px 0 #000; transform:translate(-2px,-2px); }
.cta-ico { font-size:28px; }
.cta-txt { flex:1; min-width:0; }
.cta-txt b { display:block; font-family:var(--marker); font-size:19px; }
.cta-txt i { display:block; font:400 11px/1.4 var(--ui); font-style:normal; opacity:.8; }
.cta-go { font-family:var(--marker); font-size:15px; white-space:nowrap; }
#house-skip { width:100%; margin-top:12px; }
#house-skip:disabled { opacity:.4; }
@media (max-height:560px) {
  .house-box { width:min(540px,92vw); padding:12px; }
  #house-cta { padding:9px 12px; } .cta-txt i { display:none; }
  #house-note { margin:8px 0; }
}

/* ---------- Ligen ---------- */
.leagues { display:flex; gap:8px; margin-bottom:16px; }
.lg {
  position:relative;                 /* Anker fuer das Schloss */
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:11px 6px; background:var(--card); border:1px solid var(--border-soft);
  transition:.18s var(--ease);
}
.lg:hover { border-color:var(--accent); transform:translateY(-3px); }
.lg.sel { border-color:var(--accent); background:var(--card-hi); box-shadow:5px 5px 0 #000; }
.lg.locked { opacity:.5; }
.lg.locked::after {
  content:"🔒"; position:absolute; top:3px; right:4px;
  font-size:10px; line-height:1; opacity:.9;
}
.lg b { font:600 10px/1.1 var(--ui); letter-spacing:.08em; text-transform:uppercase; text-align:center; }
.lg-pts { font:700 15px/1 var(--ui); color:var(--gold); font-variant-numeric:tabular-nums; }
.lg-req { font:400 8px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }

.mode-row { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.mode-note { font:400 11px/1 var(--ui); color:var(--dim); margin-left:auto; }
.mode-row .seg button { padding:8px 14px; }

/* Gesperrter Boosterplatz */
.bslot.locked { opacity:.3; border-style:dashed; cursor:not-allowed; font-size:18px; }
.bslot .n em { font-style:normal; color:var(--bad); }

/* Rangzeile im Ergebnis */
.rankline { display:flex; align-items:center; gap:12px; margin:14px 0 6px;
  padding:11px 14px; background:var(--card); border:1px solid var(--border); }
.rl-l { flex:1; font:600 10px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.rl-d { font:700 15px/1 var(--ui); } .rl-d.up { color:var(--ok); } .rl-d.down { color:var(--bad); }
.rl-p { font:700 19px/1 var(--ui); color:var(--gold); font-variant-numeric:tabular-nums; }

@media (max-height:560px) { .leagues { gap:5px; } .lg { padding:7px 4px; } .lg-pts { font-size:13px; } }

/* ============================================================
   STARTBILDSCHIRM — Dichte
   Ein Laufband oben, eins unten. Der Inhalt dazwischen muss auch
   in einem kleinen Fenster passen, ohne zu ueberlaufen.
   ============================================================ */
.ticker.top    { position:fixed; left:-3%; right:-3%; top:-4px; }
.ticker.bottom { position:fixed; left:-3%; right:-3%; bottom:-4px; }

#menu.show { align-content:center; padding:66px 0; }
.menu-box { max-height:100%; overflow-y:auto; overflow-x:hidden; padding:2px; }
.menu-box::-webkit-scrollbar { width:0; }

.title-block { margin-bottom:22px; }
.title-block .kicker { margin-bottom:12px; }
.title-main { font-size:clamp(30px, 5.4vw, 74px); }
.tagline { margin-top:10px; font-size:13px; }

.leagues { margin-bottom:12px; }
.mode-row { margin-bottom:12px; }
.menu-actions { gap:12px; }
.menu-row { gap:12px; }
.loadout { margin-top:18px; }

/* Spielen-Knopf: Beschriftung darf nicht umbrechen und ueberlaufen */
.btn-play { height:clamp(74px, 11vh, 104px); }
.btn-play .sub { max-width:46%; }
.btn-play .sub b,
.btn-play .sub span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }

/* Wenig Hoehe: Beiwerk raus, damit das Wesentliche sichtbar bleibt */
@media (max-height:760px) {
  .tagline { display:none; }
  .title-block { margin-bottom:16px; }
  .title-main { font-size:clamp(28px, 4.6vw, 54px); }
  .btn-sm { height:52px; font-size:18px; }
  .loadout { margin-top:12px; padding:11px 14px; }
  .loadout .thumb { width:44px; height:44px; }
}
@media (max-height:600px) {
  #menu.show { padding:52px 0; }
  .title-block .kicker { display:none; }
  .lg-req { display:none; }
  .ticker { font-size:12px; padding:6px 0; }
}

/* Fortschritt der Werbung — ohne Restzeit bricht man eher ab */
.house-bar { height:5px; background:#000; border:1px solid var(--border); margin-top:10px; }
.house-bar i { display:block; height:100%; width:0; background:var(--accent);
  transition:width .2s linear; }

/* Gesperrte Liga: die Bedingung faellt auf, nicht das Schloss */
.lg-req.need { color:var(--gold); font-weight:600; }
.lg.locked { opacity:.72; }
.lg.locked b, .lg.locked .lg-pts { opacity:.5; }

/* Beim Ergebnis bleibt die Arena sichtbar — dort stehen die Figuren
   in ihrer Pose, das ist der Abschluss des Signaturmoments. */
body.menu-open #scrim { opacity:1; }
#result.show ~ #scrim, body.result-open #scrim {
  background:radial-gradient(120% 90% at 50% 55%, rgba(13,10,8,.30), rgba(6,4,3,.72));
  backdrop-filter:blur(1.5px) saturate(.85);
}

/* ---------- Einladungs-Link ---------- */
#mm-invite { display:none; margin:18px 0 4px; }
#mm-invite.show { display:block; }
#mm-invite .label { display:block; margin-bottom:9px; }
.invite-row { display:flex; gap:10px; }
#mm-link {
  flex:1; min-width:0; padding:11px 13px;
  font:400 12px/1 var(--ui); color:var(--accent);
  background:#000; border:1px solid var(--border);
  text-overflow:ellipsis;
}
#mm-link:focus { outline:none; border-color:var(--accent); }
#mm-copy { flex:none; }

/* ---------- Code zum Weitersagen ---------- */
.big-code {
  font-family:var(--display); font-weight:600;
  font-size:clamp(30px,5vw,46px); letter-spacing:.22em;
  color:var(--accent); text-shadow:0 0 30px var(--accent-glow);
  padding:14px 10px; background:#000; border:2px solid var(--accent);
  user-select:all; cursor:text;
}
.join-row { align-items:stretch; }
#join-code {
  flex:1; min-width:0; padding:0 16px; height:52px;
  font-family:var(--display); font-weight:600; font-size:19px;
  letter-spacing:.18em; text-transform:uppercase; text-align:center;
  color:var(--accent); background:#000; border:2px solid var(--border);
}
#join-code::placeholder { font-family:var(--ui); font-size:12px; letter-spacing:.14em; color:var(--dim); }
#join-code:focus { outline:none; border-color:var(--accent); }
.join-row .btn-tiny { height:52px; flex:none; }
@media (max-height:760px) { #join-code, .join-row .btn-tiny { height:44px; } .big-code { font-size:32px; padding:10px; } }

/* Gegnersuche: Ueberschrift kompakter, sonst wird die Karte zu hoch */
#matchmaking .result-card h2 { font-size:clamp(24px,3.2vw,34px); line-height:1.1; }
#matchmaking #mm-dots { margin:16px 0; }
#matchmaking #mm-status { min-height:44px; }

/* ---------- Rematch ---------- */
.rm-note { margin-top:12px; text-align:center;
  font:600 11px/1.5 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.btn.pulse { animation:rmPulse 1.1s ease-in-out infinite; }
@keyframes rmPulse {
  0%,100% { box-shadow:7px 7px 0 #000, 9px 9px 0 var(--accent-glow); }
  50%     { box-shadow:11px 11px 0 #000, 13px 13px 0 var(--accent-glow); }
}


/* ---- Werbe- und Namensfeld (CrazyGames-Vorgaben) ------------ */
.ico-play { width:19px; height:19px; margin-right:9px; vertical-align:-4px; flex:0 0 auto; }
.ico-play rect { fill:none; stroke:currentColor; stroke-width:2; opacity:.85; }
.ico-play .tri { fill:currentColor; }

.ad-optional {
  margin-top:9px; text-align:center; font-size:12.5px; letter-spacing:.01em;
  color:var(--muted); opacity:.85;
}

.namefield, .namefix {
  min-width:190px; height:40px; padding:0 14px; box-sizing:border-box;
  border-radius:11px; font:600 14.5px/38px Inter, system-ui, sans-serif;
  letter-spacing:.01em; color:var(--ink);
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
}
.namefield { cursor:text; user-select:text; -webkit-user-select:text; outline:none;
             transition:border-color .16s, background .16s; }
.namefield:focus { border-color:var(--acc); background:rgba(255,255,255,.09); }
.namefix { opacity:.7; text-align:center; }


/* ---- Stummschalter ------------------------------------------ */
#btn-mute { min-width:44px; padding:0 12px; font-size:17px; line-height:1; }
#btn-mute.off { opacity:.5; }

/* Zweistufiges Zurücksetzen statt Browser-Dialog */
.btn.armed { background:rgba(255,86,60,.16); border-color:rgba(255,86,60,.55); }


/* ---- Lehrleiste: kurz, unten, aus dem Weg --------------------- */
#coach {
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 14px);
  display:none; align-items:center; gap:16px;
  padding:11px 13px 11px 20px; border-radius:15px;
  background:rgba(14,10,7,.82); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 40px rgba(0,0,0,.45); backdrop-filter:blur(9px);
  opacity:0; transition:opacity .3s, transform .3s; z-index:40; pointer-events:none;
}
#coach.show { display:flex; opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
#coach .co-txt {
  font:600 15px/1 Inter, system-ui, sans-serif; letter-spacing:.01em; color:var(--ink);
  white-space:nowrap;
}
#coach .co-skip {
  font:600 13px/1 Inter, system-ui, sans-serif; color:var(--muted);
  padding:8px 13px; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  transition:color .15s, background .15s;
}
#coach .co-skip:hover { color:var(--ink); background:rgba(255,255,255,.12); }
@media (max-width:560px) {
  #coach { bottom:16px; gap:11px; padding:9px 10px 9px 15px; }
  #coach .co-txt { font-size:13.5px; }
}


/* Uebersetzungen sind laenger als das deutsche Original. Die
   schmale Beschriftungsspalte im Shop bekommt darum eine feste
   Breite und bricht sauber um, statt den Text daneben zu ueberdecken. */
.upg .un { min-width:96px; max-width:120px; overflow-wrap:anywhere; line-height:1.25; }


/* ============================================================
   RANDLOS

   Die Arena ist 2.116:1, fast jedes Fenster ist flacher oder
   hoeher. Statt schwarzer Balken fuellen wir den Rest mit der
   Halle selbst: dasselbe Bild formatfuellend, unscharf und
   abgedunkelt dahinter. Das Spielfeld bleibt dabei unangetastet
   vollstaendig sichtbar — Waende und Decke gehoeren zum Spiel und
   duerfen nicht angeschnitten werden.
   ============================================================ */
#stage::before {
  content:""; position:absolute; inset:-4%;      /* Ueberstand, damit die Unschaerfe keine Kante zeigt */
  background:url("assets/arena.jpg") center/cover no-repeat;
  filter:blur(26px) saturate(.7) brightness(.34);
  transform:scale(1.06);
  z-index:-2; pointer-events:none;
}
#stage::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 42%, rgba(0,0,0,.55) 100%);
  z-index:-1; pointer-events:none;
}
/* Die Leinwand bekommt eine weiche Kante statt einer harten Kachel */
#c { box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 30px 90px rgba(0,0,0,.6); }

/* ---- Vollbild-Knopf ------------------------------------------
   Kein frei schwebender Knopf: der fand an keiner Fenstergroesse
   einen Platz, ohne die Anzeige oder das Laufband zu ueberdecken.
   Stattdessen hat er zwei feste Plaetze — in der Spielleiste neben
   Ton und Pause, und im Menue neben Shop und Einstellungen.

   Beide werden ausgeblendet, sobald das Spiel auf CrazyGames
   laeuft: eigene Vollbild-Knoepfe sind dort ausdruecklich verboten. */
.btn.ico { display:none; align-items:center; justify-content:center; padding:0; }
.btn.ico.show { display:inline-flex; }
#btn-fs.show { width:44px; }
#btn-fs2.show { width:52px; flex:0 0 auto; }
.btn.ico svg { width:18px; height:18px; fill:none; stroke:currentColor;
               stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:560px) {
  #btn-fs.show { width:38px; }
  #btn-fs2.show { width:46px; }
}


/* ---- Installieren-Knopf (nur Website-Fassung) ----------------
   Taucht nur auf, wenn der Browser von sich aus signalisiert, dass
   eine Installation moeglich ist — und nie waehrend einer Partie. */
#btn-install {
  position:fixed; left:14px; bottom:14px; z-index:35;
  display:none; opacity:.8; backdrop-filter:blur(8px);
  background:rgba(14,10,7,.72);
}
body:not(.playing) #btn-install { display:inline-flex; }
#btn-install:hover { opacity:1; }
@media (max-width:560px) { #btn-install { left:10px; bottom:10px; } }


/* ============================================================
   HANDY — Ueberlauf und Last

   Drei Dinge, die im Querformat auf dem Telefon geklemmt haben:
   die Ergebniskarte war hoeher als der Schirm und nicht scrollbar,
   das Werbevideo passte nicht hinein, und im Hintergrund lief die
   Halle munter weiter und hat alles zaeh gemacht.
   ============================================================ */

/* Menue und Suchbildschirm ebenfalls scrollbar statt abgeschnitten */
#menu.show { display:flex; overflow-y:auto; -webkit-overflow-scrolling:touch;
             overscroll-behavior:contain; padding:16px 0; }
#menu.show > .menu-box { margin:auto; }

/* Werbe-Overlays: passen sich der Hoehe an und lassen sich rollen */
#housead.show, #adsim.show {
  display:flex; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
#housead.show > *, #adsim.show > * { margin:auto; }

/* Das Video darf nie hoeher werden als der Schirm hergibt */
#house-player { max-height:52vh; width:min(100%, calc(52vh * 16 / 9)); margin:0 auto; }

@media (max-height:520px) {
  .result-card { padding:18px 20px; }
  .result-card h2 { font-size:30px; }
  .final-score { margin-top:12px; gap:14px; }
  .final-score b { font-size:34px; }
  .payout { margin:14px 0 6px; }
  .pay-row { padding:6px 0; }
  .result-card .actions .btn-tiny { height:42px; }
  #house-player { max-height:44vh; width:min(100%, calc(44vh * 16 / 9)); }
  .house-box { padding:10px; }
  #house-note { display:none; }
}

/* Weichzeichner hinter Overlays kostet auf dem Telefon spuerbar
   Bilder pro Sekunde — auf kleinen Schirmen bleibt er weg. */
@media (max-width:900px) {
  #housead, #coach, #btn-install, #btn-fs { backdrop-filter:none; }
  #stage::before { filter:blur(14px) saturate(.7) brightness(.34); }
}

/* Animierte Einblendungen der Abrechnungszeilen: auf schwachen
   Geraeten und bei "weniger Bewegung" abschalten. */
@media (prefers-reduced-motion:reduce) {
  .pay-row { animation:none; opacity:1; }
  .result-card { animation:none; }
}

/* ============================================================
   PACKS, KARTEN, AUFDECKEN
   ============================================================ */

/* ---- Was gerade gesammelt wird ----------------------------- */
.hero-track {
  display:flex; align-items:center; gap:16px; padding:15px 18px;
  background:var(--card-hi); border:1px solid var(--accent);
  box-shadow:6px 6px 0 #000;
}
.hero-track img { width:52px; height:52px; object-fit:contain; flex:0 0 auto;
                  filter:drop-shadow(0 3px 8px rgba(0,0,0,.6)); }
.ht-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.ht-txt b { font-family:var(--marker); font-size:17px; }
.ht-txt span { font:300 11.5px/1.4 var(--ui); color:var(--muted); }
.ht-bar { display:block; height:7px; background:#000; border:1px solid var(--border-soft); padding:0; }
.ht-bar i { display:block; height:100%; background:var(--accent);
            transition:width .5s var(--ease); }
.ht-n { font:700 15px/1 var(--ui); color:var(--gold); font-variant-numeric:tabular-nums; flex:0 0 auto; }

/* ---- Gratis-Reihe ------------------------------------------ */
.freerow { display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:12px; }
.freecard {
  display:flex; align-items:center; gap:13px; padding:14px 16px; text-align:left;
  background:var(--card); border:1px solid var(--border); color:var(--ink);
  cursor:pointer; transition:.16s var(--ease); font:inherit;
}
.freecard:hover:not(:disabled) { border-color:var(--accent); transform:translateY(-2px);
                                 box-shadow:5px 5px 0 #000; }
.freecard.spent, .freecard:disabled { opacity:.42; cursor:default; }
.fc-ico { font-size:26px; line-height:1; flex:0 0 auto; }
.freecard .ico-play { width:24px; height:24px; margin:0; flex:0 0 auto; }
.fc-t { display:flex; flex-direction:column; gap:3px; min-width:0; }
.fc-t b { font-family:var(--marker); font-size:15px; }
.fc-t i { font:300 11px/1.35 var(--ui); font-style:normal; color:var(--muted); }

/* ---- Die Packs --------------------------------------------- */
.packs { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.pack {
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:22px 16px 18px; text-align:center; font:inherit; color:var(--ink);
  background:var(--card); border:2px solid var(--pc); cursor:pointer;
  transition:.18s var(--ease);
}
.pack:hover:not(:disabled) { transform:translateY(-4px); box-shadow:8px 8px 0 #000; }
.pack:disabled { opacity:.45; cursor:default; }
.pk-glow { position:absolute; inset:-40% -10% auto; height:120px; z-index:-1;
           background:radial-gradient(ellipse at center, var(--pc), transparent 70%);
           opacity:.20; pointer-events:none; }
.pk-n { font:700 40px/1 var(--ui); color:var(--pc); letter-spacing:-.03em;
        font-variant-numeric:tabular-nums; }
.pk-name { font-family:var(--marker); font-size:17px; }
.pk-sub { font:300 11px/1.35 var(--ui); color:var(--muted); min-height:30px; }
.pk-bits { display:flex; flex-direction:column; gap:3px; margin:2px 0 4px; }
.pk-bits i { font:600 9.5px/1.3 var(--ui); font-style:normal; letter-spacing:.1em;
             text-transform:uppercase; color:var(--dim); }
.pk-buy { display:flex; align-items:center; gap:7px; margin-top:2px;
          padding:8px 16px; background:var(--pc); color:#000;
          font-family:var(--marker); font-size:15px; }
.pack.mega { grid-column:1 / -1; flex-direction:row; justify-content:center; gap:22px;
             padding:18px 22px; }
.pack.mega .pk-sub { min-height:0; }
.pack.mega .pk-bits { flex-direction:row; gap:14px; }

/* ---- Kartenbalken (Booster und Figuren) -------------------- */
.cardbar { display:flex; align-items:center; gap:13px; margin:4px 0 10px; }
.cb-l { font:600 10px/1.2 var(--ui); letter-spacing:.11em; text-transform:uppercase;
        color:var(--muted); flex:0 0 auto; max-width:190px; }
.cb-track { flex:1; height:9px; background:#000; border:1px solid var(--border-soft); }
.cb-track i { display:block; height:100%; background:var(--accent); transition:width .45s var(--ease); }
.cb-n { font:700 13px/1 var(--ui); color:var(--gold); font-variant-numeric:tabular-nums; flex:0 0 auto; }

/* Ausbaupunkte, die die Figurenstufe schon erlaubt, aber noch nicht gekauft sind */
.pips i.free { background:transparent; border-color:var(--accent); opacity:.55; }

/* ---- Aufdecken --------------------------------------------- */
#reveal { position:fixed; inset:0; z-index:70; display:none;
          background:rgba(4,3,2,.94); padding:20px; overflow-y:auto;
          -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
#reveal.show { display:flex; }
.rv-box { margin:auto; width:min(760px,96vw); background:var(--bg-soft);
          border:2px solid var(--accent); box-shadow:12px 12px 0 #000; padding:20px; }
.rv-head { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; }
.rv-head b { font-family:var(--display); font-weight:600; font-size:26px; text-transform:uppercase; }
.rv-head span { font:600 10px/1 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.rv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }

.rc { position:relative; aspect-ratio:3/4; padding:0; border:0; background:none;
      cursor:pointer; perspective:600px; font:inherit; }
.rc-back, .rc-face {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  backface-visibility:hidden; transition:transform .42s var(--ease);
  border:2px solid var(--rc);
}
.rc-back { background:linear-gradient(150deg,#221812,#120d09);
           box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.rc-back::after { content:"🏀"; font-size:26px; opacity:.5; }
.rc-face { background:var(--card-hi); transform:rotateY(180deg);
           box-shadow:inset 0 0 26px color-mix(in srgb, var(--rc) 22%, transparent); }
.rc.up .rc-back { transform:rotateY(-180deg); }
.rc.up .rc-face { transform:rotateY(0deg); }
.rc-face img { width:52%; object-fit:contain; }
.rc-ico { font-size:30px; line-height:1; }
.rc-face b { font:600 10.5px/1.15 var(--ui); text-align:center; padding:0 6px;
             overflow-wrap:anywhere; }
.rc-face i { font:700 9px/1 var(--ui); font-style:normal; letter-spacing:.12em;
             text-transform:uppercase; color:var(--rc); }

.rv-foot { display:flex; align-items:center; gap:12px; margin-top:18px; }
#rv-dust { flex:1; font:600 12px/1.3 var(--ui); color:var(--gold); }

@media (max-height:520px) {
  .rv-box { padding:12px; }
  .rv-head b { font-size:20px; }
  .rv-grid { grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:7px; }
  .pack { padding:14px 12px 12px; }
  .pk-n { font-size:30px; }
  .pk-sub { min-height:0; }
}
.bcard.locked { opacity:.5; }
.bcard.locked .bico { filter:grayscale(1); }

/* ---- Name im Hauptmenü --------------------------------------
   Er stand vorher nur tief im Shop. Im Duell muss sofort klar
   sein, wer wer ist. */
.namerow {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:16px; padding:11px 14px;
  background:var(--card); border:1px solid var(--border-soft);
}
.nr-l { font:600 9.5px/1 var(--ui); letter-spacing:.18em; text-transform:uppercase;
        color:var(--dim); flex:0 0 auto; }
.nr-in, .nr-fix {
  min-width:150px; max-width:220px; height:36px; padding:0 12px; box-sizing:border-box;
  border-radius:9px; font:600 14px/34px var(--marker), Inter, sans-serif;
  color:var(--ink); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
}
.nr-in { cursor:text; user-select:text; -webkit-user-select:text; outline:none;
         transition:border-color .16s, background .16s; }
.nr-in:focus { border-color:var(--accent); background:rgba(255,255,255,.09); }
.nr-fix { opacity:.75; }
.nr-note { font:300 10.5px/1.3 var(--ui); color:var(--muted); flex:1; min-width:120px; }
@media (max-height:600px) { .namerow { margin-bottom:10px; padding:8px 12px; } .nr-note { display:none; } }
/* Ein frisch ausgegebener Code muss auffallen — der alte ist tot. */
.wcode.frisch { animation:codePuls 1s var(--ease) 3; }
@keyframes codePuls {
  0%,100% { box-shadow:0 0 0 0 rgba(255,180,61,0); }
  50%     { box-shadow:0 0 0 4px rgba(255,180,61,.45); }
}

/* ============================================================
   FINGER STATT MAUS

   Der richtige Signalgeber ist nicht die Fensterbreite, sondern
   womit gezielt wird: pointer:coarse heisst Finger. Ein Daumen
   trifft eine 26 px hohe Schaltfläche nicht zuverlässig — 40 px
   sind das anerkannte Mindestmass.

   Gegengerechnet wird der Platz an anderer Stelle: auf flachen
   Schirmen schrumpfen Abstände und Titel, nicht die Bedienung.
   ============================================================ */
@media (pointer: coarse) {
  .seg button,
  #shop-tabs button { min-height:40px; padding:0 14px; }
  .mode-row .seg button { padding:0 14px; }
  .btn-tiny { min-height:44px; }
  .freecard { min-height:56px; }
  .lg { min-height:56px; }
  .bcard { min-height:96px; }
  .namerow .nr-in, .wfield { height:44px; line-height:42px; }
  .rc { min-height:104px; }
  /* Zwischen kleinen Knöpfen etwas mehr Luft, damit man nicht
     versehentlich den Nachbarn erwischt. */
  .actions { gap:10px; }
  .wbtns { gap:10px; }
}

/* Auf flachen Schirmen den Platz bei Abständen und Schrift holen,
   nicht bei den Schaltflächen. */
@media (pointer: coarse) and (max-height:460px) {
  .title-block { margin-bottom:14px; }
  .title-main { font-size:clamp(30px,7vw,44px); }
  .title-block .kicker, .tagline { display:none; }
  .namerow { margin-bottom:10px; padding:7px 12px; }
  .nr-note { display:none; }
  .mode-row { margin-bottom:10px; }
  .menu-row { margin-top:8px; }
  .shop-detail, .pane-scroll { padding:16px 18px 50px; }
  .set-body { padding:16px 18px; }
  .label { margin-bottom:8px !important; }
}

/* ============================================================
   ERGEBNISKARTE IM QUERFORMAT

   Gemessen: auf 844x390 war die Karte 553 px hoch und musste
   gerollt werden. Erreichbar war alles, platzsparend nicht.

   Ein Handy im Querformat hat aber reichlich BREITE. Die Karte
   wird deshalb zweispaltig: links das Ergebnis, rechts die
   Abrechnung und die Knoepfe. Damit passt sie ohne Rollen.
   ============================================================ */
/* Bis 620 px Hoehe: das deckt Handys im Querformat UND flache
   Tablets ab. Ein Rechner ist praktisch immer hoeher und behaelt
   die einspaltige Karte. */
@media (max-height:620px) and (min-width:620px) {
  .result-card {
    width:min(760px, 96vw);
    display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
    column-gap:24px; align-content:start; padding:16px 20px;
  }
  .result-card h2      { grid-column:1; font-size:26px; }
  .result-card .swish  { grid-column:1; margin-top:6px; font-size:14px; }
  .final-score         { grid-column:1; margin-top:10px; gap:12px; }
  .final-score b       { font-size:30px; }
  .rankline            { grid-column:1; margin-top:12px; }
  .cond-row            { grid-column:1; margin-top:10px !important; }

  .payout              { grid-column:2; grid-row:1 / span 5; margin:0; align-self:start; }
  .pay-row             { padding:5px 0; }
  .pay-row .pl         { font-size:10px; }
  .pay-row.tot .pv     { font-size:19px; }
  #btn-double          { grid-column:2; height:46px !important; margin-top:12px !important; }
  .ad-optional         { grid-column:2; margin-top:5px; font-size:11px; }
  .result-card .actions{ grid-column:2; margin-top:10px; }
  .result-card .actions .btn-tiny { height:44px; }
  .rm-note             { grid-column:1 / -1; }
}

/* Das Tutorial erklärt sich am Boden. Vom Kasten bleibt nur das
   Überspringen — dezent, aber vorhanden: ein Tutorial muss
   überspringbar sein. */
#coach { background:none; box-shadow:none; border:none; padding:0; }
#coach .co-skip { opacity:.6; }
#coach .co-skip:hover { opacity:1; }