*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#3b2f6b 0%,#1d1840 55%,#120f2a 100%);
  font-family:ui-rounded,"SF Pro Rounded","Nunito","Trebuchet MS","Segoe UI",system-ui,sans-serif;color:#fff;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;overscroll-behavior:none}
button{font-family:inherit;cursor:pointer;border:0;outline:0}
#app{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom))}
#app.land{flex-direction:row;gap:28px}
#side{display:flex;flex-direction:column;gap:10px;width:var(--bw,360px)}
#app.land #side{width:min(300px,34vw)}
#top{display:flex;align-items:center;justify-content:space-between;gap:10px}
#app.land #top{flex-direction:column;align-items:stretch}
#logo{display:flex;flex-direction:column;line-height:1}
.lg{font-size:calc(var(--u,1px)*44);font-weight:900;letter-spacing:1px;
  background:linear-gradient(180deg,#ffe08a,#ff9f5a 55%,#ff5f8f);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.25))}
.ls{font-size:calc(var(--u,1px)*13);font-weight:800;color:#b9adff;letter-spacing:2px;text-transform:uppercase;margin-top:2px}
#scores{display:flex;gap:8px}
#app.land #scores{justify-content:space-between}
.sbox{position:relative;min-width:calc(var(--u,1px)*82);padding:6px 12px 7px;border-radius:14px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);text-align:center;flex:1}
.sl{font-size:calc(var(--u,1px)*11);font-weight:800;color:#b9adff;text-transform:uppercase;letter-spacing:1px}
.sv{font-size:calc(var(--u,1px)*22);font-weight:900;line-height:1.1}
#plus{position:absolute;left:0;right:0;top:4px;font-weight:900;color:#ffd36b;font-size:18px;opacity:0;pointer-events:none}
#plus.go{animation:plus .7s ease-out}
@keyframes plus{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-34px)}}
#bar{display:flex;gap:8px;justify-content:flex-end}
#app.land #bar{justify-content:stretch;flex-wrap:wrap}
.pill{height:42px;padding:0 14px;border-radius:21px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:900;font-size:15px;
  background:linear-gradient(#ffffff,#e6e0ff);color:#2a2160;box-shadow:0 4px 0 #8c80cf,0 8px 16px rgba(0,0,0,.25);transition:transform .08s}
.pill:active{transform:translateY(3px);box-shadow:0 1px 0 #8c80cf}
.pill svg{width:20px;height:20px;fill:#2a2160;stroke:#2a2160;flex:none}
.pill.sq{width:42px;padding:0}
.pill.ad{background:linear-gradient(#7dffb8,#25c97a);color:#0d3a24;box-shadow:0 4px 0 #168a52,0 8px 16px rgba(30,180,100,.3)}
.pill.ad svg{fill:#0d3a24;stroke:none}
.pill.busy{opacity:.55;pointer-events:none}
#app.land .pill:not(.sq){flex:1}
#bSound .off{display:none}#bSound.muted .on{display:none}#bSound.muted .off{display:inline}
#goal{font-size:calc(var(--u,1px)*13);font-weight:700;color:#cfc7ff;text-align:center;min-height:1.2em}
#app.land #goal{text-align:left}
#boardWrap{position:relative}
#board{position:relative;width:var(--bw,360px);height:var(--bw,360px);border-radius:calc(var(--bw,360px)*.045);
  background:linear-gradient(160deg,#4a3d86,#342a68);box-shadow:0 10px 0 #221a4c,0 24px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);touch-action:none}
#cells,#tiles{position:absolute;inset:0}
.cell{position:absolute;border-radius:calc(var(--cs,80px)*.16);background:rgba(18,12,48,.38);box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}
.tile{position:absolute;left:0;top:0;width:var(--cs,80px);height:var(--cs,80px);transition:transform 110ms ease-in-out;will-change:transform;z-index:2}
.tile.merged{z-index:3}
.tile .in{width:100%;height:100%;border-radius:calc(var(--cs,80px)*.16);display:flex;align-items:center;justify-content:center;
  font-weight:900;color:#fff;box-shadow:0 calc(var(--cs,80px)*.06) 0 rgba(0,0,0,.22),inset 0 2px 0 rgba(255,255,255,.35);
  text-shadow:0 2px 0 rgba(0,0,0,.18);position:relative;overflow:hidden}
.tile .in::after{content:"";position:absolute;left:8%;top:6%;width:84%;height:34%;border-radius:40%;background:linear-gradient(rgba(255,255,255,.32),rgba(255,255,255,0))}
.tile.new .in{animation:appear 180ms ease-out 90ms backwards}
.tile.merged .in{animation:pop 200ms ease-out 100ms backwards}
@keyframes appear{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes pop{0%{transform:scale(.7)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
.v2 .in{background:linear-gradient(#ffe7a8,#ffd36b);color:#7a4a00;text-shadow:none}
.v4 .in{background:linear-gradient(#ffcf8f,#ffab4f);color:#6b3300;text-shadow:none}
.v8 .in{background:linear-gradient(#ff9f7a,#ff6f4f)}
.v16 .in{background:linear-gradient(#ff8aa8,#ff4f7f)}
.v32 .in{background:linear-gradient(#f37cff,#c94fe8)}
.v64 .in{background:linear-gradient(#a98cff,#7b5cff)}
.v128 .in{background:linear-gradient(#7fb6ff,#3f86ff);box-shadow:0 calc(var(--cs,80px)*.06) 0 rgba(0,0,0,.22),0 0 18px rgba(80,150,255,.55),inset 0 2px 0 rgba(255,255,255,.35)}
.v256 .in{background:linear-gradient(#6ff0ff,#18c3e8);box-shadow:0 calc(var(--cs,80px)*.06) 0 rgba(0,0,0,.22),0 0 22px rgba(60,220,255,.6),inset 0 2px 0 rgba(255,255,255,.35)}
.v512 .in{background:linear-gradient(#7dffb8,#22c97a);box-shadow:0 calc(var(--cs,80px)*.06) 0 rgba(0,0,0,.22),0 0 24px rgba(60,255,150,.6),inset 0 2px 0 rgba(255,255,255,.35)}
.v1024 .in{background:linear-gradient(#d6ff6f,#93d81e);box-shadow:0 calc(var(--cs,80px)*.06) 0 rgba(0,0,0,.22),0 0 28px rgba(200,255,80,.65),inset 0 2px 0 rgba(255,255,255,.35)}
.v2048 .in{background:linear-gradient(#fff3a0,#ffc928 60%,#ff9d00);color:#5a3100;text-shadow:0 1px 0 rgba(255,255,255,.5);
  box-shadow:0 calc(var(--cs,80px)*.06) 0 rgba(0,0,0,.22),0 0 34px rgba(255,210,60,.85),inset 0 2px 0 rgba(255,255,255,.5);animation:glow 1.6s ease-in-out infinite}
.vbig .in{background:linear-gradient(#3b3b5c,#16162a);box-shadow:0 calc(var(--cs,80px)*.06) 0 rgba(0,0,0,.3),0 0 30px rgba(255,120,220,.7),inset 0 2px 0 rgba(255,255,255,.25);color:#ffd36b}
@keyframes glow{50%{filter:brightness(1.12)}}
.hidden{display:none!important}
#hint{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);background:rgba(10,6,30,.9);color:#fff;font-weight:800;padding:9px 16px;
  border-radius:18px;text-align:center;line-height:1.25;pointer-events:none;width:max-content;max-width:min(86vw,var(--bw,360px));animation:fade .3s;z-index:6;font-size:15px}
@keyframes fade{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
#toast{position:fixed;left:50%;bottom:9%;transform:translateX(-50%) translateY(20px);background:rgba(10,6,30,.92);color:#fff;padding:10px 18px;border-radius:16px;
  font-weight:800;font-size:15px;opacity:0;transition:all .25s;pointer-events:none;z-index:30;text-align:center;max-width:86vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#modal{position:fixed;inset:0;background:rgba(10,6,30,.6);display:flex;align-items:center;justify-content:center;z-index:20;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.card{position:relative;background:linear-gradient(#ffffff,#efeaff);border-radius:28px;padding:26px 24px 22px;width:min(360px,88vw);max-height:92vh;overflow:auto;text-align:center;
  box-shadow:0 10px 0 #8c80cf,0 20px 50px rgba(0,0,0,.4);animation:cpop .35s cubic-bezier(.2,1.6,.4,1);color:#2a2160}
@keyframes cpop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.card h2{margin:8px 0 12px;font-size:26px;color:#2a2160}
.close{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:12px;background:#e2dcff;display:flex;align-items:center;justify-content:center}
.close svg{width:20px;height:20px;stroke:#2a2160}
#mBody{font-size:16px;line-height:1.4;margin-bottom:16px}
.stat{display:flex;justify-content:space-between;background:#e6e0ff;border-radius:14px;padding:10px 16px;margin:6px 0;font-weight:800}
.stat b{color:#6b4fe0;font-size:20px}
.newbest{color:#e08a00;font-weight:900;font-size:18px;margin:8px 0}
#mBtns{display:flex;flex-direction:column;gap:10px}
.btn{height:52px;border-radius:26px;font-size:18px;font-weight:900;background:linear-gradient(#ffb36b,#ff7a4f);box-shadow:0 5px 0 #c4502e;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #c4502e}
.btn.alt{background:linear-gradient(#b7a8ff,#7b5cff);box-shadow:0 5px 0 #4f37b8}
.btn.green{background:linear-gradient(#7dffb8,#25c97a);box-shadow:0 5px 0 #168a52;color:#0d3a24;font-size:16px}
.btn svg{width:24px;height:24px;fill:#0d3a24}
#loader{position:fixed;inset:0;background:radial-gradient(120% 90% at 50% 0%,#3b2f6b 0%,#1d1840 55%,#120f2a 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;transition:opacity .4s}
.lbig{font-size:72px;font-weight:900;background:linear-gradient(180deg,#ffe08a,#ff9f5a 55%,#ff5f8f);-webkit-background-clip:text;background-clip:text;color:transparent}
.lsub{font-size:16px;font-weight:800;color:#b9adff;letter-spacing:3px;text-transform:uppercase;margin:4px 0 26px}
.bar{width:200px;height:12px;border-radius:6px;background:rgba(255,255,255,.18);overflow:hidden}
.bar i{display:block;height:100%;width:5%;background:linear-gradient(90deg,#ffd36b,#ff5f8f);border-radius:6px;transition:width .2s}