/* IBM Plex, bundled so the app looks right with no network (SIL Open Font License) */
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/plex-mono-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/plex-cond-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/plex-cond-700.woff2) format("woff2")}

/* ---- the website's stylesheet, unchanged (index.html <style>) ---- */
  /* ---------- one committed dark world: same on phone and desktop ---------- */
  :root{
    --ground:#0E1518; --panel:#21313D; --panel-2:#2F4654; --edge:#3E5C6D;
    --ink:#E9F1EF; --dim:#A4B3B9; --faint:#879AA3;
    --mint:#4FD6A9; --coral:#FF6152; --amber:#F4B942;
    --onAccent:#0E1518;
    --lieBg:color-mix(in srgb, var(--coral) 17%, var(--panel));
    --scrim:color-mix(in srgb, var(--ground) 74%, transparent);
    --shadow:0 12px 34px rgba(0,0,0,.55);
    --accent:#F4B942;
    /* every tint below re-derives itself when --accent changes per mode */
    --wash:color-mix(in srgb, var(--accent) 17%, transparent);
    --tint:color-mix(in srgb, var(--accent) 13%, transparent);
    --tintSoft:color-mix(in srgb, var(--accent) 6%, transparent);
    --tintEdge:color-mix(in srgb, var(--accent) 42%, var(--edge));
    --glow:color-mix(in srgb, var(--accent) 34%, transparent);
    --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    --cond:"IBM Plex Sans Condensed","Helvetica Neue",Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;color-scheme:dark;background:var(--ground)}
  body{
    background:var(--ground); color:var(--ink);
    font-family:var(--mono); font-size:14px; line-height:1.5;
    -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
    min-height:100vh;
  }
  /* the mode's colour washed over the whole screen, behind everything */
  body::after{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(1100px 520px at 50% -170px, var(--wash), transparent 68%),
      radial-gradient(760px 440px at 108% 104%, color-mix(in srgb,var(--mint) 6%,transparent), transparent 70%);
  }
  button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

  /* ---------- masthead ---------- */
  .shell{
    position:relative; z-index:1;
    max-width:560px; margin:0 auto; min-height:100vh;
    border-left:1px solid var(--edge); border-right:1px solid var(--edge);
    background:transparent;
  }
  @media (max-width:600px){ .shell{border-left:none;border-right:none} }
  #mast{
    position:sticky; top:0; z-index:10;
    background:color-mix(in srgb, var(--ground) 86%, transparent);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--edge);
    box-shadow:inset 0 -1px 0 var(--tintSoft);
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    padding:11px 14px; gap:8px;
  }
  .wordmark{
    font-family:var(--cond); font-weight:700; font-size:26px; line-height:1;
    margin:0; padding:0;
    letter-spacing:.1em; text-transform:uppercase; text-align:center; white-space:nowrap;
  }
  .wordmark span{
    background:linear-gradient(96deg,var(--coral) 12%,var(--amber));
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:var(--coral);
  }
  .mast-l{justify-self:start;display:flex;gap:3px}
  .mast-r{justify-self:end;display:flex;gap:3px}
  #helpBtn{--ic:var(--amber)}
  #practiceBtn{--ic:var(--mint)}
  #lbBtn{--ic:var(--amber)}
  #statsBtn{--ic:var(--coral)}
  .icon{
    --ic:var(--ink);
    min-width:46px;padding:5px 6px 4px;border-radius:6px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    line-height:1;
    color:color-mix(in srgb,var(--ic) 55%,var(--ink));
    background:none;border:none;
    transition:background .14s,color .14s;
  }
  .icon span{
    font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;
    color:color-mix(in srgb,var(--ic) 28%,var(--dim));
  }
  .icon:hover{
    color:var(--ic);
    background:color-mix(in srgb,var(--ic) 12%,transparent);
  }
  .icon:hover span{color:var(--ink)}
  .icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

  /* ---------- sub bar ---------- */
  #subbar{
    border-bottom:1px solid var(--edge);
    background:linear-gradient(180deg,var(--tintSoft),transparent),var(--panel);
    display:flex; align-items:center; gap:8px;
    padding:6px 16px; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
    color:var(--dim);
  }
  #subbar .tier{color:var(--accent);font-weight:600}
  #tierWrap[hidden],#clockWrap[hidden],#streak[hidden]{display:none}
  #subbar .grow{flex:1}
  #streak{font-variant-numeric:tabular-nums;color:var(--amber);font-weight:600;letter-spacing:.06em}
  #clockWrap{
    display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
    border:1px solid var(--tintEdge);border-radius:999px;padding:4px 11px 4px 9px;
    background:var(--tintSoft);color:var(--dim);
  }
  #clockWrap svg{
    width:13px;height:13px;flex:none;fill:none;stroke:currentColor;
    stroke-width:1.9;stroke-linecap:round;
  }
  #clock{
    font-variant-numeric:tabular-nums;letter-spacing:.06em;
    font-size:12.5px;font-weight:600;color:var(--ink);
  }
  #clockWrap.urgent{border-color:var(--coral);color:var(--coral)}
  #clockWrap.urgent #clock{color:var(--coral)}

  /* ---------- page column ---------- */
  .wrap{padding:0 16px}
  main{padding-top:8px;padding-bottom:18px}
  #backToDaily{
    width:100%;margin-top:14px;padding:11px 10px;border-radius:4px;
    border:1px solid var(--edge);background:var(--panel);
    font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--dim);
  }
  #backToDaily:hover{border-color:var(--faint);color:var(--ink)}
  #backToDaily[hidden]{display:none}
  #modes[hidden]{display:none}
  #practiceNav{display:flex;align-items:center;gap:6px;margin-top:10px}
  #practiceNav[hidden]{display:none}
  #pPrev,#pNext{
    flex:none;width:34px;height:34px;border:1px solid var(--edge);border-radius:4px;
    background:var(--panel);color:var(--dim);font-size:16px;line-height:1;
  }
  #pPrev:hover,#pNext:hover{border-color:var(--faint);color:var(--ink)}
  #pPick{
    flex:1;height:34px;border:1px solid var(--edge);border-radius:4px;background:var(--panel);
    font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--dim);
  }
  #pPick:hover{border-color:var(--faint);color:var(--ink)}
  #pPick .car{color:var(--faint);margin-left:2px}
  /* the numbers live in a panel, so the board stays clean */
  #pList{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
  .pChip{
    aspect-ratio:1/1;border:1px solid var(--edge);border-radius:4px;background:var(--ground);
    font-family:var(--mono);font-size:13px;color:var(--dim);
    display:flex;align-items:center;justify-content:center;padding:0;
  }
  .pChip:hover{border-color:var(--faint);color:var(--ink)}
  .pChip.on{border-color:var(--mint);color:var(--mint);background:color-mix(in srgb,var(--mint) 14%,transparent);font-weight:600}
  .pChip.won{border-color:color-mix(in srgb,var(--mint) 45%,transparent);color:var(--mint)}
  .pChip.lost{border-color:color-mix(in srgb,var(--coral) 40%,transparent);color:var(--coral)}
  #modes{
    display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
    padding:8px 0 3px;
  }
  .modeBtn[data-mode="EASY"]{--mc:var(--mint)}
  .modeBtn[data-mode="MEDIUM"]{--mc:var(--amber)}
  .modeBtn[data-mode="HARD"]{--mc:var(--coral)}
  .modeBtn{
    border:1px solid var(--edge);border-radius:4px;
    background:linear-gradient(180deg,color-mix(in srgb,var(--mc) 5%,transparent),transparent),var(--panel);
    padding:7px 4px 6px;text-align:center;line-height:1.2;
    transition:border-color .14s,background .14s,color .14s,box-shadow .14s;
  }
  .modeBtn b{
    display:block;font-family:var(--cond);font-weight:700;font-size:14px;
    letter-spacing:.06em;text-transform:uppercase;
    color:color-mix(in srgb,var(--mc) 55%,var(--dim));
  }
  .modeBtn span{
    display:block;font-size:9.5px;line-height:1.35;letter-spacing:.05em;margin-top:2px;
    color:color-mix(in srgb,var(--mc) 42%,var(--faint));
  }
  .modeBtn:hover{border-color:color-mix(in srgb,var(--mc) 50%,var(--edge))}
  .modeBtn.on{
    border-color:var(--mc);
    background:linear-gradient(180deg,color-mix(in srgb,var(--mc) 8%,transparent),
                                      color-mix(in srgb,var(--mc) 3%,transparent)),var(--panel);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mc) 32%,transparent),
               0 6px 22px -10px var(--mc);
  }
  .modeBtn.on b{color:color-mix(in srgb,var(--mc) 86%,var(--ink))}
  .modeBtn.on span{color:color-mix(in srgb,var(--mc) 88%,var(--dim))}
  .modeBtn.solved b::after{content:" \2713";color:var(--mint)}
  .modeBtn.failed b::after{content:" \2715";color:var(--coral)}
  .icon.on{
    background:color-mix(in srgb,var(--mint) 14%,transparent);color:var(--mint);
  }
  .icon.on span{color:var(--mint)}
  #practiceNext{
    display:block;width:100%;max-width:460px;margin:12px auto 0;
    background:var(--mint);color:var(--onAccent);border:1px solid var(--mint);border-radius:3px;
    padding:14px 0;font-family:var(--cond);font-weight:700;letter-spacing:.09em;font-size:14px;
  }
  #practiceNext[hidden]{display:none}
  .rubric{
    font-size:12px;color:var(--dim);line-height:1.45;text-align:center;
    max-width:64ch;margin:0 auto 6px;text-wrap:balance;
  }
  .rubric b{color:var(--ink);font-weight:600}
  .noJsNote{
    border:1px solid var(--amber);border-left:3px solid var(--amber);
    background:color-mix(in srgb,var(--amber) 7%,transparent);
    padding:13px 15px;margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--dim);
  }
  .noJsNote b{display:block;color:var(--amber);font-weight:600;margin-bottom:4px}
  .noJsLinks{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
  .noJsLinks a{
    color:var(--mint);text-decoration:none;font-size:11px;
    letter-spacing:.1em;text-transform:uppercase;
  }
  .noJsLinks a:hover{text-decoration:underline}

  /* ---------- statements ---------- */
  ol#clues{list-style:none;display:flex;flex-direction:column;gap:4px}
  .clue{
    position:relative;display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
    background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 4%,var(--panel)),var(--panel));
    border:1px solid var(--edge);border-left:3px solid var(--faint);
    padding:6px 12px;transition:background .14s,border-color .14s,opacity .14s;
  }
  .clue:hover{background:var(--panel-2);border-left-color:var(--dim)}
  .clue .n{
    font-family:var(--cond);font-weight:700;font-size:13px;color:var(--dim);
    min-width:15px;line-height:1.35;font-variant-numeric:tabular-nums;
  }
  .clue .txt{flex:1;font-size:13.5px;line-height:1.4}
  .clue .txt{
    flex:1;font-size:13px;line-height:1.35;text-align:left;
    background:none;border:none;padding:0;color:inherit;font:inherit;cursor:pointer;
  }
  .marks{display:flex;gap:5px;flex:none}
  .mk{
    width:28px;height:28px;flex:none;border:1px solid var(--edge);border-radius:3px;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;line-height:1;color:var(--dim);background:var(--panel-2);
    transition:border-color .12s,color .12s,background .12s;
  }
  .mk:hover{border-color:var(--tintEdge);color:var(--ink);background:var(--tintSoft)}
  .mkX.on{border-color:var(--coral);color:var(--coral);background:color-mix(in srgb,var(--coral) 12%,transparent)}
  .mkV.on{border-color:var(--mint);color:var(--mint);background:color-mix(in srgb,var(--mint) 12%,transparent)}
  .flag{font-size:11px;letter-spacing:.1em;color:var(--faint);flex:none;min-width:26px;text-align:right}
  .flag.lie{color:var(--coral);font-weight:600}
  .clue.suspect{border-left-color:var(--coral);opacity:.6}
  .clue.suspect .txt{text-decoration:line-through;text-decoration-color:var(--coral);text-decoration-thickness:2px;color:var(--dim)}
  .clue.suspect .mk{color:var(--coral)}
  .clue.cleared{border-left-color:var(--mint)}
  .clue.cleared .mk{color:var(--mint)}
  .clue.isLie{border-left-color:var(--coral);border-color:var(--coral);background:var(--lieBg);opacity:1}
  .clue.isLie .txt{text-decoration:none;color:var(--ink)}
  .clue.isLie .mk{color:var(--coral);font-weight:600}
  .clue.isTrue{opacity:.45}
  .clue.isTrue .txt{text-decoration:none}

  /* ---------- guess log ---------- */
  #log{display:flex;flex-direction:column;gap:6px;margin-top:16px}
  #log:empty{margin:0}
  .row{
    display:flex;align-items:center;gap:10px;background:var(--panel);
    border:1px solid var(--edge);padding:9px 12px;animation:slide .2s ease-out;
  }
  @keyframes slide{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
  .row .code{font-weight:600;letter-spacing:.32em;font-size:15px;font-variant-numeric:tabular-nums}
  .row .brk{font-size:10.5px;letter-spacing:.04em;color:var(--dim);white-space:nowrap}
  .row .brk.ok{color:var(--mint)}
  .row .brk.bad{color:var(--coral)}
  .row .pips{display:flex;gap:3px;margin-left:auto}
  .pip{width:10px;height:10px;border-radius:1px;background:var(--edge)}
  .pip.on{background:var(--mint);box-shadow:0 0 7px -1px var(--mint)}

  /* ---------- entry + keyboard ---------- */
  #streakBanner{
    display:none;margin-top:18px;border:1px solid var(--edge);border-left:3px solid var(--amber);
    background:var(--panel);padding:10px 13px;font-size:12.5px;color:var(--dim);text-align:center;
  }
  #streakBanner.on{display:block}
  #streakBanner b{color:var(--amber);font-weight:600}
  #says{
    font-size:12.5px;color:var(--dim);min-height:26px;line-height:1.4;
    display:flex;align-items:center;justify-content:center;text-align:center;
    margin-top:10px;text-wrap:balance;
  }
  #says.sting{color:var(--coral)}
  #says.good{color:var(--mint)}
  #dock{margin-top:8px}
  #tries{
    text-align:center;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--dim);margin-bottom:6px;min-height:14px;
  }
  #tries .hint{color:var(--faint);text-transform:none;letter-spacing:.04em}
  #tries.last{color:var(--coral);font-weight:600}
  #tries.done{color:var(--faint)}
  #slots{display:flex;gap:8px;justify-content:center;margin-bottom:6px}
  .slot{
    width:52px;height:52px;flex:0 0 52px;border:1px solid var(--edge);
    background:linear-gradient(180deg,var(--panel-2),var(--panel));
    cursor:pointer;padding:0;color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--cond);font-weight:700;font-size:29px;
    font-variant-numeric:tabular-nums;transition:border-color .14s,background .14s;
  }
  .slot.filled{
    border-color:var(--tintEdge);
    background:linear-gradient(180deg,var(--tint),var(--panel));
  }
  /* the answer, shown once a warm-up is out of attempts */
  .slot.reveal{
    border-color:var(--coral);color:var(--coral);
    background:linear-gradient(180deg,color-mix(in srgb,var(--coral) 16%,var(--panel)),var(--panel));
  }
  .slot:hover:not(:disabled){border-color:var(--faint)}
  .slot.next{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 26px -4px var(--accent)}
  .slot:disabled{cursor:default}
  .slot.shake{animation:nope .32s}
  @keyframes nope{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}
    40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

  #pad{display:flex;flex-direction:column;gap:7px;max-width:460px;margin:0 auto}
  #pad[hidden]{display:none}
  .padrow{display:grid;gap:6px}
  .padrow.digits{grid-template-columns:repeat(6,1fr)}
  .padrow.acts{grid-template-columns:1fr 2fr}
  .key{
    border:1px solid var(--edge);border-radius:3px;
    background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 9%,var(--panel-2)),var(--panel));
    box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 9%,transparent);
    padding:11px 0;font-family:var(--cond);font-weight:700;font-size:19px;
    font-variant-numeric:tabular-nums;transition:background .1s,transform .06s,border-color .1s;
  }
  .key:hover{border-color:var(--tintEdge);background:var(--panel-2)}
  .key:active{transform:scale(.95);background:var(--tint);border-color:var(--accent)}
  .key.util{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.11em;color:var(--dim)}
  /* .key sets background and a border shorthand; use a higher-specificity
     selector and explicit longhands so ACCUSE cannot lose to it. */
  #go.key{
    background-image:none;
    background-color:var(--accent);border-color:var(--accent);
    color:var(--onAccent);letter-spacing:.1em;font-size:15px;
    box-shadow:0 8px 24px -10px var(--accent);
  }
  #go.key[disabled]{
    background-image:none;
    background-color:var(--tintSoft);border-color:var(--tintEdge);
    color:var(--dim);cursor:not-allowed;box-shadow:none;
  }

  /* ---------- scratchpad ---------- */
  #scratchBar{display:flex;justify-content:center;margin-top:8px}
  #scratchToggle{
    font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
    border:1px solid var(--tintEdge);border-radius:3px;padding:7px 14px;background:var(--tintSoft);
  }
  #scratchToggle:hover{color:var(--accent);border-color:var(--accent)}
  #scratchToggle .car{display:inline-block;margin-left:6px;transition:transform .18s}
  #scratchToggle.open .car{transform:rotate(180deg)}
  #scratch{display:none;margin-top:12px;border:1px solid var(--edge);background:var(--panel);padding:14px 13px}
  #scratch.on{display:block}
  .scratchHead{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:5px;
  }
  #resetGrid{
    font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
    border:1px solid var(--edge);border-radius:3px;padding:5px 10px;background:var(--ground);
  }
  #resetGrid:hover{color:var(--ink);border-color:var(--faint)}
  .scratchLegend{font-size:10.5px;color:var(--faint);margin-bottom:9px}
  .scratchLegend b{font-weight:600}
  .scratchLegend .x{color:var(--coral)}
  .scratchLegend .v{color:var(--mint)}
  .grid{display:flex;flex-direction:column;gap:5px}
  .gridRow{display:flex;align-items:center;gap:5px}
  .gridRow .pos{font-size:9.5px;letter-spacing:.1em;color:var(--dim);width:26px;flex:none}
  .dchip{
    flex:1;padding:9px 0;text-align:center;border:1px solid var(--edge);
    background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 6%,var(--panel-2)),var(--panel));
    font-family:var(--cond);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;
    border-radius:2px;transition:opacity .12s,color .12s,background .12s;
  }
  .dchip.off{
    color:var(--faint);opacity:.4;background:var(--ground);
    text-decoration:line-through;text-decoration-color:var(--coral);text-decoration-thickness:2px;
  }
  .dchip.pick{
    color:var(--mint);border-color:var(--mint);opacity:1;
    background:linear-gradient(180deg,color-mix(in srgb,var(--mint) 22%,transparent),color-mix(in srgb,var(--mint) 8%,transparent));
    box-shadow:inset 0 0 0 1px var(--mint),0 0 16px -5px var(--mint);
  }
  #notes{
    width:100%;min-height:86px;margin-top:13px;resize:vertical;
    background:var(--ground);border:1px solid var(--edge);color:var(--ink);
    font-family:var(--mono);font-size:13px;line-height:1.6;padding:10px 11px;
  }
  #notes:focus{outline:2px solid var(--accent);outline-offset:-1px}
  #notes::placeholder{color:var(--faint)}
  .scratchFoot{display:flex;justify-content:space-between;align-items:center;margin-top:9px}
  #clearScratch{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
  #clearScratch:hover{color:var(--coral)}
  .scratchHint{font-size:10.5px;color:var(--faint)}

  /* ---------- leaderboard ---------- */
  #lbList{display:flex;flex-direction:column;gap:2px;max-height:46vh;overflow-y:auto;margin:0 -4px;padding:0 4px}
  .lbRow{
    display:flex;align-items:center;gap:10px;padding:8px 9px;
    border:1px solid transparent;border-bottom:1px solid var(--edge);font-size:12.5px;
  }
  .lbRow:last-child{border-bottom:none}
  .lbRow.me{background:var(--panel-2);border:1px solid var(--accent)}
  .lbRow .rk{
    font-family:var(--cond);font-weight:700;font-size:13px;color:var(--dim);
    width:26px;flex:none;font-variant-numeric:tabular-nums;
  }
  .lbRow.top1 .rk{color:var(--amber)}
  .lbRow .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lbRow .gs{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;flex:none}
  .lbRow .tm{font-variant-numeric:tabular-nums;color:var(--dim);font-size:11.5px;width:52px;text-align:right;flex:none}
  .lbRow.unsolved .gs,.lbRow.unsolved .who{color:var(--dim);font-weight:400}
  #lbYou{
    border-left:3px solid var(--accent);background:var(--ground);border:1px solid var(--edge);
    padding:11px 13px;font-size:13px;color:var(--ink);
  }
  #lbYou b{font-family:var(--cond);font-size:19px;font-weight:700}
  #lbNote{font-size:11px;color:var(--faint);line-height:1.6;text-align:center}
  .lbEmpty{text-align:center;color:var(--dim);font-size:12.5px;padding:22px 0}

  footer{
    border-top:1px solid var(--edge);margin-top:30px;padding:18px 16px 34px;
    text-align:center;font-size:11px;color:var(--faint);line-height:1.7;
  }
  footer b{color:var(--dim);font-weight:500}
  .siteLinks{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;margin-top:13px}
  .siteLinks a{
    color:var(--dim);text-decoration:none;font-size:11px;
    letter-spacing:.11em;text-transform:uppercase;
  }
  .siteLinks a:hover{color:var(--mint)}

  /* ---------- modals ---------- */
  .modal{
    position:fixed;inset:0;z-index:40;display:none;
    align-items:center;justify-content:center;padding:16px;
    background:var(--scrim);
  }
  .modal.on{display:flex}
  /* the page is pinned while a modal is open; the sheet keeps its own scroll */
  body.locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}
  .modal{overscroll-behavior:contain}
  .sheet{
    width:100%;max-width:460px;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:var(--panel);border:1px solid var(--edge);box-shadow:var(--shadow);
    padding:24px 22px;animation:rise .22s cubic-bezier(.2,.9,.3,1);
  }
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .sheet h2{
    font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.15em;
    text-transform:uppercase;text-align:center;margin-bottom:4px;
  }
  .closeX{
    position:absolute;top:6px;right:8px;width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    font-size:23px;line-height:1;color:var(--dim);border-radius:50%;
    transition:color .14s,background .14s;
  }
  .closeX:hover{color:var(--ink);background:var(--panel-2)}
  .sheet .body{font-size:13px;line-height:1.65;color:var(--dim);display:flex;flex-direction:column;gap:13px}
  .sheet .body b{color:var(--ink);font-weight:600}
  .rule{border-left:2px solid var(--accent);padding-left:12px}
  .ex{
    background:var(--panel-2);border:1px solid var(--edge);padding:12px 13px;
    font-size:12.5px;line-height:1.7;color:var(--ink);
  }
  .ex i{color:var(--dim);font-style:normal}
  .demoGrid{
    display:flex;flex-direction:column;gap:5px;
    background:var(--panel-2);border:1px solid var(--edge);padding:10px 11px;
  }
  .demoRow{display:flex;align-items:center;gap:5px}
  .demoRow span{font-size:9.5px;letter-spacing:.1em;color:var(--dim);width:22px;flex:none}
  .demoRow i{
    flex:1;text-align:center;font-style:normal;padding:6px 0;border-radius:2px;
    font-family:var(--cond);font-weight:700;font-size:14px;
    border:1px solid var(--edge);background:var(--ground);color:var(--ink);
  }
  .demoRow i.off{
    color:var(--faint);opacity:.45;
    text-decoration:line-through;text-decoration-color:var(--coral);text-decoration-thickness:2px;
  }
  .legend{display:flex;flex-direction:column;gap:7px;font-size:12.5px}
  .legend div{display:flex;gap:9px;align-items:baseline}
  .legend .k{color:var(--accent);font-weight:600;min-width:20px}

  /* endgame block inside the stats modal */
  #verdict{font-family:var(--cond);font-weight:700;font-size:30px;letter-spacing:.03em;text-transform:uppercase;text-align:center;line-height:1}
  #verdict.win{color:var(--mint);text-shadow:0 0 26px color-mix(in srgb,var(--mint) 45%,transparent)}
  #verdict.lose{color:var(--coral);text-shadow:0 0 26px color-mix(in srgb,var(--coral) 40%,transparent)}
  #vsub{font-size:12.5px;color:var(--dim);text-align:center;text-wrap:balance;line-height:1.55}
  #vsub b{color:var(--ink);font-weight:600}
  #reveal{border:1px solid var(--edge);border-left:3px solid var(--coral);background:var(--ground);padding:11px 13px;font-size:13px;line-height:1.45;color:var(--ink)}
  #reveal .lbl{display:block;font-size:9.5px;letter-spacing:.16em;color:var(--coral);margin-bottom:4px}
  #endgame{display:flex;flex-direction:column;gap:13px}
  #endgame:empty{display:none}

  .statrow{display:flex;justify-content:space-between;gap:6px;text-align:center}
  .statrow .stat b{display:block;font-family:var(--cond);font-weight:700;font-size:26px;line-height:1;font-variant-numeric:tabular-nums;color:var(--accent)}
  .stat span{font-size:9px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
  .modeTag{
    text-align:center;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent);margin:-2px 0 14px;
  }
  .distTitle{font-size:9.5px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;text-align:center}
  .dist{display:flex;flex-direction:column;gap:4px}
  .bar{display:flex;align-items:center;gap:8px;font-size:11.5px;font-variant-numeric:tabular-nums}
  .bar .lab{width:16px;color:var(--dim);text-align:right}
  .bar .fill{
    background:linear-gradient(90deg,var(--tintEdge),var(--edge));
    color:var(--ink);padding:2px 7px;min-width:26px;
    text-align:right;font-weight:600;transition:width .4s ease;
  }
  .bar.hot .fill{background:linear-gradient(90deg,color-mix(in srgb,var(--mint) 72%,var(--amber)),var(--mint));color:var(--onAccent)}
  .nextCaseWrap{display:flex;gap:14px;border-top:1px solid var(--edge);padding-top:15px;align-items:center}
  .nextCase{flex:1;text-align:center}
  .nextCase span{display:block;font-size:9px;letter-spacing:.13em;color:var(--dim);text-transform:uppercase;margin-bottom:3px}
  .nextCase b{font-family:var(--cond);font-weight:700;font-size:23px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
  .afterRow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #contactBtn{
    text-align:center;border:1px solid var(--mint);border-radius:3px;padding:12px 0;
    font-family:var(--cond);font-weight:700;letter-spacing:.08em;font-size:13.5px;
    color:var(--mint);background:color-mix(in srgb,var(--mint) 12%,transparent);
    box-shadow:0 0 18px -8px var(--mint);
    transition:background .14s,box-shadow .14s;
  }
  #contactBtn:hover{
    background:color-mix(in srgb,var(--mint) 22%,transparent);
    box-shadow:0 0 22px -6px var(--mint);
  }
  #archiveLink{
    display:block;text-align:center;text-decoration:none;
    border:1px solid var(--edge);border-radius:3px;padding:12px 0;
    font-family:var(--cond);font-weight:700;letter-spacing:.08em;font-size:13.5px;
    color:var(--dim);transition:border-color .14s,color .14s;
  }
  #archiveLink:hover{border-color:var(--mint);color:var(--mint)}
  #share{
    flex:1;background:var(--mint);color:var(--onAccent);border:1px solid var(--mint);border-radius:3px;
    padding:15px 0;font-family:var(--cond);font-weight:700;letter-spacing:.09em;font-size:15px;
  }
  #helpPractice{
    width:100%;background:transparent;color:var(--mint);
    border:1px solid var(--mint);border-radius:3px;padding:13px 0;margin-top:2px;
    font-family:var(--cond);font-weight:700;letter-spacing:.09em;font-size:14px;
  }
  #helpPractice:hover{background:color-mix(in srgb,var(--mint) 10%,transparent)}
  .helpContact{font-size:12.5px;color:var(--dim);text-align:center;margin-top:4px}
  #helpContact{color:var(--mint);text-decoration:underline;font:inherit;padding:0}
  #helpPlay{
    position:sticky;bottom:-24px;z-index:2;
    width:100%;background:var(--mint);color:var(--onAccent);border:1px solid var(--mint);
    border-radius:3px;padding:15px 0;margin-top:6px;
    font-family:var(--cond);font-weight:700;letter-spacing:.09em;font-size:15px;
    box-shadow:0 -18px 22px -8px var(--panel), 0 24px 0 24px var(--panel);
  }
  #nameInput{
    flex:1;min-width:0;background:var(--ground);border:1px solid var(--edge);color:var(--ink);
    font-family:var(--mono);font-size:13px;padding:11px 12px;border-radius:3px;
  }
  #nameInput:focus{outline:2px solid var(--accent);outline-offset:-1px}
  #nameSave{
    border:1px solid var(--edge);border-radius:3px;padding:0 15px;background:var(--panel-2);
    font-family:var(--cond);font-weight:700;letter-spacing:.08em;font-size:13px;
  }
  #nameSave:hover{border-color:var(--faint)}
  #playAgain{
    width:100%;border:1px solid var(--edge);border-radius:3px;padding:13px 0;
    font-family:var(--cond);font-weight:700;letter-spacing:.08em;font-size:14px;color:var(--ink);
  }
  #playAgain:hover{border-color:var(--faint)}

  #sharePreview{
    background:var(--ground);border:1px solid var(--edge);padding:13px;margin:0;
    font-family:var(--mono);font-size:13px;line-height:1.55;color:var(--ink);
    white-space:pre-wrap;word-break:break-word;text-align:center;
    -webkit-user-select:all;user-select:all;
  }
  .shareGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  .sbtn{
    display:flex;align-items:center;justify-content:center;gap:6px;
    border:1px solid var(--edge);border-radius:3px;background:var(--panel-2);
    padding:13px 4px;font-family:var(--cond);font-weight:700;font-size:13px;
    letter-spacing:.05em;color:var(--ink);text-decoration:none;cursor:pointer;
    transition:border-color .12s,background .12s;
  }
  .sbtn:hover{background:var(--edge)}
  .sbtn::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
  .sbtn.wa::before{background:#25D366}
  .sbtn.tw::before{background:#E7E9EA}
  .sbtn.tg::before{background:#29A9EB}
  .sbtn.fb::before{background:#1877F2}
  .sbtn.rd::before{background:#FF4500}
  .sbtn.cp::before{background:var(--amber)}
  .sbtn.native{width:100%;background:var(--mint);border-color:var(--mint);color:var(--onAccent);font-size:14px}
  .sbtn.native::before{display:none}
  .shareHint{font-size:11.5px;color:var(--faint);line-height:1.6;text-align:center}
  .shareHint b{color:var(--dim)}
  .ctSubject{
    display:flex;align-items:baseline;gap:10px;
    border:1px solid var(--edge);border-left:3px solid var(--accent);
    background:var(--ground);padding:9px 12px;border-radius:3px;
  }
  .ctSubject span{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
  .ctSubject b{font-family:var(--cond);font-weight:700;font-size:15px;color:var(--ink);letter-spacing:.04em}
  #ctBody,#ctEmail{
    background:var(--panel-2);border:1px solid var(--edge);color:var(--ink);
    font-family:var(--mono);font-size:13px;padding:10px 11px;border-radius:3px;width:100%;
  }
  #ctBody{resize:vertical;line-height:1.55;min-height:110px}
  #ctBody:focus,#ctEmail:focus{outline:2px solid var(--accent);outline-offset:-1px}
  #ctBody::placeholder,#ctEmail::placeholder{color:var(--faint)}
  #ctSend{
    background:var(--mint);color:var(--onAccent);border:1px solid var(--mint);border-radius:3px;
    padding:11px 24px;font-family:var(--cond);font-weight:700;letter-spacing:.09em;font-size:14px;
  }
  #ctSend[disabled]{background:transparent;color:var(--faint);border-color:var(--edge);cursor:not-allowed}
  .ctNote{font-size:11px;color:var(--faint);line-height:1.6}
  .ctNote.bad{color:var(--coral)}
  .ctNote.good{color:var(--mint)}
  .fbRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .fbCount{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
  #toast{
    position:fixed;left:50%;top:76px;transform:translateX(-50%) translateY(-12px);
    z-index:60;background:var(--ink);color:var(--ground);
    padding:10px 18px;font-size:12px;letter-spacing:.04em;font-weight:500;
    opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  }
  #toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

  #boot{
    position:fixed;inset:0;z-index:50;background:var(--ground);
    display:flex;align-items:center;justify-content:center;
    font-size:11px;letter-spacing:.2em;color:var(--dim);
  }
  #boot.off{display:none}

  @media (max-width:420px){
    .wordmark{font-size:22px}
    .slot{width:52px;height:58px;font-size:26px}
    .key{padding:13px 0;font-size:18px}
    .sheet{padding:20px 17px}
  }
  @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;transition:none !important} }

  /* The page never branches on the OS light/dark setting - it is dark, always.
     The one system preference worth honouring is an explicit request for more
     contrast, which is also what a dimmed phone screen effectively needs. */
  @media (prefers-contrast:more){
    :root{
      --panel:#273A47; --panel-2:#375263; --edge:#5A8298;
      --dim:#C3CED3; --faint:#A8B7BD;
    }
    .clue,.row,.key,.slot,.dchip,.icon,.modeBtn,.sheet,.mk{border-width:1px}
    .clue{border-left-width:4px}
    body::after{display:none}
  }

  /* Windows High Contrast and friends replace colour outright; make sure the
     things that carry meaning still have a shape. */
  @media (forced-colors:active){
    body::after{display:none}
    .clue,.key,.slot,.dchip,.mk,.icon,.modeBtn{border:1px solid CanvasText}
    .slot.next,.modeBtn.on,.icon.on{outline:2px solid Highlight;outline-offset:1px}
    .clue.suspect .txt,.dchip.off{text-decoration:line-through}
  }