:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f8f7f4;
  color: #262724;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-items: safe center;
  justify-items: center;
  padding: clamp(24px, 5vw, 64px);
}

.game {
  width: min(100%, 446px);
  display: grid;
  gap: clamp(28px, 6vw, 46px);
}

.intro {
  margin: 0;
  max-width: 38ch;
  font-size: clamp(17px, 3vw, 21px);
  font-weight: 420;
  line-height: 1.46;
  letter-spacing: -.025em;
  text-wrap: pretty;
}

.intro a {
  color: inherit;
  text-decoration-color: #9ca092;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
}

.intro a:hover, .intro a:focus-visible { text-decoration-color: currentColor; }

.scoreboard {
  display: flex;
  gap: clamp(24px, 7vw, 48px);
  font-variant-numeric: tabular-nums;
}

.stat { display: grid; gap: 3px; }
.stat-label { color: #73756e; font-size: 12px; letter-spacing: .02em; }
.stat strong { font-size: clamp(23px, 5vw, 29px); font-weight: 620; line-height: 1.1; }

.board {
  width: 100%;
  aspect-ratio: 1;
  padding: clamp(8px, 1.8vw, 12px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.8vw, 12px);
  border-radius: 18px;
  background: #cbc8bf;
  box-shadow: 0 12px 44px rgb(38 39 36 / 7%);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

.board:focus-visible { outline: 2px solid #52594f; outline-offset: 5px; }
.board.is-over { cursor: pointer; touch-action: pan-y; }
.board.is-over .cell { filter: saturate(.7); }

.cell {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e7e5df;
  color: #65645c;
  font-size: clamp(24px, 7vw, 43px);
  font-weight: 700;
  letter-spacing: -.065em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cell[data-digits="4"] { font-size: clamp(22px, 5.8vw, 35px); }
.cell[data-digits="5"] { font-size: clamp(18px, 5vw, 29px); }
.cell[data-digits="6"] { font-size: clamp(15px, 4vw, 23px); }
.cell[data-exponent="1"], .leaderboard-row[data-exponent="1"] { background: #f5f2e9; }
.cell[data-exponent="2"], .leaderboard-row[data-exponent="2"] { background: #eee8d9; }
.cell[data-exponent="3"], .leaderboard-row[data-exponent="3"] { background: #e8d8c0; }
.cell[data-exponent="4"], .leaderboard-row[data-exponent="4"] { background: #e7caa7; }
.cell[data-exponent="5"], .leaderboard-row[data-exponent="5"] { background: #ddb78d; }
.cell[data-exponent="6"], .leaderboard-row[data-exponent="6"] { background: #d8a373; color: #fffaf2; }
.cell[data-exponent="7"], .leaderboard-row[data-exponent="7"] { background: #c99168; color: #fffaf2; }
.cell[data-exponent="8"], .leaderboard-row[data-exponent="8"] { background: #bb7e5c; color: #fffaf2; }
.cell[data-exponent="9"], .leaderboard-row[data-exponent="9"] { background: #a96f56; color: #fffaf2; }
.cell[data-exponent="10"], .leaderboard-row[data-exponent="10"] { background: #95614c; color: #fffaf2; }
.cell[data-exponent="11"], .leaderboard-row[data-exponent="11"] { background: #7b5848; color: #fffaf2; }
.cell[data-exponent="12"], .leaderboard-row[data-exponent="12"] { background: #685344; color: #fffaf2; }
.cell[data-exponent="13"], .leaderboard-row[data-exponent="13"] { background: #575044; color: #fffaf2; }
.cell[data-exponent="14"], .leaderboard-row[data-exponent="14"] { background: #46483f; color: #fffaf2; }
.cell[data-exponent="15"], .leaderboard-row[data-exponent="15"] { background: #393d37; color: #fffaf2; }
.cell[data-exponent="16"], .leaderboard-row[data-exponent="16"] { background: #2c342d; color: #fffaf2; }

.end-screen { display: grid; gap: 32px; padding-top: 4px; }
.end-screen[hidden], .pagination[hidden] { display: none; }
.end-screen h1, .end-screen h2 { margin: 0; font-weight: 620; letter-spacing: -.025em; }
.end-screen h1 { font-size: 24px; }
.end-screen h2 { font-size: 19px; }
.leaderboard { display: grid; gap: 13px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.leaderboard-total { color: #73756e; font-size: 12px; }
.quiet-message { min-height: 1.3em; margin: 0; color: #73756e; font-size: 13px; line-height: 1.3; }
.quiet-message:empty { min-height: 0; }
.leaderboard-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.leaderboard-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 43px;
  padding: 9px 13px;
  border-radius: 7px;
  background: #e7e5df;
  color: #65645c;
  font-size: 13px;
  line-height: 1.25;
}
.leaderboard-name { min-width: 0; overflow-wrap: anywhere; font-weight: 620; }
.leaderboard-values { flex: none; display: grid; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; color: #73756e; font-size: 12px; }
.pagination button { min-width: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 5px; background: #e7e5df; color: #262724; cursor: pointer; }
.pagination button:disabled { opacity: .4; cursor: default; }
.score-form { display: grid; gap: 10px; }
.score-form label { font-size: 13px; font-weight: 620; }
.score-form-fields { display: flex; gap: 8px; }
.score-form input, .score-form button { min-height: 42px; border-radius: 6px; font: inherit; font-size: 13px; }
.score-form input { flex: 1; min-width: 0; padding: 0 11px; border: 1px solid #cbc8bf; background: #fff; color: #262724; }
.score-form button { padding: 0 14px; border: 1px solid #262724; background: #262724; color: #fff; cursor: pointer; white-space: nowrap; }
.score-form button:disabled { opacity: .55; cursor: default; }
.score-form button:hover:not(:disabled) { background: #46483f; }
.score-form :is(input, button):focus-visible, .pagination button:focus-visible { outline: 2px solid #52594f; outline-offset: 3px; }

@media (max-width: 390px) {
  .leaderboard-row { gap: 8px; padding-inline: 10px; font-size: 12px; }
  .score-form-fields { flex-wrap: wrap; }
  .score-form input, .score-form button { flex: 1 1 100%; }
}

.cell.appeared { animation: appear 170ms ease-out both; }
@keyframes appear { from { opacity: .35; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cell.appeared { animation: none; }
}