/* base.css — shared theme, reset, and page chrome (header/brand).
 * Loaded by every page before its page-specific stylesheet so the layout
 * stays consistent across the season list and each season's timer. */
:root{
  --bg-0:#05070f;
  --bg-1:#0b1224;
  --bg-2:#13203f;
  --panel:#0e1730;
  --line:rgba(120,160,255,.18);
  --txt:#eef3ff;
  --muted:#8ea3c8;
  --red:#e1242b;
  --red-deep:#7d1116;
  --blue:#1c6df0;
  --blue-deep:#0c2f6e;
  --green:#16c46a;
  --green-deep:#0a5e34;
  --amber:#ffb017;
  --accent:var(--red);
  --accent-deep:var(--red-deep);
  --header-h:70px;        /* fixed bar height so it never grows when buttons appear */
  --ctrl-size:40px;       /* shared size for header icon buttons (back / gear) */
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{min-height:100%;}
body{
  font-family:'Roboto',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  background:
    radial-gradient(1200px 700px at 50% -10%, var(--bg-2) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  color:var(--txt);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ===== top bar ===== */
header{
  flex:0 0 var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);
  padding:0 26px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  letter-spacing:.12em;
}
.brand{display:flex;align-items:center;gap:12px;}
/* shared header icon buttons — identical box so the bar height never shifts */
.brand .back,.gear{
  flex:0 0 auto;text-decoration:none;color:var(--muted);
  border:1px solid var(--line);border-radius:10px;background:transparent;
  width:var(--ctrl-size);height:var(--ctrl-size);
  display:flex;align-items:center;justify-content:center;
  line-height:1;cursor:pointer;transition:.15s;
}
.brand .back:hover,.gear:hover{color:#fff;border-color:rgba(160,190,255,.45);background:rgba(255,255,255,.05);}
/* icons fill the same box and sit dead-center via the buttons' flex centering */
.brand .back svg,.gear svg{width:20px;height:20px;display:block;pointer-events:none;}
.brand .first{
  font-weight:900;font-size:22px;
  background:linear-gradient(90deg,var(--red),#ff5a3c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand .game{font-weight:800;font-size:18px;color:var(--muted);letter-spacing:.32em;}