.guess-page {
  --g-bg: #f7f7f2;
  --g-surface: #fff;
  --g-ink: #1d2a44;
  --g-muted: #596477;
  --g-accent: #286e48;
  --g-accent-ink: #fff;
  --g-line: #cdd3d5;
  --guess-correct: #3aa566;
  --guess-present: #e9b93c;
  --guess-absent: #7b8494;
}
.guess-page .game-player-slot .game-btn { padding-inline: 10px; font-size: 13px; }
.guess-page .game-landing-preview { border: 2px solid var(--g-ink); box-shadow: 0 4px 0 var(--g-line); }
.guess-page .game-landing .guess-lengths { margin-top: 12px; padding: 0; border: 0; background: transparent; }
.guess-page .game-landing .guess-lengths a { font-size: 13px; }
.guess-page .game-landing .guess-lengths a[aria-current="page"] { color: var(--g-accent); background: var(--g-surface); }
.guess-stage { max-width: 440px; text-align: center; }
.guess-lengths { display: flex; width: fit-content; margin: 0 auto; padding: 3px; border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-surface); }
.guess-lengths a { display: grid; place-items: center; min-width: 64px; min-height: 44px; padding: 6px 12px; border-radius: 6px; font-size: 15px; font-weight: 800; text-decoration: none; }
.guess-lengths a[aria-current="page"] { background: var(--g-accent); color: var(--g-accent-ink); }
.guess-lengths a:active { opacity: .75; }
.guess-clue { margin: 12px 0; font-size: 15px; line-height: 1.4; text-wrap: balance; }
.guess-board { --guess-length: 5; --guess-cell: 46px; display: grid; gap: 5px; width: min(100%, calc(var(--guess-length) * var(--guess-cell) + (var(--guess-length) - 1) * 5px)); margin: 0 auto; }
.guess-row { display: grid; grid-template-columns: repeat(var(--guess-length), minmax(0, 1fr)); gap: 5px; }
.guess-cell { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; border: 2px solid var(--g-line); border-radius: 5px; background: var(--g-surface); font-size: clamp(20px, 6vw, 26px); font-weight: 900; line-height: 1; }
.guess-cell.has-letter { border-color: var(--g-ink); }
.guess-status { display: grid; place-items: center; min-height: 44px; margin: 6px 0; font-size: 13px; line-height: 1.4; }
.guess-keyboard { display: grid; gap: 5px; width: 100%; }
.guess-key-row { display: flex; gap: 4px; }
.guess-key { flex: 1 1 0; min-width: 0; height: 44px; padding: 0; border: 1px solid #c8cdd3; border-radius: 5px; background: #e3e6e9; color: var(--g-ink); box-shadow: 0 2px 0 #c8cdd3; font-size: 17px; font-weight: 900; line-height: 1; cursor: pointer; touch-action: manipulation; }
.guess-key-action { font-size: 13px; }
.guess-key:active { transform: translateY(2px); box-shadow: none; }
.guess-key:disabled { cursor: default; }
.guess-cell.is-correct, .guess-key.is-correct, .guess-example .is-correct { background: var(--guess-correct); border-color: var(--guess-correct); color: #102d20; }
.guess-cell.is-present, .guess-key.is-present, .guess-example .is-present { background: var(--guess-present); border-color: var(--guess-present); color: #34290a; }
.guess-cell.is-absent, .guess-key.is-absent, .guess-example .is-absent { background: var(--guess-absent); border-color: var(--guess-absent); color: #fff; }
.guess-key:is(.is-correct, .is-present, .is-absent) { box-shadow: none; }
.guess-key.is-absent { color: #101a2c; }
.guess-next { width: 100%; margin-top: 14px; }
.guess-example { display: flex; gap: 5px; margin: 16px 0 10px; }
.guess-example span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 4px; font-size: 18px; font-weight: 900; }
.is-revealing .guess-cell { animation: guess-reveal .25s ease both; animation-delay: calc(var(--cell-index) * 45ms); }
.guess-board.is-shaking { animation: guess-shake .2s ease; }
@keyframes guess-reveal { from { transform: scaleY(.8); } to { transform: scaleY(1); } }
@keyframes guess-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (min-width: 720px) {
  .guess-board { --guess-cell: 52px; }
  .guess-clue { margin-block: 16px; }
  .guess-key { height: 48px; }
  .guess-page .game-levels { margin-top: 32px; }
}