*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:Inter,system-ui,sans-serif;color:#F4F5F7;overflow:hidden;
  background:radial-gradient(90% 70% at 50% -10%,#7ce7d522,transparent 70%),linear-gradient(180deg,#16181f,#0e1015);
}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}

:root{--accent:#77E5D3;--line:#ffffff14;--dim:#8990a0;--coral:#FF806D;--gold:#FFD66B}

#app{
  height:100dvh;max-width:620px;margin:0 auto;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:10px;
}

header{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand{display:flex;flex-direction:column;line-height:1.1;margin-right:auto;min-width:0}
.brand b{font:700 20px 'Bricolage Grotesque',system-ui,sans-serif;color:var(--accent);letter-spacing:-.01em;white-space:nowrap}
@media(max-width:460px){.brand b{font-size:17px}.stat{min-width:48px;padding:6px 6px}}
.brand small{font:10px 'Space Mono',monospace;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:460px){.brand small{display:none}}
.stats{display:flex;gap:6px}
.stat{min-width:56px;padding:6px 8px;text-align:center;border:1px solid var(--line);border-radius:11px;background:#ffffff08}
.stat b{display:block;font:700 16px 'Space Mono',monospace;font-variant-numeric:tabular-nums;line-height:1.15}
.stat span{display:block;font:9px 'Space Mono',monospace;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.stat.hi b{color:var(--accent)}

.prog{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.prog .bar{flex:1;height:6px;border-radius:99px;background:#ffffff12;overflow:hidden}
.prog .bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#4fd0ba,var(--accent));transition:width .28s cubic-bezier(.4,1.3,.6,1)}
.prog span{font:10px 'Space Mono',monospace;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}

.stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}

.board{
  --n:5;
  width:min(100%,calc(100dvh - 236px),520px);
  aspect-ratio:1;
  display:grid;grid-template-columns:repeat(var(--n),1fr);
  gap:clamp(4px,1.1vmin,7px);
  padding:clamp(6px,1.6vmin,11px);
  border:1px solid var(--line);border-radius:20px;
  background:#191c25;box-shadow:0 24px 50px #0007,inset 0 1px #ffffff0d;
  transition:box-shadow .3s,border-color .3s;
}
.board.solved{border-color:#77e5d388;box-shadow:0 0 0 1px #77e5d344,0 24px 60px #77e5d32e}

.cell{
  border:1px solid #ffffff10;border-radius:10px;background:#1b1f29;
  display:grid;place-items:center;padding:0;
  font:700 clamp(13px,3.4vmin,20px) 'Space Mono',monospace;color:transparent;
  transition:background .16s,border-color .16s,transform .1s;
}
.cell:active{transform:scale(.93)}
@media(hover:hover){.cell:hover{border-color:#77e5d366}}
.cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* revealed stone showing its clue number — the thing you reason from */
.cell.stone{background:#2b3038;border-color:#ffffff1f;color:#aeb6c2}

.cell.trail{background:#2d7e73;border-color:#77e5d3;box-shadow:0 0 14px #77e5d33d}
.cell.here{background:var(--accent);border-color:#d6fff7;box-shadow:0 0 18px #77e5d377}
.cell.start{background:var(--coral);border-color:#ffb1a5;box-shadow:0 0 16px #ff806d55}
.cell.goal{background:var(--gold);border-color:#fff0af;box-shadow:0 0 16px #ffd66b55}
.cell.here.start{background:var(--coral)}
.cell.bad{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

#hint{font:11px 'Space Mono',monospace;color:var(--dim);min-height:14px;text-align:center;letter-spacing:.04em}

footer{display:flex;justify-content:center;gap:8px;flex:0 0 auto}
footer button{min-height:46px;padding:0 18px;border:1px solid var(--line);border-radius:13px;background:#ffffff0d;font-weight:700;font-size:13px;transition:background .18s}
footer button:active{background:#ffffff1a}
footer .primary{background:var(--accent);color:#06221e;border-color:var(--accent)}

#modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:#080a0dd9;z-index:5}
#modal[hidden]{display:none}
#modalCard{
  width:min(380px,100%);padding:26px 24px;border-radius:20px;text-align:center;
  background:#1a1e28;border:1px solid #ffffff20;box-shadow:0 30px 60px #0008;
  animation:pop .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
#modalCard h2{font:700 25px 'Bricolage Grotesque',system-ui,sans-serif;margin:0 0 10px}
#modalCard p{margin:0 0 12px;font-size:14px;line-height:1.6;color:#B8BEC9}
#modalCard .sum{font:13px 'Space Mono',monospace;color:#C9CED8}
#modalCard .sum b{color:#fff}
#modalCard .note{font-size:13px;color:var(--dim)}
.stars{font-size:30px;letter-spacing:6px;margin:2px 0 10px;color:#3a3f4d}
.stars .on{color:#FFC24D;text-shadow:0 0 14px #ffc24d66}
.modalBtn{margin-top:4px;padding:12px 22px;border:0;border-radius:12px;background:var(--accent);color:#06221e;font-weight:700;font-size:14px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(max-height:640px){
  #app{gap:7px;padding-top:7px}
  .brand b{font-size:17px}
  .stat{min-width:50px;padding:5px 7px}
  .stat b{font-size:14px}
  .board{width:min(100%,calc(100dvh - 200px),520px)}
  footer button{min-height:42px}
}