/* ═══════════════════════════════════════════
   QUESTION SCREEN, PASSAGE, PONY
═══════════════════════════════════════════ */

#screen-question {
  background: linear-gradient(180deg, #0D2B0D 0%, #152515 100%);
}

.question-area {
  padding: 0.8rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}


.mc-submit-wrap {
  margin-top: 0.35rem;
}
.mc-submit-wrap.hidden {
  display: none;
}

.q-meta {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.q-number {
  font-size: 0.6rem;
  color: var(--mc-text-dim);
}

.q-standard {
  font-size: 0.55rem;
  background: var(--mc-lapis);
  color: white;
  padding: 2px 8px;
  border: 2px solid var(--mc-border);
}

.q-difficulty {
  font-size: 0.55rem;
  padding: 2px 8px;
  border: 2px solid var(--mc-border);
}
.q-difficulty.easy   { background: #2A6A2A; color: #55FF55; }
.q-difficulty.medium { background: #6A5A00; color: #FFFF55; }
.q-difficulty.hard   { background: #6A1A1A; color: #FF5555; }

.question-panel {
  background: var(--mc-panel);
}

.question-text {
  font-family: var(--font-vt);
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--mc-text);
}

/* ─── OPEN ANSWER ─────────────────────────── */
.open-area {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.open-input { flex: 1; min-width: 200px; }

/* ─── HINT ────────────────────────────────── */
.hint-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hint-text {
  font-family: var(--font-vt);
  font-size: 1.2rem;
  background: #2A2A1A;
  border: 3px solid var(--mc-gold);
  padding: 0.6rem 0.8rem;
  color: var(--mc-gold);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════
   PASSAGE AREA (ELA)
═══════════════════════════════════════════ */
.passage-area {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.passage-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.passage-meta { flex: 1; min-width: 0; }

.passage-label {
  font-size: 0.45rem;
  color: var(--mc-text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.passage-title-text {
  font-size: 0.6rem;
  color: #D4921A;
  line-height: 1.4;
}

.pony-name-badge {
  font-size: 0.55rem;
  color: #C0A060;
  margin-top: 0.2rem;
}

.passage-scroll-outer {
  position: relative;
  width: 100%;
}

/* macOS / many browsers hide native overlay scrollbars — this row + rail is always visible when content overflows. */
.passage-scroll-row {
  display: flex;
  align-items: stretch;
  max-height: 155px;
  background: #120B04;
  border: 3px solid #3A2010;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
  border-radius: 2px;
}

.passage-scroll {
  flex: 1;
  min-width: 0;
  max-height: 155px;
  overflow-y: auto;
  padding: 0.8rem 0.5rem 0.8rem 1rem;
  background: transparent;
  border: none;
  box-shadow: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.passage-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.passage-scroll-rail {
  display: none;
  flex: 0 0 14px;
  position: relative;
  background: #0a0604;
  border-left: 2px solid #2a1810;
  cursor: pointer;
  touch-action: none;
}
.passage-scroll-rail.is-visible {
  display: block;
}

.passage-scroll-thumb {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 0;
  min-height: 28px;
  border-radius: 4px;
  background: linear-gradient(90deg, #6b4518, #a07030);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  cursor: grab;
}
.passage-scroll-thumb:active {
  cursor: grabbing;
}

/* Bottom fade when more text exists below (non-mac overlay hint). */
.passage-scroll-fog {
  position: absolute;
  left: 0;
  right: 14px;
  bottom: 0;
  height: 2.25rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(18, 11, 4, 0), rgba(18, 11, 4, 0.92));
  border-bottom: 2px solid #3A2010;
  border-radius: 0 0 1px 1px;
}

.passage-text {
  font-family: var(--font-vt);
  font-size: 1.15rem;
  line-height: 1.75;
  color: #EED8B0;
  white-space: pre-wrap;
}

/* ═══════════════════════════════════════════
   PONY SPRITE + ANIMATIONS
═══════════════════════════════════════════ */
.pony-sprite {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  animation: pony-idle 2.2s ease-in-out infinite;
  filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.6));
}

@keyframes pony-idle {
  0%,100% { transform: translateY(0) rotate(0deg); }
  30%     { transform: translateY(-5px) rotate(-1.5deg); }
  70%     { transform: translateY(-3px) rotate(1deg); }
}

.pony-sprite.bounce {
  animation: pony-correct 0.7s ease-out forwards;
}
@keyframes pony-correct {
  0%   { transform: translateY(0) rotate(0); }
  25%  { transform: translateY(-22px) rotate(8deg); }
  55%  { transform: translateY(-8px) rotate(-4deg); }
  80%  { transform: translateY(-14px) rotate(3deg); }
  100% { transform: translateY(0) rotate(0); }
}

.pony-sprite.shake {
  animation: pony-wrong 0.55s ease-out forwards;
}
@keyframes pony-wrong {
  0%,100% { transform: translateX(0) rotate(0); }
  15%     { transform: translateX(-7px) rotate(-3deg); }
  35%     { transform: translateX(7px) rotate(3deg); }
  55%     { transform: translateX(-5px) rotate(-2deg); }
  75%     { transform: translateX(5px) rotate(2deg); }
}

/* Pony color palettes */
.pony-goldie       { --body:#F4C430; --mane:#C8960E; --nose:#E8A820; --hoof:#7A5A10; }
.pony-hope         { --body:#F2F2F6; --mane:#B0B0C8; --nose:#E0E0EC; --hoof:#888898; }
.pony-picasso      { --body:#8B5022; --mane:#F0EAD0; --nose:#7A4018; --hoof:#5C2D10; }
.pony-daisy        { --body:#C87848; --mane:#F4B0C0; --nose:#B86030; --hoof:#8B4820; }
.pony-clover       { --body:#9A9AAC; --mane:#5A5A72; --nose:#8A8A9C; --hoof:#4A4A5C; }
.pony-comet        { --body:#1C1C2A; --mane:#F0F0F8; --nose:#30303E; --hoof:#0A0A16; }
.pony-butterscotch { --body:#D2601E; --mane:#F8C820; --nose:#B85010; --hoof:#8B380A; }
.pony-starlight    { --body:#C8C8E2; --mane:#9898BA; --nose:#B8B8D2; --hoof:#7878A2; }
.pony-pearl        { --body:#1A9E9E; --mane:#F0F8F8; --nose:#12807E; --hoof:#0A5858; }
.pony-nova         { --body:#E8C84A; --mane:#B060D0; --nose:#D4A830; --hoof:#8A6010; }
.pony-ember        { --body:#C84820; --mane:#F07820; --nose:#A83010; --hoof:#6A1E08; }