:root{--canvas:#ffffff;--surface:#f7f7f8;--ink:#1c1c1e;--ink-deep:#050038;--slate:#6e6e73;--primary:#1c1c1e;--on-primary:#ffffff;--brand-yellow:#ffd02f;--brand-blue:#4262ff;--hairline:#e5e5ea;--hairline-strong:#c7c7cc;--radius-full:9999px;--radius-card:28px;--radius-board:16px;--radius-tile:8px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-section:64px;--board-gap:12px;--shadow-board:rgba(5,0,56,0.08) 0 12px 32px -4px;--shadow-modal:rgba(5,0,56,0.12) 0 16px 48px -8px}*{box-sizing:border-box}html{min-height:100%}body{margin:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--space-lg) var(--space-md);background-color:#121826;background-image:url(/pixel-bg.png);background-size:cover;background-position:50%;background-repeat:no-repeat;background-attachment:fixed;color:var(--ink);font-family:Noto Sans SC,Noto Sans,-apple-system,BlinkMacSystemFont,sans-serif}a{color:inherit;text-decoration:none}.page{width:min(100%,640px);margin:auto;padding:var(--space-xl);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:var(--radius-card);border:1px solid rgba(255,255,255,.8);box-shadow:0 20px 48px rgba(5,0,56,.25);animation:fade-in .2s ease}.wordmark{margin:0;color:var(--brand-yellow);font-size:22px;font-weight:500;letter-spacing:-.02em}.lede{margin:var(--space-sm) 0 0;color:var(--slate);font-size:16px;line-height:1.5}.game-card{margin-top:var(--space-xl);padding:var(--space-xl);background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-card)}.game-card h2{margin:0;font-size:28px;font-weight:500}.game-card p{margin:var(--space-sm) 0 var(--space-lg);color:var(--slate)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 24px;border-radius:var(--radius-full);border:1px solid transparent;font:inherit;font-size:14px;font-weight:500;cursor:pointer}.btn:disabled{background:var(--hairline);color:var(--slate);cursor:default}.btn-primary{background:var(--primary);color:var(--on-primary)}.btn-primary:not(:disabled):active{background:#3a3a3c}.btn-secondary{background:transparent;color:var(--ink);border-color:var(--hairline-strong)}.title-row{gap:var(--space-sm)}.back-btn,.title-row{display:inline-flex;align-items:center}.back-btn{justify-content:center;width:38px;height:38px;border-radius:var(--radius-full);background:var(--surface);color:var(--ink);border:1px solid var(--hairline);transition:background-color .15s ease,transform .15s ease;cursor:pointer}.back-btn:hover{background:var(--hairline)}.back-btn:active{transform:scale(.95)}.game-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-md)}.scores{display:flex;gap:var(--space-sm)}.score-card{min-width:92px;padding:var(--space-xs) var(--space-sm);background:var(--surface);border-radius:12px;text-align:center}.score-card span{display:block;color:var(--slate);font-size:12px;font-weight:500}.score-card strong{display:block;margin-top:2px;font-size:22px;font-weight:500}.score-card strong.pop{animation:number-pop .18s ease}.actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}.board-wrap{position:relative;width:min(100%,28rem);margin:var(--space-lg) 0 0}.board{position:relative;aspect-ratio:1;padding:var(--board-gap);background:var(--surface);border-radius:var(--radius-board);box-shadow:var(--shadow-board);touch-action:none}.board-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);grid-gap:var(--board-gap);gap:var(--board-gap);height:100%}.cell{background:var(--hairline);border-radius:var(--radius-tile)}.tiles{inset:var(--board-gap)}.tile,.tiles{position:absolute}.tile{width:calc((100% - 3 * var(--board-gap)) / 4);height:calc((100% - 3 * var(--board-gap)) / 4);display:grid;place-items:center;border-radius:var(--radius-tile);font-size:clamp(18px,6vw,32px);font-weight:500;line-height:1;transform:translate(calc(var(--c) * (100% + var(--board-gap))),calc(var(--r) * (100% + var(--board-gap))));transition:transform .16s ease}.tile[data-value="2"]{background:#fff3b0;color:var(--ink)}.tile[data-value="4"]{background:#ffd6e0;color:var(--ink)}.tile[data-value="8"]{background:#ffd4c4;color:var(--ink)}.tile[data-value="16"]{background:#c8ebe8;color:var(--ink)}.tile[data-value="32"]{background:#d4f0c8;color:var(--ink)}.tile[data-value="64"]{background:#ffc9b5;color:var(--ink)}.tile[data-value="128"]{background:#ffd02f;color:var(--ink);font-size:clamp(16px,5vw,26px)}.tile[data-value="256"]{background:#e4d7ff;color:var(--ink);font-size:clamp(16px,5vw,26px)}.tile[data-value="512"]{background:#9ae1d6;color:var(--ink-deep);font-size:clamp(16px,5vw,26px)}.tile[data-value="1024"]{background:var(--ink)}.tile[data-value="1024"],.tile[data-value="2048"]{color:var(--on-primary);font-size:clamp(14px,4.5vw,22px)}.tile[data-value="2048"]{background:var(--brand-blue)}.tile[data-value="4096"],.tile[data-value="8192"]{background:var(--ink-deep);color:var(--on-primary);font-size:clamp(14px,4.5vw,20px)}.tile.spawn{animation:tile-spawn .18s ease}.tile.merge{animation:tile-merge .18s ease}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:var(--space-lg);background:rgba(255,255,255,.86);border-radius:var(--radius-board);animation:modal-in .25s ease}.overlay.is-closing{animation:modal-out .15s ease forwards}.overlay-card{width:min(100%,280px);padding:var(--space-lg);background:var(--canvas);border-radius:var(--radius-card);box-shadow:var(--shadow-modal);text-align:center}.overlay-card h2{margin:0 0 var(--space-md);font-size:22px;font-weight:500}.overlay-card .actions{justify-content:center;margin-top:0}.end-bar{font-size:14px}.end-bar,.hint{margin-top:var(--space-md);color:var(--slate)}.hint{font-size:13px}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes number-pop{0%{transform:scale(1.08);filter:blur(2px)}to{transform:none;filter:none}}@keyframes tile-spawn{0%{transform:translate(calc(var(--c) * (100% + var(--board-gap))),calc(var(--r) * (100% + var(--board-gap)))) scale(0)}to{transform:translate(calc(var(--c) * (100% + var(--board-gap))),calc(var(--r) * (100% + var(--board-gap)))) scale(1)}}@keyframes tile-merge{0%{transform:translate(calc(var(--c) * (100% + var(--board-gap))),calc(var(--r) * (100% + var(--board-gap)))) scale(1)}50%{transform:translate(calc(var(--c) * (100% + var(--board-gap))),calc(var(--r) * (100% + var(--board-gap)))) scale(1.08)}to{transform:translate(calc(var(--c) * (100% + var(--board-gap))),calc(var(--r) * (100% + var(--board-gap)))) scale(1)}}@keyframes modal-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}@keyframes modal-out{0%{opacity:1;transform:none}to{opacity:0;transform:scale(.95)}}@media (max-width:480px){:root{--board-gap:8px}.page{padding:var(--space-lg) var(--space-md) var(--space-section)}.wordmark{font-size:20px}.game-card{padding:var(--space-lg)}}