/* ═══════════════════════════════════════════════════════════════════════════
   Penny Games — Design System  (ported from penny_games_frontend for our Jinja app)
   Fonts: Fraunces (headings) · Montserrat (body) · JetBrains Mono (labels)
   Palette: Navy #1B2A4A + Gold #E8A520 + Copper #B87333 on off-white
   NOTE: fonts load from Google Fonts when online. For the OFFLINE/isolated VLAN,
   drop woff2 files in static/fonts/ and swap the @import for @font-face.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&family=Montserrat:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');

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

:root {
  color-scheme: light;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Brand core */
  --navy:#1B2A4A; --navy-deep:#0F1B33; --navy-mid:#243756;
  --gold:#E8A520; --gold-light:#F4C04E; --gold-dark:#C48A10;
  --penny:#B87333; --penny-bright:#D89860; --penny-deep:#8B4513;

  /* Canvas */
  --white:#FFFFFF; --off-white:#F5F5F3; --light-gray:#EBEBEB;
  --bg:#F5F4F0; --surface:#FFFFFF; --surface-2:rgba(245,245,243,.8);
  --text:#1a1a1a; --text-2:var(--navy); --text-muted:#6b7280;
  --border:rgba(27,42,74,.12); --border-strong:rgba(27,42,74,.28);

  /* Actions / feedback */
  --primary:var(--gold); --primary-ink:var(--navy-deep); --primary-hover:var(--gold-light);
  --success:#16a34a; --success-bg:#dcfce7; --error:#dc2626; --error-bg:#fef2f2;
  --warning:var(--gold);

  /* Tier accents (T1..T5) */
  --t1:#16a34a; --t2:#2563eb; --t3:var(--gold); --t4:#dc2626; --t5:#7c3aed;

  /* Radii + shadows + spacing */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(27,42,74,.06);
  --shadow-md:0 4px 12px rgba(27,42,74,.10);
  --shadow-card:0 8px 40px rgba(27,42,74,.12);
  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#0B0F1A; --surface:#1a2033; --surface-2:rgba(26,32,51,.7);
    --text:#F5F5F3; --text-2:#F5F5F3; --text-muted:#94a3b8;
    --border:rgba(245,241,232,.12); --border-strong:rgba(245,241,232,.24);
    --shadow-card:0 24px 64px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0B0F1A; --surface:#1a2033; --surface-2:rgba(26,32,51,.7);
  --text:#F5F5F3; --text-2:#F5F5F3; --text-muted:#94a3b8;
  --border:rgba(245,241,232,.12); --border-strong:rgba(245,241,232,.24);
  --shadow-card:0 24px 64px rgba(0,0,0,.5);
}

/* ─── Base ─────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
h1,h2,h3,h4 { font-family: var(--font-serif); font-weight: 800; color: var(--text-2); line-height: 1.15; }
a { color: var(--penny); text-decoration: none; }
a:hover { color: var(--penny-deep); }
.container { width:100%; max-width:1180px; margin:0 auto; padding:0 18px; }
@media (max-width:768px){ .container{ padding:0 12px; } }
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-muted); }

/* ─── Wordmark (THE PENNY / GAMES) ─────────────────────────────────────── */
.wordmark { text-align:center; }
.wordmark .the { font-family:var(--font-serif); font-weight:300; font-size:13px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--penny-bright); }
.wordmark .games { font-family:var(--font-serif); font-weight:700; font-size:28px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); line-height:1; }
.wordmark .rule { width:40px; height:1px; background:var(--penny); margin:12px auto 0; }

/* ─── Buttons ──────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:700; letter-spacing:.04em; border-radius:var(--radius-md);
  border:1px solid transparent; cursor:pointer; padding:10px 20px; font-size:15px;
  transition:background 150ms ease, opacity 150ms ease, transform 60ms ease; text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.btn--primary { background:var(--gold); color:var(--navy-deep); border-color:var(--gold); }
.btn--primary:hover { background:var(--gold-light); }
.btn--copper  { background:var(--penny); color:#fff; border-color:var(--penny); }
.btn--copper:hover { background:var(--penny-deep); }
.btn--secondary { background:var(--surface); color:var(--text); border-color:var(--border-strong); }
.btn--danger { background:var(--error); color:#fff; border-color:var(--error); }
.btn--ghost { background:transparent; color:var(--text); }
.btn--sm { padding:6px 12px; font-size:13px; }
.btn--lg { padding:13px 28px; font-size:16px; }
.btn--block { width:100%; }

/* ─── Cards ────────────────────────────────────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-6); box-shadow:var(--shadow-card); }
.card--glass { background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(16px); }

/* ─── Forms ────────────────────────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:6px; }
.label { font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-muted); }
.input, select.input, textarea.input {
  padding:10px 14px; background:var(--surface); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  font-family:var(--font-sans); font-size:15px; width:100%; outline:none;
  transition:border-color 150ms; }
.input:focus { border-color:var(--penny); }

/* ─── Alerts / badges ──────────────────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:var(--radius-md); font-size:14px; }
.alert--hint { margin-top:6px; background:color-mix(in srgb, var(--gold) 14%, var(--surface));
  color:var(--text); border:1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.alert--error { background:var(--error-bg); color:#b91c1c; border:1px solid #fecaca; }
.alert--success { background:var(--success-bg); color:#15803d; border:1px solid #a7f3d0; }
.badge { display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:700;
  padding:2px 8px; border-radius:var(--radius-full); color:#fff; }
.badge--gold { background:var(--gold); color:var(--navy-deep); }
.tier-1{background:var(--t1)} .tier-2{background:var(--t2)} .tier-3{background:var(--t3);color:var(--navy-deep)}
.tier-4{background:var(--t4)} .tier-5{background:var(--t5)}

/* ─── Top bar (dashboards) ─────────────────────────────────────────────── */
.topbar { background:var(--navy); color:#fff; padding:14px var(--space-8);
  display:flex; align-items:center; gap:20px; box-shadow:var(--shadow-md); }
.topbar .brand { display:flex; align-items:center; gap:10px; font-family:var(--font-serif);
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.topbar .brand img { height:30px; }
.topbar .spacer { margin-left:auto; }
.topbar .stat { font-family:var(--font-mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.06em; color:rgba(255,255,255,.7); }
.topbar .stat b { color:var(--gold); font-size:15px; }

/* hidden attribute must win over component display rules (e.g. .input) */
[hidden] { display: none !important; }
.vm-actions { display: inline-flex; gap: 6px; align-items: center; }
.qrow:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.qrow.editing { background: color-mix(in srgb, var(--gold) 16%, transparent); box-shadow: inset 3px 0 0 var(--gold); }

/* ─── Sticky-footer layout (footer stays at the bottom on short pages) ──── */
.site-header, .site-footer { flex-shrink: 0; }
.page-main { flex: 1 0 auto; }

/* ─── Site header (Penny Games style: solid bar + gold underline) ──────── */
.site-header { position:sticky; top:0; z-index:100; background:var(--surface);
  border-bottom:3px solid var(--gold); box-shadow:0 2px 12px rgba(0,0,0,.06); }
.site-header .sh-inner { height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-header .sh-logo { display:flex; align-items:center; flex-shrink:0; }
.site-header .sh-logo img { height:44px; width:auto; object-fit:contain; display:block; }
.site-header .sh-nav { display:flex; align-items:center; gap:8px; }
.site-header .navlink { font-family:var(--font-sans); font-weight:600; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text); padding:6px 14px;
  border-radius:2px; border:1.5px solid transparent; text-decoration:none; transition:all 150ms; }
.site-header .navlink:hover { color:var(--gold); border-color:var(--gold); background:rgba(232,165,32,.12); }
.site-header .sh-theme { width:34px; height:34px; border-radius:50%; border:1.5px solid var(--border-strong);
  background:var(--surface); color:var(--text); cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:border-color 150ms, background 150ms; }
.site-header .sh-theme:hover { border-color:var(--gold); background:rgba(232,165,32,.12); }
.site-header .sh-theme svg { display:block; }
.site-header .sh-stat { font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted); white-space:nowrap; }
.site-header .sh-stat b { color:var(--text); font-size:13px; }
@media (max-width:600px){ .site-header .sh-inner{ height:60px; } .site-header .sh-logo img{ height:34px; }
  .site-header .sh-nav{ gap:6px; } .site-header .navlink{ padding:6px 8px; }
  .site-header .sh-stat{ display:none; } }

/* ─── Hero (home) — full-screen, warm, THEME-AWARE ─────────────────────── */
:root { --hero-bg:linear-gradient(135deg,#fdf7ec 0%,#f2e8d7 46%,#ecdcc7 100%);
  --hero-fg:#1a1a1a; --hero-fg-soft:rgba(27,42,74,.70); --hero-accent:var(--gold-dark);
  --hero-glow:rgba(184,115,51,.28); --hero-dot:rgba(27,42,74,.14);
  --hero-pill-bg:rgba(27,42,74,.06); --hero-pill-bd:rgba(27,42,74,.14); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --hero-bg:linear-gradient(135deg,#0f1b33 0%,#1b2a4a 45%,#3a2416 100%);
  --hero-fg:#fff; --hero-fg-soft:rgba(255,255,255,.82); --hero-accent:var(--gold);
  --hero-glow:rgba(184,115,51,.42); --hero-dot:rgba(232,165,32,.16);
  --hero-pill-bg:rgba(255,255,255,.10); --hero-pill-bd:rgba(255,255,255,.18); } }
:root[data-theme="dark"]{ --hero-bg:linear-gradient(135deg,#0f1b33 0%,#1b2a4a 45%,#3a2416 100%);
  --hero-fg:#fff; --hero-fg-soft:rgba(255,255,255,.82); --hero-accent:var(--gold);
  --hero-glow:rgba(184,115,51,.42); --hero-dot:rgba(232,165,32,.16);
  --hero-pill-bg:rgba(255,255,255,.10); --hero-pill-bd:rgba(255,255,255,.18); }

.hero { position:relative; overflow:hidden; min-height:calc(100vh - 75px); display:flex;
  flex-direction:column; justify-content:center; background:var(--hero-bg); color:var(--hero-fg); padding:56px 0; }
.hero__glow { position:absolute; z-index:1; width:640px; height:640px; border-radius:50%;
  filter:blur(120px); background:radial-gradient(circle,var(--hero-glow),transparent 70%);
  top:-180px; right:-140px; pointer-events:none; }
.dot-pattern { position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(circle, var(--hero-dot) 1px, transparent 1px),
                   radial-gradient(circle, var(--hero-dot) 1px, transparent 1px);
  background-size:60px 60px, 80px 80px; background-position:0 0, 30px 30px; }
.hero > .container { position:relative; z-index:2; width:100%; }
.hero h1 { color:var(--hero-fg); font-family:var(--font-sans); font-weight:900; text-transform:uppercase;
  letter-spacing:-0.02em; line-height:0.94; font-size:clamp(40px,7vw,84px); }
.hero h1 .gold { color:var(--hero-accent); }
.hero .kicker { display:inline-flex; align-items:center; gap:14px; font-family:var(--font-mono);
  letter-spacing:.2em; text-transform:uppercase; color:var(--hero-accent); font-size:12px; }
.hero .kicker::before { content:""; width:40px; height:2px; background:var(--hero-accent); display:inline-block; }
.hero .lede { font-family:var(--font-serif); font-weight:300; font-style:italic;
  font-size:clamp(15px,1.8vw,22px); line-height:1.45; color:var(--hero-fg-soft); max-width:520px; }
.hero .lede b { font-style:normal; font-weight:600; color:var(--hero-accent); }
.hero .status-pill { display:inline-block; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; padding:7px 14px; border-radius:var(--radius-full);
  background:var(--hero-pill-bg); border:1px solid var(--hero-pill-bd); color:var(--hero-fg); }
.hero .status-pill b { color:var(--hero-accent); }
.hero .eventinfo { font-family:var(--font-mono); font-size:12px; color:var(--hero-fg-soft);
  line-height:1.7; letter-spacing:.04em; }
.hero .eventinfo b { color:var(--hero-accent); }
.gold-bar { height:5px; position:relative; z-index:2;
  background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold)); }
.facts { background:var(--surface); display:grid; grid-template-columns:repeat(4,1fr); }
.facts .fact { padding:26px 18px; text-align:center; border-right:1px solid var(--border); }
.facts .fact:last-child { border-right:none; }
.facts .fact .n { font-family:var(--font-serif); font-weight:800; font-size:28px; color:var(--text-2); }
.facts .fact .l { font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-muted); margin-top:4px; }
@media (max-width:720px){ .facts{ grid-template-columns:repeat(2,1fr);} .facts .fact:nth-child(2){border-right:none;} }

/* ─── Segmented toggle (combined login) ────────────────────────────────── */
.seg { display:grid; grid-template-columns:1fr 1fr; gap:3px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-md); padding:3px; margin-bottom:20px; }
.seg-btn { padding:9px 4px; border:none; border-radius:6px; background:transparent; cursor:pointer;
  font-family:var(--font-sans); font-weight:600; font-size:13px; letter-spacing:.02em;
  color:var(--text-muted); transition:background 160ms, color 160ms; }
.seg-btn.active { background:var(--penny); color:#fff; }

/* ─── Ambient blobs (auth screens) ─────────────────────────────────────── */
.auth-wrap { min-height:calc(100vh - 75px); display:flex; align-items:center; justify-content:center;
  padding:24px 16px; position:relative; overflow:hidden; }
.blob { position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
.blob--copper { width:500px; height:500px; filter:blur(90px); opacity:.22;
  background:radial-gradient(circle,var(--penny),transparent 70%); top:-160px; right:-100px;
  animation:float1 24s ease-in-out infinite; }
.blob--gold { width:360px; height:360px; filter:blur(80px); opacity:.15;
  background:radial-gradient(circle,var(--gold),transparent 70%); bottom:-80px; left:-80px;
  animation:float2 30s ease-in-out infinite; }
.auth-card { position:relative; z-index:1; width:100%; max-width:420px; }

/* ─── Leaderboard ──────────────────────────────────────────────────────── */
.day-tabs { display:flex; gap:6px; }
.day-tab { font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  padding:6px 14px; border-radius:var(--radius-full); border:1px solid var(--border); color:var(--text-muted);
  text-decoration:none; transition:color .15s, border-color .15s, background .15s; }
.day-tab:hover { border-color:var(--gold); color:var(--text); }
.day-tab.active { background:var(--gold); color:var(--navy-deep); border-color:var(--gold); }

/* ─── Admin dashboard (sidebar + full-height shell) ────────────────────── */
.admin-shell { display:flex; align-items:stretch; min-height:calc(100vh - 75px); }
.admin-sidebar { width:228px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); padding:20px 12px; }
.admin-side-title { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--text-muted); padding:0 10px 12px; }
.admin-sidebar nav { display:flex; flex-direction:column; gap:2px; }
.admin-navitem { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  color:var(--text); text-decoration:none; font-size:14px; font-weight:500; transition:background .15s, color .15s; }
.admin-navitem svg { width:17px; height:17px; flex-shrink:0; color:var(--text-muted); }
.admin-navitem:hover { background:var(--bg); }
.admin-navitem.active { background:rgba(232,165,32,.14); color:var(--gold-dark); }
.admin-navitem.active svg { color:var(--gold-dark); }
.admin-main { flex:1; min-width:0; padding:28px 26px; background:var(--bg); }
.admin-main h1 { font-size:24px; margin-bottom:18px; }
@media (max-width:820px){
  .admin-shell{ flex-direction:column; min-height:0; }
  .admin-sidebar{ width:auto; border-right:none; border-bottom:1px solid var(--border); padding:10px; }
  .admin-sidebar nav{ flex-direction:row; overflow-x:auto; gap:4px; }
  .admin-side-title{ display:none; }
  .admin-navitem{ white-space:nowrap; }
  .admin-main{ padding:20px 14px; }
}

/* ─── Toggle switch (slider) ───────────────────────────────────────────── */
.switch { position:relative; display:inline-block; width:48px; height:26px; flex-shrink:0; }
.switch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }
.switch .track { position:absolute; inset:0; background:var(--border-strong); border-radius:999px; transition:background .2s; pointer-events:none; }
.switch .track::before { content:""; position:absolute; height:20px; width:20px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + .track { background:#16a34a; }
.switch input:checked + .track::before { transform:translateX(22px); }
.win-label { font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.win-label.on { color:#16a34a; }
.win-label.off { color:var(--text-muted); }
table.board { width:100%; border-collapse:collapse; font-size:14px; }
table.board th, table.board td { padding:10px 14px; text-align:left; border-bottom:1px solid var(--border); }
table.board th { font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted); }
table.board td.num { text-align:right; font-variant-numeric:tabular-nums; }
table.board tr.me { background:color-mix(in srgb, var(--gold) 12%, transparent); }
.rank { font-family:var(--font-serif); font-weight:800; }
.first-blood { color:var(--penny); }

/* ─── Theme toggle (light / dark / system) ────────────────────────────── */
.theme-toggle { position:fixed; bottom:16px; right:16px; z-index:60; width:44px; height:44px;
  border-radius:50%; border:1px solid var(--border-strong); background:var(--surface);
  color:var(--text); cursor:pointer; font-size:18px; box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center; transition:border-color 150ms; }
.theme-toggle:hover { border-color:var(--gold); }

/* ─── Animations ───────────────────────────────────────────────────────── */
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,40px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-30px)} }
.rise { animation:rise .8s both; }

/* ─── Site footer (ported from Penny Games) ────────────────────────────── */
.site-footer { background:var(--surface-2); border-top:1px solid var(--border); padding:44px 0 36px;
  margin-top:auto; }   /* pin to the bottom on short pages (works even without .page-main) */
.site-footer .sf-inner { display:flex; flex-direction:column; gap:26px; }
.site-footer .sf-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.site-footer .sf-name { font-family:var(--font-sans); font-weight:900; font-size:15px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text); margin-bottom:4px; }
.site-footer .sf-addr { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted); margin-top:2px; }
.site-footer .sf-addr a { color:inherit; text-decoration:none; }
.site-footer .sf-addr a:hover { color:var(--gold-dark); }
.site-footer .sf-social { display:flex; gap:10px; }
.site-footer .sf-social a { width:38px; height:38px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; color:var(--text-muted); border:1px solid var(--border); text-decoration:none;
  transition:color .15s, border-color .15s, background .15s; }
.site-footer .sf-social a:hover { color:var(--gold); border-color:rgba(232,165,32,.5); background:rgba(232,165,32,.08); }
.site-footer .sf-divider { border-top:1px solid var(--border); }
.site-footer .sf-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.site-footer .sf-dev { font-family:var(--font-serif); font-style:italic; font-size:13px; color:var(--text-muted); margin:0; }
.site-footer .sf-dev a { color:var(--gold-dark); font-weight:500; border-bottom:1px solid var(--gold-dark); text-decoration:none; }
.site-footer .sf-copy { font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-muted); margin:0; }