/* Readable, premium-feeling answer choices on a small screen. */
@media (max-height: 700px) {
  /* The base app reserves 640px; let short browser/iPhone-height viewports fit exactly. */
  .app { min-height: 100svh; }
  .start-visual { min-height: 0; }
  .quiz-panel { height: calc(37% - 8px) !important; padding-bottom: 8px !important; }
  /* Keep all four answers inside a short viewport while preserving a 44px touch target. */
  .quiz-panel .choices { grid-auto-rows: minmax(44px, 1fr); }
  .quiz-panel .choice { min-height: 44px; padding: 8px 12px; font-size: 18px; }
}
.choices .choice {
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid rgba(149, 208, 255, .22);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(28, 65, 111, .98), rgba(14, 38, 73, .98));
  box-shadow: 0 5px 14px rgba(1, 10, 28, .22), inset 0 1px 0 rgba(255,255,255,.08);
  color: #f7fbff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.choices .choice span {
  min-width: 0;
  font-size: inherit;
  line-height: 1.25;
}
.choices .choice b {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(123, 217, 255, .36);
  border-radius: 9px;
  background: rgba(123, 217, 255, .14);
  color: #9ce5ff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.choices .choice:hover,
.choices .choice:focus-visible {
  border-color: rgba(123, 217, 255, .72);
  background: linear-gradient(145deg, rgba(37, 83, 137, .99), rgba(17, 48, 88, .99));
  box-shadow: 0 7px 18px rgba(24, 123, 181, .18), inset 0 1px 0 rgba(255,255,255,.12);
  outline: none;
}

/* Keep the start-screen's top-right hangar action comfortably tappable on iPhone. */
.start-header .mini-button {
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Leave a little more breathing room below the home hangar CTA on short iPhone screens. */
.start-screen {
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* Let the answer cards use the lower part of the quiz panel instead of leaving a dead zone. */
.quiz-panel {
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
}

/* Result is a separate decision state: keep the old question and HUD from competing with its CTAs. */
.app[data-phase="result"] .quiz-panel,
.app[data-phase="result"] .game-top {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep the result actions above the iPhone home indicator. */
.game-result {
  padding-bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
}
.quiz-panel .choices {
  flex: 1 1 auto;
  min-height: 0;
  align-content: stretch;
  grid-auto-rows: minmax(58px, 1fr);
}
.quiz-panel .choice {
  min-height: 58px;
}

/* Make answer feedback survive the base card styling. */
.choices .choice.correct {
  border-color: #8ff0bb !important;
  background: linear-gradient(145deg, rgba(28, 126, 91, .98), rgba(14, 76, 66, .98)) !important;
  box-shadow: 0 0 0 2px rgba(143, 240, 187, .22), 0 8px 22px rgba(30, 190, 132, .28), inset 0 1px 0 rgba(255,255,255,.18) !important;
  outline: 2px solid #8ff0bb !important;
  outline-offset: -2px;
  color: #f5fff9 !important;
  animation: correct-answer-pop .42s ease-out both;
}
.choices .choice.correct b {
  border-color: rgba(172, 255, 207, .72) !important;
  background: rgba(172, 255, 207, .2) !important;
  color: #d8ffe8 !important;
}
.choices .choice.wrong {
  border-color: #ff9a92 !important;
  background: linear-gradient(145deg, rgba(137, 52, 68, .98), rgba(75, 32, 56, .98)) !important;
  box-shadow: 0 0 0 2px rgba(255, 126, 114, .16), 0 7px 18px rgba(210, 54, 75, .2) !important;
}
@keyframes correct-answer-pop {
  0% { transform: scale(.98); }
  55% { transform: scale(1.025); }
  100% { transform: scale(1); }
}


.clean-space-stream .clean-stream-object {
  top: -160px !important;
  animation-delay: 0s !important;
}
@keyframes clean-asset-fall-from-above {
  0% { margin-top: 0; opacity: 0; }
  14% { opacity: .86; }
  82% { opacity: .86; }
  100% { margin-top: var(--asset-travel, calc(100% + 320px)); opacity: 0; }
}

/* Replace the artificial aurora with a thin, diffuse atmospheric mist. */
.clean-space-stream .clean-atmosphere {
  right: 4% !important;
  top: -160px !important;
  width: 190px !important;
  height: 104px !important;
  border-radius: 50% !important;
  background-image:
    radial-gradient(ellipse at 42% 48%, rgba(220, 242, 255, .34) 0%, rgba(174, 220, 244, .18) 38%, transparent 72%),
    linear-gradient(166deg, transparent 20%, rgba(197, 231, 247, .2) 46%, transparent 76%) !important;
  background-color: transparent !important;
  filter: blur(5px) drop-shadow(0 8px 14px rgba(141, 202, 232, .14)) !important;
  opacity: .62 !important;
}

/* In-game purchase confirmation instead of the native browser dialog. */
.purchase-modal {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 8, 23, .72);
  backdrop-filter: blur(7px);
}
.purchase-modal[hidden] { display: none; }
.purchase-card {
  width: min(100%, 340px);
  padding: 22px 20px 18px;
  border: 1px solid rgba(123, 217, 255, .46);
  border-radius: 22px;
  background: linear-gradient(150deg, #173c69, #0b1c3b 82%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255,255,255,.1);
  text-align: center;
}
.purchase-card .kicker { color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .2em; }
.purchase-card h3 { margin: 8px 0 6px; color: #fff; font-size: 22px; }
.purchase-card p { margin: 0; color: #b7cae2; font-size: 13px; line-height: 1.5; }
.purchase-cost { margin: 17px 0 18px; color: var(--gold); font-size: 15px; font-weight: 800; }
.purchase-cost b { margin-left: 4px; color: #fff; font-size: 22px; }
.purchase-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.purchase-actions button { min-height: 48px; border-radius: 13px; font-size: 14px; font-weight: 900; }

/* Final short-viewport guard: the compact grid must win over the base 58px cards. */
@media (max-height: 700px) {
  .quiz-panel .choices { grid-auto-rows: minmax(44px, 1fr) !important; }
  .quiz-panel .choice { min-height: 44px !important; padding: 8px 12px; font-size: 18px; }
}.purchase-cancel { border: 1px solid rgba(169, 193, 220, .35); background: rgba(255,255,255,.06); color: #c9d8eb; }
.purchase-confirm { border: 1px solid rgba(255, 211, 106, .75); background: linear-gradient(135deg, #866331, #5d431f); color: #fff5d1; }
.purchase-actions button:active { transform: scale(.97); }

/* The Pico UFO is a horizontal visitor, not a top-down falling object. */
.clean-space-stream .clean-piko-ufo {
  top: 31% !important;
  animation-delay: 0s !important;
}

/* Quiet motion cue: a sparse star field keeps the flight scene alive without competing with the quiz. */
.playfield::before,
.playfield::after {
  position: absolute;
  z-index: 1;
  inset: -22% -8%;
  pointer-events: none;
  content: "";
  background-repeat: repeat;
  opacity: 0;
  will-change: background-position;
}
.playfield::before {
  background-image:
    radial-gradient(circle at 12px 18px, rgba(222, 244, 255, .72) 0 1px, transparent 1.6px),
    radial-gradient(circle at 82px 64px, rgba(143, 214, 255, .52) 0 1px, transparent 1.7px),
    radial-gradient(circle at 148px 34px, rgba(255, 255, 255, .48) 0 .8px, transparent 1.5px),
    radial-gradient(circle at 42px 118px, rgba(123, 217, 255, .42) 0 .8px, transparent 1.5px);
  background-size: 176px 146px;
}
.playfield::after {
  background-image:
    radial-gradient(circle at 30px 28px, rgba(255, 255, 255, .42) 0 .8px, transparent 1.5px),
    radial-gradient(circle at 116px 92px, rgba(190, 229, 255, .38) 0 .8px, transparent 1.5px),
    radial-gradient(circle at 184px 48px, rgba(123, 217, 255, .34) 0 .8px, transparent 1.5px);
  background-size: 236px 184px;
}
.playfield[data-grounded="false"]::before,
.playfield[data-grounded="false"]::after {
  opacity: .52;
  animation: quiet-star-drift 15s linear infinite;
}
.playfield[data-grounded="false"]::after {
  opacity: .32;
  animation-duration: 24s;
  animation-direction: reverse;
}
@keyframes quiet-star-drift {
  from { background-position: 0 0; }
  to { background-position: 0 184px; }
}