*{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%,#b084ff22,transparent 70%),linear-gradient(180deg,#16181f,#0e1015);
}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}

:root{
  --accent:#B38CFF;
  --accent-soft:#b38cff26;
  --line:#ffffff14;
  --dim:#8990a0;
}

#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: title left, stats right, one compact row ---- */
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}
.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:430px){.brand small{display:none}}
.stats{display:flex;gap:6px}
.stat{
  min-width:58px;padding:6px 9px;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)}

/* ---- progress: how much of the network is live ---- */
.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,#8f6bff,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: board takes all remaining height, always square ---- */
.stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}

.board{
  --cols:3;
  width:min(100%,calc(100dvh - 236px),520px);
  aspect-ratio:1;
  display:grid;grid-template-columns:repeat(var(--cols),1fr);
  gap:clamp(4px,1.2vmin,8px);
  padding:clamp(6px,1.6vmin,12px);
  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:#b38cff88;box-shadow:0 0 0 1px #b38cff44,0 24px 60px #b38cff2e,inset 0 1px #ffffff14}

.tile{
  position:relative;padding:0;border:1px solid #ffffff10;border-radius:13px;
  background:#20242f;display:grid;place-items:center;
  transition:background .18s,border-color .18s,transform .12s;
}
.tile svg{width:100%;height:100%;display:block}
.tile .rail line{stroke:#5c6272;stroke-width:13;stroke-linecap:round;transition:stroke .2s}
.tile .node,.tile .cap{fill:#5c6272;transition:fill .2s}
.tile .hub{fill:var(--accent);stroke:#ffffff55;stroke-width:3}

/* powered tiles read as "live rail" — this is the deduction aid */
.tile.lit{background:#2a2440;border-color:#b38cff55}
.tile.lit .rail line{stroke:var(--accent)}
.tile.lit .node,.tile.lit .cap{fill:var(--accent)}
.tile.hubtile{background:#2f2748;border-color:#b38cff77}

.tile:active{transform:scale(.94)}
@media(hover:hover){.tile:hover{border-color:#b38cff99;background:#262b38}}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

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

/* ---- controls: thumb-reachable on phones ---- */
footer{display:flex;justify-content:center;gap:8px;flex:0 0 auto}
footer button{
  min-height:46px;padding:0 16px;border:1px solid var(--line);border-radius:13px;
  background:#ffffff0d;font-weight:700;font-size:13px;transition:background .18s,opacity .18s;
}
footer button:active{background:#ffffff1a}
footer button:disabled{opacity:.4;cursor:default}
footer .primary{background:var(--accent);color:#1c1035;border-color:var(--accent)}

/* ---- modal ---- */
#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:#1c1035;font-weight:700;font-size:14px}

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

/* short viewports: trim chrome so the board keeps its size */
@media(max-height:640px){
  #app{gap:7px;padding-top:7px}
  .brand b{font-size:17px}
  .stat{min-width:52px;padding:5px 7px}
  .stat b{font-size:14px}
  .board{width:min(100%,calc(100dvh - 200px),520px)}
  .prog{gap:8px}
  footer button{min-height:42px}
}