/* Storylight — Otto and the Shy Moon
   Generated RGBA artwork (GPT Image 2 via Higgsfield, cut out losslessly) supplies the
   wooden, paper and gold-foil surfaces and every icon is its own transparent PNG.
   Labels, focus states and hit areas stay native HTML. */
:root {
  --midnight: #141a33;
  --navy: #1d2649;
  --cream: #f8f0dd;
  --paper: #f3e8cf;
  --ink: #2c2a3e;
  --ink-soft: #5a5470;
  --honey: #d9a45c;
  --oak: #c98d4f;
  --gold: #e6bd66;
  --coral: #e8604a;
  --sky: #8fb8e6;
  --ui-font: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --read-font: "Andika", "Fredoka", system-ui, sans-serif;
  --spring: cubic-bezier(0.2, 1.35, 0.3, 1);
  --soft: cubic-bezier(0.22, 0.8, 0.2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--midnight); }
body {
  font-family: var(--ui-font);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
button { font: inherit; cursor: pointer; }
img { display: block; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#sparkles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
#focus-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, #05081a55, #05081aaa); z-index: 4; animation: fade-in 300ms both; }

#interface { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#interface > * { pointer-events: auto; }

/* ---------- entrance choreography ---------- */
.hud { animation: hud-pop 700ms var(--spring) both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
@keyframes hud-pop {
  from { opacity: 0; transform: translateY(18px) scale(0.85); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- icons: one transparent PNG each ---------- */
.icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: center / contain no-repeat;
  pointer-events: none;
  transition: transform 250ms var(--spring);
}
.icon-play { background-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/play.b923a70e2f71f2a2.webp"); }
.icon-pause { background-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/pause.15d6646784f09b43.webp"); }
.icon-next { background-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/next.dc7e787b49815b48.webp"); }
.icon-back { background-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/back.18c2cac8ae4c18e2.webp"); }
.icon-sound { background-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/sound.d56e4ce5efc1cbff.webp"); }
.icon-listen { background-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/listen.a3d2cb78fc3a543c.webp"); }
.icon-magic { background-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/magic.4a2e9880963cdf1a.webp"); }
.icon-home { background-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/home.cb2bbd65e073cb8b.webp"); }
.icon-book { background-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/book.d05eed603c2ba1a1.webp"); }
.icon-moon { background-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/moon.b46fc687b5e3aa8e.webp"); }
.icon-star { background-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/star.35ce01e1ac338d99.webp"); }
.icon-hand { background-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/hand.621acc491720839c.webp"); }
.icon-abc { background-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/abc.c70c0686a7719a7c.webp"); }
.icon-look { background-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/look.741fe92c1b9a4986.webp"); }
.icon-music { background-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/music.66c42a3231ab2f38.webp"); }
.icon-settings { background-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/settings.563a5e5163297563.webp"); }

/* ---------- wooden controls ---------- */
.round-button {
  position: relative;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/round.afdab066e34f07c6.webp") center / 100% 100% no-repeat;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 5px 9px #05081a70;
  transition: transform 260ms var(--spring);
}
.round-button .icon { width: 27px; height: 27px; }
.round-button.big { width: 78px; height: 78px; }
.round-button.big .icon { width: 38px; height: 38px; }
.round-button:hover { transform: translateY(-3px) scale(1.08) rotate(-3deg); box-shadow: 0 9px 14px #05081a80; }
.round-button:hover .icon { transform: scale(1.12); }
.round-button:active { transform: translateY(1px) scale(0.94); box-shadow: 0 2px 4px #05081a70; transition-duration: 80ms; }
.round-button:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.round-button.muted .icon { opacity: 0.75; }
.round-button.muted::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 4px;
  background: var(--coral);
  border-radius: 2px;
  transform: rotate(-42deg);
  box-shadow: 0 0 0 2px #fff9ec;
}
.round-button.bump { animation: bump 450ms var(--spring); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18) rotate(6deg); } 100% { transform: scale(1); } }

.pill-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 66px;
  padding: 10px 34px;
  border: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.01em;
  background: transparent;
  border-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/pill.f374995659899b10.webp") 112 fill / 33px / 0 stretch;
  border-radius: 999px;
  box-shadow: 0 6px 10px #05081a70;
  transition: transform 260ms var(--spring), color 200ms;
  white-space: nowrap;
}
.pill-button .icon { width: 26px; height: 26px; }
.pill-button:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 16px #05081a80; }
.pill-button:hover .icon { transform: scale(1.15) rotate(-6deg); }
.pill-button:active, .pill-button[aria-pressed="true"] {
  border-image-source: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/pill-pressed.86ee68b30db5e1d0.webp");
  color: var(--cream);
  transform: translateY(1px);
}
.pill-button:active { transition-duration: 80ms; transform: translateY(2px) scale(0.97); }
.pill-button[aria-pressed="true"] .icon { opacity: 1; }
.pill-button:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.pill-button.small { min-height: 44px; padding: 6px 18px; font-size: 15px; border-image-width: 22px; }
.pill-button.small .icon { width: 20px; height: 20px; }
.pill-button.primary { min-width: 236px; font-size: 22px; }
.pill-button .label-swap { display: inline-block; animation: label-in 350ms var(--spring); }
@keyframes label-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- HUD ---------- */
.brand {
  position: absolute;
  top: 18px;
  left: 22px;
  width: 172px;
  opacity: 0.94;
  transition: transform 300ms var(--spring), opacity 200ms;
}
.brand img { width: 100%; height: auto; }
.brand:hover { opacity: 1; transform: scale(1.04) rotate(-1deg); }

.top-actions {
  position: absolute;
  top: 18px;
  right: 22px;
  display: flex;
  gap: 12px;
}

.progress-dots {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 20px;
  background: #0b0f2666;
  /* backdrop-filter removed: it flashes black boxes in Chrome */
}
.progress-dots.hud { animation-name: dots-in; }
@keyframes dots-in { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.progress-dots i {
  width: 15px;
  height: 15px;
  background: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/star.35ce01e1ac338d99.webp") center / contain no-repeat;
  opacity: 0.28;
  opacity: 0.38;
  transition: opacity 400ms, transform 400ms var(--spring);
}
.progress-dots i:hover { transform: scale(1.3); opacity: 0.9; }
.progress-dots i.read { opacity: 0.85; }
.progress-dots i.current { opacity: 1; transform: scale(1.5); animation: dot-pulse 2.2s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { transform: scale(1.5); } 50% { transform: scale(1.75) rotate(12deg); } }

/* ---------- the reading card (flat, big, no perspective) ---------- */
.text-panel {
  position: absolute;
  left: 3.5vw;
  top: 50%;
  width: clamp(340px, 37vw, 560px);
  max-height: 84vh;
  transform: translateY(-50%);
  transform-origin: 50% 50%;
  padding: 0;
  color: var(--ink);
  background: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/textures/paper.dfc678426b14ef6a.webp") center / cover, var(--paper);
  border-radius: 8px;
  box-shadow:
    0 0 0 1px #d4b982,
    inset 0 0 0 5px #fff9ec,
    inset 0 0 0 6px #d4b98266,
    0 14px 34px #05081a55,
    0 3px 10px #05081a44;
  cursor: zoom-in;
  transition: transform 700ms var(--spring), box-shadow 500ms;
  z-index: 6;
}
.text-panel.hud { animation: panel-in 900ms var(--spring) both; animation-delay: 300ms; }
@keyframes panel-in {
  from { opacity: 0; transform: translate(-40px, -50%) rotate(-4deg) scale(0.9); }
  to { opacity: 1; transform: translate(0, -50%) rotate(0) scale(1); }
}
.text-panel.turning { animation: panel-turn 420ms var(--soft) both; }
@keyframes panel-turn {
  0% { opacity: 1; transform: translate(0, -50%); }
  100% { opacity: 0; transform: translate(-30px, -50%) rotate(-3deg) scale(0.96); }
}
.text-panel.arriving { animation: panel-arrive 700ms var(--spring) both; }
@keyframes panel-arrive {
  0% { opacity: 0; transform: translate(30px, -50%) rotate(2deg) scale(0.96); }
  100% { opacity: 1; transform: translate(0, -50%); }
}
.text-panel.focus {
  transform: translate(calc(50vw - 50% - 3.5vw), -50%) scale(1.3);
  cursor: zoom-out;
  box-shadow: 0 0 0 1px #d4b982, inset 0 0 0 5px #fff9ec, inset 0 0 0 6px #d4b98266, 0 50px 120px #05081acc;
  z-index: 8;
}
.text-panel .corner {
  position: absolute;
  width: 74px;
  height: 74px;
  background: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/corner.a562b92bf6f5ba2b.webp") center / contain no-repeat;
  opacity: 0.9;
  pointer-events: none;
}
.text-panel .corner.tl { left: 10px; top: 10px; }
.text-panel .corner.br { right: 10px; bottom: 10px; transform: scale(-1); }
.text-panel-inner { padding: 44px 46px 30px 50px; display: flex; flex-direction: column; gap: 10px; }
.page-eyebrow { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: #a5642f; font-weight: 600; }
.page-heading {
  margin: 0 0 6px;
  font-family: "Baloo 2", var(--ui-font);
  font-weight: 800;
  font-size: 38px;
  line-height: 1.05;
  color: #8d4f1f;
  animation: heading-in 600ms var(--spring) both;
  animation-delay: 120ms;
}
@keyframes heading-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.page-words {
  margin: 0;
  font-family: var(--read-font);
  font-size: 34px;
  line-height: 1.58;
  font-weight: 400;
  color: var(--ink);
  text-wrap: pretty;
}
.text-panel.size-large .page-words { font-size: 40px; line-height: 1.5; }
.page-words .word {
  display: inline-block;
  padding: 0 4px;
  margin: 0 -4px;
  border-radius: 10px;
  cursor: pointer;
  animation: word-in 520ms var(--spring) both;
  animation-delay: calc(var(--i, 0) * 32ms + 200ms);
  transition: background-color 160ms, color 160ms, transform 220ms var(--spring), box-shadow 160ms;
}
@keyframes word-in { from { opacity: 0; transform: translateY(14px) rotate(-3deg) scale(0.9); } to { opacity: 1; transform: none; } }
.page-words .word:hover { background: #ffd97a; transform: translateY(-3px) scale(1.06); }
.page-words .word.link { text-decoration: underline dotted #d9a45c; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.page-words .word.active {
  background: #ffd166;
  color: #1e1d2e;
  box-shadow: 0 3px 0 #e0952f;
  transform: translateY(-3px) scale(1.08);
}
.page-words .word.spoken { color: #1e1d2e; }
.page-words .word.link.lit:not(.active) { text-decoration-style: solid; text-decoration-color: #e0952f; color: #7a4a10; }
.page-words .word.said { animation: word-said 500ms var(--spring); }
@keyframes word-said { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-3deg); } 100% { transform: scale(1); } }
.text-panel.self-read .page-words .word { color: #3a3552; }
.page-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; border-top: 1px solid #c9b48a66; padding-top: 12px; }
.page-hint { display: none; }
.zoom-hint { font-size: 12px; letter-spacing: 0.06em; color: #a58d66; text-align: left; }

/* the big word that pops out when you tap one */
.word-zoom {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9;
  pointer-events: none;
  padding: 22px 54px;
  border-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/tag.dd31da96c8d4e59c.webp") 60 fill / 34px / 0 stretch;
  color: var(--ink);
  font-family: var(--read-font);
  font-weight: 700;
  font-size: 84px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 26px;
  box-shadow: 0 22px 44px #05081a99;
  animation: word-zoom 1400ms var(--spring) both;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.word-zoom img {
  display: block;
  width: clamp(200px, 24vw, 330px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
  border: 3px solid #e6c98a;
  box-shadow: 0 12px 26px #05081a55, inset 0 0 0 2px #fff7e6;
  background: #f7efdc;
}
/* a picture card: painted meaning above, the word beneath */
.word-zoom.has-picture {
  padding: 20px 28px 18px;
  border-image: none;
  background: #f7efdc url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/textures/paper.dfc678426b14ef6a.webp") center / 600px;
  border: 3px solid #d9a45c;
  border-radius: 28px;
  box-shadow: 0 26px 60px #05081a99, inset 0 0 0 5px #fff7e6, inset 0 0 0 7px #e2c07a66;
  animation-duration: 2700ms;
}
.word-zoom.has-picture .zoom-label { font-size: 64px; }
@keyframes word-zoom {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-8deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
  30% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(0.9); }
}

.hint-card {
  position: absolute;
  right: 22px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 300px;
  padding: 14px 22px 14px 32px;
  border-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/tag.dd31da96c8d4e59c.webp") 60 fill / 26px / 0 stretch;
  color: var(--ink);
  border-radius: 22px;
  box-shadow: 0 8px 18px #05081a66;
}
.hint-card.swap { animation: hint-in 600ms var(--spring); }
.hint-card p { margin: 0; font-size: 15px; line-height: 1.35; color: #4a3b2a; }
.hint-card .icon { width: 30px; height: 30px; flex: none; animation: hand-tap 1.6s ease-in-out infinite; }
@keyframes hint-in { from { opacity: 0; transform: translateY(14px) scale(0.9) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes hand-tap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px) rotate(-6deg); } }

.reader-bar {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 22px;
}
.reader-bar.hud { animation-name: bar-in; }
@keyframes bar-in { from { opacity: 0; transform: translate(-50%, 40px); } to { opacity: 1; transform: translate(-50%, 0); } }
.reader-center { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mode-toggle { display: flex; gap: 8px; }

.word-tip {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  padding: 8px 18px;
  border-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/tag.dd31da96c8d4e59c.webp") 60 fill / 22px / 0 stretch;
  color: var(--ink);
  font-family: var(--read-font);
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  border-radius: 18px;
  box-shadow: 0 6px 12px #05081a80;
  animation: hint-in 260ms var(--spring);
}
.magic-word {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: "Baloo 2", var(--ui-font);
  font-size: 56px;
  font-weight: 800;
  color: var(--cream);
  text-shadow: 0 0 18px #ffd97a, 0 3px 0 #a86a2c, 0 8px 22px #05081a;
  animation: magic-word 1.4s var(--spring) forwards;
}
@keyframes magic-word {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.4) rotate(-6deg); }
  20% { opacity: 1; transform: translate(-50%, -60%) scale(1.1) rotate(2deg); }
  70% { opacity: 1; transform: translate(-50%, -80%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(1.05); }
}

/* ---------- loading / title screen ---------- */
#loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 30%, #2a3566 0%, #141a33 55%, #0a0d1f 100%);
  z-index: 20;
  transition: opacity 900ms var(--soft);
}
#loading.fade { opacity: 0; pointer-events: none; }
#loading.fade .loading-card { animation: card-leave 800ms var(--soft) both; }
@keyframes card-leave { to { opacity: 0; transform: translateY(-30px) scale(1.06); } }
.loading-sky { position: absolute; inset: 0; overflow: hidden; }
.loading-moon {
  position: absolute;
  left: 50%;
  top: 8%;
  width: 260px;
  height: 260px;
  margin-left: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff6d8, #f0d998 60%, #d9b56a);
  box-shadow: 0 0 80px 30px #ffe9a866, 0 0 200px 90px #ffd97a22;
  animation: moon-float 7s ease-in-out infinite;
}
.loading-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, #fff 60%, transparent),
    radial-gradient(1.2px 1.2px at 28% 12%, #ffe9a8 60%, transparent),
    radial-gradient(2px 2px at 68% 18%, #fff 60%, transparent),
    radial-gradient(1.4px 1.4px at 82% 34%, #fff 60%, transparent),
    radial-gradient(1.2px 1.2px at 42% 30%, #ffe9a8 60%, transparent),
    radial-gradient(1.8px 1.8px at 90% 70%, #fff 60%, transparent),
    radial-gradient(1.2px 1.2px at 8% 72%, #fff 60%, transparent),
    radial-gradient(1.5px 1.5px at 22% 86%, #ffe9a8 60%, transparent),
    radial-gradient(1.2px 1.2px at 58% 80%, #fff 60%, transparent),
    radial-gradient(1.6px 1.6px at 74% 90%, #fff 60%, transparent),
    radial-gradient(1.2px 1.2px at 36% 60%, #fff 60%, transparent),
    radial-gradient(1.4px 1.4px at 50% 8%, #fff 60%, transparent);
  animation: twinkle 3s ease-in-out infinite alternate;
}
@keyframes moon-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes twinkle { from { opacity: 0.55; } to { opacity: 1; } }

.loading-card {
  position: relative;
  width: min(640px, 92vw);
  padding: 40px 48px 34px;
  text-align: center;
  color: var(--ink);
  background: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/textures/paper.dfc678426b14ef6a.webp") center / cover, var(--paper);
  border-radius: 6px;
  box-shadow:
    0 0 0 1px #d4b982,
    0 0 0 6px var(--navy),
    0 30px 80px #05081acc;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: hud-pop 900ms var(--spring) both;
}
.loading-card > * { animation: heading-in 700ms var(--spring) both; }
.loading-card > :nth-child(5) { animation-delay: 150ms; }
.loading-card > :nth-child(6) { animation-delay: 250ms; }
.loading-card > :nth-child(7) { animation-delay: 350ms; }
.loading-card > :nth-child(8) { animation-delay: 450ms; }
.loading-card .corner {
  position: absolute;
  width: 84px;
  height: 84px;
  background: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/corner.a562b92bf6f5ba2b.webp") center / contain no-repeat;
  opacity: 0.95;
}
.loading-card .corner.tl { left: 10px; top: 10px; }
.loading-card .corner.tr { right: 10px; top: 10px; transform: scaleX(-1); }
.loading-card .corner.bl { left: 10px; bottom: 10px; transform: scaleY(-1); }
.loading-card .corner.br { right: 10px; bottom: 10px; transform: scale(-1); }
.eyebrow { font-size: 11px; letter-spacing: 0.28em; color: #a5642f; font-weight: 600; }
.loading-card h1 { margin: 0; line-height: 0; }
.loading-logo { width: 380px; max-width: 80vw; height: auto; animation: logo-float 5s ease-in-out infinite; }
@keyframes logo-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-1deg); } }
.loading-blurb { margin: 0; max-width: 420px; font-size: 16px; line-height: 1.55; color: #5a4a35; }
.loading-progress {
  width: 260px;
  height: 10px;
  border-radius: 6px;
  background: #d9c8a4;
  overflow: hidden;
  box-shadow: inset 0 1px 2px #8a6c3f66;
}
.loading-progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--honey), var(--gold));
  transition: width 400ms var(--soft);
}
#loading-copy { margin: 0; font-size: 14px; color: #8c6a3c; min-height: 20px; }
.loading-footnote { margin-top: 6px; font-size: 12px; letter-spacing: 0.08em; color: #a58d66; }
#btn-open { animation: hud-pop 700ms var(--spring) both, open-nudge 2.4s ease-in-out 1.2s infinite; }
@keyframes open-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------- settings folio ---------- */
#panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0a0d1fcc;
  z-index: 10;
  animation: fade-in 250ms both;
}
.panel-shell {
  position: relative;
  width: min(620px, 94vw);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 34px 46px 30px;
  color: var(--ink);
  background: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/textures/paper.dfc678426b14ef6a.webp") center / cover, var(--paper);
  border-radius: 8px;
  box-shadow: 0 0 0 1px #d4b982, inset 0 0 0 6px #fff9ec, inset 0 0 0 7px #d4b98266, 0 0 0 8px var(--navy), 0 30px 80px #05081acc;
  animation: hud-pop 600ms var(--spring) both;
  scrollbar-width: thin;
  scrollbar-color: #b8975f #ecdfc2;
}
.panel-shell .corner {
  position: absolute;
  width: 74px;
  height: 74px;
  background: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/corner.a562b92bf6f5ba2b.webp") center / contain no-repeat;
  pointer-events: none;
}
.panel-shell .corner.tl { left: 10px; top: 10px; }
.panel-shell .corner.tr { right: 10px; top: 10px; transform: scaleX(-1); }
.panel-shell .corner.bl { left: 10px; bottom: 10px; transform: scaleY(-1); }
.panel-shell .corner.br { right: 10px; bottom: 10px; transform: scale(-1); }
.folio-head { display: flex; align-items: center; gap: 22px; padding: 6px 10px 0; }
.folio-head .portrait {
  flex: none;
  width: 104px;
  height: 104px;
  padding: 11px;
  background: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/round.afdab066e34f07c6.webp") center / 100% 100% no-repeat;
  border-radius: 50%;
  box-shadow: 0 6px 10px #05081a55;
  animation: hud-pop 700ms var(--spring) both;
}
.folio-head .portrait img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.panel-shell h2 { margin: 2px 0 4px; font-family: "Baloo 2", var(--ui-font); font-size: 36px; font-weight: 800; color: #3d2a17; line-height: 1; }
.panel-shell .panel-description { margin: 0; color: #6b5740; font-size: 14px; line-height: 1.5; }
.folio-rule { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; }
.folio-rule::before, .folio-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #c9a45f, transparent); }
.folio-rule .icon { width: 16px; height: 16px; opacity: 0.8; }
.folio-section { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-family: "Baloo 2", var(--ui-font); font-size: 20px; font-weight: 800; color: #8d4f1f; }
.folio-section .icon { width: 26px; height: 26px; }
.settings-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px dashed #b8975f55;
  animation: heading-in 500ms var(--spring) both;
}
.settings-row:nth-of-type(2) { animation-delay: 60ms; }
.settings-row:nth-of-type(3) { animation-delay: 120ms; }
.settings-row:nth-of-type(4) { animation-delay: 180ms; }
.settings-row:nth-of-type(5) { animation-delay: 240ms; }
.settings-row:nth-of-type(6) { animation-delay: 300ms; }
.settings-row:nth-of-type(7) { animation-delay: 360ms; }
.settings-row:nth-of-type(8) { animation-delay: 420ms; }
.settings-row .row-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/tile.26d4a3e3569a5f83.webp") center / 100% 100% no-repeat;
}
.settings-row .row-icon .icon { width: 24px; height: 24px; }
.settings-row label { font-weight: 600; font-size: 16px; color: #3d2a17; }
.settings-row small { display: block; font-weight: 400; font-size: 12px; color: #8c6a3c; margin-top: 2px; }
.row-control { display: flex; justify-content: flex-end; }
.settings-row select, .settings-row input[type="range"] { accent-color: var(--coral); }
.settings-row select {
  font: inherit;
  font-size: 14px;
  padding: 7px 34px 7px 12px;
  border-radius: 10px;
  border: 1px solid #b8975f;
  background: #fff9ec url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/icons/next.dc7e787b49815b48.webp") right 8px center / 18px no-repeat;
  color: var(--ink);
  appearance: none;
  max-width: 230px;
  transition: transform 200ms var(--spring), box-shadow 200ms;
}
.settings-row select:hover { transform: translateY(-1px); box-shadow: 0 4px 10px #05081a22; }
.settings-row input[type="range"] { width: 180px; height: 8px; }
.switch {
  width: 64px;
  height: 34px;
  border: 0;
  border-radius: 17px;
  background: #cdb88e;
  position: relative;
  transition: background 250ms;
  box-shadow: inset 0 2px 4px #5a3d1a33;
  padding: 0;
}
.switch i {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 30px;
  height: 30px;
  background: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/round.afdab066e34f07c6.webp") center / 100% 100% no-repeat;
  transition: transform 350ms var(--spring);
}
.switch[aria-checked="true"] { background: var(--coral); }
.switch[aria-checked="true"] i { transform: translateX(30px); }
.panel-actions { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
.status-line { font-size: 12px; color: #8c6a3c; margin-top: 14px; text-align: center; line-height: 1.5; }

#toast {
  position: absolute;
  left: 50%;
  top: 92px;
  transform: translate(-50%, -14px) scale(0.95);
  padding: 10px 22px;
  border-image: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/ui/tag.dd31da96c8d4e59c.webp") 60 fill / 22px / 0 stretch;
  color: var(--ink);
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms, transform 500ms var(--spring);
  border-radius: 18px;
  box-shadow: 0 6px 12px #05081a80;
  z-index: 7;
}
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#tooltip {
  position: absolute;
  padding: 6px 12px;
  border-radius: 8px;
  background: #0b0f26e6;
  color: var(--cream);
  font-size: 13px;
  pointer-events: none;
  transform: translate(-50%, 8px);
  white-space: nowrap;
  animation: hint-in 200ms var(--spring);
  z-index: 9;
}

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .brand { width: 120px; top: 12px; left: 14px; }
  .top-actions { top: 12px; right: 12px; gap: 8px; }
  .round-button { width: 48px; height: 48px; }
  .round-button .icon { width: 22px; height: 22px; }
  .progress-dots { top: 70px; gap: 6px; padding: 6px 10px; }
  .progress-dots i { width: 11px; height: 11px; }
  .text-panel { left: 3vw; right: 3vw; width: auto; top: auto; bottom: 112px; transform: none; max-height: 44vh; overflow: auto; }
  .text-panel.hud { animation-name: panel-in-mobile; }
  @keyframes panel-in-mobile { from { opacity: 0; transform: translateY(40px) scale(0.94); } to { opacity: 1; transform: none; } }
  .text-panel.turning { animation-name: panel-turn-mobile; }
  @keyframes panel-turn-mobile { to { opacity: 0; transform: translateX(-30px) scale(0.97); } }
  .text-panel.arriving { animation-name: panel-arrive-mobile; }
  @keyframes panel-arrive-mobile { from { opacity: 0; transform: translateX(30px) scale(0.97); } to { opacity: 1; transform: none; } }
  .text-panel.focus { transform: translateY(-16vh) scale(1.08); }
  .text-panel .corner { width: 54px; height: 54px; }
  .text-panel-inner { padding: 26px 22px 18px 26px; gap: 6px; }
  .page-eyebrow { font-size: 11px; }
  .page-heading { font-size: 26px; }
  .page-words { font-size: 23px; line-height: 1.5; }
  .text-panel.size-large .page-words { font-size: 27px; }
  .zoom-hint { display: none; }
  .page-foot { display: none; }
  .hint-card { display: none; }
  .reader-bar { left: 50%; bottom: 16px; gap: 12px; }
  .round-button.big { width: 58px; height: 58px; }
  .round-button.big .icon { width: 28px; height: 28px; }
  .pill-button.primary { min-width: 170px; font-size: 18px; min-height: 54px; padding: 8px 22px; }
  .mode-toggle { display: none; }
  .word-zoom { font-size: 56px; padding: 16px 34px; }
  .word-zoom img { width: clamp(150px, 42vw, 230px); }
  .word-zoom.has-picture .zoom-label { font-size: 44px; }
  .magic-word { font-size: 40px; }
}
@media (max-height: 600px) {
  .text-panel-inner { padding: 24px 30px 16px 34px; gap: 4px; }
  .page-words { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hint-card .icon, .loading-moon, .loading-stars, .progress-dots i.current, .loading-logo, #btn-open { animation: none; }
}

/* ---------- the bookshelf ---------- */
#loading.book { background: transparent; place-items: end center; padding-bottom: 28px; pointer-events: none; }
#loading.book .loading-sky { display: none; }
#loading.book .loading-card { pointer-events: auto; width: min(460px, 90vw); padding: 26px 30px 22px; gap: 10px; }
#loading.book .loading-logo { width: 280px; }
#loading.book .loading-blurb { font-size: 15px; }
#loading.book .eyebrow, #loading.book .loading-footnote { display: none; }
#interface.view-shelf .progress-dots, #interface.view-shelf #btn-look, #interface.view-shelf .reader-bar, #interface.view-shelf .hint-card, #interface.view-shelf .text-panel { display: none !important; }
.shelf-strip {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: auto; z-index: 6;
}
.shelf-strip.arriving { animation: hud-pop 700ms var(--spring) both; }
.shelf-title { font-family: "Baloo 2", var(--ui-font); font-weight: 800; font-size: 22px; color: #fff3d6; text-shadow: 0 2px 0 #5a3a1a, 0 6px 18px #00000088; letter-spacing: 0.02em; }
.shelf-books { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.shelf-book {
  font: inherit; text-align: left; cursor: pointer; min-width: 180px;
  padding: 10px 16px 9px; border: 0; border-radius: 14px; color: var(--ink);
  background: url("https://api.storycomet.app/storage/v1/object/public/story-assets/public/textures/paper.dfc678426b14ef6a.webp") center / cover, var(--paper);
  box-shadow: 0 0 0 1px #d4b982, 0 0 0 4px var(--navy), 0 10px 24px #05081a99;
  transition: transform 220ms var(--spring), box-shadow 220ms;
}
.shelf-book b { display: block; font-family: "Baloo 2", var(--ui-font); font-size: 16px; line-height: 1.15; }
.shelf-book small { display: block; margin-top: 2px; font-size: 12px; color: #7a6a4a; }
.shelf-book:hover, .shelf-book.hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 0 0 1px #ffd97a, 0 0 0 4px var(--navy), 0 16px 30px #05081aaa; }
.shelf-book.soon { opacity: 0.8; }
.shelf-book.soon small { color: #a08a5a; }
@media (max-width: 720px) {
  .shelf-book { min-width: 0; padding: 8px 12px; }
  .shelf-book b { font-size: 14px; }
  .shelf-title { font-size: 18px; }
}
#interface.book-closed .reader-bar, #interface.book-closed .progress-dots, #interface.book-closed #btn-look, #interface.book-closed .hint-card { display: none !important; }

/* Parent account sits outside the book controls and works while the shelf loads. */
.account-open{position:fixed;right:max(20px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));z-index:80;border:1px solid #d3be90;border-radius:24px;background:#fff8e8;color:#3c3349;padding:11px 18px;font:600 15px 'Fredoka',sans-serif;cursor:pointer;box-shadow:0 3px 12px #10162e22}
body:has(#interface:not([hidden])) .account-open{top:32px;right:240px;font-size:13px;padding:9px 14px}
@media(max-width:900px){body:has(#interface:not([hidden])) .account-open{top:108px;right:12px;bottom:auto}body:has(#interface.view-shelf:not([hidden])) .account-open{top:76px}}
#account-dialog{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:32px;border:1px solid #cdbf9a;border-radius:24px;background:#fffaf0;color:#3c3349;box-shadow:0 24px 100px #0a0d2a66;font-family:'Andika',sans-serif}
#account-dialog::backdrop{background:#151630a8;backdrop-filter:blur(7px)}
#account-dialog h2{font:600 29px/1.2 'Fredoka',sans-serif;margin:10px 0 14px}
#account-dialog p{font-size:14px;line-height:1.65;margin:12px 0}
#account-dialog [hidden]{display:none!important}
.account-eyebrow{font-size:11px!important;letter-spacing:.16em;color:#75658e;font-weight:bold}
.account-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#655574;font-size:30px;width:44px;height:44px;cursor:pointer}
.account-primary{display:block;width:100%;border:0;border-radius:12px;background:#62559b;color:white;font:600 16px 'Fredoka',sans-serif;padding:14px;min-height:48px;cursor:pointer;margin:12px 0}
.account-primary:hover{background:#514582}.account-primary:disabled{opacity:.6;cursor:wait}
.account-divider{text-align:center;color:#827783;font-size:12px;margin:17px 0}
#account-dialog label{display:block;font-size:13px;margin:8px 0}
#account-dialog input{box-sizing:border-box;display:block;width:100%;border:1px solid #c9bed0;border-radius:10px;background:#fffdf8;color:#30263e;padding:13px;font:16px 'Andika',sans-serif}
#account-dialog input:focus-visible,#account-dialog button:focus-visible,.account-open:focus-visible{outline:3px solid #bba6ec;outline-offset:3px}
.account-text-button{background:none;border:0;color:#62559b;text-decoration:underline;padding:10px 0;cursor:pointer}
#account-status{min-height:24px;color:#655480}.account-legal{text-align:center;font-size:12px!important}.account-legal a{color:#75658e}
@media(max-width:600px){#account-dialog{padding:26px 22px}.account-open{font-size:13px;right:12px;top:12px}}

.storycomet-wordmark { color:#fff4c9; font-family:"Fredoka",sans-serif; font-size:26px; font-weight:650; letter-spacing:-.7px; white-space:nowrap; text-shadow:0 2px 1px #875c32,0 4px 12px #51391580; }
.brand { width:auto; top:32px; text-decoration:none; }
.storycomet-wordmark > span { font-size:32px; color:#ffdc85; vertical-align:-2px; }
.loading-brand { font-size:42px; margin:10px 0 24px; }
#loading.book .loading-brand { display:none; }
@media(max-width:700px) { .brand { width:auto; top:18px; } .brand .storycomet-wordmark { font-size:20px; } .brand .storycomet-wordmark > span { font-size:25px; } }