/* ---------- Theme tokens ---------- */
  :root{
    --bg:#141416;
    --surface-1:#1c1c1f;
    --surface-2:#232326;
    --surface-3:#2d2d31;
    --line:#38383d;
    --ink:#ece7de;
    --ink-dim:#9d988e;
    --ink-faint:#6a665f;
    --violet:#8f6bff;
    --coral:#ff6f59;
    --brand-grad: linear-gradient(115deg, var(--violet) 0%, #b674ff 45%, var(--coral) 100%);
    --radius-card: 14px;
    --radius-sm: 8px;
    color-scheme: dark;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  :root[data-theme="light"]{
    --bg:#f3f0e9;
    --surface-1:#ffffff;
    --surface-2:#fbf9f4;
    --surface-3:#efeadf;
    --line:#e0dace;
    --ink:#221f1c;
    --ink-dim:#5f594e;
    --ink-faint:#8a8375;
    color-scheme: light;
  }

  *{box-sizing:border-box;}
  html{scroll-padding-top: env(safe-area-inset-top, 0px);}
  html,body{height:100%;}
  body{
    margin:0;
    background:
      radial-gradient(circle at 15% 0%, rgba(143,107,255,0.08), transparent 40%),
      radial-gradient(circle at 85% 15%, rgba(255,111,89,0.06), transparent 45%),
      var(--bg);
    color:var(--ink);
    font-family:'Inter', system-ui, sans-serif;
    min-height:100%;
    -webkit-font-smoothing:antialiased;
    transition: background-color .25s ease, color .25s ease;
  }
  .mono{ font-family:'JetBrains Mono', ui-monospace, monospace; }
  .display{ font-family:'Space Grotesk', 'Inter', sans-serif; }

  a{color:inherit;}
  :focus-visible{ outline:2px solid var(--violet); outline-offset:2px; border-radius:4px; }

  .shell{
    max-width:980px;
    margin:0 auto;
    padding:2.25rem 1.25rem 4rem;
  }

  /* ---------- Header / brand ---------- */
  .brandbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:2.75rem;
    gap:1rem;
  }
  .wordmark{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:1.35rem;
    letter-spacing:0.01em;
    background:var(--brand-grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    display:flex;
    align-items:center;
    gap:0.55rem;
  }
  .wordmark .aperture{
    width:26px; height:26px;
    border-radius:50%;
    background:var(--brand-grad);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:none;
  }
  .wordmark .aperture i{ color:var(--bg); font-size:0.85rem; }

  .header-actions{ display:flex; align-items:center; gap:0.9rem; }
  .tagline{ color:var(--ink-faint); font-size:0.82rem; }

  .theme-toggle{
    all:unset;
    width:36px; height:36px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--surface-2);
    color:var(--ink-dim);
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease;
  }
  .theme-toggle:hover{ border-color:var(--violet); color:var(--ink); }

  /* ---------- Hero ---------- */
  .hero{ margin-bottom:2.75rem; }
  .hero .eyebrow{ color:var(--ink-faint); font-size:0.78rem; margin-bottom:0.85rem; }
  .hero h1{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:clamp(1.9rem, 4.2vw, 2.7rem);
    line-height:1.12;
    margin:0 0 0.85rem;
    max-width:16ch;
  }
  .hero p{ color:var(--ink-dim); max-width:52ch; line-height:1.65; margin:0 0 1.5rem; }
  .hero-progress{ display:flex; align-items:center; gap:0.9rem; }
  .progress-track{ flex:1; height:6px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
  .progress-fill{ height:100%; border-radius:999px; background:var(--brand-grad); }
  .progress-label{ font-size:0.78rem; color:var(--ink-faint); white-space:nowrap; }

  /* ---------- Lineup grid ---------- */
  .section-label{
    font-family:'Space Grotesk', sans-serif;
    font-size:1rem;
    font-weight:600;
    margin:0 0 1rem;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
  }
  .section-label span.count{
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    font-weight:500;
    color:var(--ink-faint);
  }

  .lineup{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:1rem;
  }

  .game-card-tile{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:0.7rem;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    padding:1.1rem;
    min-height:168px;
    transition:border-color .18s ease, transform .18s ease, background-color .18s ease;
  }

  .game-card-tile .top-row{ display:flex; align-items:flex-start; justify-content:space-between; }
  .game-card-tile .idx{
    font-family:'JetBrains Mono', monospace;
    font-size:0.7rem;
    color:var(--ink-faint);
  }
  .game-card-tile .icon{
    width:40px; height:40px;
    border-radius:10px;
    background:var(--surface-3);
    display:flex; align-items:center; justify-content:center;
    font-size:1.15rem;
    color:var(--ink-dim);
  }
  .game-card-tile h3{
    font-family:'Space Grotesk', sans-serif;
    font-size:1rem;
    font-weight:600;
    margin:0;
  }
  .game-card-tile p{
    margin:0;
    font-size:0.8rem;
    color:var(--ink-faint);
    line-height:1.45;
    flex:1;
  }

  .badge-status{
    align-self:flex-start;
    font-family:'JetBrains Mono', monospace;
    font-size:0.68rem;
    padding:0.3rem 0.6rem;
    border-radius:999px;
    white-space:nowrap;
    border:1px solid var(--line);
    color:var(--ink-faint);
  }
  .badge-status.next{ color:var(--coral); border-color:rgba(255,111,89,0.35); }
  .badge-status.available{
    background:var(--brand-grad);
    color:var(--bg);
    border-color:transparent;
    font-weight:600;
  }

  .game-card-tile.is-playable{ cursor:pointer; }
  .game-card-tile.is-playable:hover, .game-card-tile.is-playable:focus-visible{
    border-color:var(--violet);
    transform:translateY(-3px);
  }
  .game-card-tile.is-playable .icon{ color:var(--ink); }

  .game-card-tile.is-locked{ opacity:0.6; }

  .play-chip{
    position:absolute;
    top:1.1rem; right:1.1rem;
    width:32px; height:32px;
    border-radius:50%;
    background:var(--surface-3);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-dim);
    transition:background-color .18s ease, color .18s ease;
  }
  .game-card-tile.is-playable:hover .play-chip{ background:var(--brand-grad); color:var(--bg); }

  /* ---------- Game view ---------- */

  .back-link{
    display:inline-flex; align-items:center; gap:0.4rem;
    color:var(--ink-dim);
    text-decoration:none;
    font-size:0.85rem;
    margin-bottom:1.6rem;
    background:none; border:none; padding:0; cursor:pointer;
    font-family:inherit;
  }
  .back-link:hover{ color:var(--ink); }

  .game-card{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    padding:1.75rem;
  }
  .game-head{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:1rem; flex-wrap:wrap;
    margin-bottom:1.4rem;
  }
  .game-head h2{
    font-family:'Space Grotesk', sans-serif;
    font-size:1.4rem;
    margin:0;
    font-weight:600;
  }

  .status-pill{
    font-family:'JetBrains Mono', monospace;
    font-size:0.8rem;
    padding:0.35rem 0.75rem;
    border-radius:999px;
    background:var(--surface-3);
    border:1px solid var(--line);
    color:var(--ink-dim);
    white-space:nowrap;
  }
  .status-pill.win{
    background:var(--brand-grad);
    color:var(--bg);
    border-color:transparent;
    font-weight:600;
  }

  .board-wrap{ display:flex; justify-content:center; padding:0.5rem 0 1.25rem; }
  #ticBoard{ width:min(360px, 82vw); height:min(360px, 82vw); touch-action:manipulation; }

  .score-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0.7rem; margin-bottom:1.4rem; }
  .score-box{
    background:var(--surface-1);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    padding:0.65rem 0.5rem;
    text-align:center;
  }
  .score-box .label{ font-size:0.68rem; letter-spacing:0.06em; color:var(--ink-faint); margin-bottom:0.3rem; }
  .score-box .value{ font-family:'JetBrains Mono', monospace; font-size:1.35rem; font-weight:600; }
  .score-box.x .value{ color:var(--violet); }
  .score-box.o .value{ color:var(--coral); }
  .score-box.d .value{ color:var(--ink-dim); }

  .controls-row{ display:flex; gap:0.6rem; flex-wrap:wrap; }

  .btn-primary-grad{
    background:var(--brand-grad);
    border:none;
    color:var(--bg);
    font-weight:600;
    border-radius:999px;
    padding:0.55rem 1.3rem;
    font-size:0.9rem;
    transition:filter .15s ease, transform .15s ease;
  }
  .btn-primary-grad:hover{ filter:brightness(1.08); transform:translateY(-1px); color:var(--bg); }

  .btn-ghost{
    background:transparent;
    border:1px solid var(--line);
    color:var(--ink-dim);
    border-radius:999px;
    padding:0.55rem 1.3rem;
    font-size:0.9rem;
    transition:border-color .15s ease, color .15s ease;
  }
  .btn-ghost:hover{ border-color:var(--ink-faint); color:var(--ink); }

  footer{ margin-top:3rem; color:var(--ink-faint); font-size:0.75rem; text-align:center; }

  @media (max-width:520px){
    .game-card{ padding:1.15rem; }
    .lineup{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
  }
  /* ---------- Site footer (added) ---------- */
  .site-footer{
    position:relative;
    background:var(--surface-1);
    border-top:1px solid var(--line);
    color:var(--ink-dim);
    font-size:0.85rem;
    margin-top:1rem;
  }
  .site-footer::before{
    content:"";
    position:absolute; top:-1px; left:0; right:0; height:2px;
    background:var(--brand-grad);
    opacity:0.85;
  }
  .site-footer .footer-inner{
    max-width:980px;
    margin:0 auto;
    padding:2.75rem 1.25rem 1.5rem;
  }
  .site-footer .footer-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr;
    gap:2.25rem;
    padding-bottom:2rem;
  }
  .site-footer .footer-brand p{
    margin:0.9rem 0 0;
    max-width:36ch;
    line-height:1.65;
    color:var(--ink-dim);
  }
  .site-footer .footer-heading{
    font-family:'Space Grotesk', sans-serif;
    font-size:0.78rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink);
    margin:0 0 1rem;
  }
  .site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.65rem; }
  .site-footer ul a{
    display:inline-flex; align-items:center; gap:0.5rem;
    color:var(--ink-dim);
    text-decoration:none;
    transition:color .15s ease, transform .15s ease;
  }
  .site-footer ul a:hover{ color:var(--ink); transform:translateX(2px); }
  .site-footer ul a i{ color:var(--ink-faint); transition:color .15s ease; }
  .site-footer ul a:hover i{ color:var(--violet); }
  .site-footer .footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:0.75rem 1.5rem;
    padding-top:1.25rem;
    border-top:1px solid var(--line);
    font-size:0.75rem;
    color:var(--ink-faint);
  }
  .site-footer .footer-bottom .made{ display:inline-flex; align-items:center; gap:0.4rem; }
  .site-footer .footer-bottom .made i{ color:var(--coral); }
  @media (max-width:700px){
    .site-footer .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem 1.5rem; }
    .site-footer .footer-brand{ grid-column:1 / -1; }
  }
  @media (max-width:420px){
    .site-footer .footer-grid{ grid-template-columns:1fr; }
    .site-footer .footer-bottom{ flex-direction:column; align-items:flex-start; }
  }

  /* ---------- Multi-page additions ---------- */
  a.wordmark{ text-decoration:none; }
  a.game-card-tile{ text-decoration:none; color:inherit; }

  .info-section{ margin-top:3.25rem; }
  .info-title{
    font-family:'Space Grotesk', sans-serif;
    font-size:clamp(1.3rem, 3vw, 1.65rem);
    font-weight:600;
    line-height:1.2;
    margin:0 0 1.1rem;
  }
  .info-lead{ color:var(--ink-dim); line-height:1.75; max-width:68ch; margin:0 0 1rem; }
  .info-lead strong{ color:var(--ink); font-weight:600; }

  .fact-row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0.7rem; margin:0 0 1.5rem; }
  .fact{
    background:var(--surface-1);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    padding:0.8rem 0.5rem;
    text-align:center;
  }
  .fact .num{
    font-family:'JetBrains Mono', monospace;
    font-size:1.25rem; font-weight:600;
    background:var(--brand-grad);
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
  .fact .lbl{ font-size:0.72rem; color:var(--ink-faint); margin-top:0.2rem; }

  .split{ display:grid; grid-template-columns:1.25fr 1fr; gap:1.25rem; align-items:start; }
  .info-card{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    padding:1.35rem;
  }
  .info-card .icon{
    width:40px; height:40px;
    border-radius:10px;
    background:var(--surface-3);
    display:flex; align-items:center; justify-content:center;
    color:var(--violet);
    font-size:1.1rem;
    margin-bottom:0.9rem;
  }
  .info-card h3{
    font-family:'Space Grotesk', sans-serif;
    font-size:1rem;
    font-weight:600;
    margin:0 0 0.4rem;
  }
  .info-card p{ margin:0; font-size:0.85rem; line-height:1.65; color:var(--ink-dim); }
  .info-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; }

  .how-steps{ list-style:none; counter-reset:step; margin:0 0 1.1rem; padding:0; display:flex; flex-direction:column; gap:0.85rem; }
  .how-steps li{
    counter-increment:step;
    position:relative;
    padding-left:2.4rem;
    font-size:0.88rem;
    line-height:1.6;
    color:var(--ink-dim);
  }
  .how-steps li strong{ color:var(--ink); font-weight:600; }
  .how-steps li::before{
    content:counter(step);
    position:absolute; left:0; top:0;
    width:1.65rem; height:1.65rem;
    border-radius:50%;
    background:var(--brand-grad);
    color:var(--bg);
    font-family:'JetBrains Mono', monospace;
    font-size:0.75rem; font-weight:600;
    display:flex; align-items:center; justify-content:center;
  }
  .tip-box{
    border-left:3px solid var(--violet);
    background:var(--surface-1);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    padding:0.8rem 1rem;
    font-size:0.83rem;
    line-height:1.6;
    color:var(--ink-dim);
  }
  .tip-box strong{ color:var(--ink); }
  .note-line{ margin:1rem 0 0; font-size:0.82rem; color:var(--ink-faint); }
  .note-line i{ color:var(--coral); margin-right:0.35rem; }

  @media (max-width:760px){
    .split{ grid-template-columns:1fr; }
    .fact-row{ grid-template-columns:repeat(2, 1fr); }
  }