*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --acc:#B4E34D;
  --t0:#B4E34D; --t1:#2BD6C4; --t2:#7C8CFF; --t3:#FF4DA6;
  --ink:#F4F5F7; --mut:#9097A3; --dim:#6F7683;
  --panel:linear-gradient(180deg,#181B23,#131519);
  --bd:rgba(255,255,255,0.09);
}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;color:var(--ink);font-size:15px;
  -webkit-font-smoothing:antialiased;overflow:hidden;
  background:radial-gradient(80% 90% at 50% 12%,rgba(180,227,77,0.10),transparent 70%),linear-gradient(180deg,#15171F,#101218);
}
.disp{font-family:'Bricolage Grotesque',sans-serif}
.mono{font-family:'Space Mono',monospace}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}

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

.top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ttl{font-weight:700;font-size:24px;letter-spacing:-0.02em;color:var(--acc);text-shadow:0 0 24px rgba(180,227,77,0.35);line-height:1}
.tsub{font-size:10.5px;color:var(--dim);margin-top:5px;letter-spacing:0.08em;text-transform:uppercase}
.tright{display:flex;align-items:center;gap:7px}
.pill{font-size:12px;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,0.05);border:1px solid var(--bd);color:#D6DAE2;white-space:nowrap}
.ibtn{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,0.05);border:1px solid var(--bd);font-size:14px;display:grid;place-items:center;transition:.15s}
.ibtn:hover{background:rgba(255,255,255,0.11)}

.modes{display:flex;align-items:center;gap:7px}
.mode{padding:8px 15px;border-radius:11px;font-weight:700;font-size:13px;color:var(--mut);background:rgba(255,255,255,0.04);border:1px solid var(--bd);transition:.15s}
.mode.on{color:#10130A;background:var(--acc);border-color:var(--acc);box-shadow:0 0 18px rgba(180,227,77,0.35)}
.modenote{margin-left:auto;font-size:11px;color:var(--dim)}

#solvedStack{display:flex;flex-direction:column;gap:7px}
.solved{border-radius:13px;padding:10px 14px;text-align:center;color:#0F1116;animation:reveal .45s cubic-bezier(.2,1.4,.4,1)}
.solved .sn{font-weight:800;font-size:13.5px;letter-spacing:0.02em;text-transform:uppercase}
.solved .sw{font-size:12.5px;font-weight:600;opacity:0.82;margin-top:2px}
@keyframes reveal{0%{transform:scale(0.85);opacity:0}100%{transform:scale(1);opacity:1}}

.grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;align-content:center}
.grid.rows-3{grid-template-rows:repeat(3,minmax(52px,74px))}
.grid.rows-2{grid-template-rows:repeat(2,minmax(52px,74px))}
.grid.rows-1{grid-template-rows:repeat(1,minmax(52px,74px))}
.grid.rows-4{grid-template-rows:repeat(4,minmax(52px,74px))}
.tile{
  border-radius:12px;background:var(--panel);border:1px solid var(--bd);
  display:grid;place-items:center;padding:4px 3px;user-select:none;
  font-weight:800;font-size:13.5px;letter-spacing:0.01em;color:#D9DDE4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 6px 14px rgba(0,0,0,0.28);
  transition:transform .12s,background .15s,border-color .15s,color .15s;
}
.tile:hover{transform:translateY(-2px);border-color:rgba(255,255,255,0.2)}
.tile.sel{background:var(--acc);border-color:var(--acc);color:#10130A;transform:scale(0.96);box-shadow:0 0 16px rgba(180,227,77,0.4)}
.tile.sz2{font-size:11.5px}
.tile.sz3{font-size:10px;letter-spacing:0}
.tile.shake{animation:shake .4s}
.tile.pop{animation:pop .3s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.1)}100%{transform:scale(1)}}

.foot{display:flex;flex-direction:column;gap:9px}
.lives{font-size:11px;color:var(--dim);display:flex;align-items:center;gap:8px;justify-content:center;letter-spacing:0.1em;text-transform:uppercase}
#dots{display:inline-flex;gap:5px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px rgba(180,227,77,0.5);transition:.25s}
.dot.off{background:rgba(255,255,255,0.12);box-shadow:none}
.btns{display:flex;gap:8px}
.abtn{flex:1;padding:13px 8px;border-radius:13px;font-weight:700;font-size:14px;background:rgba(255,255,255,0.05);border:1px solid var(--bd);color:#D6DAE2;transition:.15s}
.abtn:hover{background:rgba(255,255,255,0.1)}
.abtn.go{background:var(--acc);border-color:var(--acc);color:#10130A;box-shadow:0 0 20px rgba(180,227,77,0.3)}
.abtn.go:disabled{background:rgba(255,255,255,0.05);border-color:var(--bd);color:var(--dim);box-shadow:none;cursor:default}

.toast{position:fixed;left:50%;top:16%;transform:translateX(-50%) translateY(-8px);background:#1D212B;border:1px solid rgba(255,255,255,0.16);color:#F4F5F7;padding:10px 16px;border-radius:12px;font-size:12.5px;opacity:0;pointer-events:none;transition:.25s;z-index:40;box-shadow:0 14px 34px rgba(0,0,0,0.5);white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(8,9,12,0.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal.show{display:flex}
.mcard{width:min(430px,100%);max-height:86dvh;overflow-y:auto;border-radius:20px;border:1px solid rgba(255,255,255,0.12);background:linear-gradient(180deg,#1A1D26,#14161C);padding:24px;box-shadow:0 30px 70px rgba(0,0,0,0.6)}
.mcard h2{margin:0 0 6px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:22px;color:#F4F5F7}
.mcard p{margin:8px 0;font-size:13.5px;line-height:1.6;color:#B8BEC9}
.mcard .tierline{display:flex;align-items:center;gap:8px;font-size:13px;color:#C6CBD4;margin:6px 0}
.mcard .sq{width:13px;height:13px;border-radius:4px}
.emoji-grid{font-size:19px;line-height:1.35;letter-spacing:2px;margin:10px 0;text-align:center}
.mstats{display:flex;gap:8px;margin:14px 0}
.mstat{flex:1;text-align:center;padding:11px 6px;border-radius:13px;background:rgba(255,255,255,0.04);border:1px solid var(--bd)}
.mstat .v{font-family:'Space Mono',monospace;font-weight:700;font-size:19px;color:var(--acc)}
.mstat .k{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--dim);margin-top:3px}
.mbtns{display:flex;gap:8px;margin-top:16px}
.mbtn{flex:1;padding:12px 8px;border-radius:12px;font-weight:700;font-size:13.5px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:#E7EAEF;transition:.15s}
.mbtn:hover{background:rgba(255,255,255,0.12)}
.mbtn.go{background:var(--acc);border-color:var(--acc);color:#10130A}
.mclose{position:sticky;float:right;top:0;margin:-6px -6px 0 0;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,0.06);border:1px solid var(--bd);font-size:13px}

@media(max-height:600px){
  .ttl{font-size:19px}.tsub{display:none}
  .abtn{padding:10px 8px}
  #app{gap:7px;padding:10px 10px calc(8px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:380px){.tile{font-size:12px}.tile.sz2{font-size:10.5px}.tile.sz3{font-size:9px}}