/* Sweepstakes — "Matchday" theme.
   Broadcast score-graphics: deep navy ground, one electric-lime accent for the
   thing you did (your pick, your points), condensed type for club names. */

@font-face {
  font-family: "Archivo";
  src: url("/static/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --bg:#0a1020;
  --panel:#0d1529;
  --raise:#101a35;
  --line:#1d2b4d;
  --line-2:#16203c;

  --txt:#eaf0ff;
  --mut:#8fa3c8;
  --dim:#7e93bb;

  --acc:#c9f24a;
  --acc-ink:#0a1020;
  --acc-dim:#8fae2f;

  --dot-empty:#44598a;      /* visible ring for a not-yet-played match */
  --bad:#ff6b6b;
  --warn:#ffb020;
  --ok:#4ade80;

  --r-sm:4px; --r:7px; --r-lg:12px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;

  --sans:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.28);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3 { margin:0; letter-spacing:-.015em; text-wrap:balance; }
h1 { font-size:1.6rem; font-weight:800; }
h2 { font-size:1.15rem; font-weight:700; }
h3 { font-size:.95rem; font-weight:700; }
p { margin:0; }

a { color:var(--acc); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }

:focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:var(--r-sm); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } }

/* ---------------- layout ---------------- */
.container { max-width:900px; margin:0 auto; padding:var(--sp-5) var(--sp-4) var(--sp-7); }
.container.narrow { max-width:440px; }
.stack { display:flex; flex-direction:column; gap:var(--sp-4); }
.muted { color:var(--mut); }
.error { color:var(--bad); }

/* ---------------- top bar ---------------- */
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:0 var(--sp-4);
  background:linear-gradient(90deg, var(--raise), var(--panel));
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.brand {
  font-weight:800; font-stretch:82%; text-transform:uppercase; letter-spacing:.06em;
  font-size:.9rem; color:#fff; white-space:nowrap; padding:var(--sp-3) 0;
}
.navlinks { display:flex; align-items:center; gap:var(--sp-4); }
.navlinks a {
  color:var(--mut); font-size:.84rem; font-weight:600; text-decoration:none;
  padding:var(--sp-3) 0; border-bottom:2px solid transparent; transition:color .14s, border-color .14s;
}
.navlinks a:hover { color:var(--txt); text-decoration:none; }
.navlinks a.active { color:#fff; border-bottom-color:var(--acc); }
.brandgroup { display:flex; align-items:center; gap:var(--sp-4); min-width:0; }
.compname { color:var(--mut); font-size:.84rem; font-weight:600; white-space:nowrap;
            padding-left:var(--sp-4); border-left:1px solid var(--line); }
.compswitch { display:inline-flex; border:1px solid var(--line); border-radius:999px;
              padding:2px; background:#080d1a; }
.comppill { color:var(--mut); font-size:.8rem; font-weight:700; text-decoration:none;
            padding:5px 12px; border-radius:999px; white-space:nowrap;
            transition:background .14s, color .14s; }
.comppill:hover { color:var(--txt); text-decoration:none; }
.comppill.active { background:var(--raise); color:var(--acc); box-shadow:inset 0 0 0 1px var(--line); }
.comppill.done { opacity:.6; }
.who { display:flex; align-items:center; gap:var(--sp-2); font-size:.82rem; color:var(--mut); }
.avatar {
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--acc); color:var(--acc-ink); font-size:.62rem; font-weight:800; letter-spacing:.02em;
}
.inline { display:inline; }
.who-link { display:flex; align-items:center; gap:var(--sp-2); color:inherit; text-decoration:none; }
.who-link:hover { color:var(--txt); text-decoration:none; }
.linkbtn {
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--dim); font:inherit; font-size:.82rem; font-weight:600;
}
.linkbtn:hover { color:var(--bad); }

/* ---------------- forms ---------------- */
input, select, button, textarea { font:inherit; }
input[type=text], input[type=email], input[type=password], input[type=number], input:not([type]), select {
  padding:9px 11px; border-radius:var(--r); border:1px solid var(--line);
  background:#080d1a; color:var(--txt); transition:border-color .14s, box-shadow .14s;
}
input::placeholder { color:#5c6f95; }
input:focus, select:focus { outline:none; border-color:var(--acc-dim); box-shadow:0 0 0 3px rgba(201,242,74,.14); }
select {
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%238fa3c8' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center; padding-right:32px;
}
input[type=file] { color:var(--mut); font-size:.84rem; }
input[type=file]::file-selector-button {
  font:inherit; font-size:.82rem; font-weight:700; margin-right:10px;
  padding:7px 12px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--raise); color:var(--txt); cursor:pointer;
}
input[type=file]::file-selector-button:hover { border-color:var(--acc-dim); color:#fff; }
label { display:flex; flex-direction:column; gap:6px; font-size:.8rem; color:var(--mut); font-weight:600; }
label > input, label > select { color:var(--txt); font-weight:400; }

button {
  padding:9px 16px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--raise); color:var(--txt); font-weight:600; cursor:pointer;
  transition:background .14s, border-color .14s, transform .06s;
}
button:hover { background:#16233f; border-color:#2b3d66; }
button:active { transform:translateY(1px); }
button.primary {
  background:var(--acc); color:var(--acc-ink); border-color:var(--acc);
  font-weight:800; font-stretch:88%; text-transform:uppercase; letter-spacing:.05em;
}
button.primary:hover { background:#d7fa63; border-color:#d7fa63; }
button.primary:disabled { background:var(--line); border-color:var(--line); color:var(--dim); cursor:default; transform:none; }

.card {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-5); margin:var(--sp-4) 0;
  display:flex; flex-direction:column; gap:var(--sp-3);
  box-shadow:var(--shadow);
}
.card h2 { margin-bottom:var(--sp-1); }

/* ---------------- matchweek bar ---------------- */
.mwbar {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-4);
}
.mwbar strong {
  font-size:1rem; font-weight:800; font-stretch:85%;
  text-transform:uppercase; letter-spacing:.07em; color:#fff;
}
.mwbar a { color:var(--mut); font-size:.82rem; font-weight:700; white-space:nowrap; }
.mwbar a:hover { color:var(--acc); text-decoration:none; }
.mwbar .spacer { flex:1; }

.progress { font-size:.78rem; color:var(--mut); font-variant-numeric:tabular-nums; }
.progress b { color:var(--acc); font-weight:800; }
.progress.done b { color:var(--ok); }

/* ---------------- fixtures grid ---------------- */
#grid { display:flex; flex-direction:column; }
.matchlist { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--panel); }

.match {
  display:grid;
  grid-template-columns:1fr auto 1fr 84px;
  align-items:center; gap:var(--sp-3);
  padding:10px var(--sp-4);
  border-bottom:1px solid var(--line-2);
  transition:background .14s;
}
.match:last-child { border-bottom:0; }
.match:hover { background:var(--raise); }
.match.locked { background:rgba(255,255,255,.012); }
.match.finished .team { color:var(--mut); }

/* Crest sits on the outer edge; the name and its form dots travel together on the
   inner edge, hard against the picks. That keeps both dot groups in a column while
   each stays visibly attached to its own club. */
.team { display:flex; align-items:center; gap:9px; min-width:0; font-stretch:80%; font-weight:600;
        font-size:.98rem; justify-content:space-between; }
.team .side { display:flex; align-items:center; gap:9px; min-width:0; }
.team.away { text-align:right; }
.team .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.crest { width:24px; height:24px; flex:none; object-fit:contain; }
.chip {
  width:24px; height:24px; flex:none; border-radius:var(--r-sm);
  display:grid; place-items:center; font-size:.55rem; font-weight:800; letter-spacing:.01em;
  background:var(--raise); color:var(--mut); border:1px solid var(--line); font-stretch:100%;
}

/* last-five form dots */
.form { display:inline-flex; gap:3px; flex:none; align-items:center; }

.dot { width:7px; height:7px; border-radius:50%; display:block; }
.dot.w { background:var(--acc); }
.dot.d { background:var(--mut); }
.dot.l { background:var(--bad); }
.dot.none { background:rgba(143,163,200,.10); box-shadow:inset 0 0 0 1.5px var(--dot-empty); }

/* the 1 / X / 2 control */
.picks { display:flex; flex:none; border-radius:var(--r); overflow:hidden; box-shadow:inset 0 0 0 1px #25355c; }
.pick { margin:0; }
.pick input { position:absolute; opacity:0; width:0; height:0; }
.pick span {
  display:block; min-width:38px; padding:7px 0; text-align:center; cursor:pointer;
  background:var(--panel); color:#9fb2d6; font-weight:700; font-size:.86rem;
  border-left:1px solid #25355c; transition:background .12s, color .12s;
  font-variant-numeric:tabular-nums;
}
.pick:first-child span { border-left:0; }
.pick:hover span { background:#16233f; color:#fff; }
.pick input:checked + span { background:var(--acc); color:var(--acc-ink); font-weight:800; }
.pick input:focus-visible + span { outline:2px solid var(--acc); outline-offset:-2px; }

.score {
  font-weight:800; font-size:1rem; letter-spacing:.02em; color:#fff;
  min-width:58px; text-align:center; font-variant-numeric:tabular-nums;
}
.mypick {
  display:inline-flex; align-items:center; gap:5px; font-size:.74rem;
  color:var(--mut); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.mypick .box {
  display:grid; place-items:center; min-width:20px; height:20px; padding:0 4px;
  border-radius:var(--r-sm); background:var(--raise); border:1px solid var(--line);
  font-weight:800; font-size:.7rem; color:var(--mut);
}
.mypick.hit .box { background:var(--acc); border-color:var(--acc); color:var(--acc-ink); }
.mypick .pts { color:var(--acc); font-weight:800; }

.kick { font-size:.72rem; color:var(--dim); text-align:right; font-variant-numeric:tabular-nums; line-height:1.3; }
.kick .d { display:block; color:var(--mut); font-weight:600; }

.savebar {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4) 0 0;
}
.toast { color:var(--acc); font-size:.82rem; font-weight:600; }

/* ---------------- tables ---------------- */
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); }
table.grid { width:100%; border-collapse:collapse; font-size:.88rem; }
table.grid th {
  text-align:left; font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dim); background:var(--raise); padding:10px var(--sp-3); white-space:nowrap;
  position:sticky; top:0;
}
table.grid td { padding:9px var(--sp-3); border-bottom:1px solid var(--line-2); font-variant-numeric:tabular-nums; }
table.grid tr:last-child td { border-bottom:0; }
tr.hoverable:hover td { background:var(--raise); }
td.pos { color:var(--dim); font-weight:700; width:34px; }
td.name { font-weight:600; font-stretch:85%; white-space:nowrap; }
td.pts strong { color:var(--acc); font-weight:800; }
.teamcell { display:flex; align-items:center; gap:9px; }
.teamcell .crest, .teamcell .chip { width:20px; height:20px; }
.you td { background:rgba(201,242,74,.06); }
.you td.name::after { content:"you"; margin-left:8px; font-size:.6rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--acc-ink); background:var(--acc); padding:2px 5px; border-radius:3px; }

/* ---------------- futures ---------------- */
.futuregrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--sp-4); }
.prize { display:flex; align-items:baseline; gap:var(--sp-2); }
.prize .val { color:var(--acc); font-weight:800; font-size:1.1rem; }
.locked-pick { display:flex; align-items:center; gap:10px; font-weight:600; font-stretch:85%; }

/* ---------------- admin ---------------- */
.formgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:var(--sp-3); }
.card.sync-alert { border-color:var(--bad); box-shadow:0 0 0 1px rgba(255,107,107,.25), var(--shadow); }
.pill {
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:.66rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; background:var(--raise); color:var(--mut);
  border:1px solid var(--line);
}
.pill.ok { background:rgba(74,222,128,.12); color:var(--ok); border-color:rgba(74,222,128,.3); }
code.temp { font-family:ui-monospace,monospace; font-size:1rem; background:var(--raise);
  border:1px solid var(--acc); border-radius:var(--r-sm); padding:3px 8px; color:var(--acc); }
.pill.bad { background:rgba(255,107,107,.12); color:var(--bad); border-color:rgba(255,107,107,.3); }
.btnrow { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.adminrow {
  display:grid; grid-template-columns:1fr auto; gap:var(--sp-3); align-items:center;
  padding:9px var(--sp-4); border-bottom:1px solid var(--line-2);
}
.adminrow:hover { background:var(--raise); }
.adminrow input[type=number] { width:48px; text-align:center; padding:6px; }
.adminrow .btnrow form { display:inline; }

/* ---------------- login ---------------- */
.authhead { text-align:center; display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-5); }
.authhead .wordmark {
  font-size:2rem; font-weight:800; font-stretch:80%; text-transform:uppercase; letter-spacing:.08em;
  color:#fff; line-height:1;
}
.authhead .sub { color:var(--mut); font-size:.88rem; }
.authhead .sub b { color:var(--acc); font-weight:700; }

/* ---------------- responsive ---------------- */
@media (max-width:680px) {
  .topbar { flex-wrap:wrap; padding:0 var(--sp-3); gap:0 var(--sp-3); }
  .brand { padding-bottom:0; }
  .navlinks { width:100%; gap:var(--sp-3); overflow-x:auto; }
  .navlinks .who { margin-left:auto; }
  .container { padding:var(--sp-4) var(--sp-3) var(--sp-6); }

  .match { grid-template-columns:1fr auto 1fr; row-gap:6px; padding:10px var(--sp-3); }
  .kick { grid-column:1 / -1; text-align:left; order:-1; }
  .kick .d { display:inline; margin-right:6px; }
  .team { font-size:.88rem; gap:6px; }
  .team .nm { font-size:.88rem; }
  .pick span { min-width:34px; }
  /* Buy back horizontal room for club names — the dots are context, the name isn't. */
  .crest, .chip { width:20px; height:20px; }
  .form { gap:2px; }
  .dot { width:5px; height:5px; }
  .dot.none { box-shadow:inset 0 0 0 1px var(--dot-empty); }
  .mwbar { flex-wrap:wrap; }
  .savebar { position:sticky; bottom:0; background:linear-gradient(180deg, transparent, var(--bg) 40%);
             padding:var(--sp-4) 0 var(--sp-3); }
  .savebar button { flex:1; }
}