/* ─────────────────────────────────────────────
   Bookworm — styles
   parchment by day, lamplight by night
   ───────────────────────────────────────────── */

:root {
  --bg: #f1e6cc;
  --bg-grad-1: #f6ecd0;
  --bg-grad-2: #ebd9b0;
  --paper: #fbf3df;
  --paper-2: #f4e9c8;
  --ink: #2a1a0d;
  --ink-soft: #4a3522;
  --muted: #7a6648;
  --line: #d8c79a;
  --line-soft: #e6d6a8;
  --accent: #b3793b;
  --accent-2: #d4a64a;
  --good: #4f6b32;
  --bad: #a23a26;
  --shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 14px rgba(70,40,10,.10);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.5) inset, 0 14px 32px rgba(70,40,10,.18);
  --radius: 14px;
  --radius-sm: 10px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --tab-h: 64px;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1410;
    --bg-grad-1: #221912;
    --bg-grad-2: #120c08;
    --paper: #2a1f17;
    --paper-2: #1f160f;
    --ink: #f3e6c9;
    --ink-soft: #d6c39a;
    --muted: #9a8460;
    --line: #3d2e1f;
    --line-soft: #2a1f17;
    --accent: #d99a52;
    --accent-2: #f0c46a;
    --good: #94b06d;
    --bad: #d56b54;
    --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 16px rgba(0,0,0,.4);
    --shadow-lg: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 32px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 50% -10%, var(--bg-grad-1), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, var(--bg-grad-2), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  display: grid;
  /* topbar · stage · tabs · panel(scrollable) */
  grid-template-rows: auto auto auto minmax(140px, 1fr);
  height: 100dvh;
  padding-top: var(--safe-top);
  font-size: 16px;
  line-height: 1.45;
  overflow: hidden;            /* never let the page itself scroll */
  overscroll-behavior: none;
}

/* subtle paper grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(rgba(60,40,15,.04) 1px, transparent 1px),
    radial-gradient(rgba(60,40,15,.03) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  pointer-events: none;
  z-index: 0;
}
@media (prefers-color-scheme: dark) {
  body::before { background-image: none; }
}

/* ── topbar ─────────────────────────────────── */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 6px;
  z-index: 2;
}
.counter { display: flex; flex-direction: column; }
.counter-value {
  font-family: var(--serif);
  font-size: clamp(28px, 8vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.counter-unit {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  margin-top: 4px;
}
.counter-secondary { text-align: right; }
.rate {
  font-family: var(--serif);
  font-size: clamp(15px, 4vw, 18px);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.meta { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ── stage ──────────────────────────────────── */

.stage {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  padding: 4px 16px 8px;
  z-index: 1;
  min-height: 0;
}
.book {
  -webkit-appearance: none; appearance: none;
  border: 0; background: transparent; padding: 0; margin: 0;
  /* sized so the book + topbar + tabs + a usable panel always fit one screen */
  width: min(58vw, 34svh, 280px);
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  cursor: pointer; touch-action: manipulation;
  transition: transform 80ms ease;
  position: relative;
  filter: drop-shadow(0 14px 26px rgba(70,40,10,.22));
}
.book:active { transform: scale(.96); }
.book.tap { animation: bookTap 220ms cubic-bezier(.2,.8,.2,1.2); }
@keyframes bookTap {
  0%   { transform: scale(1)    rotate(0); }
  25%  { transform: scale(.94)  rotate(-1.2deg); }
  60%  { transform: scale(1.04) rotate(.6deg); }
  100% { transform: scale(1)    rotate(0); }
}
.book-svg { width: 100%; height: 100%; display: block; }
.book-hint {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  opacity: .8;
  transition: opacity .3s;
}
.book.read .book-hint { opacity: 0; }

.floaters {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
}

/* ── orbiting bookworms ────────────────────── */
/* A ring of bookworms around the book. Each worm has a fixed slot
   (slot = i mod 12, ring = floor(i/12)); buying more never moves the
   ones already on the ring. After two full rings of 12 we stop adding
   visible worms. The ring center and radius are kept in sync with the
   book's actual center & size from JS so the worms hug the book and
   don't dip into the progress bar. */
.orbiters {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}
.orbiter {
  position: absolute;
  top: var(--orbit-cy, 50%);
  left: var(--orbit-cx, 50%);
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35));
  will-change: transform;
  transform:
    translate(-50%, -50%)
    rotate(var(--angle, 0deg))
    translateY(calc(-1 * var(--orbit-r, 100px)))
    rotate(calc(-1 * var(--angle, 0deg)));
  animation: orbiterNudge var(--dur, 5s) ease-out infinite;
  animation-delay: var(--delay, 0s);
}
.orbiter[data-ring="0"] { --orbit-r: var(--orbit-r0, 100px); }
.orbiter[data-ring="1"] { --orbit-r: var(--orbit-r1, 112px); }
@keyframes orbiterNudge {
  0%, 88%, 100% {
    transform:
      translate(-50%, -50%)
      rotate(var(--angle, 0deg))
      translateY(calc(-1 * var(--orbit-r, 100px)))
      rotate(calc(-1 * var(--angle, 0deg)));
  }
  93% {
    transform:
      translate(-50%, -50%)
      rotate(var(--angle, 0deg))
      translateY(calc(-1 * (var(--orbit-r, 100px) - 12px)))
      scale(1.2)
      rotate(calc(-1 * var(--angle, 0deg)));
  }
}
@media (prefers-reduced-motion: reduce) { .orbiter { animation: none; } }
body.reduce-motion .orbiter            { animation: none; }
.floater {
  position: absolute;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(18px, 5vw, 24px);
  color: var(--accent);
  text-shadow: 0 2px 0 rgba(255,255,255,.4);
  transform: translate(-50%, -50%);
  animation: floatUp 900ms ease-out forwards;
  font-variant-numeric: tabular-nums;
}
.floater.crit { color: var(--accent-2); font-size: clamp(22px, 6.5vw, 30px); }
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(.8); }
  20%  { opacity: 1; transform: translate(-50%, -60%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}

.particle {
  position: absolute;
  width: 6px; height: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 1px;
  pointer-events: none;
  animation: particle 700ms ease-out forwards;
}
@keyframes particle {
  0%   { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx,0), var(--dy,40px)) rotate(var(--r,180deg)); }
}

/* ── progress / books ──────────────────────── */
.progress {
  width: 100%; max-width: 560px;
  display: grid; gap: 6px;
  margin-top: 6px;
}
.progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
  color: var(--ink-soft);
}
.progress-meta.small { font-size: 11px; color: var(--muted); }
.progress-meta b { font-weight: 600; color: var(--ink); }
.progress-track {
  height: 8px; border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  transition: width 120ms linear;
}

/* ── tabs ──────────────────────────────────── */
.tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--paper);
  border-top: 1px solid var(--line);
  height: var(--tab-h);
  z-index: 2;
}
.tab {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  display: grid; gap: 2px; place-items: center;
  padding: 6px 4px;
  cursor: pointer;
  position: relative;
  transition: color .15s;
}
.tab-ico { font-size: 20px; line-height: 1; }
.tab.active { color: var(--accent); }
.tab.active::after {
  content: ""; position: absolute; top: 0; left: 18%; right: 18%;
  height: 2px; background: var(--accent); border-radius: 0 0 4px 4px;
}
.tab[data-glow="1"]::before {
  content: ""; position: absolute; top: 8px; right: 22%;
  width: 8px; height: 8px; background: var(--accent-2);
  border-radius: 50%; box-shadow: 0 0 0 3px rgba(212,166,74,.25);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* ── panel ─────────────────────────────────── */
.panel {
  background: var(--paper);
  border-top: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px 14px calc(14px + var(--safe-bottom));
  z-index: 2;
  position: relative;
  min-height: 0;
}
.panel-page.hidden { display: none; }
.panel-head { padding: 4px 4px 8px; }
.panel-head h2 {
  font-family: var(--serif);
  font-size: 22px; margin: 0; letter-spacing: -0.01em;
}
.panel-head p { margin: 2px 0 0; font-size: 13px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
}

.item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow);
  transition: transform .08s ease, box-shadow .15s, border-color .15s, opacity .15s;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.item.affordable { border-color: var(--accent); }
.item.affordable .price { color: var(--good); }
.item.locked { opacity: .55; filter: saturate(.7); pointer-events: none; }
.item:active { transform: scale(.99); }
.item.flash { animation: flash .35s ease; }
@keyframes flash {
  0% { background: var(--accent-2); }
  100% { background: var(--paper-2); }
}

.item .icon {
  width: 56px; height: 56px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-size: 28px;
}
.item .body { min-width: 0; }
.item .name {
  font-family: var(--serif);
  font-size: 16px; font-weight: 700;
  display: flex; align-items: baseline; gap: 8px;
  letter-spacing: -0.01em;
}
.item .count {
  margin-left: 6px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.item .badge {
  margin-left: auto;
}
.item .desc {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item .meta-line {
  font-size: 11px; color: var(--ink-soft);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.item .right {
  display: grid; gap: 4px; justify-items: end; align-items: center;
  white-space: nowrap;
}
.item .price {
  font-family: var(--serif);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--ink-soft);
}
.item .price.too { color: var(--bad); }
.item .badge {
  font-size: 10px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
@media (prefers-color-scheme: dark) {
  .item .badge { color: #1a1410; }
}

/* ── owned upgrades strip ──────────────────── */
.owned {
  margin: 4px 0 10px;
}
.owned-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  padding: 0 2px 4px;
}
.owned-strip {
  display: flex; gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* break out of the panel's 14px x-padding so chips can scroll all
     the way to the screen edge. matching internal padding gives the
     first/last chip the same inset as everything else, and 14px
     bottom padding leaves room for the box-shadow. */
  margin: 0 -14px;
  padding: 6px 14px 14px;
  border-bottom: 1px dashed var(--line);
  scroll-padding: 14px;
}
.owned-strip::-webkit-scrollbar { display: none; }
.owned-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  font-family: var(--serif);
  letter-spacing: -0.005em;
  box-shadow: var(--shadow);
  cursor: default;
  transition: transform .08s;
}
.owned-chip:active { transform: scale(.97); }
.owned-chip .ico {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--paper-2);
  border-radius: 50%;
  font-size: 14px;
}

/* ── shelf ─────────────────────────────────── */
/* Layout: each <li> is a uniform 220px-tall slot so flex rows are even
   and the shelf line lands cleanly under every row. The visible book
   sits inside as <div class="spine">, with its own width and height
   varied per book (clamped so the longest line still fits). */
.shelf {
  list-style: none; margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 4px;
}
.shelf.has-books {
  background-image: linear-gradient(to bottom,
    transparent 0,
    transparent 220px,
    var(--ink-soft) 220px,
    var(--ink-soft) 224px,
    transparent 224px,
    transparent 234px);
  background-size: 100% 234px;
  background-repeat: repeat-y;
  background-position: 0 0;
}
.shelf li {
  flex: 0 0 auto;
  height: 220px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0; margin: 0;
  background: none; border: 0; box-shadow: none;
}
.shelf li.empty {
  height: 90px;
  width: 64px;
  border: 1px dashed var(--line);
  border-radius: 3px;
}
.shelf .spine {
  /* width / height set inline per book */
  border-radius: 3px 3px 1px 1px;
  background: var(--accent);
  position: relative;
  cursor: pointer;
  display: grid; place-items: center;
  color: #fff;
  font-size: 12px;
  text-align: center;
  padding: 10px 6px;
  font-family: var(--serif);
  font-weight: 600;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: .02em;
  line-height: 1.18;
  overflow-wrap: anywhere;
  hyphens: auto;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.18),
              inset -1px 0 0 rgba(0,0,0,.22),
              0 2px 4px rgba(70,40,10,.18);
  transition: transform .1s;
}
.shelf .spine.long      { font-size: 11px; }
.shelf .spine.very-long { font-size: 10px; }
.shelf li:active .spine { transform: rotate(180deg) translateY(-2px); }

/* ── more / settings / prestige ────────────── */
.block {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 10px;
}
.block h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: -0.01em;
}
.block p { margin: 4px 0; }

.row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px;
}
.row.right { justify-content: flex-end; }
.meta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
  padding: 3px 0;
}
.meta-row b { font-variant-numeric: tabular-nums; }

.prestige-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 8px;
}
.prestige-stats {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: grid; gap: 2px;
}
.prestige-stats .progress-track { margin-top: 6px; height: 6px; }
.prestige-stats .progress-fill {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

.btn {
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .08s, background .15s, border-color .15s, opacity .15s;
}
.btn:active { transform: scale(.97); }
.btn.primary {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  .btn.primary { color: #1a1410; }
}
.btn.primary[disabled] { opacity: .45; cursor: not-allowed; }
.btn.danger {
  background: transparent;
  color: var(--bad);
  border-color: rgba(162,58,38,.4);
}

.settings { display: grid; gap: 4px; margin: 6px 0 4px; }
.settings .row {
  justify-content: space-between;
  margin-top: 0; padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.settings .row:last-child { border-bottom: 0; }
input[type="checkbox"] {
  width: 20px; height: 20px;
  accent-color: var(--accent);
}

/* ── toasts ────────────────────────────────── */
/* Anchored to the bottom of the stage (just above the progress bar) so
   they never cover the stat counter at the top. Newer toasts appear at
   the bottom; older ones drift up as new ones arrive. */
.toasts {
  position: absolute;
  left: 0; right: 0;
  bottom: 76px;                     /* sits just above the progress bar */
  display: flex; flex-direction: column;
  gap: 6px;
  align-items: center;
  z-index: 10;
  pointer-events: none;
  padding: 0 12px;
}
@media (max-height: 600px) { .toasts { bottom: 12px; } }

.toast {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  box-shadow: var(--shadow-lg);
  animation: toastIn 240ms cubic-bezier(.2,.8,.2,1.05) forwards,
             toastOut 320ms ease-in 2.5s forwards;
  text-align: center;
  font-family: var(--serif);
  display: flex; gap: 8px; align-items: center; justify-content: center;
  max-width: min(92vw, 460px);
}
.toast.achievement {
  background: var(--ink); color: var(--paper); border-color: transparent;
}

/* Card-style notification for book completion / welcome */
.toast.card {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex; gap: 12px; align-items: center;
  text-align: left;
  font-family: var(--sans);
  box-shadow: var(--shadow-lg);
  animation: toastCardIn 320ms cubic-bezier(.2,.8,.2,1.1) forwards,
             toastOut 360ms ease-in 3s forwards;
}
.toast.card .ico {
  width: 38px; height: 38px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 20px;
  flex: 0 0 auto;
  box-shadow: 0 2px 0 rgba(0,0,0,.15) inset, 0 4px 10px rgba(70,40,10,.18);
}
@media (prefers-color-scheme: dark) { .toast.card .ico { color: #1a1410; } }
.toast.card .kicker {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  line-height: 1;
}
.toast.card .title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
  margin-top: 3px;
  /* clamp very long titles */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@keyframes toastIn      { from { opacity: 0; transform: translateY(10px) scale(.96); }
                          to   { opacity: 1; transform: none; } }
@keyframes toastCardIn  { from { opacity: 0; transform: translateY(14px) scale(.94); }
                          to   { opacity: 1; transform: none; } }
@keyframes toastOut     { to   { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ── dialog ───────────────────────────────── */
dialog.io {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  padding: 14px;
  max-width: 92vw; width: 460px;
  box-shadow: var(--shadow-lg);
}
dialog.io::backdrop { background: rgba(0,0,0,.45); }
dialog.io h3 {
  margin: 0 0 8px; font-family: var(--serif); font-size: 18px;
}
dialog.io textarea {
  width: 100%; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 8px;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

/* ── accessibility ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}
body.reduce-motion .floater,
body.reduce-motion .particle,
body.reduce-motion .book.tap { animation: none !important; }

/* ── narrow tweaks ─────────────────────────── */
@media (max-height: 720px) {
  :root { --tab-h: 56px; }
  .counter-value { font-size: 30px; }
  .book { width: min(54vw, 30svh, 240px); }
}
@media (max-height: 600px) {
  .book { width: min(48vw, 28svh, 200px); }
  .progress { display: none; }
}
@media (max-height: 520px) {
  .book { width: min(42vw, 24svh, 170px); }
  .topbar { padding-top: 6px; padding-bottom: 2px; }
  .counter-unit { display: none; }
}

/* desktop niceties */
@media (min-width: 720px) {
  body {
    grid-template-columns: 1fr min(640px, 92vw) 1fr;
    grid-template-rows: auto auto auto minmax(140px, 1fr);
  }
  .topbar, .stage, .tabs, .panel { grid-column: 2; }
  .book { width: min(40vw, 38svh, 280px); }
}