/* LumaTales / 月光书房 — the editable interface layer. See ../DESIGN.md.
   Keep legacy DOM ids for the reader; do not reintroduce the horizontal shelf overlays. */
:root {
  color-scheme: dark;
  --night-bg: #101722;
  --night-panel: #1c2833;
  --night-panel-raised: #263541;
  --night-ink: #f0e5cc;
  --night-muted: #b8b5aa;
  --night-gold: #e6bc79;
  --night-gold-quiet: #927751;
  --night-paper: #eadfbe;
  --night-paper-ink: #353b3d;
  --night-sage: #879b87;
  --night-danger: #df9b91;
  --night-line: #e6bc7938;
  --night-shadow: 0 8px 28px #080e1870;
  --ui-font: "Nunito", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --read-font: "PingFang SC", "Microsoft YaHei", "Nunito", system-ui, sans-serif;
  --midnight: var(--night-bg);
  --cream: var(--night-ink);
  --paper: var(--night-paper);
  --gold: var(--night-gold);
  --ink: var(--night-paper-ink);
  --ink-soft: #5b625f;
  --soft: cubic-bezier(.22,.7,.24,1);
  --spring: var(--soft);
  --safe-left: max(16px, env(safe-area-inset-left));
  --safe-right: max(16px, env(safe-area-inset-right));
  --safe-bottom: max(12px, env(safe-area-inset-bottom));
}
html, body, #app { background: var(--night-bg); }
body { color: var(--night-ink); }
#gl { touch-action: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--night-gold); outline-offset: 4px;
}
button:disabled, button[aria-disabled="true"] { opacity: .4; cursor: default; box-shadow: none; }
.hud { animation: night-appear 420ms var(--soft) both; }
@keyframes night-appear { from { opacity: 0; } to { opacity: 1; } }
.brand.lumatales-logo { top: max(14px, env(safe-area-inset-top)); left: var(--safe-left); width: 162px; height: 48px; }
.lumatales-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand:hover { transform: none; filter: brightness(1.12); }
.top-actions { top: max(16px, env(safe-area-inset-top)); right: var(--safe-right); gap: 8px; }
/* Keep the reading artwork clear, with one small tab to bring tools back. */
.top-actions { transition: transform 220ms var(--soft), opacity 180ms; }
.reader-tools-active .top-actions { top: calc(max(16px, env(safe-area-inset-top)) + 50px); }
.reader-tools-collapsed .top-actions { transform: translateY(calc(-100% - 120px)); opacity: 0; pointer-events: none; }
.reader-tools-toggle { position: absolute; top: max(16px, env(safe-area-inset-top)); right: var(--safe-right); z-index: 9; }
.reader-tools-chevron { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(3px) rotate(225deg); transition: transform 180ms; }
.reader-tools-collapsed .reader-tools-chevron { transform: translateY(-2px) rotate(45deg); }
.reader-tools-active .language-menu { top: calc(max(16px, env(safe-area-inset-top)) + 102px); }
@media (prefers-reduced-motion: reduce) { .top-actions, .reader-tools-chevron { transition: none; } }
.round-button, .round-button.big, .pill-button, .pill-button.small, .pill-button.primary {
  border-image: none; border: 1px solid var(--night-line); background: #1c2833ed;
  color: var(--night-ink); box-shadow: 0 3px 12px #080e1840;
  transition: background-color 160ms, border-color 160ms, transform 160ms;
}
.round-button, .round-button.big { width: 44px; height: 44px; border-radius: 14px; flex: 0 0 44px; }
.round-button .icon, .round-button.big .icon { width: 22px; height: 22px; }
.pill-button, .pill-button.small { min-height: 44px; padding: 8px 14px; font-size: 14px; gap: 7px; border-radius: 14px; font-weight: 600; }
.pill-button.primary { min-width: 154px; min-height: 48px; font-size: 16px; color: #30332f; background: var(--night-gold); border-color: #f0cc95; }
.pill-button .icon, .pill-button.small .icon { width: 20px; height: 20px; flex: 0 0 20px; }
.round-button:hover, .pill-button:hover { background-color: var(--night-panel-raised); border-color: var(--night-gold-quiet); transform: translateY(-1px); box-shadow: 0 4px 14px #080e1850; }
.pill-button.primary:hover { background-color: #f0ca90; }
.round-button:hover .icon, .pill-button:hover .icon { transform: none; }
.round-button:active, .pill-button:active { transform: translateY(1px); }
.pill-button[aria-pressed="true"] { background: #465044; border-color: #879b87; color: #f0e5cc; transform: none; }
.round-button.muted::after { background: var(--night-danger); box-shadow: 0 0 0 2px var(--night-panel); width: 23px; height: 2px; }
.round-button.bump { animation: none; }
.pro-pin { display: none !important; }
.lang-button img.flag { width: 23px; height: 16px; border-radius: 3px; opacity: .85; }
.language-menu { top: 70px; right: var(--safe-right); background: var(--night-panel); border: 1px solid var(--night-line); border-radius: 18px; box-shadow: var(--night-shadow); padding: 8px; }
.language-menu button { min-height: 44px; color: var(--night-ink); border-radius: 10px; }
.language-menu button:hover, .language-menu button[aria-checked="true"] { background: var(--night-panel-raised); color: var(--night-gold); }
.progress-dots { top: 27px; background: #10172299; padding: 8px 12px; gap: 7px; border: 1px solid #e6bc7922; }
.progress-dots.hud { animation: none; }
.progress-dots i { width: 8px; height: 8px; box-shadow: none; background: #f0e5cc44; border: none; }
.progress-dots i.current { animation: none; background: var(--night-gold); box-shadow: 0 0 7px #e6bc7944; }
.progress-dots i.read { background: var(--night-sage); }

/* The reading controls occupy two deliberate rows at the bottom of the scene. */
.reader-bar {
  left: 50%; bottom: var(--safe-bottom); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: stretch; gap: 7px;
  width: min(540px, calc(100vw - var(--safe-left) - var(--safe-right) - 12px));
  max-width: none; padding: 0; border: 0;
  border-radius: 0; background: none; box-shadow: none;
}
.reader-bar.hud { animation: none; }
.reader-primary-row, .reader-secondary-row { display: grid; width: 100%; gap: 7px; }
.reader-primary-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); }
.reader-secondary-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.reader-secondary-row:has(.quiz-pill:not([hidden])) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.reader-secondary-row:has(.phrase-pill[hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reader-secondary-row:has(.phrase-pill[hidden]):has(.quiz-pill:not([hidden])) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.reader-bar .pill-button {
  box-sizing: border-box; min-width: 0; width: 100%; white-space: nowrap;
  border-image: none; border: 0; border-radius: 16px;
  /* The art has transparent top/bottom padding. Slice those away and keep the
     moon-and-star end caps at their native proportions; only the plain middle stretches. */
  background: none;
  border-image-source: url('/public/brand/night-control-secondary-v1.png');
  border-image-slice: 124 300 176 300 fill;
  border-image-width: 0 31px;
  border-image-repeat: stretch;
  color: #344049; box-shadow: none; text-shadow: 0 1px #fff8e399;
}
.reader-bar .pill-button:hover:not(:disabled) {
  filter: brightness(1.08); box-shadow: none;
}
.reader-bar .pill-button:active:not(:disabled) { filter: brightness(0.94); box-shadow: none; }
.reader-primary-row .pill-button { min-height: 47px; padding: 7px 10px; gap: 8px; font-size: 15px; font-weight: 700; border-image-width: 0 33px; }
.reader-primary-row .pill-button.primary {
  min-width: 0; font-size: 17px;
  border-image-source: url('/public/brand/night-control-primary-v1.png'); color: #373b36;
  box-shadow: none;
}
.reader-primary-row .pill-button.primary:hover:not(:disabled) { filter: brightness(1.08); }
.reader-secondary-row .pill-button.small {
  border-image-source: url('/public/brand/night-control-secondary-v1.png');
  color: #3c4a43; text-shadow: 0 1px #fffdf299;
}
.reader-secondary-row .pill-button.small:hover:not(:disabled) { filter: brightness(1.08); }
.reader-secondary-row .pill-button.small[aria-pressed="true"] {
  border-image-source: url('/public/brand/night-control-primary-v1.png');
  color: #3f473b; transform: none;
}
.reader-secondary-row .pill-button.small { min-height: 44px; padding: 6px 8px; gap: 5px; font-size: 12px; font-weight: 600; border-image-width: 0 31px; }
.reader-secondary-row .pill-button.small .icon { width: 17px; height: 17px; flex-basis: 17px; }
.reader-bar .phrase-pill, .reader-bar .quiz-pill { position: static; margin: 0; transform: none; }
.reader-bar .phrase-pill[hidden], .reader-bar .quiz-pill[hidden] { display: none !important; }
.hint-card { display: none !important; }
#focus-veil { background: #0b121c55; }

/* A real HTML reading folio, gently standing on the left page. */
.text-panel, .text-panel.hud, .text-panel.arriving, .text-panel.turning {
  --reading-x: 31vw; --reading-y: 70vh;
  position: absolute; left: var(--reading-x); top: var(--reading-y); right: auto; bottom: auto;
  width: clamp(285px, 29vw, 414px); max-height: min(52vh, 448px);
  padding: 0; border: 1px solid #d4c49a; border-radius: 14px 14px 8px 8px;
  background: linear-gradient(135deg, #f0e7cd, var(--night-paper)); color: var(--night-paper-ink);
  box-shadow: inset 0 0 0 5px #fff7e325, 4px 16px 18px #080e184c;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%; transition: opacity 200ms, box-shadow 200ms; animation: none;
  cursor: default; z-index: 6; overflow: visible;
}
.text-panel.turning { opacity: 0; pointer-events: none; }
.text-panel.anchor-outside:not(.focus) { opacity: 0; pointer-events: none; }
.text-panel .corner { display: none; }
.text-panel-inner { padding: 28px 24px 18px; gap: 8px; border-radius: inherit; overscroll-behavior: contain; touch-action: pan-y; scrollbar-color: #9c957c transparent; }
.text-panel.overflowing .text-panel-inner { -webkit-mask-image: none !important; mask-image: none !important; }
.text-panel.overflowing:not(.at-end)::after { content: "向上轻滑，继续阅读"; position: absolute; bottom: 0; right: 8px; left: 8px; height: 23px; padding-top: 5px; text-align: center; background: linear-gradient(transparent, #eadfbe 30%); color: #66614f; font-size: 10px; border-radius: 0 0 8px 8px; pointer-events: none; }
.reading-expand { position: absolute; left: -12px; top: -13px; width: 44px; height: 44px; z-index: 2; display: grid; place-items: center; border: 1px solid var(--night-gold-quiet); border-radius: 13px; color: var(--night-ink); background: var(--night-panel); box-shadow: 0 3px 10px #080e1866; }
.reading-expand:hover { background: var(--night-panel-raised); }
.reading-expand .icon { width: 20px; height: 20px; }
.reading-expand[aria-expanded="true"] .icon { transform: rotate(180deg); }
.page-eyebrow { font-size: 10px; letter-spacing: .11em; color: #736347; padding-left: 8px; }
.page-heading { font-family: var(--read-font); font-size: clamp(22px, 2.2vw, 29px); font-weight: 700; line-height: 1.3; color: #43483d; margin: 2px 0 0; animation: none; }
.page-heading-english { font-size: 14px; line-height: 1.4; color: #394440; font-weight: 600; margin: -4px 0 4px; }
.page-words, .text-panel.self-read .page-words .word { font-size: clamp(18px, 1.7vw, 24px); line-height: 1.7; color: var(--night-paper-ink); }
.text-panel.size-large .page-words { font-size: clamp(21px, 2vw, 28px); line-height: 1.65; }
.page-words .word { animation: none; padding: 0 2px; margin: 0 -2px; border-radius: 4px; }
.page-words .word:hover, .page-words .word.active { background: #dfbd79; color: #30332f; transform: none; box-shadow: none; }
.page-words .word.link { text-decoration-color: #a8864b; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.page-words .word.foreign { background: #e5cc983d; border: none; box-shadow: none; color: #765329; }
.page-words .word.foreign ruby rt { font-size: 10px; color: #7c683e; }
.page-words .story-paragraph { margin-bottom: .65em; }
.story-speaker { color: #766441; font-size: 12px; }
.story-translation { display: block; color: #394440; font-size: .78em; line-height: 1.6; font-weight: 500; letter-spacing: 0; margin-top: 7px; }
.linked-translation { text-decoration: underline dotted #a8864b; text-underline-offset: 3px; }
.translation-word[role="button"] { cursor: pointer; border-radius: 4px; }
.translation-word[role="button"]:hover { background: #dfbd7966; }
.page-words.primary-english { font-size: clamp(16px, 1.4vw, 19px); color: #394440; }
.text-panel.self-read .page-words.primary-english .word { font-size: inherit; color: #394440; }
.translation-chinese { display: block; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.7; color: var(--night-paper-ink); margin-bottom: 7px; }
.translation-chinese [role="button"] { cursor: pointer; }
.translation-chinese [role="button"]:hover { background: #dfbd7966; }
.text-panel .page-foot { display: flex; gap: 8px; border-top: 1px solid #9d997644; padding-top: 10px; margin-top: 2px; }
.zoom-hint { font-size: 10px; line-height: 1.4; color: #716d58; letter-spacing: 0; }
.synopsis .page-hint { display: block; color: #736347; font-size: 11px; }
.synopsis .zoom-hint { display: none; }
.text-panel.focus { left: var(--safe-left); top: 82px; width: min(43vw, 590px); max-height: calc(100vh - 190px); transform: none; box-shadow: 0 18px 60px #080e1880; z-index: 8; cursor: default; }
.text-panel.focus .text-panel-inner { padding: 28px; }
.text-panel.focus .page-words { font-size: clamp(21px, 2vw, 29px); }
.text-panel.focus .story-translation { font-size: .8em; }
.text-panel.focus .page-words.primary-english { font-size: clamp(17px, 1.5vw, 21px); }
.text-panel.focus .translation-chinese { font-size: clamp(21px, 2vw, 29px); }

/* Shelf and cover overlays are retired. Progress remains visible during a fetch. */
#shelf-strip { display: none !important; }
#loading { background: var(--night-bg); padding: 0; place-items: center; }
#loading .loading-sky { background: linear-gradient(180deg, #10172228, #10172235 50%, #101722ed), url('/public/brand/nightroom-concept.png') center / cover no-repeat; }
#loading .loading-night, #loading .loading-moon, #loading .loading-stars, #loading .loading-veil { display: none; }
#loading .loading-card { position: absolute; inset: 0; width: auto; max-width: none; padding: 0; background: none; border: none; border-image: none; box-shadow: none; border-radius: 0; animation: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; padding-bottom: max(40px, env(safe-area-inset-bottom)); }
#loading .loading-card > * { animation: none; }
#loading .loading-card .corner, #loading .loading-card > .eyebrow, #loading .quill, #loading-logo, #loading-blurb { display: none !important; }
#loading .loading-card h1 { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); }
#loading .loading-brand { display: block; width: 256px; height: 90px; margin: 0; filter: drop-shadow(0 5px 20px #080e1866); }
#loading .loading-progress { width: min(260px, 50vw); height: 3px; border-radius: 4px; background: #f0e5cc26; box-shadow: none; margin: 0 0 8px; overflow: hidden; }
#loading .loading-progress i { height: 100%; background: var(--night-gold); box-shadow: 0 0 8px #e6bc7940; border-radius: inherit; transition: width 300ms; }
#loading-copy { color: var(--night-ink); font-size: 13px; }
#loading .loading-bytes { color: var(--night-muted); font-size: 10px; letter-spacing: .04em; }
#loading .loading-footnote { color: var(--night-muted); font-size: 11px; margin-top: 10px; letter-spacing: .15em; }
#btn-open { animation: none; }
#loading.book { background: transparent; pointer-events: none; }
#loading.book .loading-card { inset: auto auto max(22px, env(safe-area-inset-bottom)) 50%; transform: translateX(-50%); width: min(320px, 70vw); padding: 12px 20px; border: 1px solid #e6bc7922; border-radius: 14px; background: #101722e0; gap: 6px; pointer-events: none; }
#loading.book .loading-card h1, #loading.book #btn-open, #loading.book #btn-back, #loading.book .loading-footnote { display: none !important; }
#loading.book:has(#btn-open:not([hidden])) { display: none !important; }
#loading.book .loading-progress { margin-bottom: 4px; }

/* The three room views have a discreet, discoverable keyboard/touch alternative. */
#room-navigation { position: absolute; left: 50%; bottom: var(--safe-bottom); transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; border: 1px solid #e6bc7924; border-radius: 19px; background: #101722c9; box-shadow: var(--night-shadow); z-index: 5; }
.room-nav-button { min-height: 44px; padding: 8px 18px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--night-muted); font-size: 14px; }
.room-nav-button:hover { color: var(--night-ink); background: var(--night-panel); }
.room-nav-button[aria-current="true"], .room-nav-button[aria-pressed="true"], .room-nav-button.active { color: var(--night-gold); border-color: var(--night-line); background: var(--night-panel); }
#interface:not(.book-closed) #room-navigation { display: none !important; }
#night-book-preview { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); width: min(400px, 80vw); max-height: 58vh; overflow: auto; padding: 23px 26px; border: 1px solid var(--night-line); border-radius: 22px; background: #1c2833f7; color: var(--night-ink); box-shadow: 0 18px 54px #080e1877; text-align: center; z-index: 12; }
.night-preview-kicker { color: var(--night-gold); font-size: 10px; letter-spacing: .18em; }
#night-book-preview h2 { margin: 9px 0 6px; font-size: 23px; line-height: 1.4; font-weight: 600; }
.night-preview-english { color: var(--night-muted); font-size: 12px; margin: 0 0 12px; line-height: 1.5; }
.night-preview-synopsis-en { color: var(--night-muted); font-size: 12px; line-height: 1.6; margin: 7px 0; }
.night-preview-blurb { font-size: 15px; line-height: 1.7; color: var(--night-ink); }
.night-preview-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.night-preview-actions button { min-height: 44px; min-width: 95px; border: 1px solid var(--night-line); border-radius: 12px; padding: 8px 16px; font-size: 14px; background: var(--night-panel-raised); color: var(--night-ink); }
#night-preview-confirm { background: var(--night-gold); color: #30332f; border-color: var(--night-gold); }

/* Collection labels keep Chinese above the smaller English name. */
.word-tip, .word-zoom, .vocab-card { border-image: none; border: 1px solid var(--night-line); background: #1c2833f5; color: var(--night-ink); border-radius: 18px; box-shadow: var(--night-shadow); }
.word-tip { padding: 12px 18px; font-size: 22px; }
.word-tip span, .zoom-label { display: block; }
.word-tip small, .word-tip .english, .zoom-label small { display: block; font-size: 13px; font-weight: 400; color: var(--night-muted); line-height: 1.6; }
.word-zoom { padding: 18px 28px; font-size: 26px; }
.word-zoom .zoom-label.bilingual-toy { display: block; font-size: clamp(24px, 3vw, 34px); line-height: 1.35; letter-spacing: 0; text-transform: none; text-align: center; }
.zoom-label.bilingual-toy .toy-zh { display: block; font-size: 1em; font-weight: 700; color: var(--night-ink); text-transform: none; }
.zoom-label.bilingual-toy .toy-en { display: block; margin-top: 5px; font-size: .6em; line-height: 1.5; font-weight: 400; color: var(--night-muted); text-transform: none; }
.word-zoom img { object-fit: contain; }
.vocab-card { padding: 20px; gap: 18px; max-width: min(480px, 84vw); }
.vocab-card::before { display: none; }
.vocab-card img { width: 112px; height: 112px; object-fit: contain; transform: none; background: #eadfbe; box-shadow: none; border: 1px solid var(--night-line); }
.vocab-script { font-size: 30px; color: var(--night-ink); line-height: 1.35; }
.vocab-meaning, .vocab-roman { font-size: 16px; color: var(--night-muted); }
.vocab-note, .vocab-lang { color: var(--night-muted); font-size: 10px; }
.magic-word { text-shadow: 0 2px 12px #080e18; font-size: 30px; color: var(--night-gold); }

/* Adult settings and genuine error dialogs retain full access in the night palette. */
#panel, .board { background: #080e18a6; }
.panel-shell, .board-shell, .quiz-card, .quiz-done { color-scheme: dark; color: var(--night-ink); background: var(--night-panel); border: 1px solid var(--night-line); border-image: none; border-radius: 24px; box-shadow: 0 22px 80px #080e1880; }
.panel-shell .corner, .board-shell .corner { display: none; }
.panel-shell h2, .board-shell h2, .quiz-card h2 { color: var(--night-ink); font-family: var(--ui-font); font-size: 28px; line-height: 1.35; }
.panel-shell .eyebrow, .folio-kicker, .quiz-eyebrow { color: var(--night-gold); }
.panel-shell .panel-description, .row-description, .settings-row small, .phrasebook-description { color: var(--night-muted); }
.settings-row { border-color: var(--night-line); }
.settings-row label { color: var(--night-ink); }
.folio-section { color: var(--night-gold); font-family: var(--ui-font); font-size: 18px; }
.folio-head .portrait { background: var(--night-panel-raised); border: 1px solid var(--night-line); box-shadow: none; padding: 6px; }
.settings-row .row-icon { background: var(--night-panel-raised); border: 1px solid var(--night-line); border-radius: 14px; }
.settings-row select, .settings-row input[type="range"] { accent-color: var(--night-gold); }
.settings-row select { appearance: auto; padding-right: 10px; }
.switch { min-height: 44px; width: 64px; background: #485059; border-radius: 22px; box-shadow: none; }
.switch i { width: 30px; height: 30px; top: 7px; left: 3px; background: var(--night-ink); border-radius: 50%; box-shadow: 0 1px 4px #080e1840; }
.switch[aria-checked="true"] { background: #69836e; }
.switch[aria-checked="true"] i { transform: translateX(28px); }
.status-line { color: var(--night-muted); }
.settings-section h3, .settings-row .row-label, .phrase-list h3 { color: var(--night-ink); }
.panel-shell input, .panel-shell select { background: var(--night-bg); color: var(--night-ink); border-color: var(--night-line); min-height: 44px; }
.segmented { background: var(--night-bg); }
.segmented button { color: var(--night-muted); min-height: 44px; }
.segmented button[aria-pressed="true"], .segmented button.active { background: var(--night-panel-raised); color: var(--night-gold); }
.phrase-row, .phrase-item { background: #263541; border-color: var(--night-line); color: var(--night-ink); }
.phrase-row:hover, .phrase-row.heard { background: #304138; box-shadow: inset 0 0 0 1px #879b8766; }
.phrase-text b { color: var(--night-ink); font-size: 23px; }
.phrase-text span { color: var(--night-muted); font-size: 14px; }
.phrase-text i, .phrase-text small { color: var(--night-muted); }
.phrase-pic img { object-fit: contain; }
.phrase-count { color: var(--night-gold); }
.phrase-page span { color: var(--night-muted); background: var(--night-panel-raised); }
.phrase-play { color: var(--night-gold); background: var(--night-bg); box-shadow: none; }
.phrase-stamp { background: #69836e; color: var(--night-ink); }
.folio-close, .panel-close { background: var(--night-panel-raised); color: var(--night-ink); border: 1px solid var(--night-line); border-image: none; border-radius: 14px; min-width: 44px; min-height: 44px; }
#toast, #tooltip { background: var(--night-panel); border: 1px solid var(--night-line); border-image: none; border-radius: 12px; color: var(--night-ink); box-shadow: var(--night-shadow); font-size: 13px; }
#toast { top: auto; bottom: 98px; max-width: min(480px, 84vw); line-height: 1.5; text-align: center; }

/* The room itself is the collection interface. Show a quiet history shortcut only there. */
body:not([data-room-view="collection"]) .souvenir-chip { display: none; }
body[data-room-view="collection"] .souvenir-chip {
  top: 72px; left: var(--safe-left); right: auto; width: max-content; min-height: 44px; margin: 0;
  padding: 9px 12px; gap: 10px; border: 1px solid #e6bc7926; border-radius: 12px;
  background: #101722aa; color: var(--night-muted); box-shadow: none; font: 500 12px/1.3 var(--ui-font);
  animation: none; transform: none;
}
body[data-room-view="collection"] .souvenir-chip::before { content: "故事收藏"; }
.souvenir-chip .chip-points, .souvenir-chip .chip-quiz, .souvenir-chip .chip-pin { display: none; }
.souvenir-chip .chip-pins { gap: 3px; }
.souvenir-chip .chip-pins b { color: var(--night-gold); font-weight: 600; }
.souvenir-chip small { font-size: 10px; margin-left: 0; }
body[data-room-view="collection"] .souvenir-chip:hover { background: var(--night-panel-raised); border-color: var(--night-gold-quiet); box-shadow: none; transform: none; }

/* A landscape-first app still gives a gentle, actionable portrait hint. */
#orientation-hint { display: none; position: absolute; inset: auto 18px 95px; z-index: 40; gap: 12px; align-items: center; padding: 16px; background: #1c2833f5; border: 1px solid var(--night-line); border-radius: 18px; pointer-events: none; font-size: 14px; }
#orientation-hint small { display: block; margin-top: 5px; color: var(--night-muted); font-size: 11px; }
#orientation-hint .icon { flex: 0 0 25px; }
@media (max-width: 1100px) {
  .reader-bar { gap: 4px; }
  .reader-primary-row, .reader-secondary-row { gap: 4px; }
  .reader-secondary-row .pill-button.small { padding: 6px; }
  .brand.lumatales-logo { width: 145px; }
  .text-panel.focus { width: min(47vw, 500px); }
}
@media (max-height: 500px) and (orientation: landscape) {
  :root { --safe-bottom: max(7px, env(safe-area-inset-bottom)); }
  .brand.lumatales-logo { top: 7px; height: 39px; width: 133px; }
  .top-actions { top: 8px; gap: 5px; }
  .progress-dots { top: 18px; padding: 5px 9px; gap: 6px; }
  .progress-dots i { width: 6px; height: 6px; }
  .reader-bar { gap: 5px; width: min(506px, calc(100vw - 12px)); }
  .reader-primary-row .pill-button, .reader-primary-row .pill-button.primary { min-height: 44px; padding: 5px 8px; font-size: 14px; border-image-width: 0 31px; }
  .reader-secondary-row .pill-button.small { min-height: 42px; padding: 5px 4px; gap: 4px; font-size: 11px; border-image-width: 0 30px; }
  .reader-secondary-row .pill-button.small .icon { width: 15px; height: 15px; flex-basis: 15px; }
  .text-panel, .text-panel.hud, .text-panel.arriving, .text-panel.turning { width: clamp(270px, 34vw, 325px); max-height: 55vh; }
  .text-panel-inner { padding: 19px 20px 14px; gap: 5px; }
  .page-eyebrow { font-size: 9px; }
  .page-heading { font-size: 20px; }
  .page-heading-english { font-size: 11px; margin-bottom: 0; }
  .page-words { font-size: 18px; line-height: 1.6; }
  .story-translation { font-size: 13px; margin-top: 5px; }
  .page-foot { padding-top: 7px; }
  .zoom-hint { font-size: 9px; }
  .text-panel.focus { top: 57px; width: 43vw; max-height: calc(100vh - 130px); }
  .text-panel.focus .text-panel-inner { padding: 20px; }
  .text-panel.focus .page-words { font-size: 20px; }
  #night-book-preview { bottom: 72px; max-height: 65vh; width: 360px; padding: 14px 20px; }
  #night-book-preview h2 { font-size: 20px; margin: 5px 0; }
  .night-preview-blurb { font-size: 13px; margin: 7px 0; }
  .night-preview-actions { margin-top: 10px; }
  #loading .loading-brand { width: 210px; height: 68px; }
  #loading .loading-card { padding-bottom: 22px; }
  #loading .loading-card h1 { top: 17%; }
}
@media (orientation: portrait) and (max-width: 700px) {
  #orientation-hint { display: flex; }
  .brand.lumatales-logo { width: 120px; }
  .top-actions { gap: 3px; }
  .top-actions .round-button { width: 40px; min-width: 40px; height: 44px; flex-basis: 40px; }
  .progress-dots { top: 75px; }
  .reader-bar { width: calc(100vw - 20px); }
  .reader-secondary-row .pill-button.small span { display: inline; }
  .reader-secondary-row .pill-button.small .icon { display: none; }
  .text-panel, .text-panel.focus { width: calc(100vw - 46px); max-height: 44vh; left: 23px; top: 140px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Editable SVG line icons. All UI icons share a 24 × 24 grid and round 1.8px strokes. */
.icon { background-image: none; background-color: currentColor; mask: var(--night-icon) center / contain no-repeat; -webkit-mask: var(--night-icon) center / contain no-repeat; }
.icon-play { --night-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m8 5 11 7-11 7Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-pause { --night-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14M16 5v14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.icon-back { --night-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m14 5-7 7 7 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-next { --night-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 5 7 7-7 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-sound { --night-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 4-6 5H3v6h3l6 5ZM16 8a6 6 0 0 1 0 8m3-11a10 10 0 0 1 0 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-listen { --night-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13v-1a8 8 0 0 1 16 0v1M4 12H2v7h4v-7Zm16 0h2v7h-4v-7ZM18 19c0 2-2 3-6 3' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-home { --night-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 10 9-7 9 7M5 9v12h14V9M9 21v-7h6v7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-book, .icon-abc { --night-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6C9 3 5 3 2 4v15c4-1 7 0 10 2 3-2 6-3 10-2V4c-3-1-7-1-10 2Zm0 0v15M5 8h4m-4 4h4m6-4h4m-4 4h4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-moon { --night-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15A9 9 0 0 1 9 3a9 9 0 1 0 11 12Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-star, .icon-magic { --night-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 2.8 5.7 6.2.9-4.5 4.4 1 6.2-5.5-2.9-5.5 2.9 1-6.2L3 9.6l6.2-.9Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-account { --night-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M4 21v-2c0-6 16-6 16 0v2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.icon-settings, .icon-gear { --night-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M8 3v6m8 0v6M9 15v6' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.icon-look { --night-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10a8 8 0 1 1 1 7M4 4v6h6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-expand { --night-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3H3v6m0-6 7 7m5 11h6v-6m0 6-7-7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-rotate { --night-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='3' width='10' height='18' rx='2' fill='none' stroke='black' stroke-width='1.8' transform='rotate(-30 12 12)'/%3E%3Cpath d='M3 9V4h5M21 15v5h-5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.icon-music { --night-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18V5l11-2v13M9 8l11-2' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cellipse cx='6' cy='18' rx='3' ry='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cellipse cx='17' cy='16' rx='3' ry='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E"); }
.icon-hand { --night-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 13V4a2 2 0 0 1 4 0v7l2-1 2 1 2-1 2 2v5l-3 5H9l-6-8a2 2 0 0 1 3-2l2 2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }


/* Starry Tales bilingual controls and the paper settings folio, 2026-10-02. */
#reader-bar { width: min(720px, calc(100vw - var(--safe-left) - var(--safe-right))); }
#reader-bar .reader-secondary-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
#reader-bar .reader-secondary-row .pill-button.small { min-height: 44px; padding: 6px 7px; font-size: 13px; }
#reader-bar .reader-secondary-row .pill-button.small .icon { display: none; }
.language-menu { max-width: calc(100vw - 32px); }
.language-menu button { width: 100%; min-width: 0; min-height: 48px; line-height: 1.35; }
.language-menu button img.flag { width: 30px; height: 20px; object-fit: contain; }
.language-menu button[aria-checked="true"] { background: var(--night-panel-raised); color: var(--night-gold); }

.panel-shell.reader-settings {
  box-sizing: border-box; width: min(744px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); padding: 0; overflow: hidden;
  display: flex; flex-direction: column; border-radius: 20px; animation: none;
}
.reader-settings .settings-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: 0 0 auto; padding: 20px 24px 16px; }
.reader-settings .settings-head h2 { font-size: 25px; margin: 3px 0 0; }
.reader-settings .eyebrow { font-size: 10px; letter-spacing: .16em; }
.reader-settings .settings-close { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; border: 1px solid var(--night-line); color: var(--night-ink); background: var(--night-panel-raised); font: 28px/1 var(--ui-font); cursor: pointer; }
.reader-settings .settings-content { min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; color-scheme: light; padding: 20px 24px; background: var(--night-paper); color: var(--night-paper-ink); display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px 28px; scrollbar-color: var(--night-gold-quiet) transparent; }
.reader-settings .settings-block { min-width: 0; }
.reader-settings .settings-books { grid-column: 1 / -1; }
.reader-settings .settings-block h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 750; margin: 0 0 9px; color: var(--night-paper-ink); }
.reader-settings .settings-block h3 .icon { width: 18px; height: 18px; flex: 0 0 18px; color: #7e6745; }
.reader-settings .settings-caption { font-size: 12px; margin: 0 0 10px; color: #616258; line-height: 1.5; }
.reader-settings .settings-languages { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reader-settings .settings-language { box-sizing: border-box; display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 48px; padding: 9px 12px; border: 1px solid #a28b6259; border-radius: 12px; background: #fff9e8a6; color: var(--night-paper-ink); text-align: left; font: 650 13px/1.35 var(--ui-font); cursor: pointer; }
.reader-settings .settings-language img { width: 27px; height: 18px; object-fit: contain; flex: none; }
.reader-settings .settings-language span { flex: 1; }
.reader-settings .language-check { font-size: 16px; font-style: normal; opacity: 0; color: #556745; }
.reader-settings .settings-language[aria-pressed="true"] { border-color: #788361; background: #e1e6cd; box-shadow: inset 0 0 0 1px #78836144; }
.reader-settings .settings-language[aria-pressed="true"] .language-check { opacity: 1; }
.reader-settings .settings-volume { display: grid; grid-template-columns: 1fr auto; align-items: center; font-size: 13px; gap: 0 10px; }
.reader-settings .settings-volume output { font-size: 12px; font-variant-numeric: tabular-nums; color: #666c5a; }
.reader-settings .settings-volume input { grid-column: 1 / -1; width: 100%; min-height: 44px; height: 44px; margin: 0; accent-color: #788361; background: transparent; cursor: pointer; }
.reader-settings .settings-text-size { display: flex; gap: 12px; align-items: center; justify-content: space-between; font-size: 13px; }
.reader-settings .settings-text-size select { color-scheme: light; background: #fff9e8; color: var(--night-paper-ink); border: 1px solid #a28b6270; border-radius: 10px; min-height: 44px; padding: 8px 12px; font: 14px var(--ui-font); min-width: 106px; }
.reader-settings .settings-type-sample { font-family: var(--read-font); font-size: 15px; line-height: 1.7; color: #505647; margin: 12px 0 0; }
.reader-settings .settings-type-sample small { font-size: 12px; }
.reader-settings .settings-type-sample.large { font-size: 18px; }
.reader-settings .settings-type-sample.large small { font-size: 15px; }
.reader-settings .settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 24px; flex: 0 0 auto; }
.reader-settings .settings-footer > span { font-size: 11px; color: var(--night-muted); }
.reader-settings .settings-footer .pill-button { min-height: 44px; min-width: 120px; font-size: 14px; padding: 8px 15px; }
.reader-settings .settings-content :focus-visible { outline-color: #6a794f; outline-offset: 3px; }
.profile-brand-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--night-line); }
.profile-brand-note > span { color: var(--night-gold); font-size: 11px; letter-spacing: .08em; }
.profile-brand-note p { font-size: 12px; line-height: 1.65; color: var(--night-muted); }
.credits-link { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 8px; color: var(--night-muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
#text-panel .page-words, #text-panel .page-words * { -webkit-user-select: none; user-select: none; }
#text-panel .page-words .word { cursor: default; background: transparent; box-shadow: none; }
#text-panel .page-words .word:not(.learning-word):hover { background: transparent; transform: none; color: inherit; }
#text-panel .page-words .word.active { background: #dfbd79; color: #30332f; transform: none; }
#text-panel .page-words .learning-word { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin: 0 2px; padding: 3px 8px 4px; vertical-align: baseline; border-radius: 10px; background: #e8c77352; color: #4b4e39; cursor: pointer; touch-action: pan-y; box-sizing: border-box; box-shadow: inset 0 -1px #ad8a3977; }
#text-panel .page-words .learning-word ruby { ruby-position: over; }
#text-panel .page-words .learning-word rt { color: #756445; font-size: .52em; line-height: 1.2; }
#text-panel .page-words .learning-word:hover, #text-panel .page-words .learning-word:focus-visible { background: #f2cf79; outline: 2px solid #8e783f; outline-offset: 2px; }
#text-panel .page-words .learning-word-zh { text-decoration: underline dotted #a28b62; text-underline-offset: .2em; background: transparent; }
#text-panel .page-words .learning-word[aria-pressed="true"], #text-panel .page-words .learning-word.speaking { background: #f2cf79; }
@media (max-height: 500px) and (orientation: landscape) {
  .panel-shell.reader-settings { max-height: calc(100dvh - 16px); }
  .reader-settings .settings-head { padding: 10px 20px 8px; }
  .reader-settings .settings-head h2 { font-size: 20px; }
  .reader-settings .settings-content { padding: 12px 20px; gap: 14px 24px; }
  .reader-settings .settings-footer { padding: 8px 20px; }
  .reader-settings .settings-type-sample { margin-top: 5px; }
}
@media (max-width: 600px) {
  .reader-settings .settings-content { grid-template-columns: 1fr; padding: 16px; }
  .reader-settings .settings-books { grid-column: auto; }
  .reader-settings .settings-languages { grid-template-columns: 1fr; }
  .reader-settings .settings-head { padding: 14px 16px; }
  .reader-settings .settings-footer { padding: 10px 16px; gap: 10px; }
  #reader-bar .reader-secondary-row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}