*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --acc:#FFDD57;
  --ink:#F4F5F7; --mut:#9097A3; --dim:#6F7683;
  --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;touch-action:none;
  user-select:none;-webkit-user-select:none;-ms-user-select:none;cursor:default;
  background:radial-gradient(80% 90% at 50% 12%,rgba(255,221,87,0.08),transparent 70%),linear-gradient(180deg,#15171F,#101218);
}
#board{cursor:grab}
#board.dragging{cursor:grabbing}
.swipehint{text-align:center;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--dim);margin-top:2px}
.swipehint .key{display:inline-block;padding:1px 6px;border-radius:6px;border:1px solid var(--bd);background:rgba(255,255,255,0.05);margin:0 2px;font-size:10px}
.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:520px;margin:0 auto;padding:14px 14px calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}

.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.score-wrap{min-width:80px}
.score-wrap.right{text-align:right}
.slab{font-size:9.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--dim)}
.sval{font-weight:700;font-size:26px;line-height:1.05;color:var(--ink)}
.sval.dim{color:var(--mut)}
.mid{text-align:center}
.ttl{font-weight:700;font-size:22px;letter-spacing:-0.02em;color:var(--acc);text-shadow:0 0 22px rgba(255,221,87,0.35)}
.goal{font-size:10px;color:var(--dim);letter-spacing:0.12em;text-transform:uppercase;margin-top:2px}

#boardwrap{flex:1;min-height:0;display:grid;place-items:center}
#board{position:relative;border-radius:16px;border:1px solid var(--bd);padding:8px;background:linear-gradient(180deg,#181B23,#131519);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 18px 40px rgba(0,0,0,0.4)}
#bgcells{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:8px;width:100%;height:100%}
#bgcells .bg{border-radius:9px;background:#191C24;border:1px solid rgba(255,255,255,0.05)}
#tiles{position:absolute;inset:8px}
.tile{
  position:absolute;display:grid;place-items:center;border-radius:9px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:#14161C;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.35),0 4px 10px rgba(0,0,0,0.3);
  transition:transform .12s ease-out;will-change:transform;
}
.tile.new{animation:spawn .16s ease-out}
.tile.pop{animation:mpop .18s ease-out}
@keyframes spawn{0%{scale:0.4;opacity:0}100%{scale:1;opacity:1}}
@keyframes mpop{0%{scale:1}50%{scale:1.18}100%{scale:1}}

.foot{display:flex;gap:8px;justify-content:center}
.ibtn{height:42px;min-width:42px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,0.05);border:1px solid var(--bd);color:#D6DAE2;font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.15s}
.ibtn:hover{background:rgba(255,255,255,0.11)}
.ibtn:disabled{opacity:0.35;cursor:default}

.modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(8,9,12,0.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal.show{display:flex}
.mcard{width:min(400px,100%);border-radius:20px;border:1px solid rgba(255,255,255,0.12);background:linear-gradient(180deg,#1A1D26,#14161C);padding:26px;box-shadow:0 30px 70px rgba(0,0,0,0.6);text-align:center}
.mcard h2{margin:0 0 8px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:24px;color:#F4F5F7}
.mcard p{margin:6px 0;font-size:13.5px;line-height:1.6;color:#B8BEC9;text-align:left}
.mcard p.center{text-align:center}
.mcard .bigscore{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:44px;color:var(--acc);margin:8px 0 2px}
.mcard .stars{font-size:26px;letter-spacing:6px;margin:6px 0 2px;color:var(--acc)}
.mcard .newbest{font-family:'Space Mono',monospace;font-size:11.5px;color:#2BD67B;margin:4px 0}
.mstats{display:flex;gap:8px;margin:14px 0}
.mstat{flex:1;text-align:center;padding:10px 6px;border-radius:12px;background:rgba(255,255,255,0.04);border:1px solid var(--bd)}
.mstat .v{font-family:'Space Mono',monospace;font-weight:700;font-size:17px;color:var(--acc)}
.mstat .k{font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--dim);margin-top:3px}
.mbtns{display:flex;gap:8px;margin-top:14px}
.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:#1F1A05}