* { box-sizing: border-box; }
:root {
  --night: #091e2b;
  --ink: #173247;
  --cream: #fffaf0;
  --paper: #fffdf7;
  --gold: #ffbd4a;
  --coral: #f26f5b;
  --teal: #159a9c;
  --mint: #dff5e9;
  --line: #d8e2dc;
  --shadow: 0 20px 48px rgba(3, 22, 31, .24);
}
html, body { margin: 0; min-height: 100%; }
button { font: inherit; }
body {
  min-width: 1100px;
  min-height: 100vh;
  overflow-x: auto;
  font-family: ui-rounded, "Avenir Next", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--night);
}
.game { position: relative; min-height: 100vh; padding: 34px 54px 42px; overflow: hidden; }
.world {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(5, 24, 35, .25), rgba(5, 24, 35, .5)), url("./assets/story-nook-01.webp") center/cover no-repeat;
  transform: scale(1.02);
}
.world::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 60%, transparent 0 30%, rgba(4, 18, 27, .43) 100%); }
.story-shell { position: relative; z-index: 1; max-width: 1220px; margin: 0 auto; }
.story-top { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: white; margin-bottom: 10px; text-shadow: 0 2px 15px rgba(0,0,0,.4); }
.eyebrow, .stage-kicker { margin: 0 0 5px; color: #ffd179; font-size: 13px; line-height: 1; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.story-top h1 { margin: 0; font-size: clamp(24px, 2.1vw, 34px); line-height: 1.12; letter-spacing: -.025em; }
.stats { display: flex; gap: 9px; text-shadow: none; }
.stats span { min-width: 74px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 16px; background: rgba(9,30,43,.72); backdrop-filter: blur(12px); display: flex; justify-content: space-between; align-items: baseline; }
.stats small { color: #bcd0d5; font-size: 12px; font-weight: 800; }
.stats b { color: #ffd179; font-size: 22px; }
.scene-dots { height: 20px; display: flex; justify-content: center; gap: 9px; margin-bottom: 8px; }
.scene-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.45); transition: transform .15s ease-out, background .15s ease-out; }
.scene-dots i.is-current { background: var(--gold); transform: scale(1.35); }
.scene-dots i.is-done { background: #80dfad; }
.stage-layout { display: grid; grid-template-columns: minmax(660px, 1fr) 310px; gap: 24px; align-items: stretch; }
.stage-card {
  min-height: 600px; padding: 40px 48px; border: 2px solid rgba(255,255,255,.78); border-radius: 32px;
  background: rgba(255,250,240,.96); box-shadow: var(--shadow); display: grid; place-items: center; overflow: hidden;
}
.topic-panel, .loading-panel, .listen-panel, .question-panel, .finish-panel { width: 100%; text-align: center; }
.stage-card h2 { margin: 8px auto 24px; max-width: 680px; font-size: 35px; line-height: 1.08; letter-spacing: -.035em; }
.topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 620px; margin: 0 auto; }
.topic-chip {
  min-height: 76px; padding: 14px 20px; border: 2px solid #d9e0d9; border-bottom-width: 5px; border-radius: 20px;
  background: white; color: var(--ink); font-size: 18px; font-weight: 900; cursor: pointer; transition: transform .15s ease-out, border-color .15s ease-out, background .15s ease-out;
}
.topic-chip span { display: inline-block; margin-right: 10px; font-size: 26px; vertical-align: middle; }
.topic-chip:hover, .topic-chip:focus-visible { transform: translateY(-3px); border-color: var(--teal); background: #edfffa; outline: none; }
.topic-chip:active { transform: translateY(1px); border-bottom-width: 2px; }
.topic-chip.surprise { grid-column: 1 / -1; color: #743927; border-color: #f5b39c; background: #fff0e8; }
.loading-panel p:last-child { margin: -10px 0 0; color: #667b84; font-weight: 700; }
.sticker-art { background: white; border: 2px solid #e7ded0; border-radius: 28px; box-shadow: 0 13px 28px rgba(20,47,58,.15); padding: 10px; overflow: hidden; }
.sticker-art img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 20px; }
.spirits-sticker { width: 220px; height: 170px; margin: 0 auto 24px; transform: rotate(-2deg); }
.loading-panel .spirits-sticker { animation: float 1.8s ease-in-out infinite; }
.listen-panel { position: relative; min-height: 420px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.listen-glow { height: 76px; display: flex; gap: 8px; align-items: center; justify-content: center; margin-bottom: 12px; }
.listen-glow i { width: 9px; height: 24px; border-radius: 99px; background: linear-gradient(var(--gold), var(--coral)); transform-origin: center; opacity: .45; }
.is-listening .listen-glow i { animation: soundwave .72s ease-in-out infinite alternate; opacity: 1; }
.is-listening .listen-glow i:nth-child(2), .is-listening .listen-glow i:nth-child(4) { animation-delay: -.28s; }
.is-listening .listen-glow i:nth-child(3) { animation-delay: -.5s; }
.play-button, .next-button {
  min-height: 58px; border: 0; border-bottom: 5px solid #9c3d31; border-radius: 19px; padding: 14px 26px; background: var(--coral); color: white;
  font-size: 18px; font-weight: 950; box-shadow: 0 10px 22px rgba(242,111,91,.26); cursor: pointer; transition: transform .15s ease-out, filter .15s ease-out;
}
.play-button:hover, .play-button:focus-visible, .next-button:hover, .next-button:focus-visible { transform: translateY(-2px); filter: brightness(1.06); outline: 3px solid rgba(21,154,156,.35); outline-offset: 3px; }
.play-button:active, .next-button:active { transform: translateY(2px); border-bottom-width: 2px; }
.play-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 9px; border-radius: 50%; background: rgba(255,255,255,.22); font-size: 13px; }
.replay-button { margin-top: 15px; min-height: 45px; border: 0; background: transparent; color: #236775; font-weight: 900; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.fallback-passage { max-width: 650px; margin: 22px auto 0; padding: 18px 22px; border: 2px dashed #c8b99e; border-radius: 18px; background: #fff8e8; text-align: left; }
.fallback-passage span { display: block; color: #805d30; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.fallback-passage p { margin: 8px 0 0; font-size: 18px; line-height: 1.55; font-weight: 650; }
.question-heading { margin-bottom: 20px; }
.skill-badge { display: inline-block; padding: 7px 12px; border-radius: 999px; background: #dff5e9; color: #126a60; font-size: 12px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.question-heading p { margin: 13px auto 0; max-width: 670px; font-size: 28px; line-height: 1.2; font-weight: 950; letter-spacing: -.02em; }
.answer-grid { display: grid; gap: 12px; max-width: 660px; margin: 0 auto; }
.answer-option { position: relative; min-height: 64px; padding: 14px 18px 14px 62px; border: 2px solid #d6e0dd; border-bottom-width: 5px; border-radius: 18px; background: white; color: var(--ink); text-align: left; font-size: 17px; line-height: 1.3; font-weight: 850; cursor: pointer; transition: transform .15s ease-out, border-color .15s ease-out, background .15s ease-out; }
.answer-option::before { content: attr(data-letter); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: #e9f1ee; color: #47656a; font-size: 13px; font-weight: 950; }
.answer-option:hover:not(:disabled), .answer-option:focus-visible { transform: translateX(4px); border-color: var(--teal); background: #effdf8; outline: none; }
.answer-option.is-wrong { border-color: #ed927f; background: #fff1ec; animation: shake .34s ease-out; }
.answer-option.is-correct { border-color: #51b987; background: #e9f9ef; }
.feedback { min-height: 26px; margin: 15px 0 0; color: #8a5034; font-weight: 850; }
.feedback.is-good { color: #17735d; }
.next-button { margin-top: 12px; background: var(--teal); border-bottom-color: #087071; box-shadow: 0 10px 22px rgba(21,154,156,.24); }
.finish-panel p:not(.stage-kicker) { margin: -12px auto 18px; color: #526c75; font-size: 17px; font-weight: 700; }
.burst { position: absolute; inset: 50% auto auto 50%; width: 1px; height: 1px; pointer-events: none; }
.burst i { position: absolute; width: 10px; height: 18px; border-radius: 5px; background: var(--gold); animation: burst .85s ease-out forwards; }
.rocky-card { min-height: 600px; padding: 22px; border: 1px solid rgba(255,255,255,.32); border-radius: 30px; background: rgba(7,34,45,.82); box-shadow: var(--shadow); backdrop-filter: blur(10px); display: flex; flex-direction: column; justify-content: center; }
.rocky-sticker { width: 100%; aspect-ratio: 1 / 1.08; transform: rotate(1.5deg); transition: transform .15s ease-out; }
.rocky-card.is-happy .rocky-sticker { animation: rockyPop .62s ease-out; }
.rocky-card.is-oops .rocky-sticker { animation: rockyTilt .34s ease-out; }
.rocky-speech { position: relative; margin-top: 18px; padding: 16px 17px; border-radius: 18px; background: white; color: var(--ink); font-size: 15px; line-height: 1.35; font-weight: 850; }
.rocky-speech::before { content: ""; position: absolute; left: 38px; top: -11px; width: 22px; height: 22px; background: white; transform: rotate(45deg); }
.practice-meter { margin-top: 18px; padding: 15px; border-radius: 17px; background: rgba(255,255,255,.09); color: white; }
.practice-meter > div:first-child { display: flex; justify-content: space-between; align-items: baseline; font-weight: 850; }
.practice-meter b { color: #ffd179; font-size: 20px; }
.meter-track { height: 8px; margin: 9px 0; border-radius: 99px; background: rgba(255,255,255,.16); overflow: hidden; }
.meter-track i { display: block; height: 100%; width: 20%; border-radius: inherit; background: linear-gradient(90deg, #80dfad, #ffd179); transition: width .25s ease-out; }
.practice-meter small { color: #bcd0d5; font-weight: 700; }
.sound-toggle { position: absolute; z-index: 4; right: 22px; top: 22px; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.25); border-radius: 15px; background: rgba(9,30,43,.74); color: white; cursor: pointer; }
.sound-toggle svg { width: 23px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sound-toggle .sound-off, .sound-toggle[aria-pressed="true"] .sound-on { display: none; }
.sound-toggle[aria-pressed="true"] .sound-off { display: inline; }
.toast { position: fixed; z-index: 8; left: 50%; bottom: 28px; transform: translate(-50%, 16px); padding: 12px 18px; border-radius: 14px; background: #102f3b; color: white; font-weight: 800; opacity: 0; pointer-events: none; transition: opacity .15s ease-out, transform .15s ease-out; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.toast.is-showing { opacity: 1; transform: translate(-50%, 0); }
[hidden] { display: none !important; }
@keyframes soundwave { from { transform: scaleY(.65); } to { transform: scaleY(2.25); } }
@keyframes float { 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes shake { 25% { transform: translateX(-7px); } 55% { transform: translateX(5px); } 80% { transform: translateX(-2px); } }
@keyframes rockyPop { 40% { transform: rotate(-3deg) scale(1.04); } 70% { transform: rotate(2deg) scale(.98); } }
@keyframes rockyTilt { 40% { transform: rotate(-4deg); } 75% { transform: rotate(3deg); } }
@keyframes burst { to { transform: translate(var(--x), var(--y)) rotate(240deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}