:root{--font-display:"Alegreya", Georgia, serif;--font-body:"Source Sans 3", "Segoe UI", system-ui, sans-serif;--page-bg:#252a39;--page-bg-glow:#2f3548;--panel-bg:#2f3547;--panel-border:#414a61;--board-bg:#343b4f;--board-border:#4b5470;--cell-bg:#2a3040;--text-primary:#f3e7d8;--text-secondary:#b9bfcc;--accent:#ec8a2c;--accent-text:#2a1a0b;--accent-shadow:#b0601a;--border-color:#464f66;--button-bg:#3a4155;--button-shadow:#1c202c;--pill-bg:#c3c8d4;--pill-text:#2a2f3d;--rock-color:#a3a7af;--rock-light:#d2d5da;--rock-shade:#6d717a;--crack-color:#0d0f15;--crack-cell-bg:#222736;--menu-bg:#2f3547;--overlay:#12151ec7;--shockwave:#ffbe78d9;--tile-2:#efe4d6;--tile-2-fg:#6a5140;--tile-4:#fcc27a;--tile-4-fg:#6a4a2a;--tile-8:#e8811d;--tile-8-fg:#fff;--tile-16:#e05a3c;--tile-16-fg:#fff;--tile-32:#d33f3a;--tile-32-fg:#fff;--tile-64:#b72d48;--tile-64-fg:#fff;--tile-128:#ecc95a;--tile-128-fg:#563c10;--tile-256:#e5b631;--tile-256-fg:#4d340a;--tile-512:#d8a01b;--tile-512-fg:#fff;--tile-1024:#8f6ad6;--tile-1024-fg:#fff;--tile-2048:#5a87ec;--tile-2048-fg:#fff;--tile-super:#1f2533;--tile-super-fg:#f3e7d8}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:var(--font-body);color:var(--text-primary);background-color:var(--page-bg);background-image:var(--theme-background-image,none), radial-gradient(120% 70% at 50% 35%, var(--page-bg-glow), var(--page-bg) 70%);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background-size:cover;background-attachment:fixed;transition:background-color .3s,color .3s}button,select{font:inherit;color:inherit}button:not(:disabled){cursor:pointer}[hidden]{display:none!important}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.shell{width:100%;max-width:480px;min-height:100%;padding:max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));flex-direction:column;margin:0 auto;display:flex}.app-header{justify-content:space-between;align-items:center;gap:12px;padding:4px 0 8px;display:flex}.logo{font-family:var(--font-display);letter-spacing:-.01em;color:var(--text-primary);text-shadow:0 2px #00000040;margin:0;font-size:clamp(2.1rem,10vw,2.7rem);font-style:italic;font-weight:800}.menu{z-index:60;position:relative}.menu summary{cursor:pointer;border:1px solid var(--border-color);background:var(--button-bg);width:3.1rem;height:3.1rem;color:var(--text-primary);box-shadow:0 4px 0 var(--button-shadow);border-radius:.85rem;justify-content:center;align-items:center;list-style:none;transition:transform 80ms,box-shadow 80ms;display:flex}.menu summary:active{box-shadow:0 1px 0 var(--button-shadow);transform:translateY(3px)}.menu summary::-webkit-details-marker{display:none}.menu summary::marker{content:""}.menu-panel{border:1px solid var(--border-color);background:var(--menu-bg);border-radius:1rem;width:min(19rem,100vw - 2rem);max-height:calc(100dvh - 6rem);padding:1rem;animation:.14s ease-out menu-in;position:absolute;top:calc(100% + .75rem);right:0;overflow-y:auto;box-shadow:0 14px 34px #0006}@keyframes menu-in{0%{opacity:0;transform:translateY(-6px)}}.menu-heading{letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 .4rem;font-size:.78rem;font-weight:800}.menu-heading:not(:first-child){margin-top:1.1rem}.menu-select{border:1px solid var(--border-color);background:var(--page-bg);border-radius:.65rem;width:100%;padding:.6rem .75rem;font-weight:700}.menu-status{color:var(--text-secondary);margin:.4rem 0 0;font-size:.85rem}.menu-status:empty{display:none}.menu-note{color:var(--text-secondary);margin:0 0 .6rem;font-size:.9rem;line-height:1.4}.menu-actions{gap:.5rem;display:grid}.menu-actions .menu-heading{margin-top:1.1rem;margin-bottom:0}.menu-actions .menu-note{margin:0}.menu-button{border:1px solid var(--border-color);background:var(--button-bg);text-align:left;border-radius:.65rem;width:100%;padding:.6rem .75rem;font-weight:700}.menu-button.confirming{background:var(--accent);color:var(--accent-text);border-color:#0000}.primary-button,.secondary-button{letter-spacing:.01em;border:0;border-radius:1rem;width:100%;padding:.95rem 1.25rem;font-size:1.2rem;font-weight:800;transition:transform 80ms,box-shadow 80ms;display:block}.primary-button{background:var(--accent);color:var(--accent-text);box-shadow:0 5px 0 var(--accent-shadow)}.primary-button:active{box-shadow:0 1px 0 var(--accent-shadow);transform:translateY(4px)}.secondary-button{background:var(--button-bg);color:var(--text-primary);border:1px solid var(--border-color);box-shadow:0 4px 0 var(--button-shadow);margin-top:.75rem;font-size:1.05rem}.secondary-button:active{box-shadow:0 1px 0 var(--button-shadow);transform:translateY(3px)}.screen{flex-direction:column;flex:1;display:flex}.start-screen{gap:14px;padding-top:4px}.theme-preview{border:1px solid var(--border-color);background:var(--panel-bg);text-align:left;border-radius:.9rem;align-items:center;gap:.6rem;width:100%;padding:.7rem .9rem;display:flex}.theme-preview-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);font-size:.8rem;font-weight:800}.theme-preview-name{flex:1;font-weight:700}.theme-swatches{display:flex}.theme-swatches span{border:2px solid var(--panel-bg);border-radius:.35rem;width:1.3rem;height:1.3rem;margin-left:-.3rem}.mode-list{border:0;min-width:0;margin:0;padding:0}.section-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:.55rem;padding:0;font-size:.8rem;font-weight:800}.mode-cards{gap:.6rem;display:grid}.mode-card{border:2px solid var(--border-color);background:var(--panel-bg);cursor:pointer;border-radius:1rem;grid-template-columns:1fr auto;align-items:center;gap:.15rem .75rem;padding:.8rem 1rem;transition:border-color .15s,background-color .15s,transform 80ms;display:grid;position:relative}.mode-card:active{transform:scale(.985)}.mode-card input{opacity:0;pointer-events:none;position:absolute}.mode-card:has(input:checked){border-color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, var(--panel-bg))}.mode-card:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}.mode-name{font-size:1.15rem;font-weight:800}.mode-mechanic{background:var(--button-bg);letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary);vertical-align:.15em;border-radius:999px;margin-left:.4rem;padding:.05rem .45rem;font-size:.72rem;font-weight:800}.mode-desc{color:var(--text-secondary);grid-column:1;margin:0;font-size:.92rem;line-height:1.35}.mode-best{text-align:right;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);grid-area:1/2/span 2;font-size:.72rem;font-weight:800}.mode-best strong{letter-spacing:0;color:var(--text-primary);font-size:1.35rem;display:block}.selected-best{text-align:center;color:var(--text-secondary);margin:.2rem 0 0;font-weight:600}.selected-best strong{color:var(--text-primary);font-size:1.15rem}.scorebar{justify-content:space-between;align-items:center;margin-top:10px;display:flex}.score,.high-score{color:var(--text-secondary);margin:0;font-weight:600}.score{font-size:1.75rem}.score strong,.high-score strong{color:var(--text-primary);font-variant-numeric:tabular-nums;font-weight:800}.score strong{font-size:2rem;display:inline-block}.score strong.bump{animation:.2s ease-out bump}@keyframes bump{50%{transform:scale(1.18)}}.high-score{align-self:flex-end;font-size:1.45rem}.high-score strong.celebrate{color:var(--accent)}.mode-pill{background:var(--pill-bg);color:var(--pill-text);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:.3rem .85rem;font-size:.95rem;font-weight:800;box-shadow:0 3px 8px #00000040}.board-wrap{flex:1;justify-content:center;align-items:center;min-height:0;padding:18px 0;display:flex}.board{--step:112%;aspect-ratio:1;background:var(--board-bg);border:2px solid var(--board-border);touch-action:none;border-radius:6%;width:min(100%,440px,100dvh - 290px);min-width:260px;position:relative;box-shadow:0 18px 40px #00000059,inset 0 2px #ffffff0d;container-type:inline-size}.board.shake{animation:.4s cubic-bezier(.36,.07,.19,.97) board-shake}@keyframes board-shake{20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(3px)}}.board.nudge-UP{animation:.18s ease-out nudge-up}.board.nudge-DOWN{animation:.18s ease-out nudge-down}.board.nudge-LEFT{animation:.18s ease-out nudge-left}.board.nudge-RIGHT{animation:.18s ease-out nudge-right}@keyframes nudge-up{50%{transform:translateY(-3px)}}@keyframes nudge-down{50%{transform:translateY(3px)}}@keyframes nudge-left{50%{transform:translate(-3px)}}@keyframes nudge-right{50%{transform:translate(3px)}}.layer{position:absolute;inset:2.098%}.fx{pointer-events:none}.cell,.tile,.rock,.ring{width:18.2482%;height:18.2482%;transform:translate(calc(var(--x) * var(--step)), calc(var(--y) * var(--step)));position:absolute;top:0;left:0}.cell{background:var(--cell-bg);border-radius:14%;transition:background-color .3s;box-shadow:inset 0 2px 4px #00000040}.cell.cracked{background:var(--crack-cell-bg)}.cell .crack{width:92%;height:92%;color:var(--crack-color);position:absolute;inset:4%}.cell .crack.fresh{animation:.45s ease-out crack-in}@keyframes crack-in{0%{clip-path:circle(0%);opacity:.4}to{clip-path:circle(75%);opacity:1}}.tile,.rock{will-change:transform;transition:transform .15s ease-in-out}.tile{z-index:2}.tile.merging{z-index:1}.tile-face{background:linear-gradient(to bottom, #ffffff29, #fff0 45%), var(--tile-bg);width:100%;height:100%;color:var(--tile-fg);box-shadow:0 .9cqw 0 color-mix(in srgb, var(--tile-bg) 68%, #000), 0 1.6cqw 2.2cqw #00000047;font-variant-numeric:tabular-nums;border-radius:14%;place-items:center;font-size:8.4cqw;font-weight:800;line-height:1;transition:background-color .2s;display:grid}.tile-face.d3{font-size:6.6cqw}.tile-face.d4{font-size:5.2cqw}.tile-face.d5{font-size:4.2cqw}.tile.spawn .tile-face{animation:.18s ease-out both spawn}.tile.merged .tile-face{animation:.2s ease-out pop}.tile.hit .tile-face{animation:.38s ease-out hit}@keyframes spawn{0%{opacity:0;transform:scale(.2)}}@keyframes pop{50%{transform:scale(1.16)}}@keyframes hit{0%{filter:brightness()}30%{filter:brightness(1.8)saturate(.4);transform:scale(.82)}to{filter:brightness();transform:scale(1)}}.v2{--tile-bg:var(--tile-2);--tile-fg:var(--tile-2-fg)}.v4{--tile-bg:var(--tile-4);--tile-fg:var(--tile-4-fg)}.v8{--tile-bg:var(--tile-8);--tile-fg:var(--tile-8-fg)}.v16{--tile-bg:var(--tile-16);--tile-fg:var(--tile-16-fg)}.v32{--tile-bg:var(--tile-32);--tile-fg:var(--tile-32-fg)}.v64{--tile-bg:var(--tile-64);--tile-fg:var(--tile-64-fg)}.v128{--tile-bg:var(--tile-128);--tile-fg:var(--tile-128-fg)}.v256{--tile-bg:var(--tile-256);--tile-fg:var(--tile-256-fg)}.v512{--tile-bg:var(--tile-512);--tile-fg:var(--tile-512-fg)}.v1024{--tile-bg:var(--tile-1024);--tile-fg:var(--tile-1024-fg)}.v2048{--tile-bg:var(--tile-2048);--tile-fg:var(--tile-2048-fg)}.vsuper{--tile-bg:var(--tile-super);--tile-fg:var(--tile-super-fg)}.rock{z-index:3}.rock-face{background:color-mix(in srgb, var(--cell-bg) 80%, #000);border-radius:14%;width:100%;height:100%;padding:6%;box-shadow:inset 0 2px 6px #0006}.rock-face svg{filter:drop-shadow(0 1.2cqw 1cqw #00000073);width:100%;height:100%;display:block}.rock-face.bump-UP{animation:.22s ease-out rock-bump-up}.rock-face.bump-DOWN{animation:.22s ease-out rock-bump-down}.rock-face.bump-LEFT{animation:.22s ease-out rock-bump-left}.rock-face.bump-RIGHT{animation:.22s ease-out rock-bump-right}@keyframes rock-bump-up{40%{transform:translateY(-14%)}70%{transform:translateY(4%)}}@keyframes rock-bump-down{40%{transform:translateY(14%)}70%{transform:translateY(-4%)}}@keyframes rock-bump-left{40%{transform:translate(-14%)}70%{transform:translate(4%)}}@keyframes rock-bump-right{40%{transform:translate(14%)}70%{transform:translate(-4%)}}.rock-face.shatter svg{animation:.55s ease-in forwards shatter}@keyframes shatter{0%{transform:none}15%{transform:translate(-6%)rotate(-6deg)}30%{transform:translate(6%)rotate(5deg)}45%{opacity:1;filter:brightness(1.5);transform:scale(1.1)}to{opacity:0;filter:blur(4px);transform:scale(1.5)}}.shard{background:var(--rock-color);clip-path:polygon(50% 0,100% 60%,30% 100%,0 40%);opacity:0;width:22%;height:22%;margin:-11% 0 0 -11%;animation:.7s ease-out .25s forwards shard;position:absolute;top:50%;left:50%}@keyframes shard{0%{opacity:1;transform:translate(0)rotate(0)}to{opacity:0;transform:translate(var(--sx), var(--sy)) rotate(var(--sr))}}.ring{z-index:4;place-items:center;display:grid}.ring:before{content:"";border:1.4cqw solid var(--shockwave);border-radius:50%;width:100%;height:100%;animation:.45s ease-out forwards ring}@keyframes ring{0%{opacity:1;transform:scale(.4)}to{opacity:0;border-width:.3cqw;transform:scale(3.4)}}.wall-flash{background:var(--shockwave);border-radius:999px;animation:.35s ease-out forwards wall-flash;position:absolute}@keyframes wall-flash{0%{opacity:.9}to{opacity:0}}.hint{text-align:center;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);opacity:.6;margin:0;font-size:.85rem;font-weight:700}.game-over{z-index:50;background:var(--overlay);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);place-items:center;padding:16px;animation:.25s ease-out fade-in;display:grid;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}}.game-over-card{border:1px solid var(--border-color);background:var(--panel-bg);text-align:center;border-radius:1.4rem;width:min(100%,360px);padding:1.5rem 1.25rem 1.25rem;animation:.3s cubic-bezier(.2,.9,.3,1.2) card-in;box-shadow:0 20px 50px #00000073}@keyframes card-in{0%{opacity:0;transform:translateY(14px)scale(.95)}}.game-over-title{font-family:var(--font-display);margin:0;font-size:2.3rem;font-style:italic}.game-over-reason{color:var(--text-secondary);margin:.25rem 0 1rem}.results{grid-template-columns:repeat(3,1fr);gap:.5rem;margin:0 0 1rem;display:grid}.results div{background:color-mix(in srgb, var(--board-bg) 40%, var(--panel-bg));border-radius:.8rem;padding:.55rem .25rem}.results dt{letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);font-size:.72rem;font-weight:800}.results dd{margin:.15rem 0 0;font-size:1.35rem;font-weight:800}#final-mode{font-size:1rem;line-height:1.6}.new-best{color:var(--accent);margin:-.25rem 0 1rem;font-weight:800}@media (height<=640px){.logo{font-size:1.9rem}.score{font-size:1.4rem}.score strong{font-size:1.6rem}.high-score{font-size:1.15rem}.board-wrap{padding:10px 0}.mode-desc{font-size:.85rem}.mode-card{padding:.6rem .9rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}}