: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 {
  width: min(1240px, 100%);
  display: grid;
  gap: .65rem;
  padding: 1rem 1.25rem .9rem;
  border: 3px solid rgba(255,255,255,.88);
  border-radius: 1.75rem;
  background:
    radial-gradient(circle at 7% 18%, rgba(255,216,107,.18), transparent 8rem),
    linear-gradient(155deg, #fffdf5, #fff9e9);
  color: var(--ink);
  box-shadow: 0 .55rem 0 rgba(7,46,58,.2), 0 18px 50px rgba(1,22,34,.2);
}
.stars-heading { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; }
.stars-heading > div:first-child { display: flex; align-items: baseline; gap: .8rem; }
.stars-eyebrow { color: #d24e3f; font-size: .68rem; font-weight: 950; letter-spacing: .13em; }
.stars-heading h2 { margin: 0; color: #153653; font-size: clamp(1.55rem, 2.2vw, 2.25rem); line-height: 1; letter-spacing: -.025em; }
.star-count { display: inline-flex; align-items: center; gap: .45rem; padding: .28rem .8rem .28rem .3rem; border-radius: 99px; background: #f0eee3; color: #173654; font-size: .92rem; font-weight: 900; white-space: nowrap; }
.star-count strong { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border-radius: 50%; background: var(--moon); font-size: 1.18rem; box-shadow: inset 0 -3px 0 rgba(197,136,0,.2); }
.stars-route { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1rem; }
.star-progress {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: start;
  gap: clamp(.2rem, .7vw, .6rem);
  padding: .15rem .1rem 1.55rem;
}
.star-progress::before { content: ""; position: absolute; left: 5.5%; right: 5.5%; top: 2.45rem; height: .42rem; border-radius: 99px; background: #ece9dc; box-shadow: inset 0 2px 3px rgba(33,72,72,.08); }
.progress-star {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .2rem;
  min-width: 0;
  color: #163653;
  line-height: 1;
}
.star-bubble { position: relative; z-index: 1; width: clamp(3.45rem, 5vw, 4.8rem); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #faf9f1, #eceadf 68%); transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.star-bubble::before { content: ""; position: absolute; inset: -.45rem; z-index: -1; border-radius: 50%; opacity: 0; background: repeating-conic-gradient(from -8deg, #ffc928 0deg 5deg, transparent 5deg 34deg); -webkit-mask: radial-gradient(circle, transparent 0 55%, #000 56%); mask: radial-gradient(circle, transparent 0 55%, #000 56%); transform: scale(.82); transition: opacity .25s ease, transform .25s ease; }
.star-icon { color: #75a9a3; font-size: clamp(2.65rem, 4.2vw, 3.85rem); font-family: "Arial Rounded MT Bold", "Segoe UI Symbol", sans-serif; font-weight: 900; line-height: 1; filter: drop-shadow(0 .1rem 0 #d8e4df); transition: color .25s ease, filter .25s ease, transform .25s ease; }
.star-number { font-size: .86rem; }
.star-current-label { position: absolute; z-index: 2; top: calc(100% + .08rem); display: none; padding: .3rem .55rem; border-radius: 99px; background: var(--coral); color: white; box-shadow: 0 .2rem 0 #cf5548; font-size: .65rem; font-style: normal; font-weight: 950; white-space: nowrap; }
.progress-star.current .star-bubble { background: radial-gradient(circle at 38% 30%, #fff9f5, #ffeae5 70%); box-shadow: 0 0 0 .18rem rgba(255,128,104,.13); transform: scale(1.06); }
.progress-star.current .star-icon { color: #ff7568; filter: drop-shadow(0 .11rem 0 #d6463a); animation: current-star 1.35s ease-in-out infinite; }
.progress-star.current .star-current-label { display: block; }
.progress-star.earned .star-bubble { background: radial-gradient(circle at 38% 28%, #fffbe8 0 24%, #ffe36d 72%, #ffc325 100%); box-shadow: inset 0 -.34rem .2rem rgba(218,130,0,.22), inset 0 .2rem .24rem rgba(255,255,255,.78), 0 0 0 .18rem rgba(255,211,91,.2), 0 0 1.15rem rgba(255,192,38,.46); animation: star-earned .45s ease both; }
.progress-star.earned .star-bubble::before { opacity: 1; transform: scale(1); }
.progress-star.earned .star-icon { color: #ffbd0a; text-shadow: 0 .055em 0 #fff18e, .04em .09em 0 #dc8300, -.035em .05em 0 #f29a00; filter: drop-shadow(0 .16rem .08rem rgba(177,96,0,.36)) drop-shadow(0 0 .4rem rgba(255,221,83,.78)); transform: scale(1.08); }
.progress-star.just-earned .star-bubble { animation: collected-star-land .72s cubic-bezier(.18,.8,.25,1) both; }
.star-collect-fx { position: fixed; z-index: 60; width: 8.5rem; height: 8.5rem; display: grid; place-items: center; pointer-events: none; transform: translate(-50%, -50%); }
.star-collect-fx span { color: #ffc416; font-size: 7.7rem; line-height: 1; text-shadow: 0 .075em 0 #e58b00, 0 .12em .16em rgba(109,57,0,.25), 0 0 .18em #fff3a6; }
.star-collect-fx b { position: absolute; right: -.1rem; top: .2rem; display: grid; place-items: center; width: 3rem; height: 3rem; border: .25rem solid white; border-radius: 50%; background: #ff6f62; color: white; box-shadow: 0 .2rem 0 #c84a40; font-size: 1.25rem; }
.star-reward { min-width: 8.5rem; display: grid; justify-items: center; align-content: center; gap: .3rem; padding: .45rem .65rem .55rem; border-left: 2px solid #e7dfca; color: #173654; }
.reward-gift { position: relative; display: inline-grid; place-items: center; font-size: 2.65rem; line-height: 1; filter: drop-shadow(0 .18rem 0 rgba(78,35,94,.2)); }
.reward-gift i { position: absolute; right: -.35rem; bottom: -.2rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: white; font-size: .85rem; font-style: normal; box-shadow: 0 2px 5px rgba(0,0,0,.18); }
.star-reward > b { padding: .35rem .6rem; border-radius: 99px; background: var(--moon); font-size: .75rem; white-space: nowrap; }
.star-reward.unlocked { color: #247545; animation: reward-unlock .55s ease both; }
.progress-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.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; }
.game-exit { border: 1px solid rgba(255,255,255,.16); text-decoration: none; font-weight: 800; }
.game-exit:hover { background: rgba(255,255,255,.17); }
.sentence-play .play-icon { fill: none; stroke: currentColor; }

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

.picture-panel, .caption-panel {
  width: 100%;
  aspect-ratio: 4 / 3;
  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: 4 / 3; align-self: center; background: #0f234e; }
.picture-panel img { width: 100%; height: 100%; object-fit: cover; 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: none; margin-bottom: 0; }
.eyebrow { color: #c34b3c; font-size: .82rem; font-weight: 900; letter-spacing: .15em; }
.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.focus-highlight { color: #102c48; background: linear-gradient(180deg, #ffe17f, #ffd15b); box-shadow: inset 0 -3px 0 rgba(218,145,0,.2); }
.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); }
.word-game-button:disabled { cursor: not-allowed; opacity: .46; filter: grayscale(.2); transform: none; }
.sentence-play.guide-pulse:not(.playing), .word-game-button.guide-pulse, .nav-button.next.guide-pulse {
  animation: action-guide 1.25s ease-in-out infinite;
}

.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-game[data-game="match"] .phonics-picture { display: none; }
.phonics-game[data-game="match"] .phonics-listen {
  min-width: min(18rem, 86%);
  min-height: 4.35rem;
  justify-content: center;
  gap: .8rem;
  margin: 1rem auto .7rem;
  padding: .9rem 1.4rem;
  border: 3px solid #fff;
  background: linear-gradient(180deg, #ffd963, #ffc43d);
  color: #17324f;
  box-shadow: 0 .42rem 0 #d99b00, 0 12px 26px rgba(217,155,0,.24);
  font-size: 1.08rem;
  font-weight: 950;
}
.phonics-game[data-game="match"] .phonics-listen:hover {
  filter: brightness(1.04);
  transform: translateY(-.12rem);
}
.phonics-game[data-game="match"] .phonics-listen svg {
  width: 1.65rem;
  height: 1.65rem;
  padding: .25rem;
  border-radius: 50%;
  background: #173c61;
  color: #fff;
  box-sizing: content-box;
}
.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-choices.build-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(27rem, 100%); }
.phonics-choice.build-choice { cursor: grab; }
.phonics-choice.build-choice.used { background: #dff2c8; box-shadow: 0 .2rem 0 #9fc568; opacity: .45; transform: translateY(.18rem); }
.phonics-letter.build-slot { color: #a8b3aa; background: #f7faf7; border: 2px dashed #b8c7ba; box-shadow: none; }
.phonics-letter.build-slot.drop-ready { color: #8a6612; background: #fff3ad; border-color: #e4b933; transform: translateY(-.12rem) scale(1.06); }
.phonics-letter.build-slot.filled { color: #2c6a34; background: #dff2c8; border-style: solid; border-color: #aacc78; box-shadow: 0 .3rem 0 #aacc78; animation: word-pop .3s ease; }
.phonics-prompt { display: block; padding: .55rem 1rem; border-radius: 99px; background: #eef5f1; color: #53675d; font-weight: 850; }
.phonics-choices.match-grid { width: min(30rem, 100%); }
.phonics-choice.match-choice {
  min-height: 7.2rem;
  display: grid;
  place-items: center;
  gap: .35rem;
  padding: .8rem .45rem;
  cursor: pointer;
  font-size: .88rem;
}
.match-emoji { font-size: 2.65rem; line-height: 1; }
.phonics-choice.match-choice b { font-size: .88rem; }
.phonics-hint { min-height: 2.8em; margin: 1.05rem 0 .3rem; color: #6f7e78; line-height: 1.4; font-weight: 750; }
.phonics-again { min-width: 10.5rem; padding: .75rem 1.15rem; border-radius: .95rem; background: #ffd45b; color: #26344b; font-weight: 950; box-shadow: 0 .32rem 0 #dfa01d, 0 0 0 .16rem rgba(255,212,91,.18); }
.phonics-again:not([hidden]) { animation: action-guide 1.15s ease-in-out infinite; }
.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); }
}
@keyframes star-earned {
  0% { transform: scale(.65) rotate(-14deg); opacity: .35; }
  70% { transform: scale(1.12) rotate(6deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes current-star { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09) rotate(-3deg); } }
@keyframes reward-unlock { 50% { transform: translateY(-.15rem) scale(1.06); } }
@keyframes collected-star-land { 0% { transform: scale(.62) rotate(-10deg); } 58% { transform: scale(1.2) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes action-guide {
  0%, 100% { filter: brightness(1); transform: translateY(0) scale(1); }
  50% { filter: brightness(1.12) drop-shadow(0 0 .7rem rgba(255,216,107,.7)); transform: translateY(-.12rem) scale(1.045); }
}

.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; }
  .star-progress { 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-choices.build-grid { gap: .5rem; }
  .phonics-choice.match-choice { min-height: 5.7rem; }
  .match-emoji { font-size: 2.2rem; }
  .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; animation: none !important; }
}

/* Three-part Moon Night adventure */
body { overflow-x: hidden; overflow-y: auto; }
.reader-shell { grid-template-rows: auto minmax(0, 1fr); }
.topbar { position: relative; z-index: 10; grid-template-columns: auto minmax(18rem, 1fr) auto; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
.adventure-timer { display: inline-flex; align-items: center; gap: .38rem; min-width: 6.2rem; padding: .72rem .9rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1rem; background: rgba(255,255,255,.08); color: #fff5c9; font-variant-numeric: tabular-nums; }
.adventure-timer b { letter-spacing: .04em; }
.journey-progress { display: flex; align-items: center; justify-content: center; }
.journey-step { display: grid; grid-template-columns: 2rem auto; align-items: center; gap: .45rem; color: #8092bd; font-weight: 800; }
.journey-step b { width: 2rem; height: 2rem; display: grid; place-items: center; border: 2px solid #405382; border-radius: 50%; font-size: .82rem; }
.journey-step i { font-style: normal; font-size: .83rem; }
.journey-step.active { color: white; }
.journey-step.active b { border-color: var(--moon); background: var(--moon); color: #28344d; box-shadow: 0 0 0 .28rem rgba(255,216,107,.12); }
.journey-step.done { color: #bfe6ca; }
.journey-step.done b { border-color: #81cf9b; background: #81cf9b; color: #173c2b; font-size: 0; }
.journey-step.done b::after { content: "✓"; font-size: .9rem; }
.journey-line { width: clamp(1.5rem, 4vw, 4.5rem); height: 2px; margin: 0 .55rem; background: #405382; }

.experience-phase { width: min(1280px, 100%); min-height: 0; margin: auto; align-self: center; }
.experience-phase[hidden], .achievement-overlay[hidden] { display: none; }
.experience-phase.active { animation: phase-in .42s ease both; }
.phase-copy { max-width: 48rem; margin: 0 auto .85rem; text-align: center; }
.phase-kicker { display: block; color: #ff9987; font-size: .76rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.phase-copy h1 { margin: .25rem 0 .3rem; font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1; }
.phase-copy p, .practice-intro p { margin: 0; color: #c8d9f6; line-height: 1.45; }
.video-phase { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; }
.video-card { position: relative; min-height: 0; height: min(66dvh, 680px); aspect-ratio: 9 / 16; overflow: hidden; border: 3px solid rgba(255,255,255,.28); border-radius: 1.55rem; background: #06102a; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.video-card > #moodVideo, .video-card iframe { width: 100%; height: 100%; display: block; border: 0; background: #06102a; }
.video-card.video-unavailable > #moodVideo, .video-card.video-unavailable iframe { visibility: hidden; }
.video-start { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; gap: .9rem; border: 0; background: linear-gradient(180deg, rgba(5,15,38,.1), rgba(5,15,38,.76)); color: white; cursor: pointer; }
.video-start:disabled { cursor: wait; }
.video-start[hidden] { display: none; }
.video-fallback { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 4.8rem 1.5rem 2rem; background: linear-gradient(180deg, rgba(5,15,38,.22), rgba(5,15,38,.92)), url("assets/staycation-poster.webp") center / cover no-repeat; color: white; text-align: center; }
.video-fallback[hidden] { display: none; }
.video-fallback-badge { width: 4.2rem; height: 4.2rem; display: grid; place-items: center; padding-left: .2rem; border-radius: 50%; background: var(--moon); color: #26334a; box-shadow: 0 .38rem 0 #dca63a, 0 0 0 .55rem rgba(255,255,255,.16); font-size: 1.35rem; }
.video-fallback strong { font-size: 1.28rem; }
.video-fallback p { max-width: 17rem; margin: 0; color: #e3edff; line-height: 1.4; }
.video-fallback a { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 3rem; padding: .72rem 1.05rem; border-radius: 999px; background: var(--moon); color: #182847; box-shadow: 0 .3rem 0 #d9a334; font-weight: 900; text-decoration: none; }
.video-fallback a:hover { transform: translateY(-.08rem); }
.video-fallback a:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.video-fallback small { max-width: 17rem; color: #c9daf8; line-height: 1.4; }
.video-skip { position: absolute; z-index: 3; right: .85rem; top: .85rem; display: inline-flex; align-items: center; gap: .35rem; min-height: 2.65rem; padding: .55rem .85rem; border: 1px solid rgba(255,255,255,.34); border-radius: 99px; background: rgba(7,18,43,.72); color: white; box-shadow: 0 .25rem .7rem rgba(0,0,0,.24); backdrop-filter: blur(10px); cursor: pointer; font-weight: 850; }
.video-skip:hover { background: rgba(7,18,43,.9); transform: translateY(-.06rem); }
.video-skip:focus-visible { outline: 3px solid var(--moon); outline-offset: 2px; }
.video-start-icon { width: 4.2rem; height: 4.2rem; display: grid; place-items: center; padding-left: .2rem; border-radius: 50%; background: var(--moon); color: #26334a; box-shadow: 0 .38rem 0 #dca63a, 0 0 0 .55rem rgba(255,255,255,.15); font-size: 1.35rem; }
.video-start b, .video-start small { display: block; text-align: left; }
.video-start b { font-size: 1.2rem; }.video-start small { margin-top: .2rem; color: #dce8ff; }
.phase-actions { display: flex; justify-content: center; margin-top: .9rem; }
.primary-action { min-height: 3.4rem; padding: .8rem 1.25rem; border: 0; border-radius: 1rem; background: var(--coral); color: #25172a; box-shadow: 0 .32rem 0 #c95648; cursor: pointer; font-weight: 900; }
.primary-action:disabled { opacity: .44; cursor: not-allowed; filter: grayscale(.25); }

.listening-phase { display: grid; grid-template-columns: minmax(18rem, .75fr) minmax(26rem, 1.25fr); align-items: center; gap: clamp(1.2rem, 3vw, 3rem); }
.listening-copy { grid-column: 1 / -1; margin-bottom: 0; }
.listening-phase:has(.quiz-panel[hidden]) .listening-card { grid-column: 1 / -1; justify-self: center; width: min(30rem, 100%); }
.listening-card { display: grid; justify-items: center; padding: clamp(1.5rem, 4vw, 2.8rem); border-radius: 2rem; background: linear-gradient(155deg, #162c68, #0d1c47); box-shadow: 0 22px 60px rgba(0,0,0,.3); }
.listening-visual { position: relative; width: 13rem; height: 13rem; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(255,216,107,.22), rgba(119,176,255,.08) 58%, transparent 59%); }
.listening-moon { font-size: 6.5rem; filter: drop-shadow(0 0 24px rgba(255,216,107,.45)); }
.sound-wave { position: absolute; left: 50%; bottom: 1rem; display: flex; align-items: center; gap: .23rem; transform: translateX(-50%); }
.sound-wave i { width: .3rem; height: 1rem; border-radius: 99px; background: #9edd9b; }
.sound-wave i:nth-child(2), .sound-wave i:nth-child(4) { height: 1.6rem; }.sound-wave i:nth-child(3) { height: 2.1rem; }
.listening-card.playing .sound-wave i { animation: wave .7s ease-in-out infinite alternate; }.listening-card.playing .sound-wave i:nth-child(2) { animation-delay: -.2s; }.listening-card.playing .sound-wave i:nth-child(4) { animation-delay: -.4s; }
.listen-main { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-width: 9.5rem; padding: .72rem 1.05rem; border: 0; border-radius: 99px; background: var(--moon); color: #1a2944; box-shadow: 0 .3rem 0 #d9a334; cursor: pointer; font-weight: 900; }
.listen-icon { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: #fff8dd; font-size: .8rem; }
.listen-progress { width: min(22rem, 100%); height: .38rem; overflow: hidden; margin: 1rem 0 .25rem; border-radius: 99px; background: rgba(255,255,255,.12); }.listen-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--mint), var(--moon)); }
.quiet-action { padding: .7rem; border: 0; background: transparent; color: #bdd8ff; cursor: pointer; }.quiet-action b { color: white; }

.quiz-panel { min-height: 29rem; padding: clamp(1.3rem, 3vw, 2rem); border-radius: 2rem; background: var(--cream); color: var(--ink); box-shadow: 0 22px 60px rgba(0,0,0,.3); }
.quiz-heading { display: grid; grid-template-columns: 1fr auto; align-items: center; }.quiz-heading span { grid-column: 1; color: #c34b3c; font-size: .95rem; font-weight: 900; letter-spacing: .04em; }.quiz-heading > b { grid-column: 2; color: #64718c; }
.quiz-question-line { display: flex; align-items: center; gap: .7rem; margin-top: 1.3rem; }.quiz-question-line h3 { flex: 1; margin: 0; font-size: clamp(1.45rem, 3vw, 2.2rem); }.quiz-speak { flex: 0 0 auto; width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: #e7f4ed; color: #147148; cursor: pointer; }.quiz-speak:hover { transform: translateY(-.08rem); }.quiz-speak svg { width: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }.quiz-stage > p { margin: .15rem 0 1rem; color: #69758a; font-weight: 700; }
.answer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.answer-card { position: relative; min-height: 9.5rem; display: grid; place-items: center; gap: .25rem; padding: .8rem .5rem; border: 3px solid transparent; border-radius: 1.15rem; background: white; color: var(--ink); box-shadow: 0 .34rem 0 #d8ddd6; cursor: pointer; }.answer-picture { font-size: 3.3rem; }.answer-card b { line-height: 1.15; }.answer-card i { position: absolute; right: .55rem; top: .55rem; width: 1.6rem; height: 1.6rem; display: none; place-items: center; border-radius: 50%; background: #3c9c5b; color: white; font-style: normal; }
.answer-card.selected { border-color: #4e93dc; background: #edf7ff; transform: translateY(-.1rem); }.answer-card.correct { border-color: #65b77d; background: #e4f6e6; }.answer-card.correct i { display: grid; }.answer-card:disabled { cursor: default; opacity: 1; }
.quiz-feedback { min-height: 1.5em; margin: 1.05rem 0 .7rem; font-weight: 850; }.quiz-feedback.wrong { color: #b7493a; }.quiz-feedback.correct { color: #277a46; }.quiz-next { width: 100%; }

.practice-phase { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .75rem; }
.practice-intro { display: flex; align-items: center; justify-content: center; gap: 1rem; text-align: center; }.practice-intro p { max-width: 48rem; font-size: .9rem; }
.practice-phase .practice-intro { display: none; }
.practice-phase .progress-wrap { justify-self: center; }
.practice-phase .reading-stage { width: min(1240px, 100%); justify-self: center; }
.practice-phase .controls { grid-template-columns: auto auto; justify-content: space-between; }
.practice-phase .sentence-play { min-height: 3.55rem; gap: .65rem; margin: .1rem 0 .8rem .1rem; padding: .75rem 1.1rem; border-radius: 1rem; font-size: 1rem; }
.practice-phase .sentence-play svg { width: 1.55rem; height: 1.55rem; }
.practice-phase .word-game-button { min-height: 3.15rem; padding: .7rem 1rem; border-radius: .95rem; font-size: .95rem; }

.transcript-dialog { width: min(42rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: clamp(1.35rem, 4vw, 2.5rem); border: 3px solid white; border-radius: 1.8rem; background: var(--cream); color: var(--ink); box-shadow: 0 25px 80px rgba(0,0,0,.5); }.transcript-dialog::backdrop { background: rgba(3,9,27,.78); backdrop-filter: blur(8px); }.transcript-dialog h2 { margin: .35rem 2rem 1rem 0; font-size: clamp(1.5rem, 4vw, 2.2rem); }.dialog-close { position: absolute; right: 1rem; top: 1rem; width: 2.7rem; height: 2.7rem; border: 0; border-radius: 50%; background: #e6eee9; color: #2b3d38; cursor: pointer; font-size: 1.7rem; }.transcript-copy { color: #49566c; line-height: 1.55; }.transcript-copy p { margin: .8rem 0; }.transcript-copy strong { color: #183f65; }

.achievement-overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1rem; background: rgba(4,10,31,.84); backdrop-filter: blur(12px); opacity: 0; transition: opacity .25s ease; }.achievement-overlay.open { opacity: 1; }.achievement-card { width: min(34rem, 100%); padding: clamp(1.5rem, 5vw, 3rem); border: 4px solid white; border-radius: 2rem; background: radial-gradient(circle at 50% 0, #fff2bb, transparent 12rem), var(--cream); color: var(--ink); text-align: center; box-shadow: 0 35px 100px rgba(0,0,0,.5); transform: translateY(1rem) scale(.96); transition: transform .25s ease; }.achievement-overlay.open .achievement-card { transform: none; }.achievement-badge { position: relative; width: 7.6rem; height: 7.6rem; display: grid; place-items: center; margin: 0 auto 1rem; border-radius: 50%; background: #172a63; box-shadow: 0 .55rem 0 #0a173a, 0 0 0 .55rem #ffd86b; }.achievement-badge span { font-size: 4.5rem; }.achievement-badge i { position: absolute; right: -.1rem; top: -.2rem; color: #ffbd25; font-size: 2.4rem; font-style: normal; filter: drop-shadow(0 2px 0 #c68300); }.achievement-card h2 { margin: .35rem 0 .2rem; font-size: clamp(2.2rem, 7vw, 3.8rem); }.achievement-card > p { margin: 0 0 1rem; color: #526078; font-size: 1.15rem; }.achievement-time { display: inline-flex; align-items: baseline; gap: .55rem; padding: .65rem 1rem; border-radius: 99px; background: #e7f5ea; color: #2b6440; }.achievement-time b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }.achievement-card ul { display: grid; gap: .55rem; margin: 1.35rem auto; padding: 0; list-style: none; color: #41526c; text-align: left; width: fit-content; }.achievement-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; }.quiet-link { color: #173c61; font-weight: 850; }
.achievement-card { max-height: calc(100dvh - 2rem); overflow-y: auto; }
.achievement-rating { margin: 1rem auto 1.25rem; padding: .9rem 1rem; border: 2px solid #d8e7df; border-radius: 1.2rem; background: #f5fbf7; }
.achievement-rating > p { margin: 0; color: var(--ink); font-size: 1.08rem; font-weight: 900; }
.achievement-rating > span { display: block; margin-top: .15rem; color: #617169; font-size: .82rem; }
.achievement-rating-stars { display: flex; justify-content: center; gap: .2rem; margin-top: .5rem; }
.achievement-rating .rating-star { padding: .05rem .12rem; border: 0; background: transparent; color: #bdc8c2; font-size: 2rem; line-height: 1; cursor: pointer; transition: color .15s ease, transform .15s ease; }
.achievement-rating .rating-star:hover, .achievement-rating .rating-star.is-active { color: #f2b82f; transform: translateY(-1px); }
.achievement-rating .rating-star:focus-visible { outline: 3px solid #1473e6; outline-offset: 3px; border-radius: .25rem; }
.achievement-rating-summary { min-height: 1.15rem; margin-top: .35rem; color: #5e7180; font-size: .78rem; }

@keyframes phase-in { from { opacity: 0; transform: translateY(.75rem); } }
@keyframes wave { to { height: .55rem; opacity: .55; } }
@keyframes answer-shake { 25% { transform: translateX(-.3rem); } 50% { transform: translateX(.3rem); } 75% { transform: translateX(-.15rem); } }
.answer-card.shake { animation: answer-shake .4s ease; }

@media (max-width: 900px), (orientation: portrait) {
  .reader-shell { display: block; padding: .8rem; }
  .topbar { position: sticky; top: 0; grid-template-columns: 1fr auto; margin: -.8rem -.8rem .9rem; padding: .75rem .8rem; background: rgba(8,18,43,.88); backdrop-filter: blur(12px); }
  .journey-progress { grid-column: 1 / -1; grid-row: 2; margin-top: .35rem; }
  .topbar-actions { grid-column: 2; grid-row: 1; }
  .brand { min-width: 0; }.brand span:not(.moon-mark) { display: none; }
  .experience-phase { min-height: calc(100dvh - 8.5rem); }
  .video-card { height: min(65dvh, 650px); }
  .listening-phase { grid-template-columns: 1fr; padding-bottom: 2rem; }
  .listening-copy { margin-top: 1.2rem; }
  .quiz-panel { min-height: 0; }
  .practice-phase { min-height: auto; }
}

@media (max-width: 620px) {
  .journey-step { grid-template-columns: 1.8rem auto; }.journey-step b { width: 1.8rem; height: 1.8rem; }.journey-line { margin: 0 .25rem; }.topbar-actions { gap: .3rem; }.adventure-timer { min-width: auto; padding: .62rem .7rem; }.icon-button { padding: .62rem .7rem; }
  .phase-copy { padding: 0 .35rem; }.video-start { flex-direction: column; }.video-start b, .video-start small { text-align: center; }
  .answer-grid { grid-template-columns: 1fr; }.answer-card { min-height: 6.3rem; grid-template-columns: 4rem 1fr; text-align: left; }.answer-picture { font-size: 2.8rem; }
  .practice-phase .progress-wrap { width: 100%; padding: .8rem .65rem .7rem; border-radius: 1.35rem; }
  .stars-heading { align-items: flex-start; justify-content: space-between; }
  .stars-heading > div:first-child { display: block; }
  .stars-eyebrow { display: block; margin-bottom: .2rem; font-size: .58rem; }
  .stars-heading h2 { font-size: 1.35rem; }
  .star-count { padding-right: .55rem; font-size: .72rem; }
  .star-count strong { width: 1.9rem; height: 1.9rem; font-size: .95rem; }
  .stars-route { display: block; }
  .practice-phase .star-progress { width: 100%; gap: .05rem; padding-bottom: 1.35rem; }
  .star-progress::before { top: 1.55rem; height: .28rem; }
  .star-bubble { width: clamp(2.35rem, 11vw, 3rem); }
  .star-icon { font-size: clamp(1.75rem, 8vw, 2.3rem); }
  .star-number { font-size: .68rem; }
  .star-current-label { top: calc(100% + .03rem); padding: .22rem .38rem; font-size: .52rem; }
  .star-reward { grid-template-columns: auto auto; justify-content: center; gap: .55rem; min-width: 0; padding: .45rem 0 0; border-left: 0; border-top: 2px solid #e7dfca; }
  .reward-gift { font-size: 2rem; }
  .reward-gift i { width: 1.25rem; height: 1.25rem; font-size: .68rem; }
}

@media (max-height: 800px) and (min-width: 901px) {
  .practice-phase { gap: .5rem; }
  .practice-phase .progress-wrap { padding: .7rem 1rem .55rem; }
  .stars-heading h2 { font-size: 1.6rem; }
  .star-bubble { width: 3.3rem; }
  .star-icon { font-size: 2.45rem; }
  .star-progress::before { top: 1.8rem; }
  .practice-phase .reading-stage { max-height: min(58dvh, 600px); }
}

/* Staycation Adventure palette and media treatment. */
.staycation-game {
  --night: #0c3547;
  --navy: #164e63;
  --panel: #1b6476;
  --cream: #fffaf0;
  --moon: #ffd35b;
  --coral: #ff7f70;
  --sky: #8dd8ed;
  --mint: #9fe0bf;
  --ink: #163044;
  background:
    radial-gradient(circle at 86% 5%, rgba(255,226,155,.22), transparent 14rem),
    radial-gradient(ellipse at 8% 92%, rgba(122,226,218,.2), transparent 30rem),
    radial-gradient(ellipse at 54% 112%, rgba(150,224,218,.12), transparent 38rem),
    linear-gradient(150deg, #0b3448 0%, #145369 52%, #1b6674 100%);
  background-attachment: fixed;
}
.staycation-game .moon-mark { filter: drop-shadow(0 0 14px rgba(255,211,91,.55)); }
.staycation-game .video-card { background: #0b2d42; }
.staycation-game .picture-panel { background: #0b2d42; }
.staycation-game .picture-panel img { object-position: center; }
.staycation-game .answer-grid.four-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 760px) {
  .staycation-game .answer-grid.four-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.staycation-game .listening-card { background: linear-gradient(145deg, #1b6476, #14485f); }
.staycation-game .listening-moon { filter: drop-shadow(0 0 24px rgba(255,211,91,.42)); }

@media (max-width: 850px), (orientation: portrait) {
  .staycation-game .topbar { background: rgba(10,53,70,.92); }
}