/* ════════════════════════════════════════════════════════════════════
   ALEX & GROSS WM-ARENA 2026 — Design-Tokens
   Brand-Farben zentral hier tauschbar (exakte CI-Werte ggf. anpassen)
   ════════════════════════════════════════════════════════════════════ */
:root{
  --night:#0a0e13;          /* Stadion bei Nacht */
  --night-2:#11161e;
  --pitch:#0f3a2c;          /* Rasen, nur in Verläufen */
  --chalk:#f2f5ef;          /* Kreidelinien / Text */
  --chalk-dim:#9aa4ad;
  --line:rgba(242,245,239,.14);
  --brand:#e6007e;          /* ALEX & GROSS Magenta */
  --brand-soft:rgba(230,0,126,.16);
  --gold:#f2c14e;           /* Wettkönig */
  --ok:#37d27a;
  --radius:14px;
  --disp:'Anton', sans-serif;
  --body:'Archivo', system-ui, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; color:var(--chalk);
  font:16px/1.55 var(--body);
  background:
    radial-gradient(1100px 480px at 50% -160px, rgba(230,0,126,.13), transparent 60%),
    radial-gradient(1400px 700px at 50% 115%, rgba(15,58,44,.55), transparent 65%),
    var(--night);
}
/* Flutlicht-Kegel */
.floodlight{position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    conic-gradient(from 168deg at 18% -8%, transparent 0 8deg, rgba(242,245,239,.045) 8deg 18deg, transparent 18deg),
    conic-gradient(from 175deg at 82% -8%, transparent 0 8deg, rgba(242,245,239,.045) 8deg 18deg, transparent 18deg);
}
a{color:inherit}
.wrap{position:relative; z-index:1; max-width:1060px; margin:0 auto; padding:28px 20px 80px}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar{position:relative; z-index:2; display:flex; align-items:center; gap:26px;
  padding:14px 22px; border-bottom:1px solid var(--line);
  background:rgba(10,14,19,.78); backdrop-filter:blur(8px); flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:10px; text-decoration:none}
.brand-mark{font-family:var(--disp); font-size:30px; letter-spacing:.02em}
.brand-mark .amp{color:var(--brand)}
.brand-sub{font-size:11px; letter-spacing:.32em; color:var(--chalk-dim)}
.brand-sub b{color:var(--chalk)}
.nav{display:flex; gap:4px; flex-wrap:wrap}
.nav a{padding:8px 13px; border-radius:999px; text-decoration:none; font-weight:600;
  font-size:14px; color:var(--chalk-dim)}
.nav a:hover{color:var(--chalk)}
.nav a.on{color:var(--chalk); background:var(--brand-soft); box-shadow:inset 0 0 0 1px rgba(230,0,126,.45)}
.userbox{margin-left:auto; display:flex; align-items:center; gap:12px}
.hello{font-size:14px; color:var(--chalk-dim)}

/* ── Typo & Bausteine ───────────────────────────────────── */
h1.display{font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:clamp(40px,7vw,84px); line-height:.95; margin:.2em 0 .25em; letter-spacing:.01em}
h1.display .hl{color:var(--brand)}
.kicker{letter-spacing:.3em; font-size:12px; text-transform:uppercase; color:var(--chalk-dim)}
h2{font-family:var(--disp); font-weight:400; text-transform:uppercase; font-size:26px;
  letter-spacing:.03em; margin:38px 0 14px}
.lead{font-size:18px; color:var(--chalk-dim); max-width:60ch}
.card{background:var(--night-2); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.btn{display:inline-block; border:0; cursor:pointer; text-decoration:none; font:600 15px var(--body);
  padding:12px 22px; border-radius:999px; color:#fff; background:var(--brand);
  box-shadow:0 0 0 0 rgba(230,0,126,.5); transition:box-shadow .25s, transform .15s}
.btn:hover{box-shadow:0 0 24px 0 rgba(230,0,126,.45); transform:translateY(-1px)}
.btn-ghost{background:transparent; box-shadow:inset 0 0 0 1px var(--line); color:var(--chalk)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--chalk-dim)}
.btn-s{padding:7px 14px; font-size:13px}
.field{margin-bottom:16px}
.field label{display:block; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--chalk-dim); margin-bottom:6px}
.field input, .field select{width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--night); color:var(--chalk); font:15px var(--body)}
.field input:focus, .field select:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:transparent}
.msg{padding:12px 16px; border-radius:10px; margin-bottom:18px; font-weight:600}
.msg-err{background:rgba(255,70,70,.12); color:#ff9c9c; border:1px solid rgba(255,70,70,.35)}
.msg-ok{background:rgba(55,210,122,.1); color:var(--ok); border:1px solid rgba(55,210,122,.35)}

/* ── Hero / Landing ─────────────────────────────────────── */
.hero{padding:64px 0 30px; text-align:center}
.hero .center-circle{width:120px; height:60px; margin:0 auto 8px; border:1.5px solid var(--line);
  border-bottom:0; border-radius:120px 120px 0 0; position:relative}
.hero .center-circle::after{content:''; position:absolute; left:50%; bottom:-4px; width:8px; height:8px;
  background:var(--brand); border-radius:50%; transform:translateX(-50%)}
.countdown{display:flex; gap:14px; justify-content:center; margin:26px 0; flex-wrap:wrap}
.cd-cell{min-width:84px; padding:14px 10px; border:1px solid var(--line); border-radius:12px; background:var(--night-2)}
.cd-cell b{display:block; font-family:var(--disp); font-size:36px; font-weight:400; font-variant-numeric:tabular-nums}
.cd-cell span{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--chalk-dim)}
.auth-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:860px; margin:30px auto 0; text-align:left}
@media(max-width:760px){.auth-grid{grid-template-columns:1fr}}

/* ── Spieltag / Match-Karten ────────────────────────────── */
.daybar{position:sticky; top:0; z-index:3; margin:34px 0 12px; padding:9px 16px;
  font-family:var(--disp); letter-spacing:.06em; text-transform:uppercase; font-size:17px;
  background:linear-gradient(90deg, var(--brand-soft), transparent 70%);
  border-left:3px solid var(--brand); backdrop-filter:blur(6px)}
.match{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--night-2); margin-bottom:10px}
@media(max-width:680px){.match{grid-template-columns:1fr; text-align:center}}
.team{display:flex; align-items:center; gap:10px; font-weight:600; font-size:17px; min-width:0}
.team .flag{font-size:26px}
img.flag-svg{width:1.2em;height:1.2em;vertical-align:-.18em;display:inline-block}
.team-h{justify-content:flex-end; text-align:right}
@media(max-width:680px){.team,.team-h{justify-content:center; text-align:center}}
.match-meta{grid-column:1/-1; display:flex; gap:14px; font-size:12.5px; color:var(--chalk-dim);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:2px}
.match-meta .grp{color:var(--brand); font-weight:700}

/* Signatur: Scoreboard-Eingabe */
.scoreboard{display:flex; align-items:center; gap:8px; justify-content:center}
.sb-cell{position:relative}
.sb-cell input{width:62px; height:62px; text-align:center; border-radius:10px;
  border:1px solid var(--line); background:linear-gradient(180deg,#161c25 48%, #10151d 52%);
  color:var(--chalk); font-family:var(--disp); font-size:32px; font-variant-numeric:tabular-nums;
  -moz-appearance:textfield; appearance:textfield; caret-color:var(--brand);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.5)}
.sb-cell input::-webkit-outer-spin-button,.sb-cell input::-webkit-inner-spin-button{-webkit-appearance:none}
.sb-cell input:focus{outline:2px solid var(--brand); outline-offset:1px}
.sb-colon{font-family:var(--disp); font-size:30px; color:var(--chalk-dim)}
.sb-step{position:absolute; left:0; right:0; height:16px; border:0; cursor:pointer;
  background:transparent; color:var(--chalk-dim); font-size:11px; line-height:1}
.sb-step:hover{color:var(--brand)}
.sb-up{top:-17px}.sb-down{bottom:-17px}
.scoreboard.locked input{background:var(--night); color:var(--chalk-dim)}
.save-dot{width:9px; height:9px; border-radius:50%; background:transparent; transition:background .2s}
.save-dot.saving{background:var(--gold)}
.save-dot.saved{background:var(--ok)}
.result-chip{font-family:var(--disp); font-size:24px; letter-spacing:.05em}
.pts-chip{display:inline-block; min-width:46px; text-align:center; padding:5px 10px; border-radius:999px;
  font-weight:800; font-size:13px}
.pts-0{background:rgba(255,255,255,.06); color:var(--chalk-dim)}
.pts-hit{background:var(--brand-soft); color:var(--brand)}
.pts-max{background:rgba(242,193,78,.15); color:var(--gold)}
details.peers{grid-column:1/-1; font-size:14px; color:var(--chalk-dim)}
details.peers summary{cursor:pointer; color:var(--chalk-dim)}
details.peers table{width:100%; margin-top:8px; border-collapse:collapse}
details.peers td{padding:4px 8px; border-top:1px solid var(--line)}

/* ── Rangliste ──────────────────────────────────────────── */
.lb{width:100%; border-collapse:collapse}
.lb th{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--chalk-dim);
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--line)}
.lb td{padding:13px 12px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
.lb tr.me td{background:var(--brand-soft)}
.lb .rank{font-family:var(--disp); font-size:20px; width:54px}
.lb tr.king td{background:linear-gradient(90deg, rgba(242,193,78,.14), transparent 65%)}
.crown{font-size:20px; margin-right:6px}
.lb .pts{font-weight:800; font-size:17px}

/* ── Tabellen / Admin ───────────────────────────────────── */
.tbl{width:100%; border-collapse:collapse; font-size:14.5px}
.tbl th,.tbl td{padding:9px 10px; border-bottom:1px solid var(--line); text-align:left}
.inline-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.inline-form input[type=number]{width:58px; padding:8px; text-align:center; border-radius:8px;
  border:1px solid var(--line); background:var(--night); color:var(--chalk)}

.foot{position:relative; z-index:1; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  max-width:1060px; margin:0 auto; padding:22px 20px 40px; border-top:1px solid var(--line);
  color:var(--chalk-dim); font-size:13px; letter-spacing:.04em}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}