@font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk.ttf') format('truetype');font-weight:500 700;font-style:normal;font-display:swap}
:root{color-scheme:dark;--bg:#111e33;--gap:10px;--orange:#ff8b3d}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f6f0e7;font-family:'Space Grotesk',system-ui,sans-serif;min-height:100svh;display:grid;place-items:center;padding:36px 22px}main{width:min(100%,460px)}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px;gap:16px}h1{font-size:64px;line-height:1;letter-spacing:-5px;margin:0;font-weight:700}h1 span{color:var(--orange)}.scores{display:flex;gap:25px;padding-top:5px}.scores>div{display:flex;flex-direction:column;gap:5px;text-align:right}.scores span{color:#8693a7;letter-spacing:1.6px;font-size:9px}.scores strong{font-size:25px;font-weight:500;letter-spacing:-.8px;font-variant-numeric:tabular-nums}.board-wrap{position:relative}.board{position:relative;aspect-ratio:1;background:#1d2c43;border:1px solid #2b3a50;border-radius:18px;touch-action:none;user-select:none;box-shadow:0 18px 70px #070e1a30}.slots,.tiles{position:absolute;inset:12px}.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}.slot{background:#29384e;border-radius:10px}.tile{position:absolute;width:calc((100% - 3 * var(--gap))/4);height:calc((100% - 3 * var(--gap))/4);border-radius:10px;display:grid;place-items:center;font-size:46px;font-weight:700;letter-spacing:-1.8px;line-height:1;background:#ff8b3d;color:#18253a;will-change:transform}.tile[data-v="2"]{--tile-bg:#f5e9da}.tile[data-v="4"]{--tile-bg:#f8d4b2}.tile[data-v="8"]{--tile-bg:#ffb46f}.tile[data-v="16"]{--tile-bg:#ff984a}.tile[data-v="32"]{--tile-bg:#ff7c32}.tile[data-v="64"]{--tile-bg:#ee5c28;color:#fff2df}.tile[data-v="128"]{--tile-bg:#da4723;color:#fff2df}.tile[data-v="256"]{--tile-bg:#ba372b;color:#fff2df}.tile[data-v="512"]{--tile-bg:#923542;color:#fff2df}.tile[data-v="1024"]{--tile-bg:#665071;color:#fff2df}.tile[data-v="2048"]{--tile-bg:#ffad46;color:#172339;box-shadow:0 0 26px #ff8b3d30}.tile.big{font-size:37px}.tile.large{font-size:30px}.tile.fresh{animation:appear 100ms ease-out}.tile.merged{animation:pulse 130ms ease-out}@keyframes appear{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,100%{transform:scale(1)}45%{transform:scale(1.025)}}nav{display:flex;justify-content:center;gap:18px;margin-top:22px}button{font:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}nav button{width:42px;height:42px;border-radius:50%;background:transparent;color:#91a0b4;display:grid;place-items:center;transition:background .15s,color .15s}nav button:hover{color:var(--orange);background:#1d2c43}nav button:disabled{opacity:.23;cursor:default}nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}button:focus-visible,.board:focus-visible{outline:2px solid var(--orange);outline-offset:6px}.overlay{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding:0 3px}.overlay[hidden]{display:none}.overlay h2{font-size:23px;font-weight:500;letter-spacing:-.8px;margin:0}.overlay button{background:var(--orange);color:var(--bg);padding:13px 23px;border-radius:9px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:520px){body{padding:25px 18px}header{margin-bottom:24px}h1{font-size:57px}.scores{gap:20px}.scores strong{font-size:23px}.tile{font-size:clamp(30px,10vw,46px)}.tile.big{font-size:clamp(26px,8.2vw,37px)}.tile.large{font-size:clamp(22px,6.6vw,30px)}.slots,.tiles{inset:10px}:root{--gap:8px}.board{border-radius:15px}.slot,.tile{border-radius:8px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Keep gestures with the game, including the space around the board. */
html{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}
body{position:fixed;inset:0;min-height:0;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;padding:max(16px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
main{width:min(100%,460px,calc(100dvh - 240px))}
.tiles{contain:layout style;isolation:isolate}
.tile{left:0;top:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;animation:none!important}
.face{display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;background:var(--tile-bg,#ff8b3d)}
.tile.fresh .face{animation:arrive 220ms cubic-bezier(.25,.46,.45,.94)}
.tile.merged .face{animation:none}
@media(max-height:600px){main{width:min(100%,460px,calc(100dvh - 175px))}header{margin-bottom:14px}h1{font-size:39px;letter-spacing:-3px}.scores strong{font-size:18px}.scores span{font-size:8px}nav{margin-top:10px}nav button{width:32px;height:32px}.overlay{margin-top:10px}.overlay h2{font-size:18px}.overlay button{padding:9px 15px}.tile{font-size:clamp(20px,7dvh,36px)}.tile.big{font-size:clamp(17px,6dvh,28px)}.tile.large{font-size:clamp(14px,5dvh,23px)}}
@media(max-height:600px){main{width:min(100%,460px,calc(100dvh - 215px))}header{margin-left:-20px;margin-right:-20px}h1{font-size:34px}.scores{gap:12px}.scores strong{font-size:16px}}

.tile{contain:layout style;isolation:isolate;background:transparent}@media(hover:none){nav button:hover{color:#91a0b4;background:transparent}}

@keyframes arrive{from{transform:scale(0)}to{transform:scale(1)}}


.tile.merged{z-index:2}

/* Keep deliberate actions above the board, away from the swiping area. */
header{margin-bottom:12px}
nav{justify-content:flex-end;gap:8px;margin:0 0 14px}
@media(max-width:520px) and (min-height:601px){
 body{place-items:start center;padding-top:max(calc(env(safe-area-inset-top) + 12px + var(--app-top-extra,0px)),calc(clamp(24px,6svh,52px) + var(--app-top-extra,0px)))}
 header{margin-bottom:12px}
}
@media(max-height:600px){nav{margin:0 0 10px}}

/* The installed iPhone app needs clearance below the system status-bar fade. */
@media(display-mode:standalone){:root{--app-top-extra:24px}}

/* Keep longer values inside the tile even on compact screens. */
.tile{container-type:inline-size}
.face{font-size:min(1em,var(--digit-limit,90cqw))}