:root{--bg:#14122b;--bg2:#1e1b3d;--fg:#f1eefe;--muted:#a59fcf;--accent:#ff8a5c;--gap:10px;--r:12px;
font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#2b2660,var(--bg));color:var(--fg);min-height:100%;-webkit-tap-highlight-color:transparent}
body{min-height:100dvh}
.app{max-width:480px;margin:0 auto;padding:12px 14px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;min-height:100dvh}
header{display:flex;align-items:center;justify-content:space-between}
.brand{text-align:center}
h1{margin:0;font-size:28px;letter-spacing:.5px;font-weight:800}
h1 span{background:linear-gradient(90deg,#5ee0c8,#ff8a5c);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);font-size:13px}
.icon{width:40px;height:40px;border-radius:50%;border:1px solid #3a3570;background:var(--bg2);color:var(--fg);font-size:18px;font-weight:700;cursor:pointer}
.card{background:var(--bg2);border:1px solid #2f2a5c;border-radius:var(--r);padding:12px 14px}
.ch-name{font-weight:800;font-size:17px;color:#5ee0c8}
.ch-desc{color:var(--muted);font-size:14px;margin-top:2px}
.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pill{background:var(--bg2);border-radius:10px;padding:6px 10px;text-align:center;border:1px solid #2f2a5c}
.pill small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.8px}
.pill b{font-size:20px;font-variant-numeric:tabular-nums}
.pill.warn b{color:var(--accent)}
.board{position:relative;width:100%;aspect-ratio:1;background:#0d0b20;border-radius:16px;padding:var(--gap);touch-action:none;outline:none;box-shadow:0 10px 40px #0007,inset 0 0 0 1px #2f2a5c;user-select:none}
.grid,.tiles{position:absolute;inset:var(--gap)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.cell{background:#221f45;border-radius:10px}
.cell.stone{background:repeating-linear-gradient(45deg,#4a4560 0 6px,#3b3750 6px 12px);box-shadow:inset 0 -4px 0 #0005}
.tile{--c:0;--r:0;position:absolute;width:calc((100% - 3*var(--gap))/4);height:calc((100% - 3*var(--gap))/4);
transform:translate(calc(var(--c)*(100% + var(--gap))),calc(var(--r)*(100% + var(--gap))));transition:transform 110ms ease-out;
display:flex;align-items:center;justify-content:center;border-radius:10px;font-weight:800;font-size:clamp(18px,8vw,36px);font-variant-numeric:tabular-nums;will-change:transform}
.tile .in{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--tc);color:var(--tf);box-shadow:inset 0 -4px 0 #0003}
.tile.new .in{animation:appear 160ms ease-out}
.tile.merged .in{animation:pop 180ms ease-out}
.tile.small{font-size:clamp(14px,6vw,28px)}.tile.xs{font-size:clamp(12px,4.8vw,22px)}
@keyframes appear{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
.actions{display:flex;gap:8px;justify-content:center}
.btn{background:linear-gradient(90deg,#5ee0c8,#7c8bff);color:#120f2a;border:0;border-radius:999px;padding:11px 22px;font-weight:800;font-size:15px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid #3a3570}
.hidden{display:none!important}
.mode-banner{background:#ff8a5c22;border:1px solid #ff8a5c66;color:#ffc2a8;border-radius:10px;padding:6px 10px;font-size:13px;display:flex;justify-content:space-between;align-items:center}
.mode-banner button{background:none;border:0;color:var(--fg);text-decoration:underline;cursor:pointer}
footer{margin-top:auto;text-align:center;color:var(--muted);font-size:12px;padding-top:8px}
footer a{color:var(--muted)}
dialog{border:1px solid #3a3570;border-radius:18px;background:var(--bg2);color:var(--fg);max-width:min(420px,92vw);padding:20px 22px}
dialog::backdrop{background:#05041099;backdrop-filter:blur(3px)}
dialog h2{margin:0 0 8px}dialog p{line-height:1.45;font-size:15px}.muted{color:var(--muted)}
pre{background:#0d0b20;border-radius:10px;padding:12px;white-space:pre-wrap;font-size:15px;font-family:inherit}
.stats{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;gap:6px;margin:10px 0}
.stats b{display:block;font-size:26px}.stats small{color:var(--muted);font-size:11px}
.bar{display:flex;align-items:center;gap:6px;margin:4px 0;font-size:13px}
.bar span:first-child{width:46px;text-align:right;color:var(--muted)}
.bar i{display:block;height:18px;border-radius:5px;background:#7c8bff;min-width:18px;text-align:right;padding:0 6px;font-style:normal;font-size:12px;line-height:18px;color:#120f2a;font-weight:700}
.countdown{margin:14px 0 8px;color:var(--muted)}.countdown b{color:var(--fg);font-variant-numeric:tabular-nums}
.row{display:flex;gap:8px;flex-wrap:wrap}
.toast{height:18px;font-size:13px;color:#5ee0c8;margin-top:6px}
dialog .btn{margin-top:6px}