: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)}

  #board{
    display:grid; gap:9px; margin:0 auto; touch-action:manipulation;
    width:min(100%, 452px);
  }
  .cell{
    position:relative; aspect-ratio:1; border-radius:14px; border:1px solid var(--border);
    background:var(--surface-2); display:grid; place-items:center;
    font-size:15px; font-weight:650; color:transparent; font-variant-numeric:tabular-nums;
    transition:background .22s ease, border-color .22s, transform .12s ease, box-shadow .22s, color .22s;
  }
  .cell:hover{transform:translateY(-1px)}
  .cell:active{transform:scale(.94)}
  .cell:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .cell[data-v="1"]{background:var(--c1); border-color:var(--c1); color:rgba(255,255,255,.82); box-shadow:0 6px 18px -8px var(--c1)}
  .cell[data-v="2"]{background:var(--c2); border-color:var(--c2); color:rgba(255,255,255,.82); box-shadow:0 6px 18px -8px var(--c2)}
  .cell[data-v="3"]{background:var(--c3); border-color:var(--c3); color:rgba(255,255,255,.88); box-shadow:0 6px 18px -8px var(--c3)}
  .cell.preview{box-shadow:0 0 0 2px var(--accent) inset}
  .cell.hint{animation:hintPulse 1s ease-in-out 3}
  @keyframes hintPulse{0%,100%{box-shadow:0 0 0 0 var(--accent-soft)}50%{box-shadow:0 0 0 8px var(--accent-soft)}}
  .cell.bump{animation:bump .28s ease}
  @keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.1)}100%{transform:scale(1)}}
  /* diagonal (X) nodes */
  .cell[data-x="1"]{border-style:dashed; border-width:2px}
  .cell[data-x="1"]::after{
    content:"✕"; position:absolute; top:5px; right:7px; font-size:9px; font-weight:700;
    opacity:.55; color:currentColor;
  }
  .cell[data-x="1"][data-v="0"]::after{color:var(--muted); opacity:.7}

  .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}

  /* ---------- ranked play ---------- */
  /* Added when the API arrived. The chip is deliberately quiet: practice is a
     perfectly good way to play, and a page that nags about signing in to make
     a puzzle "count" is a worse page. */
  .topnav{
    color:var(--muted); font-size:13.5px; font-weight:520; padding:6px 10px;
    border-radius:9px; text-decoration:none; transition:.15s;
  }
  .topnav:hover{color:var(--text); background:var(--surface-2)}

  .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="ranked"]{
    color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, transparent);
    background:color-mix(in srgb, var(--ok) 12%, transparent);
  }

  .rank{
    margin:16px 0 4px; padding:14px 16px; border-radius:12px;
    background:var(--surface-2); border:1px solid var(--border); text-align:left;
  }
  .rank[data-kind="muted"]{opacity:.8}
  .rank-line{margin:0; font-weight:600; font-size:14.5px}
  .rank-sub{margin:4px 0 0; color:var(--muted); font-size:13px}

  ol.sides{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px}
  ol.sides li{
    display:flex; justify-content:space-between; gap:12px; font-size:14px;
    padding:7px 10px; border-radius:9px; background:var(--surface);
    border:1px solid var(--border);
  }
  ol.sides li:first-child{border-color:color-mix(in srgb, var(--ok) 40%, var(--border))}
  ol.sides .who{font-weight:560}
  ol.sides .ms{color:var(--muted); font-variant-numeric:tabular-nums}

  /* ---------- level and points ---------- */
  /* The number that always goes up. Small, in the corner, always visible —
     the point of it is that you notice it move, not that it dominates. */
  .level-chip{
    display:inline-flex; align-items:center; gap:8px; font-size:12.5px;
    padding:5px 11px; border-radius:999px; border:1px solid var(--border);
    background:var(--surface-2); color:var(--muted); white-space:nowrap;
  }
  .level-chip b{color:var(--text); font-weight:620}
  .level-chip .bar{
    display:block; width:52px; height:4px; border-radius:99px;
    background:var(--border); overflow:hidden;
  }
  .level-chip .bar i{display:block; height:100%; background:var(--accent); border-radius:99px}

  .rank-points{margin:8px 0 0; font-weight:640; font-size:15px; color:var(--accent)}
  .level-bar{
    height:6px; border-radius:99px; background:var(--border);
    overflow:hidden; margin:8px 0 6px;
  }
  .level-bar i{display:block; height:100%; background:var(--accent); border-radius:99px}

  .nudge{
    margin:12px 0 0; padding:10px 12px; border-radius:10px; font-size:13px;
    background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 35%, transparent);
    color:var(--text);
  }
  .nudge a{color:var(--accent); font-weight:600}