body[data-page="games/2048"] { background: #fafbfc; display: flex; flex-direction: column; min-height: 100dvh; }
body[data-page="games/2048"] > .portal-nav { flex-shrink: 0; }
body[data-page="games/2048"] > .site-footer { display: flex; justify-content: center; align-items: center; padding: 8px 16px; gap: 8px 24px; margin-top: auto; }
.game2048 { --board-size: min(460px, max(220px, calc(100dvh - 210px))); width: min(820px, calc(100% - 48px)); margin: auto; padding: 24px 0; display: grid; grid-template-columns: minmax(0, var(--board-size)) minmax(260px, 1fr); align-items: center; gap: 40px; color: #202329; letter-spacing: 0; }
.game2048-play, .game2048-panel { min-width: 0; }
.game2048-panel { display: flex; flex-direction: column; gap: 20px; }
.game2048 * { box-sizing: border-box; }
.game2048-back { display: inline-block; color: #637080; font-size: 13px; margin-bottom: 18px; text-decoration: none; }
.game2048 a:hover { text-decoration: underline; }
.game2048-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.game2048 h1 { font-size: 48px; line-height: 1; margin: 0; letter-spacing: 0; }
.game2048-scores { display: flex; gap: 10px; min-width: 0; }
.game2048-scores > div { min-width: 84px; padding: 8px 12px; background: #edf1f6; border-radius: 6px; text-align: center; }
.game2048-scores span { display: block; color: #5f6b79; font-size: 12px; }
.game2048-scores output { display: block; font-size: 23px; font-weight: 750; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.game2048-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; }
.game2048-toolbar > span { color: #647080; font-size: 14px; }
.game2048 button { font: inherit; min-height: 44px; padding: 10px 16px; border: 1px solid #d4dce5; border-radius: 6px; background: #fff; color: #263342; cursor: pointer; touch-action: manipulation; }
.game2048 button:hover { background: #eef3fc; border-color: #9ab4e8; }
.game2048 button:disabled { opacity: .5; cursor: default; }
.game2048 #game2048-restart, .game2048 .game2048-primary { background: #2563eb; border-color: #2563eb; color: white; }
.game2048 :is(button, a, summary):focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.game2048-stage { position: relative; container-type: inline-size; }
.game2048-board { --gap: 10px; display: grid; grid-template-rows: repeat(4, minmax(0,1fr)); gap: var(--gap); width: 100%; aspect-ratio: 1; background: #dce3ec; border-radius: 8px; padding: var(--gap); touch-action: none; user-select: none; -webkit-user-select: none; }
.game2048-board:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }
.game2048-board [role="row"] { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gap); min-height: 0; }
.game2048-board [role="gridcell"] { min-width: 0; min-height: 0; position: relative; background: #edf1f6; border-radius: 5px; }
.game2048-tile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 5px; font-size: 36px; font-weight: 750; font-variant-numeric: tabular-nums; background: #f8fafc; color: #334155; }
.game2048-tile[data-value="4"] { background: #dce9ff; color: #244a8f; }
.game2048-tile[data-value="8"] { background: #bcd6fd; color: #143e80; }
.game2048-tile[data-value="16"] { background: #c8eee3; color: #135342; }
.game2048-tile[data-value="32"] { background: #82d6bc; color: #133f36; }
.game2048-tile[data-value="64"] { background: #168468; color: #fff; }
.game2048-tile[data-value="128"] { background: #f8d5df; color: #8a2545; }
.game2048-tile[data-value="256"] { background: #e486a4; color: #44182b; }
.game2048-tile[data-value="512"] { background: #b93e69; color: #fff; }
.game2048-tile[data-value="1024"] { background: #f1d871; color: #554409; }
.game2048-tile[data-value="2048"] { background: #f0bf28; color: #493807; }
.game2048-tile[data-large="true"] { background: #344d70; color: #fff; }
.game2048-tile[data-digits="4"] { font-size: 29px; }
.game2048-tile[data-digits="5"] { font-size: 24px; }
.game2048-tile[data-digits="6"] { font-size: 20px; }
.game2048-result { position: absolute; inset: 0; background: #ffffffed; border: 1px solid #d4dce5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; padding: 24px; text-align: center; }
.game2048-result[hidden] { display: none; }
.game2048-result h2 { font-size: 28px; margin: 0; }
.game2048-result p { margin: 0; color: #647080; }
.game2048-result > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.game2048-status { min-height: 22px; margin: 8px 0 0; text-align: center; color: #536273; font-size: 13px; }
.game2048-storage-warning { color: #8a2545; font-size: 13px; line-height: 1.6; }
.game2048-directions { display: grid; grid-template-columns: repeat(4, 48px); gap: 8px; justify-content: center; }
.game2048-directions button { font-size: 23px; height: 44px; padding: 0; }
.game2048-rules { border-top: 1px solid #e1e6ec; margin-top: 0; padding-top: 14px; color: #637080; font-size: 13px; line-height: 1.7; }
.game2048-rules summary { cursor: pointer; width: fit-content; }
.game2048-credit { color: #6a7481; font-size: 12px; line-height: 1.8; margin-top: 16px; }
.game2048-credit a { color: inherit; }
.game2048-confirm { padding: 24px; width: min(420px, calc(100% - 32px)); border: 1px solid #d4dce5; border-radius: 8px; color: #263342; }
.game2048-confirm::backdrop { background: #17212b66; }
.game2048-confirm h2 { font-size: 22px; margin: 0 0 12px; }
.game2048-confirm p { line-height: 1.6; font-size: 14px; }
.game2048-confirm form { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }
@media(max-width: 480px) {
  .game2048 { margin-top: 20px; }
  .game2048-back { margin-bottom: 14px; }
  .game2048 h1 { font-size: 38px; }
  .game2048-scores > div { min-width: 68px; padding: 8px; }
  .game2048-scores output { font-size: 20px; }
  .game2048-board { --gap: 8px; }
  .game2048-tile { font-size: 30px; }
  .game2048-tile[data-digits="4"] { font-size: 23px; }
  .game2048-tile[data-digits="5"] { font-size: 19px; }
  .game2048-tile[data-digits="6"] { font-size: 15px; }
  .game2048-result { padding: 16px; }
  .game2048-result h2 { font-size: 23px; }
}

/* Tile text follows the board size, including shorter laptop windows. */
.game2048-tile { font-size: clamp(20px, 8cqi, 36px); }
.game2048-tile[data-digits="4"] { font-size: clamp(16px, 6.4cqi, 29px); }
.game2048-tile[data-digits="5"] { font-size: clamp(13px, 5.2cqi, 24px); }
.game2048-tile[data-digits="6"] { font-size: clamp(11px, 4.3cqi, 20px); }
@media(max-width: 900px) and (min-width: 701px) {
  .game2048 { --board-size: min(420px, max(200px, calc(100dvh - 265px))); gap: 24px; }
}
@media(max-width: 700px) {
  .game2048 { width: min(380px, calc(100% - 32px)); grid-template-columns: minmax(0, 1fr); gap: 6px; margin: auto; padding: 8px 0; }
  .game2048-panel { display: contents; }
  .game2048-heading { order: 0; flex-wrap: nowrap; gap: 10px; }
  .game2048 h1 { font-size: 34px; }
  .game2048-scores { gap: 6px; }
  .game2048-scores > div { min-width: 66px; padding: 4px 8px; }
  .game2048-scores output { font-size: 20px; }
  .game2048-toolbar { order: 1; }
  .game2048-play { order: 2; width: min(100%, max(180px, calc(100dvh - 450px))); justify-self: center; }
  .game2048-directions { order: 3; }
  .game2048-storage-warning { order: 4; margin: 0; }
  .game2048-rules { order: 5; padding-top: 6px; }
  .game2048-status { font-size: 12px; line-height: 18px; min-height: 18px; margin-top: 6px; }
  .game2048-board { --gap: 6px; }
  body[data-page="games/2048"] > .site-footer { gap: 2px 16px; font-size: 11px; padding-block: 4px; }
  body[data-page="games/2048"] .site-info-nav button { font-size: 11px; min-height: 30px; padding: 4px 8px; }
}