:root{color-scheme:dark;--glow:#203654;--empty:#ffffff13;--overlay:#0b1220e8;--button-text:#09241d;--best-color:#7cf2c8;--tile-2:#ede9e0;--tile-4:#e8dfc9;--tile-8:#f5b77b;--tile-16:#f49b70;--tile-32:#f47e72;--tile-64:#ed665f;--tile-128:#efd36e;--tile-256:#f2cc55;--tile-512:#eabb41;--tile-1024:#e7a92a;--tile-2048:#6ce5c0;--tile-large:#8895ff;--bg:#0b1220;--panel:#162033;--muted:#97a4bc;--text:#f5f7ff;--tile-gap:clamp(7px,2.1vw,12px);--board:#28344a;--accent:#6ce5c0;}
    *{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;min-height:100svh;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 50% -15%,var(--glow) 0%,var(--bg) 62%);color:var(--text);display:flex;justify-content:center;padding:clamp(16px,4vw,35px) 14px 30px}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #adfce1;outline-offset:3px}.app{width:min(100%,520px)}.top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px}.title{font-weight:900;font-size:clamp(50px,12vw,76px);line-height:1;letter-spacing:-.075em;margin:0}.subtitle{color:var(--muted);font-size:14px;margin:9px 0 0}.new{background:var(--accent);color:var(--button-text);border:0;padding:12px 16px;border-radius:12px;font-weight:800;box-shadow:0 5px 20px #60e8ba20;white-space:nowrap}.new:active{transform:translateY(1px)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:17px}.stat{background:var(--panel);border:1px solid #ffffff0d;border-radius:14px;padding:12px 9px;text-align:center;min-width:0}.stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800}.stat-number{font-variant-numeric:tabular-nums;font-size:clamp(21px,5vw,29px);font-weight:850;line-height:1.2;margin-top:5px;overflow-wrap:anywhere}.stat.best .stat-number{color:var(--best-color)}.board-wrap{position:relative;border-radius:20px;padding:var(--tile-gap);background:var(--board);box-shadow:0 18px 40px #0005;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--tile-gap);aspect-ratio:1}.cell{border-radius:10px;display:grid;place-items:center;background:var(--empty);min-width:0;min-height:0;position:relative}.tile{width:100%;height:100%;border-radius:10px;display:grid;place-items:center;font-size:clamp(22px,7vw,38px);font-weight:900;letter-spacing:-.035em;color:#233047;transition:background-color .11s}.tile[data-digits="4"]{font-size:clamp(21px,6vw,33px)}.tile[data-digits="5"],.tile[data-digits="6"]{font-size:clamp(17px,5vw,27px)}.tile[data-value="2"]{background:var(--tile-2)}.tile[data-value="4"]{background:var(--tile-4)}.tile[data-value="8"]{background:var(--tile-8);color:#fff}.tile[data-value="16"]{background:var(--tile-16);color:#fff}.tile[data-value="32"]{background:var(--tile-32);color:#fff}.tile[data-value="64"]{background:var(--tile-64);color:#fff}.tile[data-value="128"]{background:var(--tile-128);color:#29303c}.tile[data-value="256"]{background:var(--tile-256);color:#29303c}.tile[data-value="512"]{background:var(--tile-512);color:#253049}.tile[data-value="1024"]{background:var(--tile-1024);color:#fff}.tile[data-value="2048"]{background:var(--tile-2048);color:#11372d;box-shadow:inset 0 0 0 3px #fff3}.tile[data-value="4096"],.tile[data-value="8192"],.tile[data-value="16384"],.tile[data-value="32768"],.tile[data-value="65536"]{background:var(--tile-large);color:#fff}.hint{text-align:center;color:var(--muted);font-size:14px;line-height:1.55;margin:20px auto 0}.hint strong{color:var(--text)}.foot{text-align:center;color:#6e7d94;font-size:12px;margin-top:20px}.overlay{position:absolute;inset:0;background:var(--overlay);border-radius:20px;display:flex;align-items:center;justify-content:center;padding:20px;z-index:2;text-align:center}.overlay[hidden]{display:none}.modal{max-width:310px}.modal h2{font-size:34px;line-height:1.15;margin:0 0 10px}.modal p{color:#c2ccdc;line-height:1.5;margin:0 0 22px}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.secondary{background:#314058;color:white;border:0;padding:12px 17px;border-radius:12px;font-weight:750}@media(max-width:360px){.new{padding:11px 12px;font-size:13px}.stat{padding:10px 5px}.title{font-size:51px}}
/* Theme selector */
.theme-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;padding:11px 14px;border:1px solid #ffffff20;border-radius:14px;background:var(--panel)}
.theme-bar label{font-size:13px;font-weight:750;color:var(--muted)}
.theme-bar select{min-width:155px;max-width:65%;padding:9px 11px;border-radius:10px;border:1px solid #ffffff30;background:var(--board);color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.theme-bar select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body,.stat,.theme-bar,.board-wrap,.new,.secondary{transition:background-color .2s,color .2s,border-color .2s}
/* Five distinct palettes. The gameplay and scoring remain identical. */
:root[data-theme="classic"]{color-scheme:light;--bg:#faf8ef;--glow:#f4e6d0;--panel:#eee4da;--board:#bbada0;--muted:#7d7064;--text:#615348;--accent:#8f7a66;--button-text:#fff;--best-color:#8f5c2e;--empty:#eee4da65;--overlay:#faf8efed;--tile-2048:#edc22e;--tile-large:#3c3a32}
:root[data-theme="ocean"]{--bg:#061b29;--glow:#0d5272;--panel:#103447;--board:#14506a;--muted:#a1c6d6;--text:#ecfdff;--accent:#48dbc9;--button-text:#062b32;--best-color:#48dbc9;--empty:#ffffff16;--overlay:#061b29ed;--tile-2:#cceff0;--tile-4:#a6e6ea;--tile-8:#73cbdb;--tile-16:#48adcc;--tile-32:#338dad;--tile-64:#216d99;--tile-128:#b0f2a9;--tile-256:#8de9a1;--tile-512:#57d69d;--tile-1024:#38be9d;--tile-2048:#2cf2ba;--tile-large:#9a8bfa}
:root[data-theme="sunset"]{--bg:#251024;--glow:#712c55;--panel:#381b39;--board:#653653;--muted:#d4adc5;--text:#fff3f7;--accent:#ffa76e;--button-text:#391728;--best-color:#ffc38a;--empty:#ffffff19;--overlay:#251024ed;--tile-2:#ffe7d3;--tile-4:#ffd1bd;--tile-8:#ffb985;--tile-16:#fd966e;--tile-32:#f67972;--tile-64:#e35679;--tile-128:#f8b88e;--tile-256:#ffc16d;--tile-512:#f8a84a;--tile-1024:#f58b6d;--tile-2048:#ffdb72;--tile-large:#d98cf2}
:root[data-theme="forest"]{--bg:#101c16;--glow:#2e513b;--panel:#20362a;--board:#395740;--muted:#b1cbb3;--text:#f0f8ee;--accent:#a9dc81;--button-text:#19331e;--best-color:#a9dc81;--empty:#ffffff12;--overlay:#101c16ed;--tile-2:#e6ebd0;--tile-4:#dae7b6;--tile-8:#b9d68d;--tile-16:#8fc27f;--tile-32:#68ac7c;--tile-64:#4c9c6d;--tile-128:#c4d875;--tile-256:#afcb54;--tile-512:#8cad44;--tile-1024:#6f9635;--tile-2048:#d7e97f;--tile-large:#75bfac}
:root[data-theme="neon"]{--bg:#090918;--glow:#371367;--panel:#1b1736;--board:#332353;--muted:#b6a5d8;--text:#fffaff;--accent:#ff4fc3;--button-text:#1a0925;--best-color:#50f5da;--empty:#ffffff0d;--overlay:#090918ef;--tile-2:#eee2ff;--tile-4:#d8c4ff;--tile-8:#b89aff;--tile-16:#946dff;--tile-32:#854bdf;--tile-64:#fa5da5;--tile-128:#fc77c1;--tile-256:#ff9fd3;--tile-512:#73ece9;--tile-1024:#50cfe9;--tile-2048:#55f9d4;--tile-large:#fc50e0}
:root[data-theme="classic"] .tile[data-value="2"],:root[data-theme="classic"] .tile[data-value="4"]{color:#67594e}
:root[data-theme="classic"] .stat{border-color:#bdad9c44}
:root[data-theme="classic"] .theme-bar{border-color:#bdad9c44}
:root[data-theme="classic"] .secondary{background:#ae9b89}
:root[data-theme="classic"] .modal p{color:#6d6054}
@media(max-width:360px){.theme-bar{padding:10px}.theme-bar select{min-width:135px}}


/* Movement, merge and appearance animations */
.board{position:relative;isolation:isolate}
.movement-layer{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:visible}
.board.is-moving .cell>.tile{visibility:hidden}
.movement-layer .moving-tile{position:absolute;z-index:1;will-change:transform;animation:tile-slide 155ms cubic-bezier(.22,.8,.27,1) both}
@keyframes tile-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--travel-x),var(--travel-y),0)}}
.tile-merged{animation:tile-merge 190ms ease-out both;position:relative;z-index:1}
.tile-spawn{animation:tile-appear 170ms ease-out both}
@keyframes tile-merge{0%{transform:scale(.9)}45%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes tile-appear{0%{transform:scale(.15);opacity:.2}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.movement-layer .moving-tile,.tile-merged,.tile-spawn{animation:none!important}}