:root {
  --paper: #ece9df;
  --ink: #171619;
  --muted: #76727a;
  --line: rgba(23, 22, 25, .2);
  --acid: #c9f31d;
  --purple: #5135d5;
  --orange: #ff5d31;
  --gap: 12px;
  --cell: calc((100% - (var(--gap) * 3)) / 4);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body { min-height: 100%; margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Mono", monospace; overflow-x: hidden; }
button, a { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.noise { position: fixed; z-index: 10; inset: 0; pointer-events: none; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.site-header { min-height: 76px; padding: 0 32px; border-bottom: 1px solid var(--ink); display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; font: 700 13px "Manrope", sans-serif; letter-spacing: .08em; }
.brand i { color: var(--orange); font-style: normal; padding: 0 4px; }
.brand-dot { width: 14px; aspect-ratio: 1; border-radius: 50%; background: var(--acid); border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.status-line { margin: 0; font-size: 8px; letter-spacing: .14em; }
.status-line span { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 4px rgba(201, 243, 29, .22); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(201, 243, 29, 0); } }

main { width: min(1220px, calc(100% - 64px)); min-height: calc(100svh - 122px); margin: 0 auto; padding: clamp(48px, 7vh, 82px) 0 60px; display: grid; grid-template-columns: minmax(310px, .75fr) minmax(500px, 1fr); align-items: center; gap: clamp(60px, 9vw, 140px); }
.eyebrow { margin: 0 0 22px; color: var(--purple); font-size: 9px; font-weight: 500; letter-spacing: .15em; }
h1, h2 { font-family: "Manrope", sans-serif; font-weight: 800; line-height: .86; letter-spacing: -.075em; margin: 0; }
h1 { font-size: clamp(52px, 5.5vw, 83px); }
h1 em, h2 em { color: var(--purple); font-style: normal; }
.lede { max-width: 490px; margin: 28px 0 42px; color: #58545d; font-size: 12px; line-height: 1.75; }
.how-to { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 16px 0 17px; display: grid; grid-template-columns: 110px 1fr; align-items: start; gap: 20px; }
.how-to > span { font-size: 8px; letter-spacing: .13em; }
.how-to p { margin: 0; color: #625e66; font-size: 10px; line-height: 1.65; }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin: -2px 2px 0; border: 1px solid var(--ink); border-radius: 2px; background: #f8f6ef; color: var(--ink); font: 8px "DM Mono", monospace; box-shadow: 1px 2px 0 rgba(23,22,25,.28); }
.utility-actions { margin-top: 20px; display: flex; gap: 10px; }
.text-button { border: 0; background: none; padding: 8px 10px 8px 0; font-size: 8px; letter-spacing: .1em; }
.text-button span { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 5px; border: 1px solid var(--ink); border-radius: 50%; font-size: 12px; transition: .2s; }
.text-button:hover:not(:disabled) span { color: var(--paper); background: var(--ink); transform: rotate(-12deg); }
.text-button:disabled { opacity: .35; cursor: not-allowed; }

.game { min-width: 0; }
.score-row { display: grid; grid-template-columns: 1fr 1.25fr 1.15fr; border: 1px solid var(--ink); border-bottom: 0; }
.score-card { position: relative; min-height: 70px; padding: 13px 15px; border-right: 1px solid var(--ink); display: flex; flex-direction: column; justify-content: space-between; }
.score-card span { color: var(--muted); font-size: 7px; letter-spacing: .12em; }
.score-card strong { font: 700 22px "Manrope", sans-serif; letter-spacing: -.05em; }
#score-add { position: absolute; right: 13px; bottom: 12px; color: var(--purple); font: 700 12px "Manrope", sans-serif; opacity: 0; }
#score-add.show { animation: score-up .6s ease-out; }
@keyframes score-up { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-15px); } }
.new-game { border: 0; background: var(--acid); padding: 8px 8px 8px 15px; display: flex; align-items: center; justify-content: space-between; font-size: 8px; letter-spacing: .1em; }
.new-game i { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-size: 17px; font-style: normal; transition: .2s; }
.new-game:hover i { color: var(--paper); background: var(--ink); transform: rotate(45deg); }

.board-wrap { position: relative; border: 1px solid var(--ink); padding: 42px; background: #d8d4c9; }
.corner-label { position: absolute; font-size: 7px; letter-spacing: .12em; }
.corner-label.top { left: 11px; top: 12px; right: 11px; display: flex; justify-content: space-between; }
.corner-label.side { right: 12px; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%); }
.board { position: relative; width: 100%; aspect-ratio: 1; outline: 0; touch-action: none; user-select: none; }
.board:focus-visible { box-shadow: 0 0 0 4px var(--purple); }
.board-cells, .tile-layer { position: absolute; inset: 0; display: grid; grid-template: repeat(4, 1fr) / repeat(4, 1fr); gap: var(--gap); }
.board-cells i { display: block; background: rgba(23,22,25,.095); border: 1px solid rgba(23,22,25,.08); }
.tile-layer { pointer-events: none; }
.tile { grid-row: var(--row); grid-column: var(--column); display: grid; place-items: center; background: #f6f3e8; border: 1px solid var(--ink); color: var(--ink); font: 800 clamp(26px, 4.1vw, 58px) "Manrope", sans-serif; letter-spacing: -.08em; box-shadow: 3px 3px 0 rgba(23,22,25,.18); transition: transform .12s ease; }
.tile[data-value="2"] { background: #f5f2e8; }
.tile[data-value="4"] { background: #ddd9ff; }
.tile[data-value="8"] { background: #a997ff; }
.tile[data-value="16"] { background: #745deb; color: white; }
.tile[data-value="32"] { background: #5135d5; color: white; }
.tile[data-value="64"] { background: #ff805d; }
.tile[data-value="128"] { background: #ff5d31; color: white; font-size: clamp(23px, 3.5vw, 48px); }
.tile[data-value="256"] { background: #f3dc24; font-size: clamp(23px, 3.5vw, 48px); }
.tile[data-value="512"] { background: #d5f43f; font-size: clamp(23px, 3.5vw, 48px); }
.tile[data-value="1024"] { background: #c9f31d; font-size: clamp(18px, 3vw, 40px); }
.tile[data-value="2048"] { background: var(--ink); color: var(--acid); font-size: clamp(18px, 3vw, 40px); box-shadow: 0 0 0 4px var(--acid), 7px 7px 0 var(--purple); }
.tile.super { background: var(--ink); color: white; font-size: clamp(16px, 2.5vw, 34px); }
.tile.new { animation: appear .22s cubic-bezier(.2,.9,.3,1.4); }
.tile.merged { animation: merge .25s cubic-bezier(.2,.9,.3,1.4); }
@keyframes appear { from { opacity: 0; transform: scale(.25) rotate(-5deg); } }
@keyframes merge { 50% { transform: scale(1.13); } }

.game-message { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; background: rgba(23,22,25,.88); color: var(--paper); opacity: 0; visibility: hidden; transition: .3s; text-align: center; }
.game-message.visible { opacity: 1; visibility: visible; }
.game-message p { color: var(--acid); margin: 0 0 15px; font-size: 8px; letter-spacing: .15em; }
.game-message h2 { font-size: clamp(50px, 6vw, 80px); }
.game-message h2 em { color: var(--acid); }
.game-message button { min-width: 155px; min-height: 46px; margin-top: 27px; border: 1px solid var(--paper); background: var(--paper); color: var(--ink); padding: 0 8px 0 15px; font-size: 8px; letter-spacing: .1em; }
.game-message button span { margin-left: 18px; font-size: 14px; }
.game-message .continue { display: none; margin: 9px auto 0; color: var(--paper); background: transparent; }
.game-message.won .continue { display: block; }
.mobile-hint { display: none; text-align: center; margin: 15px 0 0; color: var(--muted); font-size: 7px; letter-spacing: .1em; }
.mobile-hint span { color: var(--ink); font-size: 14px; vertical-align: middle; }

footer { min-height: 46px; padding: 0 32px; border-top: 1px solid var(--ink); display: flex; align-items: center; justify-content: space-between; font-size: 7px; letter-spacing: .11em; }
dialog { width: min(560px, calc(100% - 32px)); border: 1px solid var(--ink); color: var(--ink); background: var(--paper); box-shadow: 12px 12px 0 var(--purple); padding: 48px; }
dialog::backdrop { background: rgba(23,22,25,.64); backdrop-filter: blur(3px); }
dialog h2 { font-size: clamp(52px, 7vw, 76px); }
dialog ol { margin: 38px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
dialog li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; border-bottom: 1px solid var(--line); padding: 15px 0; }
dialog li span { color: var(--purple); font-size: 9px; }
dialog li p { margin: 0; font-size: 10px; line-height: 1.6; }
.dialog-close { position: absolute; right: 15px; top: 12px; border: 0; background: none; font-size: 25px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (max-width: 900px) {
  main { width: min(620px, calc(100% - 40px)); grid-template-columns: 1fr; gap: 45px; padding-top: 55px; }
  .intro { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
  .intro .eyebrow, .intro h1 { grid-column: 1 / -1; }
  .lede { margin-bottom: 0; }
  .how-to { margin-top: 28px; grid-template-columns: 1fr; gap: 8px; }
  .utility-actions { grid-column: 1 / -1; }
  .mobile-hint { display: block; }
}

@media (max-width: 560px) {
  :root { --gap: 7px; }
  .site-header { min-height: 64px; padding: 0 17px; }
  .status-line { font-size: 0; }
  main { width: calc(100% - 24px); padding: 38px 0 48px; gap: 35px; }
  .intro { display: block; }
  h1 { font-size: clamp(48px, 15vw, 70px); }
  .lede { margin: 24px 0 28px; }
  .how-to { grid-template-columns: 90px 1fr; margin: 0; }
  .score-row { grid-template-columns: 1fr 1fr; }
  .new-game { grid-column: 1 / -1; min-height: 54px; border-top: 1px solid var(--ink); }
  .new-game i { width: 38px; height: 38px; }
  .score-card:nth-child(2) { border-right: 0; }
  .board-wrap { padding: 30px; }
  .tile { font-size: clamp(25px, 10vw, 42px); }
  .tile[data-value="128"], .tile[data-value="256"], .tile[data-value="512"] { font-size: clamp(21px, 8.7vw, 36px); }
  .tile[data-value="1024"], .tile[data-value="2048"] { font-size: clamp(17px, 7vw, 29px); }
  footer { padding: 0 17px; justify-content: center; }
  footer span:first-child { display: none; }
  dialog { padding: 40px 24px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }