*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --accent:#6EE7FF;
  --ink:#F4F5F7;
  --muted:#9299A5;
  --dim:#68707E;
  --line:rgba(255,255,255,.1);
  --cell:#151A22;
  --lit:#6EE7FF;
}
html,body{margin:0;height:100%;background:#101218;color:var(--ink)}
body{
  font-family:Inter,system-ui,sans-serif;
  overflow:hidden;
  touch-action:manipulation;
  background:
    radial-gradient(80% 80% at 50% 12%,rgba(110,231,255,.11),transparent 70%),
    linear-gradient(180deg,#161922,#0F1117);
}
button{font:inherit;color:inherit;cursor:pointer}
#app{
  width:min(100%,560px);
  min-height:100dvh;
  height:100%;
  margin:auto;
  padding:12px 16px calc(10px + env(safe-area-inset-bottom,0px));
  display:flex;
  flex-direction:column;
  gap:10px;
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.title{text-align:center}
.title b{
  display:block;
  font:700 21px 'Bricolage Grotesque',sans-serif;
  color:var(--accent);
  text-shadow:0 0 22px rgba(110,231,255,.35);
}
.title small,.stat span,.status small,.hint{
  font:10px 'Space Mono',monospace;
  color:var(--dim);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.stat{min-width:72px}
.stat.right{text-align:right}
.stat strong{display:block;font:700 25px 'Bricolage Grotesque',sans-serif}
.status{display:flex;justify-content:center;gap:9px}
.status span{
  min-width:78px;
  padding:8px 10px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(255,255,255,.035);
}
.status b{display:block;font:700 17px 'Space Mono',monospace}
.status small{display:block;margin-top:3px;font-size:8px;letter-spacing:.1em}
.modes{display:flex;justify-content:center;gap:6px}
.mode{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  font-size:12px;
  font-weight:700;
  color:#C7CCD5;
}
.mode.on{
  background:rgba(110,231,255,.16);
  border-color:rgba(110,231,255,.45);
  color:var(--accent);
  box-shadow:0 0 16px rgba(110,231,255,.18);
}
.stage{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.prompt{
  height:19px;
  font:700 12px 'Space Mono',monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  text-align:center;
}
.board{
  width:min(82vw,420px);
  aspect-ratio:1;
  display:grid;
  gap:7px;
  padding:10px;
  border-radius:20px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#1A1D26,#13161D);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 22px 50px rgba(0,0,0,.45);
}
.cell{
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:var(--cell);
  transition:background .12s,box-shadow .12s,transform .12s,border-color .12s;
  position:relative;
}
.cell:hover{border-color:rgba(110,231,255,.28)}
.cell:active{transform:scale(.94)}
.cell.on{
  background:radial-gradient(circle at 50% 40%,#B8F4FF 0%,var(--lit) 45%,#2AA8C4 100%);
  border-color:rgba(255,255,255,.55);
  box-shadow:
    0 0 18px rgba(110,231,255,.72),
    inset 0 -3px 0 rgba(0,0,0,.18);
}
.cell.hint{
  outline:2px solid #FFD66B;
  outline-offset:-2px;
  box-shadow:0 0 16px rgba(255,214,107,.55);
}
.cell.flash{animation:flash .28s ease-out}
@keyframes flash{
  50%{transform:scale(.9);filter:brightness(1.25)}
}
.hint{
  height:18px;
  text-align:center;
  letter-spacing:.03em;
  text-transform:none;
  font-size:11px;
  color:var(--muted);
}
.controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.controls.secondary{gap:6px}
.button{
  min-height:40px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  font-size:12.5px;
  font-weight:700;
  color:#D4D9E1;
}
.button:hover{background:rgba(255,255,255,.11)}
.button.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#062028;
  box-shadow:0 8px 22px rgba(110,231,255,.24);
}
.button:disabled{opacity:.45;cursor:default}
.modal{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:18px;
  background:rgba(8,10,13,.76);
  backdrop-filter:blur(8px);
  z-index:5;
}
.modal[hidden]{display:none}
.modal-card{
  width:min(420px,100%);
  max-height:min(80vh,640px);
  overflow:auto;
  padding:26px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:20px;
  background:linear-gradient(180deg,#1B1F29,#14171E);
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  text-align:center;
}
.modal-card h2{margin:0 0 6px;font:700 27px 'Bricolage Grotesque',sans-serif}
.modal-card p{margin:8px 0;color:#B9C0CB;line-height:1.55;font-size:13.5px}
.bigscore{margin:12px 0 4px;color:var(--accent);font:700 46px 'Bricolage Grotesque',sans-serif}
.stars-row{font-size:28px;letter-spacing:.12em;color:#FFD66B;margin:8px 0}
.modal-actions{display:flex;gap:8px;margin-top:16px}
.modal-actions .button{flex:1}
.level-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin-top:14px;
}
.level-btn{
  aspect-ratio:1;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  font:700 13px 'Space Mono',monospace;
  color:#D4D9E1;
}
.level-btn.done{border-color:rgba(110,231,255,.4);color:var(--accent)}
.level-btn.current{background:rgba(110,231,255,.18);border-color:var(--accent)}
.level-btn.locked{opacity:.35}
@media(max-height:700px){
  #app{gap:7px}
  .board{width:min(calc(100vw - 32px),calc(100dvh - 310px),360px);max-width:100%;gap:5px;padding:8px}
  .status{gap:5px}
  .status span{padding:5px 8px}
  .stage{gap:6px}
  .modes{margin-bottom:0}
}
@media(max-width:380px){
  .button{padding:0 8px;font-size:11px}
  .board{width:min(calc(100vw - 24px),calc(100dvh - 310px));gap:5px;padding:7px}
  .cell{border-radius:8px}
  .level-grid{grid-template-columns:repeat(6,1fr);gap:5px}
  .level-btn{font-size:10px}
}