: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: 14px;--gap: 10px;--tile-size: 66px;--tile-gap: 10px}@media(min-width:900px){:root{--tile-size: 74px;--tile-gap: 10px}}@media(max-width:640px){:root{--tile-size: 48px;--tile-gap: 6px}}@media(max-width:480px){:root{--tile-size: 40px;--tile-gap: 5px}}@media(max-width:380px){:root{--tile-size: 34px;--tile-gap: 4px}}html,body{height:100%}body{margin:0;background:radial-gradient(1200px 800px at 20% 10%,#1f2937,var(--bg));color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}*,*:before,*:after{font-family:inherit}button,input,select,textarea{font:inherit}code,pre{font-family:inherit}a{color:inherit}.page{min-height:100vh;padding:16px}.page-center{display:grid;place-items:center}.app-shell{display:grid;justify-items:center}.game-shell{width:fit-content;max-width:100%;display:grid;gap:14px;justify-items:center;--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:calc(var(--board-px) + 28px + 2px);max-width:100%;padding:12px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.hud-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.hud-scores{display:flex;gap:8px;flex-wrap:wrap}.hud-score{padding:6px 8px;border-radius:12px;background:var(--panel-strong);border:1px solid var(--border);min-width:96px}.hud-label{font-size:11px;opacity:.85}.hud-value{font-size:16px;font-weight:700;line-height:1.1}.hud-actions{display:flex;gap:10px;align-items:center}.hud-status{padding:6px 10px;border-radius:999px;border:1px solid rgb(248 113 113 / 55%);background:#f8717124;color:#fecaca;font-size:12px;font-weight:700}.board{position:relative;box-sizing:border-box;width:calc(var(--board-px) + 28px + 2px);height:calc(var(--board-px) + 28px + 2px);padding:14px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);touch-action:none}.tile-wrap{position:absolute;top:14px;left:14px;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) 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(.4, 0, .2, 1);--tile-motion-scale: 1}.tile-wrap[data-spawned=true]{--spawn-offset: 0px}.tile-wrap-dragging{z-index:5}.tile-wrap-merging{z-index:4}.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:18px;outline:0 solid rgb(255 255 255 / 0%);outline-offset:0;transition:transform .12s ease,opacity .14s ease,box-shadow .2s ease,filter .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 .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}}.tile-bump{animation:tile-merge .14s ease-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 .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 .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;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}