:root{color-scheme:light dark;--bg: #0f172a;--fg: #e5e7eb;--panel: rgb(255 255 255 / 6%);--panel-strong: rgb(255 255 255 / 10%);--border: rgb(255 255 255 / 16%);--shadow: 0 10px 30px rgb(0 0 0 / 45%);--radius: 12px;--tile-gap: clamp(3px, 1.2vmin, 12px);--max-board-width: 700px;--board-width: min(100vw, 60vh, var(--max-board-width));--tile-size: calc((var(--board-width) - 16px - 7 * var(--tile-gap)) / 8);--board-size: 8;--board-step: calc(var(--tile-size) + var(--tile-gap));--board-px: calc(var(--board-size) * var(--board-step) - var(--tile-gap));--tile-motion-scale: 1}@keyframes rotate-board{0%{transform:rotate(0)}to{transform:rotate(90deg)}}.board.rotating{animation:rotate-board .6s ease-in-out forwards;transform-origin:50% 50%}body{display:flex;width:100vw;height:100vh;margin:0;overflow:hidden;color:var(--fg);background:var(--bg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}@media(min-width:800px){:root{--board-width: min(100vw - 2rem, 60vh, var(--max-board-width));--tile-size: calc((var(--board-width) - 16px - 7 * var(--tile-gap)) / 8)}body{padding:1rem;width:calc(100vw - 2rem);height:calc(100vh - 2rem)}}main{width:100%}.app-shell{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;height:100%}.game-shell{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;height:100%;gap:clamp(8px,2vw,16px);padding:0;overflow:auto;--board-step: calc(var(--tile-size) + var(--tile-gap));--board-px: calc(var(--board-size) * var(--board-step) - var(--tile-gap))}.hud{box-sizing:border-box;width:var(--board-width);padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}.hud-row{display:flex;gap:clamp(8px,2vw,12px);align-items:flex-start;justify-content:space-between;flex-wrap:wrap}.hud-scores{display:flex;flex-direction:column;gap:clamp(6px,1.5vw,8px);flex:1}.hud-score{padding:clamp(4px,1vw,6px) clamp(6px,1.5vw,8px);border-radius:12px;min-width:unset;background:transparent;border:0;box-shadow:none}.hud-label{font-size:clamp(11px,2.5vmin,16px);opacity:.85}.hud-value{font-size:clamp(16px,4vmin,28px);font-weight:700;line-height:1.1}.hud-actions{display:flex;flex-flow:column wrap;gap:clamp(8px,1.5vw,10px);align-items:flex-end;margin-left:auto;justify-content:flex-end}.hud-row-spaced{margin-top:10px}.hud-status{padding:6px 10px;border-radius:999px;border:1px solid rgb(248 113 113 / 55%);background:#f8717124;color:#fecaca;font-size:clamp(12px,2.5vmin,18px);font-weight:700}.hud-info{padding:8px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--border);font-size:13px;font-weight:600;text-align:center;box-shadow:var(--shadow)}.board{position:relative;box-sizing:border-box;width:var(--board-width);aspect-ratio:1;padding:7px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);touch-action:none;flex-shrink:0}.tile-wrap{position:absolute;top:7px;left:7px;width:var(--tile-size);height:var(--tile-size);--pos-x-px: calc(var(--pos-x, 0) * var(--board-step));--pos-y-px: calc(var(--pos-y, 0) * var(--board-step));--merge-x-px: calc(var(--merge-x, 0) * var(--board-step));--merge-y-px: calc(var(--merge-y, 0) * var(--board-step));--spawn-offset: calc(var(--spawn-from-y, 0) * var(--board-step));will-change:transform;backface-visibility:hidden;transform:translate3d(var(--pos-x-px, 0),var(--pos-y-px, 0),0) translate3d(var(--merge-x-px, 0),var(--merge-y-px, 0),0) translate3d(var(--preview-x, 0),var(--preview-y, 0),0) translate3d(var(--drag-x, 0),var(--drag-y, 0),0) translate3d(0,var(--spawn-offset, 0),0) scale(var(--tile-motion-scale, 1));transition:transform var(--move-duration, .12s) var(--move-ease, cubic-bezier(.4, 0, .2, 1)) var(--move-delay, 0ms)}.tile-wrap-falling{--move-ease: cubic-bezier(.25, .46, .45, .94);--tile-motion-scale: 1}.tile-wrap[data-spawned=true]{--spawn-offset: 0px}.tile-wrap-dragging{z-index:5}.tile-wrap-preview-target{--tile-motion-scale: .95;z-index:2}.tile-wrap-oscillating{filter:drop-shadow(0 12px 24px rgb(0 0 0 / 50%))}.tile-wrap-merging{z-index:4}.tile-wrap-spawning{z-index:3}.tile-wrap-hidden{opacity:0;pointer-events:none}.tile{display:grid;place-items:center;width:100%;height:100%;border-radius:6px;font-weight:800;-webkit-user-select:none;user-select:none;cursor:pointer;font-size:clamp(20px,100%,72px);outline:0 solid rgb(255 255 255 / 0%);outline-offset:0;transition:transform var(--move-duration, .12s) ease,opacity var(--move-duration, .14s) ease,box-shadow var(--move-duration, .2s) ease,filter var(--move-duration, .18s) ease;touch-action:none}.tile-group{box-shadow:0 0 0 3px #facc1573,0 12px 22px #00000059;filter:saturate(1.08) brightness(1.04)}@keyframes tile-group-pulse{0%{transform:scale(1)}60%{transform:scale(1.12)}to{transform:scale(1)}}.tile-group-highlight{animation:tile-group-pulse var(--move-duration, .26s) ease-out}.tile-merge-target{box-shadow:0 0 0 3px #38bdf88c,0 0 24px #38bdf833}@keyframes tile-merge{0%{transform:scale(1);outline-width:0;outline-color:#fff0}40%{transform:scale(1.3);outline-width:10px;outline-color:#ffffffd9}to{transform:scale(1);outline-width:0;outline-color:#fff0}}@keyframes tile-vibrate{0%,to{transform:translate(0) rotate(0)}10%{transform:translate(-2px,-1px) rotate(-1deg)}20%{transform:translate(2px,1px) rotate(1deg)}30%{transform:translate(-2px,1px) rotate(-.5deg)}40%{transform:translate(2px,-1px) rotate(.5deg)}50%{transform:translate(-1px,-1px) rotate(-.5deg)}60%{transform:translate(1px,1px) rotate(.5deg)}70%{transform:translate(-1px) rotate(-.25deg)}80%{transform:translate(1px) rotate(.25deg)}90%{transform:translate(-.5px) rotate(0)}}.tile-bump{animation:tile-vibrate var(--move-duration, .28s) ease-in-out}.tile-removed{opacity:0;transform:scale(.6);pointer-events:none}.tile-merge-out{opacity:0;transform:scale(.45);pointer-events:none}@keyframes tile-invalid{0%{transform:translateZ(0)}20%{transform:translate3d(-6px,0,0)}40%{transform:translate3d(6px,0,0)}60%{transform:translate3d(-4px,0,0)}80%{transform:translate3d(4px,0,0)}to{transform:translateZ(0)}}.tile-invalid{animation:tile-invalid var(--move-duration, .18s) ease-in-out}@keyframes tile-hint{0%{box-shadow:0 0 #38bdf800,0 0 #38bdf800;filter:saturate(1) brightness(1)}35%{box-shadow:0 0 0 4px #38bdf8b3,0 0 28px #38bdf859;filter:saturate(1.12) brightness(1.08)}to{box-shadow:0 0 0 3px #38bdf88c,0 0 16px #38bdf82e;filter:saturate(1.05) brightness(1.03)}}.tile-hint{outline:3px solid rgb(56 189 248 / 70%);outline-offset:2px;animation:tile-hint var(--move-duration, .52s) ease-in-out 0ms 3}.tile:hover{transform:scale(1.06)}.tile:active{transform:scale(.98)}.tile-wrap-falling .tile:not(.tile-group,.tile-merge-target){box-shadow:0 16px 26px #0000006b;filter:saturate(1.06) contrast(1.03)}.tile-selected{box-shadow:0 0 0 3px #facc15}.btn{appearance:none;border:1px solid var(--border);background:var(--panel-strong);color:var(--fg);padding:8px 12px;border-radius:12px;font-weight:650;font-size:clamp(13px,2.5vmin,18px);cursor:pointer}.btn-primary{background:#22c55eeb;border-color:#22c55ef2;color:#052e16;box-shadow:0 0 0 3px #22c55e2e}.btn-primary:hover{background:#22c55efa}.btn[disabled]{opacity:.5;cursor:not-allowed}.btn-full{width:100%}.btn-link{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.icon-btn{appearance:none;border:1px solid var(--border);background:transparent;color:var(--fg);padding:8px;border-radius:12px;cursor:pointer;line-height:0}.modal-layer{position:fixed;inset:0;z-index:50;display:grid;place-items:center}@media(max-width:480px),(max-height:700px){.modal-layer-top{place-items:start center;padding-top:min(12vh,96px)}}.modal-backdrop{position:absolute;inset:0;background:#0000008c;border:none}.modal,.sheet{position:relative;width:min(540px,calc(100% - 32px));background:#0a0a0eeb;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.modal-title{margin:0 0 8px}.modal-actions{display:grid;gap:10px;margin-top:14px}.modal-separator{width:100%;height:1px;border:0;background:var(--border);opacity:.9;margin:6px 0}.sheet{place-self:end center;margin-bottom:16px}.sheet-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.sheet-title{margin:0}.sheet-section{margin:12px 0}.sheet-label{margin:0 0 8px;font-size:14px}.radio-list{display:grid;gap:6px}.radio{text-transform:capitalize;text-align:left;border:1px solid var(--border);background:transparent;color:var(--fg);border-radius:12px;padding:10px;cursor:pointer}.radio-selected{background:#3b82f633;border-color:#3b82f6b3}.tutorial img{width:100%;height:auto;border-radius:12px;border:1px solid var(--border)}.tutorial-text{margin:12px 0}.share{display:grid;gap:6px}.share-status{font-size:12px;opacity:.85}.privacy{width:min(740px,100%);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.privacy a{text-decoration:underline}