.mission-app { min-height: 100vh; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
.mission-topbar { position: relative; }
.mission-close { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 1.25rem; }
.mission-layout { width: min(100% - 2rem, 78rem); margin: 0 auto; padding: 1.4rem 0 2rem; }
.mission-overview { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.mission-overview h1 { margin: 0; font-size: clamp(1.8rem, 6vw, 2.7rem); letter-spacing: -.05em; }
.mission-overview h1 span { margin-left: .35rem; color: var(--primary); font-family: var(--font-thai-display); font-size: .72em; font-weight: 500; }
.mission-overview > div:first-child > p:last-child { max-width: 42rem; margin: .4rem 0 0; color: var(--text-soft); font-size: .8rem; line-height: 1.55; }
.mission-progress-copy { flex: 0 0 auto; text-align: right; }
.mission-progress-copy strong, .mission-progress-copy span { display: block; }
.mission-progress-copy strong { color: var(--primary); font-size: .8rem; }
.mission-progress-copy span { margin-top: .15rem; color: var(--text-soft); font-size: .65rem; }
.mission-progress-track { height: .42rem; margin: 1.15rem 0 1.35rem; overflow: hidden; border-radius: 999px; background: var(--surface-strong); }
.mission-progress-track span { display: block; width: 9.09%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #e49a45); transition: width 240ms ease; }
.learning-aids { display: flex; align-items: center; justify-content: space-between; margin: -0.55rem 0 1rem; padding: .7rem .8rem; gap: .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 88%, var(--secondary-soft)); }
.learning-aids p { margin: 0; }
.learning-aids > div:first-child > p:last-child { margin-top: .16rem; color: var(--text-soft); font-size: .6rem; line-height: 1.4; }
.learning-aids__controls { display: flex; flex: 0 0 auto; gap: .42rem; }
.learning-aids__controls button { display: flex; min-height: 2.55rem; align-items: center; padding: .45rem .65rem; gap: .38rem; border: 1px solid var(--border); border-radius: .72rem; color: var(--text-soft); background: var(--surface); font-size: .63rem; }
.learning-aids__controls button > span { display: grid; width: 1.2rem; height: 1.2rem; place-items: center; border-radius: .35rem; color: #fff; background: var(--success); font-size: .58rem; font-weight: 900; }
.learning-aids__controls button[aria-pressed="false"] > span { color: transparent; background: var(--surface-strong); }
.learning-aids__controls button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); color: var(--text); }
.mission-workspace { display: grid; gap: 1rem; }
.mission-map { display: flex; padding: .35rem; overflow-x: auto; gap: .3rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow-sm); scrollbar-width: thin; }
.mission-map button { display: grid; min-width: 2.6rem; min-height: 2.6rem; place-items: center; border-radius: .72rem; color: var(--text-soft); background: transparent; font-size: .66rem; font-weight: 900; }
.mission-map button.is-current { color: #fff; background: var(--primary); }
.mission-map button.is-complete { color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.mission-stage { min-height: 29rem; padding: clamp(1rem, 4vw, 2rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.mission-loading { display: grid; min-height: 24rem; place-items: center; align-content: center; color: var(--text-soft); font-size: .75rem; }
.mission-loader { width: 2.2rem; height: 2.2rem; border: 3px solid var(--surface-strong); border-top-color: var(--primary); border-radius: 50%; animation: mission-spin 700ms linear infinite; }
@keyframes mission-spin { to { transform: rotate(360deg); } }
.step-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.step-heading h2 { margin: .12rem 0 0; font-size: clamp(1.45rem, 5vw, 2rem); letter-spacing: -.04em; }
.step-number { display: grid; width: 3rem; height: 3rem; flex: 0 0 auto; place-items: center; border-radius: 1rem; color: var(--primary); background: var(--primary-soft); font-size: .78rem; font-weight: 900; }
.step-intro { max-width: 42rem; margin: .65rem 0 0; color: var(--text-soft); font-size: .78rem; line-height: 1.6; }
.instruction-card { display: flex; align-items: flex-start; margin-top: .9rem; padding: .78rem .85rem; gap: .65rem; border-left: 3px solid var(--primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--primary-soft); }
.instruction-card > span { display: grid; width: 1.55rem; height: 1.55rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-size: .68rem; font-weight: 900; }
.instruction-card strong, .instruction-card small { display: block; }
.instruction-card strong { font-size: .72rem; }
.instruction-card small { margin-top: .18rem; color: var(--text-soft); font-size: .62rem; line-height: 1.45; }
.mission-panel { margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-soft); }
.mission-panel h3 { margin: 0; font-size: .9rem; }
.can-do-list { display: grid; margin: .8rem 0 0; padding: 0; gap: .55rem; list-style: none; }
.can-do-list li { display: flex; align-items: flex-start; gap: .55rem; color: var(--text-soft); font-size: .74rem; line-height: 1.45; }
.can-do-list li::before { display: grid; width: 1.35rem; height: 1.35rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--secondary); content: "✓"; font-size: .65rem; font-weight: 900; }
.listen-hero { display: grid; min-height: 16rem; place-items: center; align-content: center; text-align: center; background: radial-gradient(circle at 50% 35%, var(--secondary-soft), var(--surface-soft) 68%); }
.listen-hero .thai-focus { margin: 0; font-family: var(--font-thai-display); font-size: clamp(2.2rem, 10vw, 4rem); }
.listen-hero > p:not(.thai-focus) { margin: .4rem 0 1rem; color: var(--text-soft); font-size: .75rem; }
.audio-play { display: inline-flex; min-height: 3.2rem; align-items: center; justify-content: center; padding: 0 1.1rem; gap: .55rem; border-radius: 999px; color: #fff; background: var(--secondary); font-size: .74rem; font-weight: 900; }
.audio-play[aria-pressed="true"] { background: var(--primary); }
.dialogue-list { display: grid; margin-top: 1.1rem; gap: .65rem; }
.dialogue-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: .75rem; gap: .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); }
.speaker-dot { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 50%; color: #fff; background: var(--secondary); font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.speaker-dot.nok { background: var(--primary); }
.dialogue-copy { min-width: 0; }
.dialogue-copy strong, .dialogue-copy span { display: block; }
.dialogue-copy strong { font-family: var(--font-thai); font-size: 1.02rem; }
.dialogue-copy span { margin-top: .15rem; color: var(--text-soft); font-size: .68rem; line-height: 1.35; }
.line-play { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 50%; color: var(--secondary); background: var(--secondary-soft); }
.segment-grid { display: grid; margin-top: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.segment-card { padding: .85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); }
.segment-card strong, .segment-card span, .segment-card small { display: block; }
.segment-card strong { font-family: var(--font-thai); font-size: 1.15rem; }
.segment-card span { margin-top: .2rem; color: var(--primary); font-size: .72rem; font-weight: 800; }
.segment-card small { margin-top: .35rem; color: var(--text-soft); font-size: .65rem; line-height: 1.4; }
.choice-grid { display: grid; margin-top: 1rem; gap: .65rem; }
.choice-button { min-height: 4rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: left; background: var(--surface-soft); }
.choice-button:hover, .choice-button.is-selected { border-color: var(--secondary); background: var(--secondary-soft); }
.choice-button.is-correct { border-color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.choice-button.is-wrong { border-color: var(--primary); background: var(--primary-soft); }
.choice-button strong, .choice-button span { display: block; }
.choice-button strong { font-family: var(--font-thai); font-size: .95rem; }
.choice-button span { margin-top: .18rem; color: var(--text-soft); font-size: .67rem; }
.feedback { margin: .75rem 0 0; padding: .7rem .8rem; border-radius: .75rem; color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); font-size: .7rem; font-weight: 800; }
.chunk-bank, .sentence-zone { display: flex; min-height: 4.25rem; flex-wrap: wrap; align-items: center; margin-top: .75rem; padding: .75rem; gap: .5rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.sentence-zone { border-style: solid; background: var(--surface-soft); }
.chunk { padding: .55rem .75rem; border: 1px solid var(--border); border-radius: .7rem; background: var(--surface); font-family: var(--font-thai); font-size: .9rem; box-shadow: var(--shadow-sm); }
.exercise-actions { display: flex; flex-wrap: wrap; margin-top: .75rem; gap: .5rem; }
.small-action { min-height: 2.6rem; padding: .55rem .8rem; border-radius: .7rem; color: var(--text); background: var(--surface-strong); font-size: .68rem; font-weight: 800; }
.small-action.primary { color: #fff; background: var(--secondary); }
.shadow-card { display: grid; margin-top: 1rem; padding: 1.2rem; place-items: center; text-align: center; border-radius: var(--radius-md); background: linear-gradient(145deg, var(--secondary-soft), var(--primary-soft)); }
.shadow-card .thai-focus { margin: .45rem 0 0; font-family: var(--font-thai-display); font-size: clamp(1.65rem, 8vw, 2.8rem); }
.shadow-card .phonetic { margin: .25rem 0 1rem; color: var(--text-soft); font-size: .76rem; }
.shadow-card .translation { margin: -.65rem 0 1rem; color: var(--text-soft); font-size: .68rem; }
.shadow-actions { display: flex; flex-wrap: wrap; justify-content: center; margin-top: .75rem; gap: .5rem; }
.shadow-actions .small-action.is-done { color: #fff; background: var(--success); }
.transfer-form { display: grid; margin-top: 1rem; gap: .65rem; }
.transfer-form label { color: var(--text-soft); font-size: .68rem; font-weight: 800; }
.transfer-form input { width: 100%; min-height: 3rem; margin-top: .35rem; padding: 0 .8rem; border: 1px solid var(--border); border-radius: .75rem; color: var(--text); background: var(--surface-soft); }
.personal-phrase { padding: 1rem; border-left: 3px solid var(--primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--primary-soft); }
.personal-phrase strong, .personal-phrase span { display: block; }
.personal-phrase strong { font-family: var(--font-thai); font-size: 1.2rem; }
.personal-phrase span { margin-top: .25rem; color: var(--text-soft); font-size: .7rem; }
.role-options { display: grid; gap: .5rem; }
.role-option { display: flex; min-height: 3.4rem; align-items: center; justify-content: space-between; padding: .65rem .75rem; gap: .5rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-soft); text-align: left; }
.role-option strong { font-family: var(--font-thai); font-size: .82rem; }
.role-option.is-correct { border-color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.role-option.is-wrong { border-color: var(--primary); background: var(--primary-soft); }
.progressive-help { border: 1px dashed var(--border); border-radius: .75rem; background: var(--surface-soft); }
.progressive-help summary { padding: .7rem .8rem; cursor: pointer; color: var(--secondary); font-size: .66rem; font-weight: 900; }
.progressive-help .personal-phrase { margin: 0 .7rem .7rem; }
.check-list { display: grid; margin-top: 1rem; gap: .55rem; }
.check-item { display: grid; grid-template-columns: auto 1fr; align-items: center; min-height: 3.8rem; padding: .7rem; gap: .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); }
.check-item input { width: 1.15rem; height: 1.15rem; accent-color: var(--secondary); }
.check-item strong, .check-item span { display: block; }
.check-item strong { font-size: .72rem; text-transform: capitalize; }
.check-item span { margin-top: .15rem; color: var(--text-soft); font-size: .65rem; line-height: 1.35; }
.lotus-result { display: grid; min-height: 21rem; place-items: center; align-content: center; text-align: center; }
.lotus { position: relative; width: 11rem; height: 8rem; margin-bottom: 1rem; }
.lotus-petal { position: absolute; bottom: .6rem; left: 50%; width: 3.4rem; height: 5.2rem; border-radius: 80% 20% 70% 30%; background: linear-gradient(160deg, #f4b75f, var(--primary)); transform-origin: 50% 100%; box-shadow: 0 9px 18px color-mix(in srgb, var(--primary) 18%, transparent); }
.lotus-petal:nth-child(1) { transform: translateX(-50%) rotate(-58deg); }
.lotus-petal:nth-child(2) { transform: translateX(-50%) rotate(-28deg); }
.lotus-petal:nth-child(3) { transform: translateX(-50%); }
.lotus-petal:nth-child(4) { transform: translateX(-50%) rotate(28deg); }
.lotus-petal:nth-child(5) { transform: translateX(-50%) rotate(58deg); }
.lotus-result h3 { margin: 0; font-size: 1.35rem; }
.lotus-result p { max-width: 30rem; margin: .45rem 0 0; color: var(--text-soft); font-size: .75rem; line-height: 1.55; }
.mission-controls { display: flex; justify-content: space-between; margin-top: 1rem; gap: .7rem; }
.mission-controls button { display: flex; min-height: 3rem; align-items: center; justify-content: center; padding: 0 1rem; gap: .45rem; border-radius: var(--radius-sm); font-size: .72rem; font-weight: 900; }
.mission-back { border: 1px solid var(--border); background: var(--surface); }
.mission-next { margin-left: auto; color: #fff; background: var(--primary); }
.mission-controls button:disabled { cursor: not-allowed; opacity: .45; }

/* Canonical illustrated Voyage du Lotus experience. */
.story-layout { display: grid; margin-top: 1.15rem; gap: 1rem; }
.mission-brief-layout { align-items: stretch; }
.mission-brief-card { display: flex; flex-direction: column; justify-content: center; margin-top: 0; padding: clamp(1.1rem, 3vw, 1.7rem); }
.mission-brief-card h3 { margin: .15rem 0 .25rem; font-size: clamp(1.15rem, 3vw, 1.55rem); line-height: 1.2; }
.mission-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.mission-badges span { padding: .32rem .55rem; border-radius: 999px; color: var(--secondary); background: var(--secondary-soft); font-size: .58rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.mission-badges span:nth-child(2) { color: var(--primary); background: var(--primary-soft); }
.thai-kicker { margin: .75rem 0 0; color: var(--primary); font-family: var(--font-thai-display); font-size: 1.8rem; }

.mission-scene { position: relative; min-height: 25rem; margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: #dfc49a; box-shadow: var(--shadow-sm); isolation: isolate; }
.mission-scene::after { position: absolute; inset: 45% 0 0; z-index: 1; background: linear-gradient(transparent, rgba(20, 31, 28, .64)); content: ""; pointer-events: none; }
.mission-scene img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; object-position: 54% center; }
.mission-scene figcaption { position: absolute; right: .8rem; bottom: .7rem; left: .8rem; z-index: 3; color: #fff; font-size: .62rem; font-weight: 800; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.mission-scene--compact { min-height: 17rem; }
.character-pin { display: grid; position: absolute; z-index: 4; min-width: 4.8rem; padding: .38rem .5rem; border: 1px solid rgba(255,255,255,.75); border-radius: .65rem; background: rgba(255,253,247,.92); box-shadow: 0 7px 20px rgba(17,32,28,.2); backdrop-filter: blur(8px); }
.character-pin strong, .character-pin small { display: block; }
.character-pin strong { color: var(--text); font-size: .65rem; }
.character-pin small { color: var(--text-soft); font-size: .52rem; }
.character-pin--marc { right: 8%; bottom: 18%; }
.character-pin--nok { top: 16%; left: 8%; }

.listen-scene { display: grid; margin-top: 1.1rem; gap: 1rem; }
.listen-scene .listen-hero { margin-top: 0; }
.voice-pair { display: flex; align-items: center; margin-bottom: .5rem; }
.voice-pair i { width: 3rem; height: 1px; background: linear-gradient(90deg, var(--secondary), var(--primary)); }

.speaker-name { margin: 0 0 .14rem !important; color: var(--primary) !important; font-size: .56rem !important; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.choice-button > .speaker-dot { float: left; width: 2rem; height: 2rem; margin-right: .65rem; }

.roleplay-layout { display: grid; margin-top: 1.1rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-soft); box-shadow: var(--shadow-sm); }
.roleplay-scene { position: relative; }
.roleplay-scene .mission-scene { min-height: 30rem; border: 0; border-radius: 0; box-shadow: none; }
.roleplay-scene .character-pin { display: none; }
.speech-bubble { display: grid; position: absolute; right: 1rem; bottom: 1rem; left: 1rem; z-index: 5; grid-template-columns: auto 1fr auto; align-items: center; padding: .8rem; gap: .65rem; border: 1px solid rgba(255,255,255,.75); border-radius: .9rem; background: rgba(255,253,247,.94); box-shadow: 0 14px 32px rgba(18,36,31,.2); backdrop-filter: blur(10px); }
.speech-bubble p { margin: .1rem 0; font-family: var(--font-thai); font-size: 1rem; }
.speech-bubble small { color: var(--text-soft); font-size: .6rem; }
.transfer-form { align-content: center; padding: clamp(1rem, 3vw, 1.7rem); }
.transfer-form h3 { margin: -.35rem 0 .35rem; font-size: 1.35rem; }

.check-overview { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding: .75rem .9rem; gap: .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); }
.check-overview > div:first-child { display: flex; align-items: center; gap: .65rem; }
.check-overview h3 { margin: .1rem 0 0; font-size: 1rem; }
.check-number { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-size: .78rem; font-weight: 900; }
.check-card { display: grid; margin-top: .75rem; padding: clamp(.9rem, 3vw, 1.25rem); gap: .75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.check-prompt { margin: 0; font-size: .9rem; font-weight: 850; line-height: 1.45; }
.check-options { display: grid; gap: .5rem; }
.check-options button { display: flex; min-height: 3.3rem; align-items: center; justify-content: space-between; padding: .65rem .8rem; gap: .6rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-soft); text-align: left; font-family: inherit; font-size: .72rem; font-weight: 750; }
.check-options button:hover:not(:disabled) { border-color: var(--secondary); transform: translateY(-1px); }
.check-options button.is-correct { border-color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.check-options button.is-wrong { border-color: var(--primary); background: var(--primary-soft); }
.check-options b { font-size: 1rem; }
.check-footer { display: flex; align-items: center; justify-content: space-between; margin-top: .75rem; gap: .7rem; color: var(--text-soft); font-size: .68rem; }
.check-footer .small-action:disabled { opacity: .45; }
.lotus-emblem--check { width: 5rem; }

.result-hero { display: grid; margin-top: 1.1rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: linear-gradient(135deg, #fff7e7, var(--secondary-soft)); box-shadow: var(--shadow-sm); }
.result-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1rem, 4vw, 2rem); }
.result-copy h3 { margin: .15rem 0 .45rem; font-size: clamp(1.45rem, 4vw, 2.1rem); line-height: 1.08; }
.result-copy > p:last-of-type { margin: 0; color: var(--text-soft); font-size: .72rem; line-height: 1.55; }
.lotus-emblem { position: relative; width: 8rem; margin: 0 auto; }
.lotus-emblem svg { display: block; width: 100%; overflow: visible; }
.lotus-emblem__petal { fill: #eadfcd; stroke: #cdbb9f; stroke-width: 4; stroke-linejoin: round; transition: fill 300ms ease, stroke 300ms ease; transform-box: fill-box; transform-origin: center bottom; }
.lotus-emblem__petal.is-open { fill: #d78e99; stroke: #ad5965; }
.lotus-emblem__petal.is-open:nth-child(even) { fill: #e8aa6b; stroke: #bc6d27; }
.lotus-emblem--large { width: min(100%, 19rem); padding: 1rem; align-self: center; }
.lotus-emblem__labels { display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem; }
.lotus-emblem__labels span { padding: .32rem .42rem; border-radius: 999px; color: var(--text-soft); background: rgba(255,255,255,.68); font-size: .55rem; font-weight: 800; text-align: center; }
.lotus-emblem__labels span.is-open { color: var(--success); }
.lotus-emblem--celebrate .lotus-emblem__petal.is-open { opacity: 0; animation: petal-awaken 720ms cubic-bezier(.2,.9,.25,1.25) forwards; animation-delay: calc(120ms + var(--petal-index) * 190ms); }
@keyframes petal-awaken { 0% { opacity: 0; transform: translateY(18px) scale(.62); } 65% { opacity: 1; transform: translateY(-2px) scale(1.04); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.memory-path { display: flex; align-items: center; margin-top: 1rem; gap: .4rem; }
.memory-path span { display: grid; min-width: 0; gap: .1rem; }
.memory-path small { color: var(--primary); font-size: .5rem; font-weight: 900; text-transform: uppercase; }
.memory-path strong { font-size: .61rem; }
.memory-path i { width: 1.5rem; height: 1px; flex: 0 1 1.5rem; background: var(--border); }
.mastery-panel { margin-top: .85rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.mastery-panel h3 { margin: .15rem 0 0; font-size: 1.15rem; }
.mastery-grid { display: grid; margin-top: .75rem; gap: .45rem; }
.mastery-grid article { display: flex; align-items: center; padding: .6rem; gap: .55rem; border-radius: .7rem; background: var(--surface-soft); }
.mastery-grid article > span { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 50%; color: #fff; background: var(--success); font-size: .65rem; }
.mastery-grid strong, .mastery-grid small { display: block; }
.mastery-grid strong { font-size: .67rem; }
.mastery-grid small { margin-top: .12rem; color: var(--text-soft); font-size: .57rem; }

.lake-journey { margin-top: .85rem; padding: clamp(.8rem, 3vw, 1.4rem); overflow: hidden; border: 1px solid color-mix(in srgb, var(--secondary) 42%, var(--border)); border-radius: var(--radius-md); background: linear-gradient(140deg, #f8fbf7, #fffaf0 52%, #f4ebe0); box-shadow: var(--shadow-sm); }
.lake-heading { display: flex; position: relative; z-index: 4; align-items: flex-end; justify-content: space-between; margin-bottom: .85rem; gap: 1rem; }
.lake-heading h3 { margin: .12rem 0 .25rem; font-size: clamp(1.4rem, 4vw, 2rem); }
.lake-heading p:last-child { margin: 0; color: #526e68; font-size: .65rem; }
.lake-heading > span { padding: .45rem .65rem; border: 1px solid rgba(160,125,58,.28); border-radius: 999px; color: #6d5c3c; background: rgba(255,251,236,.9); font-size: .62rem; white-space: nowrap; }
.lake-heading > span strong { color: var(--primary); font-size: 1rem; }
.lake-map { position: relative; height: 24rem; overflow: hidden; border: 1px solid rgba(99,151,142,.3); border-radius: 1rem; background: radial-gradient(ellipse at 16% 62%, rgba(255,246,209,.9) 0 4%, transparent 18%), radial-gradient(ellipse at 76% 30%, rgba(255,255,255,.63), transparent 27%), repeating-radial-gradient(ellipse at 50% 112%, transparent 0 33px, rgba(72,130,122,.08) 35px 37px), linear-gradient(180deg,#eaf4ef,#d9ebe8 42%,#bfdad6); isolation: isolate; }
.lake-map::before { position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(174deg,transparent 0 38px,rgba(255,255,255,.18) 39px 40px,transparent 41px 66px); content: ""; animation: lake-drift 9s ease-in-out infinite alternate; }
@keyframes lake-drift { to { transform: translateY(7px); } }
.lake-sun { position: absolute; top: 1.4rem; left: 6rem; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: rgba(250,207,119,.22); box-shadow: 0 0 38px 22px rgba(248,213,143,.2); }
.lake-mist { position: absolute; z-index: 5; width: 18rem; height: 5rem; border-radius: 50%; background: rgba(246,249,241,.7); filter: blur(20px); pointer-events: none; animation: mist-drift 11s ease-in-out infinite alternate; }
.lake-mist--one { top: 2.7rem; left: 42%; }
.lake-mist--two { right: -2rem; bottom: .5rem; }
@keyframes mist-drift { to { transform: translateX(2rem); } }
.lake-route { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; fill: none; stroke: rgba(255,255,255,.7); stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 2px 3px rgba(43,94,86,.18)); }
.lake-route .is-lit { stroke: #efb249; stroke-width: 5; stroke-dasharray: 10 12; animation: route-light 9s linear infinite; }
@keyframes route-light { to { stroke-dashoffset: -220; } }
.lake-route--mobile { display: none; }
.lake-stop { display: grid; position: absolute; z-index: 3; width: 18%; min-height: 10.5rem; justify-items: center; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; text-align: center; transform: translate(-50%,-50%); }
.lake-stop--complete { top: 64%; left: 9%; }
.lake-stop--available { top: 38%; left: 30%; }
.lake-stop--three { top: 65%; left: 50%; }
.lake-stop--four { top: 38%; left: 71%; }
.lake-stop--five { top: 61%; left: 90%; }
.lake-stop__number { display: grid; position: absolute; top: .1rem; right: .7rem; z-index: 5; width: 1.5rem; height: 1.5rem; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #779c93; font-size: .55rem; font-weight: 900; }
.lake-stop__visual { display: grid; position: relative; z-index: 3; width: 6.5rem; height: 5.7rem; place-items: center; }
.lake-stop__visual > i { position: absolute; width: 4.5rem; height: 3.6rem; border-radius: 50%; background: rgba(231,161,54,.34); filter: blur(13px); animation: lotus-glow 3s ease-in-out infinite; }
@keyframes lotus-glow { 50% { opacity: .5; transform: scale(.8); } }
.lotus-emblem--map { z-index: 2; width: 6.3rem; animation: lotus-float 4.5s ease-in-out infinite; }
@keyframes lotus-float { 50% { transform: translateY(-5px); } }
.lake-stop__copy { display: grid; position: relative; z-index: 5; width: 100%; min-height: 3.9rem; align-content: center; padding: .45rem; gap: .08rem; border: 1px solid rgba(110,151,142,.45); border-radius: .7rem; background: rgba(255,253,247,.88); box-shadow: 0 7px 18px rgba(54,91,83,.11); backdrop-filter: blur(7px); }
.lake-stop__copy small { color: #58756e; font-size: .42rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.lake-stop__copy strong { font-size: .7rem; line-height: 1.1; }
.lake-stop__copy em { color: #60766f; font-size: .46rem; font-style: normal; }
.lake-stop--complete .lake-stop__number { background: linear-gradient(145deg,#d78f2d,#ba5f28); }
.lake-stop--complete .lake-stop__copy { border-color: #dfa65c; background: rgba(255,249,229,.95); }
.lake-stop--available .lake-stop__number { background: #d3a344; animation: next-pulse 2.4s ease-in-out infinite; }
@keyframes next-pulse { 50% { box-shadow: 0 0 0 7px rgba(211,163,68,.16); } }
.lake-stop--available .lotus-emblem__petal { fill: #f0dfb8; stroke: #c9a358; }
.lake-stop--available .lake-stop__copy { border-style: dashed; border-color: #cda557; }
.lake-stop--locked { cursor: not-allowed; opacity: .62; filter: saturate(.7); }
.lake-hint { margin: .7rem 0 0; color: #50746c; font-size: .58rem; font-weight: 800; text-align: center; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; margin-top: .85rem; gap: .5rem; }

@media (min-width: 720px) {
  .mission-layout { padding-top: 2rem; }
  .mission-workspace { grid-template-columns: 4rem minmax(0, 1fr); align-items: start; }
  .mission-map { position: sticky; top: 1rem; display: grid; padding: .4rem; overflow: visible; }
  .segment-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-layout, .listen-scene, .roleplay-layout, .result-hero { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .story-layout .dialogue-list { margin-top: 0; }
  .story-layout .mission-scene { position: sticky; top: 1rem; align-self: start; }
  .mastery-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .mission-overview { align-items: flex-start; }
  .mission-progress-copy { display: none; }
  .learning-aids { align-items: flex-start; flex-direction: column; }
  .learning-aids__controls { width: 100%; }
  .learning-aids__controls button { flex: 1; justify-content: center; }
  .mission-stage { min-height: 31rem; }
  .dialogue-line { grid-template-columns: auto 1fr auto; }
  .mission-controls button { flex: 1; }
  .mission-scene { min-height: 18rem; }
  .mission-scene--compact { min-height: 14rem; }
  .roleplay-scene .mission-scene { min-height: 23rem; }
  .speech-bubble { right: .55rem; bottom: .55rem; left: .55rem; }
  .memory-path { align-items: flex-start; flex-direction: column; }
  .memory-path i { width: 1px; height: .65rem; margin-left: .5rem; flex-basis: .65rem; }
  .lake-heading { align-items: flex-start; flex-direction: column; }
  .lake-map { height: 52rem; }
  .lake-route--desktop { display: none; }
  .lake-route--mobile { display: block; }
  .lake-stop { width: 46%; min-height: 9.5rem; }
  .lake-stop--complete { top: 13%; left: 30%; }
  .lake-stop--available { top: 30.4%; left: 70%; }
  .lake-stop--three { top: 47.8%; left: 30%; }
  .lake-stop--four { top: 65.2%; left: 70%; }
  .lake-stop--five { top: 87%; left: 50%; }
  .lake-sun { right: 1.2rem; left: auto; }
  .lake-mist--one { top: 17rem; left: -2rem; }
  .lake-mist--two { right: -4rem; bottom: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lotus-emblem--celebrate .lotus-emblem__petal.is-open, .lake-map::before, .lake-mist, .lake-route .is-lit, .lake-stop__visual > i, .lotus-emblem--map, .lake-stop--available .lake-stop__number { opacity: 1; animation: none !important; }
}