:root{color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f7f9ff;background:radial-gradient(ellipse at 50% -15%,#264869 0,transparent 45%),linear-gradient(145deg,#071326,#0e1d3d 60%,#171438)}a{color:inherit}.header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,54px);border-bottom:1px solid #9fc9ff2b;background:#0812269e}.brand,.back{text-decoration:none;font-weight:850}.brand{font-size:23px;letter-spacing:-.05em}.brand span{color:#ffc46e}.brand small{font-size:9px;letter-spacing:.15em;border:1px solid #f4c97a66;border-radius:5px;padding:4px 6px;margin-left:9px;vertical-align:middle}.back{color:#cad7ee;font-size:12px}.page{max-width:1050px;margin:auto;padding:26px clamp(12px,3vw,32px) 52px}.intro{text-align:center}.intro .eyebrow{margin:0 0 6px;color:#ffcf89;letter-spacing:.24em;font-size:10px;font-weight:900}.intro h1{font-size:clamp(43px,7vw,72px);letter-spacing:-.07em;line-height:1;margin:0}.intro p:last-child{font-size:13px;color:#b6c7e0;margin:12px 0 23px}.layout{display:grid;grid-template-columns:minmax(0,620px) minmax(200px,1fr);gap:22px;align-items:start}.game-shell{padding:14px 15px 22px;border:1px solid #9bbce65c;border-radius:26px;background:linear-gradient(155deg,#1e3764,#111e3a 65%,#192448);box-shadow:0 32px 90px #0009,inset 0 1px #ffffff30}.hud{display:flex;gap:8px;justify-content:space-between;margin-bottom:15px}.hud div{flex:1;min-width:0;border:1px solid #ffffff26;border-radius:12px;padding:9px;text-align:center;background:#091b388c;color:#aabed6;font-size:10px;font-weight:900;letter-spacing:.1em}.hud b{display:block;color:#fff;font-size:20px;letter-spacing:0}.viewport{perspective:950px;perspective-origin:50% 33%;padding:12px 13px 28px;overflow:visible;touch-action:none;user-select:none}.board{--gap:12px;--cell:calc((100% - 5 * var(--gap))/4);position:relative;aspect-ratio:1;background:linear-gradient(160deg,#26365b,#142342);border:2px solid #92c7ed8f;border-radius:23px;transform:rotateX(13deg) rotateY(-8deg);transform-style:preserve-3d;box-shadow:18px 25px 0 #081429,18px 28px 0 3px #436292,26px 48px 62px #000b,inset 0 3px 12px #a4d8ff40}.grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:var(--gap);padding:var(--gap);transform:translateZ(2px)}.slot{border-radius:14px;background:linear-gradient(145deg,#07172e9c,#42608370);box-shadow:inset 2px 3px 7px #050c23,inset -1px -1px 2px #b2d6ff49}.tiles{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}.tile{position:absolute;width:var(--cell);height:var(--cell);left:calc(var(--gap) + var(--col) * (var(--cell) + var(--gap)));top:calc(var(--gap) + var(--row) * (var(--cell) + var(--gap)));transform:translateZ(15px);transform-style:preserve-3d;transition:left 170ms ease-in-out,top 170ms ease-in-out;--face:#ffe5a1;--edge:#c78148;--ink:#513448;filter:drop-shadow(4px 10px 4px #0008)}.tile::before{content:"";position:absolute;z-index:0;left:1px;right:1px;top:-13px;height:14px;background:linear-gradient(#fff9,var(--face));clip-path:polygon(12px 0,100% 0,calc(100% - 1px) 100%,0 100%);transform-origin:bottom;transform:rotateX(58deg);border-radius:6px 6px 0 0}.tile::after{content:"";position:absolute;top:1px;bottom:1px;right:-12px;width:13px;background:linear-gradient(90deg,var(--edge),#322149);transform-origin:left;transform:rotateY(59deg);border-radius:0 5px 5px 0}.face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink);background:radial-gradient(circle at 27% 15%,#fff8,var(--face) 58%,var(--edge));border:1px solid #fff9;border-radius:12px;box-shadow:inset 0 2px 3px #fff9,inset -7px -10px 18px #583b5455,0 1px 3px #fff6;font-size:clamp(21px,5vw,49px);font-weight:950;letter-spacing:-.06em;text-shadow:0 1px #fff7}.tile[data-digits="4"] .face{font-size:clamp(17px,4vw,37px)}.tile[data-digits="5"] .face{font-size:clamp(13px,3.4vw,30px)}.tile.new .face{animation:pop .26s ease-out}.tile.merged .face{animation:merge .29s ease-out}@keyframes pop{from{transform:scale(.18)}to{transform:scale(1)}}@keyframes merge{50%{transform:scale(1.13)}}.tile[data-value="2"]{--face:#b8e8ff;--edge:#4e8fcc;--ink:#194166}.tile[data-value="4"]{--face:#e4c7ff;--edge:#8863ba;--ink:#48346e}.tile[data-value="8"]{--face:#adf2d8;--edge:#3aafaa;--ink:#185963}.tile[data-value="16"]{--face:#ffe29b;--edge:#e4a447;--ink:#68432e}.tile[data-value="32"]{--face:#ffc392;--edge:#dc794e;--ink:#663c32}.tile[data-value="64"]{--face:#ff97aa;--edge:#d95279;--ink:#633450}.tile[data-value="128"],.tile[data-value="256"]{--face:#ffd77e;--edge:#ca7c37;--ink:#674126}.tile[data-value="512"],.tile[data-value="1024"]{--face:#ffee89;--edge:#d38a26;--ink:#624625}.tile[data-value="2048"]{--face:#fff9ba;--edge:#d99627;--ink:#6d4d16;filter:drop-shadow(0 0 15px #fff494) drop-shadow(5px 11px 4px #0008)}.tile[data-value="4096"],.tile[data-value="8192"]{--face:#ffb2e8;--edge:#bd55b3;--ink:#563064}.panel{border:1px solid #b1d7f542;border-radius:21px;padding:21px;background:#172b4d9e;box-shadow:inset 0 1px #fff2}.panel h2{margin:0 0 15px;font-size:18px}.panel p{font-size:12px;line-height:1.7;color:#b9cce4;margin:0 0 14px}.panel strong{color:#f8ddaa}.controls{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}.controls button,.overlay button{font:inherit;cursor:pointer;border:1px solid #b8d7f65f;border-radius:11px;background:#29456d;color:#fff;font-size:11px;font-weight:850;padding:10px 13px}.controls button:focus-visible,.overlay button:focus-visible{outline:3px solid #fff}.overlay{position:absolute;z-index:5;inset:0;display:flex;justify-content:center;align-items:center;padding:20px;border-radius:22px;background:#081831d9;backdrop-filter:blur(6px);text-align:center;transform:translateZ(50px)}.overlay[hidden]{display:none}.overlay img{width:115px;height:115px;border-radius:19px;box-shadow:0 12px 44px #0009}.overlay h2{margin:15px 0 7px;font-size:clamp(29px,5vw,46px);line-height:1;letter-spacing:-.055em}.overlay p{color:#d4dfec;font-size:12px;line-height:1.5;margin:0 0 16px}.overlay button{background:linear-gradient(145deg,#ffd780,#ee9b66);color:#25233d;border:0;font-size:12px;padding:12px 23px}.hint{font-size:11px!important;color:#98aecc!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:760px){.page{padding:17px 7px 35px}.intro h1{font-size:48px}.intro p:last-child{margin-bottom:15px;font-size:11px}.layout{display:flex;flex-direction:column;gap:13px}.game-shell,.panel{width:100%}.game-shell{padding:9px 6px 13px;border-radius:17px}.viewport{padding:5px 11px 22px}.board{--gap:8px;border-radius:15px;box-shadow:9px 14px 0 #081429,9px 16px 0 2px #436292,16px 29px 36px #0009}.slot{border-radius:9px}.face{border-radius:8px}.hud{margin-bottom:9px}.hud div{font-size:8px;padding:6px}.hud b{font-size:16px}.panel{padding:15px}.panel h2{margin-bottom:8px}.panel p{margin-bottom:10px}.controls{margin-bottom:10px}.tile{transform:translateZ(10px)}.tile::before{top:-9px;height:10px}.tile::after{right:-9px;width:10px}.overlay img{width:82px;height:82px}}