@import"https://fonts.googleapis.com/css2?family=Bungee&family=Outfit:wght@500;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap";:root,[data-theme=cyber-neon]{--bg-primary: #0a0b10;--bg-secondary: #12141e;--bg-card: #181b2a;--bg-board: #151824;--bg-slot: #1c2132;--text-main: #f0f3ff;--text-muted: #8b95b5;--accent-cyan: #00f5d4;--accent-pink: #f72585;--accent-yellow: #ffbd00;--accent-purple: #7209b7;--accent-green: #70e000;--accent-orange: #ff5400;--border-neon: rgba(0, 245, 212, .4);--border-comic: #272c44;--board-glow: 0 0 35px rgba(0, 245, 212, .15), inset 0 2px 4px rgba(255, 255, 255, .05);--card-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 2px 0 var(--border-comic);--button-shadow: 0 4px 0 #000}[data-theme=comic-punch]{--bg-primary: #181528;--bg-secondary: #242038;--bg-card: #2e294e;--bg-board: #201c33;--bg-slot: #2d2847;--text-main: #ffffff;--text-muted: #b8b0d4;--accent-cyan: #00e5ff;--accent-pink: #ff007f;--accent-yellow: #ffd600;--accent-purple: #8338ec;--accent-green: #00f0ff;--accent-orange: #ff3c00;--border-neon: #ffd600;--border-comic: #110e1c;--board-glow: 0 0 30px rgba(255, 214, 0, .2), inset 0 3px 0 rgba(255, 255, 255, .1);--card-shadow: 4px 6px 0 #000;--button-shadow: 3px 5px 0 #000}[data-theme=retro-arcade]{--bg-primary: #080a0f;--bg-secondary: #0f1422;--bg-card: #151c30;--bg-board: #0d121f;--bg-slot: #182036;--text-main: #e2f1ff;--text-muted: #6e84a3;--accent-cyan: #38bdf8;--accent-pink: #ec4899;--accent-yellow: #facc15;--accent-purple: #a855f7;--accent-green: #4ade80;--accent-orange: #fb923c;--border-neon: #38bdf8;--border-comic: #1f293d;--board-glow: 0 0 25px rgba(56, 189, 248, .2);--card-shadow: 0 6px 20px rgba(0, 0, 0, .6);--button-shadow: 0 4px 0 #000}[data-theme=dark-matter]{--bg-primary: #050507;--bg-secondary: #0c0d12;--bg-card: #13141b;--bg-board: #090a0f;--bg-slot: #171922;--text-main: #ffffff;--text-muted: #757b94;--accent-cyan: #06d6a0;--accent-pink: #ef476f;--accent-yellow: #ffd166;--accent-purple: #118ab2;--accent-green: #06d6a0;--accent-orange: #f77f00;--border-neon: rgba(255, 255, 255, .18);--border-comic: #1f2230;--board-glow: 0 0 40px rgba(6, 214, 160, .12);--card-shadow: 0 10px 30px rgba(0, 0, 0, .7);--button-shadow: 0 4px 0 #000}[data-theme=neon-prism]{--bg-primary: #05060f;--bg-secondary: #0b0e20;--bg-card: #121633;--bg-board: #0e1128;--bg-slot: #171b3e;--text-main: #ffffff;--text-muted: #959fe6;--accent-cyan: #00fff2;--accent-pink: #ff00b7;--accent-yellow: #ffe600;--accent-purple: #9d4edd;--accent-green: #00ff88;--accent-orange: #ff5e00;--border-neon: #00fff2;--border-comic: #222a5e;--board-glow: 0 0 45px rgba(0, 255, 242, .35), inset 0 2px 8px rgba(157, 78, 221, .4);--card-shadow: 0 10px 30px rgba(0, 0, 0, .75), 0 0 15px rgba(157, 78, 221, .25);--button-shadow: 0 4px 0 #000}[data-theme=comic-gold]{--bg-primary: #0d0a04;--bg-secondary: #17130a;--bg-card: #241d10;--bg-board: #1a150b;--bg-slot: #2a2213;--text-main: #fffdf5;--text-muted: #d4c39e;--accent-cyan: #ffd700;--accent-pink: #ff4500;--accent-yellow: #ffb703;--accent-purple: #c77dff;--accent-green: #e9d8a6;--accent-orange: #f77f00;--border-neon: #ffd700;--border-comic: #4a3b1a;--board-glow: 0 0 40px rgba(255, 215, 0, .35), inset 0 2px 6px rgba(255, 215, 0, .25);--card-shadow: 0 8px 25px rgba(0, 0, 0, .8), 0 0 12px rgba(255, 215, 0, .2);--button-shadow: 0 4px 0 #000}[data-theme=vaporwave-synth]{--bg-primary: #120726;--bg-secondary: #1e0d3d;--bg-card: #2b1354;--bg-board: #1b0a38;--bg-slot: #28124f;--text-main: #fff0fc;--text-muted: #d8aee8;--accent-cyan: #05d9e8;--accent-pink: #ff2a85;--accent-yellow: #ffec59;--accent-purple: #b5179e;--accent-green: #00f0ff;--accent-orange: #ff71ce;--border-neon: #ff2a85;--border-comic: #4e1f8c;--board-glow: 0 0 40px rgba(255, 42, 133, .35), inset 0 2px 8px rgba(5, 217, 232, .3);--card-shadow: 0 10px 30px rgba(0, 0, 0, .75), 0 0 15px rgba(255, 42, 133, .25);--button-shadow: 0 4px 0 #000}@keyframes tilePop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.12);opacity:1}to{transform:scale(1);opacity:1}}@keyframes tileMerge{0%{transform:scale(.9)}45%{transform:scale(1.22);filter:brightness(1.35)}to{transform:scale(1);filter:brightness(1)}}@keyframes scoreFloat{0%{transform:translate(-50%) scale(.85);opacity:1}50%{transform:translate(-50%,-24px) scale(1.25);opacity:1}to{transform:translate(-50%,-45px) scale(1);opacity:0}}@keyframes calloutFly{0%{transform:scale(.3) rotate(-8deg);opacity:0}25%{transform:scale(1.15) rotate(4deg);opacity:1}45%{transform:scale(1) rotate(-2deg);opacity:1}85%{transform:scale(1) rotate(0);opacity:1}to{transform:scale(.8) translateY(-30px);opacity:0}}@keyframes screenShake{0%{transform:translate(0) rotate(0)}20%{transform:translate(-3px,3px) rotate(-.5deg)}40%{transform:translate(3px,-2px) rotate(.5deg)}60%{transform:translate(-2px,-3px) rotate(-.3deg)}80%{transform:translate(2px,2px) rotate(.3deg)}to{transform:translate(0) rotate(0)}}@keyframes toastSlide{0%{transform:translateY(-80px) scale(.9);opacity:0}60%{transform:translateY(8px) scale(1.02);opacity:1}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pulseGlow{0%,to{box-shadow:0 0 12px #00f5d466,inset 0 0 8px #00f5d433}50%{box-shadow:0 0 26px #00f5d4cc,inset 0 0 16px #00f5d480}}@keyframes fireGlow{0%,to{box-shadow:0 0 16px #ff540080}50%{box-shadow:0 0 32px #ff5400e6,0 0 45px #ffbd0099}}@keyframes rainbowShift{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}.animate-pop{animation:tilePop .18s cubic-bezier(.175,.885,.32,1.275) forwards}.animate-merge{animation:tileMerge .22s cubic-bezier(.175,.885,.32,1.275) forwards}.shake-active{animation:screenShake .28s ease-in-out}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}body.reduced-motion *,body.reduced-motion :before,body.reduced-motion :after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}:root{--font-display: "Bungee", cursive, sans-serif;--font-title: "Outfit", sans-serif;--font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--max-content-width: 1080px}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{width:100%;min-height:100vh;min-height:100dvh;background-color:var(--bg-primary);color:var(--text-main);font-family:var(--font-body);overflow-x:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}body{background-image:radial-gradient(circle at 50% 10%,rgba(0,245,212,.06) 0%,transparent 50%),radial-gradient(circle at 90% 80%,rgba(247,37,133,.05) 0%,transparent 45%),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:100% 100%,100% 100%,36px 36px,36px 36px}button{font-family:inherit;border:none;background:none;cursor:pointer;outline:none}button:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:2px}.app-container{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;max-width:var(--max-content-width);margin:0 auto;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#04050ad9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;animation:fadeIn .18s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--bg-card);border:2px solid var(--border-comic);border-radius:20px;box-shadow:0 16px 40px #000c,0 0 20px #00f5d41a;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:24px;position:relative;animation:modalScale .22s cubic-bezier(.175,.885,.32,1.275)}@keyframes modalScale{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-title{font-family:var(--font-display);font-size:1.4rem;letter-spacing:1px;color:var(--accent-cyan)}.modal-close-btn{background:var(--bg-slot);color:var(--text-muted);width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all .15s}.modal-close-btn:hover{color:var(--text-main);background:var(--accent-pink)}.game-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.brand-section{display:flex;flex-direction:column}.brand-title{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,2.5rem);line-height:1;letter-spacing:2px;background:linear-gradient(135deg,#ffffff 0%,var(--accent-cyan) 60%,var(--accent-pink) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 #000);text-transform:uppercase}.brand-tagline{font-family:var(--font-title);font-size:clamp(.65rem,2vw,.75rem);font-weight:800;letter-spacing:2.5px;color:var(--accent-yellow);text-transform:uppercase;margin-top:4px}.header-actions{display:flex;gap:8px;align-items:center}.icon-btn{background:var(--bg-card);border:2px solid var(--border-comic);color:var(--text-main);width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px #000;transition:transform .1s,background .15s,box-shadow .1s}.icon-btn:hover{background:var(--bg-slot);color:var(--accent-cyan)}.icon-btn:active{transform:translateY(2px);box-shadow:0 1px #000}.icon-btn.active{border-color:var(--accent-cyan);color:var(--accent-cyan)}.mode-tabs{display:flex;background:var(--bg-secondary);border:2px solid var(--border-comic);border-radius:14px;padding:4px;gap:4px;margin-bottom:14px;box-shadow:0 3px #000}.mode-tab-btn{flex:1;font-family:var(--font-title);font-weight:800;font-size:clamp(.75rem,2.5vw,.85rem);letter-spacing:1px;padding:8px 10px;border-radius:10px;color:var(--text-muted);text-align:center;transition:all .15s ease;display:flex;align-items:center;justify-content:center;gap:6px}.mode-tab-btn:hover{color:var(--text-main)}.mode-tab-btn.active{background:linear-gradient(135deg,var(--accent-cyan),#00b4d8);color:#0a0b10;box-shadow:0 2px 8px #00f5d466}.stats-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.stat-box{background:var(--bg-card);border:2px solid var(--border-comic);border-radius:14px;padding:8px 12px;text-align:center;position:relative;box-shadow:0 3px #000}.stat-label{font-family:var(--font-title);font-size:.68rem;font-weight:800;letter-spacing:1.5px;color:var(--text-muted);text-transform:uppercase}.stat-value{font-family:var(--font-display);font-size:clamp(1.1rem,4vw,1.4rem);letter-spacing:1px;color:var(--text-main);margin-top:2px}.stat-value.highlight-cyan{color:var(--accent-cyan)}.stat-value.highlight-yellow{color:var(--accent-yellow)}.stat-value.highlight-pink{color:var(--accent-pink)}.score-gain-float{position:absolute;top:4px;right:12px;font-family:var(--font-display);font-size:1rem;color:var(--accent-yellow);pointer-events:none;animation:scoreFloat .75s ease-out forwards}.game-play-area{display:flex;flex-direction:column;align-items:center;position:relative;width:100%}.board-container{--board-size: min( calc(100vw - 32px) , calc(100dvh - 300px) , 460px);width:var(--board-size);height:var(--board-size);background:var(--bg-board);border:3px solid var(--border-comic);border-radius:18px;position:relative;padding:10px;box-shadow:var(--board-glow);touch-action:none;margin:0 auto}.board-container.has-border-glow{border-color:var(--border-neon)}.board-slots-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px;width:100%;height:100%}.board-slot{background:var(--bg-slot);border-radius:12px;border:1px solid rgba(255,255,255,.03);position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.tile-item{width:100%;height:100%;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:clamp(1.4rem,5vw,2.1rem);font-weight:900;z-index:10;box-shadow:0 4px #000,0 6px 16px #0006;border:2px solid rgba(255,255,255,.15)}.tile-item[data-value="2"]{background:linear-gradient(135deg,#1e2638,#2a354d);color:#e2f1ff;border-color:#00f5d466}.tile-item[data-value="4"]{background:linear-gradient(135deg,#134654,#1b6275);color:#c9fbff;border-color:#00e5ff99}.tile-item[data-value="8"]{background:linear-gradient(135deg,#094074,#0b5394);color:#fff;border-color:#38bdf8}.tile-item[data-value="16"]{background:linear-gradient(135deg,#0077b6,#0096c7);color:#fff;border-color:#48cae4}.tile-item[data-value="32"]{background:linear-gradient(135deg,#5c0099,#7b2cbf);color:#fff;border-color:#c77dff}.tile-item[data-value="64"]{background:linear-gradient(135deg,#9b1d60,#b5179e);color:#fff;border-color:#f72585}.tile-item[data-value="128"]{background:linear-gradient(135deg,#d90429,#ef233c);color:#fff;border-color:#ff758f;font-size:clamp(1.2rem,4.2vw,1.8rem)}.tile-item[data-value="256"]{background:linear-gradient(135deg,#d84a05,#f46a16);color:#fff;border-color:#ffb703;font-size:clamp(1.2rem,4.2vw,1.8rem)}.tile-item[data-value="512"]{background:linear-gradient(135deg,#e85d04,#ff8500);color:#fff;border-color:#ffba08;font-size:clamp(1.2rem,4.2vw,1.8rem);box-shadow:0 4px #000,0 0 20px #ff850099}.tile-item[data-value="1024"]{background:linear-gradient(135deg,#e09f3e,#ffbd00);color:#12141e;border-color:#fff3b0;font-size:clamp(.95rem,3.5vw,1.45rem);box-shadow:0 4px #000,0 0 24px #ffbd00b3}.tile-item[data-value="2048"]{background:linear-gradient(135deg,#55a630,#70e000);color:#0d121f;border-color:#cf3;font-size:clamp(.95rem,3.5vw,1.45rem);box-shadow:0 4px #000,0 0 28px #70e000d9}.tile-item[data-value="4096"]{background:linear-gradient(135deg,#00b4d8,#00f5d4);color:#060911;border-color:#fff;font-size:clamp(.95rem,3.5vw,1.45rem);animation:pulseGlow 1.8s infinite}.tile-item[data-value="8192"],.tile-item[data-value="16384"]{background:linear-gradient(135deg,#f72585,#7209b7,#00f5d4);color:#fff;border-color:#fff;font-size:clamp(.85rem,3.2vw,1.3rem);animation:rainbowShift 4s linear infinite}.comic-callout-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center}.comic-callout-bubble{background:#000;border:3px solid #fff;border-radius:16px;padding:8px 18px;box-shadow:4px 6px 0 var(--accent-pink);animation:calloutFly 1.2s ease-out forwards;text-align:center}.comic-callout-text{font-family:var(--font-display);font-size:clamp(1.2rem,4.5vw,1.8rem);letter-spacing:1px}.comic-callout-subtext{font-family:var(--font-title);font-size:.75rem;font-weight:800;letter-spacing:1px;color:var(--accent-yellow)}.game-controls-bar{display:flex;gap:12px;width:var(--board-size);margin-top:16px}.comic-btn{flex:1;font-family:var(--font-title);font-weight:900;font-size:clamp(.85rem,3vw,1rem);letter-spacing:1.5px;text-transform:uppercase;padding:12px 16px;border-radius:14px;border:2px solid #000;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--button-shadow);transition:transform .1s,filter .15s,box-shadow .1s}.comic-btn:active{transform:translateY(2px);box-shadow:0 1px #000}.comic-btn-primary{background:linear-gradient(135deg,var(--accent-cyan),#00b4d8);color:#060911}.comic-btn-primary:hover{filter:brightness(1.1)}.comic-btn-secondary{background:var(--bg-card);border-color:var(--border-comic);color:var(--text-main)}.comic-btn-secondary:hover{background:var(--bg-slot);color:var(--accent-cyan)}.comic-btn-secondary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.footer-info{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}.footer-nav-links{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.footer-link-btn{font-family:var(--font-title);font-size:.8rem;font-weight:700;color:var(--text-muted);transition:color .15s}.footer-link-btn:hover{color:var(--accent-cyan)}@media(min-width:860px){.app-container{padding-top:24px;padding-bottom:24px}.game-layout-grid{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start;margin-top:12px}.game-side-panel{display:flex;flex-direction:column;gap:16px}}@media(max-height:600px)and (orientation:landscape){.app-container{padding:8px 16px}.game-layout-grid{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}.board-container{--board-size: min( calc(100vh - 40px) , 360px)}}
