/* Gameplay presentation. Kept separate from the discovery/menu styles. */
.play-page {
  --ink: #423a35;
  --muted: #82796f;
  --purple: #775990;
  color: var(--ink);
}
.play-page .screen {
  max-width: 520px;
  min-height: 100svh;
  padding: max(20px, env(safe-area-inset-top)) 20px
    max(28px, env(safe-area-inset-bottom));
}
.play-page .play-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
  padding: 0 0 23px;
  border-bottom: 1px solid #e9e3d9;
}
.play-heading {
  text-align: center;
  min-width: 0;
}
.play-page .play-heading strong {
  display: block;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.7px;
  max-width: none;
  white-space: normal;
  color: var(--ink);
  font-weight: 900;
}
.play-page .play-heading small {
  display: block;
  background: none;
  border: 0;
  padding: 6px 0 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
  letter-spacing: 0.15px;
  font-weight: 600;
}
.play-page .game-header .icon-button,
.play-page .help-button {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid #e6dfd2;
  background: #fffdf8;
  color: #6f6258;
  box-shadow: 0 3px 0 #e8dfd0;
  font-size: 20px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.play-page .game-header .icon-button svg {
  width: 19px;
  height: 19px;
}
.play-page .game-content {
  max-width: 100%;
  margin: 25px auto 0;
  padding: 0;
  text-align: center;
}
.play-page button {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.play-page button:focus-visible,
.play-page input:focus-visible {
  outline: 3px solid #bca0d1;
  outline-offset: 4px;
}
.play-page button:disabled {
  cursor: default;
}
.play-page .solid,
.play-page .outline {
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  transition:
    transform 0.14s,
    box-shadow 0.14s,
    background 0.14s;
}
.play-page .solid {
  background: #795d90;
  color: #fffaf4;
  border: 1px solid #9878af;
  box-shadow:
    0 4px #544263,
    inset 0 1px #ffffff30;
}
.play-page .outline {
  background: #fffdf8;
  color: #6c5c4e;
  border: 1px solid #e3d9c8;
  box-shadow: 0 3px #e2d7c5;
}
.play-page button:active:not(:disabled) {
  transform: translateY(2px);
}
.play-page .solid:disabled,
.play-page .outline:disabled {
  opacity: 0.42;
  box-shadow: none;
}
.play-page .wide {
  width: 100%;
}
.play-page .hint,
.play-page .minimal-instruction,
.play-page .puzzle-counter {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 18px 0;
}
.play-page .game-status {
  font-size: 14px;
  line-height: 1.5;
  color: #665b51;
  padding: 10px 0;
  margin: 0 0 16px;
  background: none;
  box-shadow: none;
  border: 0;
}
.play-page .game-input {
  gap: 10px;
  margin-top: 20px;
}
.play-page .input {
  font-size: 16px;
  min-height: 49px;
  border-radius: 14px;
  border: 1px solid #dfd5c6;
  background: #fffdf8;
  color: var(--ink);
  padding: 12px;
}
.play-page .opponent-chip {
  margin: 0 auto 12px;
  background: #eee7f2;
  padding: 7px 14px;
  border-radius: 30px;
  font-size: 13px;
}
.play-page .opponent-chip small {
  font-size: 10px;
  color: #796786;
}
.play-page .opponent-chip img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  object-position: center 35%;
}
/* Word Hunt: a padded sage tray, ivory keys, visible time and useful tools. */
.play-page .word-scorebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 2px 19px;
}
.play-page #word-count {
  font-size: 16px;
  font-weight: 800;
  color: #536d58;
}
.timer-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: #eee8db;
  border-radius: 20px;
}
.timer-pill svg {
  width: 18px;
  height: 18px;
  color: #88704f;
}
.play-page #clock {
  font-size: 16px;
  color: #756046;
  font-variant-numeric: tabular-nums;
}
.play-page .word-board:not(#merge-board) {
  background: #91ab91;
  border: 1px solid #b5c7a7;
  border-radius: 25px;
  padding: 12px 12px 17px;
  gap: 9px;
  margin: 0;
  box-shadow:
    inset 0 2px 0 #d1debe,
    0 6px 0 #6e8b72,
    0 13px 22px #66784c18;
}
.play-page .word-board .letter {
  font-size: 31px;
  border-radius: 12px;
  color: #514237;
  font-weight: 900;
  background: linear-gradient(#fffdf2, #f4e7ce);
  border: 1px solid #fff8e8;
  box-shadow:
    0 4px #c1a888,
    inset 0 1px #fff;
  padding: 0;
  min-width: 0;
}
.play-page .word-board .letter.selected {
  background: #eec574;
  color: #5d4027;
  border-color: #ffe1a0;
  box-shadow: 0 4px #ad8250;
}
.play-page .word-board:has(.letter:nth-child(25)) .letter {
  font-size: 24px;
  border-radius: 9px;
}
.play-page .word-input {
  font-size: 20px;
  letter-spacing: 0.6px;
  min-height: 46px;
  margin: 22px 0 0;
  padding: 10px;
  color: #79628a;
}
.play-page .found-words {
  font-size: 13px !important;
  color: #6f8069 !important;
  margin: 3px 0 10px !important;
  min-height: 25px !important;
  max-height: 60px !important;
}
.play-page .word-tools {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}
.play-page .word-tools .outline {
  width: auto;
  height: 46px;
  min-height: 46px;
  border-radius: 15px;
  padding: 10px 17px;
  display: flex;
  gap: 7px;
  font-size: 20px;
  color: #756653;
}
.play-page .word-tools .outline span {
  font-size: 14px;
}
/* Clusters */
.puzzle-brief {
  font-size: 16px;
  color: #827568;
  margin: 5px 0 21px;
  font-weight: 600;
}
.play-page .cluster-grid {
  gap: 8px;
  margin: 0 0 22px;
}
.play-page .cluster-word {
  background: #eee7d6;
  border: 1px solid #fdf9ef;
  color: #51483d;
  box-shadow: 0 4px #d5c9b2;
  border-radius: 13px;
  padding: 9px 2px;
  min-height: 76px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.2px;
}
.play-page .cluster-word.selected {
  background: #a58ab6;
  color: #fffdf7;
  border-color: #bda5cb;
  box-shadow: 0 4px #78648b;
}
.play-page #mistakes {
  display: block !important;
  font-size: 13px;
  color: #847365;
  margin: 20px 0;
}
.cluster-actions {
  display: grid;
  grid-template-columns: 1fr 0.7fr 1.35fr;
  gap: 8px;
}
.play-page .cluster-actions button {
  font-size: 13px;
  padding: 12px 6px;
  min-width: 0;
}
.play-page .solved-group {
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  border-radius: 13px;
  margin: 0 0 8px;
  font-size: 11px;
  color: #4c4738;
  box-shadow: inset 0 1px #ffffff80;
}
.play-page .solved-group br {
  display: none;
}
.play-page .solved-group b {
  font-size: 14px;
}
/* Wavelength: a physical instrument, a single clue, a single action. */
.wave-clue {
  position: relative;
  margin: 13px 3px 36px;
  padding: 26px 20px 29px;
  background: #eee3f2;
  border: 1px solid #f7f0f9;
  border-radius: 23px;
  box-shadow: 0 5px #d6c5df;
}
.wave-clue:after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: calc(50% - 11px);
  width: 22px;
  height: 22px;
  background: #eee3f2;
  transform: rotate(45deg);
  border-radius: 3px;
  box-shadow: 3px 3px #d6c5df;
}
.wave-clue > span {
  display: block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.3px;
  color: #92769e;
  margin-bottom: 13px;
}
.wave-clue > strong {
  display: block;
  font-size: 27px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.6px;
  color: #5a426b;
}
.play-page .instrument {
  margin: 0 auto 24px;
  max-width: 100%;
  background: none;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.play-page .instrument svg {
  width: 100%;
  display: block;
  filter: drop-shadow(0 9px 6px #8d705d18);
}
.play-page .instrument .dial-labels {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  font-size: 13px;
  font-weight: 800;
  color: #75634f;
  padding: 0 8px;
  margin-top: 8px;
}
.spectrum-control {
  padding: 0 4px 20px;
  text-align: left;
}
.spectrum-control label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #8a7d70;
  font-weight: 700;
}
.spectrum-control output {
  font-size: 20px;
  color: #725786;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.play-page .slider {
  width: 100%;
  height: 36px;
  margin: 8px 0 0;
  accent-color: #87639e;
  background: transparent;
}
/* Photographic rounds */
.geo-roundbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 18px;
  color: #514237;
}
.geo-roundbar b {
  font-size: 16px;
  color: #88734e;
}
.geo-roundbar i {
  font-style: normal;
  color: #b2a58f;
  font-weight: 600;
}
.play-page .photo-round {
  margin: 0 0 23px;
  border-radius: 21px;
  overflow: hidden;
  box-shadow: 0 5px #e7dfd1;
  border: 5px solid #fffdf8;
  aspect-ratio: 1.12;
}
.play-page .photo-round img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: auto;
}
.play-page .answer-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.play-page .answer-choice {
  display: flex;
  align-items: center;
  gap: 9px;
  position: relative;
  min-height: 66px;
  padding: 12px 10px;
  border-radius: 16px;
  background: #f6eedf;
  border: 1px solid #fffdf6;
  box-shadow: 0 4px #ddd0b9;
  color: #604f3f;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
}
.answer-letter {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid #dbcbb0;
  color: #a28d70;
  border-radius: 8px;
  font-size: 11px;
}
.answer-check {
  display: none;
}
.play-page .answer-choice.correct {
  background: #c6daba;
  color: #3f6743;
  box-shadow: 0 4px #93b384;
  border-color: #dcebd3;
}
.play-page .answer-choice.correct .answer-letter {
  display: none;
}
.play-page .answer-choice.correct .answer-check {
  display: inline;
  margin-left: auto;
}
.play-page .answer-choice.incorrect {
  background: #efd0c4;
  box-shadow: 0 4px #cd9f90;
  color: #8d5247;
}
.play-page .photo-credit {
  font-size: 10px;
  margin-top: 23px;
  color: #a09281;
}
/* Board and logic games */
.play-page .chessboard,
.play-page .logic-grid,
.play-page #four-board {
  margin: 18px auto 24px;
  box-shadow:
    0 6px #c7b495,
    0 12px 22px #73664a15;
}
.play-page .chessboard {
  border: 8px solid #d6bc92;
  border-radius: 13px;
  overflow: hidden;
}
.play-page .chess-cell {
  aspect-ratio: 1;
  font-size: 34px;
}
.play-page .logic-cell {
  font-size: 23px;
  aspect-ratio: 1;
  height: auto;
  min-height: 0;
}
.play-page #mine-board .logic-cell {
  font-size: 17px;
  border-radius: 5px;
}
.play-page .number-pad {
  gap: 7px;
  display: flex;
  margin: 22px 0;
}
.play-page .number-pad button {
  flex: 1;
  min-height: 45px;
  font-size: 21px;
  border-radius: 11px;
  background: #ede3cd;
  color: #756041;
  box-shadow: 0 3px #cbb899;
}
.play-page .move-log {
  font-size: 12px;
  line-height: 1.6;
  color: #8d7a63;
  margin: 15px 0;
  max-height: 50px;
  overflow: auto;
}
.play-page #four-turn,
.play-page #merge-points {
  font-size: 16px;
  color: #75654e;
  margin: 0 0 20px !important;
}
.play-page #four-board {
  border: 5px solid #76a493;
  padding: 12px !important;
  border-radius: 23px !important;
  box-shadow: 0 7px #3d6e60;
  gap: 7px !important;
}
.play-page .five-letter-board {
  max-width: 330px;
  gap: 7px;
  margin: 15px auto 24px;
}
.play-page .five-tile {
  font-size: 25px;
  border-radius: 9px;
}
.play-page .puzzle-counter {
  font-weight: 700;
  margin-top: 25px;
}
.play-page .minimal-tools button {
  width: 46px;
  height: 46px;
  font-size: 24px;
  border-radius: 15px;
  background: #f0e7d6;
  box-shadow: 0 3px #d2c1a3;
  color: #7d684e;
}
.play-page .slider-frame,
.play-page .pipe-board {
  margin: 26px auto;
}
/* Sports: a readable scoreboard, the playing surface, a small control dock. */
.play-page .game-content:has(.live-match) {
  max-width: 100%;
  margin-top: 23px;
}
.play-page .live-match {
  padding: 0 4px 15px;
  gap: 10px;
  margin-bottom: 0;
  max-width: none;
}
.play-page .match-player {
  grid-template-columns: 34px auto;
  gap: 3px 7px;
  min-width: 94px;
  text-align: left;
}
.play-page .match-player > b {
  font-size: 14px;
  color: #635342;
  font-weight: 900;
}
.play-page .match-player > small {
  font-size: 10px;
  color: #9c8c79;
}
.play-page .match-player > img {
  width: 34px;
  height: 38px;
  object-fit: cover;
  object-position: center 35%;
}
.play-page .player-dot {
  width: 29px;
  height: 29px;
  border: 3px solid #f8ebc7;
  background: #e6be6d;
  box-shadow: 0 2px #cfaa61;
}
.play-page .match-score {
  gap: 10px;
}
.play-page .match-score strong {
  font-size: 33px;
  line-height: 1;
  color: #6e5742;
}
.play-page .match-score > span {
  font-size: 14px;
  color: #c6b8a3;
}
.play-page .sport-table-wrap {
  max-width: 100%;
  margin: 5px auto 14px;
  display: flex;
  justify-content: center;
}
.play-page .sport-surface {
  max-width: 100%;
  width: auto;
  height: min(53svh, 480px);
  border-radius: 20px;
}
.play-page[data-playing="archery"] .sport-surface {
  width: 100%;
  height: auto;
  max-height: 430px;
  object-fit: contain;
}
.play-page .sport-control-line {
  font-size: 12px;
  line-height: 1.5;
  color: #8b7358;
  margin: 13px 0;
  gap: 8px;
}
.play-page .sport-small {
  min-height: 44px;
  font-size: 12px;
  padding: 10px 13px;
  border-radius: 13px;
  background: #f7efe0;
  color: #80684c;
  box-shadow: 0 3px #ddd0b9;
}
.play-page .sport-shoot {
  min-height: 48px;
  min-width: 127px;
  font-size: 16px;
  border-radius: 15px;
  background: #816294;
  color: #fff8ef;
  border-color: #a584b6;
  box-shadow: 0 4px #5e486e;
}
.play-page .sport-action-row {
  gap: 12px;
  margin: 16px 0;
}
.play-page .pool-power-line {
  font-size: 13px;
  color: #8b7358;
  gap: 12px;
}
.play-page .pool-power-line b {
  font-size: 12px;
  min-width: 33px;
}
.play-page .pool-power-line input {
  height: 36px;
}
.play-page .draw-meter {
  height: 8px;
  border-radius: 10px;
  overflow: hidden;
  background: #e9dfcf;
  margin: 18px 0 0;
}
.play-page .draw-meter i {
  background: #a78cba;
  border-radius: 10px;
}
.play-page .minimal-instruction {
  margin: 12px 0 0;
  font-size: 12px;
}
.play-page .replay-label {
  font-size: 10px;
  padding: 8px 11px;
  letter-spacing: 0.7px;
  border-radius: 11px;
}
.play-page .clue {
  font-size: 26px;
  line-height: 1.3;
  color: #684b70;
  background: #f2e7f2;
  border: 1px solid #fff9f9;
  box-shadow: 0 5px #d8c5dc;
  border-radius: 24px;
}
.play-page[data-playing="never"] .clue {
  margin: 30px 0;
  min-height: 270px !important;
  transform: rotate(-2deg);
}
.play-page[data-playing="never"] .clue:before {
  background: #e6c1cb;
  transform: rotate(5deg);
}
.play-page[data-playing="never"] #never-finish {
  margin-top: 12px;
}
@media (min-width: 700px) {
  .play-page .screen {
    padding-top: 35px;
  }
  .play-page .game-content {
    margin-top: 30px;
  }
  .play-page .word-board:not(#merge-board) {
    padding: 16px 16px 21px;
    gap: 12px;
  }
  .play-page .cluster-word {
    min-height: 85px;
    font-size: 14px;
  }
}
@media (max-width: 370px) {
  .play-page .screen {
    padding-left: 14px;
    padding-right: 14px;
  }
  .play-page .play-heading strong {
    font-size: 21px;
  }
  .play-page .cluster-word {
    font-size: 10px;
    min-height: 67px;
  }
  .play-page .word-board .letter {
    font-size: 26px;
  }
  .play-page .answer-choice {
    font-size: 13px;
    gap: 6px;
  }
}
/* The feed already provides navigation; keep the same board styling inside it. */
.embedded .play-page .play-header {
  display: none;
}
.embedded .play-page .screen {
  padding: 12px 18px 25px;
  min-height: 0;
}
.embedded .play-page .game-content {
  margin: 6px auto 0;
}
.embedded .play-page .sport-surface {
  height: min(50svh, 420px);
}
.embedded .play-page[data-playing="archery"] .sport-surface {
  height: auto;
  max-height: 40svh;
}
@media (prefers-reduced-motion: reduce) {
  .play-page * {
    scroll-behavior: auto;
    transition: none !important;
    animation: none !important;
  }
}

.play-page * {
  text-shadow: none;
}
.play-page .game-content #word-current {
  letter-spacing: 0.6px;
  font-size: 20px;
}
/* Results use one podium rather than duplicate mascots and stat panels. */
.clean-result .screen {
  max-width: 520px;
  padding: 20px 20px 30px;
  min-height: 100svh;
}
.result-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid #e9e3d9;
  color: #6a5a4c;
}
.result-nav > b {
  font-size: 20px;
  font-weight: 900;
}
.result-nav > span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #aa9984;
}
.result-nav .icon-button {
  width: 44px;
  height: 44px;
  border: 1px solid #e2d8c8;
  border-radius: 16px;
  background: #fffdf8;
  box-shadow: 0 3px #e6ddcf;
}
.clean-result .reward-content {
  margin: 28px auto 0;
  max-width: 100%;
}
.clean-result .reward-content:before,
.clean-result .reward-content:after {
  display: none;
}
.result-kicker {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #a78f6f;
  font-weight: 900;
}
.clean-result .reward-content h1 {
  display: block;
  font-size: 30px;
  letter-spacing: -0.8px;
  line-height: 1.15;
  margin: 10px 0 12px;
  color: #544337;
}
.clean-result .olympic-podium {
  height: 235px;
  min-height: 0;
  margin: 5px auto 23px;
  gap: 14px;
  padding: 0;
  max-width: 320px;
}
.clean-result .medal-place {
  width: 122px;
}
.clean-result .medal-place .plinth-mascot {
  width: 95px;
  height: 105px;
  margin: 0 auto;
}
.clean-result .medal-place .podium-name {
  font-size: 14px;
  font-weight: 800;
  color: #79644f;
}
.clean-result .medal-place > small {
  font-size: 11px;
  color: #9e876e;
}
.clean-result .round-plinth {
  margin-top: 12px;
}
.clean-result .result-scoreline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 20px;
  border-top: 1px solid #e6ddcf;
  border-bottom: 1px solid #e6ddcf;
  text-align: left;
}
.result-scoreline > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.result-scoreline span {
  font-size: 13px;
  color: #9c866b;
}
.result-scoreline strong {
  font-size: 28px;
  color: #705841;
  font-weight: 900;
}
.result-delta {
  font-size: 15px;
  font-weight: 800;
  color: #6c8b5a;
  background: #e9efdf;
  border-radius: 12px;
  padding: 8px 11px;
}
.result-delta.negative {
  background: #f0e6e1;
  color: #a57969;
}
.clean-result .reward-stack {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 28px;
  min-height: 0;
}
.clean-result .reward-stack > div {
  padding: 10px 14px;
  border-radius: 15px;
  gap: 6px;
  transform: none;
  min-height: 45px;
  animation: reward-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.clean-result .reward-stack > div:nth-child(2) {
  animation-delay: 0.15s;
}
.clean-result .reward-stack > div:nth-child(3) {
  animation-delay: 0.3s;
}
.clean-result .reward-stack b {
  font-size: 20px;
}
.clean-result .reward-stack small {
  font-size: 9px;
  letter-spacing: 0.5px;
}
.clean-result .reward-stack > div > span {
  font-size: 17px;
}
.clean-result .next-round {
  min-height: 52px;
  border-radius: 17px;
  font-size: 16px;
  background: #795d90;
  box-shadow: 0 4px #574365;
  border: 1px solid #9675ac;
  color: #fffaf4;
}
.clean-result .result-secondary {
  display: flex;
  gap: 12px;
  margin-top: 15px;
}
.clean-result .result-secondary button {
  flex: 1;
  min-height: 45px;
  font-size: 14px;
  border-radius: 15px;
  background: #fffdf8;
  border: 1px solid #e1d7c6;
  box-shadow: 0 3px #e4d9c7;
  color: #7f6a54;
}
.play-page .chess-square .piece-w {
  color: #fff6dc;
  text-shadow:
    0 1px #836c4c,
    1px 0 #a08760,
    -1px 0 #a08760,
    0 -1px #a08760;
  filter: drop-shadow(0 2px 1px #65523845);
}
.play-page .chess-square .piece-b {
  color: #514436;
  filter: drop-shadow(0 2px 1px #65523835);
}
.play-page .chess-square {
  font-size: 30px;
}
.play-page .chess-square.legal:after {
  background: #efd786;
  box-shadow: 0 0 0 2px #fff4cc80;
}
.play-page #chess-resign,
.play-page #four-exit {
  min-height: 44px;
  background: transparent;
  box-shadow: none;
  border-color: #e6ddcf;
  font-size: 13px;
}
.play-page .drawing {
  border: 1px solid #eee2c8;
  box-shadow: 0 5px #e3d3ad;
  border-radius: 24px;
  background: #fff9e9;
  background-image: radial-gradient(#d9c7a080 1px, transparent 1px);
  background-size: 20px 20px;
  margin: 14px 0 24px;
}
@keyframes reward-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .clean-result .reward-stack > div {
    animation: none;
  }
}
/* Small, distinct puzzle surfaces share readable controls. */
.pack-cover {
  width: 160px !important;
  height: 160px !important;
  max-width: 100%;
  filter: drop-shadow(0 8px 4px #8c6e3a18);
}
.pack-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 20px;
  text-align: left;
  font-size: 13px;
  color: #8a7965;
  line-height: 1.4;
}
.pack-topline b {
  font-size: 13px;
  white-space: nowrap;
  color: #79614d;
}
.pack-text {
  font-size: 13px;
  font-weight: 800;
  color: #957ba6;
  background: none;
  border: 0;
  min-height: 44px;
}
.pack-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 23px 0 0;
}
.play-page .pack-actions button {
  flex: 1;
  min-width: 0;
  padding: 12px 9px;
  font-size: 13px;
}
.play-page .pack-note {
  display: block !important;
  font-size: 12px;
  line-height: 1.7;
  color: #958673;
  margin: 22px auto 0;
  max-width: 290px;
}
.cross-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  padding: 8px;
  background: #bfa68b;
  border-radius: 17px;
  box-shadow: 0 5px #9f8265;
  margin: 0 auto 20px;
  max-width: 340px;
}
.cross-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 5px;
  background: #fff9e9;
  color: #5a493c;
  font-size: 28px;
  font-weight: 800;
  border: 1px solid #fffdf7;
  display: grid;
  place-items: center;
  padding: 8px 0 0;
}
.cross-cell small {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #9c8a70;
}
.cross-block {
  background: #876c53;
  border-radius: 4px;
  box-shadow: inset 0 2px 3px #59432b20;
}
.cross-cell.in-word {
  background: #e2d6e9;
  border-color: #f4e8fb;
}
.cross-cell.active {
  background: #ebc779;
  color: #5c4127;
  border-color: #ffe7ac;
  box-shadow: inset 0 0 0 2px #d6a85f;
}
.cross-cell.wrong {
  color: #ba5a54;
  background: #f2d8d1;
}
.cross-clue {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 7px;
  min-height: 82px;
  border-radius: 16px;
  background: #eee4f1;
  margin: 0 0 20px;
  padding: 10px 5px;
}
.cross-clue button {
  background: none;
  border: 0;
  color: #92779f;
  font-size: 28px;
  min-height: 44px;
}
.cross-clue small {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #a18aaa;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.cross-clue b {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  color: #684f77;
}
.cross-keyboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cross-keyboard > div {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.cross-keyboard button {
  min-width: 0;
  flex: 1;
  max-width: 37px;
  height: 44px;
  border-radius: 7px;
  border: 1px solid #fcf8eb;
  background: #eae1d0;
  box-shadow: 0 3px #cdbda3;
  color: #66523e;
  font-weight: 800;
  font-size: 14px;
  padding: 0;
}
.cross-keyboard > div:last-child button:last-child {
  max-width: 50px;
  flex: 1.5;
}
.nonogram-board {
  display: grid;
  grid-template-columns: 36px repeat(5, minmax(0, 1fr));
  gap: 4px;
  background: #ece5d5;
  border: 8px solid #ece5d5;
  padding: 5px;
  border-radius: 18px;
  box-shadow: 0 5px #d0bfa3;
}
.nono-clue {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #74604b;
  line-height: 1.4;
  white-space: nowrap;
}
.col-clue {
  min-height: 53px;
  align-items: flex-end;
  padding-bottom: 6px;
}
.nono-cell {
  aspect-ratio: 1;
  min-height: 0;
  border-radius: 6px;
  background: #fffaf0;
  border: 1px solid #fff;
  box-shadow: 0 2px #d3c5ad;
  color: #a8957c;
  font-size: 24px;
}
.nono-cell.filled {
  background: #83a297;
  border-color: #99b5a8;
  box-shadow: 0 2px #66867a;
}
.lights-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 17px 14px 22px;
  background: #6d7972;
  border: 2px solid #8b988c;
  border-radius: 24px;
  box-shadow: 0 6px #4d5d53;
}
.light-cell {
  aspect-ratio: 1;
  border: 1px solid #7d897f;
  border-radius: 11px;
  background: #5c6b61;
  box-shadow:
    inset 0 3px #4f6057,
    0 2px #89968b;
  padding: 7px;
}
.light-cell span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: #7b8878;
  box-shadow: inset 0 1px #94a18c;
  transition:
    background 0.18s,
    box-shadow 0.18s;
}
.light-cell.on span {
  background: #f2d58c;
  box-shadow:
    0 0 14px #e8ce7c55,
    inset 0 2px #fff0bd;
}
.hanoi-stage {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin: 40px 0 30px;
  padding: 0 0 30px;
}
.hanoi-peg {
  position: relative;
  flex: 1;
  height: 240px;
  border: none;
  background: none;
  padding: 0;
  border-radius: 15px;
}
.peg-post {
  position: absolute;
  width: 9px;
  left: calc(50% - 4px);
  bottom: 23px;
  height: 170px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, #b18f67, #ddc4a0, #b08c66);
}
.peg-base {
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 100%;
  height: 18px;
  border-radius: 8px;
  background: #d8bf97;
  box-shadow: 0 4px #ad8f67;
}
.hanoi-disk {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 25px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  box-shadow:
    0 3px #6b554038,
    inset 0 1px #ffffff70;
  color: #634c37;
  border: 1px solid #fff5dc80;
}
.disk-4 {
  background: #bea6cc;
}
.disk-3 {
  background: #dea48e;
}
.disk-2 {
  background: #ebca82;
}
.disk-1 {
  background: #a0ba96;
}
.hanoi-peg.selected {
  background: #f2ebde;
}
.hanoi-peg.selected .hanoi-disk:last-of-type {
  filter: brightness(1.1);
  outline: 3px solid #bf9ed2;
}
.hanoi-peg > b {
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  color: #a38b70;
  font-size: 12px;
}
.code-history {
  padding: 12px 14px;
  border: 1px solid #e6d9c4;
  border-radius: 20px;
  background: #f3ebdb;
  min-height: 240px;
  max-height: 420px;
  overflow: auto;
}
.code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 53px;
  border-bottom: 1px solid #e5d8c3;
}
.code-row:last-child {
  border: 0;
}
.code-row > small {
  font-size: 11px;
  color: #a99274;
  min-width: 12px;
}
.code-row > div {
  display: flex;
  gap: 9px;
}
.code-peg {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff9e7;
  box-shadow:
    0 3px #9d81634d,
    inset 0 2px #ffffff70;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #ffffffdb;
}
.code-peg.empty {
  background: #d9cbb3;
  box-shadow: inset 0 2px #ad977c40;
  border: 0;
}
.color-0 {
  background: #dbb567;
}
.color-1 {
  background: #ce8c95;
}
.color-2 {
  background: #89a98c;
}
.color-3 {
  background: #8ca8b8;
}
.color-4 {
  background: #a18ab6;
}
.color-5 {
  background: #d8a282;
}
.code-hints {
  max-width: 46px;
  min-width: 40px;
  font-size: 15px;
  letter-spacing: 1px;
  color: #7a6351;
  text-align: center;
  line-height: 1.1;
}
.code-palette {
  display: flex;
  justify-content: center;
  gap: 13px;
  margin-top: 23px;
}
.code-palette .code-peg {
  width: 38px;
  height: 38px;
  font-size: 13px;
}
.ladder-goal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 8px 0 24px;
}
.ladder-goal span {
  font-size: 24px;
  font-weight: 900;
  color: #7d6450;
  letter-spacing: 2px;
}
.ladder-goal span:last-child {
  color: #78906c;
}
.ladder-goal i {
  font-style: normal;
  color: #b2a08a;
}
.ladder-steps {
  max-height: 340px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px 0 18px;
}
.ladder-rung {
  display: flex;
  gap: 7px;
  align-items: center;
}
.ladder-rung small {
  width: 15px;
  font-size: 10px;
  color: #b7a68e;
}
.ladder-rung b {
  display: grid;
  place-items: center;
  width: 45px;
  height: 46px;
  background: #e5ead8;
  color: #6c8057;
  box-shadow: 0 4px #bdcba6;
  border: 1px solid #f7f7e8;
  border-radius: 10px;
  font-size: 23px;
}
.anagram-answer,
.anagram-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 40px 0 28px;
}
.anagram-answer button,
.anagram-tiles button {
  aspect-ratio: 0.85;
  border-radius: 10px;
  font-size: 23px;
  font-weight: 900;
  padding: 0;
  min-width: 0;
  border: 1px solid #fff8e5;
}
.anagram-answer button {
  background: #e8e2d6;
  color: #796147;
  box-shadow: inset 0 2px #d1c4b0;
}
.anagram-tiles button {
  background: #e9c97f;
  color: #725634;
  box-shadow: 0 4px #bc975b;
}
.anagram-tiles button:disabled {
  opacity: 0.22;
  box-shadow: none;
}
.play-page .anagram-clue {
  display: block !important;
  color: #9a8469;
  font-size: 14px;
  min-height: 45px;
  margin: 25px 0;
}
.memory-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 10px 0 20px;
}
.memory-card {
  aspect-ratio: 0.85;
  background: #c4acc9;
  border: 2px solid #ddc9df;
  border-radius: 16px;
  color: #f5eaf2;
  font-size: 30px;
  box-shadow: 0 5px #a48bac;
  transition:
    background 0.2s,
    transform 0.2s;
}
.memory-card.face-up {
  background: #fff2d6;
  border-color: #fffbeb;
  color: #b08a55;
  box-shadow: 0 5px #dcc49b;
}
.memory-card.matched {
  background: #dce6cd;
  color: #8da17b;
  border-color: #ebf1df;
  box-shadow: 0 3px #bbcda7;
}
.play-page .sprout-tree {
  min-height: 160px;
  margin: 20px 0;
  padding: 20px 0 25px;
  background: none;
}
.play-page .sprout-step {
  justify-content: center;
  margin: 10px 0;
  gap: 7px;
}
.play-page .sprout-step b {
  width: 42px;
  height: 46px;
  border-radius: 11px;
  font-size: 24px;
  background: #dfe9cf;
  box-shadow: 0 4px #b6c59d;
  color: #67824e;
  border: 1px solid #f7f8e7;
}
.play-page #sprout-hint,
.play-page #sprout-end {
  font-size: 14px;
  min-width: 110px;
  margin: 8px 4px;
}
.clean-result .medal-place {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.clean-result .medal-place .plinth-mascot {
  order: 0;
  margin-bottom: -9px;
}
.clean-result .medal-place .round-plinth {
  order: 1;
  width: 100%;
  margin-top: 0;
}
.clean-result .medal-place .podium-name {
  order: 2;
  margin-top: 12px;
}
.clean-result .medal-place > small {
  order: 3;
  margin: 3px 0 0;
}
@media (max-width: 370px) {
  .cross-keyboard button {
    font-size: 12px;
    height: 42px;
  }
  .cross-grid {
    max-width: 290px;
  }
  .cross-cell {
    font-size: 24px;
  }
  .code-palette {
    gap: 8px;
  }
  .code-row > div {
    gap: 6px;
  }
  .play-page .sprout-step b {
    width: 34px;
    height: 39px;
    font-size: 20px;
  }
}
.play-page[data-playing="crossword"] .cross-grid {
  max-width: min(320px, 36svh);
}
.play-page[data-playing="crossword"] .pack-topline {
  margin-bottom: 10px;
}
.play-page[data-playing="crossword"] .cross-clue {
  min-height: 73px;
  margin-bottom: 16px;
}
.play-page[data-playing="crossword"] .pack-actions {
  margin-top: 16px;
}
.rival-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: -10px 0 20px;
  color: #a08b72;
  font-size: 11px;
}
.rival-strip > span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rival-strip > span:first-child {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #aa9986;
}
.rival-strip img {
  width: 21px;
  height: 24px;
  object-fit: cover;
}
.rival-strip b {
  color: #8a735b;
  font-size: 11px;
}
.play-page[data-playing="crossword"] .rival-strip {
  display: none;
}
.intro-sheet {
  width: calc(100% - 36px);
  max-width: 410px;
  padding: 30px 25px 25px;
  border-radius: 25px;
  background: #fffaf0;
  border: 2px solid #fffdf8;
  box-shadow:
    0 9px 0 #cdbba35c,
    0 30px 80px #3c2e3440;
  color: #665345;
  max-height: calc(100svh - 44px);
  overflow: auto;
}
.intro-sheet .rules-kicker {
  display: block;
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 900;
  color: #ad9478;
  margin-bottom: 9px;
}
.intro-sheet h2 {
  font-size: 26px;
  letter-spacing: -0.7px;
  color: #5c4539;
  margin: 0 0 23px;
  font-weight: 900;
}
.intro-sheet ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rules;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.intro-sheet li {
  counter-increment: rules;
  position: relative;
  padding-left: 40px;
  font-size: 14px;
  line-height: 1.55;
  color: #8b745f;
}
.intro-sheet li:before {
  content: counter(rules);
  position: absolute;
  left: 0;
  top: 0;
  width: 27px;
  height: 27px;
  border-radius: 10px;
  background: #e9def0;
  color: #8b6b9b;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 2px #cdbbd8;
}
.intro-sheet .close-rules {
  width: 32px;
  height: 32px;
  right: 17px;
  top: 17px;
  background: #eee4d2;
  color: #a0896c;
}
.rules-mode {
  margin: 25px 0 0;
  padding-top: 20px;
  border-top: 1px solid #e9dfd0;
}
.rules-mode > span {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #8b745f;
  margin-bottom: 11px;
}
.rules-mode > div {
  display: flex;
  background: #eee6d7;
  border-radius: 13px;
  padding: 4px;
  gap: 5px;
}
.rules-mode button {
  flex: 1;
  border: 0;
  background: none;
  color: #a28a70;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  min-height: 40px;
  border-radius: 10px;
}
.rules-mode button.selected {
  background: #fffaf0;
  box-shadow: 0 2px 4px #a1886522;
  color: #7f5f91;
}
.rules-mode small {
  display: block;
  font-size: 10px;
  line-height: 1.5;
  color: #a38e78;
  margin-top: 10px;
}
.intro-sheet .rules-play {
  margin-top: 24px;
  min-height: 49px;
  font-family: inherit;
  font-size: 16px;
  border-radius: 15px;
  background: #806295;
  box-shadow: 0 4px #5c466e;
  color: #fff9ef;
  border: 1px solid #a185af;
  font-weight: 800;
}
.clean-result .olympic-podium:has(.place-3) {
  gap: 8px;
}
.clean-result .olympic-podium:has(.place-3) .medal-place {
  width: 97px;
}
.clean-result .simulated-note {
  display: block !important;
  font-size: 10px !important;
  color: #a7947d !important;
  margin: -12px 0 17px !important;
}
.clean-result .reward-stack > div {
  flex: 1;
  min-width: 0;
  padding: 10px 8px;
  gap: 4px;
  justify-content: center;
  white-space: nowrap;
}
.clean-result .reward-stack b {
  font-size: 18px;
}
.clean-result .reward-stack small {
  font-size: 8px;
}
.clean-result .reward-stack > div > span {
  font-size: 14px;
}
.play-page .sprout-step {
  flex-wrap: wrap;
}
.play-page .sprout-step b {
  flex-shrink: 0;
}
.rules-sheet.intro-sheet::backdrop {
  background: #51403a42;
  backdrop-filter: blur(5px);
}
.play-page #sprout-hint,
.play-page #sprout-end {
  border-radius: 15px;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 370px) {
  .play-page .sport-action-row {
    gap: 7px;
  }
  .play-page .sport-action-row .sport-small {
    flex: 1;
    min-width: 0;
    padding: 10px 5px;
    font-size: 10px;
  }
  .play-page .sport-action-row .sport-shoot {
    flex: 1.35;
    min-width: 0;
    padding: 10px 8px;
    font-size: 14px;
  }
  .play-page .match-player {
    min-width: 85px;
    grid-template-columns: 28px auto;
    gap: 3px 5px;
  }
  .play-page .match-score {
    gap: 7px;
  }
  .play-page .match-score strong {
    font-size: 28px;
  }
  .play-page .match-player > b {
    font-size: 13px;
  }
  .play-page .match-player > small {
    font-size: 9px;
  }
}
.feed-item-top {
  gap: 9px;
  align-items: center;
}
.feed-item-top b {
  flex: 1;
  min-width: 0;
  font-size: 20px;
}
.feed-help {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 29px;
  height: 29px;
  border-radius: 11px;
  font-size: 14px;
  color: #9a836b;
}

/* Points leap toward the player, then settle into the real counter. */
.score-burst {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  font-family: "Nunito Sans", sans-serif;
  filter: drop-shadow(0 8px 0 #563e6733);
}
.score-burst strong {
  font-size: clamp(76px, 20vw, 112px);
  font-weight: 1000;
  line-height: 1.04;
  color: #ffdc78;
  -webkit-text-stroke: 3px #fff6db;
  paint-order: stroke fill;
  text-shadow:
    0 5px 0 #b7794c,
    3px 8px 0 #684763;
  font-style: italic;
  letter-spacing: -5px;
}
.score-burst > span {
  font-size: 20px;
  font-weight: 1000;
  color: #fff5d9;
  text-shadow:
    0 2px 0 #6a4c62,
    1px 0 #6a4c62,
    -1px 0 #6a4c62;
  letter-spacing: 1px;
}
.score-burst > b {
  margin-top: 8px;
  padding: 5px 13px;
  background: #785889;
  border: 2px solid #fff1d7;
  border-radius: 20px;
  color: #fff6df;
  font-size: 14px;
  box-shadow: 0 3px 0 #553c64;
}
.best-flight {
  position: fixed;
  z-index: 10001;
  pointer-events: none;
  padding: 9px 16px;
  background: #fff2cc;
  color: #805328;
  border: 2px solid #fff9eb;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0.6px;
  box-shadow: 0 4px 0 #b8946040;
  white-space: nowrap;
}
.score-spark {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  width: 10px;
  height: 14px;
  border-radius: 3px;
}
.basket-actions {
  display: flex;
  justify-content: center;
  margin: 12px 0 0;
}
.basket-actions button {
  width: 100%;
  min-height: 48px;
  background: #cc8057;
  color: #fff8ec;
  box-shadow: 0 4px 0 #9f5b3c;
  border-color: #e7a77f;
}
.play-page[data-playing="basket"] .sport-surface {
  max-height: 57svh;
  width: auto;
  max-width: 100%;
  margin: auto;
  border: 1px solid #b5ac952b;
}
.play-page[data-playing="basket"] .sport-table-wrap {
  display: flex;
  justify-content: center;
}
.sport-control-line {
  flex-wrap: wrap;
  gap: 8px;
}
.sport-control-line #live-best {
  font-size: 12px;
  color: #8c7968;
}

/* A compact goal, with the level map one tap away. */
.level-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
  color: #8a7968;
  font-size: 12px;
  font-weight: 700;
}
.play-page .level-chip {
  min-height: 36px;
  padding: 6px 11px;
  border: 1px solid #e4dac9;
  border-radius: 12px;
  background: #f5ecd9;
  box-shadow: 0 2px 0 #d9ccb7;
  color: #746044;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.level-chip span {
  padding-left: 6px;
}
.level-list {
  display: grid;
  gap: 9px;
}
.level-list button {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 12px;
  background: #f5eddf;
  border: 1px solid #e6dac7;
  padding: 12px;
  border-radius: 15px;
  color: #665342;
  min-height: 67px;
}
.level-list button.current {
  background: #e8dfef;
  border-color: #c7b4d6;
}
.level-list button:disabled {
  opacity: 0.5;
}
.level-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fffaf0;
  font-weight: 900;
}
.level-list b {
  display: block;
  font-size: 16px;
}
.level-list small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
}
.level-list em {
  margin-left: auto;
  font-size: 12px;
  font-style: normal;
  color: #967941;
}
.level-sheet > p {
  font-size: 12px;
  line-height: 1.5;
  color: #998774;
}
.level-result {
  text-align: center;
  display: grid;
  gap: 5px;
  margin: 10px 0 18px;
}
.level-stars {
  font-size: 27px;
  letter-spacing: 5px;
  color: #d4a741;
  text-shadow: 0 2px #f5df9d;
}
.level-stars i {
  font-style: normal;
  color: #cfc4af;
}
.level-result b {
  font-size: 17px;
  color: #725b82;
}
.level-result small {
  font-size: 12px;
  color: #9b8a76;
}
.geo-explanation {
  padding: 16px 0 0;
}
.geo-explanation > b {
  font-size: 16px;
}
.geo-explanation > p {
  margin: 7px 0 14px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #8c7d6c;
}
.photo-round {
  overflow: hidden;
}
.photo-round img {
  transition: transform 0.3s ease;
}
.play-page[data-playing="geo"] .photo-round {
  margin-top: 8px;
}
.play-page[data-playing="geo"] .answer-choice {
  min-height: 55px;
}
.play-page[data-playing="geo"] .photo-round img {
  max-height: 30svh;
  object-fit: cover;
}
@media (max-width: 360px) {
  .level-band {
    font-size: 11px;
  }
  .play-page .level-chip {
    font-size: 11px;
    padding: 5px 8px;
  }
  .level-result {
    margin: 8px 0 12px;
  }
}
.play-page[data-playing="geo"] .photo-round {
  height: clamp(190px, 28svh, 270px);
  aspect-ratio: auto;
  min-height: 0;
}
.play-page[data-playing="geo"] .photo-round img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
.answer-choice[hidden] {
  display: none !important;
}
.play-page[data-playing="basket"] .sport-surface {
  height: min(47svh, 420px);
}
.play-page .level-chip{min-height:44px}

/* Keep round controls outside game boards that redraw between questions. */
.round-context { margin:20px auto 0; text-align:center; }
.round-context:empty {display:none;}
.round-context .level-band {margin-bottom:0;}
.play-page .round-context + .game-content {margin-top:20px;}
@media (max-width:480px) {
  .anagram-tiles:has(button:nth-child(7)) {grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:9px;}
  .anagram-tiles:has(button:nth-child(7)) button {aspect-ratio:1.45;min-height:48px;}
}
/* Reserve space for the feed's invite footer without hiding game controls. */
.embedded .round-context { margin-top: 0; }
.embedded .play-page .round-context + .game-content { margin-top: 10px; }
.embedded .play-page .word-scorebar { margin-bottom: 10px; }
.embedded .play-page .word-input { margin-top: 10px; min-height: 40px; padding: 7px; }
.embedded .play-page .found-words:empty { display: none !important; }
.embedded .play-page .word-tools { margin-top: 8px; }
.embedded .play-page .word-tools .outline { min-height: 44px; height: 44px; }