:root{--gold:#d6b866;--gold-soft:#f0d794;--ink:#080808;--ivory:#f2ead8;--navy:#091126;--gap:7px}
*{box-sizing:border-box}
html{background:var(--ink);color-scheme:dark}
body{margin:0;background:radial-gradient(circle at 50% 18%,#21180f,#080808 56%);color:var(--ivory);font-family:Arial,sans-serif}
.home-bar{position:sticky;top:0;z-index:30;display:flex;width:100%;min-height:calc(52px + env(safe-area-inset-top));align-items:center;justify-content:center;border-bottom:1px solid #f4dfa5;padding:env(safe-area-inset-top) 18px 0;background:linear-gradient(110deg,#b18a38,#f0d98e 48%,#b18a38);box-shadow:0 8px 28px #0009,inset 0 1px #fff8;color:#090806;font-size:.88rem;font-weight:850;letter-spacing:.16em;text-decoration:none;text-transform:uppercase}
.game-shell{width:min(100%,560px);min-height:calc(100svh - 52px);margin:auto;padding:10px 12px calc(15px + env(safe-area-inset-bottom))}
.scorebar{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:4px;border-block:1px solid #443920}
.scorebar:has(#time-stat[hidden]){grid-template-columns:repeat(2,1fr)}
.scorebar.is-timer-hidden{grid-template-columns:repeat(2,1fr)}
.scorebar>div{padding:6px 2px;border-right:1px solid #3c321d;text-align:center}
.scorebar>div:last-child,.scorebar>div:nth-child(2):has(+[hidden]){border-right:0}
.scorebar span{display:block;color:#aaa086;font-size:8px;letter-spacing:.12em}
.scorebar strong{display:block;margin-top:2px;color:var(--gold-soft);font:normal 18px Georgia,serif}
.message{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.drop-zone{position:relative;display:grid;width:min(100%,430px);height:56px;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:1fr;align-items:center;margin:auto;padding-inline:9px}
.next-tile{position:relative;z-index:3;display:grid;width:48px;height:48px;grid-row:1;align-self:center;justify-self:center;place-items:center;border:2px solid #ffffff70;border-radius:12px;color:#071318;font-size:23px;font-weight:950;box-shadow:inset 0 6px #ffffff36,inset 0 -5px #0002,0 7px 14px #0008}
.number-board{position:relative;display:grid;width:min(100%,430px);aspect-ratio:5 / var(--rows,5);grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(var(--rows,5),1fr);gap:var(--gap);margin:auto;border:2px solid #4d4026;border-radius:16px;padding:9px;background:radial-gradient(circle at 50% 22%,#211d16,#0b0a08 72%);box-shadow:inset 0 1px #f0d79419,0 18px 45px #000a;touch-action:manipulation;isolation:isolate}
.board-cell{border:1px solid #2b2923;border-radius:13px;background:#151513;box-shadow:inset 0 1px #ffffff08}
.number-tile{position:relative;z-index:3;display:grid;min-width:0;min-height:0;place-items:center;border:2px solid #ffffff65;border-radius:13px;background:var(--tile);color:#071318;font-size:clamp(18px,6vw,31px);font-weight:950;letter-spacing:-.05em;box-shadow:inset 0 7px #ffffff42,inset 0 -7px #0002,0 6px 11px #0008;pointer-events:none}
.number-tile.is-new{animation:drop-in .32s cubic-bezier(.2,.8,.2,1.15)}
.number-tile.is-merged{animation:merge-pop .34s ease}
.column-hit{position:absolute;z-index:6;top:0;bottom:0;width:20%;border:0;border-radius:12px;padding:0;background:transparent;cursor:pointer}
.column-hit:nth-of-type(1){left:0}
.column-hit:nth-of-type(2){left:20%}
.column-hit:nth-of-type(3){left:40%}
.column-hit:nth-of-type(4){left:60%}
.column-hit:nth-of-type(5){left:80%}
.column-hit:hover{background:#f0d79408;box-shadow:none}
.column-hit:focus-visible,.column-hit.is-selected,.column-hit.is-selected:hover{background:#f0d7940b;box-shadow:inset 0 0 0 2px #e7cc7c90,0 0 14px #d6b8661f}
.column-hit:disabled{cursor:not-allowed;background:transparent}
.value-2{--tile:linear-gradient(145deg,#68efbf,#31c58d)}
.value-4{--tile:linear-gradient(145deg,#73c8ff,#3199e6)}
.value-8{--tile:linear-gradient(145deg,#9790ff,#6658df)}
.value-16{--tile:linear-gradient(145deg,#d47aff,#a63de1)}
.value-32{--tile:linear-gradient(145deg,#ff79b8,#df3d89)}
.value-64{--tile:linear-gradient(145deg,#ff8e70,#e35443)}
.value-128{--tile:linear-gradient(145deg,#ffd36b,#dda32c)}
.value-256{--tile:linear-gradient(145deg,#c5ed62,#7fc83f)}
.value-512{--tile:linear-gradient(145deg,#5fe8e0,#25aaa9)}
.value-1024{--tile:linear-gradient(145deg,#ff6378,#c82e4c)}
.value-2048{--tile:linear-gradient(145deg,#ffe48a,#cfa83d);box-shadow:inset 0 7px #fff8,inset 0 -7px #0002,0 0 19px #f5cf62aa}
.value-high{--tile:linear-gradient(145deg,hsl(var(--hue) 88% 70%),hsl(var(--hue) 72% 48%));color:#fff;text-shadow:0 1px 2px #0008}
.game-actions{display:flex;justify-content:center;margin-top:8px}
.undo-button{width:auto;min-width:130px;min-height:39px;padding:7px 18px}
.ad-reservation{display:grid;min-height:30px;margin-top:8px;place-items:center;border:1px dashed #3c3322;border-radius:9px;color:#665d4d;font-size:8px;letter-spacing:.14em;text-transform:uppercase}
.preview-capture .home-bar{display:none}
.preview-capture .game-shell{min-height:100svh}
.preview-capture .ad-reservation{display:none}
button:disabled{cursor:not-allowed;opacity:.38}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--gold-soft);outline-offset:2px}
dialog{width:min(440px,calc(100% - 26px));max-height:calc(100dvh - 28px);margin:auto;border:1px solid #806b3c;border-radius:20px;padding:22px;background:#11100d;color:var(--ivory);box-shadow:0 25px 100px #000d;overflow:auto}
dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}
.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
dialog h2{margin:0;color:var(--gold-soft);font:normal 28px Georgia,serif}
dialog h3{margin:20px 0 7px;color:var(--gold-soft);font-size:15px}
dialog p{font-size:13px;line-height:1.55}
.dialog-top>.icon-button{display:grid;width:39px;height:39px;place-items:center;border:1px solid #65552e;border-radius:50%;background:#15130e;color:var(--gold-soft);font-size:18px}
.select-field,.switch-row{display:flex;min-height:58px;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #3b321f}
.select-field{min-height:84px;padding-block:8px}
.select-field span,.switch-row span{display:block}
.select-field small,.switch-row small{display:block;max-width:255px;margin-top:3px;color:#9e927b;font-size:11px}
.select-field select{min-width:92px;border:1px solid #796439;border-radius:9px;padding:9px;background:#080808;color:var(--ivory)}
.switch-row input{width:22px;height:22px;accent-color:var(--gold)}
.primary-button,.secondary-button{display:flex;width:100%;min-height:46px;align-items:center;justify-content:center;border:1px solid var(--gold);border-radius:10px;padding:10px 15px;font-weight:800;cursor:pointer}
.primary-button{margin-top:17px;background:var(--gold);color:#0b0905}
.secondary-button{background:#12100d;color:var(--gold-soft)}
.dialog-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.dialog-buttons .primary-button{margin-top:0}
.eyebrow{color:#a99159;font-size:9px!important;font-weight:800;letter-spacing:.16em}
.record-panel{border:1px solid #554724;border-radius:13px;padding:13px;background:#0b0a08}
.record-grid{display:grid;grid-template-columns:1fr auto;gap:8px 14px;font-size:12px}
.record-grid span{color:#a99d86}
.record-grid strong{color:var(--gold-soft);text-align:right}
.dialog-note{margin-bottom:0;color:#958a75}
.control-rule{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:9px}
.control-rule p{margin:5px 0}
.control-symbol{display:grid;width:32px;height:32px;place-items:center;border:1px solid #65552e;border-radius:50%;color:var(--gold-soft);font-size:18px}
.info-control{font:italic bold 16px Georgia,serif}
.result-dialog{text-align:center}
.result-mark{display:grid;width:58px;height:58px;margin:10px auto;place-items:center;border:1px solid #bd8aff;border-radius:50%;color:#d9afff;font:30px Georgia,serif;box-shadow:0 0 18px #a35bdd55}
.result-stats{display:grid;grid-template-columns:repeat(2,1fr);margin:17px 0;border-block:1px solid #493d25}
.result-stats div{padding:11px 3px;border-right:1px solid #493d25}
.result-stats div:last-child{border-right:0}
.result-stats strong,.result-stats span{display:block}
.result-stats strong{color:var(--gold-soft);font:23px Georgia,serif}
.result-stats span{margin-top:4px;color:#9f947e;font-size:8px;letter-spacing:.12em}
.result-best{color:var(--gold-soft)}
.result-close{margin-top:9px}
@keyframes drop-in{from{opacity:.45;transform:translateY(-250%) scale(.88)}
70%{transform:translateY(4%) scale(1)}
to{opacity:1;transform:none}
}
@keyframes merge-pop{50%{filter:brightness(1.35);transform:scale(1.14)}
to{transform:none}
}
@media(max-width:380px){:root{--gap:5px}
.game-shell{padding-inline:8px}
.number-board{padding:7px}
.number-tile,.board-cell{border-radius:10px}
.drop-zone{height:61px;grid-template-rows:15px 44px}
.next-tile{width:44px;height:44px}
.scorebar strong{font-size:16px}
}
@media(min-width:700px) and (orientation:portrait){:root{--gap:10px}
.game-shell{width:min(88vw,760px);padding-top:16px}
.number-board,.drop-zone{width:min(78vw,52svh,620px)}
.number-board{padding:14px;border-radius:24px}
.number-tile,.board-cell{border-radius:18px}
.number-tile{font-size:clamp(28px,5vw,44px)}
.drop-zone{height:88px;grid-template-rows:22px 62px}
.next-tile{width:62px;height:62px;font-size:30px}
.message{margin-block:8px;font-size:15px}
.scorebar>div{padding:10px}
.scorebar strong{font-size:24px}
}
@media(orientation:landscape) and (max-height:800px){.game-shell{width:min(900px,100%);padding-top:7px}
.number-board,.drop-zone{width:min(45vh,480px)}
.drop-zone{height:54px;grid-template-rows:12px 40px}
.next-tile{width:40px;height:40px;font-size:19px}
.number-board{gap:4px;padding:6px}
.message{margin-block:2px}
.ad-reservation{display:none}
}
@media(prefers-reduced-motion:reduce){.number-tile{animation:none!important}
}

/* Five-by-five layout: one calm play surface with only the active column marked. */
.scorebar.is-timer-hidden>div:nth-child(2){border-right:0}
@media(max-width:380px){.drop-zone{height:50px;grid-template-rows:1fr;padding-inline:7px}.next-tile{width:44px;height:44px}}
@media(min-width:700px) and (orientation:portrait){.number-board,.drop-zone{width:min(78vw,62svh,620px)}.drop-zone{height:72px;grid-template-rows:1fr;padding-inline:14px}.next-tile{width:62px;height:62px}}
@media(orientation:landscape) and (max-height:800px){.number-board,.drop-zone{width:min(56vh,480px)}.drop-zone{height:46px;grid-template-rows:1fr;padding-inline:6px}.next-tile{width:40px;height:40px}}