/* Hallmark · genre: playful · macrostructure: Scoreboard arena · theme: custom modern geography
 * pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass (40–41)
 * nav: compact brand bar · footer: quiet utility · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · mobile: pass (34, 49–57)
 */

body {
  background: var(--color-paper);
}

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

.shell,
.game-page .shell {
  grid-template-columns: minmax(0, 1fr);
  background-image: none;
}

.masthead {
  min-height: 3.25rem;
}

.wordmark {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -.04em;
  text-transform: none;
}

.status {
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-round);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-card);
  color: var(--color-muted);
}

.game-page .shell {
  padding-top: 0;
}

.game-page .masthead {
  margin: 0 calc(-1 * clamp(var(--space-md), 4vw, var(--space-2xl)));
  padding: var(--space-sm) clamp(var(--space-md), 4vw, var(--space-2xl));
  border: 0;
  border-bottom: var(--rule-thin) solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink);
  box-shadow: none;
}

.game-page .status {
  border-color: var(--color-rule);
  background: var(--color-paper);
  color: var(--color-muted);
}

.game-page .status::before {
  box-shadow: none;
}

.gate {
  min-width: 0;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-panel);
  background: var(--color-card);
  box-shadow: 0 .65rem 0 var(--color-card-muted), 0 1.5rem 3rem var(--color-shadow);
}

.gate h1 {
  max-width: 100%;
  font-family: var(--font-body);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 850;
  line-height: .95;
  letter-spacing: -.06em;
  overflow-wrap: normal;
  word-break: normal;
}

.field input {
  border-color: var(--color-rule);
  border-radius: var(--radius-round);
  padding-inline: var(--space-lg);
  background: var(--color-paper);
}

.game-app {
  padding-block: clamp(var(--space-lg), 5vh, var(--space-3xl));
}

.game-menu {
  position: relative;
  min-height: min(42rem, calc(100svh - 9rem));
  align-content: center;
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
}

.game-menu::before {
  content: "?";
  position: absolute;
  z-index: -1;
  top: -2rem;
  right: 1rem;
  color: var(--color-paper-deep);
  font-family: var(--font-display);
  font-size: clamp(12rem, 35vw, 30rem);
  font-weight: 700;
  line-height: .8;
  pointer-events: none;
}

.game-kicker,
.category-label {
  color: var(--color-accent);
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: .06em;
}

.menu-copy h1,
.game-results h1 {
  min-width: 0;
  max-width: 10ch;
  font-family: var(--font-body);
  font-size: clamp(3.25rem, 8vw, 7rem);
  font-weight: 850;
  line-height: .9;
  letter-spacing: -.07em;
  overflow-wrap: anywhere;
}

.menu-copy > p:last-child, .menu-copy > .menu-lede {
  max-width: 36rem;
  color: var(--color-muted);
  font-size: var(--text-lg);
  line-height: 1.55;
}

.category-grid {
  gap: var(--space-md);
}

.category-card {
  position: relative;
  min-height: 15rem;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: clamp(var(--space-lg), 4vw, var(--space-xl));
  background: var(--color-card);
  box-shadow: none;
  overflow: clip;
}

.category-card::after {
  content: "→";
  position: absolute;
  right: var(--space-lg);
  bottom: var(--space-lg);
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-lg);
  transition: transform var(--dur-base) var(--ease-out);
}

.category-card strong {
  max-width: 8ch;
  font-family: var(--font-body);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 850;
  line-height: .95;
  letter-spacing: -.055em;
}

.category-number {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--color-card-muted);
  color: var(--color-muted);
}

.category-action {
  color: var(--color-accent);
  text-decoration: none;
}

.menu-progress {
  display: grid;
  max-width: 34rem;
  gap: var(--space-sm);
  border-block: var(--rule-thin) solid var(--color-rule);
  padding-block: var(--space-sm);
}

.menu-progress-heading,
.menu-progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}

.menu-progress-heading {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.menu-progress-heading strong {
  color: var(--color-accent);
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
}

.run-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .35rem;
}

.run-track span {
  height: .4rem;
  border-radius: var(--radius-round);
  background: var(--color-paper-deep);
}

.run-track span:first-child {
  background: var(--color-accent);
}

.menu-progress-meta {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.category-footer {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  min-width: 0;
  padding-inline-end: 3.5rem;
}

.category-best {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.category-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-.2rem);
  box-shadow: none;
}

.category-card:hover::after {
  transform: translateX(.25rem);
}

.category-card:active,
.category-card[data-state="loading"] {
  transform: translateY(.25rem);
  box-shadow: 0 .2rem 0 var(--color-card-muted);
}

.rules-strip {
  border: 0;
  border-radius: var(--radius-round);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-olive);
  color: var(--color-accent-ink);
  box-shadow: none;
}

.rules-strip span + span {
  border-left-color: var(--color-night-soft);
}

.game-round {
  min-height: min(38rem, calc(100svh - 11rem));
  align-content: center;
}

.round-topline {
  border: 0;
}

.round-topline p {
  border-bottom: var(--rule-thin) solid var(--color-rule);
  padding: var(--space-xs) 0 var(--space-sm);
  background: transparent;
  font-size: clamp(.95rem, 1.4vw, 1.15rem);
  font-weight: 800;
  letter-spacing: .045em;
}

.timer-track {
  height: .8rem;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--color-card-muted);
}

.timer-track span {
  border-radius: inherit;
  box-shadow: 0 0 1.25rem var(--color-glow);
}

.round-layout {
  align-items: stretch;
}

.round-sidebar {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0;
  border: var(--rule-thin) solid var(--color-rule);
  background: color-mix(in srgb, var(--color-card) 72%, transparent);
}

.score-dial,
.clue-board {
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-panel);
  background: var(--color-card);
  box-shadow: none;
}

.leaderboard {
  min-width: 0;
  border: 0;
  border-top: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  padding: var(--space-lg);
  background: transparent;
}

.leaderboard-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-thin) solid var(--color-rule);
}

.leaderboard-heading h2,
.leaderboard-heading span {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.leaderboard-heading h2 {
  font-weight: 800;
}

.leaderboard-heading span {
  color: var(--color-muted);
}

.leaderboard ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leaderboard li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: var(--space-xs);
  align-items: center;
  min-height: 3rem;
  border-bottom: var(--rule-thin) solid var(--color-rule);
  font-size: var(--text-sm);
}

.leaderboard li:last-child {
  border-bottom: 0;
}

.leaderboard li.is-current {
  color: var(--color-accent);
  font-weight: 800;
}

.leaderboard-rank {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.leaderboard-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-dial {
  border: 0;
  border-radius: 0;
  padding: var(--space-lg);
  background: transparent;
  color: var(--color-ink);
}

.score-dial strong {
  color: var(--color-accent);
  font-family: var(--font-body);
  font-weight: 850;
  letter-spacing: -.065em;
}

.clue-board {
  border: 0;
  padding: 0;
  background: transparent;
}

.clue-playfield {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

.clue-media {
  position: relative;
  min-width: 0;
  min-height: 12rem;
  margin: 0;
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-card-muted);
  overflow: clip;
}

.clue-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 360ms var(--ease-out), transform 620ms var(--ease-out);
}

.clue-media.is-visible img {
  opacity: 1;
  transform: scale(1);
}

.clue-media.is-error::after {
  content: "Visual clue unavailable";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-md);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.clue-media figcaption {
  position: absolute;
  z-index: 2;
  right: var(--space-xs);
  bottom: var(--space-xs);
}

.clue-media figcaption a {
  display: block;
  border: var(--rule-thin) solid color-mix(in srgb, var(--color-paper) 55%, transparent);
  padding: var(--space-2xs) var(--space-xs);
  background: color-mix(in srgb, var(--color-ink) 78%, transparent);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.clue-media figcaption a:hover {
  background: var(--color-ink);
}

.clue-media figcaption a:focus-visible {
  outline: var(--rule-heavy) solid var(--color-focus);
  outline-offset: var(--space-2xs);
}

.clue-media figcaption a:active {
  transform: translateY(1px);
}

.clue-list {
  min-height: 19rem;
  border: 0;
  gap: var(--space-md);
}

.clue-list li {
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  align-items: stretch;
  border: var(--rule-thin) solid var(--color-olive);
  border-radius: 0;
  padding: 0;
  background: var(--color-card);
  overflow: clip;
  transform: translateY(4.5rem);
  transition: transform 520ms var(--ease-out), opacity 380ms var(--ease-out);
}

.clue-list li.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.clue-list li > span {
  display: flex;
  width: auto;
  min-height: 5.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: var(--color-olive);
  color: var(--color-accent-ink);
  font-size: 0;
  position: relative;
}

.clue-list li > span::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -.65rem;
  width: 1.3rem;
  aspect-ratio: 1;
  background: inherit;
  transform: translateY(-50%) rotate(45deg);
}

.clue-list li:nth-child(2) {
  border-color: var(--color-ochre);
}

.clue-list li:nth-child(2) > span {
  background: var(--color-ochre);
  color: var(--color-ink);
}

.clue-list li:nth-child(3) {
  border-color: var(--color-terracotta);
}

.clue-list li:nth-child(3) > span {
  background: var(--color-terracotta);
}

.clue-list li > span::after {
  content: "Clue " attr(data-clue-number);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 0 var(--space-xs);
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 800;
  line-height: 1.1;
  z-index: 2;
  text-align: center;
  text-transform: uppercase;
}

.clue-list p {
  min-width: 0;
  min-height: 0;
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.2vw, 1.55rem);
  font-weight: 650;
  line-height: 1.35;
  display: flex;
  align-items: center;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  padding: var(--space-md) clamp(var(--space-xl), 4vw, var(--space-2xl));
}

.clue-list li.clue--compact p {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.25;
}

.clue-list li.clue--dense p {
  font-size: clamp(.9rem, 1.55vw, 1.1rem);
  line-height: 1.2;
}

.answer-row input,
.answer-button {
  min-height: 4.75rem;
  border-width: var(--rule-thin);
  border-radius: var(--radius-card);
}

.answer-row input {
  height: 4.75rem;
  padding-inline: var(--space-lg);
  background: var(--color-card);
}

.answer-button {
  width: 4.75rem;
  min-width: 4.75rem;
  height: 4.75rem;
  min-height: 4.75rem;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.answer-button img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 .2rem 0 var(--color-accent-dark));
}

.answer-button:hover {
  transform: translateY(-.1rem);
}

.answer-button:active {
  transform: translateY(.18rem) scale(.97);
  box-shadow: none;
}

.game-results {
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-panel);
  padding: clamp(var(--space-xl), 6vw, var(--space-3xl));
  background: var(--color-card);
  box-shadow: none;
}

.result-score {
  border: 0;
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  background: var(--color-olive);
  color: var(--color-accent-ink);
}

.result-score strong {
  font-family: var(--font-body);
  font-weight: 850;
}

.button,
.button-inline {
  border-radius: var(--radius-round);
  box-shadow: 0 .3rem 0 var(--color-accent-dark);
}

.footer {
  border: 0;
  color: var(--color-muted);
}

.game-page .footer {
  min-height: 2.75rem;
  padding-top: 0;
}

.footer-links {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.policy-page-shell .shell {
  min-height: 100vh;
}

.policy-page {
  width: min(100% - 2rem, 52rem);
  margin: clamp(2.5rem, 7vw, 6rem) auto;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-panel);
  background: var(--color-card);
}

.policy-page h1 {
  margin: .25rem 0 .35rem;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: .95;
}

.policy-page h2 {
  margin: 2rem 0 .55rem;
  font-size: 1.35rem;
}

.policy-page p,
.policy-page li {
  max-width: 70ch;
  color: var(--color-muted);
  line-height: 1.65;
}

.policy-page ul {
  padding-left: 1.35rem;
}

.policy-page a {
  color: var(--color-accent);
  text-underline-offset: .2em;
}

.policy-meta {
  margin-top: 0;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (min-width: 60rem) {
  .game-menu {
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  }

  .round-layout {
    grid-template-columns: minmax(14rem, .28fr) minmax(0, 1fr);
  }

  .clue-playfield {
    grid-template-columns: minmax(15rem, .72fr) minmax(24rem, 1.28fr);
    align-items: stretch;
  }

  .clue-media {
    min-height: 19rem;
  }

  .score-dial {
    min-height: auto;
    padding: var(--space-xl);
    background: transparent;
    color: var(--color-ink);
  }


  .round-sidebar .score-dial {
    min-height: 13rem;
  }
}

@media (min-width: 60rem) and (max-height: 64rem) {
  .game-app {
    padding-block: var(--space-sm);
  }

  .game-menu {
    align-items: center;
    gap: var(--space-lg);
  }

  .menu-copy {
    gap: var(--space-sm);
  }

  .menu-copy h1,
  .game-results h1 {
    max-width: 9ch;
    font-size: clamp(3.5rem, 8.5vh, 5.25rem);
    line-height: .92;
  }

  .menu-copy > p:last-child, .menu-copy > .menu-lede {
    max-width: 32rem;
    font-size: var(--text-base);
    line-height: 1.4;
  }

  .category-card {
    min-height: 17rem;
    gap: var(--space-sm);
    padding: var(--space-lg);
  }

  .category-card strong {
    font-size: clamp(2rem, 3vw, 3rem);
  }

  .rules-strip {
    padding-block: var(--space-xs);
  }

  .game-round {
    min-height: 0;
    align-content: start;
    gap: var(--space-sm);
  }

  .round-layout {
    gap: var(--space-lg);
  }

  .clue-playfield {
    min-height: clamp(19rem, 44vh, 24rem);
    gap: var(--space-sm);
  }

  .clue-media {
    min-height: 0;
  }

  .clue-list {
    height: auto;
    min-height: 0;
    grid-template-rows: none;
    gap: var(--space-xs);
  }

  .clue-list li,
  .clue-list li > span {
    min-height: 0;
  }

  .clue-list p {
    min-width: 0;
    padding: var(--space-sm) var(--space-lg);
    font-size: clamp(1rem, 2.1vh, 1.25rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .answer-form {
    margin-top: var(--space-sm);
  }

  .answer-row input,
  .answer-button {
    height: 4rem;
    min-height: 4rem;
  }

  .answer-button {
    width: 4rem;
    min-width: 4rem;
  }

  .round-sidebar .score-dial {
    min-height: 10rem;
    padding: var(--space-lg);
  }
}

@media (max-width: 48rem) {
  .masthead,
  .footer {
    min-width: 0;
  }

  .status {
    flex: 0 0 auto;
    max-width: 8.5rem;
  }

  .gate {
    padding: var(--space-lg);
  }

  .gate h1 {
    font-size: clamp(2.15rem, 11vw, 3.25rem);
    overflow-wrap: anywhere;
  }

  .game-page .shell {
    padding-inline: var(--space-md);
  }

  .game-menu::before {
    right: -2rem;
    opacity: .65;
  }

  .menu-copy h1,
  .game-results h1 {
    font-size: clamp(2.75rem, 15vw, 4.5rem);
  }

  .category-card {
    min-height: 13rem;
  }

  .rules-strip {
    border-radius: var(--radius-card);
  }

  .clue-board {
    padding: 0;
  }

  .clue-list {
    min-height: 18rem;
  }

  .round-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .round-sidebar .leaderboard {
    display: none;
  }
}

@media (max-width: 32rem) {
  .round-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .answer-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .clue-list li {
    grid-template-columns: 5rem minmax(0, 1fr);
  }

  .clue-list p {
    padding: var(--space-sm);
  }
}

@media (max-width: 24rem) {
  .category-card::after {
    display: none;
  }

  .clue-list li {
    gap: var(--space-sm);
    padding: var(--space-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-card,
  .category-card::after,
  .answer-button {
    transform: none;
  }

  .clue-list li {
    transform: none;
    transition-duration: 120ms;
  }

  .clue-media img {
    transform: none;
    transition-duration: 120ms;
  }
}

/* Light game feedback: reward progress without turning the round into an arcade UI. */
.rules-strip .personal-best {
  margin-inline-start: auto;
  color: var(--color-accent);
  font-weight: 800;
}

.rules-strip .personal-best strong {
  margin-inline-start: .25rem;
  font-variant-numeric: tabular-nums;
}

.round-streak {
  color: var(--color-muted);
  font-size: .72em;
  letter-spacing: .08em;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.round-streak[data-streak-active="true"] {
  color: var(--color-accent);
  transform: translateY(-1px);
}

.timer-track {
  background: repeating-linear-gradient(90deg, var(--color-card-muted) 0 9.5%, var(--color-paper-deep) 9.5% 10%);
}

.result-badge {
  width: fit-content;
  margin: 0 0 var(--space-sm);
  border: var(--rule-thin) solid var(--color-accent);
  border-radius: var(--radius-round);
  padding: var(--space-2xs) var(--space-sm);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  animation: result-badge-in 360ms var(--ease-out) both;
}

@keyframes result-badge-in {
  from { opacity: 0; transform: translateY(.35rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 48rem) {
  .rules-strip .personal-best {
    margin-inline-start: 0;
  }
}

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

/* Menu shell: a quieter navigation frame makes the play surface feel inhabited. */
.game-menu {
  gap: var(--space-lg);
}

.game-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-panel);
  padding: var(--space-md);
  background: var(--color-card-muted);
}

.sidebar-heading,
.sidebar-foot {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sidebar-mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: .55rem;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: -.04em;
}

.sidebar-nav {
  display: grid;
  gap: .25rem;
  margin-top: var(--space-xl);
}

.sidebar-link {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  border: 0;
  border-radius: var(--radius-sm);
  padding: .65rem .6rem;
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-align: start;
}

.sidebar-link.is-active {
  background: var(--color-paper);
  color: var(--color-accent-dark);
  box-shadow: inset 0 0 0 1px var(--color-rule);
  font-weight: 750;
}

.sidebar-link:disabled {
  opacity: .54;
  cursor: not-allowed;
}

.sidebar-icon {
  color: currentColor;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
  text-align: center;
}

.sidebar-link small {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.sidebar-foot {
  margin-top: auto;
  border-top: var(--rule-thin) solid var(--color-rule);
  padding-top: var(--space-md);
}

.sidebar-live-dot {
  width: .45rem;
  height: .45rem;
  border-radius: var(--radius-round);
  background: var(--color-success);
}

.category-card {
  min-height: 12rem;
  grid-template-rows: auto auto auto 1fr auto;
  padding: var(--space-lg);
  background: var(--color-paper);
  box-shadow: 0 .25rem 0 var(--color-card-muted);
}

.category-tier {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.category-card > span:nth-of-type(3) {
  max-width: 31ch;
  line-height: 1.35;
}

.category-card:hover {
  background: var(--color-card);
  box-shadow: 0 .35rem 0 var(--color-card-muted);
}

.rules-strip {
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-card-muted);
  color: var(--color-muted);
}

.rules-strip span + span {
  border-left-color: var(--color-rule);
}

.rules-strip .personal-best {
  color: var(--color-accent-dark);
}

@media (min-width: 60rem) {
  .game-menu {
    grid-template-columns: minmax(11rem, .24fr) minmax(0, .72fr) minmax(0, 1.28fr);
    column-gap: clamp(var(--space-md), 2.5vw, var(--space-2xl));
    row-gap: var(--space-lg);
  }

  .game-menu > .game-sidebar {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .game-menu > .menu-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .game-menu > .category-grid {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }

  .game-menu > .rules-strip {
    grid-column: 2 / -1;
  }

  .menu-copy h1 {
    font-size: clamp(3rem, 5.8vw, 5.5rem);
  }
}

@media (max-width: 59.99rem) {
  .game-sidebar {
    padding: var(--space-sm);
  }

  .sidebar-nav {
    grid-template-columns: repeat(5, minmax(8.5rem, 1fr));
    overflow-x: auto;
    margin-top: var(--space-sm);
    padding-bottom: .2rem;
  }

  .sidebar-foot {
    margin-top: var(--space-sm);
  }
}

@media (max-width: 32rem) {
  .sidebar-nav {
    grid-template-columns: repeat(5, minmax(7.5rem, 1fr));
  }
}

/* Sidebar destinations share the menu frame without changing the round UI. */
.hub-screen {
  align-items: stretch;
}

.hub-page {
  min-width: 0;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-panel);
  padding: clamp(var(--space-lg), 4vw, var(--space-3xl));
  background: var(--color-paper);
}

.hub-page > h1 {
  max-width: 12ch;
  margin: var(--space-sm) 0 var(--space-md);
  font-size: clamp(2.7rem, 6vw, 5.6rem);
  line-height: .9;
}

.hub-lede {
  max-width: 46rem;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.55;
}

.hub-date,
.eyebrow,
.setup-note {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.daily-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-panel);
  padding: var(--space-xl);
  background: var(--color-card-muted);
}

.daily-card > div {
  display: grid;
  gap: var(--space-xs);
}

.daily-card strong {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  line-height: .95;
}

.daily-card p {
  margin: 0;
  color: var(--color-muted);
}

.daily-status {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.global-board {
  min-width: 0;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-panel);
  padding: var(--space-lg);
  background: var(--color-card-muted);
}

.board-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  border-bottom: var(--rule-thin) solid var(--color-rule);
  padding-bottom: var(--space-sm);
}

.board-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.7rem;
}

.board-heading span {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .65rem;
  text-transform: uppercase;
}

.global-board ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.global-board li {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  min-height: 3.25rem;
  border-bottom: var(--rule-thin) solid var(--color-rule);
}

.global-board li:last-child {
  border-bottom: 0;
}

.global-board .board-empty {
  display: block;
  padding: var(--space-lg) 0;
  color: var(--color-muted);
  line-height: 1.5;
}

.board-rank,
.board-name {
  font-family: var(--font-mono);
  font-size: .78rem;
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.achievement {
  min-height: 9rem;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-panel);
  padding: var(--space-lg);
  background: var(--color-card-muted);
  transition: transform 180ms var(--ease-out), background 180ms var(--ease-out);
}

.achievement[data-state="locked"] {
  opacity: .48;
  filter: grayscale(1);
}

.achievement[data-state="unlocked"] {
  border-color: var(--color-accent);
  background: var(--color-paper);
  box-shadow: inset .28rem 0 0 var(--color-accent);
}

.achievement span {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .7rem;
}

.achievement strong {
  display: block;
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: 1.45rem;
}

.achievement p {
  margin: var(--space-xs) 0 0;
  color: var(--color-muted);
}

.account-card {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  max-width: 46rem;
  margin: var(--space-2xl) 0 var(--space-lg);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-panel);
  padding: var(--space-xl);
  background: var(--color-card-muted);
}

.account-card h2,
.account-card p {
  margin: 0;
}

.account-card h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
}

.account-card p:not(.eyebrow) {
  margin-top: .3rem;
  color: var(--color-muted);
  line-height: 1.45;
}

.profile-avatar {
  flex: 0 0 auto;
  width: 5rem;
  height: 5rem;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-round);
  object-fit: cover;
}

.profile-avatar-fallback {
  display: grid;
  place-items: center;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-size: 2rem;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  max-width: 46rem;
  margin-top: var(--space-2xl);
}

.profile-stats > div {
  display: grid;
  gap: var(--space-xs);
  border-top: var(--rule-thin) solid var(--color-rule);
  padding-top: var(--space-md);
}

.profile-stats span {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.profile-stats strong {
  font-family: var(--font-display);
  font-size: 2rem;
}

@media (min-width: 60rem) {
  .hub-screen > .game-sidebar {
    grid-column: 1;
    grid-row: 1;
  }

  .hub-screen > .hub-page {
    grid-column: 2 / -1;
    grid-row: 1;
  }
}

@media (max-width: 48rem) {
  .daily-card {
    align-items: stretch;
    flex-direction: column;
  }

  .board-grid,
  .achievement-grid,
  .profile-stats {
    grid-template-columns: 1fr;
  }

  .account-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Game lobby redesign: one play surface, one mode board, and compact progress UI. */
.game-page {
  background: #f3eddf;
}

.game-page .shell {
  min-height: 100svh;
  padding: 0;
  background: #f3eddf;
}

.game-page .masthead,
.game-page .footer {
  display: none;
}

.game-app {
  width: min(100%, 96rem);
  margin: 0 auto;
  padding: 0 clamp(1rem, 2.5vw, 2.25rem) 2rem;
}

.game-menu {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.game-menu::before {
  content: none;
}

.game-sidebar {
  position: sticky;
  z-index: 20;
  top: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  min-height: 4.5rem;
  margin-inline: calc(-1 * clamp(1rem, 2.5vw, 2.25rem));
  border: 0;
  border-bottom: 1px solid #cbbda6;
  border-radius: 0;
  padding: .65rem clamp(1rem, 2.5vw, 2.25rem);
  background: rgba(247, 242, 232, .97);
  box-shadow: 0 .35rem 1.25rem rgba(55, 40, 30, .07);
}

.sidebar-heading {
  display: flex;
  align-items: center;
  gap: .65rem;
  border: 0;
  padding: 0;
  background: transparent;
  color: #251916;
  cursor: pointer;
}

.sidebar-heading strong {
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: -.045em;
}

.sidebar-mark {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: .5rem;
  background: #cf191d;
  color: #fff7e9;
  font-size: .72rem;
  font-weight: 900;
}

.sidebar-build {
  border-left: 1px solid #cbbda6;
  padding-left: .65rem;
  color: #7b685b;
  font-family: var(--font-mono);
  font-size: .63rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sidebar-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(.15rem, 1vw, .65rem);
  margin: 0;
  overflow: visible;
}

.sidebar-link {
  position: relative;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: .35rem;
  min-height: 3.15rem;
  border: 0;
  border-radius: 0;
  padding: .4rem .75rem;
  background: transparent;
  color: #6f5e52;
  font-size: .86rem;
  font-weight: 720;
  white-space: nowrap;
}

.sidebar-link::after {
  content: "";
  position: absolute;
  right: .7rem;
  bottom: -.7rem;
  left: .7rem;
  height: 3px;
  background: transparent;
}

.sidebar-link:hover {
  color: #251916;
}

.sidebar-link.is-active {
  background: transparent;
  box-shadow: none;
  color: #b91519;
  font-weight: 850;
}

.sidebar-link.is-active::after {
  background: #cf191d;
}

.sidebar-link small {
  color: #967f6c;
  font-size: .54rem;
}

.sidebar-foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  border: 0;
  padding: 0;
  color: #6f5e52;
  white-space: nowrap;
}

.lobby-main {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(23rem, .8fr);
  min-height: 31.5rem;
  border: 1px solid #bfae93;
  border-radius: 1.1rem;
  overflow: hidden;
  background: #faf7f0;
  box-shadow: 0 .8rem 2rem rgba(62, 45, 31, .09);
}

.play-stage {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(13rem, .95fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(2rem, 4vw, 4rem);
  background: #4d4a2c;
  color: #fff7e8;
  overflow: hidden;
}

.play-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(38, 35, 18, .93) 0%, rgba(43, 40, 21, .83) 44%, rgba(47, 44, 24, .62) 100%);
  pointer-events: none;
}

.stage-demo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.play-stage-media {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: 47% center;
  opacity: .6;
  filter: saturate(.65) contrast(1.08);
  clip-path: inset(0 28% 0 0);
  animation: stage-drift 18s ease-in-out infinite alternate;
}

.stage-demo-hud {
  position: absolute;
  top: 1.35rem;
  right: 1.45rem;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .1rem 1rem;
  width: min(44%, 26rem);
  color: #fff7e8;
  font-family: var(--font-mono);
  font-style: normal;
  text-transform: uppercase;
  text-shadow: 0 1px 1rem rgba(20, 16, 8, .45);
}

.stage-demo-hud > span {
  grid-column: 1 / -1;
  color: #efc86d;
  font-size: .65rem;
  letter-spacing: .11em;
}

.stage-demo-hud strong {
  font-size: clamp(1.35rem, 2.2vw, 2.1rem);
  line-height: 1;
}

.stage-demo-hud em {
  align-self: end;
  font-size: .72rem;
  font-style: normal;
  letter-spacing: .05em;
}

.stage-demo-progress {
  position: absolute;
  top: 4.35rem;
  right: 1.45rem;
  z-index: 1;
  width: min(44%, 26rem);
  height: .28rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 247, 232, .2);
}

.stage-demo-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #efc86d;
  transform: scaleX(1);
  transform-origin: left center;
  will-change: transform;
}

.stage-demo-clues {
  position: absolute;
  top: 5.15rem;
  right: 1.45rem;
  z-index: 1;
  width: min(44%, 26rem);
  height: 5.4rem;
}

.stage-demo-clue {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 3.9rem 1fr;
  align-items: center;
  min-height: 3.1rem;
  margin: 0;
  border: 1px solid rgba(255, 247, 232, .25);
  border-left: 3px solid #efc86d;
  padding: .55rem .7rem;
  background: rgba(30, 27, 14, .72);
  color: #fff7e8;
  opacity: 0;
  transform: translateY(.85rem);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

.stage-demo-clue.is-visible {
  opacity: .74;
  transform: translateY(0);
}

.stage-demo-clue b {
  color: #efc86d;
  font-family: var(--font-mono);
  font-size: .59rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.stage-demo-clue span {
  font-size: clamp(.67rem, .86vw, .82rem);
  font-weight: 700;
  line-height: 1.25;
}

@keyframes stage-drift {
  from { transform: scale(1.01) translate3d(-.5%, 0, 0); }
  to { transform: scale(1.07) translate3d(1%, -.5%, 0); }
}

.stage-copy {
  position: relative;
  z-index: 2;
  align-self: center;
}

.stage-copy .game-kicker {
  color: #efc86d;
}

.stage-copy h1 {
  max-width: 8ch;
  margin: .65rem 0 1rem;
  font-family: var(--font-body);
  font-size: clamp(2.7rem, 4.8vw, 4.9rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.065em;
  overflow-wrap: normal;
}

.stage-copy > p:last-child {
  max-width: 30rem;
  margin: 0;
  color: #e7dcc7;
  font-size: 1.05rem;
  line-height: 1.55;
}

.quick-buzzer,
.daily-buzzer {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.quick-buzzer {
  position: relative;
  z-index: 2;
  width: min(100%, 19rem);
  align-self: end;
  justify-self: center;
  margin-bottom: 1rem;
  transition: transform 180ms var(--ease-out), filter 180ms var(--ease-out);
}

.quick-buzzer img,
.daily-buzzer img {
  display: block;
  width: 100%;
  height: auto;
}

.quick-buzzer:hover {
  transform: translateY(-.35rem) scale(1.025);
  filter: saturate(1.08);
}

.quick-buzzer:active {
  transform: translateY(.25rem) scale(.97);
}

.quick-buzzer:focus-visible,
.daily-buzzer:focus-visible,
.sidebar-heading:focus-visible,
.sidebar-link:focus-visible,
.category-card:focus-visible,
.daily-entry:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.quick-mode {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 1rem;
  border-top: 1px solid rgba(255, 247, 232, .24);
  padding-top: 1rem;
}

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

  .stage-demo-clue {
    transition: none;
  }
}

.quick-mode span,
.quick-mode small {
  color: #d9cdb8;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.quick-mode strong {
  font-size: 1rem;
}

.mode-selector {
  min-width: 0;
  padding: clamp(1.4rem, 2.5vw, 2.25rem);
  background: #faf7f0;
}

.mode-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #cbbda6;
  padding-bottom: 1rem;
}

.mode-heading h2 {
  margin: .25rem 0 0;
  font-size: clamp(1.7rem, 2.8vw, 2.35rem);
  line-height: 1;
  letter-spacing: -.045em;
}

.mode-heading > span {
  color: #7b685b;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mode-round-count {
  margin-inline-start: auto;
  white-space: nowrap;
}

.mode-selector .category-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.mode-selector .category-card {
  position: relative;
  min-height: 5.65rem;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto auto;
  grid-template-rows: auto;
  align-items: center;
  gap: .85rem;
  border: 0;
  border-bottom: 1px solid #ded2bf;
  border-radius: 0;
  padding: .8rem .25rem;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.mode-selector .category-card::after {
  content: none;
}

.mode-selector .category-card:last-child {
  border-bottom: 0;
}

.mode-selector .category-card:hover {
  border-color: #ded2bf;
  background: #eee5d5;
  box-shadow: inset .28rem 0 0 #cf191d;
  transform: none;
}

.mode-selector .category-card:active,
.mode-selector .category-card[data-state="loading"] {
  background: #e5dac8;
  box-shadow: inset .28rem 0 0 #a90f14;
  transform: none;
}

.mode-selector .category-number {
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #8d7664;
  font-family: var(--font-mono);
  font-size: .7rem;
}

.mode-name {
  display: grid;
  gap: .18rem;
}

.mode-selector .mode-name strong {
  max-width: none;
  font-size: 1.1rem;
  font-weight: 850;
  letter-spacing: -.02em;
}

.mode-name small,
.mode-selector .category-best {
  color: #7b685b;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.mode-selector .category-action {
  min-width: 3.5rem;
  color: #b91519;
  font-size: .74rem;
  font-weight: 850;
  text-align: end;
  text-decoration: none;
}

.lobby-scorebar {
  display: grid;
  grid-template-columns: 1.25fr 1.45fr .8fr .8fr;
  border-block: 1px solid #bfae93;
  background: #eee5d5;
}

.lobby-scorebar > * {
  min-width: 0;
  min-height: 5.5rem;
  border: 0;
  border-right: 1px solid #cbbda6;
  padding: .9rem 1.1rem;
  background: transparent;
  color: #251916;
  text-align: start;
}

.lobby-scorebar > *:last-child {
  border-right: 0;
}

.daily-entry,
.run-summary,
.lobby-scorebar .personal-best,
.round-rules {
  display: grid;
  align-content: center;
  gap: .18rem;
}

.daily-entry {
  cursor: pointer;
}

.daily-entry:hover {
  background: #e5dac8;
}

.daily-entry span,
.run-summary > span,
.lobby-scorebar .personal-best span,
.round-rules small,
.lobby-scorebar small {
  color: #7b685b;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.daily-entry strong,
.run-summary strong,
.lobby-scorebar .personal-best strong,
.round-rules span {
  color: #251916;
  font-size: 1rem;
  font-weight: 850;
}

.daily-entry strong {
  color: #b91519;
}

.run-summary {
  grid-template-columns: 1fr auto;
}

.run-summary .run-track,
.run-summary > small {
  grid-column: 1 / -1;
}

.run-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .3rem;
}

.run-track span {
  height: .28rem;
  border-radius: .1rem;
  background: #d4c7b2;
}

.run-track span:first-child {
  background: #cf191d;
}

.round-rules {
  grid-template-columns: auto 1fr;
}

.hub-screen {
  align-content: start;
}

.hub-page {
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: clamp(1.25rem, 2.5vw, 2.25rem) 0 2rem;
  background: transparent;
}

.hub-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid #bfae93;
  padding-bottom: 1.15rem;
}

.hub-heading h1,
.hub-page > h1 {
  max-width: none;
  margin: .25rem 0 0;
  font-family: var(--font-body);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.055em;
}

.hub-date,
.hub-note {
  margin: 0;
  color: #7b685b;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .05em;
  text-align: end;
  text-transform: uppercase;
}

.daily-arena {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, .65fr);
  align-items: center;
  min-height: 24rem;
  margin-top: 1.5rem;
  border-radius: 1rem;
  padding: clamp(2rem, 5vw, 4.5rem);
  background: #4d4a2c;
  color: #fff7e8;
  overflow: hidden;
}

.daily-intro {
  max-width: 36rem;
}

.daily-round-number {
  color: #efc86d;
  font-family: var(--font-mono);
  font-size: .8rem;
}

.daily-intro h2 {
  margin: .75rem 0 1rem;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: .95;
  letter-spacing: -.055em;
}

.daily-intro > p {
  max-width: 34rem;
  margin: 0;
  color: #e7dcc7;
  font-size: 1.05rem;
  line-height: 1.55;
}

.daily-status {
  margin-top: 1.5rem;
  color: #e7dcc7;
}

.daily-buzzer {
  width: min(100%, 17rem);
  justify-self: center;
}

.daily-buzzer span {
  display: block;
  margin-top: .35rem;
  color: #fff7e8;
  font-weight: 850;
  text-align: center;
}

.daily-rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #bfae93;
}

.daily-rules div {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  border-right: 1px solid #cbbda6;
  padding: 1rem;
}

.daily-rules div:last-child {
  border-right: 0;
}

.daily-rules strong {
  font-size: 1.35rem;
}

.daily-rules span {
  color: #7b685b;
  font-family: var(--font-mono);
  font-size: .66rem;
  text-transform: uppercase;
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 1.5rem;
  border: 1px solid #bfae93;
  border-radius: .85rem;
  background: #faf7f0;
  overflow: hidden;
}

.global-board {
  min-width: 0;
  border: 0;
  border-right: 1px solid #cbbda6;
  border-radius: 0;
  padding: 1.5rem;
  background: transparent;
}

.global-board:last-child {
  border-right: 0;
}

.achievement-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 1.5rem;
  border: 1px solid #bfae93;
  border-radius: .85rem;
  background: #faf7f0;
  overflow: hidden;
}

.achievement {
  min-height: 4.8rem;
  display: grid;
  grid-template-columns: 2.5rem minmax(8rem, 1fr) minmax(12rem, 1.2fr) auto;
  align-items: center;
  gap: 1rem;
  border: 0;
  border-bottom: 1px solid #ded2bf;
  border-radius: 0;
  padding: .85rem 1.25rem;
  background: transparent;
  box-shadow: none;
}

.achievement:last-child {
  border-bottom: 0;
}

.achievement[data-state="locked"] {
  opacity: .68;
  filter: none;
}

.achievement[data-state="unlocked"] {
  border-color: #ded2bf;
  background: #f4ecdd;
  box-shadow: inset .28rem 0 0 #cf191d;
}

.achievement strong,
.achievement p {
  margin: 0;
}

.achievement strong {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 850;
}

.achievement p {
  color: #6f5e52;
}

.achievement small {
  color: #8d7664;
  font-family: var(--font-mono);
  font-size: .61rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(18rem, .6fr);
  gap: 0;
  margin-top: 1.5rem;
  border: 1px solid #bfae93;
  border-radius: .85rem;
  background: #faf7f0;
  overflow: hidden;
}

.profile-account {
  padding: 1.5rem;
}

.account-card {
  max-width: none;
  margin: 0 0 1rem;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.account-card h2 {
  font-family: var(--font-body);
  font-weight: 850;
  letter-spacing: -.035em;
}

.profile-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: none;
  margin: 0;
  border-left: 1px solid #cbbda6;
}

.profile-stats > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .3rem 1rem;
  border: 0;
  border-bottom: 1px solid #ded2bf;
  padding: 1rem 1.25rem;
}

.profile-stats > div:last-child {
  border-bottom: 0;
}

.profile-stats strong {
  font-size: 1.55rem;
}

.profile-stats small {
  grid-column: 1 / -1;
  color: #8d7664;
  font-family: var(--font-mono);
  font-size: .61rem;
  text-transform: uppercase;
}

.game-round,
.game-results {
  padding-block: clamp(1rem, 2.5vw, 2rem);
}

@media (min-width: 60rem) {
  .game-menu,
  .hub-screen {
    grid-template-columns: minmax(0, 1fr);
  }

  .game-menu > .game-sidebar,
  .hub-screen > .game-sidebar,
  .hub-screen > .hub-page {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 70rem) {
  .sidebar-foot {
    display: none;
  }

  .game-sidebar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .lobby-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .play-stage {
    min-height: 24rem;
  }

  .stage-demo-hud,
  .stage-demo-progress,
  .stage-demo-clues {
    width: min(48%, 24rem);
  }

  .lobby-scorebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lobby-scorebar > *:nth-child(2) {
    border-right: 0;
  }

  .lobby-scorebar > *:nth-child(-n + 2) {
    border-bottom: 1px solid #cbbda6;
  }
}

@media (max-width: 48rem) {
  .game-sidebar {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: .45rem;
    padding-block: .75rem .35rem;
  }

  .sidebar-heading {
    justify-content: center;
  }

  .sidebar-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    overflow: visible;
    padding-bottom: .35rem;
  }

  .sidebar-link {
    justify-content: center;
    min-width: 0;
    min-height: 2.4rem;
    padding-inline: .15rem;
    font-size: .63rem;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
  }

  .sidebar-link small {
    display: none;
  }

  .sidebar-link::after {
    bottom: -.35rem;
  }

  .play-stage {
    grid-template-columns: minmax(0, 1fr);
    padding: 2rem 1.35rem;
  }

  .play-stage::after {
    background: rgba(40, 37, 20, .79);
  }

  .stage-demo-hud,
  .stage-demo-progress {
    right: 1rem;
    width: calc(100% - 2rem);
  }

  .stage-demo-clues {
    right: 1rem;
    top: 5.15rem;
    width: calc(100% - 2rem);
  }

  .stage-demo-clue {
    grid-template-columns: 3.5rem 1fr;
    opacity: 0;
  }

  .stage-demo-clue.is-visible {
    opacity: .38;
  }

  .stage-copy {
    text-align: center;
  }

  .stage-copy h1,
  .stage-copy > p:last-child {
    margin-inline: auto;
  }

  .stage-copy h1 {
    font-size: clamp(2.6rem, 13vw, 4rem);
  }

  .quick-buzzer {
    width: min(65vw, 14rem);
    margin-bottom: 0;
  }

  .quick-mode {
    grid-template-columns: 1fr;
    gap: .25rem;
    text-align: center;
  }

  .mode-selector {
    padding: 1.25rem;
  }

  .mode-selector .category-card {
    grid-template-columns: 1.7rem minmax(0, 1fr) auto;
  }

  .mode-selector .category-best {
    display: none;
  }

  .lobby-scorebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .lobby-scorebar > * {
    min-height: 4.6rem;
    border-right: 0;
    border-bottom: 1px solid #cbbda6;
  }

  .lobby-scorebar > *:last-child {
    border-bottom: 0;
  }

  .hub-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: .5rem;
  }

  .hub-date,
  .hub-note {
    text-align: start;
  }

  .daily-arena {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding: 2rem 1.35rem;
  }

  .daily-buzzer {
    width: min(65vw, 13rem);
  }

  .daily-rules,
  .board-grid,
  .profile-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .daily-rules div,
  .global-board {
    border-right: 0;
    border-bottom: 1px solid #cbbda6;
  }

  .daily-rules div:last-child,
  .global-board:last-child {
    border-bottom: 0;
  }

  .achievement {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
  }

  .achievement p {
    grid-column: 2 / -1;
  }

  .profile-stats {
    border-top: 1px solid #cbbda6;
    border-left: 0;
  }
}

/* Lobby: a fitted miniature of the real round, with status beside it and modes below. */
.game-menu[data-screen="menu"] {
  gap: 1rem;
}

.lobby-main {
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 17rem);
  min-height: 0;
}

.play-stage {
  position: relative;
  display: block;
  min-height: 0;
  aspect-ratio: 1600 / 850;
  border-right: 1px solid #bfae93;
  padding: 0;
  background: #f3eddf;
  color: #251916;
}

.play-stage::after {
  content: none;
}

.stage-demo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #f3eddf;
}

.stage-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-olive-dark) 74%, transparent) 0%, color-mix(in srgb, var(--color-olive-dark) 43%, transparent) 42%, color-mix(in srgb, var(--color-olive-dark) 17%, transparent) 76%, transparent 100%);
  pointer-events: none;
}

.stage-demo-game {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1600px;
  height: 850px;
  display: grid;
  grid-template-rows: 54px 14px minmax(0, 1fr);
  gap: 18px;
  padding: 28px 34px 24px;
  background: #f3eddf;
  color: #251916;
  z-index: 1;
  transform: translate(-50%, -50%) scale(.5);
  transform-origin: center;
}

.stage-tagline {
  position: absolute;
  left: 18%;
  bottom: 20%;
  z-index: 4;
  width: min(23%, 25rem);
  pointer-events: none;
  color: var(--color-accent-ink);
  text-shadow: 0 .15rem .9rem color-mix(in srgb, var(--color-ink) 54%, transparent);
}

.stage-tagline .game-kicker {
  margin: 0 0 .65rem;
  color: var(--color-ochre);
}

.stage-tagline h1 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.1vw, 3.1rem);
  font-style: normal;
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.055em;
}

.stage-round-topline {
  display: flex;
  align-items: flex-start;
  gap: 34px;
  min-width: 0;
}

.stage-round-topline > span {
  flex: 0 0 130px;
  padding-top: 10px;
  color: #6f5e52;
  font-family: var(--font-mono);
  font-size: 17px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.stage-round-topline p {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  border-bottom: 1px solid #bfae93;
  padding: 4px 0 13px;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.stage-demo-clock {
  position: absolute;
  z-index: 2;
  top: 37px;
  left: 50%;
  color: #6f5e52;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  transform: translateX(-50%);
}

.stage-game-progress {
  position: relative;
  width: 100%;
  height: 14px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #e5ded0;
}

.stage-game-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #d41218;
  box-shadow: none;
  transform: scaleX(1);
  transform-origin: left center;
  will-change: transform;
}

.stage-demo-round-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  gap: 44px;
  align-self: stretch;
  align-items: stretch;
}

.stage-demo-sidebar {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-content: stretch;
  border: 1px solid #bfae93;
  background: #faf7f0;
}

.stage-demo-sidebar .score-dial {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  align-content: stretch;
  gap: 9px;
  border: 0;
  padding: 30px;
  background: transparent;
}

.stage-demo-sidebar .score-dial span,
.stage-demo-sidebar .score-dial small {
  font-family: var(--font-mono);
  font-size: 16px;
  text-transform: uppercase;
}

.stage-demo-sidebar .score-dial strong {
  align-self: center;
  justify-self: start;
  color: #d41218;
  font-size: 106px;
  line-height: .9;
}

.stage-demo-sidebar .leaderboard {
  min-height: 0;
  padding: 28px;
}

.stage-demo-sidebar .leaderboard-heading h2,
.stage-demo-sidebar .leaderboard-heading span {
  font-size: 15px;
}

.stage-demo-sidebar .leaderboard li {
  grid-template-columns: 36px 1fr auto;
  min-height: 58px;
  font-size: 19px;
}

.stage-demo-board {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  border: 0;
  padding: 0;
  background: transparent;
}

.stage-demo-board > .category-label {
  margin: 0;
  font-size: 19px;
  text-transform: uppercase;
}

.stage-demo-playfield {
  min-height: 0;
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 20px;
}

.stage-demo-media {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  border: 1px solid #bfae93;
  background: #e9e1d3;
  overflow: hidden;
}

.stage-demo-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transform: none;
  transition: opacity 300ms var(--ease-out);
}

.stage-demo-media figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
}

.stage-demo-media figcaption span {
  display: block;
  border: 1px solid rgba(255, 247, 232, .55);
  padding: 7px 11px;
  background: rgba(37, 25, 22, .8);
  color: #fff7e8;
  font-family: var(--font-mono);
  font-size: 14px;
  text-transform: uppercase;
}

.stage-demo-clue-list {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage-demo-clue-list li {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  align-items: stretch;
  border-radius: 0;
  background: #faf7f0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(34px);
}

.stage-demo-clue-list li.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stage-demo-clue-list li > span {
  min-height: 0;
}

.stage-demo-clue-list li > span::after {
  font-size: 19px;
}

.stage-demo-clue-list p {
  min-width: 0;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 18px 26px 18px 34px;
  font-size: 24px;
  font-weight: 760;
  line-height: 1.25;
}

.stage-demo-answer {
  display: grid;
  gap: 5px;
  margin: 0;
}

.stage-demo-answer label,
.stage-demo-answer .answer-feedback {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  text-transform: uppercase;
}

.stage-demo-answer .answer-row {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 18px;
}

.stage-demo-input {
  display: block;
  border: 3px solid #075bb4;
  border-radius: 18px;
  background: #faf7f0;
  box-shadow: inset 0 0 0 1px #251916;
}

.stage-demo-buzzer-space {
  display: block;
}

.stage-demo .quick-buzzer {
  position: absolute;
  z-index: 5;
  right: 2.1%;
  bottom: 3.2%;
  width: clamp(2.8rem, 4.8vw, 4.8rem);
  margin: 0;
}

.lobby-scorebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(4, minmax(0, 1fr));
  border: 0;
  background: #eee5d5;
}

.lobby-scorebar > * {
  min-height: 0;
  border: 0;
  border-bottom: 1px solid #cbbda6;
  padding: 1.15rem 1.25rem;
}

.lobby-scorebar .daily-entry,
.lobby-scorebar .personal-best {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas: "label value" "sub value";
  column-gap: .75rem;
  align-items: center;
}

.lobby-scorebar .daily-entry > span,
.lobby-scorebar .personal-best > span {
  grid-area: label;
}

.lobby-scorebar .daily-entry > strong,
.lobby-scorebar .personal-best > strong {
  grid-area: value;
  align-self: center;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.lobby-scorebar .daily-entry > small,
.lobby-scorebar .personal-best > small {
  grid-area: sub;
}

.lobby-scorebar .daily-entry > span,
.lobby-scorebar .run-summary > span,
.lobby-scorebar .personal-best > span,
.lobby-scorebar .round-rules small {
  font-size: .74rem;
  line-height: 1.2;
}

.lobby-scorebar > *:last-child {
  border-bottom: 0;
}

.lobby-scorebar .run-summary {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  grid-template-areas: "label value" "track value" "sub value";
  column-gap: .75rem;
}

.lobby-scorebar .run-summary > span { grid-area: label; }
.lobby-scorebar .run-summary > strong { grid-area: value; align-self: center; text-align: end; }
.lobby-scorebar .run-summary .run-track { grid-area: track; }
.lobby-scorebar .run-summary > small { grid-area: sub; }

.lobby-scorebar .run-summary strong {
  font-size: 1.15rem;
}

.lobby-scorebar .run-track,
.lobby-scorebar .run-summary > small {
  grid-column: auto;
}

.lobby-scorebar .round-rules {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas: "seconds-label seconds-value" "points-label points-value";
  column-gap: .75rem;
}

.lobby-scorebar .round-rules span:nth-of-type(2) { grid-area: seconds-value; text-align: end; }
.lobby-scorebar .round-rules small:nth-of-type(1) { grid-area: seconds-label; }
.lobby-scorebar .round-rules span:nth-of-type(3) { grid-area: points-value; text-align: end; }
.lobby-scorebar .round-rules small:nth-of-type(2) { grid-area: points-label; }

.lobby-scorebar .personal-best strong,
.lobby-scorebar .round-rules span,
.lobby-scorebar .daily-entry strong {
  font-size: 1.35rem;
}

.mode-selector {
  border: 1px solid #bfae93;
  border-radius: 1.1rem;
  padding: 0;
  background: #faf7f0;
  box-shadow: 0 .6rem 1.5rem rgba(62, 45, 31, .07);
  overflow: hidden;
}

.mode-heading {
  align-items: center;
  border-bottom: 1px solid #cbbda6;
  padding: .9rem 1.2rem;
}

.mode-heading h2 {
  font-size: 1.45rem;
}

.mode-selector .category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mode-selector .category-card {
  min-height: 8.3rem;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  gap: .45rem .7rem;
  border-right: 1px solid #ded2bf;
  border-bottom: 0;
  padding: 1rem;
}

.mode-selector .category-card:last-child {
  border-right: 0;
}

.mode-selector .category-card:hover {
  box-shadow: inset 0 -.28rem 0 #cf191d;
}

.mode-selector .category-number {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: start;
  padding-top: .15rem;
}

.mode-selector .mode-name {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.mode-selector .category-best {
  grid-column: 2;
  grid-row: 2;
}

.mode-selector .category-action {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
}

@media (max-width: 70rem) {
  .lobby-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .play-stage {
    border-right: 0;
    border-bottom: 1px solid #bfae93;
  }

  .lobby-scorebar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(6.25rem, auto);
  }

  .lobby-scorebar > * {
    border-right: 1px solid #cbbda6;
    border-bottom: 0;
  }

  .lobby-scorebar > *:last-child {
    border-right: 0;
  }

  .mode-selector .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mode-selector .category-card:nth-child(2) {
    border-right: 0;
  }

  .mode-selector .category-card:nth-child(-n + 2) {
    border-bottom: 1px solid #ded2bf;
  }

  .stage-tagline {
    left: 18%;
    width: 25%;
  }
}

@media (max-width: 48rem) {
  .play-stage {
    aspect-ratio: 16 / 9;
  }

  .lobby-scorebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(5.5rem, auto));
  }

  .lobby-scorebar > *:nth-child(2) {
    border-right: 0;
  }

  .lobby-scorebar > *:nth-child(-n + 2) {
    border-bottom: 1px solid #cbbda6;
  }

  .mode-selector .category-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mode-selector .category-card,
  .mode-selector .category-card:nth-child(2),
  .mode-selector .category-card:nth-child(-n + 2) {
    min-height: 6.8rem;
    border-right: 0;
    border-bottom: 1px solid #ded2bf;
  }

  .mode-selector .category-card:last-child {
    border-bottom: 0;
  }

  .stage-tagline {
    left: 17%;
    bottom: 18%;
    width: 30%;
  }

  .stage-tagline h1 {
    font-size: clamp(1.15rem, 4.8vw, 1.8rem);
  }
}

/* Lobby interaction: stats and game modes share one deliberate hover state. */
.lobby-scorebar > *,
.mode-selector .category-card {
  transition:
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  transform-origin: center;
}

.lobby-scorebar > *:hover,
.lobby-scorebar > *:focus-visible,
.mode-selector .category-card:hover,
.mode-selector .category-card:focus-visible {
  position: relative;
  z-index: 2;
  background: var(--color-olive-dark);
  color: var(--color-accent-ink);
  border-color: var(--color-olive-dark);
  box-shadow: 0 .45rem 0 color-mix(in srgb, var(--color-olive-dark) 72%, var(--color-ink));
  transform: scale(1.025);
}

.lobby-scorebar > *:hover *,
.lobby-scorebar > *:focus-visible *,
.mode-selector .category-card:hover *,
.mode-selector .category-card:focus-visible * {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .lobby-scorebar > *,
  .mode-selector .category-card {
    transition: none;
  }
}

/* Results: turn the end screen into a compact debrief, not a blank score page. */
.game-results {
  display: grid;
  width: min(100%, 74rem);
  gap: 1.25rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-panel);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--color-card);
}

.results-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: 1px solid #cbbda6;
  padding-bottom: 1rem;
}

.results-heading h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(2.35rem, 6vw, 5.5rem);
  line-height: .9;
}

.results-heading .result-badge {
  margin: 0 0 .2rem;
}

.results-grid {
  display: grid;
  grid-template-columns: minmax(14rem, .72fr) minmax(0, 1.28fr);
  gap: 1rem;
  align-items: stretch;
}

.result-summary,
.result-review {
  min-width: 0;
  border: 1px solid #cbbda6;
  background: var(--color-paper);
}

.result-summary {
  display: flex;
  min-height: 16rem;
  flex-direction: column;
  padding: 1.25rem;
}

.result-label {
  margin: 0 0 .75rem;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.result-score {
  display: flex;
  min-height: 9.5rem;
  flex: 1;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  border: 0;
  border-radius: .55rem;
  padding: 1.15rem 1.25rem;
  background: var(--color-olive-dark);
  color: var(--color-accent-ink);
}

.result-score strong {
  font-family: var(--font-body);
  font-size: clamp(4.8rem, 10vw, 8rem);
  font-weight: 850;
  line-height: .72;
  letter-spacing: -.08em;
  font-variant-numeric: tabular-nums;
}

.result-score span {
  padding-bottom: .25rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.result-copy {
  margin: 1rem 0 0;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.45;
}

.result-review {
  padding: 1.25rem;
}

.result-review-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #cbbda6;
  padding-bottom: .8rem;
}

.result-review-heading .result-label {
  margin-bottom: .3rem;
}

.result-review-heading h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  font-weight: 850;
  letter-spacing: -.045em;
}

.result-review-heading > span {
  flex: 0 0 auto;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.result-misses {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-miss {
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  border-bottom: 1px solid #ded2bf;
  padding: .85rem 0;
}

.result-miss:last-child {
  border-bottom: 0;
}

.result-miss-index {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 800;
}

.result-miss strong,
.result-miss small {
  display: block;
}

.result-miss strong {
  font-size: 1.1rem;
  line-height: 1.1;
}

.result-miss small {
  margin-top: .25rem;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.result-miss-status {
  color: var(--color-olive-dark);
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.result-miss--clean {
  grid-template-columns: 2.3rem minmax(0, 1fr);
  border-bottom: 0;
}

.result-miss--clean .result-miss-index {
  color: var(--color-success);
}

.result-actions {
  margin-top: 0;
  border-top: 1px solid #cbbda6;
  padding-top: 1rem;
}

@media (max-width: 48rem) {
  .results-heading {
    align-items: start;
    flex-direction: column;
  }

  .results-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .result-summary {
    min-height: 0;
  }
}

/* Matchmaking controls: a deliberate switch, explicit board selection, one red buzz. */
.play-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  border: 1px solid #cbbda6;
  border-radius: var(--radius-round);
  padding: .2rem;
  background: var(--color-paper);
}

.play-mode-switch button {
  min-height: 2.2rem;
  border: 0;
  border-radius: var(--radius-round);
  padding: .35rem .8rem;
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.play-mode-switch button.is-active {
  background: var(--color-olive-dark);
  color: var(--color-accent-ink);
}

.mode-selector .category-card[data-selected="true"] {
  position: relative;
  z-index: 2;
  border-color: var(--color-olive-dark);
  background: var(--color-olive-dark);
  color: var(--color-accent-ink);
  box-shadow: 0 .45rem 0 color-mix(in srgb, var(--color-olive-dark) 72%, var(--color-ink));
  transform: scale(1.025);
}

.mode-selector .category-card[data-selected="true"] * {
  color: inherit;
}

.mode-selector .category-card[data-selected="true"]:hover,
.mode-selector .category-card[data-selected="true"]:focus-visible {
  border-color: var(--color-olive-dark);
  background: var(--color-olive-dark);
  color: var(--color-accent-ink);
  box-shadow: 0 .45rem 0 color-mix(in srgb, var(--color-olive-dark) 72%, var(--color-ink));
}

.queue-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, .72fr);
  gap: 1.25rem 2rem;
  align-items: center;
  border: 1px solid var(--color-olive);
  border-radius: var(--radius-panel);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  background: color-mix(in srgb, var(--color-olive) 8%, var(--color-card));
}

.queue-intro h2 {
  max-width: 16ch;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 850;
  line-height: .98;
  letter-spacing: -.05em;
}

.queue-intro p:last-child {
  max-width: 48ch;
  margin: .75rem 0 0;
  color: var(--color-muted);
  line-height: 1.4;
}

.queue-selection {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  border-left: 1px solid #cbbda6;
  padding-left: 1.25rem;
}

.queue-selection .result-label {
  margin-bottom: .45rem;
}

.queue-selection ul {
  display: grid;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.queue-selection li {
  color: var(--color-ink);
  font-size: .94rem;
  font-weight: 750;
}

.queue-selection .queue-empty {
  color: var(--color-muted);
  font-size: .82rem;
  font-weight: 500;
}

.queue-buzzer {
  position: relative;
  width: 4.9rem;
  height: 4.9rem;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

.queue-buzzer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 .2rem 0 var(--color-accent-dark));
}

.queue-buzzer span {
  position: absolute;
  top: calc(100% + .6rem);
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.queue-buzzer:hover:not(:disabled) {
  transform: scale(1.07) rotate(-2deg);
}

.queue-buzzer:active:not(:disabled) {
  transform: scale(.96);
}

.queue-buzzer:disabled {
  cursor: not-allowed;
  opacity: .4;
}

.queue-status,
.queue-auth-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .04em;
}

.queue-auth-note {
  color: var(--color-accent);
  font-weight: 800;
}

.queue-cancel {
  grid-column: 1 / -1;
  justify-self: start;
}

.profile-name-form {
  display: grid;
  gap: .45rem;
  margin-top: 1rem;
  border-top: 1px solid #ded2bf;
  padding-top: 1rem;
}

.profile-name-form label {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.profile-name-form > div {
  display: flex;
  gap: .6rem;
}

.profile-name-form input {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-round);
  padding: .6rem .8rem;
  background: var(--color-paper);
  color: var(--color-ink);
}

.profile-name-form .button-inline {
  min-width: auto;
  padding-inline: .9rem;
  font-size: .68rem;
}

.profile-name-form small {
  color: var(--color-muted);
  font-size: .75rem;
}

@media (max-width: 56rem) {
  .queue-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .queue-selection {
    border-top: 1px solid #cbbda6;
    border-left: 0;
    padding-top: 1rem;
    padding-left: 0;
  }
}

@media (max-width: 30rem) {
  .mode-heading {
    align-items: start;
    flex-direction: column;
  }

  .mode-round-count {
    margin-inline-start: 0;
  }

  .play-mode-switch {
    width: 100%;
  }

  .play-mode-switch button {
    flex: 1;
  }

  .profile-name-form > div {
    align-items: stretch;
    flex-direction: column;
  }
}