/* GameZone shared game chrome — design tokens, layout, panels, overlays.
   Every game page links this first, then its own <game>.css for the board.
   Keep board-specific rules OUT of this file. */

  :root{
    --bg:#0b0d13; --surface:#141822; --surface-2:#1b2130; --border:#252c3c;
    --text:#e8ebf2; --muted:#8b93a7; --accent:#5b8cff; --accent-soft:rgba(91,140,255,.16);
    --c1:#4f7cff; --c2:#a855f7; --c3:#f59e0b;
    --ok:#34d399; --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.7);
    --radius:16px;
  }
  html[data-theme="light"]{
    --bg:#f6f7fa; --surface:#ffffff; --surface-2:#f1f3f8; --border:#e2e6ef;
    --text:#161a22; --muted:#667085; --accent:#3b6fe0; --accent-soft:rgba(59,111,224,.12);
    --c1:#3b6fe0; --c2:#9333ea; --c3:#d97706;
    --ok:#059669; --shadow:0 1px 2px rgba(16,24,40,.06), 0 12px 28px -14px rgba(16,24,40,.24);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font:15px/1.55 ui-sans-serif,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased; display:flex; flex-direction:column;
    transition:background .25s ease, color .25s ease;
  }
  button{font:inherit; color:inherit; cursor:pointer}
  a{color:inherit}

  /* ---------- top bar ---------- */
  .topbar{
    display:flex; align-items:center; gap:12px; padding:14px 20px;
    border-bottom:1px solid var(--border); background:var(--surface);
    position:sticky; top:0; z-index:20;
  }
  .back{
    display:inline-flex; align-items:center; gap:7px; text-decoration:none;
    color:var(--muted); font-size:13.5px; font-weight:500; padding:6px 10px;
    border-radius:9px; transition:.15s;
  }
  .back:hover{color:var(--text); background:var(--surface-2)}
  .brand{display:flex; align-items:center; gap:9px; font-weight:650; letter-spacing:-.01em}
  .brand .mark{
    width:22px;height:22px;border-radius:7px;
    background:linear-gradient(140deg,var(--c1),var(--c2));
    box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
  }
  .spacer{flex:1}
  .icon-btn{
    width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
    background:transparent;border:1px solid transparent;color:var(--muted);transition:.15s;
  }
  .icon-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border)}

  /* ---------- layout ---------- */
  main{flex:1; width:100%; max-width:1080px; margin:0 auto; padding:28px 20px 56px;
       display:grid; grid-template-columns:minmax(0,1fr) 268px; gap:28px; align-items:start}
  @media(max-width:880px){ main{grid-template-columns:minmax(0,1fr); padding-top:20px; gap:20px} }
  @media(max-width:480px){ .board-card{padding:16px; border-radius:18px} #board{gap:7px} }

  .title-row{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:4px}
  h1{font-size:26px; margin:0; letter-spacing:-.025em; font-weight:680}
  .subtitle{color:var(--muted); font-size:14px; margin:0 0 20px}

  /* ---------- tier tabs ---------- */
  .tiers{display:flex; gap:6px; background:var(--surface); border:1px solid var(--border);
         padding:4px; border-radius:12px; margin-bottom:18px; flex-wrap:wrap}
  .tier{
    flex:1; min-width:78px; padding:8px 10px; border:0; border-radius:9px; background:transparent;
    color:var(--muted); font-size:13.5px; font-weight:550; transition:.15s;
  }
  .tier:hover{color:var(--text)}
  .tier[aria-selected="true"]{background:var(--accent-soft); color:var(--accent)}

  /* ---------- board ---------- */
  .board-card{
    background:var(--surface); border:1px solid var(--border); border-radius:20px;
    padding:22px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  }
  .hud{display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap}
  .stat{
    flex:1; min-width:74px; background:var(--surface-2); border:1px solid var(--border);
    border-radius:12px; padding:9px 12px;
  }
  .stat .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:600}
  .stat .v{font-size:19px; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
  .stat.under .v{color:var(--ok)}

  .controls{display:flex; gap:8px; margin-top:20px; flex-wrap:wrap}
  .btn{
    flex:1; min-width:84px; padding:10px 12px; border-radius:11px; border:1px solid var(--border);
    background:var(--surface-2); font-size:13.5px; font-weight:560; transition:.15s;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
  }
  .btn:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
  .btn:disabled{opacity:.4; cursor:not-allowed}
  .btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
  .btn.primary:hover{filter:brightness(1.08); color:#fff}

  /* ---------- side panel ---------- */
  .side{display:flex; flex-direction:column; gap:14px}
  .panel{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px}
  .panel h2{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
            margin:0 0 12px; font-weight:650}
  .rule{display:flex; gap:11px; margin-bottom:12px; align-items:flex-start}
  .rule:last-child{margin-bottom:0}
  .glyph{
    flex:none; width:30px; height:30px; border-radius:9px; background:var(--surface-2);
    border:1px solid var(--border); display:grid; place-items:center; font-size:13px; color:var(--accent);
  }
  .rule p{margin:0; font-size:13px; color:var(--muted); line-height:1.5}
  .rule p b{color:var(--text); font-weight:600}
  .legend{display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap}
  .swatch{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;
          font-size:10px;font-weight:700;color:rgba(255,255,255,.85)}
  .swatch.lv0{background:var(--surface-2); border:1px solid var(--border)}
  .swatch.lv1{background:var(--c1)} .swatch.lv2{background:var(--c2)} .swatch.lv3{background:var(--c3)}
  .legend small{color:var(--muted); font-size:12px}
  .kv{display:flex; justify-content:space-between; font-size:13px; padding:5px 0}
  .kv span:first-child{color:var(--muted)}
  .kv span:last-child{font-weight:600; font-variant-numeric:tabular-nums}
  .toggle-row{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px}
  .switch{position:relative; width:38px; height:22px; flex:none}
  .switch input{opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
  .switch .track{position:absolute; inset:0; border-radius:99px; background:var(--surface-2);
                 border:1px solid var(--border); transition:.18s; pointer-events:none}
  .switch .thumb{position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%;
                 background:var(--muted); transition:.18s; pointer-events:none}
  .switch input:checked ~ .track{background:var(--accent-soft); border-color:var(--accent)}
  .switch input:checked ~ .thumb{left:19px; background:var(--accent)}

  /* ---------- overlays ---------- */
  .overlay{
    position:fixed; inset:0; background:rgba(5,7,12,.62); backdrop-filter:blur(6px);
    display:grid; place-items:center; padding:20px; z-index:50;
  }
  .overlay[hidden]{display:none}
  .sheet{
    background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:26px;
    max-width:420px; width:100%; box-shadow:var(--shadow); animation:rise .28s cubic-bezier(.2,.8,.3,1);
  }
  @keyframes rise{from{opacity:0; transform:translateY(14px) scale(.98)}to{opacity:1; transform:none}}
  .sheet h3{margin:0 0 6px; font-size:21px; letter-spacing:-.02em}
  .sheet p.lede{margin:0 0 18px; color:var(--muted); font-size:14px}
  .result-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:18px}
  .result-grid > div{background:var(--surface-2); border:1px solid var(--border); border-radius:11px;
                     padding:10px; text-align:center}
  .result-grid .k{font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:650}
  .result-grid .v{font-size:18px; font-weight:660; font-variant-numeric:tabular-nums}
  .badge{display:inline-block; padding:3px 9px; border-radius:99px; font-size:11.5px; font-weight:650;
         background:var(--accent-soft); color:var(--accent); margin-bottom:10px}
  .toast{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px);
    background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
    padding:10px 16px; border-radius:11px; font-size:13.5px; opacity:0; pointer-events:none;
    transition:.22s; z-index:60;
  }
  .toast.show{opacity:1; transform:translateX(-50%)}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* record panel tier label */
  #recTier{text-transform:none; letter-spacing:0}

  /* ---------- "See how it works" ---------- */
  /* Docked under the board, never over it. A demonstration you cannot see the
     board during is a video with extra steps. */
  .walk{
    margin:16px 0 0; padding:14px 16px; border-radius:12px;
    background:var(--surface-2); border:1px solid var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
  }
  .walk-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
  .walk-title{font-weight:640; font-size:14px}
  .walk-count{color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums}
  .walk-say{margin:8px 0 12px; font-size:14.5px; line-height:1.5; min-height:2.6em}
  .walk-row{display:flex; gap:8px; flex-wrap:wrap}
  .walk-row .btn{font-size:13px; padding:7px 12px}

  /* The cell a step is talking about. Deliberately loud — the caption and the
     highlight are the whole teaching mechanism. */
  .walk-focus{
    outline:3px solid var(--accent) !important;
    outline-offset:2px; border-radius:8px;
    animation:walkPulse 1.1s ease-out;
  }
  @keyframes walkPulse{
    0%{box-shadow:0 0 0 0 var(--accent-soft)}
    70%{box-shadow:0 0 0 14px transparent}
    100%{box-shadow:0 0 0 0 transparent}
  }
  @media(prefers-reduced-motion:reduce){
    .walk-focus{animation:none}
  }

  /* ---------- while a demonstration is playing ---------- */
  /* The board is locked. Two reasons it is also *visibly* locked: tapping a
     dead board with no explanation feels broken, and the whole complaint was
     that it was not clear this was a demonstration rather than your game. */
  [data-walk] .controls,
  [data-walk] .tiers{ pointer-events:none; opacity:.4 }
  [data-walk] #board,
  [data-walk] #cells,
  [data-walk] #grid,
  [data-walk] #stage,
  [data-walk] .sz-stage{ pointer-events:none }
  [data-walk="playing"] #board,
  [data-walk="playing"] #cells,
  [data-walk="playing"] #grid,
  [data-walk="playing"] #stage,
  [data-walk="playing"] .sz-stage{ cursor:not-allowed }

  .walk[data-state="done"]{ border-color:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%, transparent) }
  .walk[data-state="done"] .walk-title{ color:var(--ok) }

  /* The sentence, pinned to the square it is about. */
  .walk-callout{
    position:absolute; z-index:60; max-width:min(280px, 72vw);
    padding:9px 12px; border-radius:10px; font-size:13px; line-height:1.45;
    background:var(--accent); color:#fff; font-weight:520;
    box-shadow:0 8px 24px -8px rgba(0,0,0,.55);
    opacity:0; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease;
    pointer-events:none;
  }
  .walk-callout.in{ opacity:1; transform:translateY(0) }
  .walk-callout::after{
    content:""; position:absolute; left:50%; margin-left:-6px; bottom:-6px;
    border:6px solid transparent; border-top-color:var(--accent); border-bottom:0;
  }
  .walk-callout.below::after{ bottom:auto; top:-6px; border-top:0; border-bottom-color:var(--accent) }
  @media(prefers-reduced-motion:reduce){ .walk-callout{ transition:none } }


  /* The panel says what it is, permanently, rather than leaving you to infer it
     from the title. */
  .walk-head{flex-wrap:wrap}
  .walk-badge{
    font-size:10.5px; font-weight:700; letter-spacing:.09em;
    padding:3px 8px; border-radius:999px; background:var(--accent); color:#fff;
    align-self:center; margin-right:8px;
  }
  .walk[data-state="done"] .walk-badge{ background:var(--ok) }
  .walk-title{flex:1; min-width:0}
  .walk-row .btn:disabled{opacity:.35}


  /* ---------- round mode ---------- */
  /* Fluxgrid had this chip; the other five did not, so a demonstration there
     looked like an ordinary round on a board that had inexplicably changed. */
  .mode-chip{
    font-size:11.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
    padding:3px 9px; border-radius:999px; border:1px solid var(--border);
    color:var(--muted); background:var(--surface-2); white-space:nowrap;
  }
  .mode-chip[data-kind="demo"]{
    color:#fff; background:var(--accent); border-color:var(--accent);
    animation:demoPulse 2s ease-in-out infinite;
  }
  @keyframes demoPulse{ 0%,100%{opacity:1} 50%{opacity:.72} }
  @media(prefers-reduced-motion:reduce){ .mode-chip[data-kind="demo"]{animation:none} }
  .title-row{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}