:root{
  --paper:#e9eae1; --sheet:#faf9f3; --ink:#16242f; --pencil:#41525d; --muted:#7c857f;
  --grid:rgba(40,80,105,.09); --hair:rgba(22,36,47,.16);
  --seal:#d6452c; --seal-ink:#b8351f; --wash:#f6e7e1; --peer:#ecede4;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink);
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:25px 25px;background-position:center top;
  overscroll-behavior:none;-webkit-user-select:none;user-select:none;
}
.app{min-height:100dvh;max-width:520px;margin:0 auto;display:flex;flex-direction:column;
  padding:max(14px,env(safe-area-inset-top)) 18px calc(14px + var(--safe-b));gap:clamp(8px,1.8vh,16px)}

/* header */
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-top:4px}
.brand h1{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(26px,7.5vw,36px);line-height:.92;letter-spacing:-.02em;display:flex;flex-direction:column}
.brand h1 .ken{color:var(--seal)}
.date{margin:8px 0 0;color:var(--muted);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em}
.timer{font-family:"Spline Sans Mono",monospace;font-weight:600;font-size:15px;background:var(--sheet);border:1.5px solid var(--ink);padding:7px 12px;border-radius:2px;min-width:62px;text-align:center;box-shadow:2px 2px 0 var(--ink)}

/* size + difficulty bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sizes{display:inline-flex;border:1.5px solid var(--ink);border-radius:3px;overflow:hidden;box-shadow:2px 2px 0 var(--ink)}
.seg{font-family:"Spline Sans Mono",monospace;font-weight:600;font-size:13px;padding:7px 13px;background:var(--sheet);color:var(--ink);border:none;border-right:1.5px solid var(--ink)}
.seg:last-child{border-right:none}
.seg.on{background:var(--ink);color:var(--sheet)}
.diff{font-family:"Spline Sans Mono",monospace;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--seal-ink)}
.diff::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--seal);margin-right:7px;vertical-align:middle}

/* board */
.board-wrap{display:flex;justify-content:center;align-items:center;flex:1 1 auto;min-height:0}
.paper{position:relative;background:var(--sheet);padding:12px;border-radius:3px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 16px 36px -22px rgba(16,36,47,.55),0 2px 6px -2px rgba(16,36,47,.2)}
.paper::before{content:"";position:absolute;inset:6px;border:1px solid var(--hair);border-radius:2px;pointer-events:none}
.board{position:relative;z-index:1;width:min(86vw,420px);
  display:grid;grid-template-columns:repeat(var(--n),1fr);border:3px solid var(--ink);background:var(--ink);
  container-type:inline-size}
.cell{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:var(--sheet);color:var(--pencil);font-family:"Spline Sans Mono",monospace;font-weight:500;
  font-size:calc(48cqw / var(--n));border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  cursor:pointer;transition:background .1s}
.cell.lc{border-right:none}
.cell.lr{border-bottom:none}
.cell.r{border-right:3px solid var(--ink)}
.cell.b{border-bottom:3px solid var(--ink)}
.cell .clue{position:absolute;top:5%;left:8%;font-family:"Spline Sans Mono",monospace;font-size:calc(20cqw / var(--n));font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.02em}
.cell .clue i{font-style:normal;color:var(--seal);font-weight:700}
.cell .val{line-height:1;transition:transform .14s}
.cell.sel{background:var(--wash)}
.cell.sel::after{content:"";position:absolute;inset:0;box-shadow:0 0 0 2.5px var(--seal) inset;pointer-events:none;z-index:2}
.cell.peer{background:var(--peer)}
.cell.same .val{color:var(--seal-ink)}
.cell.pop .val{animation:pop .2s cubic-bezier(.3,1.4,.5,1)}
@keyframes pop{0%{transform:scale(.5)}100%{transform:none}}
.notes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--notecols),1fr);
  padding:6%;font-size:calc(17cqw / var(--n));font-weight:500;color:var(--muted);font-family:"Spline Sans Mono",monospace}
.notes span{display:flex;align-items:center;justify-content:center;opacity:0}
.notes span.on{opacity:.85}

/* signature seal */
.seal{position:absolute;inset:0;margin:auto;width:42%;height:42%;z-index:5;display:flex;align-items:center;justify-content:center;
  font-family:"Bricolage Grotesque",serif;font-weight:800;font-size:18cqw;color:var(--sheet);background:var(--seal);border-radius:50%;
  box-shadow:0 0 0 4px var(--seal),0 0 0 6px var(--sheet),0 8px 24px -6px rgba(214,69,44,.6);
  transform:scale(0) rotate(-24deg);opacity:0;pointer-events:none;border:3px solid var(--seal-ink)}
.seal.stamp{animation:stamp .5s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes stamp{0%{transform:scale(1.7) rotate(-22deg);opacity:0}55%{opacity:1}100%{transform:scale(1) rotate(-9deg);opacity:1}}
.loader{position:absolute;inset:12px;z-index:6;display:flex;align-items:center;justify-content:center;background:var(--sheet);
  font-family:"Spline Sans Mono",monospace;font-size:13px;color:var(--muted);letter-spacing:.04em}
.loader[hidden]{display:none}

/* controls */
.controls{display:flex;flex-direction:column;gap:10px}
.pad{display:grid;grid-template-columns:repeat(var(--keys),1fr);gap:8px}
.key{position:relative;display:flex;align-items:center;justify-content:center;padding:0;height:clamp(52px,8vh,68px);
  background:var(--sheet);border:1.8px solid var(--ink);border-radius:4px;box-shadow:3px 3px 0 var(--ink);
  transition:transform .06s,box-shadow .06s,background .12s}
.key b{font-family:"Spline Sans Mono",monospace;font-weight:600;font-size:clamp(20px,5.5vw,28px);color:var(--ink)}
.key .rem{position:absolute;top:4px;right:6px;font-family:"Spline Sans Mono",monospace;font-size:10px;font-weight:600;font-style:normal;color:var(--muted)}
.key:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.key.done{background:var(--paper);box-shadow:none;border-color:var(--hair)}
.key.done b{color:var(--muted)}
.key.done .rem{display:none}
/* denser keys for 9x9 */
body[data-size="9"] .pad{gap:5px}
body[data-size="9"] .key{height:clamp(44px,6.5vh,56px);border-width:1.4px;box-shadow:2px 2px 0 var(--ink);border-radius:3px}
body[data-size="9"] .key b{font-size:clamp(15px,4.4vw,20px)}
body[data-size="9"] .key .rem{font-size:8px;top:2px;right:3px}

.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.act{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;background:transparent;
  border:1.5px solid var(--hair);border-radius:4px;color:var(--ink);font-size:11px;font-weight:600;
  transition:transform .06s,background .12s,border-color .12s,color .12s,opacity .12s}
.act svg{width:20px;height:20px;display:block}
.act em{font-style:normal;color:var(--muted);text-transform:uppercase;font-size:9px;letter-spacing:.08em}
.act:active{transform:scale(.96)}
.act[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--sheet)}
.act[aria-pressed="true"] em{color:rgba(250,249,243,.7)}
.act:disabled{opacity:.34}

.help-btn{align-self:center;background:none;border:none;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.04em;text-decoration:underline;text-underline-offset:3px}
button{font-family:inherit;cursor:pointer}

/* sheets */
.sheet{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;background:rgba(16,36,47,.34);backdrop-filter:blur(2px);animation:fade .2s ease}
.sheet[hidden]{display:none}
.sheet-card{width:100%;max-width:520px;background:var(--sheet);border:2px solid var(--ink);border-bottom:none;border-radius:14px 14px 0 0;
  padding:14px 24px calc(28px + var(--safe-b));box-shadow:0 -18px 50px -18px rgba(16,36,47,.6);animation:rise .3s cubic-bezier(.2,.85,.25,1);position:relative}
.grip{width:40px;height:4px;background:var(--ink);margin:2px auto 16px;opacity:.5}
.sheet h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.02em;margin:0 0 12px;font-size:24px}
.sheet ul{margin:0 0 14px;padding-left:18px;color:var(--pencil);line-height:1.55;font-size:14px}
.sheet li{margin-bottom:8px}
.sheet b{color:var(--ink)}
.sheet code{font-family:"Spline Sans Mono",monospace;background:var(--wash);color:var(--seal-ink);padding:1px 7px;border-radius:3px;font-size:13px;font-weight:600}
.tip{color:var(--muted);font-size:13px;margin:0 0 18px;line-height:1.5}
.primary{width:100%;border:2px solid var(--ink);border-radius:4px;padding:15px;font-size:16px;font-weight:700;font-family:"Bricolage Grotesque",sans-serif;color:var(--sheet);background:var(--seal);box-shadow:3px 3px 0 var(--ink);transition:transform .06s,box-shadow .06s}
.primary:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.ghost{width:100%;margin-top:10px;background:none;border:none;color:var(--muted);font-size:14px;font-weight:600;padding:6px}

/* win */
.win-eyebrow{font-family:"Spline Sans Mono",monospace;color:var(--seal);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.18em;margin:0 0 6px}
.win-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 16px}
.stat{display:flex;flex-direction:column;gap:3px;padding:13px 6px;border:1.5px solid var(--hair);border-radius:4px;text-align:center}
.stat-n{font-family:"Spline Sans Mono",monospace;font-weight:700;font-size:24px;color:var(--ink);font-variant-numeric:tabular-nums}
.stat-l{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.win-note{color:var(--muted);font-size:13px;margin:0 0 18px;text-align:center;min-height:1em}

@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(40px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}