:root{--bg: #0f1220;--panel: #1b2036;--cell: #262c47;--text: #e8eaf6;--muted: #8b91b5;--accent: #f59e0b;--radius: 14px}.landing{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .5s ease,transform .5s ease}.landing--hidden{opacity:0;transform:scale(1.08);pointer-events:none}#particle-canvas{position:absolute;inset:0;z-index:0}.landing-content{position:relative;z-index:1;text-align:center;animation:landing-in .8s cubic-bezier(.16,1,.3,1) both}@keyframes landing-in{0%{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.landing-icon{margin-bottom:20px;animation:icon-float 4s ease-in-out infinite}@keyframes icon-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.landing-title{font-size:clamp(2.8rem,10vw,4.5rem);font-weight:900;letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,#e8eaf6 30%,var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px;filter:drop-shadow(0 0 32px rgba(245,158,11,.25))}.landing-subtitle{color:var(--muted);font-size:clamp(1rem,3vw,1.3rem);font-weight:400;margin-bottom:36px}.play-btn{display:inline-block;background:linear-gradient(135deg,var(--accent),#fbbf24);color:#1e1b4b;border:none;border-radius:16px;padding:16px 52px;font-size:1.15rem;font-weight:800;font-family:inherit;cursor:pointer;letter-spacing:.01em;box-shadow:0 4px 24px #f59e0b66,0 0 60px #f59e0b1f;transition:transform .15s ease,box-shadow .2s ease}.play-btn:hover{transform:scale(1.05);box-shadow:0 6px 32px #f59e0b8c,0 0 80px #f59e0b33}.play-btn:active{transform:scale(.97)}.landing-footer{margin-top:28px;color:#8b91b599;font-size:.75rem;font-weight:400}.landing--hiding .landing-content{opacity:0;transform:translateY(-30px) scale(.96);transition:opacity .3s ease,transform .3s ease}.cascade-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:var(--bg);opacity:0;transition:opacity .2s ease}.cascade-overlay.active{opacity:1}.cascade-overlay.fading{opacity:0;pointer-events:none}.cascade-num{font-size:clamp(5rem,25vw,10rem);font-weight:900;line-height:1;color:var(--accent)}.cascade-num.pop{animation:cascade-pop .22s cubic-bezier(.16,1,.3,1)}@keyframes cascade-pop{0%{transform:scale(.3);opacity:0}50%{opacity:1}to{transform:scale(1);opacity:1}}#app.reveal>*{opacity:0;animation:reveal-up .5s cubic-bezier(.16,1,.3,1) forwards}#app.reveal>:nth-child(1){animation-delay:0ms}#app.reveal>:nth-child(2){animation-delay:80ms}#app.reveal>:nth-child(3){animation-delay:.14s}#app.reveal>:nth-child(4){animation-delay:.2s}#app.reveal>:nth-child(5){animation-delay:.35s}@keyframes reveal-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.landing-content,.landing-icon{animation:none}.landing{transition:none}.landing--hiding .landing-content{transition:none;opacity:0}.cascade-num.pop{animation:none;opacity:1;transform:none}#app.reveal>*{animation:none;opacity:1;transform:none}}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);background-image:radial-gradient(ellipse at 50% 0%,#171c30 0%,transparent 55%),radial-gradient(ellipse at 20% 50%,rgba(245,158,11,.04) 0%,transparent 45%);color:var(--text);display:flex;flex-direction:column;align-items:center;min-height:100dvh;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}#ad-top,#ad-bottom{width:min(100vw,728px);min-height:60px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}#ad-top .adsbygoogle,#ad-bottom .adsbygoogle{display:block}@media(min-width:600px){#ad-top,#ad-bottom{min-height:90px}}@media(max-width:599px){#ad-top,#ad-bottom{min-height:50px}#ad-top .adsbygoogle,#ad-bottom .adsbygoogle{width:320px!important;height:50px!important}}#app{width:min(92vw,480px);padding:12px 0 20px}.hud{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.brand h1{font-size:1.6rem;font-weight:900;letter-spacing:-.03em;background:linear-gradient(135deg,var(--text),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{color:var(--muted);font-size:.78rem;margin-top:2px;font-weight:400}.scores{display:flex;gap:8px}.scorebox{position:relative;background:var(--panel);border-radius:var(--radius);padding:8px 16px;text-align:center;min-width:76px;overflow:hidden}.scorebox:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,#f59e0b59,#22d3ee33);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.scorebox .label{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}.scorebox .value{display:block;font-size:1.3rem;font-weight:800;font-variant-numeric:tabular-nums}.gain{position:absolute;top:-2px;left:50%;transform:translate(-50%);font-weight:800;font-size:.85rem;color:var(--accent);pointer-events:none;animation:float-up .7s ease-out forwards}@keyframes float-up{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-28px)}}.modebar{display:flex;gap:8px;margin-bottom:12px}.diffbar{margin-top:-4px;margin-bottom:16px}.mode-btn{background:var(--panel);color:var(--muted);padding:6px 16px;border-radius:999px;font-size:.82rem;font-weight:600;border:1px solid rgba(255,255,255,.06);transition:background .12s ease,color .12s ease,border-color .12s ease,box-shadow .12s ease}.mode-btn:hover{background:#ffffff14;color:var(--text)}.mode-btn.small{padding:4px 12px;font-size:.72rem;font-weight:600}.mode-btn.active{background:linear-gradient(135deg,var(--accent),#fbbf24);color:#1e1b4b;border-color:transparent;box-shadow:0 2px 16px #f59e0b59}.board-wrap{position:relative}.board-wrap:before{content:"";position:absolute;top:50%;left:50%;width:120%;height:120%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(245,158,11,.08) 0%,transparent 55%);pointer-events:none;z-index:-1;animation:ambient-pulse 5s ease-in-out infinite}@keyframes ambient-pulse{0%,to{opacity:.6}50%{opacity:1}}.board{position:relative;display:grid;gap:10px;background:var(--panel);border-radius:var(--radius);padding:10px;aspect-ratio:1;touch-action:none;user-select:none;box-shadow:0 4px 24px #00000059,inset 0 1px #ffffff0a}.board.shake{animation:shake-x .25s ease-in-out}@keyframes shake-x{25%{transform:translate(-6px)}50%{transform:translate(5px)}75%{transform:translate(-3px)}}.cell{background:var(--cell);border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}.tile{width:100%;height:100%;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(1.1rem,6vw,2rem);will-change:transform}.tile.spawn{animation:spawn-in .16s cubic-bezier(.34,1.56,.64,1)}.tile.merge{animation:merge-bounce .2s cubic-bezier(.34,1.56,.64,1)}@keyframes spawn-in{0%{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}@keyframes merge-bounce{0%{transform:scale(.6)}60%{transform:scale(1.12)}to{transform:scale(1)}}.v2{background:linear-gradient(145deg,#3d4668,#4a5580);color:var(--text)}.v4{background:linear-gradient(145deg,#4a5580,#576285);color:var(--text)}.v8{background:linear-gradient(145deg,#e09200,#fbbf24);color:#1e1b4b;box-shadow:0 2px 12px #f59e0b59}.v16{background:linear-gradient(145deg,#f97316,#fb923c);color:#1e1b4b;box-shadow:0 2px 14px #f9731659}.v32{background:linear-gradient(145deg,#ef4444,#f87171);color:#fff;box-shadow:0 2px 16px #ef444459}.v64{background:linear-gradient(145deg,#dc2626,#ef4444);color:#fff;box-shadow:0 2px 18px #dc262666}.v128{background:linear-gradient(145deg,#059669,#34d399);color:#fff;font-size:clamp(1rem,5vw,1.7rem);box-shadow:0 2px 20px #34d39966}.v256{background:linear-gradient(145deg,#059669,#10b981);color:#fff;font-size:clamp(1rem,5vw,1.7rem);box-shadow:0 3px 22px #10b98173}.v512{background:linear-gradient(145deg,#06b6d4,#22d3ee);color:#fff;font-size:clamp(1rem,5vw,1.7rem);box-shadow:0 3px 26px #22d3ee73}.v1024{background:linear-gradient(145deg,#7c3aed,#a78bfa);color:#fff;font-size:clamp(.9rem,4.5vw,1.5rem);box-shadow:0 4px 28px #7c3aed80}.v2048{background:linear-gradient(145deg,#f59e0b,#fde68a,#f59e0b);color:#1e1b4b;font-size:clamp(.9rem,4.5vw,1.5rem);box-shadow:0 0 40px #f59e0b99,0 0 80px #f59e0b4d;animation:glow-pulse 2s ease-in-out infinite}.vsuper{background:linear-gradient(145deg,#e879f9,#d946ef);color:#fff;font-size:clamp(.8rem,4vw,1.3rem);box-shadow:0 0 32px #d946ef80,0 0 64px #d946ef40}@keyframes glow-pulse{0%,to{box-shadow:0 0 40px #f59e0b99,0 0 80px #f59e0b4d}50%{box-shadow:0 0 50px #f59e0bcc,0 0 100px #f59e0b66}}.ring{position:absolute;border:3px solid var(--accent);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(.3);animation:ring-out .5s ease-out forwards;z-index:5}.ring-big{border-width:5px;box-shadow:0 0 24px #f59e0b80}@keyframes ring-out{to{transform:translate(-50%,-50%) scale(1.9);opacity:0}}.combo-float{position:absolute;top:38%;left:50%;font-size:clamp(1.4rem,7vw,2.4rem);font-weight:900;background:linear-gradient(135deg,var(--accent),#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 12px rgba(245,158,11,.5));pointer-events:none;z-index:20;animation:combo-pop .9s ease-out forwards}@keyframes combo-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}60%{transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-110%) scale(1)}}.new-best{position:absolute;top:-24px;left:50%;background:linear-gradient(135deg,var(--accent),#fbbf24);color:#1e1b4b;font-weight:800;font-size:.72rem;padding:3px 12px;border-radius:999px;white-space:nowrap;pointer-events:none;z-index:30;box-shadow:0 2px 12px #f59e0b66;animation:new-best-in 1.5s ease-out forwards}@keyframes new-best-in{0%{opacity:0;transform:translate(-50%,6px)}15%{opacity:1;transform:translate(-50%)}80%{opacity:1}to{opacity:0}}.overlay{position:absolute;inset:0;background:#0f1220e0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:10}.overlay.hidden{display:none}.overlay p{font-size:1.7rem;font-weight:900;background:linear-gradient(135deg,var(--text),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-row{display:flex;gap:8px;align-items:center}button{background:linear-gradient(135deg,var(--accent),#fbbf24);color:#1e1b4b;border:none;border-radius:var(--radius);padding:10px 24px;font-size:.95rem;font-weight:700;cursor:pointer;transition:transform 80ms ease,box-shadow .12s ease,filter 80ms ease;box-shadow:0 2px 12px #f59e0b4d}button:hover{filter:brightness(1.08);box-shadow:0 4px 20px #f59e0b73}button:active{transform:scale(.96)}button:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:var(--panel);color:var(--muted);box-shadow:inset 0 0 0 1px #ffffff1a}.btn-secondary:hover{color:var(--text);box-shadow:inset 0 0 0 1px #fff3;filter:none}.overlay button.hidden{display:none}.brand-row{display:flex;align-items:center;gap:8px}.icon-btn{background:transparent;color:var(--accent);border:none;border-radius:8px;padding:2px 6px;font-size:1.1rem;cursor:pointer;transition:transform .12s ease,filter .12s ease;box-shadow:none}.icon-btn:hover{filter:brightness(1.2);box-shadow:none}.icon-btn:active{transform:scale(.9)}.hint-msg{text-align:center;color:var(--accent);font-weight:600;font-size:.92rem;padding:8px 0 2px;animation:hint-in .3s ease}.hint-msg.hidden{display:none}@keyframes hint-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.interstitial-overlay{position:fixed;inset:0;z-index:300;background:#0f1220f2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center}.interstitial-overlay.hidden{display:none}.interstitial-box{display:flex;flex-direction:column;align-items:center;gap:12px}.interstitial-ad{background:#ffffff08;border-radius:var(--radius);overflow:hidden}.interstitial-close{background:var(--accent);color:#1e1b4b;border:none;border-radius:var(--radius);padding:10px 28px;font-family:inherit;font-weight:700;font-size:.9rem;cursor:pointer;transition:opacity .2s,transform .2s}.interstitial-close:disabled{opacity:.4;cursor:not-allowed}.interstitial-close:not(:disabled):hover{transform:scale(1.04)}.controls{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}.hint{color:var(--muted);font-size:.78rem}.hint a{color:var(--muted);text-decoration:none;transition:color .12s ease}.hint a:hover{color:var(--text)}.board.size-3 .tile{font-size:clamp(1.5rem,8vw,2.6rem)}.board.size-5 .tile{font-size:clamp(.85rem,4vw,1.45rem)}@media(prefers-reduced-motion:reduce){.tile.spawn,.tile.merge,.board.shake,.gain,.ring,.combo-float,.new-best,.v2048,.board-wrap:before,.hint-msg,.landing-content,.landing-icon,.cascade-num.pop,#app.reveal>*{animation:none}.hint-msg{opacity:1;transform:none}.v2048{box-shadow:0 0 40px #f59e0b99,0 0 80px #f59e0b4d}.landing{transition:none}.landing--hiding .landing-content{transition:none;opacity:0}.cascade-num{opacity:1;transform:none}#app.reveal>*{opacity:1;transform:none}button,.mode-btn,.icon-btn{transition:none}}
