/* ===== World Cup 2026 Predictor — broadcast scoreboard theme ===== */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Saira:wght@400;500;600;700;800&family=Saira+Condensed:wght@600;700&display=swap');

:root{
  --bg:#070b0c; --bg2:#0d1416; --panel:#10191b; --panel2:#152123;
  --line:#21302f; --line2:#2c403e;
  --txt:#eaf3ef; --muted:#7c918c; --muted2:#56655f;
  --lime:#d8ff3e; --lime-dim:#9fbf2c; --mag:#ff2d78; --cyan:#19e0c8;
  --gold:#ffd23f; --danger:#ff5a5a; --ok:#2ee6a0;
  --r:14px; --shadow:0 10px 30px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Saira',system-ui,sans-serif; background:var(--bg); color:var(--txt);
  min-height:100vh; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 500px at 85% -10%, rgba(216,255,62,.08), transparent 60%),
    radial-gradient(700px 500px at 0% 0%, rgba(255,45,120,.06), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.012) 38px 39px);
}
a{color:var(--lime);text-decoration:none}
.mono{font-variant-numeric:tabular-nums}
.display{font-family:'Anton',sans-serif;letter-spacing:.5px;text-transform:uppercase}
.cond{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.4px}

/* layout */
.wrap{max-width:1040px;margin:0 auto;padding:0 16px 120px}
.topbar{position:sticky;top:0;z-index:30;background:rgba(7,11,12,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.topbar-in{max-width:1040px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:12px 16px}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{font-family:'Anton';font-size:22px;line-height:1;
  background:linear-gradient(180deg,#fff,var(--lime));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 30px rgba(216,255,62,.25)}
.brand .sub{font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase}
.spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;font-weight:700;font-size:13px}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}
.pts-pill{color:#0a0e0f;background:var(--lime);border:none;font-family:'Anton';letter-spacing:.5px}
.btn{cursor:pointer;border:1px solid var(--line2);background:var(--panel2);color:var(--txt);
  border-radius:10px;padding:9px 14px;font-family:'Saira';font-weight:700;font-size:13px;transition:.15s}
.btn:hover{border-color:var(--lime);color:var(--lime)}
.btn.primary{background:var(--lime);color:#0a0e0f;border-color:var(--lime)}
.btn.primary:hover{filter:brightness(1.08);color:#0a0e0f}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 10px;font-size:12px}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* tabs */
.tabs{display:flex;gap:6px;margin:18px 0 6px;border-bottom:1px solid var(--line);position:sticky;top:57px;
  background:rgba(7,11,12,.9);backdrop-filter:blur(8px);z-index:20}
.tab{padding:11px 14px;cursor:pointer;color:var(--muted);font-weight:700;font-size:14px;
  border-bottom:2px solid transparent;text-transform:uppercase;letter-spacing:.5px;font-family:'Saira Condensed'}
.tab.active{color:var(--lime);border-bottom-color:var(--lime)}

/* round heading */
.round-head{display:flex;align-items:center;gap:12px;margin:26px 0 12px}
.round-head .rl{font-family:'Anton';font-size:18px;color:var(--txt)}
.round-head .badge{font-size:10px;letter-spacing:1.5px;color:#0a0e0f;background:var(--cyan);
  padding:3px 8px;border-radius:6px;font-weight:800;text-transform:uppercase}
.round-head .badge.ko{background:var(--mag);color:#fff}
.round-head .hr{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

/* match card */
.fixture-grid{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.fixture-grid > .card{flex:1 1 380px;margin-bottom:0;min-width:0}
.fixture-grid > .card.open{flex-basis:100%}
@media(max-width:560px){.fixture-grid > .card{flex-basis:100%}}
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:var(--r);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow)}
.card.locked{opacity:.92}
.card-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:16px 14px;cursor:pointer}
.team{display:flex;align-items:center;gap:9px;min-width:0}
.team.away{flex-direction:row-reverse;text-align:right}
.team .flag{font-size:26px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.team .tn{font-weight:700;font-size:15px;line-height:1.1;overflow:hidden;text-overflow:ellipsis}
.team .tn small{display:block;color:var(--muted);font-size:11px;font-weight:600}
.score-box{display:flex;align-items:center;gap:6px;justify-content:center}
.score-box .v{font-family:'Anton';font-size:30px;min-width:34px;text-align:center;
  background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:2px 4px}
.score-box .v.empty{color:var(--muted2)}
.score-box .sep{color:var(--muted);font-family:'Anton'}
.meta{display:flex;align-items:center;justify-content:space-between;padding:0 14px 12px;gap:8px;flex-wrap:wrap}
.kick{font-size:12px;color:var(--muted);font-weight:600}
.kick b{color:var(--cyan)}
.tag{font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:3px 8px;border-radius:6px}
.tag.live{background:var(--danger);color:#fff}
.tag.lock{background:#222d2c;color:var(--muted)}
.tag.dbl{background:var(--gold);color:#0a0e0f}
.tag.pts{background:var(--lime);color:#0a0e0f;font-family:'Anton'}
.tag.res{background:var(--panel2);color:var(--txt);border:1px solid var(--line2)}

/* expandable body */
.nilnil{display:none;background:var(--bg);border:1px dashed var(--line2);border-radius:8px;
  padding:12px 14px;margin-bottom:14px;font-size:13px;color:var(--muted);line-height:1.5}
.body{border-top:1px dashed var(--line);padding:16px 14px;display:none}
.card.open .body{display:block}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.field{flex:1;min-width:140px}
.field label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;font-weight:700}
select,input[type=number],input[type=text]{width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--txt);
  border-radius:9px;padding:10px;font-family:'Saira';font-size:14px}
select:focus,input:focus{outline:none;border-color:var(--lime)}
.stepper{display:flex;align-items:center;justify-content:center;gap:10px}
.stepper button{width:38px;height:38px;border-radius:9px;border:1px solid var(--line2);background:var(--panel2);
  color:var(--lime);font-size:20px;font-family:'Anton';cursor:pointer}
.stepper button:active{transform:scale(.94)}
.stepper .num{font-family:'Anton';font-size:30px;min-width:40px;text-align:center}
.scoreline{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:16px}
.scoreline .x{display:flex;flex-direction:column;align-items:center;gap:8px}
.scoreline .x .lbl{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase}
.scoreline .vs{font-family:'Anton';color:var(--muted);font-size:22px}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.save-msg{font-size:12px;color:var(--ok);font-weight:700}
.note{font-size:12px;color:var(--muted);background:var(--bg);border:1px dashed var(--line2);padding:10px;border-radius:9px}
.bd{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.bd .chip{font-size:11px;padding:3px 8px;border-radius:6px;background:var(--bg);border:1px solid var(--line);color:var(--muted);font-weight:700}
.bd .chip.hit{background:rgba(216,255,62,.14);border-color:var(--lime-dim);color:var(--lime)}

/* leaderboard */
.lb{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lb .lr{display:grid;grid-template-columns:42px 1fr auto auto;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.lb .lr:last-child{border-bottom:none}
.lb .lr.me{background:rgba(216,255,62,.06)}
.lb .rank{font-family:'Anton';font-size:20px;color:var(--muted)}
.lb .lr:nth-child(1) .rank{color:var(--gold)}
.lb .nm{font-weight:700}
.lb .nm small{display:block;color:var(--muted);font-size:11px;font-weight:600}
.lb .pp{font-family:'Anton';font-size:24px;color:var(--lime)}
.lb .pp small{font-size:11px;color:var(--muted);font-family:'Saira'}

/* login */
.login{max-width:420px;margin:7vh auto 0;padding:0 20px}
.login .logo{text-align:center;margin-bottom:26px}
.login .logo .big{font-family:'Anton';font-size:44px;line-height:.95;
  background:linear-gradient(180deg,#fff,var(--lime));-webkit-background-clip:text;background-clip:text;color:transparent}
.login .logo .yr{font-family:'Anton';font-size:64px;color:var(--mag);line-height:.8;text-shadow:0 0 40px rgba(255,45,120,.4)}
.login .logo .sub{color:var(--muted);letter-spacing:4px;font-size:11px;text-transform:uppercase;margin-top:8px}
.users-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.user-btn{padding:16px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);cursor:pointer;
  font-weight:700;font-size:15px;text-align:left;transition:.15s}
.user-btn:hover{border-color:var(--lime)}
.user-btn.sel{border-color:var(--lime);background:rgba(216,255,62,.08);color:var(--lime)}
.user-btn small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px}
.pin-area{text-align:center}
.pin-dots{display:flex;gap:14px;justify-content:center;margin:18px 0}
.pin-dots .d{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2)}
.pin-dots .d.on{background:var(--lime);border-color:var(--lime);box-shadow:0 0 12px var(--lime)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:280px;margin:0 auto}
.key{padding:18px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);font-family:'Anton';
  font-size:24px;cursor:pointer;color:var(--txt)}
.key:active{background:var(--lime);color:#0a0e0f}
.key.fn{font-family:'Saira';font-size:14px;font-weight:700;color:var(--muted)}
.err{color:var(--danger);font-weight:700;min-height:20px;margin-top:10px;font-size:13px}

/* admin */
.adm-grid{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
table.t{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.t th,table.t td{padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:13px;vertical-align:middle}
table.t th{color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.8px}
table.t input,table.t select{padding:7px}
.flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.muted{color:var(--muted)}
.center{text-align:center}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--lime);color:#0a0e0f;
  padding:12px 20px;border-radius:10px;font-weight:800;z-index:100;box-shadow:var(--shadow);opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1}
.empty{text-align:center;color:var(--muted);padding:40px 0}
.hide{display:none!important}
@media(max-width:520px){.team .tn{font-size:13px}.score-box .v{font-size:24px;min-width:28px}}