:root{color-scheme:dark;--bg: #101012;--ink: #181714;--muted: #67625b;--board: #2a2926;--socket: rgba(255, 255, 255, .08);--accent: #14b8a6;--accent-ink: #062421;--tile-size: 0px;--tile-step: 0px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}:root[data-theme=light]{color-scheme:light;--ink: #171512;--muted: #6f675c;--board: #ded7ca;--socket: rgba(23, 21, 18, .08);--accent: #0d9488;--accent-ink: #f4fffc}*{box-sizing:border-box}body{min-height:100vh;margin:0;color:var(--ink);background:radial-gradient(circle at 18% 14%,rgba(20,184,166,.24),transparent 34%),radial-gradient(circle at 82% 18%,rgba(239,71,111,.18),transparent 30%),linear-gradient(135deg,#101012,#24201d 48%,#0d1918);overflow-x:hidden}:root[data-theme=light] body{background:radial-gradient(circle at 20% 12%,rgba(13,148,136,.18),transparent 32%),radial-gradient(circle at 84% 18%,rgba(239,71,111,.13),transparent 30%),linear-gradient(135deg,#fbf7ee,#f0ebe1 48%,#e6f4f1)}button{border:0;font:inherit}.app-shell{display:grid;min-height:100vh;place-items:center;padding:clamp(8px,1.5vw,18px)}.game-panel{display:grid;width:min(100%,680px);gap:7px}.topbar{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px;color:#fffaf0}.mobile-share-button{display:none}:root[data-theme=light] .topbar,:root[data-theme=light] .hint,:root[data-theme=light] .ghost-button,:root[data-theme=light] .icon-button,:root[data-theme=light] .mobile-share-button{color:var(--ink)}.eyebrow,.hint,.score-card span,.status-panel p{margin:0;color:#fffaf0b8;font-size:.74rem;font-weight:750;letter-spacing:0;text-transform:uppercase}:root[data-theme=light] .eyebrow,:root[data-theme=light] .hint,:root[data-theme=light] .score-card span{color:#1715129e}h1{margin:0;font-size:clamp(3rem,11vh,5.5rem);line-height:.88}.score-strip{display:flex;gap:8px}.score-card{min-width:86px;padding:7px 10px;border:1px solid rgba(255,250,240,.18);border-radius:8px;background:#fffaf01f;color:#fffaf0;text-align:right;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}:root[data-theme=light] .score-card{border-color:#17151224;background:#ffffff9e;color:var(--ink)}.score-card span{display:block;color:#fffaf09e;font-size:.66rem}.score-card strong{display:block;margin-top:2px;font-size:1.28rem;line-height:1}.board-wrap{position:relative;display:grid;justify-items:center}.coach{width:min(100%,500px);margin:-2px 0 6px;color:#fffaf0a3;font-size:.75rem;font-weight:600;line-height:1.22;text-align:center}:root[data-theme=light] .coach{color:var(--muted)}.board{position:relative;width:min(100%,50vh,500px);aspect-ratio:1;padding:clamp(10px,2.2vh,16px);border:1px solid rgba(255,250,240,.16);border-radius:8px;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent),var(--board);box-shadow:0 28px 90px #00000061,inset 0 1px #ffffff14;touch-action:none}.grid,.tile-layer{position:absolute;inset:clamp(10px,2.2vh,16px)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.6vh,12px)}.grid span{border-radius:7px;background:var(--socket);box-shadow:inset 0 1px #ffffff0f}.tile-layer{pointer-events:none}.tile{position:absolute;display:grid;width:var(--tile-size);height:var(--tile-size);place-items:center;border-radius:7px;color:#181714;font-size:clamp(1.45rem,8vw,3rem);font-weight:900;line-height:1;box-shadow:0 12px 24px #0003,inset 0 1px #ffffff73;transform:translate(var(--tx),var(--ty)) scale(1);transition:transform .17s cubic-bezier(.2,.85,.25,1),opacity .12s ease;will-change:transform}.tile.new{animation:tile-pop .18s cubic-bezier(.2,1.35,.3,1) both}.tile.merged{animation:tile-merge .21s ease both}.tile[data-value="2"]{background:#f9f4e8}.tile[data-value="4"]{background:#efe3cf}.tile[data-value="8"]{background:#ffba7a;color:#2b1806}.tile[data-value="16"]{background:#ff9364;color:#fffaf0}.tile[data-value="32"]{background:#ef476f;color:#fffaf0}.tile[data-value="64"]{background:#d7265e;color:#fffaf0}.tile[data-value="128"]{background:#4dd4ac;color:#062421;font-size:clamp(1.2rem,6.8vw,2.45rem)}.tile[data-value="256"]{background:#14b8a6;color:#062421;font-size:clamp(1.2rem,6.8vw,2.45rem)}.tile[data-value="512"]{background:#38bdf8;color:#061923;font-size:clamp(1.2rem,6.8vw,2.45rem)}.tile[data-value="1024"]{background:#8b5cf6;color:#fffaf0;font-size:clamp(1rem,5.7vw,2.05rem)}.tile[data-value="2048"]{background:#facc15;color:#231c05;font-size:clamp(1rem,5.7vw,2.05rem)}.tile.super{background:linear-gradient(135deg,#facc15,#14b8a6);color:#101012;font-size:clamp(.9rem,5.1vw,1.85rem)}.status-panel{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:20px;padding:24px;border-radius:8px;background:#101012c7;color:#fffaf0;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.status-panel[hidden]{display:none}.status-panel h2{margin:6px 0 8px;font-size:clamp(2rem,11vw,4rem)}.status-panel p{max-width:320px;color:#fffaf0c2;text-transform:none}.status-actions,.toolbar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.control-dock{display:grid;justify-items:center;gap:6px;width:min(100%,500px);justify-self:center;padding:7px 9px;border:1px solid rgba(255,250,240,.12);border-radius:8px;background:#fffaf014;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}:root[data-theme=light] .control-dock{border-color:#1715121a;background:#ffffff8f}.direction-pad{display:grid;grid-template-columns:repeat(3,48px);grid-template-areas:". up ." "left down right";justify-content:center;gap:5px}.direction-pad button{display:grid;min-height:34px;place-items:center;border:1px solid rgba(255,250,240,.18);border-radius:8px;background:#fffaf01f;color:#fffaf0;cursor:pointer;font-size:1.25rem;font-weight:900;transition:transform .12s ease,background .12s ease}.direction-pad button:hover{background:#14b8a63d;transform:translateY(-1px)}.direction-pad button:active{transform:translateY(0)}.direction-pad [data-direction=up]{grid-area:up}.direction-pad [data-direction=left]{grid-area:left}.direction-pad [data-direction=down]{grid-area:down}.direction-pad [data-direction=right]{grid-area:right}:root[data-theme=light] .direction-pad button{border-color:#1715121f;background:#ffffffb3;color:var(--ink)}.primary-button,.ghost-button,.icon-button{min-height:32px;padding:0 11px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:800;transition:transform .12s ease,filter .12s ease,background .12s ease}.primary-button{background:var(--accent);color:var(--accent-ink);box-shadow:0 14px 34px #14b8a63d}.ghost-button,.icon-button{border:1px solid rgba(255,250,240,.18);background:#fffaf01a;color:#fffaf0}:root[data-theme=light] .ghost-button,:root[data-theme=light] .icon-button{border-color:#17151224;background:#ffffff9e;color:var(--ink)}.primary-button:hover,.ghost-button:hover,.icon-button:hover{filter:brightness(1.06);transform:translateY(-1px)}.primary-button:active,.ghost-button:active,.icon-button:active{transform:translateY(0)}.primary-button:disabled,.ghost-button:disabled,.icon-button:disabled{cursor:not-allowed;filter:grayscale(.35);opacity:.48;transform:none}.records-panel{display:grid;gap:4px;width:min(100%,500px);justify-self:center;padding:7px 10px;border:1px solid rgba(255,250,240,.12);border-radius:8px;background:#fffaf012;color:#fffaf0}:root[data-theme=light] .records-panel{border-color:#1715121a;background:#ffffff85;color:var(--ink)}.records-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.records-header h2{margin:0;font-size:.82rem}.records-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:3px 12px;margin:0;padding-left:17px;font-size:.85rem}.records-list li{padding-top:2px;border-top:1px solid rgba(255,250,240,.08)}:root[data-theme=light] .records-list li{border-top-color:#1715121a}.records-list li::marker{color:var(--accent);font-weight:900}.records-list strong{display:inline-block;min-width:42px}.records-list span,.share-status{color:#fffaf0a3;font-size:.72rem}:root[data-theme=light] .records-list span,:root[data-theme=light] .share-status{color:var(--muted)}.empty-record{grid-column:1 / -1;list-style:none;color:#fffaf0b3}:root[data-theme=light] .empty-record{color:var(--muted)}.share-status{min-height:1em;margin:0}.hint{width:min(100%,500px);justify-self:center;color:#fffaf09e;font-size:.64rem;text-align:center;text-transform:none;line-height:1.18}@keyframes tile-pop{0%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.6)}to{opacity:1;transform:translate(var(--tx),var(--ty)) scale(1)}}@keyframes tile-merge{0%{transform:translate(var(--tx),var(--ty)) scale(1)}45%{transform:translate(var(--tx),var(--ty)) scale(1.12)}to{transform:translate(var(--tx),var(--ty)) scale(1)}}@media(max-height:820px)and (min-width:760px){.app-shell{padding-block:8px}.game-panel{width:min(100%,720px);gap:5px}h1{font-size:clamp(2.7rem,8vh,3.8rem)}.score-card{min-width:76px;padding:6px 9px}.score-card strong{font-size:1.1rem}.coach{width:min(100%,430px);margin-bottom:3px;font-size:.66rem;line-height:1.12}.board{width:min(100%,46vh,380px)}.control-dock{grid-template-columns:auto minmax(0,auto);align-items:center;justify-content:center;width:min(100%,560px);padding:5px 8px}.direction-pad{display:flex;grid-template-areas:none;grid-template-columns:none;gap:5px}.direction-pad button{width:34px;min-height:28px;font-size:1rem}.toolbar{justify-content:start;gap:6px}.primary-button,.ghost-button,.icon-button{min-height:28px;padding-inline:9px;font-size:.78rem}.records-panel{width:min(100%,560px);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:5px 8px}.records-header{display:contents}.records-header h2{font-size:.76rem}.records-list{grid-column:2;grid-row:1;grid-template-columns:1fr;margin:0;padding-left:16px;font-size:.76rem}.records-list li{padding-top:0;border-top:0;line-height:1.2}.records-list li:nth-child(n+2){display:none}#share-button{justify-self:end;grid-column:3;grid-row:1}.share-status{grid-column:1 / -1;min-height:0}.hint{width:min(100%,560px);font-size:.58rem;line-height:1.08}}@media(max-width:620px){.topbar{grid-template-columns:1fr;padding-right:112px}.mobile-share-button{position:absolute;top:2px;right:0;display:inline-flex;min-height:32px;align-items:center;justify-content:center;padding:0 10px;border:1px solid rgba(255,250,240,.18);border-radius:8px;background:#fffaf01a;color:#fffaf0;cursor:pointer;font-size:.78rem;font-weight:800}.score-strip{justify-content:stretch}.score-card{flex:1}.board{width:min(100%,560px)}.control-dock{padding:10px}.toolbar button{flex:1 1 calc(50% - 6px)}.direction-pad{grid-template-columns:repeat(3,1fr);width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;scroll-behavior:auto!important;transition-duration:1ms!important}}
