/* Opt-in viewport composition. Load AFTER the existing theme/admin CSS.
 * Contract: body.screen-fit[data-screen], main > .screen-view, one logical
 * page per .screen-page-content. JS owns pagination/hidden, never this file.
 * The clip boundary is only the full-height flex shell; no component relies
 * on masking excess text. Measure descendants, not only document.scrollHeight.
 */
[hidden] { display: none !important; }

body.screen-fit {
  --fit-gap: clamp(6px, .75dvh, 14px);
  --fit-copy: clamp(16px, 1.8vw, 22px);
  --fit-meta: clamp(16px, 1.8vw, 22px);
  --fit-pad: clamp(10px, 1.4dvh, 26px);
  --copy-size: var(--fit-copy);
  --meta-size: var(--fit-meta);
  height: 100dvh;
  min-height: 0;
  margin: 0;
  overflow: clip;
  font-size: var(--fit-copy);
  line-height: 1.3;
}
body.screen-fit .shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  width: 100%;
  max-width: 1160px;
  padding: env(safe-area-inset-top, 0px) clamp(10px, 2.6vw, 36px) env(safe-area-inset-bottom, 0px);
}
body.screen-fit .topbar {
  flex: 0 0 auto;
  gap: 12px;
  padding: 5px 0;
  min-height: 54px;
}
body.screen-fit .brand { flex-shrink: 0; }
body.screen-fit .brand img { width: 60px; height: 50px; }
body.screen-fit .event-lockup { padding-left: 10px; min-width: 0; }
body.screen-fit .event-lockup .event-logo { width: clamp(116px, 28vw, 210px); max-height: 50px; }
body.screen-fit .icon-button { width: 44px; height: 44px; flex: 0 0 44px; }
body.screen-fit .tabs { flex: 0 0 auto; padding: 2px 0; gap: 0; justify-content: space-between; }
body.screen-fit .tabs button { min-height: 44px; padding: 6px 10px; font-size: var(--fit-meta); }
body.screen-fit main {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  padding: var(--fit-gap) 0;
}
body.screen-fit main > .screen-view {
  height: 100%;
  min-height: 0;
  min-width: 0;
  /* A translated full-height fade would move its last control off screen. */
  animation: none;
  transform: none;
}
body.screen-fit footer {
  flex: 0 0 auto;
  width: 100%;
  min-height: 44px;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 6px 14px;
  justify-content: center;
  align-items: center;
  font-size: var(--fit-meta);
}
body.screen-fit footer button { min-height: 44px; font-size: var(--fit-meta); padding: 4px 0; }
body.screen-fit :where(button, a, input, h1, h2, h3, p, span, b, strong, small, label, li, figcaption) { overflow-wrap: anywhere; }
body.screen-fit :where(button, .primary, .secondary, .text-button, input) { min-height: 44px; font-size: var(--fit-meta); }
body.screen-fit :where(button, .primary, .secondary, .text-button) { line-height: 1.2; }
body.screen-fit .primary { padding: 10px 36px; }
body.screen-fit .secondary { padding: 8px 12px; }
body.screen-fit :where(h1, h2, h3, p, figure) { margin: 0; }
body.screen-fit :where(.eyebrow, .module-tag, .question-number, .mining-label, .block-stack-heading, .book-volume, .book-counter) { font-size: var(--fit-meta); line-height: 1.2; }
body.screen-fit :where(.tiny-note, .name-error, .rank-sub, .ranking-notice, .notice, .closed-message) { font-size: var(--fit-copy); line-height: 1.3; }
body.screen-fit .panel { padding: var(--fit-pad); }
body.screen-fit .fatal { padding: 8px; margin: 0 0 6px; font-size: var(--fit-copy); }
body.screen-fit .screen-view:has(> .fatal) { display: flex; flex-direction: column; gap: var(--fit-gap); }
body.screen-fit .screen-view > .fatal + * { flex: 1 1 0; min-height: 0; }
/* Match the existing play/result/reader visibility without changing state. */
body.screen-fit[data-screen="play"] :is(.tabs, footer),
body.screen-fit[data-screen="result"] :is(.tabs, footer),
body.screen-fit[data-screen="home"] .tabs,
body.screen-fit:is([data-screen="reader"], [data-screen="answer-book"]) :is(.topbar, .tabs, footer) { display: none; }
body.screen-fit:is([data-screen="reader"], [data-screen="answer-book"]) .shell { max-width: 1160px; padding: 0; }
body.screen-fit:is([data-screen="reader"], [data-screen="answer-book"]) main { padding: 0; }

/* Home: the untouched PDF character stays outside the form's hit area. */
body.screen-fit .welcome-animated {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  margin: 0 auto;
  gap: clamp(10px, 2dvh, 32px);
}
body.screen-fit .welcome-animated .welcome-heading { width: 100%; margin: 0; }
body.screen-fit .welcome-heading > .eyebrow { margin: 0 auto 8px; padding: 5px 10px; font-size: var(--fit-meta); line-height: 1.2; }
body.screen-fit .welcome-animated h1.challenge-title { font-size: clamp(30px, 5.4vw, 70px); line-height: 1.08; }
body.screen-fit .welcome-animated .challenge-title .challenge-label { font-size: max(16px, .65em); margin-bottom: 4px; line-height: 1.1; }
body.screen-fit .welcome-animated .welcome-lead { margin: 8px auto 0; font-size: var(--fit-copy); line-height: 1.3; }
body.screen-fit .welcome-content { width: 100%; max-width: min(600px, calc(100% - 56px)); margin: 0 auto; }
body.screen-fit .welcome-animated .welcome-form { padding: clamp(12px, 1.8dvh, 28px); }
body.screen-fit .welcome-form .name-label { display: block; font-size: var(--fit-meta); line-height: 1.2; margin: 0 0 6px; }
body.screen-fit .input-wrap { position: relative; gap: 6px; }
body.screen-fit .welcome-form input { width: 100%; min-width: 0; min-height: 48px; padding: 8px 52px; font-size: max(16px, var(--fit-copy)); }
body.screen-fit .welcome-form .keyboard-toggle { position: absolute; top: 0; right: 0; min-width: 44px; width: 44px; min-height: 48px; }
body.screen-fit .welcome-form .primary { width: 100%; min-height: 48px; margin: 8px 0 0; font-size: var(--fit-meta); padding: 10px 28px; }
body.screen-fit .welcome-form .name-error { min-height: 0; margin: 4px 0 0; font-size: var(--fit-copy); line-height: 1.2; }
body.screen-fit .welcome-form .name-error:empty { margin: 0; }
body.screen-fit .welcome-animated .welcome-links { margin: 4px 0; gap: 0; flex-wrap: nowrap; justify-content: center; }
body.screen-fit .welcome-animated .welcome-links .text-button { min-height: 44px; font-size: var(--fit-meta); padding: 6px; }
body.screen-fit .welcome-animated .home-books { margin: 0; min-height: 48px; padding: 8px 10px; gap: 6px; grid-template-columns: 22px minmax(0, 1fr) 16px; font-size: var(--fit-meta); line-height: 1.2; }
body.screen-fit .home-books svg { width: 22px; height: 24px; }
body.screen-fit .satoshi-scene { width: clamp(54px, 15vw, 240px); z-index: 1; }
body.screen-fit .satoshi-original { max-height: 32dvh; }
body.screen-fit .keyboard { display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 2px; padding: 6px 0 0; }
body.screen-fit .keyboard .key { min-width: 44px; min-height: 44px; height: 44px; margin: 0; padding: 4px 0; font-size: 16px; line-height: 1.1; }
body.screen-fit .keyboard .wide { grid-column: span 2; }
body.screen-fit .keyboard .key:last-child { grid-column: span 2; }
body.screen-fit.has-screen-keyboard .welcome-animated { justify-content: center; gap: 6px; }
body.screen-fit.has-screen-keyboard .welcome-content { max-width: 600px; margin: 0 auto; }
body.screen-fit.has-screen-keyboard .satoshi-scene,
body.screen-fit.has-screen-keyboard .welcome-links,
body.screen-fit.has-screen-keyboard .home-books,
body.screen-fit.has-screen-keyboard footer { display: none; }
body.screen-fit.has-screen-keyboard .welcome-animated h1.challenge-title { font-size: clamp(24px, 4vw, 48px); }
body.screen-fit.has-screen-keyboard .welcome-heading > .eyebrow { padding: 2px 8px; margin-bottom: 3px; }
body.screen-fit.has-screen-keyboard .welcome-animated .welcome-lead { margin-top: 3px; }
body.screen-fit.has-screen-keyboard .welcome-animated .welcome-form { padding: 10px; }

/* Mining: one bounded HUD, not a sticky scrolling panel. 100 visual blocks
 * have no text; 25 columns x four rows leaves the numeric score legible. */
body.screen-fit .game-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; width: 100%; max-width: 1000px; margin: 0 auto; gap: var(--fit-gap); }
body.screen-fit .mining-hud { position: relative; top: auto; flex: 0 0 auto; padding: 8px 10px; margin: 0; border-radius: 12px; }
body.screen-fit .mining-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: start; }
body.screen-fit .mining-label { font-size: var(--fit-meta); line-height: 1.1; letter-spacing: .01em; }
body.screen-fit .mining-power > div:first-of-type { gap: 6px; }
body.screen-fit .mining-power b { font-size: clamp(32px, 4.8vw, 62px); line-height: 1.05; }
body.screen-fit .mining-power > div > span { font-size: var(--fit-meta); }
body.screen-fit .mining-clock > b { font-size: clamp(32px, 4.8vw, 62px); line-height: 1.05; }
body.screen-fit .mining-clock .timer-track { height: 3px; margin: 3px 0 0; }
body.screen-fit .time-bonus { top: -6px; right: 0; font-size: var(--fit-meta); padding: 3px 6px; }
body.screen-fit .hash-difficulty { margin-top: 5px; padding-top: 5px; gap: 2px 8px; }
body.screen-fit .hash-difficulty strong { font-size: var(--fit-meta); line-height: 1.1; }
body.screen-fit .hash-difficulty .hash-meter { height: 3px; margin: 0; }
body.screen-fit .block-stack-heading { margin: 5px 0 3px; font-size: var(--fit-meta); line-height: 1.1; gap: 2px 8px; }
body.screen-fit .block-stack { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); grid-auto-rows: 10px; gap: 2px; align-content: start; min-height: 10px; max-height: none; overflow: visible; padding: 0; }
body.screen-fit .chain-block { display: block; width: 10px; max-width: 100%; height: 10px; min-width: 0; border-radius: 2px; box-shadow: inset -2px -2px 0 #10031f55; }
body.screen-fit .chain-block::after { content: none; }
body.screen-fit .block-empty { grid-column: 1 / -1; font-size: var(--fit-meta); line-height: 1.1; }
body.screen-fit .block-stack:has(.block-empty) { grid-auto-rows: auto; }
body.screen-fit .mining-player { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: start; flex-wrap: nowrap; gap: 4px 12px; margin: 0; font-size: var(--fit-meta); line-height: 1.15; }
body.screen-fit .mining-player > span:first-child { font-size: var(--fit-meta); max-width: 50%; line-height: 1.15; }
body.screen-fit .mining-player > span:last-child { text-align: right; }
body.screen-fit .question-panel { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; gap: var(--fit-gap); padding: var(--fit-pad); }
body.screen-fit .question-meta { flex: 0 0 auto; flex-direction: row; justify-content: center; gap: 6px; margin: 0; }
body.screen-fit .module-tag { max-width: 100%; font-size: var(--fit-meta); line-height: 1.1; padding: 3px 5px; }
body.screen-fit .question-panel .question-text { flex: 0 0 auto; min-height: 0; margin: 0; font-size: clamp(20px, 3.5vw, 36px); line-height: 1.15; }
body.screen-fit .answers { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, minmax(44px, 1fr)); gap: 6px; margin: 0; }
body.screen-fit .answer { display: flex; width: 100%; min-height: 44px; margin: 0; padding: 8px 12px 8px 44px; gap: 6px; font-size: clamp(16px, 2.3vw, 24px); line-height: 1.2; }
body.screen-fit .answer .letter { left: 7px; width: 28px; height: 28px; font-size: var(--fit-meta); }
body.screen-fit .question-panel .confirm-answer { flex: 0 0 auto; width: 100%; min-height: 48px; padding: 10px 30px; margin: 0; font-size: var(--fit-meta); }
body.screen-fit .game-bottom { flex: 0 0 auto; margin: 0; gap: 0; line-height: 1.1; }
body.screen-fit .game-bottom button { min-height: 44px; padding: 5px; font-size: var(--fit-meta); line-height: 1.1; }

/* Paused correction retains both full answers and the explicit Continue. */
body.screen-fit .correction-panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--fit-gap); padding: var(--fit-pad); }
body.screen-fit .correction-panel h2 { font-size: clamp(26px, 4.2vw, 48px); line-height: 1.1; margin: 0; }
body.screen-fit .correction-intro { font-size: var(--fit-copy); line-height: 1.2; margin: 0; }
body.screen-fit .correction-question { font-size: clamp(18px, 2.8vw, 30px); line-height: 1.18; margin: 0; }
body.screen-fit .correction-picked, body.screen-fit .correction-answer { flex: 0 0 auto; padding: 8px 10px; margin: 0; border-left-width: 4px; }
body.screen-fit .correction-picked > span, body.screen-fit .correction-answer > span { font-size: clamp(18px, 2.2vw, 26px); line-height: 1.15; margin: 0 0 4px; }
body.screen-fit .correction-picked p, body.screen-fit .correction-answer strong { font-size: clamp(18px, 2.6vw, 28px); line-height: 1.2; margin: 0; }
body.screen-fit .correction-picked p { color: #ff8e8e; }
body.screen-fit .correction-panel .primary { flex: 0 0 auto; width: 100%; min-height: 48px; margin: 0; padding: 10px 30px; font-size: var(--fit-meta); }
body.screen-fit .hash-stage, body.screen-fit .resume-stage { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; justify-content: center; align-items: center; gap: clamp(6px, 1.3dvh, 22px); max-width: 100%; margin: 0; padding: var(--fit-pad); }
body.screen-fit .hash-emblem { flex: 0 0 auto; width: 44px; height: 44px; font-size: 32px; border-radius: 12px; margin: 0; }
body.screen-fit .hash-stage .eyebrow { font-size: var(--fit-meta); line-height: 1.2; }
body.screen-fit .hash-stage .hash-title, body.screen-fit .resume-stage .hash-title { font-size: clamp(28px, 4.8vw, 64px); line-height: 1.1; margin: 0; }
body.screen-fit .hash-stage .hash-lead, body.screen-fit .resume-stage .hash-lead { font-size: clamp(18px, 2.6vw, 28px); line-height: 1.25; margin: 0; }
body.screen-fit .hash-stage .hash-copy { font-size: var(--fit-copy); line-height: 1.25; margin: 0; }
body.screen-fit .hash-stage .hash-ready { font-size: clamp(20px, 2.8vw, 32px); line-height: 1.15; margin: 0; }
body.screen-fit .hash-stage .primary, body.screen-fit .resume-stage .primary { flex: 0 0 auto; width: 100%; min-height: 48px; margin: 0; font-size: var(--fit-meta); padding: 10px 30px; }

/* Result contract omits duplicate question/source only in the end card. */
body.screen-fit .result-simple { display: grid; grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr); grid-template-rows: auto auto auto auto auto auto auto; align-content: center; align-items: center; gap: var(--fit-gap) 10px; width: 100%; max-width: 960px; height: 100%; min-height: 0; margin: 0 auto; padding: var(--fit-pad); }
body.screen-fit .result-simple > * { min-width: 0; }
body.screen-fit .result-simple .result-status { grid-column: 1 / -1; font-size: clamp(28px, 4.6vw, 60px); line-height: 1.05; margin: 0; }
body.screen-fit .result-simple .result-tier-title { grid-column: 1 / -1; margin: 0; }
body.screen-fit .result-simple .result-tier-title > span { font-size: var(--fit-meta); line-height: 1.1; margin: 0 0 3px; }
body.screen-fit .result-simple .result-tier-title > strong { font-size: clamp(24px, 3.6vw, 46px); line-height: 1.1; }
body.screen-fit .result-simple .currency-art { grid-column: 1; grid-row: 3 / span 2; width: 100%; height: clamp(80px, 15dvh, 220px); object-fit: contain; margin: 0; }
body.screen-fit .currency-result.result-simple .result-name { grid-column: 2; grid-row: 3; font-size: clamp(22px, 3.5vw, 44px); line-height: 1.1; margin: 0; }
body.screen-fit .result-simple .result-points { grid-column: 2; grid-row: 4; font-size: var(--fit-meta); line-height: 1.1; margin: 0; }
body.screen-fit .result-mined-intro { font-size: var(--fit-meta); line-height: 1.15; margin: 0 0 2px; }
body.screen-fit .result-block-count { font-size: clamp(38px, 5.6vw, 82px); line-height: 1; }
body.screen-fit .result-block-unit { font-size: clamp(18px, 2.6vw, 30px); line-height: 1; }
body.screen-fit .result-simple .currency-history { grid-column: 1 / -1; padding: 8px 10px; margin: 0; }
body.screen-fit .currency-history .history-headline { font-size: var(--fit-copy); line-height: 1.3; }
body.screen-fit .history-percent { font-size: max(18px, 1.15em); line-height: 1.1; }
body.screen-fit .result-simple .answer-book-link { grid-column: 1 / -1; padding: 8px 10px; margin: 0; min-height: 44px; }
body.screen-fit .answer-label { font-size: var(--fit-meta); line-height: 1.1; }
body.screen-fit .result-simple .answer-reveal b { display: block; font-size: clamp(18px, 2.4vw, 28px); line-height: 1.2; margin: 4px 0 0; }
body.screen-fit .answer-book-cta { font-size: var(--fit-meta); line-height: 1.15; margin: 5px 0 0; }
body.screen-fit .result-simple .result-actions { grid-column: 1 / -1; margin: 0; gap: 0; }
body.screen-fit .result-simple .result-actions .primary { min-height: 48px; font-size: var(--fit-meta); padding: 10px 30px; }

/* JS supplies the current page and measures the remaining content space. */
body.screen-fit .ranking-screen { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: var(--fit-gap); }
body.screen-fit .page-intro { display: flex; flex-direction: column; flex: 0 0 auto; gap: 6px; align-items: center; margin: 0; }
body.screen-fit .page-intro h2 { font-size: clamp(28px, 4.5vw, 54px); line-height: 1.1; margin: 2px 0; }
body.screen-fit .page-intro p { font-size: var(--fit-copy); line-height: 1.2; margin: 0; }
body.screen-fit .ranking-page-actions { gap: 6px; }
body.screen-fit .page-intro .secondary { min-height: 44px; margin: 0; padding: 8px 12px; font-size: var(--fit-meta); }
body.screen-fit .ranking-panel { flex: 1 1 0; min-height: 0; padding: 6px 8px; }
body.screen-fit .ranking-list { margin: 0; padding: 0; }
body.screen-fit .ranking-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 6px; padding: 8px 2px; }
body.screen-fit .rank-name { font-size: clamp(18px, 2.4vw, 28px); line-height: 1.15; }
body.screen-fit .rank-place, body.screen-fit .rank-points { font-size: clamp(22px, 3.3vw, 40px); line-height: 1.1; }
body.screen-fit .rank-points small, body.screen-fit .ranking-row small.tie-label { font-size: var(--fit-meta); line-height: 1.2; }
body.screen-fit .ranking-row .currency-history-trigger { min-height: 44px; font-size: var(--fit-meta); padding: 5px 8px; margin: 4px 0 0; line-height: 1.15; }
body.screen-fit .ranking-notice { flex: 0 0 auto; font-size: var(--fit-copy); line-height: 1.2; padding: 8px; margin: 0; }
body.screen-fit .rank-empty { padding: 12px; }
body.screen-fit .rank-empty h3 { font-size: clamp(22px, 3vw, 36px); line-height: 1.1; }
body.screen-fit .rank-empty p { font-size: var(--fit-copy); line-height: 1.25; margin: 6px 0 0; }
body.screen-fit .screen-paged { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; gap: var(--fit-gap); }
body.screen-fit .screen-page-content { flex: 1 1 0; min-height: 0; min-width: 0; overflow: clip; }
body.screen-fit .screen-pagination { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 6px; min-height: 44px; margin: 0; padding: 0; font-size: var(--fit-meta); }
body.screen-fit .screen-pagination button { flex: 0 0 auto; min-width: 44px; min-height: 44px; margin: 0; padding: 8px 10px; border: 1px solid #ffffff4d; border-radius: 9px; background: #ffffff0a; color: inherit; font-size: var(--fit-meta); line-height: 1.1; }
body.screen-fit .screen-pagination button:disabled { opacity: .45; cursor: default; }
body.screen-fit .screen-pagination > span { min-width: 0; font-size: var(--fit-meta); text-align: center; line-height: 1.1; }
body.screen-fit dialog { width: min(720px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 16px; overflow: visible; }
body.screen-fit dialog h2 { font-size: clamp(26px, 3.7vw, 42px); line-height: 1.1; padding-right: 30px; margin: 4px 0 10px; }
body.screen-fit dialog p { font-size: var(--fit-copy); line-height: 1.3; margin: 8px 0; }
body.screen-fit dialog .close-dialog { top: 5px; right: 5px; min-width: 44px; min-height: 44px; }
body.screen-fit dialog .eyebrow { display: block; padding-right: 32px; font-size: var(--fit-meta); line-height: 1.2; }
body.screen-fit .screen-paginated[open] { display: flex; flex-direction: column; height: calc(100dvh - 24px); gap: var(--fit-gap); }
body.screen-fit .screen-paginated > :not(.screen-paged) { flex: 0 0 auto; }
body.screen-fit .screen-paginated > .screen-paged { flex: 1 1 0; height: auto; min-height: 0; }
body.screen-fit .screen-paginated > .primary { min-height: 44px; margin: 0; }
body.screen-fit .rules-list { padding-left: 22px; margin: 0; font-size: var(--fit-copy); line-height: 1.3; }
body.screen-fit .rules-list li { margin: 0 0 8px; }
body.screen-fit .notice { padding: 8px; margin: 6px 0; }
body.screen-fit .tiers-title { font-size: clamp(24px, 3vw, 34px); margin: 6px 0; }
body.screen-fit .tiers-intro { font-size: var(--fit-copy) !important; line-height: 1.3; }
body.screen-fit .tier-guide { margin: 6px 0; }
body.screen-fit .tier-guide-row { font-size: var(--fit-copy); padding: 6px 0; gap: 8px; }
body.screen-fit .tier-guide-row .tier-pill { font-size: var(--fit-meta); min-width: 0; padding: 6px; }
body.screen-fit .review-grid { gap: 6px; margin: 6px 0; }
body.screen-fit .review-grid div { padding: 8px; }
body.screen-fit .review-grid b { font-size: 32px; }
body.screen-fit .review-grid span { font-size: var(--fit-copy); line-height: 1.2; }
body.screen-fit .review-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 6px 0; }
body.screen-fit .review-actions .secondary { min-height: 44px; font-size: var(--fit-meta); }
body.screen-fit .currency-story-dialog { padding: 22px 16px 16px; }
body.screen-fit .currency-story-dialog h2 { margin: 0 0 10px; font-size: clamp(26px, 3.5vw, 42px); }
body.screen-fit .currency-story-dialog .currency-history { padding: 0; margin: 0; }
body.screen-fit .currency-story-dialog .history-headline { font-size: var(--fit-copy); line-height: 1.4; }
body.screen-fit #withdraw-dialog .primary, body.screen-fit #withdraw-dialog .secondary { min-height: 48px; font-size: var(--fit-meta); margin-top: 8px !important; }
body.screen-fit .ranking-admin-dialog { width: min(600px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 16px; overflow: visible; }
body.screen-fit .ranking-admin-dialog h2 { font-size: clamp(26px, 3.4vw, 40px); margin: 4px 0 8px; }
body.screen-fit .admin-description { font-size: var(--fit-copy); line-height: 1.25; margin: 6px 0 8px; }
body.screen-fit .ranking-admin-dialog input { min-height: 44px; height: 44px; font-size: 26px; padding: 6px; margin: 0 0 8px; }
body.screen-fit .admin-number-pad { gap: 6px; }
body.screen-fit .admin-number-pad button { min-height: 44px; height: 44px; font-size: 22px; padding: 5px; }
body.screen-fit .admin-number-pad button[data-pin-key="clear"] { font-size: var(--fit-meta); }
body.screen-fit .admin-error { min-height: 20px; font-size: var(--fit-copy); line-height: 1.2; margin: 6px 0; }
body.screen-fit .ranking-admin-dialog .primary, body.screen-fit .ranking-admin-dialog .admin-cancel { min-height: 44px; padding: 8px 12px; font-size: var(--fit-meta); margin: 6px 0 0; }
body.screen-fit .admin-warning { font-size: var(--fit-copy); line-height: 1.3; padding: 10px; }
body.screen-fit .admin-warning b { margin-bottom: 6px; }
body.screen-fit .admin-step { font-size: var(--fit-meta); line-height: 1.2; margin-top: 8px; }
body.screen-fit .admin-confirm-actions { gap: 8px; margin-top: 10px; }
body.screen-fit .admin-confirm-actions button { min-height: 44px; padding: 10px; font-size: var(--fit-meta); }

/* Library is a single visible cover. Controls remain touch-size, including
 * all eight dots: two rows on phones rather than eight tiny hit targets. */
body.screen-fit .library { display: flex; flex-direction: column; height: 100%; min-height: 0; width: 100%; margin: 0 auto; gap: var(--fit-gap); }
body.screen-fit .library-heading { flex: 0 0 auto; }
body.screen-fit .library-heading h2 { font-size: clamp(26px, 4vw, 54px); line-height: 1.05; }
body.screen-fit .library-heading > .eyebrow { font-size: var(--fit-meta); line-height: 1.1; }
body.screen-fit .library-heading > p { max-width: 100%; font-size: var(--fit-copy); line-height: 1.2; margin: 4px 0 0; }
body.screen-fit .book-carousel { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; gap: 4px; margin: 0; }
body.screen-fit .book-track { display: flex; flex: 1 1 0; justify-content: center; align-items: stretch; min-height: 0; padding: 0; gap: 0; overflow: visible; scroll-snap-type: none; }
body.screen-fit .book-slide { display: flex; flex-direction: column; flex: 0 1 auto; align-items: center; height: 100%; min-height: 0; min-width: 44px; width: min(100%, 360px); padding: 0; opacity: 1; transform: none; }
body.screen-fit .book-slide.is-selected { transform: none; }
body.screen-fit .book-slide img { flex: 1 1 0; width: 100%; height: 0; min-height: 0; max-height: 100%; object-fit: contain; aspect-ratio: auto; box-shadow: none; }
body.screen-fit .book-volume { flex: 0 0 auto; margin: 0 0 3px; font-size: var(--fit-meta); line-height: 1.1; }
body.screen-fit .cover-read { flex: 0 0 auto; justify-content: center; gap: 6px; padding: 3px 0 0; font-size: var(--fit-meta); line-height: 1.1; }
body.screen-fit .carousel-controls { display: grid; flex: 0 0 auto; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; width: 100%; max-width: 600px; gap: 6px; margin: 0 auto; }
body.screen-fit .carousel-arrow { width: 44px; height: 44px; min-height: 44px; padding: 4px; font-size: 24px; }
body.screen-fit .carousel-dots { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); justify-content: center; gap: 0; width: 100%; max-width: 240px; margin: 0 auto; }
body.screen-fit .carousel-dots button { width: 100%; min-width: 44px; height: 44px; min-height: 44px; padding: 0; }
body.screen-fit .carousel-dots button::after { left: calc(50% - 4px); top: 18px; width: 8px; height: 8px; }
body.screen-fit .selected-book { flex: 0 0 auto; width: 100%; max-width: 760px; margin: 0 auto; }
body.screen-fit .selected-book h3 { font-size: clamp(22px, 3vw, 40px); line-height: 1.1; margin: 3px 0; }
body.screen-fit .selected-book > p { max-width: 100%; font-size: var(--fit-copy); line-height: 1.2; margin: 4px 0; }
body.screen-fit .selected-book .primary { width: 100%; min-height: 44px; font-size: var(--fit-meta); padding: 8px 32px; margin: 4px auto 0; }
body.screen-fit .selected-book .library-read-hint { font-size: var(--fit-copy); line-height: 1.2; margin: 4px 0 0; }
body.screen-fit .library-home { flex: 0 0 auto; min-height: 44px; font-size: var(--fit-meta); padding: 6px; margin: 0; }

/* One unchanged book-page image at a time; its entire image is contained. */
body.screen-fit .book-reader, body.screen-fit .answer-book-reader { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: 0 auto; }
body.screen-fit .reader-toolbar { position: relative; top: auto; flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; padding: 6px; }
body.screen-fit .reader-toolbar button { min-height: 44px; padding: 8px; font-size: var(--fit-meta); line-height: 1.1; }
body.screen-fit .reader-toolbar > span { font-size: var(--fit-meta); line-height: 1.15; }
body.screen-fit .reader-toolbar .reader-top { min-width: 44px; font-size: 24px; }
body.screen-fit .reader-heading, body.screen-fit .answer-reading-intro { flex: 0 0 auto; padding: 8px 10px; }
body.screen-fit .reader-heading .eyebrow, body.screen-fit .answer-reading-intro .eyebrow { font-size: var(--fit-meta); line-height: 1.15; margin: 0 0 4px; }
body.screen-fit .reader-heading h2 { font-size: clamp(24px, 3.8vw, 46px); line-height: 1.1; }
body.screen-fit .reader-heading > p { font-size: var(--fit-copy); line-height: 1.2; margin: 4px 0 0; }
body.screen-fit .answer-reading-intro h2 { font-size: clamp(18px, 2.5vw, 30px); line-height: 1.2; margin: 0; }
body.screen-fit .answer-reading-intro p { font-size: clamp(20px, 2.8vw, 34px); line-height: 1.2; margin: 5px 0 0; }
body.screen-fit .book-pages, body.screen-fit .answer-book-pages { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; min-width: 0; width: 100%; }
body.screen-fit .reader-page, body.screen-fit .answer-book-page { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; min-width: 0; height: 100%; margin: 0; background: transparent; }
body.screen-fit .reader-page img, body.screen-fit .answer-book-page img { flex: 1 1 0; display: block; min-height: 0; min-width: 0; width: 100%; height: 0; max-height: 100%; object-fit: contain; }
body.screen-fit .answer-book-page figcaption { flex: 0 0 auto; font-size: var(--fit-copy); line-height: 1.2; padding: 5px 8px; }
body.screen-fit .reader-finish { flex: 0 0 auto; padding: 8px 10px; }
body.screen-fit .reader-finish .eyebrow { font-size: var(--fit-meta); line-height: 1.1; }
body.screen-fit .reader-finish h3 { font-size: clamp(22px, 3vw, 36px); line-height: 1.1; margin: 4px 0; }
body.screen-fit .reader-finish > button { min-height: 44px; font-size: var(--fit-meta); padding: 8px 32px; margin: 4px auto 0; }
body.screen-fit .book-reader .screen-pagination, body.screen-fit .answer-book-reader .screen-pagination { padding: 4px 6px; background: #281345; color: #fff; }

@media (max-width: 480px) and (max-height: 900px) {
  body.screen-fit { --fit-gap: 4px; --fit-pad: 8px; }
  body.screen-fit .topbar { min-height: 52px; padding: 3px 0; }
  body.screen-fit .brand img { width: 56px; height: 46px; }
  body.screen-fit .event-lockup .event-logo { max-height: 46px; }
  body.screen-fit .mining-hud { padding: 6px 8px; }
  body.screen-fit .hash-difficulty { margin-top: 3px; padding-top: 3px; }
  body.screen-fit .block-stack-heading { margin-top: 3px; }
  body.screen-fit .question-panel .question-text { font-size: 18px; }
  body.screen-fit .answer { padding-top: 5px; padding-bottom: 5px; }
  body.screen-fit .answers { grid-template-rows: none; grid-auto-rows: minmax(44px, auto); gap: 4px; }
  body.screen-fit .question-panel .confirm-answer { min-height: 44px; padding: 8px 30px; }
  body.screen-fit.has-screen-keyboard .welcome-animated .welcome-form { padding: 6px; }
  body.screen-fit.has-screen-keyboard .welcome-animated h1.challenge-title { font-size: 20px; }
  body.screen-fit.has-screen-keyboard .welcome-animated .challenge-title .challenge-label { display: inline; margin: 0 5px 0 0; }
  body.screen-fit.has-screen-keyboard .welcome-animated .challenge-title em { display: inline; }
  body.screen-fit.has-screen-keyboard .keyboard .wide,
  body.screen-fit.has-screen-keyboard .keyboard .key:last-child { grid-column: span 1; }
  body.screen-fit.has-screen-keyboard .keyboard .key { padding: 2px 0; }
  body.screen-fit.has-screen-keyboard .welcome-form input,
  body.screen-fit.has-screen-keyboard .welcome-form .keyboard-toggle,
  body.screen-fit.has-screen-keyboard .welcome-form .primary { min-height: 44px; }
}
@media (max-height: 740px) {
  body.screen-fit { --fit-gap: 4px; --fit-pad: 8px; }
  body.screen-fit[data-screen="books"] footer { display: none; }
  body.screen-fit .topbar { padding: 2px 0; min-height: 48px; }
  body.screen-fit .brand img { width: 54px; height: 44px; }
  body.screen-fit .event-lockup .event-logo { max-height: 44px; }
  body.screen-fit .welcome-animated { gap: 8px; }
  body.screen-fit .welcome-animated h1.challenge-title { font-size: 28px; }
  body.screen-fit .welcome-animated .welcome-form { padding: 10px; }
  body.screen-fit .welcome-heading > .eyebrow { margin-bottom: 4px; }
  body.screen-fit .welcome-animated .welcome-lead { margin-top: 4px; }
  body.screen-fit .mining-hud { padding: 6px 8px; }
  body.screen-fit .hash-difficulty { margin-top: 3px; padding-top: 3px; }
  body.screen-fit .block-stack-heading { margin-top: 3px; }
  body.screen-fit .question-panel .question-text { font-size: 18px; }
  body.screen-fit .answer { padding-top: 5px; padding-bottom: 5px; }
  body.screen-fit .answers { gap: 4px; }
  body.screen-fit .question-panel .confirm-answer { min-height: 44px; padding: 8px 30px; }
  body.screen-fit .correction-panel h2 { font-size: 24px; }
  body.screen-fit .correction-picked, body.screen-fit .correction-answer { padding: 6px 8px; }
  body.screen-fit .hash-stage, body.screen-fit .resume-stage { gap: 5px; }
  body.screen-fit .hash-emblem { width: 36px; height: 36px; font-size: 28px; }
  body.screen-fit .hash-stage .hash-title { font-size: 26px; }
  body.screen-fit .hash-stage .hash-lead { font-size: 16px; }
  body.screen-fit .hash-stage .hash-ready { font-size: 20px; }
  body.screen-fit .result-simple { gap: 4px 8px; }
  body.screen-fit .result-simple .result-status { font-size: 24px; }
  body.screen-fit .result-simple .result-tier-title > strong { font-size: 22px; }
  body.screen-fit .result-simple .currency-art { height: 80px; }
  body.screen-fit .currency-result.result-simple .result-name { font-size: 20px; }
  body.screen-fit .result-block-count { font-size: 34px; }
  body.screen-fit .result-simple .currency-history { padding: 6px 8px; }
  body.screen-fit .result-simple .answer-book-link { padding: 6px 8px; }
  body.screen-fit .result-simple .answer-reveal b { font-size: 16px; }
  body.screen-fit .result-simple .result-actions .primary { min-height: 44px; padding: 8px 30px; }
  body.screen-fit .library-heading h2 { font-size: 24px; }
  body.screen-fit .selected-book h3 { font-size: 20px; }
  body.screen-fit .ranking-admin-dialog { padding: 12px; }
  body.screen-fit .ranking-admin-dialog h2 { font-size: 24px; margin-bottom: 6px; }
}
/* Short phone viewports use two answer columns, not clipped controls or
 * smaller text. The letter floats only on the first line of each option. */
@media (max-width: 480px) and (max-height: 740px) {
  body.screen-fit .answers { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(44px, auto)); }
  body.screen-fit .answer { display: block; padding: 6px; text-align: left; }
  body.screen-fit .answer .letter { position: static; float: left; width: 20px; height: 20px; margin: 0 6px 2px 0; }
  body.screen-fit .answer > span:not(.letter) { display: inline; }
}
@media (max-width: 480px) and (max-height: 680px) {
  body.screen-fit[data-screen="ranking"] footer > span { display: none; }
  body.screen-fit .mining-player > span:first-child { flex: 1 1 0; max-width: none; }
  body.screen-fit .mining-player > span:last-child { flex: 0 0 105px; }
  body.screen-fit .question-panel .question-text { font-size: 16px; }
  body.screen-fit .question-panel { padding: 4px; }
  body.screen-fit .module-tag { padding-top: 0; padding-bottom: 0; }
  body.screen-fit .mining-hud { padding-top: 4px; padding-bottom: 4px; }
  body.screen-fit .mining-hud { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 6px; }
  body.screen-fit .hash-difficulty { display: flex; flex-direction: column; align-items: stretch; align-self: start; margin: 0; padding: 0; border: 0; gap: 3px; }
  body.screen-fit .block-stack-heading, body.screen-fit .block-stack { grid-column: 1 / -1; }
  body.screen-fit .block-stack { grid-template-columns: repeat(50, minmax(0, 1fr)); grid-auto-rows: 5px; gap: 1px; }
  body.screen-fit .chain-block { width: 5px; height: 5px; border-radius: 1px; }
}
@media (min-width: 640px) {
  body.screen-fit .welcome-content { margin-left: auto; margin-right: auto; }
  body.screen-fit .carousel-dots { max-width: none; grid-template-columns: repeat(8, minmax(44px, 1fr)); }
  body.screen-fit .carousel-controls { gap: 12px; }
  body.screen-fit .review-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 700px) and (min-height: 1000px) {
  body.screen-fit { --fit-copy: 20px; --fit-meta: 20px; --fit-gap: 12px; --fit-pad: 20px; }
  body.screen-fit .topbar { padding: 10px 0; }
  body.screen-fit .brand img { width: 96px; height: 80px; }
  body.screen-fit .event-lockup .event-logo { width: 230px; max-height: 80px; }
  body.screen-fit .tabs button { min-height: 52px; padding: 8px 16px; }
  body.screen-fit .welcome-animated .welcome-form { padding: 24px; }
  body.screen-fit .welcome-form .primary, body.screen-fit .welcome-form input { min-height: 64px; font-size: 22px; }
  body.screen-fit .welcome-form .keyboard-toggle { width: 56px; min-height: 64px; }
  body.screen-fit .welcome-animated .home-books { min-height: 64px; padding: 12px; }
  body.screen-fit .keyboard { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
  body.screen-fit .keyboard .key { height: 54px; min-height: 54px; font-size: 22px; }
  body.screen-fit .mining-hud { padding: 16px 20px; }
  body.screen-fit .hash-difficulty { margin-top: 8px; padding-top: 8px; gap: 4px 12px; }
  body.screen-fit .block-stack { grid-auto-rows: 16px; gap: 4px; }
  body.screen-fit .chain-block { width: 16px; height: 16px; border-radius: 3px; }
  body.screen-fit .block-stack-heading { margin: 8px 0 6px; }
  body.screen-fit .question-panel .question-text { font-size: 30px; }
  body.screen-fit .answer { font-size: 22px; min-height: 64px; padding: 12px 20px 12px 62px; }
  body.screen-fit .answer .letter { left: 12px; width: 36px; height: 36px; }
  body.screen-fit .question-panel .confirm-answer, body.screen-fit .correction-panel .primary, body.screen-fit .hash-stage .primary { min-height: 60px; font-size: 22px; }
  body.screen-fit .hash-emblem { width: 68px; height: 68px; font-size: 48px; }
  body.screen-fit .result-simple .currency-art { height: 200px; }
  body.screen-fit .result-simple .currency-history, body.screen-fit .result-simple .answer-book-link { padding: 16px 20px; }
  body.screen-fit .result-simple .result-actions .primary { min-height: 64px; font-size: 22px; }
  body.screen-fit .ranking-row { padding: 14px 6px; }
  body.screen-fit .screen-pagination, body.screen-fit .screen-pagination button { min-height: 52px; }
  body.screen-fit .selected-book .primary { min-height: 56px; }
  body.screen-fit .book-slide { width: min(100%, 420px); }
  body.screen-fit .ranking-admin-dialog { padding: 24px; }
  body.screen-fit .admin-number-pad button { height: 56px; min-height: 56px; font-size: 26px; }
}
@media (min-width: 900px) and (min-height: 1600px) {
  body.screen-fit { --fit-copy: 24px; --fit-meta: 24px; --fit-gap: 20px; --fit-pad: 30px; }
  body.screen-fit .brand img { width: 120px; height: 100px; }
  body.screen-fit .event-lockup .event-logo { width: 260px; max-height: 100px; }
  body.screen-fit .welcome-animated h1.challenge-title { font-size: 78px; }
  body.screen-fit .welcome-animated .welcome-form { padding: 32px; }
  body.screen-fit .welcome-form input, body.screen-fit .welcome-form .primary { min-height: 80px; font-size: 28px; }
  body.screen-fit .welcome-form .keyboard-toggle { width: 64px; min-height: 80px; }
  body.screen-fit .welcome-animated .home-books { min-height: 80px; }
  body.screen-fit .keyboard .key { height: 64px; min-height: 64px; font-size: 26px; }
  body.screen-fit .mining-hud { padding: 24px 28px; }
  body.screen-fit .mining-power b, body.screen-fit .mining-clock > b { font-size: 72px; }
  body.screen-fit .question-panel .question-text { font-size: 38px; line-height: 1.2; }
  body.screen-fit .answer { min-height: 90px; font-size: 26px; padding: 16px 32px 16px 78px; }
  body.screen-fit .answer .letter { width: 44px; height: 44px; left: 16px; }
  body.screen-fit .answers { gap: 12px; }
  body.screen-fit .question-panel .confirm-answer, body.screen-fit .correction-panel .primary, body.screen-fit .hash-stage .primary { min-height: 76px; font-size: 28px; }
  body.screen-fit .correction-panel { gap: 20px; }
  body.screen-fit .correction-question { font-size: 34px; }
  body.screen-fit .correction-picked, body.screen-fit .correction-answer { padding: 18px 22px; }
  body.screen-fit .correction-picked p, body.screen-fit .correction-answer strong { font-size: 30px; }
  body.screen-fit .hash-emblem { width: 84px; height: 84px; font-size: 58px; }
  body.screen-fit .result-simple .currency-art { height: 280px; }
  body.screen-fit .result-simple .result-status { font-size: 60px; }
  body.screen-fit .currency-result.result-simple .result-name { font-size: 52px; }
  body.screen-fit .result-block-count { font-size: 96px; }
  body.screen-fit .result-simple .result-actions .primary { min-height: 80px; font-size: 28px; }
  body.screen-fit .rank-name { font-size: 30px; }
  body.screen-fit .ranking-row { padding: 20px 8px; }
  body.screen-fit .screen-pagination, body.screen-fit .screen-pagination button { min-height: 64px; }
  body.screen-fit dialog { padding: 30px; }
  body.screen-fit .ranking-admin-dialog { padding: 32px; }
  body.screen-fit .admin-number-pad button { height: 64px; min-height: 64px; }
  body.screen-fit .reader-toolbar { padding: 12px; }
  body.screen-fit .reader-toolbar button { min-height: 64px; padding: 12px; }
  body.screen-fit .reader-heading, body.screen-fit .answer-reading-intro { padding: 20px; }
}