:root {
  color-scheme: dark;
  font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
  --night: #091431;
  --navy: #101f4f;
  --panel: #172a63;
  --cream: #fff9e9;
  --moon: #ffd86b;
  --coral: #ff8068;
  --sky: #83c7ff;
  --mint: #9edd9b;
  --ink: #17203c;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--night); }

body {
  min-height: 100dvh;
  color: white;
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 9%, rgba(255,216,107,.16) 0 7rem, transparent 7.2rem),
    radial-gradient(circle at 12% 22%, rgba(131,199,255,.13), transparent 24rem),
    linear-gradient(145deg, #08122b, #102251 65%, #152958);
}

button, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.reader-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  gap: .9rem;
}

.topbar, .controls {
  display: grid;
  align-items: center;
  gap: 1rem;
}

.topbar { grid-template-columns: auto minmax(12rem, 1fr) auto; }

.brand { display: flex; align-items: center; gap: .72rem; min-width: 13rem; }
.moon-mark { font-size: 2.35rem; filter: drop-shadow(0 0 14px rgba(255,216,107,.5)); }
.brand strong { display: block; font-size: 1rem; letter-spacing: .12em; }
.brand span:not(.moon-mark) { display: block; margin-top: .15rem; color: #bdd8ff; font-size: .82rem; }

.progress-wrap { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.progress-track { width: min(32rem, 50vw); height: .55rem; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.15); }
.progress-track i { display: block; width: 11%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--moon)); transition: width .3s ease; }
#progressText { min-width: 4.5rem; color: #d9e9ff; font-weight: 800; }

.icon-button, .nav-button, .sentence-play, .word-sound-button, .word-game-button, .phonics-close, .phonics-listen, .phonics-choice, .phonics-again {
  border: 0;
  cursor: pointer;
  color: inherit;
  transition: transform .16s ease, filter .16s ease, opacity .16s ease;
}
.icon-button:active, .nav-button:active, .sentence-play:active, .word-sound-button:active, .word-game-button:active, .phonics-close:active, .phonics-listen:active, .phonics-choice:active, .phonics-again:active { transform: scale(.97); }
.icon-button:focus-visible, .nav-button:focus-visible, .sentence-play:focus-visible, .word-sound-button:focus-visible, .word-game-button:focus-visible, .phonics-close:focus-visible, .phonics-listen:focus-visible, .phonics-choice:focus-visible, .phonics-again:focus-visible { outline: 4px solid var(--moon); outline-offset: 3px; }

.icon-button { display: flex; align-items: center; gap: .5rem; padding: .72rem 1rem; border-radius: 1rem; background: rgba(255,255,255,.1); }
.icon-button svg, .nav-button svg, .sentence-play svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.sentence-play .play-icon { fill: currentColor; stroke: none; }

.reading-stage {
  min-height: 0;
  max-height: min(68dvh, 720px);
  align-self: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 1rem;
}

.picture-panel, .caption-panel {
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 0;
  margin: 0;
  border-radius: 1.75rem;
  overflow: hidden;
  box-shadow: 0 22px 55px rgba(0,0,0,.25);
}

.picture-panel { position: relative; width: 100%; aspect-ratio: 3 / 2; align-self: center; background: #0f234e; }
.picture-panel img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .22s ease, transform .55s ease; }
.picture-panel img.changing { opacity: .42; transform: scale(1.02); }
.picture-panel figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: .62rem .9rem; border-radius: 99px; background: rgba(7,18,45,.8); backdrop-filter: blur(9px); color: white; font-size: .92rem; font-weight: 800; }

.caption-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(1.2rem, 2vw, 2rem);
  background:
    radial-gradient(circle at 90% 10%, rgba(255,216,107,.2), transparent 10rem),
    var(--cream);
  color: var(--ink);
}

.caption-heading { display: block; }
.eyebrow { color: #c34b3c; font-size: .82rem; font-weight: 900; letter-spacing: .15em; }
.caption-heading h1 { margin: .3rem 0 0; font-size: clamp(1.25rem, 2vw, 1.85rem); line-height: 1.08; }
.sentence-row { display: flex; flex-direction: column; align-items: flex-start; }
.read-caption {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: .23em;
  min-height: 2.5em;
  margin: clamp(.65rem, 1.5vh, 1rem) 0 .45rem;
  font-size: clamp(2.35rem, 3.8vw, 4rem);
  line-height: 1.08;
  font-weight: 850;
  letter-spacing: -.035em;
}
.word { display: inline-block; padding: .04em .1em .09em; border-radius: .18em; transition: color .1s ease, background .1s ease, transform .1s ease; }
.word.active { color: #101937; background: var(--moon); box-shadow: 0 .1em 0 #f2a943; transform: translateY(-.03em); }
.sentence-play {
  min-height: 2.8rem;
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  margin: 0 0 .65rem .1rem;
  padding: .52rem .85rem;
  border-radius: .9rem;
  background: var(--moon);
  color: #273246;
  box-shadow: 0 .28rem 0 #dfa936;
  font-size: .82rem;
  font-weight: 900;
}
.sentence-play .pause-icon { display: none; }
.sentence-play.playing .play-icon { display: none; }
.sentence-play.playing .pause-icon { display: block; }

.focus-word {
  display: grid;
  align-self: flex-start;
  gap: .34rem;
  width: min(100%, 34rem);
  padding: .6rem .75rem .58rem .9rem;
  border: 2px solid #bfe2c8;
  border-radius: 1.15rem;
  background: #e7f5ea;
  color: #28543a;
}
.focus-word-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem .65rem; }
.focus-word strong { font-size: 1.5rem; }
.pronunciation { color: #63716a; font-size: .84rem; font-weight: 750; }
.word-sound-button {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  margin: -.35rem 0 -.35rem auto;
  border-radius: 50%;
  background: white;
  color: #17613f;
  box-shadow: 0 3px 0 #b9d7c1;
}
.word-sound-button svg, .word-game-button svg, .phonics-close svg, .phonics-listen svg {
  width: 1.18rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.word-definition { margin: 0; color: #50695a; font-size: .86rem; line-height: 1.35; font-weight: 650; }
.word-game-button {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  width: fit-content;
  margin-top: .05rem;
  padding: .45rem .72rem;
  border-radius: .75rem;
  background: #ffd86b;
  color: #2d3e36;
  box-shadow: 0 .24rem 0 #d8ab39;
  font-size: .8rem;
  font-weight: 900;
}
.word-game-star { color: #f18c22; filter: drop-shadow(0 1px 0 white); }
.word-game-button:hover { filter: brightness(1.04); transform: translateY(-.08rem); }

.phonics-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(5, 12, 34, .78);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .2s ease;
}
.phonics-overlay[hidden] { display: none; }
.phonics-overlay.open { opacity: 1; }
.phonics-game {
  position: relative;
  width: min(35rem, 100%);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: clamp(1.35rem, 4vw, 2.5rem);
  border: 4px solid #fff;
  border-radius: 2rem;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,216,107,.26), transparent 9rem),
    linear-gradient(165deg, #fffdf5, #f6f3e9);
  color: #243933;
  text-align: center;
  box-shadow: 0 32px 90px rgba(0,0,0,.42);
  transform: translateY(1rem) scale(.97);
  transition: transform .2s ease;
}
.phonics-overlay.open .phonics-game { transform: translateY(0) scale(1); }
.phonics-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e8eee8;
}
.phonics-kicker { margin: 0; color: #6f7e78; font-size: .78rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.phonics-game h2 { max-width: 28rem; margin: .38rem auto .55rem; padding: 0 2.35rem; font-size: clamp(1.35rem, 3.4vw, 1.85rem); line-height: 1.16; }
.phonics-reward { display: flex; justify-content: center; align-items: center; gap: .35rem; color: #d99b00; font-size: 1.25rem; font-weight: 900; }
.phonics-reward span { color: #ffc62f; filter: drop-shadow(0 2px 0 #d99b00); }
.phonics-picture {
  width: 7.2rem;
  height: 7.2rem;
  display: grid;
  place-items: center;
  margin: .8rem auto .6rem;
  border-radius: 42% 58% 51% 49% / 55% 45% 55% 45%;
  background: linear-gradient(145deg, #dcecff, #eef8df);
  box-shadow: inset 0 -8px 0 rgba(50,92,82,.08), 0 15px 32px rgba(55,75,68,.13);
  font-size: 4rem;
}
.phonics-listen { display: inline-flex; align-items: center; gap: .45rem; padding: .58rem .9rem; border-radius: 99px; background: #173c61; color: white; font-size: .82rem; font-weight: 850; }
.phonics-word { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem; margin: 1.15rem auto 1rem; }
.phonics-letter {
  width: clamp(2.15rem, 8vw, 3.1rem);
  height: clamp(2.7rem, 10vw, 3.7rem);
  display: grid;
  place-items: center;
  border-radius: .75rem;
  background: white;
  box-shadow: 0 .3rem 0 #cdd7cd;
  color: #243933;
  font-size: clamp(1.55rem, 6vw, 2.2rem);
  font-weight: 900;
  text-transform: lowercase;
}
.phonics-letter.missing { background: #fff2b9; color: #a76c00; box-shadow: 0 .3rem 0 #e7bd48; }
.phonics-letter.missing.drop-ready { outline: 4px solid #79b655; outline-offset: 4px; transform: scale(1.12); }
.phonics-letter.revealed { background: #dff2c8; color: #2c6a34; box-shadow: 0 .3rem 0 #aacc78; }
.phonics-word.solved { animation: word-pop .36s ease; }
.phonics-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; width: min(23rem, 100%); margin: 0 auto; }
.phonics-choice {
  min-height: 4.4rem;
  border-radius: 1rem;
  background: white;
  color: #243933;
  box-shadow: 0 .38rem 0 #cdd7cd;
  cursor: grab;
  font-size: 2rem;
  font-weight: 900;
  touch-action: none;
  user-select: none;
}
.phonics-choice:hover { background: #f7fbef; transform: translateY(-.12rem); }
.phonics-choice.dragging { opacity: .34; cursor: grabbing; transform: scale(.94); }
.phonics-choice.correct { background: #dff2c8; color: #2c6a34; box-shadow: 0 .38rem 0 #9fc568; }
.phonics-choice.wrong { animation: choice-shake .34s ease; background: #ffe1dc; color: #a83d2d; box-shadow: 0 .38rem 0 #e89a8d; }
.phonics-choice:disabled { cursor: default; opacity: .58; }
.phonics-choice.correct:disabled { opacity: 1; }
.phonics-hint { min-height: 2.8em; margin: 1.05rem 0 .3rem; color: #6f7e78; line-height: 1.4; font-weight: 750; }
.phonics-again { padding: .68rem 1rem; border-radius: .85rem; background: #ffd86b; color: #332b17; font-weight: 900; box-shadow: 0 .3rem 0 #dfa936; }
.phonics-open { overflow: hidden; }

.letter-drag-ghost {
  position: fixed;
  z-index: 220;
  width: 4.5rem;
  height: 4.5rem;
  display: grid;
  place-items: center;
  border: 3px solid white;
  border-radius: 1.1rem;
  background: #dff2c8;
  color: #2c6a34;
  box-shadow: 0 .5rem 0 #9fc568, 0 16px 35px rgba(0,0,0,.3);
  font-size: 2rem;
  font-weight: 900;
  pointer-events: none;
  transform: translate(-50%, -58%) rotate(-3deg) scale(1.06);
}

@keyframes choice-shake {
  25% { transform: translateX(-.35rem) rotate(-2deg); }
  50% { transform: translateX(.35rem) rotate(2deg); }
  75% { transform: translateX(-.18rem); }
}
@keyframes word-pop {
  50% { transform: scale(1.07); }
}

.controls { grid-template-columns: auto auto; justify-content: space-between; }
.nav-button { min-width: 8rem; min-height: 3.75rem; display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .8rem 1.2rem; border-radius: 1.15rem; background: rgba(255,255,255,.11); font-weight: 850; }
.nav-button.next { background: var(--coral); color: #25172a; }
.nav-button:disabled { opacity: .3; cursor: default; }
.nav-button.next.locked:disabled { background: rgba(255,255,255,.14); color: #dce8ff; opacity: .78; }

.toast { position: fixed; left: 50%; bottom: 6.8rem; z-index: 20; max-width: calc(100vw - 2rem); transform: translate(-50%, 1rem); padding: .78rem 1rem; border-radius: 99px; background: #101a36; box-shadow: 0 12px 35px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: .2s ease; font-weight: 800; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 850px), (orientation: portrait) {
  body { overflow-x: hidden; overflow-y: auto; }
  .reader-shell { min-height: 100dvh; }
  .topbar { grid-template-columns: 1fr auto; }
  .progress-wrap { grid-column: 1 / -1; grid-row: 2; }
  .progress-track { width: 100%; }
  .reading-stage { max-height: none; grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .picture-panel { aspect-ratio: 3 / 2; }
  .caption-panel { min-height: 22rem; aspect-ratio: auto; }
  .read-caption { font-size: clamp(2.5rem, 9vw, 4.4rem); }
  .controls { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .icon-button span { display: none; }
  .brand { min-width: 0; }
}

@media (max-height: 800px) and (min-width: 561px) {
  .phonics-game { padding: 1rem 1.5rem 1.2rem; }
  .phonics-close { top: .75rem; right: .75rem; width: 2.35rem; height: 2.35rem; }
  .phonics-game h2 { max-width: 26rem; margin: .2rem auto .3rem; font-size: 1.45rem; line-height: 1.08; }
  .phonics-picture { width: 5.2rem; height: 5.2rem; margin: .35rem auto .35rem; font-size: 3rem; }
  .phonics-listen { padding: .48rem .78rem; }
  .phonics-word { margin: .7rem auto .7rem; }
  .phonics-choice { min-height: 3.7rem; }
  .phonics-hint { min-height: 2.2em; margin: .65rem 0 .2rem; }
  .phonics-again { padding: .52rem .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}