:root{
  --bg:#0a1f3c;          /* tiefes Stadion-Nachtblau */
  --bg2:#0e2a52;
  --card:#13315f;
  --card2:#16386b;
  --line:#27518f;
  --ink:#eaf2ff;
  --ink-dim:#9bb4dd;
  --usa:#3b82f6;         /* blau */
  --mex:#22c55e;         /* gruen */
  --can:#ef4444;         /* rot */
  --gold:#fbbf24;
  --gold2:#f59e0b;
  --pitch:#15803d;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --radius:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(34,197,94,.15), transparent 60%),
    linear-gradient(160deg,var(--bg),var(--bg2));
  color:var(--ink);
  min-height:100vh;
  padding-bottom:60px;
}

/* ---- Header ---- */
header{
  max-width:1100px;margin:0 auto;padding:28px 20px 10px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.emblem{flex:0 0 auto}
.title h1{
  font-size:30px;font-weight:900;letter-spacing:-.5px;line-height:1;
  background:linear-gradient(90deg,var(--usa),var(--mex),var(--can));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.title p{color:var(--ink-dim);font-size:14px;margin-top:4px}
.user-chip{
  margin-left:auto;display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--line);
  padding:8px 14px;border-radius:999px;font-size:14px;
}
.user-chip .dot{width:9px;height:9px;border-radius:50%;background:var(--mex);box-shadow:0 0 8px var(--mex)}
.logout-btn{
  background:transparent;border:1px solid var(--line);color:var(--ink-dim);
  font-size:12px;padding:4px 10px;border-radius:8px;cursor:pointer;margin-left:4px;
}
.logout-btn:hover{color:var(--ink);border-color:var(--ink-dim)}

/* ---- Tabs ---- */
.tabs{
  max-width:1100px;margin:18px auto 0;padding:0 20px;
  display:flex;gap:10px;
}
.tab{
  flex:1;padding:14px;border:1px solid var(--line);background:var(--card);
  border-radius:14px 14px 0 0;font-size:16px;font-weight:700;cursor:pointer;
  color:var(--ink-dim);transition:.2s;display:flex;align-items:center;justify-content:center;gap:8px;
}
.tab.active{background:var(--card2);color:var(--ink);border-bottom-color:transparent}
.tab:hover{color:var(--ink)}

/* ---- Layout ---- */
main{max-width:1100px;margin:0 auto;padding:0 20px}
.panel{display:none;animation:fade .35s ease}
.panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.grid{display:grid;grid-template-columns:1.3fr .9fr;gap:20px;margin-top:20px}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);
}
.card h2{font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);margin-bottom:16px;font-weight:800}

/* ---- Live-Spiel-Karte ---- */
.live-match{
  background:linear-gradient(135deg,var(--card2),var(--card));
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.live-pill{
  position:absolute;top:18px;right:18px;display:flex;align-items:center;gap:6px;
  background:rgba(239,68,68,.15);border:1px solid var(--can);color:#ffb3b3;
  padding:5px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.5px;
}
.live-pill .blink{width:8px;height:8px;border-radius:50%;background:var(--can);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.lm-comp{font-size:12px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:18px}
.lm-teams{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lm-team{flex:1;text-align:center}
.flag{font-size:46px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.lm-team .name{font-weight:800;margin-top:8px;font-size:17px}
.lm-score{font-size:54px;font-weight:900;letter-spacing:-2px;min-width:130px;text-align:center}
.lm-score .min{display:block;font-size:13px;color:var(--gold);font-weight:700;letter-spacing:1px}

/* ---- Pot ---- */
.pot-wrap{text-align:center}
.pot-jar{
  width:150px;height:170px;margin:8px auto 14px;position:relative;
}
.pot-glass{
  position:absolute;inset:0;border:3px solid var(--line);border-top:none;
  border-radius:0 0 24px 24px;background:rgba(255,255,255,.03);overflow:hidden;
}
.coin{position:absolute;font-size:22px;animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
/* Muenzen im Pott */
.coin-stack{position:absolute;inset:0;pointer-events:none}
.stack-coin{
  position:absolute;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fde68a,var(--gold) 55%,var(--gold2));
  border:2px solid #d97706;color:#92400e;font-weight:900;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.stack-coin.dropping{animation:drop .8s cubic-bezier(.4,1.6,.5,1)}
@keyframes drop{
  0%{transform:translateY(-180px) rotate(0);opacity:0}
  30%{opacity:1}
  70%{transform:translateY(8px) rotate(360deg)}
  85%{transform:translateY(-6px) rotate(360deg)}
  100%{transform:translateY(0) rotate(360deg)}
}
.pot-amount{font-size:42px;font-weight:900;color:var(--gold)}
.pot-sub{color:var(--ink-dim);font-size:13px;margin-top:2px}
.pot-players{margin-top:14px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.pp{background:var(--bg2);border:1px solid var(--line);padding:4px 10px;border-radius:999px;font-size:12px}
.pp.paid::before{content:"✓ ";color:var(--mex)}

/* ---- Tipp-Formular ---- */
.deadline{
  display:flex;align-items:center;gap:10px;background:rgba(251,191,36,.1);
  border:1px solid var(--gold);border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:14px;
}
.deadline b{color:var(--gold)}
/* gesperrter Zustand + Countdown */
.lock-banner{
  display:flex;align-items:center;gap:10px;background:rgba(100,116,139,.12);
  border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:14px;color:var(--ink-dim);
}
.lock-banner b{color:var(--ink)}
.open-countdown{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(34,197,94,.1);border:1px solid var(--mex);
  border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:14px;
}
.open-countdown b{
  font-size:20px;font-weight:900;letter-spacing:1px;color:var(--mex);
  font-variant-numeric:tabular-nums;
}
.countdown-box{
  text-align:center;background:var(--bg);border:1px solid var(--line);
  border-radius:16px;padding:18px;margin-top:6px;
}
.cd-label{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--ink-dim);margin-bottom:8px}
.cd-timer{
  font-size:42px;font-weight:900;letter-spacing:2px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg,var(--usa),var(--mex));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tipp-match{display:flex;align-items:center;justify-content:center;gap:18px;margin:24px 0}
.tipp-team{text-align:center;font-weight:800}
.tipp-team .flag{font-size:40px}
.tipp-team .name{font-size:14px;margin-top:6px}
.score-input{
  width:78px;height:90px;font-size:46px;font-weight:900;text-align:center;
  background:var(--bg);border:2px solid var(--line);border-radius:16px;color:var(--ink);
  transition:.2s;
}
.score-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(251,191,36,.15)}
.colon{font-size:44px;font-weight:900;color:var(--ink-dim)}
.btn{
  width:100%;padding:16px;border:none;border-radius:14px;font-size:17px;font-weight:800;
  cursor:pointer;background:linear-gradient(90deg,var(--mex),#16a34a);color:#03200f;
  transition:.2s;letter-spacing:.3px;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(34,197,94,.35)}
.btn:active{transform:none}
.btn.locked{background:var(--card);color:var(--ink-dim);cursor:not-allowed;border:1px solid var(--line)}
.btn.locked:hover{transform:none;box-shadow:none}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.form-error{color:#ffb3b3;font-size:13px;margin-top:10px;text-align:center;min-height:16px}

/* ---- Tipps-Liste (verschleiert) ---- */
.tipps-list{margin-top:8px}
.tipp-row{
  display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);
  transition:background .3s;
}
.tipp-row:last-child{border-bottom:none}
.rank{
  width:24px;flex:0 0 auto;text-align:center;font-weight:900;font-size:15px;color:var(--ink-dim);
}
.tipp-row.leader .rank{color:var(--gold)}
.tipp-row.leader{background:linear-gradient(90deg,rgba(251,191,36,.12),transparent);
  border-radius:10px;padding-left:6px;border-bottom-color:transparent}
.tipp-row.leader .tipp-name::after{content:" 👑"}
.tipp-row.winner{background:linear-gradient(90deg,rgba(34,197,94,.16),transparent);border-radius:10px;padding-left:6px}
.avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;flex:0 0 auto;color:#04122b}
.tipp-name{flex:1;font-weight:700;font-size:15px}
.won-tag{
  display:inline-block;background:rgba(251,191,36,.18);border:1px solid var(--gold);
  color:var(--gold);font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;
  margin-left:4px;vertical-align:middle;
}
.won-tag.zero{background:transparent;border-color:var(--line);color:var(--ink-dim)}
.jackpot-note{
  margin-top:10px;font-size:12px;color:var(--gold);font-weight:700;
  background:rgba(251,191,36,.08);border-radius:10px;padding:6px 10px;
}
.tipp-val{font-weight:900;font-size:18px;letter-spacing:-.5px}
.tipp-val.hidden{color:var(--ink-dim);font-size:14px;font-weight:600;letter-spacing:1px}
.tipp-val.out{color:var(--can);font-size:13px;font-weight:700}
.reveal-note{
  background:rgba(59,130,246,.1);border:1px solid var(--usa);border-radius:12px;
  padding:12px 16px;font-size:13px;color:#bcd4ff;margin-bottom:14px;display:flex;gap:10px;align-items:center;
}
.winner-flash{
  background:linear-gradient(90deg,rgba(251,191,36,.2),rgba(34,197,94,.12));
  border:1px solid var(--gold);border-radius:12px;padding:12px 16px;margin-bottom:14px;
  font-size:14px;font-weight:700;color:var(--gold);text-align:center;
}

/* ---- Spielplan ---- */
.stage-title{font-size:20px;font-weight:900;margin:28px 0 14px;display:flex;align-items:center;gap:10px}
.stage-title .badge{background:var(--gold);color:#3a2400;font-size:11px;padding:3px 10px;border-radius:999px;font-weight:800;letter-spacing:.5px}
.stage-title .badge.muted{background:var(--line);color:var(--ink-dim)}
.fixtures{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.fix{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;
  display:flex;flex-direction:column;gap:10px;transition:.2s;
}
.fix.de{border-color:var(--gold);background:linear-gradient(135deg,rgba(251,191,36,.08),var(--card))}
.fix.tippbar{border-color:var(--mex);background:linear-gradient(135deg,rgba(34,197,94,.06),var(--card))}
.fix.final{border-color:var(--gold);border-width:2px;background:linear-gradient(135deg,rgba(251,191,36,.14),var(--card))}
.fix:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.fix-top{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.5px}
.fix-row{display:flex;align-items:center;gap:10px}
.fix-row .flag{font-size:24px}
.fix-row .tname{flex:1;font-weight:700;font-size:15px}
.fix-row .tscore{font-weight:900;font-size:20px;min-width:28px;text-align:center}
.fix-row.win .tname{color:var(--ink)}
.fix-row.lose{opacity:.5}
.fix-status{font-size:11px;font-weight:800;letter-spacing:.5px;text-align:center;padding-top:4px;border-top:1px solid var(--line)}
.fix-status.ft{color:var(--ink-dim)}
.fix-status.live{color:#ffb3b3}
.fix-status.upcoming{color:var(--gold)}
.tbd{font-style:italic;color:var(--ink-dim);font-weight:600}
footer{text-align:center;color:var(--ink-dim);font-size:12px;margin-top:40px}

/* ---- Login-Overlay ---- */
.login-overlay{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(1000px 500px at 80% -10%, rgba(59,130,246,.2), transparent 60%),
    radial-gradient(800px 400px at 10% 110%, rgba(34,197,94,.16), transparent 60%),
    linear-gradient(160deg,var(--bg),var(--bg2));
  padding:20px;
}
.login-card{
  width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:32px 26px;box-shadow:var(--shadow);text-align:center;
}
.login-card h1{
  font-size:24px;font-weight:900;margin:14px 0 4px;
  background:linear-gradient(90deg,var(--usa),var(--mex),var(--can));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.login-card p{color:var(--ink-dim);font-size:13px;margin-bottom:22px}
.login-field{text-align:left;margin-bottom:14px}
.login-field label{display:block;font-size:12px;color:var(--ink-dim);margin-bottom:6px;letter-spacing:.5px}
.login-field input,.login-field select{
  width:100%;padding:13px 14px;font-size:15px;background:var(--bg);
  border:1px solid var(--line);border-radius:12px;color:var(--ink);
}
.login-field input:focus,.login-field select:focus{outline:none;border-color:var(--gold)}
.login-error{color:#ffb3b3;font-size:13px;min-height:18px;margin-bottom:8px}
.hide{display:none !important}

/* ---- Datenquelle-Hinweise + manueller Live-Stand ---- */
.delay-hint{margin-top:14px;font-size:12px;color:var(--ink-dim);background:rgba(100,116,139,.12);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.live-editor{background:var(--bg);border:1px solid var(--mex);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.live-editor-label{font-size:12px;font-weight:700;color:var(--mex);margin-bottom:8px}
.live-editor-label .muted{color:var(--ink-dim);font-weight:500}
.live-editor-row{display:flex;align-items:center;gap:8px}
.ls-input{width:52px;height:46px;font-size:24px;font-weight:900;text-align:center;background:var(--card);border:2px solid var(--line);border-radius:10px;color:var(--ink)}
.ls-input:focus{outline:none;border-color:var(--gold)}
.btn-mini{margin-left:auto;padding:10px 16px;border:none;border-radius:10px;font-size:14px;font-weight:800;cursor:pointer;background:linear-gradient(90deg,var(--mex),#16a34a);color:#03200f}
.btn-mini:hover{transform:translateY(-1px)}
.muted{color:var(--ink-dim)}