/* Reader UI: one layout for the shell, task drawer and playing controls. */
html,
body {
  height: 100%;
  overflow: hidden;
}
#reader {
  --ui-line: color-mix(in srgb, var(--reader-accent) 15%, #e6e7e1);
  --ui-muted: #6c7a78;
  height: var(--reader-height, 100dvh);
  display: grid;
  grid-template-rows: 60px minmax(0, 1fr);
  overflow: hidden;
  color: var(--reader-ink, #243c3d);
  background: var(--reader-paper, #f8f7f3);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0
    env(safe-area-inset-left, 0px);
}
#reader [hidden] {
  display: none !important;
}
:where(#reader) button,
:where(#reader) select,
:where(#reader) input {
  font-family: "Noto Sans", sans-serif;
  touch-action: manipulation;
}
:where(#reader) button,
:where(#reader) select {
  min-height: 42px;
}
:where(#reader) button {
  font-size: 13px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  box-shadow: none;
  background: #fff;
  color: inherit;
}
:where(#reader) button:hover:not(:disabled) {
  background: var(--reader-soft);
  border-color: var(--reader-accent);
}
:where(#reader) button:disabled {
  opacity: 0.4;
}
#reader :is(button, input, select, summary):focus-visible {
  outline: 3px solid var(--reader-secondary);
  outline-offset: 3px;
}
.reader-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  vertical-align: middle;
}
:where(#reader) button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.reader-top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid var(--ui-line);
  box-shadow: none;
  min-width: 0;
  z-index: 20;
}
#reader .reader-nav-toggle {
  display: inline-flex;
  padding: 8px 13px;
  flex-shrink: 0;
}
.reader-book-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.reader-book-identity strong {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.identity-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.identity-copy #reader-save {
  font-size: 10px;
  color: var(--ui-muted);
}
.reader-book-identity .brand-symbol {
  display: grid;
  place-items: center;
  color: var(--reader-accent);
  background: var(--reader-soft);
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex-shrink: 0;
}
.reader-top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  flex-wrap: nowrap;
}
.reader-menu {
  position: static;
}
.book-view-switch {
  display: flex;
  gap: 3px;
  padding: 3px;
  margin: 0;
  border: 1px solid var(--ui-line);
  background: #f5f6f2;
  border-radius: 11px;
}
#reader .book-view-switch button {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12px;
}
.reader-shell {
  position: relative;
  min-height: 0;
  display: block;
  overflow: hidden;
}
.reader-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 20px clamp(16px, 3vw, 44px) 12px;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.reader-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  margin: 0;
}
.heading-copy {
  min-width: 0;
  flex: 1;
}
.reader-heading p {
  font-size: 11px;
  line-height: 1.4;
  margin: 0 0 5px;
  color: var(--ui-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reader-heading p span {
  margin-left: 3px;
}
.reader-heading h1 {
  font-family: var(--book-title-font, "Fredoka"), sans-serif;
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reader-mascot {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}
.difficulty-chip {
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--ui-line);
  border-radius: 24px;
  padding: 7px 12px;
  font-size: 11px;
  color: var(--ui-muted);
}
#reader-content {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.play-card {
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 16px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  box-shadow: 0 8px 32px #193c3610;
}
.play-stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.play-stage:not([data-reference="true"]) {
  grid-template-rows: minmax(0, 1fr) auto;
}
.play-stage:has(#puzzle-dock[hidden]):has(#puzzle-reference[hidden]) {
  grid-template-rows: minmax(0, 1fr);
}
#puzzle-widget {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 14px;
  overflow: auto;
  contain: size;
  border: 0;
  border-radius: 12px;
  background-color: var(--book-paper, #faf9f5);
  background-image: radial-gradient(
    color-mix(in srgb, var(--game-accent) 10%, transparent) 0.7px,
    transparent 0.8px
  );
  background-size: 16px 16px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.solve-surface {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  margin: auto;
  background: var(--game-panel, #fff);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--game-accent) 45%, #b9c7bd),
    0 5px 16px #253c3812;
}
.solve-sheet {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}
.book-surface {
  margin: auto;
  flex: 0 0 auto;
}
.isolated-puzzle[data-live-kind="wordsearch"] .puzzle-grid {
  height: 100%;
}
.isolated-puzzle .puzzle-grid {
  background: var(--game-panel);
}
.isolated-puzzle .open-crossword {
  background: transparent;
}
.isolated-puzzle .input-cell {
  min-width: 0;
  min-height: 0;
}
#reader .isolated-puzzle .input-cell input {
  font-size: var(--live-cell-font) !important;
  min-width: 0;
}
#reader .input-cell[data-peer="true"]:not(.active):not(.given) {
  background: color-mix(in srgb, var(--game-accent) 5%, var(--game-panel));
}
#reader .input-cell[data-same="true"]:not(.active) {
  background: color-mix(in srgb, var(--game-accent) 16%, var(--game-panel));
}
#reader .book-puzzle-live .input-cell.active {
  background: color-mix(in srgb, var(--game-accent) 18%, var(--game-panel));
  box-shadow: inset 0 0 0 2px var(--game-accent);
}
#reader .book-puzzle-live .input-cell input:focus {
  outline: none;
}
#reader .book-puzzle-live .input-cell:not(.given) input {
  color: var(--game-accent);
  font-weight: 650;
}
.play-dock {
  min-width: 0;
  padding: 0 8px;
}
.number-pad {
  display: grid;
  grid-template-columns: repeat(var(--pad-cols, 10), minmax(0, 1fr));
  gap: 7px;
  width: min(100%, 620px);
  padding: 0;
  margin: 0 auto;
}
#reader .number-pad button {
  min-height: 46px;
  padding: 6px 2px;
}
.play-reference {
  min-width: 0;
  max-height: 142px;
  overflow: auto;
  scrollbar-width: thin;
}
.word-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.word-list span {
  padding: 7px 10px;
  border: 1px solid var(--ui-line);
  border-radius: 7px;
  background: #f7f8f4;
  color: var(--game-ink);
  font-size: 12px;
}
.word-list span.done {
  color: #377e5b;
  background: #e7f3eb;
  text-decoration: line-through;
  opacity: 0.75;
}
/* Selection feedback is rendered live without replacing the captured board. */
#reader .word-board .letter-cell {
  position: relative;
  cursor: crosshair;
}
#reader .word-board .letter-cell.found {
  background: color-mix(in srgb, var(--game-accent) 36%, var(--game-panel));
  font-weight: 650;
}
#reader .word-board .letter-cell:focus-visible {
  outline: 3px solid var(--game-accent);
  outline-offset: -3px;
  z-index: 1;
}
#reader .word-board .letter-cell[data-word-selection="preview"],
#reader .word-board .letter-cell[data-word-selection="already"] {
  background: #ffe4a0;
  color: #4d3719;
  box-shadow: inset 0 0 0 2px #c7902f;
  font-weight: 700;
}
#reader .word-board .letter-cell[data-word-selection="found"] {
  background: #bae2cc;
  color: #174b36;
  box-shadow: inset 0 0 0 2px #30845a;
  font-weight: 700;
}
#reader .word-board .letter-cell[data-word-selection="miss"] {
  background: #fbd6ca;
  color: #742f27;
  box-shadow: inset 0 0 0 2px #c3654c;
}
#reader .word-board .letter-cell[data-word-start="true"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: max(3px, calc(var(--live-cell-font) * 0.2));
  height: max(3px, calc(var(--live-cell-font) * 0.2));
  border-radius: 50%;
  background: currentColor;
  pointer-events: none;
}
#reader .word-board .letter-cell[data-word-end="true"] {
  box-shadow: inset 0 0 0 3px currentColor;
}
.word-input-feedback {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 760px);
  height: 54px;
  min-height: 54px;
  padding: 4px 8px;
  margin: 0 auto;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  background: var(--book-paper);
  color: var(--game-ink);
}
.word-input-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}
.word-input-copy strong {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
.word-input-copy span {
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.word-input-feedback[data-state="idle"] .word-input-copy span {
  white-space: normal;
}
.word-input-feedback[data-state="preview"] {
  background: #fff3d6;
  border-color: #d9b966;
}
.word-input-feedback[data-state="found"] {
  background: #e2f3e9;
  border-color: #91bd9e;
}
.word-input-feedback[data-state="miss"] {
  background: #fff0ea;
  border-color: #dfb3a1;
}
#reader .word-input-feedback [data-action="cancelWord"] {
  width: 44px;
  min-height: 44px;
  padding: 5px;
  flex-shrink: 0;
}
.clues {
  margin: 0;
  padding: 0 6px 0 24px;
  columns: 2;
  column-gap: 25px;
}
.clues li {
  break-inside: avoid;
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.65;
  list-style: none;
}
.play-card[data-kind="crossword"][data-view="puzzle"] .play-stage {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 28%);
  grid-template-rows: minmax(0, 1fr) auto;
}
[data-kind="crossword"][data-view="puzzle"] #puzzle-widget {
  grid-column: 1;
  grid-row: 1;
}
[data-kind="crossword"][data-view="puzzle"] .play-reference {
  grid-column: 2;
  grid-row: 1/-1;
  max-height: none;
  padding: 10px;
  border-left: 1px solid var(--ui-line);
}
[data-kind="crossword"][data-view="puzzle"] .clues {
  columns: 1;
  padding-left: 0;
}
.play-toolbar {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 0 4px;
}
.puzzle-progress {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
.play-status {
  color: var(--ui-muted);
  background: none;
  padding: 0;
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.35;
}
.play-status.complete {
  color: #2c7b57;
  background: none;
  font-weight: 600;
}
#play-progress {
  display: block;
  width: min(100%, 260px);
  height: 4px;
  accent-color: var(--game-accent);
}
.play-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
#reader .play-actions > button {
  padding: 9px 17px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
}
.solve-more {
  position: relative;
  flex-shrink: 0;
}
.solve-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  padding: 8px 12px;
  list-style: none;
  cursor: pointer;
  font-size: 12px;
}
.solve-more > summary {
  width: 44px;
  padding: 8px;
}
.solve-more > summary > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.solve-more:not([open]) > .solve-more-menu {
  display: none;
}
.solve-more summary::-webkit-details-marker {
  display: none;
}
.solve-more-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  display: grid;
  gap: 8px;
  width: 270px;
  max-height: min(65dvh, 400px);
  overflow: auto;
  background: white;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  padding: 12px;
  z-index: 25;
  box-shadow: 0 8px 35px #102e3825;
}
.solve-more-menu > button {
  width: 100%;
  justify-content: flex-start !important;
}
.zoom-controls {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 5px;
}
.play-instructions {
  font-size: 13px;
}
.play-instructions summary {
  cursor: pointer;
  padding: 10px 6px;
}
.play-help {
  margin: 4px 0 8px;
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.6;
}
.reader-footer {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 0;
  min-height: 40px;
  font-size: 11px;
  color: var(--ui-muted);
  flex-wrap: nowrap;
}
.play-toolbar .reader-footer {
  flex-shrink: 0;
}
.play-toolbar #reader-clock {
  margin: 0;
  font-size: 10px;
}
#reader-save {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#reader-clock {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.reader-stepper {
  display: flex;
  gap: 8px;
}
#reader .reader-stepper button {
  padding: 8px 16px;
  font-size: 12px;
}
.reader-sidebar {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(360px, 92vw);
  padding: 20px;
  overflow: hidden;
  max-height: none;
  background: #fff;
  border-right: 1px solid var(--ui-line);
  box-shadow: 8px 0 30px #15312b20;
  transform: translateX(-102%);
  visibility: hidden;
  align-items: stretch;
}
#reader[data-library-open="true"] .reader-sidebar {
  transform: translateX(0);
  visibility: visible;
}
.library-scrim {
  display: none !important;
}
#reader[data-library-open="true"] .library-scrim {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 40;
  border: 0;
  border-radius: 0;
  background: #102b3d55;
}
.library-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 10px;
  align-items: center;
  padding: 0;
}
.sidebar-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--reader-accent);
}
.reader-sidebar h2 {
  grid-column: 1 / -1;
  font-family: var(--book-title-font, "Fredoka"), sans-serif;
  font-size: 20px;
  margin: 0;
  line-height: 1.35;
}
#reader .library-close {
  position: static;
  grid-column: 2;
  grid-row: 1;
  width: 38px;
  min-height: 38px;
  padding: 3px;
  font-size: 0;
  background: transparent;
  border: 0;
}
.library-close span {
  display: none;
}
.book-progress {
  display: grid;
  margin: 0;
  grid-template-columns: auto 1fr;
  gap: 5px 8px;
  border: 0;
  padding: 10px 12px;
  background: var(--reader-soft);
  border-radius: 10px;
  font-size: 12px;
}
.book-progress progress {
  grid-column: 1/-1;
  width: 100%;
  height: 4px;
  accent-color: var(--reader-accent);
}
.reader-sidebar .reader-finale-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  text-align: left;
  background: var(--reader-accent) !important;
  color: white !important;
}
.reader-finale-link strong {
  font-size: 12px;
  flex: 1;
}
.reader-finale-link span {
  font-size: 10px;
}
.reader-task-search {
  display: flex;
  align-items: center;
  padding: 0 11px;
  min-height: 42px;
  gap: 8px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
}
.reader-task-search input {
  border: 0;
  padding: 8px 0;
  width: 100%;
  background: none;
  font-size: 12px;
}
.reader-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.reader-filters label {
  display: grid;
  gap: 5px;
  min-width: 0;
  font-size: 10px;
  color: var(--ui-muted);
}
.reader-filters select {
  width: 100%;
  min-width: 0;
  min-height: 36px !important;
  padding: 6px;
  border-color: var(--ui-line);
  font-size: 11px;
}
.puzzle-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 2px 8px;
  min-height: 0;
  flex: 1;
  overflow: auto;
  scrollbar-width: thin;
}
.task-group-title {
  position: sticky;
  top: 0;
  padding: 9px 2px 5px;
  margin: 0;
  background: white;
  font-size: 11px;
  color: var(--reader-accent);
  font-weight: 700;
  z-index: 1;
}
#reader .puzzle-list button {
  width: 100%;
  padding: 10px;
  min-height: 62px;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: flex-start;
  text-align: left;
}
.task-copy {
  min-width: 0;
  flex: 1;
}
.task-copy strong {
  display: block;
  font-size: 12px;
  line-height: 1.35;
}
.task-copy small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--ui-muted);
}
.entry-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 7px;
  font-size: 11px;
  color: var(--reader-accent);
  background: var(--reader-soft);
}
#reader .puzzle-list button.current {
  background: var(--reader-soft);
  border-color: var(--reader-accent);
  box-shadow: none;
}
.puzzle-list .current .entry-number {
  color: white;
  background: var(--reader-accent);
}
.task-check {
  color: #3b8862;
  font-weight: 700;
  font-size: 14px;
}
.reader-help {
  margin: 0;
  width: 100%;
  flex-shrink: 0;
}
.task-list-empty {
  padding: 15px 5px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ui-muted);
}
.solve-flow {
  width: min(100%, 1000px);
  margin: 0 auto;
}
.solve-flow .math-problems {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 16px;
  max-width: none;
  width: 100%;
  padding: 0;
}
.solve-flow .math-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 55px;
  padding: 8px 12px;
  font-size: 17px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  background: var(--game-panel);
}
.solve-flow .math-row:nth-child(odd) {
  background: color-mix(in srgb, var(--game-accent) 5%, var(--game-panel));
}
.solve-flow .math-index {
  width: 20px;
  font-size: 10px;
  color: var(--ui-muted);
}
.solve-flow .math-row strong {
  font-weight: 500;
  font-size: inherit;
  white-space: nowrap;
}
.solve-flow .math-row input {
  margin-left: auto;
  min-width: 0;
  width: 86px;
  padding: 8px;
  border-color: var(--ui-line);
  font-size: 17px;
}
.isolated-puzzle .cards-grid {
  display: grid;
  grid-template-columns: repeat(var(--board-cols), minmax(0, 1fr));
  gap: 5px;
}
.isolated-puzzle .game-board {
  display: grid;
  grid-template-columns: repeat(var(--board-cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--board-rows), minmax(0, 1fr));
  gap: 4px;
}
.isolated-puzzle .jigsaw-board {
  display: grid;
  grid-template-columns: repeat(var(--board-cols), minmax(0, 1fr));
}
.move-pad,
.widget-options,
.dice-panel,
.bingo-draw {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
}
.bingo-draw img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.reader-dialog {
  padding: 0;
  width: min(880px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(var(--reader-height, 100dvh) - 30px);
  color: var(--reader-ink, #243c3d);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  box-shadow: 0 20px 90px #0b233b40;
  overflow: auto;
}
.reader-dialog::backdrop {
  background: #122a3d66;
  backdrop-filter: blur(4px);
}
.reader-dialog-header {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ui-line);
  background: #fff;
}
.reader-dialog-header > div {
  min-width: 0;
  flex: 1;
}
.reader-dialog-header small {
  font-size: 10px;
  color: var(--ui-muted);
}
.reader-dialog-header h2 {
  font-family: var(--book-title-font, "Fredoka"), sans-serif;
  font-size: 25px;
  margin: 4px 0 0;
}
.menu-brand-mark {
  color: var(--reader-accent);
}
.reader-menu-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 24px 0;
  border: 0;
}
#reader .reader-menu-tabs button {
  flex: 1;
  border: 0;
  background: #f3f5f0;
}
#reader .reader-menu-tabs [aria-pressed="true"] {
  background: var(--reader-soft);
  color: var(--reader-accent);
}
.reader-menu-content {
  padding: 20px 24px;
}
.menu-intro h3 {
  font-family: var(--book-title-font, "Fredoka"), sans-serif;
  font-size: 24px;
  margin: 0 0 8px;
}
.menu-intro p,
.menu-info p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ui-muted);
}
.menu-book-grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
#reader .menu-book-card {
  display: flex;
  gap: 18px;
  padding: 14px;
  text-align: left;
  justify-content: flex-start;
}
.mini-book {
  display: block;
  width: 68px;
  height: 95px;
  flex-shrink: 0;
}
.mini-book svg {
  width: 100%;
  height: 100%;
}
.menu-book-card > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.menu-book-card strong,
.menu-book-card small,
.menu-book-card em {
  display: block;
  margin-bottom: 6px;
}
.menu-book-card small {
  font-size: 11px;
  color: var(--ui-muted);
}
.menu-book-card em {
  color: var(--reader-accent);
  font-size: 11px;
  font-style: normal;
}
.theme-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
#reader .theme-card {
  display: grid;
  gap: 10px;
  position: relative;
  padding: 10px;
  min-width: 0;
}
.theme-sample {
  display: block;
  height: 95px;
  width: 100%;
  overflow: hidden;
  border-radius: 7px;
  background: var(--theme-soft);
}
.theme-sample svg {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
}
.theme-sample:not(:has(svg)) {
  background: linear-gradient(
    135deg,
    var(--theme-dark) 50%,
    var(--theme-accent) 50%
  );
}
.theme-sample > b,
.theme-sample > em {
  display: none;
}
.theme-card strong {
  font-size: 11px;
}
.theme-check {
  position: absolute;
  right: 8px;
  bottom: 8px;
  color: var(--reader-accent);
}
.reader-preferences {
  display: grid;
  margin-top: 20px;
}
.reader-preferences label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border-top: 1px solid var(--ui-line);
  padding: 14px 0;
}
.reader-preferences strong,
.reader-preferences small {
  display: block;
}
.reader-preferences strong {
  font-size: 13px;
}
.reader-preferences small {
  font-size: 11px;
  color: var(--ui-muted);
  margin-top: 5px;
  line-height: 1.5;
}
.reader-preferences input {
  width: 20px;
  height: 20px;
  accent-color: var(--reader-accent);
  flex-shrink: 0;
}
.reader-language-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  font-size: 13px;
  margin: 0 24px 16px;
}
.menu-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 15px 0;
}
.menu-info {
  display: flex;
  gap: 14px;
  padding: 18px;
  background: var(--reader-soft);
  border-radius: 12px;
  margin: 16px 0;
}
.menu-info h3 {
  margin: 0 0 5px;
  font-size: 16px;
}
.menu-info p {
  margin-bottom: 10px;
}
.menu-section-title {
  margin: 22px 0 8px;
  font-size: 15px;
}
.reader-dialog-footer {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 13px 24px;
  border-top: 1px solid var(--ui-line);
  font-size: 11px;
  color: var(--ui-muted);
}
.local-device-note {
  font-size: 11px;
  line-height: 1.6;
  color: var(--ui-muted);
}
#reader-content[data-mode="pages"] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
}
.print-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
}
.print-toolbar select {
  min-width: 0;
  max-width: 45%;
  font-size: 12px;
}
.print-toolbar button {
  font-size: 12px !important;
  padding: 8px 10px !important;
}
.sheet-preview {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  contain: size;
  padding: 10px;
  background: #e8e9e2;
  border-radius: 12px;
}
.sheet-preview svg {
  height: 100%;
  width: auto;
  max-width: 100%;
  margin: auto;
  flex-shrink: 0;
}
.empty-reader {
  align-self: center;
  justify-self: center;
  max-width: 480px;
  text-align: center;
  padding: 30px;
}
.empty-reader h1 {
  font-family: var(--book-title-font, "Fredoka"), sans-serif;
  font-size: 32px;
}
.empty-reader p {
  color: var(--ui-muted);
  line-height: 1.7;
}
.empty-reader-icon {
  color: var(--reader-accent);
}
.empty-reader-icon svg {
  width: 50px;
  height: 50px;
}
#reader-notice {
  bottom: 18px;
  max-width: calc(100vw - 30px);
  font-size: 13px;
}
@media (max-width: 900px) {
  .play-toolbar #reader-clock {
    display: none;
  }
  .play-toolbar .reader-stepper button > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  #reader .play-toolbar .reader-stepper button {
    width: 42px;
    padding: 6px;
  }
  .reader-top {
    padding: 0 15px;
    gap: 12px;
  }
  .reader-main {
    padding: 14px 16px 8px;
    gap: 10px;
  }
  .reader-mascot {
    width: 42px;
    height: 42px;
  }
  .reader-heading h1 {
    font-size: 25px;
  }
  .play-card {
    padding: 12px;
    gap: 10px;
  }
  .play-card[data-kind="crossword"][data-view="puzzle"] .play-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
  }
  [data-kind="crossword"][data-view="puzzle"] .play-reference {
    grid-column: 1;
    grid-row: 3;
    max-height: 138px;
    padding: 4px;
    border-left: 0;
  }
  [data-kind="crossword"][data-view="puzzle"] .clues {
    columns: 2;
    column-gap: 18px;
  }
  .solve-flow .math-problems {
    gap: 8px;
  }
  .solve-flow .math-row {
    font-size: 15px;
    padding: 8px;
    gap: 7px;
  }
  .solve-flow .math-row input {
    width: 68px;
  }
}
@media (max-width: 600px) {
  #reader {
    grid-template-rows: 54px minmax(0, 1fr);
  }
  .reader-top {
    padding: 0 10px;
    gap: 8px;
  }
  .reader-book-identity {
    gap: 0;
  }
  .reader-book-identity .brand-symbol {
    display: none;
  }
  .reader-book-identity strong {
    font-size: 11px;
  }
  #reader .reader-nav-toggle {
    width: 38px;
    min-height: 38px;
    padding: 6px;
  }
  .reader-nav-toggle > span {
    display: none;
  }
  .reader-top-actions {
    gap: 6px;
  }
  #reader .reader-menu > button {
    width: 38px;
    min-height: 38px;
    padding: 6px;
  }
  .reader-menu > button > span {
    display: none;
  }
  #reader .book-view-switch button {
    padding: 6px 8px;
    min-height: 32px;
    font-size: 11px;
  }
  .book-view-switch .reader-icon {
    display: none;
  }
  .reader-main {
    padding: 12px 10px 7px;
    gap: 10px;
  }
  .reader-heading {
    gap: 8px;
  }
  .reader-heading h1 {
    font-size: 21px;
  }
  .reader-heading p {
    font-size: 10px;
    margin-bottom: 4px;
  }
  .reader-heading p span {
    display: inline;
    margin: 0;
  }
  .difficulty-chip {
    display: none;
  }
  .reader-mascot {
    width: 42px;
    height: 42px;
  }
  .play-card {
    padding: 10px;
    gap: 10px;
    border-radius: 13px;
  }
  .play-stage {
    gap: 9px;
  }
  #puzzle-widget {
    padding: 8px;
    border-radius: 8px;
  }
  .play-toolbar {
    gap: 6px;
    flex-wrap: nowrap;
    padding: 0;
  }
  .puzzle-progress {
    flex: 1;
    overflow: hidden;
  }
  .play-status {
    font-size: 10px;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #play-progress {
    width: 100%;
    height: 3px;
  }
  .play-actions {
    width: auto;
    gap: 4px;
  }
  #reader .play-actions > button {
    width: 44px;
    min-height: 44px;
    padding: 8px;
    font-size: 12px;
  }
  .play-actions > button > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .solve-more > summary {
    width: 44px;
    padding: 8px;
    min-height: 44px;
  }
  .solve-more-menu {
    width: min(280px, 100%);
  }
  .solve-more {
    position: static;
  }
  .number-pad {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    width: min(100%, 420px);
  }
  #reader .number-pad button {
    min-height: 44px;
    font-size: 19px;
    padding: 4px;
  }
  .play-reference {
    max-height: 115px;
  }
  .word-list {
    gap: 4px;
  }
  .word-list span {
    padding: 5px 7px;
    font-size: 10px;
  }
  .clues li {
    font-size: 12px;
    line-height: 1.5;
  }
  .reader-footer {
    gap: 8px;
    min-height: 38px;
  }
  #reader-save {
    font-size: 9px;
  }
  #reader-clock {
    display: none;
  }
  #reader .reader-stepper button {
    padding: 7px 12px;
    min-height: 38px;
    font-size: 11px;
  }
  .play-toolbar .reader-stepper {
    gap: 4px;
  }
  #reader .play-toolbar .reader-stepper button {
    width: 38px;
    min-height: 44px;
    padding: 6px;
  }
  .solve-flow .math-problems {
    grid-template-columns: 1fr;
  }
  .solve-flow .math-row {
    min-height: 54px;
    font-size: 18px;
    padding: 9px 12px;
  }
  .solve-flow .math-row input {
    width: 88px;
  }
  .reader-dialog {
    width: calc(100vw - 16px);
    max-height: calc(var(--reader-height, 100dvh) - 16px);
    border-radius: 14px;
  }
  .reader-dialog-header {
    padding: 15px;
  }
  .reader-dialog-header h2 {
    font-size: 21px;
  }
  .reader-menu-tabs {
    padding: 10px 14px 0;
  }
  .reader-menu-tabs button {
    font-size: 12px !important;
  }
  .reader-menu-content {
    padding: 17px 15px;
  }
  .reader-dialog-footer {
    padding: 12px 15px;
  }
  .theme-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .theme-sample {
    height: 78px;
  }
  .menu-action-grid {
    gap: 7px;
  }
  .menu-action-grid button {
    font-size: 11px !important;
  }
  .print-toolbar select {
    max-width: 100%;
    width: 100%;
  }
  .print-toolbar {
    gap: 5px;
  }
  .print-toolbar button {
    font-size: 10px !important;
    min-height: 36px !important;
  }
}
@media (max-height: 560px) {
  #reader {
    grid-template-rows: 46px minmax(0, 1fr);
  }
  .reader-main {
    padding-top: 7px;
    gap: 7px;
  }
  .reader-heading h1 {
    font-size: 20px;
  }
  .reader-heading p {
    font-size: 9px;
    margin-bottom: 2px;
  }
  .reader-mascot {
    width: 32px;
    height: 32px;
  }
  .play-card {
    padding: 8px;
    gap: 7px;
  }
  .play-toolbar {
    flex-wrap: nowrap;
  }
  .puzzle-progress {
    flex: 1;
  }
  .play-actions {
    width: auto;
  }
  .number-pad {
    grid-template-columns: repeat(var(--pad-cols, 10), minmax(0, 1fr));
    max-width: 600px;
  }
  #reader .number-pad button {
    min-height: 33px;
    font-size: 17px;
  }
  .reader-footer {
    min-height: 32px;
  }
  #reader .reader-stepper button {
    min-height: 32px;
  }
  .play-reference {
    max-height: 75px;
  }
}
#reader[data-keyboard="true"] .reader-heading,
#reader[data-keyboard="true"] .reader-footer,
#reader[data-keyboard="true"] .play-toolbar {
  display: none;
}
#reader[data-keyboard="true"] .reader-main,
#reader[data-keyboard="true"] .play-card {
  grid-template-rows: minmax(0, 1fr);
}
#reader[data-keyboard="true"] .play-reference {
  max-height: 86px;
}
@media (prefers-reduced-motion: reduce) {
  #reader * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
@media print {
  html,
  body {
    height: auto;
    overflow: visible;
  }
  #reader,
  #reader-notice {
    display: none !important;
  }
}