/* Desktop quiz shell — ≥1024px only.
 *
 * Visual reference: Stitch "Chinese Quiz Master - Final Desktop Polish"
 * (projects/1759201733620880615/screens/d015f55040144e6d, exported copy under
 * stitch-design/generated/stitch-update-2026-09-19/).
 *
 * The Stitch frame is a 2560x2048 artboard with its own palette (sky blue / pink /
 * yellow / Baloo 2). Per the agreed scope we keep the STRUCTURE — game-window chrome,
 * brand + stats bar, star progress, chunky 4-colour answers — and render it with this
 * site's own tokens (Celestial Scholar: primary #006c49, #10b981, #006398, #e29100,
 * surface #f9f9ff, Plus Jakarta Sans + Sarabun + Noto Sans SC) so it matches Welcome /
 * Home / the entry screens instead of introducing a second design language.
 *
 * Nothing here changes mobile or tablet layout, and no game logic depends on it:
 * every element is decorative and mirrors values the round already tracks.
 */

/* Hidden on phones / tablets — the mobile quiz UI is untouched. */
.fufu-win-bar,
.fufu-hud { display: none; }

@media (min-width: 1024px) {
  /* ---------- the game window ---------- */
  #quiz-container {
    width: calc(100% - 3rem);
    max-width: 68rem;
    margin: 1.25rem auto 2rem;
    padding: 0 2.5rem 2rem;
    background: linear-gradient(180deg, #f0f3ff 0%, #e7eeff 100%);
    border: 12px solid var(--fufu-on-surface);
    border-radius: 2rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
    overflow: hidden;
  }

  .fufu-win-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 2.25rem;
    margin: 0 -2.5rem 1.25rem;
    padding: 0 1.25rem;
    background: var(--fufu-on-surface);
  }
  .fufu-win-dot { width: .75rem; height: .75rem; border-radius: 9999px; flex: 0 0 auto; }
  .fufu-win-dot[data-tone="red"] { background: #ff5f56; }
  .fufu-win-dot[data-tone="amber"] { background: #ffbd2e; }
  .fufu-win-dot[data-tone="green"] { background: #27c93f; }
  .fufu-win-title {
    flex: 1;
    text-align: center;
    color: rgba(255, 255, 255, .82);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* the viewport-top hairline is replaced by the in-window star progress */
  #quiz-progress-line { display: none; }

  /* the header keeps only the back button — the HUD owns counter + score */
  #quiz-container > header { max-width: none; padding: .25rem 0 .5rem; }
  .fufu-counter-pill,
  .fufu-score-pill { display: none; }

  /* ---------- brand + live stats + star progress ---------- */
  .fufu-hud { display: flex; flex-direction: column; gap: 1.1rem; width: 100%; }
  .fufu-hud-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
  }
  .fufu-hud-brand { min-width: 0; }
  .fufu-hud-brand h2 {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.01em;
    background: linear-gradient(90deg, var(--fufu-primary-container), var(--fufu-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .fufu-hud-brand p {
    margin-top: .25rem;
    color: var(--fufu-on-surface-variant);
    font-weight: 600;
    font-size: clamp(.85rem, 1.2vw, 1rem);
  }

  .fufu-hud-stats {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex: 0 0 auto;
    background: #fff;
    border: 4px solid rgba(255, 255, 255, .55);
    border-radius: 9999px;
    padding: .5rem 1.35rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  }
  .fufu-stat { display: flex; align-items: center; gap: .5rem; }
  .fufu-stat strong {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--fufu-on-surface);
    white-space: nowrap;
  }
  .fufu-stat-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: 0 0 auto;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .14);
  }
  .fufu-stat-dot .material-symbols-outlined { font-size: 18px; }
  .fufu-stat-dot[data-tone="green"] { background: var(--fufu-primary-container); }
  .fufu-stat-dot[data-tone="blue"] { background: var(--fufu-secondary-container); }
  .fufu-stat-dot[data-tone="amber"] { background: var(--fufu-tertiary-container); }
  .fufu-stat-dot[data-tone="primary"] { background: var(--fufu-primary); }
  .fufu-stat-sep { width: 1px; height: 2rem; background: #d8e3fb; flex: 0 0 auto; }

  .fufu-hud-progress { display: flex; align-items: center; gap: 1rem; }
  .fufu-progress-track {
    position: relative;
    flex: 1 1 auto;
    height: 1.35rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 2px 6px rgba(15, 23, 42, .07);
  }
  .fufu-progress-fill {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--fufu-primary-fixed, #6ffbbe), var(--fufu-primary-container));
    transition: width .5s ease;
  }
  .fufu-progress-star {
    position: absolute;
    top: 50%;
    width: 2.6rem;
    height: 2.6rem;
    transform: translate(-50%, -50%);
    transition: left .5s ease;
    pointer-events: none;
  }
  .fufu-progress-star svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(15, 23, 42, .2)); }
  .fufu-progress-label {
    flex: 0 0 auto;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: rgba(17, 28, 45, .6);
    border-radius: 9999px;
    padding: .3rem .85rem;
    white-space: nowrap;
  }

  /* ---------- question card: wide + short, like the Stitch artboard ---------- */
  #quiz-question-card {
    aspect-ratio: auto;
    max-width: 44rem;
    min-height: clamp(12rem, 26vh, 17rem);
    background: #fff;
    border: 4px solid rgba(255, 255, 255, .6);
    border-radius: 2rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  }
  #quiz-question-type { top: 1.25rem; }
  #quiz-question-text { margin-bottom: 3.25rem !important; }

  /* ---------- stage + answers ---------- */
  #quiz-container > main { max-width: none; padding-inline: 0; gap: 1.25rem; }
  #quiz-choices {
    max-width: 44rem;
    gap: 1.25rem;
    margin-top: .75rem;
    margin-bottom: .5rem;
  }
  #quiz-choices .quiz-opt-btn {
    min-height: 6.5rem;
    border-radius: 1.5rem;
    border-bottom-width: 6px;
  }
  #quiz-choices .quiz-opt-btn .text-xl { font-size: 1.35rem; }
  #quiz-choices .quiz-opt-btn .text-5xl { font-size: 2.75rem; }

  #btn-next-quiz { max-width: 44rem; margin-inline: auto; }
  #quiz-hearts { margin-bottom: 0; }
}

/* ---------- short viewports (iPad landscape 810-834px, laptops 768-800px) ----------
   The desktop chrome above is sized for a tall monitor; at these heights it pushed the last
   answer button below the fold (found by tests/ipad_webkit.mjs on iPad landscape). Everything
   here is height-relative — no per-device widths — so any short viewport compresses instead of
   clipping. The window border/padding, the HUD, the card and the option buttons each give back
   a proportional share. */
@media (min-width: 1024px) and (max-height: 900px) {
  #quiz-container { margin: .5rem auto .75rem; border-width: 8px; padding: 0 1.5rem 1rem; }
  .fufu-win-bar { height: 1.75rem; margin: 0 -1.5rem .5rem; }
  #quiz-container > header { padding: .125rem 0 .25rem; }
  .fufu-hud { gap: .5rem; }
  .fufu-eye-label { display: none; }
  #quiz-question-card { min-height: clamp(7rem, 17vh, 11rem); }
  #quiz-question-type { top: .6rem; }
  #quiz-question-text { margin-bottom: 1.5rem !important; }
  #quiz-container > main { gap: .6rem; min-height: 0; }
  #quiz-choices { gap: .5rem; margin-top: .35rem; margin-bottom: .25rem; }
  #quiz-choices .quiz-opt-btn { min-height: clamp(2.75rem, 7.5vh, 4.5rem); }
  #quiz-choices .quiz-opt-btn .text-xl { font-size: 1.1rem; }
  #quiz-choices .quiz-opt-btn .text-5xl { font-size: 2.25rem; }
}

/* Very short (e.g. 1024x600 windows): drop the decorative chrome first — the round itself
   (question, options, next button) always survives; the HUD mirror and the empty desktop
   header are the first things to go, then the card and options shrink further. */
@media (min-width: 1024px) and (max-height: 700px) {
  .fufu-hud-stats { display: none; }
  #quiz-container > header { display: none; }
  .fufu-win-bar { height: 1.25rem; margin-bottom: .35rem; }
  #quiz-question-card { min-height: 5.5rem; }
  #quiz-question-text { margin-bottom: .75rem !important; font-size: clamp(1.05rem, 4.2vh, 1.7rem) !important; }
  #quiz-choices .quiz-opt-btn { min-height: 2.25rem; }
  #quiz-container { margin: .25rem auto .5rem; }
}

/* Large desktop: a touch more breathing room, still no scrolling. */
@media (min-width: 1440px) {
  #quiz-container { max-width: 72rem; }
  #quiz-question-card,
  #quiz-choices { max-width: 48rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fufu-progress-fill,
  .fufu-progress-star { transition: none !important; }
}