/* The game player.  Phone width first; the reading panel keeps the reader's
   dark look and controls (app/read/index.html), the question screens stay on
   the light page so long prompts and explanations read easily. */

[hidden] { display: none !important }
main { padding-bottom: 2em }
button { font: inherit }

.problem { border-left: 3px solid var(--red); background: var(--soft); padding: .8em 1.2em; border-radius: 0 10px 10px 0 }
.problem ul { margin: .4em 0 0; padding-left: 1.2em; font-size: .9em }

h1 { font-size: clamp(1.7rem, 6vw, 2.4rem) }
h2 { font-size: clamp(1.2rem, 4.6vw, 1.55rem); margin: .6em 0 .8em }
.instruction { font-weight: 650 }
.badge { display: inline-block; background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: .35em .9em; font-size: .9em; margin: .2em 0 }
footer.site #ftAttribution { display: block; font-size: .78em; color: var(--muted); margin-top: 2em; line-height: 1.5 }
.counter { color: var(--muted); font-size: .95em; margin: .2em 0 0; font-variant-numeric: tabular-nums }

/* ---- choices ------------------------------------------------------------- */
.choices { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid; gap: .6em }
.choices li, .choices .choice { display: flex; gap: .7em; align-items: flex-start; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; padding: .8em .9em; background: #fff; min-height: 3em }
.choices .key { font-family: var(--mono); font-weight: 700; color: var(--muted); flex: none; width: 1.4em }
button.choice { font: inherit; color: var(--ink); width: 100%; cursor: pointer }
button.choice:hover { border-color: var(--red); background: var(--soft) }
button.choice[aria-checked="true"] { border-color: var(--red); background: var(--soft); box-shadow: inset 0 0 0 1px var(--red) }
button.choice[aria-checked="true"] .key { color: var(--red) }

/* ---- pagers -------------------------------------------------------------- */
.pager { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; margin: 1em 0 }
.pager button { min-height: 3em; padding: .7em 1.1em; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; font-weight: 600 }
.pager button:hover:not(:disabled) { background: var(--soft) }
.pager button:disabled { opacity: .45; cursor: not-allowed }
.pager .cta { border: 0 }
.ghost { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); padding: .45em .9em; cursor: pointer; margin-left: 1.3em; font-size: .9em }
.ghost[aria-expanded="true"] { color: var(--ink); border-color: var(--red) }

/* ---- the passage in ordinary layout -------------------------------------- */
.passage { border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 0 10px 10px 0; padding: .2em 1.1em; margin: 0 0 1.2em; max-height: 60vh; overflow: auto }
.passage p { margin: .8em 0 }

/* ---- review -------------------------------------------------------------- */
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2em }
.results > li { border: 1px solid var(--line); border-radius: 14px; padding: 1em 1.1em }
.results .mark { font-weight: 700 }
.results .right { color: #1b7a34 } .results .wrong { color: var(--red-dark) }
.results dl { margin: .6em 0 0 } .results dt { font-size: .8em; color: var(--muted); text-transform: uppercase; letter-spacing: .04em }
.results dd { margin: 0 0 .6em }
.results button { min-height: 2.8em; padding: .5em 1em; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer }

/* ---- the reading panel (the reader's look and controls) ------------------ */
.sessionbar { display: flex; flex-wrap: wrap; gap: .6em; align-items: baseline; margin: .6em 0 .8em; font-size: .95em }
.sessionbar #rdLabel { font-weight: 650 }
.sessionbar button { margin-left: auto; min-height: 2.8em; padding: .5em 1em; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer }

.reader { --fit: 13; display: grid; grid-template-columns: auto 1fr auto; gap: .6em; background: #0a0a0a; border-radius: 14px; padding: .6em; height: min(70vh, 30em) }
.reader .speed { display: flex; flex-direction: column; align-items: center; gap: .5em; font-size: .85em; color: #999; user-select: none; padding: .2em 0 }
.reader .speed .lbl { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .05em; text-transform: uppercase; font-size: .8em }
.reader .speed input[type=range] { writing-mode: vertical-lr; direction: rtl; width: 2.4em; flex: 1; min-height: 6em; accent-color: var(--red); margin: 0; touch-action: none }
.reader .speed output { font-family: var(--mono); color: #eee; text-align: center; line-height: 1.2 }
.reader .speed output small { display: block; color: #888; font-family: var(--sans); font-size: .8em }
.reader .main { display: flex; flex-direction: column; min-width: 0; container-type: inline-size }
/* --fit is the longest text the width setting allows (play.js); wider settings shrink the letters so it fits */
.reader .stage { flex: 1; font-size: min(9cqw, 13vh, calc(147cqw / (var(--fit) + 2))); cursor: pointer }
.reader .stage .context { position: absolute; left: 6%; right: 6%; top: 56%; font-family: var(--sans); font-size: clamp(13px, .3em, 20px); line-height: 1.4; color: #888; text-align: center; max-height: 28%; overflow: hidden }
.reader .stage .context .now { color: #fff; font-weight: 600 }
.reader .stage .hint { position: absolute; left: 0; right: 0; bottom: 2%; text-align: center; font-family: var(--sans); font-size: 13px; color: #666; padding: 0 1em }
.reader .bar { display: flex; align-items: center; gap: .5em; padding-top: .6em; flex-wrap: wrap }
.reader .bar button { font: 1.1em var(--sans); min-width: 2.8em; min-height: 2.8em; border-radius: 10px; border: 1px solid #333; background: #1b1b1b; color: #eee; cursor: pointer }
.reader .bar button.play { background: var(--red); border-color: var(--red); color: #fff; min-width: 3.6em }
.reader .progress { flex: 1 1 8em; height: 2.8em; display: flex; align-items: center; cursor: pointer; touch-action: none; min-width: 5em }
.reader .progress .track { position: relative; width: 100%; height: 8px; background: #2a2a2a; border-radius: 4px }
.reader .progress .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--red); border-radius: 4px }
.reader .time { font-family: var(--mono); font-size: .85em; color: #aaa; white-space: nowrap }

/* full screen, with the rotate fallback the reader uses */
.reader.full { position: fixed; inset: 0; z-index: 10; height: auto; border-radius: 0;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); gap: 0; background: #000 }
.reader.full .stage { border-radius: 0; font-size: min(9cqw, 12vh, calc(147cqw / (var(--fit) + 2))) }
.reader.full .bar { padding: .4em .6em }
@media (orientation: portrait) {
  .reader.full.rotate { width: 100vh; height: 100vw; transform: rotate(90deg) translateY(-100%); transform-origin: top left; inset: auto; left: 0; top: 0 }
}

@media (max-width: 480px) {
  .wrap { padding: 0 .9em }
  .reader { height: min(56vh, 24em); gap: .3em }
  .reader .time { order: 5; width: 100%; text-align: center }
  .pager button, .pager .cta { flex: 1 1 8em; justify-content: center }
  nav a { margin-left: 0 } .ghost { margin-left: .6em }
  header.site nav { display: flex; align-items: center; gap: .8em }
}

/* ---- the summary and study-guide tabs on the start screen ---------------- */
.tabs { display: flex; gap: .5em; margin: 2em 0 0; flex-wrap: wrap }
.tabs button { font: inherit; font-weight: 650; min-height: 3em; padding: .6em 1.1em; cursor: pointer;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--soft); color: var(--muted) }
.tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: inset 0 3px 0 var(--red) }
.panel { border: 1px solid var(--line); border-radius: 0 12px 12px 12px; padding: .4em 1.1em 1.2em }
.panel h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 1.4em 0 .2em }
.panel p, .panel li { margin: .7em 0 }
.panel ul { padding-left: 1.2em }
.panel .cite { font: inherit; font-size: .85em; color: var(--red-dark); background: none; border: 0; border-bottom: 1px dotted var(--red);
  padding: 0; margin-left: .4em; cursor: pointer }
.panel .mine { font-size: .8em; color: var(--muted); margin-left: .4em }
.panel .quote { border-left: 3px solid var(--red); background: var(--soft); padding: .4em .9em; margin: .4em 0 }
.panel .partial { font-size: .9em; color: var(--muted) }