/* Final layout layer: keeps the game aligned after shared site styles load. */
body.with-game-info {
  display: block;
  width: 100%;
  min-height: 100dvh;
}

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

.game-shell > .game-card {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
}

.screen,
.hud,
.question-top,
.answers,
.feedback,
.result-grid {
  min-width: 0;
  max-width: 100%;
}

/* The shared platform layer uses white headings on dark surfaces. Grammix's
   question screen is intentionally light, so its prompt needs a scoped ink
   color that remains readable after the platform stylesheet loads. */
.question-screen #questionText {
  color: #253951;
  text-shadow: none;
}

/* The heading receives programmatic focus when a question opens, but it is
   not an interactive control or part of the tab order. Avoid drawing the
   browser's oversized focus rectangle around the entire prompt. */
.question-screen #questionText:focus {
  outline: none;
}

.level-picker {
  width: min(360px, 100%);
  display: grid;
  gap: 6px;
  color: #53657a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}

.data-state {
  width: min(360px, 100%);
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 9px 12px;
  border-radius: 12px;
  color: #574579;
  background: #eee8fb;
  font-size: 13px;
  font-weight: 800;
}

.data-state.is-ready { color: #176b50; background: #e1f5eb; }
.data-state.is-error { color: #a22d46; background: #ffedf1; }

.level-picker select {
  width: 100%;
  min-height: 48px;
  padding: 10px 38px 10px 13px;
  border: 2px solid #d9cff1;
  border-radius: 14px;
  color: #2d4058;
  background: #fff;
  font-weight: 800;
  text-transform: none;
}

.level-banner {
  margin: 0 0 10px;
  padding: 7px 14px;
  border-radius: 999px;
  color: #fff;
  background: #7148d7;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
}

@media (max-width: 1024px) {
  .game-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .game-shell > .game-card {
    grid-column: 1;
  }

}

/* Keep the full play control set above the fold on shorter laptop screens. */
@media (min-width: 641px) and (max-height: 900px) {
  .game-card,
  .screen {
    min-height: max(500px, calc(100svh - 100px));
  }

  .play-screen {
    padding-block: 16px;
  }

  .play-screen .wheel-stage {
    width: min(420px, max(250px, calc(100svh - 350px)));
  }

  .play-screen .status-banner {
    margin-block: 10px 6px;
  }
}

@media (max-width: 640px) {
  :root {
    --mobile-wheel-size: clamp(220px, min(calc(100vw - 44px), calc(100svh - 311px)), 360px);
    --wheel-label-radius: calc(var(--mobile-wheel-size) * .4);
  }

  .site-header {
    width: 100%;
    padding-inline: max(12px, env(safe-area-inset-left));
  }

  .site-header-actions {
    min-width: 0;
    margin-left: auto;
  }

  .game-shell {
    width: 100%;
    padding: 8px;
    gap: 14px;
  }

  .game-card {
    width: 100%;
    min-height: 0;
    border-radius: 20px;
  }

  .screen {
    width: 100%;
    min-height: max(560px, calc(100svh - 74px));
    padding: 20px 14px;
  }

  .play-screen {
    height: calc(100svh - 74px);
    min-height: 0;
    padding-block: 10px 12px;
    overflow: hidden;
  }

  .home-screen {
    gap: 12px;
  }

  .home-screen h1 {
    max-width: 100%;
    font-size: clamp(42px, 15vw, 64px);
    line-height: .95;
    letter-spacing: -.055em;
  }

  .tagline {
    font-size: clamp(16px, 5vw, 20px);
  }

  .hero-orbit {
    width: 190px;
    height: 98px;
    transform: scale(.9);
  }

  .wheel-stage {
    width: min(100%, var(--mobile-wheel-size));
    height: var(--mobile-wheel-size);
    max-width: 100%;
    flex: 0 1 auto;
  }

  .wheel {
    width: 92%;
    height: 92%;
  }

  .wheel-pointer {
    top: 0;
    border-left-width: 19px;
    border-right-width: 19px;
    border-top-width: 39px;
  }

  .wheel-label {
    width: 68px;
    margin-left: -34px;
    font-size: 8px;
    line-height: 1;
    transform-origin: 34px 0;
  }

  .wheel-label b {
    margin-bottom: 1px;
    font-size: 14px;
  }

  .wheel-hub {
    width: 58px;
    height: 58px;
    border-width: 5px;
    font-size: 18px;
  }

  .status-banner {
    width: 100%;
    margin: 10px 0 6px;
    padding: 9px 12px;
    font-size: 14px;
  }

  .spin-button {
    width: min(220px, 80%);
    margin-top: 6px;
    flex: 0 0 auto;
  }

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

  .hud > div {
    min-width: 0;
  }

  .hud strong {
    font-size: clamp(17px, 5vw, 22px);
  }

  .hearts {
    overflow-wrap: normal;
    white-space: nowrap;
    font-size: clamp(13px, 4vw, 17px);
  }

  .question-screen {
    justify-content: flex-start;
  }

  .question-top {
    flex-wrap: wrap;
  }

  .category-pill,
  .difficulty {
    max-width: 100%;
    white-space: normal;
  }

  .question-count {
    margin-top: 18px;
  }

  .question-screen h2 {
    width: 100%;
    font-size: clamp(23px, 7vw, 32px);
  }

  .answer-button {
    width: 100%;
    min-height: 60px;
    padding: 11px 12px;
    border-radius: 15px;
  }

  .feedback {
    padding: 17px 14px;
  }

  .result-grid {
    gap: 8px;
  }

  .result-grid > div {
    padding: 14px 5px;
  }

  .result-grid strong {
    font-size: 22px;
  }

}

@media (max-width: 380px) {
  .site-brand {
    flex: 0 0 auto;
  }

  .site-back {
    max-width: none;
    white-space: nowrap;
  }

  .screen {
    min-height: 540px;
    padding-inline: 11px;
  }

  .home-actions,
  .result-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .home-actions button,
  .result-actions button {
    width: 100%;
  }

  .wheel-stage {
    width: min(100%, var(--mobile-wheel-size));
  }
}