.demo-site-header .stat-display {
  cursor: default;
}

.demo-leaderboard-dialog {
  overflow: hidden;
}

.demo-leaderboard-dialog .demo-leaderboard-intro {
  margin-bottom: 1rem;
}

.demo-leaderboard-overview {
  margin-bottom: 0.45rem;
}

.demo-puzzle-filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.demo-puzzle-filter-row > span {
  color: rgb(168 178 199 / 48%);
  font: 700 0.56rem/1 var(--font-display);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-puzzle-filters {
  display: flex;
  min-width: 0;
  gap: 0.35rem;
}

.demo-puzzle-filters button {
  min-height: 1.75rem;
  padding: 0.35rem 0.62rem;
  border: 1px solid rgb(156 181 223 / 18%);
  border-radius: 999px;
  background: rgb(5 9 17 / 40%);
  color: rgb(199 207 221 / 68%);
  cursor: pointer;
  font: 700 0.62rem/1 var(--font-display);
  letter-spacing: 0.045em;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
  white-space: nowrap;
}

.demo-puzzle-filters button[aria-pressed="true"] {
  border-color: rgb(103 232 255 / 48%);
  background: rgb(103 232 255 / 11%);
  color: var(--aether);
}

.demo-puzzle-filters button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.demo-result-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.3rem;
}

.demo-puzzle-tag {
  color: rgb(103 232 255 / 72%);
  font: 700 0.54rem/1 var(--font-display);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.demo-result-meta .leaderboard-result {
  width: auto;
}

.demo-today-list > [hidden] {
  display: none;
}

.demo-leaderboard-player {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.6rem;
}

.demo-leaderboard-player .leaderboard-player {
  min-width: 0;
}

.demo-leaderboard-dialog .leaderboard-all-time-tools:empty {
  min-height: 0;
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  .demo-puzzle-filters button:hover {
    border-color: rgb(103 232 255 / 40%);
    color: var(--aether);
  }
}

@media (max-width: 35rem) {
  .demo-leaderboard-dialog h2 {
    font-size: 2rem;
  }

  .demo-leaderboard-dialog .demo-leaderboard-intro {
    margin-bottom: 0.7rem;
    padding-right: 1.6rem;
    font-size: 0.84rem;
  }

  .demo-leaderboard-player {
    gap: 0.45rem;
  }

  .demo-leaderboard-dialog .leaderboard-entry {
    min-height: 3.8rem;
  }

  .demo-result-meta {
    gap: 0.22rem;
  }

  .demo-puzzle-tag {
    font-size: 0.5rem;
  }

  .demo-result-meta .leaderboard-result {
    font-size: 0.56rem;
  }
}

.community-stats-demo {
  position: relative;
  display: grid;
  width: min(100% - 2rem, 70rem);
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 1.15rem;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.75rem 0 0.25rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.community-stats-demo::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(103 232 255 / 26%) 18%, rgb(158 119 255 / 20%) 82%, transparent);
  pointer-events: none;
  content: "";
}

.community-overview {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.community-overview::after {
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 50%;
  width: 1px;
  background: rgb(156 181 223 / 10%);
  pointer-events: none;
  content: "";
}

.community-stats-demo .community-stat {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.16rem;
  min-height: 3.25rem;
  padding: 0.48rem 0.55rem;
  border: 0;
}

.community-stats-demo .community-stat strong {
  color: rgb(246 247 251 / 88%);
  font-size: 1.3rem;
  line-height: 1;
}

.community-stats-demo .community-stat span {
  max-width: 11rem;
  color: rgb(168 178 199 / 64%);
  font-size: 0.62rem;
  line-height: 1.18;
}

.community-yesterday {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 0 0 1rem;
  border-left: 1px solid rgb(156 181 223 / 10%);
}

.community-result-grid {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
}

.community-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  align-items: center;
  gap: 0.68rem;
  min-height: 3rem;
  padding: 0.5rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.community-result[hidden] {
  display: none;
}

.community-result.is-official {
  background: transparent;
  box-shadow: none;
}

.community-result-title {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.18rem 0.24rem;
}

.community-result-title em {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(103 232 255 / 70%);
  font: 700 0.52rem/1 var(--font-display);
  font-style: normal;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.community-result-title em::before {
  content: none;
}

.community-result-title em[hidden] {
  display: none;
}

.community-result-rate {
  display: grid;
  min-width: 3.4rem;
  justify-items: center;
  padding-left: 0.25rem;
  line-height: 1;
}

.community-result-rate strong {
  color: rgb(103 232 255 / 76%);
  font: 800 1.08rem/1 var(--font-display);
  letter-spacing: 0.02em;
}

.community-result-rate span,
.community-result-copy span {
  color: rgb(168 178 199 / 62%);
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.community-result-copy {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.community-result-copy strong {
  overflow: hidden;
  color: rgb(246 247 251 / 84%);
  font: 700 0.76rem/1.15 var(--font-display);
  letter-spacing: 0.025em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 60rem) {
  .community-stats-demo {
    width: min(100% - 2rem, 74rem);
    grid-template-columns: 1fr;
    gap: 0.4rem;
    margin-top: 0;
    padding: 0.5rem 0 0.25rem;
  }

  .community-yesterday {
    padding: 0.5rem 0 0;
    border-top: 1px solid rgb(156 181 223 / 10%);
    border-left: 0;
  }

  .community-stats-demo .community-stat {
    min-height: 3rem;
    padding: 0.38rem 0.4rem;
    text-align: center;
  }
}

@media (max-width: 30rem) {
  .community-result-grid {
    grid-template-columns: 1fr;
  }

  .community-result {
    min-height: 3rem;
  }

  .community-result-copy strong {
    white-space: normal;
  }
}

.puzzle-hub-panel {
  overflow: hidden;
  padding: 0;
}

.puzzle-hub-hero {
  padding: clamp(0.9rem, 2vw, 1.3rem) clamp(1rem, 2.2vw, 1.4rem);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle at 86% 14%, rgb(103 232 255 / 12%), transparent 32%),
    linear-gradient(135deg, rgb(19 30 48 / 96%), rgb(10 13 23 / 96%));
}

.puzzle-hub-hero .screen-heading {
  margin: 0;
}

.screen-heading .puzzle-mode-note {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.word-category-hint {
  width: 100%;
  flex: 0 0 100%;
  margin: 1.15rem 0 0;
  color: var(--aether);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
}

.puzzle-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: clamp(0.65rem, 1.6vw, 1rem);
}

.puzzle-choice-card {
  display: grid;
  grid-template-rows: 1fr auto auto;
  min-height: 12rem;
  min-width: 0;
  overflow: hidden;
  position: relative;
  border: 1px solid rgb(103 232 255 / 28%);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 92% 22%, rgb(103 232 255 / 13%), transparent 35%),
    linear-gradient(155deg, rgb(25 27 40 / 95%), rgb(10 14 25 / 96%));
  box-shadow: inset 0 1px rgb(255 255 255 / 4%), 0 1rem 2.5rem rgb(0 0 0 / 20%);
}

.puzzle-choice-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.22rem;
  background: #67e8ff;
  content: "";
}

.puzzle-choice-card.is-official {
  border-color: rgb(103 232 255 / 65%);
  box-shadow: 0 0 0 1px rgb(103 232 255 / 15%), 0 1rem 3rem rgb(25 160 204 / 13%);
}

.puzzle-choice-copy {
  position: relative;
  z-index: 1;
  padding: 1.2rem 10.25rem 0.9rem 1.35rem;
}

.puzzle-choice-art {
  position: absolute;
  z-index: 0;
  top: 0.85rem;
  right: 0.75rem;
  width: 7.5rem;
  height: 7.5rem;
  object-fit: contain;
  opacity: 0.12;
  pointer-events: none;
}

.puzzle-choice-copy h3 {
  margin: 0.32rem 0 0.6rem;
  font: 800 clamp(1.4rem, 3.6vw, 1.8rem)/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.puzzle-choice-card .kicker {
  color: #67e8ff;
}

.puzzle-choice-copy > p {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.5;
}

.puzzle-choice-status-row {
  display: flex;
  position: relative;
  z-index: 1;
  margin: 0 1rem 0.75rem 1.35rem;
  padding-top: 0.55rem;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--border);
}

.puzzle-choice-status {
  margin: 0;
  color: #67e8ff !important;
  font-size: 0.82rem;
  font-weight: 700;
}

.puzzle-choice-status-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}

.puzzle-choice-status.is-complete {
  color: #77808f !important;
}

.puzzle-result-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 600 0.78rem/1.2 "Barlow", ui-sans-serif, system-ui, sans-serif;
  text-decoration: underline;
  text-underline-offset: 0.18rem;
  white-space: nowrap;
}

.puzzle-result-link:hover,
.puzzle-result-link:focus-visible {
  color: var(--muted-strong);
}

.puzzle-choice-actions {
  position: relative;
  z-index: 1;
  padding: 0 1rem 1rem 1.35rem;
}

.puzzle-choice-actions .button {
  width: 100%;
  border-color: #67e8ff;
  background: linear-gradient(135deg, #67e8ff, #258fc0);
  color: #041117;
  box-shadow: 0 0.45rem 1.1rem rgb(35 175 220 / 20%);
}

.puzzle-choice-actions .button.primary:hover:not(:disabled) {
  border-color: #a6f2ff;
  background: linear-gradient(135deg, #8defff, #36a8d8);
  box-shadow: 0 0 0 1px rgb(141 239 255 / 32%), 0 0.9rem 2.5rem rgb(37 143 192 / 25%);
}

.button.primary {
  border-color: #67e8ff;
  background: linear-gradient(135deg, #67e8ff, #258fc0);
  color: #041117;
  box-shadow: 0 0.55rem 1.4rem rgb(35 175 220 / 20%);
}

@media (hover: hover) and (pointer: fine) {
  .button.primary:hover:not(:disabled) {
    border-color: #a6f2ff;
    background: linear-gradient(135deg, #8defff, #36a8d8);
    box-shadow: 0 0 0 1px rgb(141 239 255 / 32%), 0 0.9rem 2.5rem rgb(37 143 192 / 25%);
  }
}

.selection-progress {
  border-color: rgb(103 232 255 / 28%);
  background: rgb(103 232 255 / 8%);
  color: var(--aether);
}

.answer-selection-panel .card-grid {
  gap: 0.6rem;
}

.answer-selection-panel .card-button {
  display: grid;
  min-height: 5.75rem;
  padding: 0.7rem 0.85rem 0.72rem 0.9rem;
  align-content: center;
}

.answer-selection-panel .card-button::after {
  top: 0.65rem;
  right: 0.7rem;
  width: 1.55rem;
  height: 1.55rem;
  transform: none;
}

.answer-selection-panel .game-label {
  padding-right: 2.15rem;
  font-size: 0.72rem;
}

.answer-selection-panel .card-title {
  margin-top: 0.14rem;
  font-size: clamp(1.35rem, 3.7vw, 1.62rem);
}

.quest-intel-status {
  display: grid;
  margin: 0.8rem 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.quest-intel-status.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.quest-intel-status > div {
  display: grid;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: rgb(13 17 29 / 72%);
  text-align: center;
}

.quest-intel-status span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.quest-intel-status strong {
  margin-top: 0.1rem;
  color: #8793a5;
  font: 900 1.4rem/1 var(--font-display);
}

.quest-intel-status .quest-score-value {
  color: var(--essence);
}

.quest-clue-count {
  display: inline-block;
}

.clue-card::before,
.clue-card:nth-child(2)::before,
.clue-card:nth-child(3)::before {
  background: linear-gradient(90deg, #67e8ff 0%, #4fabe5 55%, #8b78d8 100%);
  box-shadow: 0 0 0.8rem rgb(103 232 255 / 28%);
}

.quest-clue-panel .clue-card.is-newly-revealed {
  isolation: isolate;
}

.quest-clue-panel .clue-card.is-newly-revealed::before {
  z-index: 2;
}

.quest-clue-panel .clue-card.is-newly-revealed::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(110deg, transparent 12%, rgb(103 232 255 / 18%) 47%, transparent 72%);
  content: "";
  transform: translateX(-115%);
}

.quest-clue-panel .clue-card.is-newly-revealed > * {
  position: relative;
  z-index: 1;
}

.quest-reveal-button,
.quest-select-map {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.quest-reveal-button.is-activating {
  pointer-events: none;
}

.quest-reveal-button::after,
.quest-select-map::after {
  position: absolute;
  z-index: 1;
  top: -35%;
  bottom: -35%;
  left: -45%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 40%), transparent);
  content: "";
  pointer-events: none;
  transform: translateX(-180%) skewX(-16deg);
}

.answer-selection-panel .card-button[aria-pressed="true"] {
  border-color: rgb(103 232 255 / 78%);
  background: linear-gradient(145deg, rgb(27 65 85 / 96%), rgb(30 27 62 / 96%));
  box-shadow: inset 0 0 0 1px rgb(103 232 255 / 18%), 0 0 1.4rem rgb(103 232 255 / 15%);
  transform: translateY(-1px);
}

.answer-selection-panel .card-button[aria-pressed="true"]::after {
  border-color: var(--aether);
  background: var(--aether);
  color: #041117;
  content: "\2713";
  box-shadow: 0 0 1rem rgb(103 232 255 / 34%);
}

.map-identification-banner::before {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgb(103 232 255 / 15%), transparent);
  content: "";
  transform: skewX(-12deg);
}

.identified-map-name,
.result-answer-name {
  color: #fff;
  font-weight: 800;
  text-shadow: 0 0 0.8rem rgb(103 232 255 / 35%);
}

.bonus-order-status {
  display: flex;
  max-width: 26rem;
  align-items: center;
  gap: 0.75rem;
}

.easter-bonus-panel .selection-progress {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #8d9bb0;
  box-shadow: none;
}

.order-chain {
  display: grid;
  width: 5.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
}

.order-chain i {
  height: 0.28rem;
  border-radius: 999px;
  background: rgb(119 128 143 / 24%);
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.order-chain i.is-active {
  background: var(--aether);
  box-shadow: 0 0 0.55rem rgb(103 232 255 / 34%);
  transform: scaleY(1.2);
}

.selection-progress.is-ready {
  color: #baf5ff;
}

.selection-progress.is-correct {
  color: #c9f7ff;
}

.selection-progress.is-incorrect {
  color: #ff98a5;
}

.order-choice-list.is-order-correct .order-choice[aria-pressed="true"] {
  border-color: rgb(103 232 255 / 90%);
  box-shadow: inset 0 0 0 1px rgb(103 232 255 / 24%), 0 0 1.8rem rgb(103 232 255 / 19%);
}

.order-choice-list.is-order-incorrect .order-choice[aria-pressed="true"] {
  border-color: rgb(255 101 119 / 72%);
  background: linear-gradient(145deg, rgb(72 31 44 / 96%), rgb(38 22 39 / 96%));
  box-shadow: inset 0 0 0 1px rgb(255 101 119 / 15%), 0 0 1.2rem rgb(255 101 119 / 12%);
}

.order-choice-list.is-order-incorrect .order-choice[aria-pressed="true"] .order-rank {
  background: linear-gradient(145deg, #ff7c8d, #b93f59);
  box-shadow: 0 0 1rem rgb(255 101 119 / 30%);
}

.result-score-total {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-top: 0.55rem;
  align-items: baseline;
  gap: 0.45rem;
}

.result-score-total span {
  color: rgb(237 241 247 / 70%);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.result-score-total strong {
  color: #fff;
  font: 900 1.45rem/1 var(--font-display);
  text-shadow: 0 0 0.9rem rgb(103 232 255 / 52%);
}

.steps-order.is-correction li {
  border-color: rgb(184 194 211 / 34%);
}

.word-puzzle-panel {
  overflow: hidden;
}

.word-scoreboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.8rem auto 0;
}

.word-scoreboard.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.word-scoreboard > div {
  display: grid;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: rgb(13 17 29 / 72%);
  text-align: center;
}

.word-scoreboard span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.word-scoreboard strong {
  margin-top: 0.1rem;
  color: var(--essence);
  font: 900 1.4rem/1 var(--font-display);
}

.word-scoreboard .word-mistakes strong {
  color: #77808f;
}

.word-mistakes {
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.word-danger-meter {
  display: grid;
  width: min(100%, 7rem);
  margin: 0.35rem auto 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.28rem;
}

.word-danger-meter i {
  height: 0.2rem;
  border-radius: 999px;
  background: rgb(119 128 143 / 22%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 3%);
}

.word-danger-meter i.is-active {
  background: #ff6577;
  box-shadow: 0 0 0.55rem rgb(255 101 119 / 34%);
}

.word-mistakes.danger-level-2 {
  border-color: rgb(255 101 119 / 22%);
}

.word-mistakes.danger-level-3 {
  border-color: rgb(255 101 119 / 34%);
  background: rgb(52 21 31 / 36%);
}

.word-mistakes.danger-level-4,
.word-mistakes.danger-level-5 {
  border-color: rgb(255 101 119 / 52%);
  background: linear-gradient(180deg, rgb(63 23 34 / 55%), rgb(24 16 27 / 78%));
  box-shadow: inset 0 0 1.2rem rgb(255 101 119 / 7%), 0 0 1rem rgb(255 101 119 / 8%);
}

.word-result-category {
  margin: 0 0 0.35rem;
  color: #67e8ff;
  font-size: 0.9rem;
  font-weight: 800;
}

.word-result-description {
  max-width: 44rem;
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgb(156 181 223 / 16%);
  color: var(--muted-strong);
  font-size: 0.96rem;
  line-height: 1.55;
}

.word-answer {
  position: relative;
  display: grid;
  min-height: 9rem;
  margin-top: clamp(1rem, 3vw, 1.4rem);
  padding: clamp(1.2rem, 4vw, 2.25rem) 0.5rem;
  align-content: center;
  row-gap: 1rem;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}

.word-answer-display {
  position: relative;
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  align-items: end;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 1rem;
  isolation: isolate;
  transform-origin: center;
}

.word-answer.has-long-word .word-letter {
  width: clamp(1.1rem, 4.3vw, 2.05rem);
  font-size: clamp(1.55rem, 5.2vw, 2.45rem);
}

.word-token {
  display: inline-flex;
  gap: clamp(0.16rem, 0.7vw, 0.35rem);
  align-items: end;
  white-space: nowrap;
}

.word-space {
  width: clamp(0.7rem, 2.2vw, 1.35rem);
}

.word-letter {
  display: inline-grid;
  width: clamp(1.24rem, 4.9vw, 2.35rem);
  min-height: clamp(2.4rem, 8vw, 3.55rem);
  place-items: center;
  border-bottom: 0.16rem solid rgb(246 247 251 / 72%);
  color: transparent;
  font: 900 clamp(1.8rem, 6vw, 2.8rem)/1 var(--font-display);
}

.word-letter.is-visible {
  color: var(--text);
  text-shadow: 0 0 0.8rem rgb(103 232 255 / 25%);
}

.word-letter.is-newly-revealed {
  color: var(--text);
}

.word-answer.is-final-reveal {
  border-bottom-color: transparent;
}

.word-answer.is-final-reveal .word-letter {
  width: auto;
  min-width: 0.62em;
  border-bottom-color: transparent;
}

.word-answer.is-final-reveal .word-answer-display {
  justify-self: center;
}

.word-answer.is-final-reveal .word-token {
  gap: clamp(0.08rem, 0.35vw, 0.18rem);
}

.word-answer.is-final-reveal .word-answer-display::before {
  position: absolute;
  z-index: 0;
  inset: -1.5rem -2.25rem;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgb(103 232 255 / 14%) 0%,
    rgb(103 232 255 / 7%) 38%,
    transparent 74%
  );
  content: "";
  opacity: 0;
  pointer-events: none;
}

.word-answer-display > * {
  position: relative;
  z-index: 1;
}

.word-answer.is-correct-feedback .word-answer-display::after,
.word-answer.is-mistake-feedback .word-answer-display::after {
  position: absolute;
  z-index: 0;
  inset: -1.2rem -1.8rem;
  border-radius: 50%;
  content: "";
  opacity: 0;
  pointer-events: none;
}

.word-answer.is-correct-feedback .word-answer-display::after {
  background: radial-gradient(ellipse at center, rgb(103 232 255 / 13%), transparent 70%);
}

.word-answer.is-mistake-feedback .word-answer-display::after {
  background: radial-gradient(ellipse at center, rgb(255 101 119 / 11%), transparent 70%);
}

.word-literal {
  display: inline-grid;
  min-width: 0.55rem;
  min-height: clamp(2rem, 7vw, 3rem);
  place-items: center;
  color: var(--muted-strong);
  font: 800 clamp(1.25rem, 4.5vw, 2rem)/1 var(--font-display);
}

.word-game-status {
  margin: 0.8rem 0 0;
  color: var(--muted-strong);
  font-size: clamp(0.86rem, 2.2vw, 0.95rem);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.word-game-status {
  min-height: 1.4em;
}

.word-game-status.is-streak {
  color: var(--essence);
  font-weight: 800;
}

.word-game-status.is-complete {
  color: var(--aether);
  font-weight: 800;
  letter-spacing: 0.025em;
}

/* Keep the word puzzle's proportions consistent on tablets and desktops. */
@media (min-width: 35.0625rem) {
  .word-puzzle-panel {
    padding-block: 1.35rem;
  }

  .word-puzzle-panel .screen-heading {
    margin-bottom: 0.7rem;
  }

  .word-puzzle-panel .screen-heading .kicker {
    margin-bottom: 0.35rem;
  }

  .word-puzzle-panel .screen-heading h2 {
    margin-bottom: 0.35rem;
  }

  .word-puzzle-panel .screen-heading > p:last-child {
    line-height: 1.4;
  }

  .word-puzzle-panel .word-scoreboard {
    width: 100%;
    margin-top: 0.5rem;
  }

  .word-puzzle-panel .word-danger-meter {
    margin-top: 0.24rem;
  }

  .word-puzzle-panel .word-answer {
    min-height: 6.8rem;
    margin-top: 0.55rem;
    padding: 0.65rem 0.5rem 0.75rem;
    row-gap: 0.55rem;
  }

  .word-puzzle-panel .word-answer-display {
    row-gap: 0.65rem;
  }

  .word-puzzle-panel .word-category-hint {
    margin-top: 0.7rem;
  }

  .word-puzzle-panel .word-keyboard {
    gap: 0.32rem;
    margin-top: 0.75rem;
  }

  .word-puzzle-panel .word-key {
    min-height: 3rem;
  }

  .word-puzzle-panel .word-game-status {
    margin-top: 0.5rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .quest-score-value.is-changing {
    animation: quest-score-change 460ms ease-out both;
  }

  .quest-clue-count.is-changing {
    animation: quest-count-change 440ms cubic-bezier(0.2, 0.9, 0.24, 1.2) both;
  }

  .quest-clue-panel .clue-card.is-newly-revealed {
    animation: quest-clue-reveal 560ms cubic-bezier(0.2, 0.85, 0.24, 1.08) both;
  }

  .quest-clue-panel .clue-card.is-newly-revealed::before {
    animation: quest-clue-edge-charge 760ms ease-out both;
  }

  .quest-clue-panel .clue-card.is-newly-revealed::after {
    animation: quest-clue-scan 720ms 80ms ease-out both;
  }

  .quest-clue-panel .clue-card.is-newly-revealed .clue-number {
    animation: quest-clue-label 460ms 70ms cubic-bezier(0.2, 0.9, 0.24, 1.2) both;
  }

  .quest-clue-panel .clue-card.is-newly-revealed .clue-text {
    animation: quest-clue-text 620ms 90ms ease-out both;
  }

  .quest-reveal-button.is-activating {
    animation: quest-control-press 220ms ease-out both;
  }

  .quest-reveal-button.is-activating::after {
    animation: quest-control-scan 420ms ease-out both;
  }

  .quest-select-map.is-ready-cue {
    animation: quest-ready-cue 520ms 220ms ease-out both;
  }

  .quest-select-map.is-ready-cue::after {
    animation: quest-control-scan 650ms 240ms ease-out both;
  }

  .answer-selection-panel .card-grid.is-entering > li {
    animation: quest-card-arrival 420ms cubic-bezier(0.2, 0.85, 0.24, 1.05) both;
    animation-delay: calc(var(--card-index, 0) * 45ms);
  }

  .answer-selection-panel .card-button.is-newly-selected {
    animation: quest-map-lock 380ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
  }

  .answer-selection-panel .card-button.is-newly-selected::after {
    animation: quest-map-check 420ms 50ms cubic-bezier(0.2, 0.9, 0.25, 1.25) both;
  }

  .answer-selection-panel .card-button.is-newly-selected .card-title {
    animation: quest-map-title-lock 400ms ease-out both;
  }

  .map-identification-banner::before {
    animation: quest-map-scan 760ms 80ms ease-out both;
  }

  .map-identification-banner .identified-map-name {
    animation: quest-map-name 620ms 120ms cubic-bezier(0.2, 0.85, 0.24, 1.1) both;
  }

  .order-choice.is-newly-ranked .order-rank {
    animation: quest-rank-lock 340ms cubic-bezier(0.2, 0.9, 0.24, 1.25) both;
  }

  .order-chain.is-ready {
    animation: quest-order-ready 760ms ease-in-out 2 alternate;
  }

  .order-choice-list.is-order-correct .order-choice[aria-pressed="true"] {
    animation: quest-order-confirm 520ms ease-out both;
  }

  .order-choice-list.is-order-incorrect .order-choice[aria-pressed="true"] {
    animation: quest-order-reject 420ms ease-out both;
  }

  .double-points-result h2 {
    animation: quest-double-points 720ms cubic-bezier(0.2, 0.85, 0.24, 1.12) both;
  }

  .result-score-total {
    animation: quest-score-total 520ms 220ms ease-out both;
  }

  .steps-order.is-confirmed li,
  .steps-order.is-correction li {
    animation: quest-step-arrival 440ms ease-out both;
    animation-delay: calc(180ms + (var(--step-index, 0) * 150ms));
  }

  .steps-order.is-confirmed .step-tick {
    animation: quest-step-tick 360ms cubic-bezier(0.2, 0.9, 0.25, 1.25) both;
    animation-delay: calc(410ms + (var(--step-index, 0) * 150ms));
  }

  .steps-order.is-correction .order-rank {
    animation: quest-correction-rank 520ms ease-out both;
    animation-delay: calc(260ms + (var(--step-index, 0) * 150ms));
  }

  .word-score-value.is-changing {
    animation: word-score-change 440ms ease-out both;
  }

  .word-danger-meter i.is-new {
    animation: word-danger-step 420ms ease-out both;
  }

  .word-mistakes.danger-level-4,
  .word-mistakes.danger-level-5 {
    animation: word-danger-warning 850ms ease-in-out infinite alternate;
  }

  .word-letter.is-newly-revealed {
    animation: word-letter-reveal 420ms cubic-bezier(0.2, 0.9, 0.24, 1.25) both;
    animation-delay: calc(var(--reveal-index, 0) * 90ms);
  }

  .word-answer.is-correct-feedback .word-answer-display::after {
    animation: word-answer-correct-pulse 640ms ease-out both;
  }

  .word-answer.is-mistake-feedback .word-answer-display {
    animation: word-answer-miss 360ms ease-out both;
  }

  .word-answer.is-mistake-feedback .word-answer-display::after {
    animation: word-answer-miss-pulse 620ms ease-out both;
  }

  .word-key.is-newly-correct {
    animation: word-key-correct 480ms cubic-bezier(0.2, 0.9, 0.24, 1.2) both;
  }

  .word-key.is-newly-incorrect {
    animation: word-key-incorrect 420ms ease-out both;
  }

  .word-key:not(:disabled):active {
    transform: translateY(0.16rem) scale(0.97);
    box-shadow: 0 0.04rem 0 #080b12;
  }

  .word-answer.is-final-reveal .word-answer-display {
    animation: word-final-impact 900ms 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .word-answer.is-final-reveal .word-answer-display::before {
    animation: word-final-glow 1.35s 180ms ease-out both;
  }

  .word-answer.is-final-reveal .word-letter {
    animation: word-letter-victory-bounce 520ms calc(240ms + (var(--letter-index, 0) * 55ms)) cubic-bezier(0.2, 0.85, 0.24, 1.2) both;
  }

  .word-token.is-completing {
    animation: word-token-complete 520ms cubic-bezier(0.2, 0.85, 0.25, 1.2) both;
    animation-delay: calc(160ms + (var(--word-index, 0) * 180ms));
  }

  .word-game-status.is-streak {
    animation: word-streak-arrival 360ms ease-out both;
  }
}

@keyframes quest-score-change {
  0% {
    transform: translateY(0) scale(1);
    color: var(--essence);
    text-shadow: none;
  }

  45% {
    transform: translateY(0.14rem) scale(1.16);
    color: #ff6577;
    text-shadow: 0 0 1rem rgb(255 101 119 / 62%);
  }

  100% {
    transform: translateY(0) scale(1);
    color: var(--essence);
    text-shadow: none;
  }
}

@keyframes quest-count-change {
  0% {
    transform: scale(0.82);
    color: var(--aether);
    text-shadow: 0 0 1rem rgb(103 232 255 / 72%);
  }

  65% {
    transform: scale(1.14);
    color: #d9fbff;
  }

  100% {
    transform: scale(1);
    color: #8793a5;
    text-shadow: none;
  }
}

@keyframes quest-clue-reveal {
  0% {
    opacity: 0;
    transform: translateY(0.55rem) scale(0.985);
    filter: brightness(1.55);
  }

  65% {
    opacity: 1;
    transform: translateY(-0.05rem) scale(1.008);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

@keyframes quest-clue-scan {
  from { transform: translateX(-115%); }
  to { transform: translateX(520%); }
}

@keyframes quest-clue-edge-charge {
  0% {
    opacity: 0.25;
    transform: scaleX(0.12);
    transform-origin: left;
    box-shadow: none;
  }

  58% {
    opacity: 1;
    transform: scaleX(1);
    box-shadow: 0 0 1.3rem rgb(103 232 255 / 58%);
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
    box-shadow: 0 0 0.8rem rgb(103 232 255 / 28%);
  }
}

@keyframes quest-clue-label {
  0% {
    opacity: 0.25;
    transform: scale(0.78);
    filter: brightness(1.8);
  }

  70% {
    opacity: 1;
    transform: scale(1.08);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes quest-clue-text {
  0% {
    opacity: 0;
    transform: translateY(0.3rem);
    filter: blur(0.18rem);
  }

  55% {
    opacity: 1;
    transform: translateY(-0.03rem);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes quest-control-press {
  0% { transform: translateY(0) scale(1); }
  55% { transform: translateY(1px) scale(0.985); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes quest-control-scan {
  from { transform: translateX(-180%) skewX(-16deg); }
  to { transform: translateX(620%) skewX(-16deg); }
}

@keyframes quest-ready-cue {
  0%, 100% {
    box-shadow: 0 0.8rem 2.2rem rgb(103 232 255 / 18%), inset 0 1px 0 rgb(255 255 255 / 32%);
  }

  55% {
    box-shadow: 0 0 0 1px rgb(186 245 255 / 45%), 0 0 2.2rem rgb(103 232 255 / 38%), inset 0 1px 0 rgb(255 255 255 / 45%);
    filter: brightness(1.12);
  }
}

@keyframes quest-card-arrival {
  0% {
    opacity: 0;
    transform: translateY(0.45rem) scale(0.985);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes quest-map-lock {
  0% { transform: translateY(-1px) scale(0.97); }
  58% { transform: translateY(-2px) scale(1.018); }
  100% { transform: translateY(-1px) scale(1); }
}

@keyframes quest-map-check {
  0% {
    transform: scale(0.58) rotate(-14deg);
    opacity: 0.3;
  }

  68% {
    transform: scale(1.18) rotate(3deg);
    opacity: 1;
    box-shadow: 0 0 1.4rem rgb(103 232 255 / 68%);
  }

  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
    box-shadow: 0 0 1rem rgb(103 232 255 / 34%);
  }
}

@keyframes quest-map-title-lock {
  0% { color: #fff; text-shadow: none; }
  55% { color: #d9fbff; text-shadow: 0 0 1rem rgb(103 232 255 / 62%); }
  100% { color: #fff; text-shadow: none; }
}

@keyframes quest-map-scan {
  from { left: -35%; }
  to { left: 125%; }
}

@keyframes quest-map-name {
  0% {
    opacity: 0.2;
    filter: blur(0.2rem) brightness(1.8);
    text-shadow: 0 0 1.4rem rgb(103 232 255 / 90%);
  }

  100% {
    opacity: 1;
    filter: blur(0) brightness(1);
    text-shadow: 0 0 0.8rem rgb(103 232 255 / 35%);
  }
}

@keyframes quest-rank-lock {
  0% { transform: scale(0.72) rotate(-7deg); }
  68% { transform: scale(1.14) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes quest-order-ready {
  from { filter: brightness(1); }
  to { filter: brightness(1.35); }
}

@keyframes quest-order-confirm {
  0% { transform: scale(0.99); }
  55% { transform: scale(1.012); filter: brightness(1.2); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes quest-order-reject {
  0%, 100% { transform: translateX(0); }
  24% { transform: translateX(-0.22rem); }
  52% { transform: translateX(0.18rem); }
  76% { transform: translateX(-0.1rem); }
}

@keyframes quest-double-points {
  0% {
    opacity: 0;
    transform: scale(0.86);
    text-shadow: 0 0 1.8rem rgb(103 232 255 / 95%);
  }

  62% {
    opacity: 1;
    transform: scale(1.06);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    text-shadow: 0 2px 0 rgb(0 0 0 / 36%), 0 0 1rem rgb(103 232 255 / 28%);
  }
}

@keyframes quest-score-total {
  0% { opacity: 0; transform: translateY(0.45rem) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes quest-step-arrival {
  0% {
    opacity: 0;
    transform: translateY(0.45rem) scale(0.985);
    border-color: rgb(103 232 255 / 58%);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes quest-step-tick {
  0% { opacity: 0; transform: scale(0.45) rotate(-18deg); }
  72% { opacity: 1; transform: scale(1.16) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes quest-correction-rank {
  0% {
    border-color: rgb(255 101 119 / 70%);
    color: #ff98a5;
    box-shadow: 0 0 0.8rem rgb(255 101 119 / 18%);
  }

  100% {
    border-color: rgb(163 187 222 / 32%);
    color: var(--muted-strong);
    box-shadow: none;
  }
}

@keyframes word-score-change {
  0% {
    transform: scale(1);
    color: var(--essence);
    text-shadow: none;
  }

  45% {
    transform: scale(1.16);
    color: #ff6577;
    text-shadow: 0 0 1rem rgb(255 101 119 / 62%);
  }

  100% {
    transform: scale(1);
    color: var(--essence);
    text-shadow: none;
  }
}

@keyframes word-danger-step {
  0% {
    transform: scaleX(0.2);
    filter: brightness(1.8);
  }

  70% {
    transform: scaleX(1.12);
  }

  100% {
    transform: scaleX(1);
    filter: brightness(1);
  }
}

@keyframes word-danger-warning {
  from {
    box-shadow: inset 0 0 1.2rem rgb(255 101 119 / 7%), 0 0 0.7rem rgb(255 101 119 / 6%);
  }

  to {
    box-shadow: inset 0 0 1.5rem rgb(255 101 119 / 12%), 0 0 1.15rem rgb(255 101 119 / 14%);
  }
}

@keyframes word-letter-reveal {
  0% {
    opacity: 0;
    transform: translateY(-0.75rem) scale(1.35);
    color: var(--aether);
    text-shadow: 0 0 1.5rem rgb(103 232 255 / 85%);
  }

  65% {
    opacity: 1;
    transform: translateY(0.08rem) scale(0.94);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    color: var(--text);
    text-shadow: 0 0 0.8rem rgb(103 232 255 / 25%);
  }
}

@keyframes word-answer-correct-pulse {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }

  38% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@keyframes word-answer-miss {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-0.18rem); }
  52% { transform: translateX(0.14rem); }
  76% { transform: translateX(-0.06rem); }
}

@keyframes word-answer-miss-pulse {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }

  35% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

@keyframes word-key-correct {
  0% { transform: scale(0.88); filter: brightness(1); }
  58% { transform: scale(1.1); filter: brightness(1.3); box-shadow: 0 0 1.35rem rgb(247 200 92 / 44%); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes word-key-incorrect {
  0%, 100% { transform: translateX(0) scale(1); }
  22% { transform: translateX(-0.18rem) scale(0.97); }
  48% { transform: translateX(0.16rem) scale(1.02); filter: brightness(1.22); }
  74% { transform: translateX(-0.07rem) scale(1); }
}

@keyframes word-final-impact {
  0% {
    transform: scale(0.992);
    filter: brightness(1);
  }

  42% {
    transform: scale(1.012);
    filter: brightness(1.24);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes word-letter-victory-bounce {
  0%, 100% {
    transform: translateY(0) scale(1);
    color: var(--text);
    text-shadow: 0 0 0.8rem rgb(103 232 255 / 25%);
  }

  42% {
    transform: translateY(-0.48rem) scale(1.14);
    color: #d9fbff;
    text-shadow: 0 0 1.25rem rgb(103 232 255 / 82%);
  }

  72% {
    transform: translateY(0.08rem) scale(0.96);
    color: #fff;
  }
}

@keyframes word-final-glow {
  0% {
    opacity: 0;
    transform: scale(0.68);
  }

  36% {
    opacity: 1;
    transform: scale(0.96);
  }

  100% {
    opacity: 0;
    transform: scale(1.48);
  }
}

@keyframes word-token-complete {
  0% {
    opacity: 0.72;
    filter: brightness(0.88);
  }

  70% {
    opacity: 1;
    filter: brightness(1.28);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

@keyframes word-streak-arrival {
  0% {
    opacity: 0;
    transform: translateY(0.35rem) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.word-keyboard {
  display: grid;
  gap: 0.42rem;
  width: min(100%, 44rem);
  margin: 1.25rem auto 0;
}

.word-keyboard-row {
  display: flex;
  justify-content: center;
  gap: clamp(0.18rem, 0.8vw, 0.4rem);
}

.word-key {
  display: grid;
  width: clamp(1.7rem, 7.5vw, 3.35rem);
  min-height: clamp(2.55rem, 10vw, 3.4rem);
  padding: 0;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 0.48rem;
  background: linear-gradient(180deg, #202a40, #151b2b);
  color: var(--text);
  font: 800 clamp(0.9rem, 3.5vw, 1.1rem)/1 var(--font-display);
  box-shadow: 0 0.2rem 0 #080b12;
  cursor: pointer;
}

.word-key:hover:not(:disabled),
.word-key:focus-visible:not(:disabled) {
  border-color: var(--aether);
  background: var(--surface-hover);
}

.word-key:disabled {
  opacity: 1;
  cursor: default;
}

.word-key.is-correct {
  border-color: rgb(247 200 92 / 82%);
  background: linear-gradient(180deg, #f7c85c, #cf8f2d);
  color: #171006;
  box-shadow: 0 0 1rem rgb(247 200 92 / 18%);
}

.word-key.is-revealed {
  border-color: rgb(103 232 255 / 82%);
  background: linear-gradient(180deg, #42c7e8, #197ca5);
  color: #041117;
  box-shadow: 0 0 1rem rgb(103 232 255 / 22%);
}

.word-key.is-incorrect {
  border-color: rgb(255 101 119 / 76%);
  background: rgb(129 37 52 / 78%);
  color: white;
}

.share-score-actions .button {
  width: min(100%, 20rem);
  flex: 0 0 auto;
}

.share-score-actions {
  align-items: center;
  flex-direction: column;
  margin-top: 2.5rem;
}

@media (min-width: 48.01rem) {
  .share-score-actions .button {
    width: min(100%, 32rem);
    max-width: 32rem;
  }
}

.demo-footer {
  margin-top: 1rem;
}

.demo-footer .dev-day-button {
  display: inline-flex;
}

@media (max-width: 48rem) {
  .puzzle-choice-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

}

@media (max-width: 35rem) {
  .quest-intel-status,
  .word-scoreboard {
    gap: 0.4rem;
  }

  .quest-intel-status {
    margin-block: 0.65rem;
  }

  .word-scoreboard {
    margin: 0.65rem auto 0;
  }

  .quest-intel-status > div,
  .word-scoreboard > div {
    padding: 0.4rem 0.45rem;
  }

  .quest-intel-status span,
  .word-scoreboard span {
    font-size: 0.64rem;
  }

  .quest-intel-status strong,
  .word-scoreboard strong {
    font-size: 1.25rem;
  }

  .word-danger-meter {
    width: min(100%, 6rem);
    margin-top: 0.25rem;
  }

  .answer-selection-panel .screen-heading {
    margin-bottom: 0.75rem;
  }

  .answer-selection-panel .card-grid {
    gap: 0.45rem;
  }

  .answer-selection-panel .card-button {
    min-height: 5.05rem;
    padding: 0.55rem 0.65rem 0.58rem 0.75rem;
  }

  .answer-selection-panel .card-button::after {
    top: 0.55rem;
    right: 0.55rem;
    width: 1.4rem;
    height: 1.4rem;
  }

  .answer-selection-panel .game-label {
    padding-right: 1.9rem;
    font-size: 0.68rem;
    letter-spacing: 0.09em;
  }

  .answer-selection-panel .card-title {
    margin-top: 0.1rem;
    font-size: 1.2rem;
    line-height: 1.05;
  }

  .answer-selection-panel .actions {
    margin-top: 0.65rem;
  }

  .word-answer {
    min-height: 6.5rem;
    margin-top: 0.75rem;
    padding: 0.85rem 0.25rem;
    row-gap: 0.65rem;
  }

  .word-category-hint {
    margin-top: 0.65rem;
  }

  .word-result-description {
    margin-top: 0.8rem;
    padding-top: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.48;
  }

  .word-keyboard-row {
    gap: 0.1rem;
  }

  .word-keyboard {
    width: calc(100% + 1rem);
    margin-right: -0.5rem;
    margin-left: -0.5rem;
  }

  .word-key {
    width: clamp(1.85rem, 8.5vw, 2.1rem);
    min-height: 3.2rem;
    font-size: 1rem;
  }

  .easter-bonus-panel .result-banner {
    margin-bottom: 0.7rem;
    padding: 0.75rem 0.85rem 0.8rem;
  }

  .easter-bonus-panel .result-banner h2 {
    font-size: 1.8rem;
  }

  .easter-bonus-panel .result-banner p {
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .easter-bonus-panel .bonus-panel {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
  }

  .easter-bonus-panel .bonus-panel h3 {
    font-size: 1.55rem;
  }

  .easter-bonus-panel .selection-progress {
    margin: 0.6rem 0;
  }

  .easter-bonus-panel .order-choice-list {
    gap: 0.5rem;
  }

  .easter-bonus-panel .order-choice {
    min-height: 5.25rem;
    gap: 0.55rem;
    padding: 0.65rem;
  }

  .easter-bonus-panel .order-rank {
    width: 2.35rem;
    height: 2.35rem;
    font-size: 1.05rem;
  }

  .easter-bonus-panel .order-text {
    padding-top: 0;
    font-size: 0.94rem;
    line-height: 1.3;
  }

  .puzzle-choice-copy {
    padding: 1rem 7.4rem 0.75rem 1.05rem;
  }

  .puzzle-choice-art {
    top: 0.75rem;
    right: 0.55rem;
    width: 5.4rem;
    height: 5.4rem;
    opacity: 0.12;
  }

  .puzzle-choice-copy h3 {
    margin-bottom: 0.45rem;
    font-size: 1.4rem;
  }

  .puzzle-choice-copy > p:not(.kicker) {
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .puzzle-choice-actions {
    padding: 0 0.85rem 0.85rem 1.05rem;
  }

  .puzzle-choice-status-row {
    margin-inline: 1.05rem 0.85rem;
  }

  .puzzle-choice-actions .button {
    min-height: 2.75rem;
  }
}

@media (max-width: 20.5rem) {
  .word-keyboard-row {
    display: grid;
    width: 100%;
    margin-inline: auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .word-keyboard-row:nth-child(2) {
    width: 90%;
  }

  .word-keyboard-row:nth-child(3) {
    width: 70%;
  }

  .word-keyboard {
    width: calc(100% + 0.5rem);
    margin-right: -0.25rem;
    margin-left: -0.25rem;
  }

  .word-key {
    width: 100%;
    min-width: 0;
  }
}

/* Local layout experiment: sizing, spacing and responsive proportions only. */
.site-header,
.app-shell,
.community-stats-demo,
.site-footer {
  width: min(100% - 2rem, 66rem);
}

.site-header {
  padding-block: 1.15rem 1rem;
}

.brand-logo {
  width: clamp(3.35rem, 7vw, 5rem);
  height: clamp(3.35rem, 7vw, 5rem);
}

h1 {
  font-size: clamp(2rem, 8.4vw, 4rem);
}

.eyebrow {
  font-size: 0.76rem;
  margin-bottom: 0.18rem;
}

.app-shell {
  padding-block: 1.25rem 1.5rem;
}

.panel {
  padding: clamp(1.1rem, 3vw, 2rem);
}

.screen-heading {
  margin-bottom: 1.25rem;
}

.screen-heading .kicker {
  margin-bottom: 0.65rem;
  font-size: 0.72rem;
}

.screen-heading h2,
.bonus-panel h3 {
  font-size: clamp(1.8rem, 4.6vw, 2.65rem);
  line-height: 1.06;
  margin-bottom: 0.6rem;
}

.screen-heading > p:last-child,
.helper-text {
  font-size: clamp(0.98rem, 2.8vw, 1.08rem);
  line-height: 1.55;
}

.word-puzzle-panel .word-scoreboard {
  width: min(100%, 28rem);
  margin: 1.15rem auto 0;
}

.word-puzzle-panel {
  width: min(100%, 54rem);
  margin-inline: auto;
}

body:has(.word-puzzle-panel) .community-stats-demo {
  max-width: 54rem;
}

.word-scoreboard > div,
.quest-intel-status > div {
  padding: 0.65rem 0.75rem;
}

.word-puzzle-panel .word-scoreboard > div { padding-block: 0.45rem; }

.word-scoreboard span,
.quest-intel-status span {
  font-size: 0.68rem;
}

.word-scoreboard strong,
.quest-intel-status strong {
  font-size: 1.5rem;
}

.word-puzzle-panel .word-answer {
  width: min(100%, 42rem);
  min-height: 8rem;
  margin: 0.75rem auto 0;
  padding: 0.85rem 0.25rem;
  row-gap: 0.7rem;
}

.word-letter {
  width: clamp(1.3rem, 5.6vw, 2.6rem);
  font-size: clamp(1.9rem, 6.5vw, 3.15rem);
}

.word-puzzle-panel .word-category-hint {
  margin-top: 0.6rem;
  font-size: 0.84rem;
}

.word-puzzle-panel .word-keyboard {
  width: min(100%, 36rem);
  margin: 1rem auto 0;
  gap: 0.4rem;
}

.word-keyboard-row {
  display: grid;
  width: 100%;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.35rem;
  margin-inline: auto;
}

.word-keyboard-row:nth-child(2) { width: 90%; }
.word-keyboard-row:nth-child(3) { width: 70%; }

.word-puzzle-panel .word-key {
  width: 100%;
  min-width: 0;
  min-height: 3.15rem;
  font-size: 1.05rem;
}

.word-puzzle-panel .word-game-status {
  margin-top: 0.9rem;
  font-size: 0.9rem;
}

.puzzle-hub-panel { padding: 0; }
.puzzle-hub-hero { padding: 1.4rem 1.5rem; }
.puzzle-choice-grid { padding: 1rem; gap: 1rem; }
.puzzle-choice-copy { padding: 1.25rem 8.5rem 1rem 1.25rem; }
.puzzle-choice-copy h3 { margin-block: 0.4rem 0.65rem; font-size: 1.7rem; }
.puzzle-choice-copy > p:not(.kicker) { font-size: 0.96rem; line-height: 1.5; }
.puzzle-choice-status-row { margin: 0 1.25rem 0.85rem; }
.puzzle-choice-actions { padding: 0 1.25rem 1.25rem; }
.puzzle-choice-art { width: 6.5rem; height: 6.5rem; }

.public-profile-header > div { min-width: 0; }
.public-profile-header h2 { overflow-wrap: anywhere; }

.clue-number { margin-bottom: 0.65rem; }
.clue-text { font-size: clamp(1.04rem, 3.2vw, 1.16rem); line-height: 1.5; }
.quest-clue-panel .clue-card { min-height: 8.5rem; padding: 1.1rem; }
.answer-selection-panel .card-title { font-size: 1.4rem; line-height: 1.08; }
.answer-selection-panel .card-grid { grid-auto-rows: 1fr; }
.answer-selection-panel .card-button {
  min-height: 5.5rem;
  height: 100%;
  padding: 0.9rem 1rem;
  align-content: start;
  grid-template-columns: minmax(0, 1fr) 1.55rem;
  column-gap: 0.55rem;
  row-gap: 0.35rem;
}
.answer-selection-panel .card-button::after {
  position: static;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}
.answer-selection-panel .game-label { padding-right: 0; align-self: center; }
.answer-selection-panel .card-title { grid-column: 1 / -1; margin-top: 0; overflow-wrap: anywhere; text-wrap: balance; }

.result-banner { padding: 1.25rem 1.35rem; }
.result-banner h2 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; }
.final-map-name { font-size: clamp(2.4rem, 7vw, 3.75rem); margin-bottom: 1.2rem; }
.share-score-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.75rem;
}
.share-score-actions .button {
  width: min(100%, 32rem);
  max-width: none;
  min-width: 0;
  flex: 0 0 auto;
  min-height: 3.1rem;
}

.next-round-screen {
  min-height: 13rem;
  margin-top: 1.25rem;
  padding: 2.5rem 1rem;
}
.next-round-screen .kicker { display: none; }
.next-round-screen h3 { font-size: 1.35rem; margin-bottom: 1rem; }
.end-screen-countdown { font-size: clamp(2.75rem, 8vw, 4.25rem); }
.next-round-motivation { margin-top: 1.4rem; font-size: 0.95rem; text-wrap: balance; }

.community-stats-demo .community-stat strong { font-size: 1.5rem; }
.community-stats-demo .community-stat span { font-size: 0.68rem; line-height: 1.3; text-wrap: balance; }
.community-result-title em { font-size: 0.58rem; line-height: 1.25; }
.community-result-rate span,
.community-result-copy span { font-size: 0.6rem; line-height: 1.25; }
.community-result-copy { gap: 0.18rem; }
.community-result-copy strong { font-size: 0.83rem; }
.community-result-rate strong { font-size: 1.18rem; }
.site-footer {
  padding-block: 0.5rem 1.25rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.site-footer p { font-size: 0.62rem; line-height: 1.45; }
.site-footer .feedback-link { margin-top: 0.55rem; font-size: 0.68rem; line-height: 1.5; }

@media (min-width: 48rem) and (max-width: 60rem) {
  .site-header {
    grid-template-areas: "brand utility" "stats stats";
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
  }
  .header-utility { display: grid; width: auto; justify-items: end; gap: 0.6rem; }
  .header-utility .round-timing { order: 0; }
  .header-utility:has(.account-button:not([hidden])) .account-controls {
    padding-left: 0;
    border-left: 0;
  }
  .header-utility .round-timing { display: flex; align-items: center; gap: 0.6rem; }
  .brand-logo { width: 3.75rem; height: 3.75rem; }
  h1 { font-size: 2.9rem; }
  .eyebrow { font-size: 0.68rem; }
}

@media (max-width: 48rem) {
  .site-header { padding-block: 0.9rem; }
  .brand-logo { width: 3.5rem; height: 3.5rem; }
  h1 { font-size: clamp(2rem, 7vw, 3rem); }
  .eyebrow { font-size: 0.68rem; }
  .puzzle-choice-grid { gap: 0.75rem; padding: 0.75rem; }
  .puzzle-choice-copy { padding: 1.1rem 7rem 1rem 1.1rem; }
  .puzzle-choice-status-row { margin-inline: 1.1rem; }
  .puzzle-choice-actions { padding: 0 1.1rem 1.1rem; }
  .puzzle-choice-art { width: 5.25rem; height: 5.25rem; }
  .quest-clue-panel .clue-card { min-height: 0; }
  .quest-clue-panel .clue-card.is-hidden { min-height: 3.25rem; }
}

@media (max-width: 35rem) {
  .site-header { padding-block: 0.8rem 0.75rem; gap: 0.65rem; }
  .brand-lockup { gap: clamp(0.5rem, 1.4vw, 0.85rem); }
  .brand-logo { width: clamp(3.3rem, 17vw, 4.1rem); height: clamp(3.3rem, 17vw, 4.1rem); }
  h1 { font-size: clamp(2rem, 10vw, 2.8rem); line-height: 0.88; }
  .eyebrow { font-size: clamp(0.68rem, 3.1vw, 0.8rem); letter-spacing: 0.095em; margin-bottom: 0.18rem; }
  .header-meta { gap: 0.65rem; }
  .round-timing { grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; gap: 0.45rem; }
  .round-timing .puzzle-date { min-width: 0; white-space: normal; }
  .account-controls { gap: 0.6rem; }
  .account-button { min-height: 2.75rem; font-size: 0.76rem; }
  .app-shell { padding-block: 1rem 1.1rem; }
  .panel { padding: 1rem; }
  .screen-heading { margin-bottom: 1rem; }
  .screen-heading h2 { font-size: clamp(1.7rem, 7.4vw, 2.15rem); line-height: 1.08; }
  .screen-heading > p:last-child,
  .helper-text { font-size: 0.94rem; line-height: 1.5; }
  .screen-heading .kicker { font-size: 0.66rem; margin-bottom: 0.55rem; }
  .word-puzzle-panel .word-scoreboard { margin-top: 0.9rem; }
  .word-scoreboard > div,
  .quest-intel-status > div { padding: 0.55rem 0.5rem; }
  .word-puzzle-panel .word-answer { min-height: 6.5rem; margin-top: 0.4rem; padding-block: 0.65rem; }
  .word-puzzle-panel .word-keyboard { width: calc(100% + 1.25rem); margin: 0.75rem -0.625rem 0; gap: 0.35rem; }
  .word-keyboard-row { gap: 0.1rem; }
  .word-puzzle-panel .word-key { min-height: 3.2rem; font-size: 1rem; }
  .word-puzzle-panel .word-game-status { margin-top: 0.6rem; font-size: 0.86rem; }
  .puzzle-hub-panel { padding: 0; }
  .puzzle-hub-hero { padding: 1.2rem 1.1rem; }
  .puzzle-choice-copy h3 { font-size: 1.55rem; }
  .puzzle-choice-copy > p:not(.kicker) { font-size: 0.94rem; }
  .puzzle-choice-copy { padding-right: 1.1rem; }
  .puzzle-choice-copy .kicker,
  .puzzle-choice-copy h3 { padding-right: 4.25rem; }
  .puzzle-choice-art { width: 4rem; height: 4rem; }
  .public-profile-header h2 { font-size: clamp(1.4rem, 6.5vw, 2rem); }
  .answer-selection-panel .card-button { min-height: 5rem; padding: 0.75rem; grid-template-columns: minmax(0, 1fr) 1.4rem; }
  .answer-selection-panel .card-title { font-size: 1.25rem; }
  .quest-clue-panel .clue-card { padding: 1rem; }
  .quest-clue-panel .clue-card.is-hidden { min-height: 3rem; }
  .result-banner { padding: 1rem; }
  .result-banner h2 { font-size: 2rem; }
  .share-score-actions { gap: 0.6rem; margin-top: 1.5rem; }
  .share-score-actions .button { width: min(100%, 20rem); min-height: 3rem; padding-inline: 0.8rem; font-size: 0.94rem; }
  .next-round-screen { min-height: 11.5rem; padding: 2.25rem 1rem; margin-top: 1rem; }
  .next-round-screen h3 { font-size: 1.15rem; margin-bottom: 0.8rem; }
  .next-round-screen .kicker { font-size: 0.66rem; }
  .next-round-motivation { margin-top: 1.25rem; font-size: 0.9rem; }
  .community-result-title { gap: 0.2rem 0.3rem; }
}
/* End local layout experiment. */

/* Readability refinements: retain the existing colours at a clearer strength. */
.community-stats-demo .community-stat span {
  color: rgb(168 178 199 / 82%);
}
.community-result-rate span,
.community-result-copy span {
  color: rgb(168 178 199 / 72%);
}