/* Chapter 2: coral skies, turquoise islands, plum ink, and the original mascot. */
:root {
  color-scheme: light;
  --bg: #ffdfc9;
  --mint: #d9523e;
  --cream: #423150;
  --muted: #6d566e;
  --line: #bf98b0;
  --gold: #ffcf55;
  --body: 1.65cqw;
  --lead: 1.85cqw;
  --small: 1.25cqw;
  --micro: 1cqw;
  --tag: 1.12cqw;
  --h2: 3.4cqw;
  --h3: 1.75cqw;
  --count: 4.9cqw;
}
body {
  color: #49344f;
  background: #ffe7d5;
  background-image: radial-gradient(#fffaf0d9 1.7px, transparent 1.7px);
  background-size: 23px 23px;
}
.player-header { font-weight: 750; }
.wordmark { color: #5c385f; font-weight: 900; }
.wordmark-divider, .guide-title { color: #86677f; }
.brand-pixel { width: 18px; height: 18px; background: #ffca53; border: 2px solid #a47435; border-radius: 50%; box-shadow: 2px 2px 0 #c39152; }
.chapter-label { color: #774958; background: #fff5c8; padding: 7px 12px; border: 2px solid #9c6780; border-radius: 8px; box-shadow: 3px 3px 0 #e1b59d; }
.online-dot { background: #1da795; border-radius: 50%; box-shadow: none; }
.deck { border: 3px solid #7a4b75; border-radius: 12px; box-shadow: 0 8px 0 #ca96b1, 0 15px 28px #75405a25; background: #ffdfc9; }
.slide {
  --ink: #44324f;
  --soft: #66536b;
  --accent: #d6513d;
  --rule: #cca5ad;
  background: #ffdfc9 url('assets/game/chapter4-landscape.webp') center / 100% 100% no-repeat;
  color-scheme: light;
}
.slide::before { z-index: -1; opacity: 1; background: linear-gradient(90deg,#fff5eaeF 0%,#fff1e8e6 50%,#ffe6d455 72%,transparent 100%); }
.slide::after { display: none; }
.slide.reading::before { background: linear-gradient(90deg,#eafaf1f2 0%,#f4f7e6ed 49%,#fff2da55 75%,transparent); }
.slide.review::before { background: linear-gradient(90deg,#f5edfff2 0%,#f9edffed 48%,#ffe8ef70 73%,transparent); }
.slide:has(.trio-layout)::before { background: linear-gradient(90deg,#ffefdf90 0%,#fff6e9e8 24%,#fff3e9f5 68%,#ffe3d14d 86%,transparent); }
.slide-top { height: 6.4cqw; color: #825768; border-bottom: 2px dashed #b880925e; }
.eyebrow { font-size: var(--tag); font-weight: 800; letter-spacing: .05em; }
.slide-top > .mono { font-size: var(--micro); color: #784256; background: #fff3c7; padding: .45cqw .65cqw; border: .13cqw solid #b78a70; border-radius: .5cqw; box-shadow: .18cqw .2cqw 0 #c6a08466; }
.slide-footer { left: 0; right: 0; height: 3.65cqw; padding: 0 4.1cqw; font-size: var(--micro); font-weight: 650; color: #693c33; border-top: .55cqw solid #53c5af; background: #edb878; box-shadow: 0 -.12cqw 0 #2f9989,inset 0 .16cqw 0 #ce9557; }
.slide-footer > .mono { font-size: var(--micro); color: #693c33; }
.content { height: 46.2cqw; }
.content.split { grid-template-columns: 1.17fr 1fr; gap: 3cqw; }
.copy h1, .copy h2 { color: var(--ink); font-weight: 900; text-shadow: .1cqw .14cqw 0 #fffaf0; }
.copy h2 { font-size: var(--h2); line-height: 1.23; }
.copy h2 em { color: var(--accent); }
p, .dual p { font-size: var(--body); line-height: 1.65; color: var(--soft); font-weight: 500; margin: 1.1cqw 0 0; }
h3 { font-size: var(--h3); }
.subtitle, .cover .subtitle, .dual .subtitle { color: var(--ink); font-size: var(--lead); line-height: 1.55; font-weight: 750; margin: 1.1cqw 0 1.5cqw; }
.quote { font-size: var(--lead); color: var(--ink); line-height: 1.55; font-weight: 800; margin-top: 1.6cqw; }
.metric-caption { font-size: var(--small)!important; line-height: 1.5; opacity: 1; color: #7d6070; }
.small-label { font-size: var(--tag); }
.chapter-ticket { display: inline-block; margin: 0 0 1.4cqw; padding: .6cqw .85cqw; border: .15cqw solid #c39d3c; background: #ffe687; border-radius: .6cqw; color: #865324; font-size: var(--tag); box-shadow: .16cqw .23cqw 0 #d4a259; transform: rotate(-2deg); }
.bank-count { display: flex; align-items: center; gap: 1.3cqw; margin: 1.4cqw 0 1.1cqw; }
.bank-count > strong { font-size: var(--count); line-height: 1.2; letter-spacing: -.045em; color: var(--accent); text-shadow: .14cqw .18cqw 0 #fff8ce; }
.bank-count > span { font-size: var(--small); line-height: 1.6; color: #6d5266; font-weight: 750; }
.bank-count small { display: block; font-size: var(--tag); font-weight: 550; }
.part-chip { display: inline-flex; align-items: center; gap: .7cqw; font-size: var(--tag); color: #794567; margin-bottom: .9cqw; font-weight: 800; }
.part-chip > b { display: inline-grid; place-items: center; padding: .3cqw .65cqw; border: .15cqw solid #ce9b51; border-radius: .6cqw; background: #ffda6a; color: #8f5726; font-size: var(--lead); }
.reading .part-chip > b { background: #8eddd1; border-color: #48a999; color: #286d66; }
.reading { --accent: #198c7a; }
.reading .bank-count > strong { text-shadow: .14cqw .18cqw 0 #fff8d6; }

/* Original app screens remain intact; decoration always sits outside them. */
.visual { height: 100%; }
.single-shot .shot { margin-right: 8.5cqw; }
.shot { gap: .9cqw; position: relative; z-index: 2; }
.shot img, .light .shot img { height: 39.5cqw; width: auto; max-width: 100%; object-fit: contain; border: .32cqw solid #fffcf1; border-radius: 0; outline: .16cqw solid #946b83; background: #fffcf1; box-shadow: .55cqw .65cqw 0 #cb8eaa66, 0 .8cqw 1.3cqw #66335918; }
.shot img:hover { outline-color: #e96949; box-shadow: .55cqw .65cqw 0 #ffb66599, 0 .8cqw 1.3cqw #66335918; }
.shot figcaption, .paired-shots figcaption { max-width: 27cqw; padding: .3cqw .7cqw; white-space: normal; font-size: var(--small); line-height: 1.5; color: #6d4765; background: #fff8e8ee; border: .1cqw solid #c5a09c; border-radius: .5cqw; font-weight: 650; }
.game-sprite { object-fit: contain; pointer-events: none; filter: drop-shadow(.1cqw .35cqw .12cqw #59374c22); }
.scene-mascot { position: absolute; right: -1.7cqw; bottom: 5.1cqw; width: 13cqw; height: 15cqw; z-index: 3; }
.quest-coin { position: absolute; top: 9.5cqw; right: 1.1cqw; display: grid; place-items: center; width: 3.2cqw; height: 3.2cqw; background: #ffdb55; color: #a66727; border: .23cqw solid #dea039; border-radius: 50%; font-size: 1.1cqw; box-shadow: inset .12cqw .12cqw 0 #fff4a3,.18cqw .22cqw 0 #bc7c3f; transform: rotate(12deg); }
.large-scene .shot img, .map-scene .shot img { height: 40.3cqw; }
.trio-layout { display: grid; grid-template-columns: 24cqw minmax(0,1fr) 21cqw; gap: 3cqw; align-items: center; }
.trio-layout > .shot figcaption { max-width: 24cqw; }
.trio-layout > .shot img { height: 40.3cqw; }
.companion-stage { position: relative; height: 100%; }
.stage-mascot { position: absolute; left: 50%; bottom: 7.2cqw; width: 24cqw; height: 28cqw; transform: translateX(-50%); z-index: 2; }
.stage-bubble { position: absolute; left: 50%; top: 6.9cqw; transform: translateX(-50%) rotate(5deg); padding: .65cqw .85cqw; white-space: nowrap; color: #754551; background: #ffda69; border: .17cqw solid #c3934d; border-radius: .6cqw; box-shadow: .2cqw .3cqw 0 #ce9d62; font-size: var(--tag); }
.stage-platform { position: absolute; left: 1.5cqw; right: 1.5cqw; bottom: 7.5cqw; height: 2.4cqw; border-top: .6cqw solid #54c2ae; border-radius: .5cqw .5cqw .8cqw .8cqw; background: #edb16a; box-shadow: 0 .3cqw 0 #c78b52; }

/* Chapter entrance and its seven collectible level markers. */
.chapter-cover .cover-layout { grid-template-columns: 1.2fr 1fr; gap: 2cqw; }
.chapter-cover h1 { font-size: 5.4cqw; color: #fff9dc; -webkit-text-stroke: .1cqw #875069; paint-order: stroke fill; text-shadow: .15cqw .2cqw 0 #815075,.27cqw .37cqw 0 #b87a87; transform: rotate(-2deg); transform-origin: left center; }
.chapter-cover h1 em { color: #f36f4c; }
.chapter-cover .bank-count { margin-top: 1.5cqw; }
.chapter-cover .bank-count > strong { font-size: 5.3cqw; }
.chapter-cover .bank-count > span { max-width: 18cqw; }
.chapter-cover p:not(.subtitle) { font-size: 1.5cqw; }
.start-button { color: #fffaf0; background: #d9503d; border: .17cqw solid #9b3e47; border-radius: .65cqw; box-shadow: 0 .4cqw 0 #993d55,inset 0 .15cqw 0 #ff9a6b; padding: .9cqw 1.4cqw; font-size: var(--body); margin-top: 1.6cqw; }
.start-button .mono { font-size: var(--micro); }
.start-button:hover { transform: translateY(-2px); box-shadow: 0 .6cqw 0 #993d55; }
.cover-art { height: 100%; padding: 0; }
.cover-art .app-icon { position: absolute; width: 8.5cqw; height: auto; left: 1.2cqw; top: 7.2cqw; border: .35cqw solid #fff9df; outline: .15cqw solid #a0788b; transform: rotate(-8deg); box-shadow: .4cqw .5cqw 0 #ad718e55; z-index: 3; }
.world-number { position: absolute; right: -.4cqw; top: -.6cqw; font-size: 14cqw; color: #c174951e; letter-spacing: -.1em; }
.cover-mascot { position: absolute; width: 31.5cqw; height: 33.5cqw; bottom: 8cqw; left: 50%; transform: translateX(-50%); z-index: 2; }
.portal-row { position: absolute; display: flex; justify-content: center; gap: .65cqw; bottom: 4.5cqw; left: -1cqw; right: -1cqw; z-index: 3; }
.portal-token { display: grid; place-items: center; width: 3.8cqw; height: 3.8cqw; color: #75424f; font-size: 1.7cqw; background: #ffe485; border: .18cqw solid #b78949; border-radius: .7cqw; box-shadow: 0 .35cqw 0 #cc9953; }
.portal-token:nth-child(even) { background: #a5e4d6; color: #34796e; border-color: #6baf9d; box-shadow: 0 .35cqw 0 #80b5a1; }
.portal-token:nth-child(3n) { background: #ebc7ec; border-color: #bf94c8; box-shadow: 0 .35cqw 0 #b992c1; }
.ready-tag { position: absolute; bottom: 1cqw; left: 50%; transform: translateX(-50%); white-space: nowrap; display: flex; align-items: center; gap: .6cqw; padding: .6cqw 1cqw; color: #38756b; font-size: var(--small); font-weight: 750; background: #e7f8d8; border: .13cqw solid #79ae87; border-radius: .5cqw; }
.ready-tag i { width: .55cqw; height: .55cqw; background: #49ad7f; border-radius: 50%; }

/* A functional world map, followed by distinct mechanics for each Part. */
.dungeon-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7cqw; margin: 1.4cqw 0; }
.dungeon-card { display: flex; align-items: center; gap: .85cqw; color: #69455a; text-decoration: none; background: #fff4cc; border: .15cqw solid #d1a455; border-radius: .7cqw; padding: .7cqw 1cqw; box-shadow: 0 .26cqw 0 #d2aa72; }
.dungeon-card > b { display: grid; place-items: center; width: 2.8cqw; height: 2.8cqw; flex-shrink: 0; font-size: 1.6cqw; background: #ffdb6e; color: #925926; border-radius: .55cqw; }
.dungeon-card > span { font-size: 1.4cqw; font-weight: 800; }
.dungeon-card small { display: block; color: #846671; font-size: var(--tag); font-weight: 500; line-height: 1.45; }
.dungeon-card > i { margin-left: auto; font-size: 1.4cqw; font-style: normal; }
.dungeon-card.reading-card { background: #dbf3e9; border-color: #79b9a9; box-shadow: 0 .26cqw 0 #91bdad; }
.reading-card > b { background: #a1dbcc; color: #357569; }
.dungeon-card:last-child { grid-column: 1 / -1; }
.dungeon-card:hover { transform: translateY(-2px); background: #ffe9a2; }
.map-caption { font-size: 1.4cqw; }
.feature-strip { display: flex; flex-direction: column; gap: .75cqw; background: #fff2cecf; border-left: .3cqw solid #edaa41; padding: 1cqw 1.2cqw; margin: 1.4cqw 0; border-radius: 0 .6cqw .6cqw 0; }
.answer-keys { font-size: 2.05cqw; letter-spacing: .28em; color: #a86431; }
.feature-strip strong { font-size: 1.5cqw; }
.emphasis-line { font-size: 1.45cqw; font-weight: 650; }
.emphasis-line > b { font-size: 1.55cqw; color: #ad5860; }
.combo-display { display: flex; align-items: center; gap: 1.2cqw; margin-top: 1.8cqw; color: #a76556; }
.combo-display strong { color: #d9523e; font-size: 4.3cqw; line-height: 1.3; }
.combo-display strong span { font-size: 2cqw; }
.combo-display > b { font-size: 2cqw; }
.mechanic-row { display: flex; align-items: center; gap: 1.2cqw; margin: 1.6cqw 0; }
.mechanic-row > span { padding: .7cqw 1cqw; background: #fff5d7; border: .15cqw solid #d8b273; border-radius: .6cqw; font-size: 1.4cqw; color: #715268; }
.mechanic-row b { font-size: 1.8cqw; color: #cf643e; margin-right: .25cqw; }
.mechanic-row > i { font-style: normal; color: #bb7690; font-size: 2cqw; }
.tip-note { padding: 1cqw 1.25cqw; margin-top: 1.6cqw; background: #fff6ccba; border-left: .3cqw solid #dfad47; border-radius: 0 .6cqw .6cqw 0; }
.tip-note > strong { display: block; font-size: var(--body); color: #82553c; }
.tip-note > span { display: block; font-size: 1.45cqw; color: #785b62; margin-top: .45cqw; line-height: 1.6; }
.broadcast-types, .document-types { display: flex; gap: .7cqw; margin: 1.5cqw 0; }
.broadcast-types > span, .document-types > span { padding: .55cqw 1cqw; font-size: 1.45cqw; background: #ffe8c7; color: #9a5b46; border: .13cqw solid #dca179; border-radius: .55cqw; font-weight: 750; }
.review-list { margin: 1.6cqw 0; }
.review-list > div { display: flex; gap: 1.2cqw; align-items: center; padding: 1cqw 0; border-bottom: 2px dashed #c19bbc80; }
.review-list > div > b { font-size: 1.5cqw; color: #a970b4; }
.review-list span { font-size: 1.4cqw; line-height: 1.6; color: #775d80; }
.review-list strong { display: block; font-size: var(--body); color: #754f83; }
.answer-result { display: flex; align-items: center; gap: 1.3cqw; padding: 1.2cqw 1.4cqw; margin: 1.3cqw 0; background: #ffebea; border: .17cqw solid #e89798; border-radius: .8cqw; box-shadow: .25cqw .3cqw 0 #cd9aad55; }
.answer-result > span { font-size: 3.5cqw; color: #d35f65; line-height: 1; }
.answer-result strong { color: #9e5162; font-size: var(--h3); }
.answer-result p { margin: .4cqw 0 0; font-size: 1.4cqw; color: #8d6270; }
.answer-result.correct { background: #e4f4d8; border-color: #95ba7a; }
.answer-result.correct > span, .answer-result.correct strong { color: #52814a; }
.answer-result.correct p { color: #5d7958; }
.wordform-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; margin: 1.6cqw 0; }
.wordform-pair > span { color: #587367; background: #eaf8e8; border: .15cqw solid #a2c7b2; border-radius: .6cqw; padding: 1cqw; font-size: 1.3cqw; line-height: 1.65; }
.wordform-pair b { display: block; font-size: 1.6cqw; color: #267f6e; }
.explanation-card { display: flex; gap: 1.4cqw; align-items: flex-start; padding: 1.2cqw; background: #fff8e7; border: .15cqw solid #c6a5cf; border-radius: .8cqw; box-shadow: 0 .25cqw 0 #cfb3d1; margin: 1.3cqw 0; }
.explanation-card > span { font-size: 1.5cqw; color: #b384bd; margin-top: .3cqw; }
.explanation-card h3 { color: #784f84; }
.explanation-card p { font-size: 1.45cqw; margin-top: .45cqw; }
.blank-sequence { display: flex; gap: 1cqw; margin: 1.4cqw 0; }
.blank-sequence span { font-size: 1.8cqw; padding: .55cqw 1.1cqw; color: #2b8977; background: #e3f6da; border: .17cqw solid #89b79c; border-radius: .5cqw; font-weight: 800; }
.dual .split { grid-template-columns: .83fr 1.25fr; gap: 2.4cqw; }
.dual .copy h2 { font-size: 3.1cqw; }
.dual p { font-size: 1.5cqw; }
.dual .bank-count { gap: 1cqw; }
.dual .bank-count > strong { font-size: 4.1cqw; }
.dual .bank-count > span { font-size: 1.05cqw; }
.paired-shots { gap: 2cqw; }
.paired-shots .shot img { height: 39.4cqw; }
.paired-shots .shot { gap: 1.1cqw; }
.paired-shots figcaption { max-width: 21cqw; }
.document-types { gap: .5cqw; margin: 1.1cqw 0; }
.document-types span { font-size: 1.2cqw; padding: .5cqw .85cqw; background: #dff0df; border-color: #9aba99; color: #547953; }
.split-hint { display: flex; align-items: center; gap: .9cqw; padding: .9cqw 1cqw; margin: 1.4cqw 0; border: .15cqw solid #bd9b62; border-radius: .6cqw; background: #fff0be; }
.split-hint > b { font-size: 3cqw; color: #b28633; }
.split-hint > span { font-size: 1.25cqw; color: #897245; line-height: 1.6; }
.split-hint strong { display: block; font-size: 1.4cqw; color: #876638; }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8cqw; margin: 1.5cqw 0; }
.guide-grid > span { padding: .75cqw 1cqw; border: .15cqw solid #d7aa6b; border-radius: .6cqw; background: #fff0c9; font-size: 1.5cqw; color: #8e6244; font-weight: 750; }
.time-budget { display: flex; align-items: center; gap: 1.4cqw; margin: 1.8cqw 0; }
.time-budget > strong { font-size: 5.8cqw; line-height: 1.2; color: #d86b3f; }
.time-budget > span { font-size: var(--body); font-weight: 750; color: #7f5a56; }
.time-budget small { display: block; margin-top: .4cqw; font-size: var(--tag); font-weight: 500; }
.walk-steps { list-style: none; padding: 0; margin: 1.5cqw 0; }
.walk-steps li { display: flex; align-items: center; gap: 1cqw; border-bottom: 2px dashed #bd989b99; padding: .95cqw 0; }
.walk-steps span { font-size: 1.3cqw; color: #bc805c; }
.walk-steps b { font-size: 1.5cqw; color: #7d596a; }
.walkthrough-slide p { font-size: 1.5cqw; }

/* The final checkpoint gets a vivid plum arcade palette. */
.slide.boss-slide { --ink: #fff3d4; --soft: #f2deeb; --accent: #ffcc65; }
.slide.boss-slide::before { background: linear-gradient(100deg,#493063f7 0%,#6d3e74f5 61%,#975a96d9 100%); }
.boss-slide .slide-top { color: #f4d8ee; border-color: #dbb4d266; }
.boss-slide h2 { text-shadow: .12cqw .18cqw 0 #38234f; }
.boss-slide strong { color: #ffdd8b; }
.boss-slide .chapter-ticket { color: #734253; background: #ffde7e; }
.length-selector { display: flex; gap: .65cqw; margin: 1.5cqw 0; }
.length-option { padding: .7cqw 1cqw; font-size: 1.5cqw; color: #ecd9f6; background: #765180; border: .14cqw solid #a27bac; border-radius: .6cqw; font-weight: 750; }
.length-option.selected { color: #775131; background: #ffda6b; border-color: #efbf62; box-shadow: 0 .3cqw 0 #b17d4b; }
.boss-slide p { font-size: 1.5cqw; }
.battle-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; margin: 1.4cqw 0; }
.battle-modes > div { padding: 1.05cqw; background: #fcecd5; border: .15cqw solid #cf9ea5; border-radius: .7cqw; }
.battle-modes > div:last-child { background: #c8efdc; border-color: #97c7b1; }
.battle-modes h3 { color: #785163; font-size: 1.6cqw; }
.battle-modes > div:last-child h3 { color: #377b65; }
.battle-modes p { color: #77596c; font-size: 1.3cqw; margin-top: .5cqw; }
.mock-duration { display: flex; flex-direction: column; gap: .5cqw; margin: 1.5cqw 0; }
.mock-duration b { font-size: 2.4cqw; color: #ffd46c; }
.mock-duration span { font-size: var(--small); color: #eacfe3; }
.boss-slide .boss-advice { font-size: 1.4cqw; }
.boss-slide .quest-coin { background: #ffde6e; }
.chapter-finale .copy h2 { font-size: 4.2cqw; }
.chapter-finale .bank-count > strong { font-size: 4.7cqw; }
.chapter-finale p:not(.subtitle) { font-size: 1.5cqw; }
.next-world-ticket { margin-top: 1.6cqw; padding: 1.2cqw 1.5cqw; background: #fff0b9; border: .18cqw solid #c8a251; border-radius: .85cqw; box-shadow: .25cqw .35cqw 0 #d5aa67; transform: rotate(-1deg); }
.next-world-ticket > span { display: block; font-size: var(--tag); color: #ae7344; margin-bottom: .5cqw; }
.next-world-ticket > strong { display: block; font-size: 2.9cqw; color: #aa6135; line-height: 1.4; }
.next-world-ticket p { color: #916b50; margin-top: .5cqw; font-size: 1.4cqw; }
.chapter-finale .closing-line { font-size: 1.4cqw; font-weight: 700; }

/* Keep the screenshot at the center of the explanation, not at the far edge. */
.lesson-layout { display: grid; grid-template-columns: 32cqw 21cqw minmax(0,1fr); gap: 2.5cqw; align-items: center; }
.lesson-intro, .lesson-details { min-width: 0; }
.lesson-intro { padding-right: .3cqw; }
.lesson-intro .subtitle { max-width: 29cqw; }
.lesson-mascot { display: block; width: 18cqw; height: 17cqw; margin: 1.5cqw auto 0; }
.lesson-screen { padding: 0; }
.lesson-screen .shot { width: 100%; margin: 0; gap: .75cqw; }
.lesson-screen .shot img { height: 39cqw; }
.lesson-screen .shot figcaption { width: 23cqw; max-width: 23cqw; text-wrap: balance; }
.lesson-details { padding: 1.5cqw; border: .15cqw solid #c89aaa; border-radius: 1.2cqw; background: #fff8eced; box-shadow: .35cqw .45cqw 0 #cfa89955; }
.lesson-details > :first-child { margin-top: 0; }
.lesson-details > :last-child { margin-bottom: 0; }
.lesson-details p:not(.quote) br, .lesson-intro .map-caption br { display: none; }
.lesson-details .quote { padding-top: 1.2cqw; border-top: .15cqw dashed #bf9bad; }
.lesson-details .feature-strip, .lesson-details .tip-note { background: #ffedb6; }
.lesson-details .wordform-pair { grid-template-columns: 1fr; }
.lesson-details .wordform-pair > span { padding: .9cqw 1.2cqw; font-size: 1.4cqw; }
.lesson-details .wordform-pair b { font-size: 1.8cqw; }
.lesson-details .review-list { margin: 0; }
.lesson-details .review-list > div { padding: 1.1cqw 0; }
.lesson-details .review-list > div:first-child { padding-top: 0; }
.lesson-details .review-list > div:last-child { border-bottom: 0; }
.lesson-details .review-list strong { font-size: 1.85cqw; }
.lesson-details .review-list span { font-size: 1.5cqw; }
.lesson-details .answer-result, .lesson-details .explanation-card { padding: 1.1cqw; gap: 1cqw; }
.lesson-details .answer-result p, .lesson-details .explanation-card p { font-size: 1.5cqw; }
.lesson-details .answer-result > span { font-size: 3cqw; }
.lesson-details .guide-grid > span { padding: .8cqw; }
.lesson-details .time-budget { gap: 1cqw; }
.lesson-details .time-budget small { font-size: var(--small); }
.map-slide .lesson-details { padding: 1cqw; }
.map-slide .dungeon-grid { margin: 0; gap: .9cqw; }
.map-slide .dungeon-card { padding: .9cqw .7cqw; gap: .6cqw; }
.map-slide .dungeon-card > span { font-size: 1.4cqw; }
.map-slide .dungeon-card > i { display: none; }
.reading .lesson-details { background: #f0fae9f2; border-color: #8dbbab; box-shadow: .35cqw .45cqw 0 #84b5a34d; }
.review .lesson-details { background: #fff4fff2; border-color: #c2a0ce; }
.slide:has(.lesson-layout)::before { background: linear-gradient(90deg,#fff2e7f5 0%,#fff2e7eb 35%,#ffeadb65 64%,#ffeadb15 100%); }
.slide.reading:has(.lesson-layout)::before { background: linear-gradient(90deg,#edfbf0f5 0%,#f2fae5eb 35%,#fff0d570 64%,#ffeadb15 100%); }
.slide.review:has(.lesson-layout)::before { background: linear-gradient(90deg,#f6edfff5 0%,#faedffeb 35%,#ffe8ef65 64%,#ffeadb15 100%); }
.slide.boss-slide:has(.lesson-layout)::before { background: linear-gradient(100deg,#493063f7 0%,#6d3e74f5 61%,#975a96d9 100%); }
.boss-slide .lesson-details { background: #754d81ed; border-color: #b789bf; box-shadow: .35cqw .45cqw 0 #38224f66; }
.boss-slide .length-selector { display: grid; grid-template-columns: repeat(3,1fr); gap: .7cqw; }
.boss-slide .length-option { padding: .55cqw; text-align: center; }
.boss-slide .battle-modes { grid-template-columns: 1fr; gap: .75cqw; }
.boss-slide .battle-modes > div { padding: .9cqw 1.1cqw; }
.boss-slide .battle-modes p { margin-top: .2cqw; font-size: 1.4cqw; }
.boss-slide .mock-duration { margin-top: 2cqw; }
.chapter-finale .lesson-intro .bank-count { align-items: flex-start; flex-direction: column; gap: .65cqw; }
.chapter-finale .lesson-intro .bank-count small { font-size: var(--small); }
.chapter-finale .lesson-details .lesson-mascot { width: 20cqw; height: 18cqw; margin-top: 1cqw; }
.chapter-finale .next-world-ticket { padding: 1cqw; }
.chapter-cover .cover-layout { grid-template-columns: 1fr 1fr; gap: 1.5cqw; }
.chapter-cover h1 { font-size: 6.2cqw; }
.chapter-cover .cover-mascot { width: 38cqw; height: 38cqw; left: 45%; bottom: 7cqw; }
.chapter-cover .cover-art .app-icon { left: -3cqw; top: 7cqw; }
.dual .split { grid-template-columns: 35cqw minmax(0,1fr); gap: 3cqw; }
.dual .paired-shots { justify-content: flex-start; gap: 3cqw; }

/* Player chrome, dialogs, and motion match the new region. */
.player-controls { color: #8a6079; }
.tool-button { color: #79536f; font-weight: 750; font-size: 14px; border-radius: 8px; }
.tool-button:hover { color: #8f5533; background: #ffedc4; }
.control-separator { border-color: #c99cac; }
.keyboard-hint { color: #957082; font-size: 12px; }
.arrow-button { background: #ffcf61; border: 2px solid #ad7949; color: #864d43; border-radius: 8px; box-shadow: 0 3px 0 #c39566; font-weight: 800; }
.arrow-button:hover:enabled { color: #864d43; background: #ffdf8a; transform: translateY(-1px); }
.arrow-button:disabled { opacity: .35; }
.page-counter > b { color: #7a4e70; }
.page-counter > span { color: #b08091; }
.deck-progress { background: #e1b8c3; height: 4px; }
.deck-progress span { background: #ec7b57; }
dialog { background: #fff4eb; color: #65445f; border: 3px solid #a47a96; border-radius: 14px; box-shadow: 0 10px 0 #74446b66,0 24px 100px #6b376344; }
dialog::backdrop { background: #593b6699; backdrop-filter: blur(7px); }
.dialog-heading h2 { color: #81516e; }
.dialog-heading .small-label { color: #ac7d8d; }
.close-button { color: #fff8e8; background: #df7658; border: 2px solid #a05b59; border-radius: 8px; box-shadow: 0 3px 0 #af7067; }
.close-button:hover { background: #ec9370; }
.overview-item { background: #fff0c6; color: #745365; border: 2px solid #dab478; border-radius: 8px; box-shadow: 0 3px 0 #d6b082; }
.overview-item:nth-child(4n+2) { background: #dbf2df; border-color: #9ec5ad; box-shadow: 0 3px 0 #a7c6ad; }
.overview-item:nth-child(4n+3) { background: #ffe0d4; border-color: #dba58e; box-shadow: 0 3px 0 #d6a291; }
.overview-item:nth-child(4n+4) { background: #eddef4; border-color: #c3a1d1; box-shadow: 0 3px 0 #c1a3cf; }
.overview-item:hover, .overview-item[aria-current=true] { background: #ffe59f; border-color: #c7914c; transform: translateY(-2px); }
.overview-item strong { color: #754e69; }
.overview-item .mono { color: #b7735b; }
.overview-item small, .dialog-tip { color: #97778d; }




#lightbox, .lightbox-toolbar { background: #fff5ef; }
.lightbox-toolbar { border-color: #d7b7c6; }
#lightbox-title, #lightbox > p { color: #8b617e; }
.toast { background: #fff0c3; color: #865947; border: 2px solid #cca179; border-radius: 8px; }
button:focus-visible, a:focus-visible, img[data-zoom]:focus-visible { outline-color: #c95744; }
.is-active .game-sprite { animation: mascot-bob 3.8s ease-in-out infinite; }
@keyframes mascot-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -.45cqw; } }
.is-active .copy, .is-active .visual, .is-active .cover-art { animation: chapter-enter .3s ease-out both; }
@keyframes chapter-enter { from { transform: translateY(.45cqw); } to { transform: translateY(0); } }

@media(max-width:680px) and (orientation:portrait) {
  :root { --body: max(16px,4.4cqw); --lead: max(18px,4.9cqw); --small: max(13px,3.55cqw); --micro: max(10px,2.7cqw); --tag: max(12px,3.3cqw); --h2: 8.6cqw; --h3: max(18px,4.9cqw); --count: 12cqw; }
  .chapter-label { border-width: 1px; padding: 5px 7px; border-radius: 5px; box-shadow: 2px 2px 0 #e1b59d; }
  .deck { border-width: 2px; border-radius: 8px; box-shadow: 0 5px 0 #ca96b1; }
  .slide { background-size: auto 100%; background-position: center bottom; }
  .slide::before, .slide:has(.trio-layout)::before { background: linear-gradient(#fff2e5f5 0%,#fff0e5ed 67%,#ffdfcb60); }
  .slide.reading::before { background: linear-gradient(#eefbefed 0%,#f5f9e8ed 65%,#ffe4cc70); }
  .slide.review::before { background: linear-gradient(#f5effff2 0%,#fbeeffed 65%,#ffe4dd70); }
  .slide-top { height: 18cqw; border-width: 1px; gap: 2cqw; }
  .eyebrow { font-size: max(11px,3cqw); }
  .slide-top > .mono { font-size: max(9px,2.5cqw); padding: 1.3cqw 1.7cqw; border-width: 1px; border-radius: 1.4cqw; box-shadow: .4cqw .5cqw 0 #c6a08466; }
  .slide-footer { left: -6cqw; width: calc(100% + 12cqw); right: auto; height: auto; min-height: 12cqw; padding: 2cqw 6cqw; border-top-width: 1.2cqw; margin-top: 7cqw; }
  .content { height: auto; padding-top: 7cqw; }
  .content.split, .chapter-cover .cover-layout, .dual .split, .trio-layout { display: flex; flex-direction: column; gap: 7cqw; align-items: stretch; }
  .copy { padding: 0; }
  .copy h2, .dual .copy h2 { font-size: var(--h2); }
  p, .dual p, .walkthrough-slide p, .boss-slide p, .chapter-finale p:not(.subtitle), .chapter-cover p:not(.subtitle) { font-size: var(--body); line-height: 1.75; margin-top: 3cqw; }
  .subtitle, .cover .subtitle, .dual .subtitle { font-size: var(--lead); margin: 3.5cqw 0 4cqw; }
  .quote { font-size: var(--lead); margin-top: 5cqw; }
  .chapter-ticket { padding: 1.8cqw 2.5cqw; border-width: 1px; border-radius: 1.5cqw; margin-bottom: 5cqw; box-shadow: .5cqw .7cqw 0 #d4a259; }
  .bank-count, .chapter-cover .bank-count, .dual .bank-count { gap: 3cqw; margin: 4cqw 0; }
  .bank-count > strong, .chapter-cover .bank-count > strong, .chapter-finale .bank-count > strong, .dual .bank-count > strong { font-size: var(--count); }
  .bank-count > span, .dual .bank-count > span { font-size: var(--small); }
  .bank-count small { font-size: var(--tag); }
  .part-chip { gap: 2cqw; margin-bottom: 3cqw; }
  .part-chip > b { padding: 1cqw 2cqw; border-width: 1px; border-radius: 1.5cqw; }
  .visual { height: auto; padding-top: 3cqw; }
  .visual::before { display: none; }
  .single-shot { padding-bottom: 25cqw; }
  .single-shot .shot { margin: 0; }
  .shot { gap: 3cqw; }
  .shot img, .large-scene .shot img, .map-scene .shot img, .trio-layout > .shot img { width: 66cqw; height: auto; max-height: none; border-width: 1cqw; outline-width: .4cqw; box-shadow: 1.5cqw 1.7cqw 0 #cb8eaa66; }
  .shot figcaption, .trio-layout > .shot figcaption { max-width: 83cqw; border-width: 1px; border-radius: 1.4cqw; padding: 1cqw 2.2cqw; }
  .scene-mascot { right: 0; bottom: -1cqw; width: 23cqw; height: 25cqw; }
  .quest-coin { top: 14cqw; right: -2cqw; width: 7cqw; height: 7cqw; border-width: .6cqw; font-size: 2.5cqw; box-shadow: inset .3cqw .3cqw 0 #fff4a3,.4cqw .5cqw 0 #bc7c3f; }
  .trio-layout .copy { order: -1; }
  .trio-layout > .shot { margin-top: 2cqw; }
  .companion-stage { height: 47cqw; width: 55cqw; align-self: center; }
  .stage-mascot { width: 40cqw; height: 43cqw; bottom: 3cqw; }
  .stage-bubble { left: auto; right: -5cqw; top: 0; transform: rotate(5deg); padding: 1.7cqw 2.2cqw; border-width: 1px; border-radius: 1.5cqw; font-size: 2.7cqw; }
  .stage-platform { left: 10cqw; right: 10cqw; bottom: 3cqw; height: 3.5cqw; border-top-width: 1cqw; border-radius: 1cqw; }
  .chapter-cover h1 { font-size: 12.4cqw; -webkit-text-stroke: .3cqw #875069; text-shadow: .4cqw .55cqw 0 #815075,.7cqw .9cqw 0 #b87a87; }
  .chapter-cover .bank-count { align-items: center; flex-wrap: wrap; }
  .chapter-cover .bank-count > span { max-width: none; }
  .chapter-cover p br { display: none; }
  .start-button { font-size: var(--body); padding: 3cqw 4.5cqw; border-width: 2px; border-radius: 8px; gap: 3cqw; margin-top: 5cqw; box-shadow: 0 1cqw 0 #993d55; }
  .cover-art { height: 105cqw; }
  .cover-art .app-icon { width: 19cqw; top: 15cqw; left: -1cqw; border-width: 1cqw; outline-width: .4cqw; }
  .world-number { font-size: 36cqw; top: -2cqw; right: 0; }
  .cover-mascot { width: 78cqw; height: 81cqw; bottom: 18cqw; }
  .portal-row { gap: 1.5cqw; bottom: 10cqw; left: -2cqw; right: -2cqw; }
  .portal-token { width: 9.5cqw; height: 9.5cqw; font-size: 4.2cqw; border-width: 1px; border-radius: 1.7cqw; box-shadow: 0 .8cqw 0 #cc9953; }
  .ready-tag { bottom: 0; gap: 2cqw; padding: 2cqw 3cqw; border-width: 1px; border-radius: 1.5cqw; }
  .ready-tag i { width: 1.7cqw; height: 1.7cqw; }
  .dungeon-grid { gap: 2.5cqw; margin: 5cqw 0; }
  .dungeon-card { padding: 2.5cqw; gap: 2.2cqw; border-width: 1px; border-radius: 2cqw; box-shadow: 0 .8cqw 0 #d2aa72; }
  .dungeon-card > b { width: 7cqw; height: 7cqw; font-size: 4cqw; border-radius: 1.5cqw; }
  .dungeon-card > span { font-size: max(14px,3.8cqw); }
  .dungeon-card small { font-size: max(12px,3.2cqw); }
  .dungeon-card > i { font-size: 4cqw; }
  .map-caption { font-size: var(--body); }
  .feature-strip { gap: 2cqw; padding: 3cqw 4cqw; margin: 5cqw 0; border-left-width: 1cqw; border-radius: 0 2cqw 2cqw 0; }
  .answer-keys { font-size: 6cqw; }
  .feature-strip strong, .emphasis-line, .emphasis-line > b { font-size: var(--body); }
  .combo-display { gap: 4cqw; margin-top: 5cqw; }
  .combo-display strong { font-size: 12cqw; }
  .combo-display strong span, .combo-display > b { font-size: 6cqw; }
  .mechanic-row { gap: 3cqw; margin: 5cqw 0; }
  .mechanic-row > span { padding: 2cqw 3cqw; border-width: 1px; border-radius: 2cqw; font-size: var(--body); }
  .mechanic-row b { font-size: 5.3cqw; margin-right: 1cqw; }
  .mechanic-row > i { font-size: 5cqw; }
  .tip-note { padding: 3cqw 4cqw; margin-top: 5cqw; border-left-width: 1cqw; border-radius: 0 2cqw 2cqw 0; }
  .tip-note > span { font-size: var(--body); margin-top: 2cqw; }
  .broadcast-types, .document-types { gap: 2cqw; margin: 5cqw 0; }
  .broadcast-types > span, .document-types > span { font-size: var(--body); padding: 1.7cqw 2.5cqw; border-width: 1px; border-radius: 1.5cqw; }
  .review-list { margin: 5cqw 0; }
  .review-list > div { gap: 4cqw; padding: 3cqw 0; }
  .review-list > div > b { font-size: 4cqw; }
  .review-list span { font-size: var(--body); }
  .review-list strong { font-size: var(--h3); }
  .answer-result { gap: 3.5cqw; padding: 3.5cqw; margin: 4cqw 0; border-width: 1px; border-radius: 2cqw; }
  .answer-result > span { font-size: 9cqw; }
  .answer-result p { margin-top: 2cqw; font-size: var(--body); }
  .wordform-pair { gap: 2.5cqw; margin: 5cqw 0; }
  .wordform-pair > span { padding: 3cqw 2cqw; font-size: max(13px,3.5cqw); border-width: 1px; border-radius: 2cqw; }
  .wordform-pair b { font-size: max(14px,3.8cqw); }
  .explanation-card { gap: 3cqw; padding: 3.5cqw; border-width: 1px; border-radius: 2cqw; margin: 4cqw 0; }
  .explanation-card > span { font-size: 4cqw; margin-top: 1cqw; }
  .explanation-card p { font-size: var(--body); margin-top: 2cqw; }
  .blank-sequence { gap: 3cqw; margin: 5cqw 0; }
  .blank-sequence span { font-size: 5cqw; padding: 2cqw 3cqw; border-width: 1px; border-radius: 1.5cqw; }
  .paired-shots { gap: 4cqw; align-items: flex-start; }
  .paired-shots .shot img { width: 40cqw; height: auto; }
  .paired-shots .shot { gap: 3cqw; }
  .paired-shots figcaption { max-width: 40cqw; font-size: max(12px,3.3cqw); }
  .split-hint { gap: 3cqw; padding: 3cqw; margin: 5cqw 0; border-width: 1px; border-radius: 2cqw; }
  .split-hint > b { font-size: 8cqw; }
  .split-hint > span { font-size: var(--body); }
  .split-hint strong { font-size: var(--h3); }
  .guide-grid { gap: 2.5cqw; margin: 5cqw 0; }
  .guide-grid > span { padding: 2.5cqw 3cqw; font-size: var(--body); border-width: 1px; border-radius: 1.5cqw; }
  .time-budget { gap: 4cqw; margin: 5cqw 0; }
  .time-budget > strong { font-size: 15cqw; }
  .time-budget small { margin-top: 2cqw; }
  .walk-steps { margin: 5cqw 0; }
  .walk-steps li { gap: 3cqw; padding: 3cqw 0; }
  .walk-steps span { font-size: 3.5cqw; }
  .walk-steps b { font-size: var(--body); }
  .length-selector { gap: 2cqw; flex-wrap: wrap; margin: 5cqw 0; }
  .length-option { font-size: var(--body); padding: 2cqw 3cqw; border-width: 1px; border-radius: 1.5cqw; }
  .battle-modes { grid-template-columns: 1fr; gap: 3cqw; margin: 5cqw 0; }
  .battle-modes > div { padding: 3.5cqw; border-width: 1px; border-radius: 2cqw; }
  .battle-modes h3 { font-size: var(--h3); }
  .battle-modes p { font-size: var(--body); margin-top: 2cqw; }
  .mock-duration { gap: 2cqw; margin: 5cqw 0; }
  .mock-duration b { font-size: 6cqw; }
  .boss-slide .boss-advice { font-size: var(--body); }
  .chapter-finale .copy h2 { font-size: 10cqw; }
  .next-world-ticket { margin-top: 5cqw; padding: 4cqw; border-width: 1px; border-radius: 2.5cqw; box-shadow: .8cqw 1cqw 0 #d5aa67; }
  .next-world-ticket > span { margin-bottom: 2cqw; }
  .next-world-ticket > strong { font-size: 8cqw; }
  .next-world-ticket p, .chapter-finale .closing-line { font-size: var(--body); }
  .next-world-ticket p { margin-top: 2cqw; }
}
@media(max-width:680px) and (orientation:portrait) {
  .lesson-layout { display: flex; flex-direction: column; gap: 6cqw; align-items: stretch; }
  .lesson-intro { padding: 0; }
  .lesson-intro .subtitle { max-width: none; }
  .lesson-intro > .lesson-mascot { display: none; }
  .lesson-screen { order: 3; padding: 2cqw 0 0; }
  .lesson-screen .shot { gap: 3cqw; }
  .lesson-screen .shot img { width: 66cqw; height: auto; }
  .lesson-screen .shot figcaption { width: auto; max-width: 83cqw; }
  .lesson-details, .map-slide .lesson-details { padding: 4cqw; border-width: 1px; border-radius: 3cqw; box-shadow: 1cqw 1.2cqw 0 #cfa89955; }
  .lesson-details .quote { padding-top: 4cqw; border-width: 1px; }
  .lesson-details .wordform-pair > span { padding: 3cqw; font-size: var(--body); }
  .lesson-details .wordform-pair b { font-size: var(--h3); }
  .lesson-details .review-list > div { padding: 3cqw 0; }
  .lesson-details .review-list strong { font-size: var(--h3); }
  .lesson-details .review-list span { font-size: var(--body); }
  .lesson-details .answer-result, .lesson-details .explanation-card { padding: 3cqw; gap: 3cqw; }
  .lesson-details .answer-result p, .lesson-details .explanation-card p { font-size: var(--body); }
  .lesson-details .answer-result > span { font-size: 8cqw; }
  .lesson-details .guide-grid > span { padding: 2.5cqw; }
  .lesson-details .time-budget { gap: 3cqw; }
  .map-slide .dungeon-grid { gap: 2.5cqw; }
  .map-slide .dungeon-card { padding: 2.5cqw 1.5cqw; gap: 2cqw; }
  .map-slide .dungeon-card > span { font-size: max(14px,3.8cqw); }
  .boss-slide .length-selector { gap: 2cqw; }
  .boss-slide .length-option { padding: 2cqw; }
  .boss-slide .battle-modes { gap: 3cqw; }
  .boss-slide .battle-modes > div { padding: 3cqw; }
  .boss-slide .battle-modes p { font-size: var(--body); margin-top: 1cqw; }
  .boss-slide .mock-duration { margin-top: 5cqw; }
  .chapter-finale .lesson-intro .bank-count { gap: 2cqw; }
  .chapter-finale .lesson-details .lesson-mascot { position: static; width: 40cqw; height: 36cqw; margin: 4cqw auto 0; opacity: 1; }
  .chapter-finale .next-world-ticket { padding: 4cqw; }
  .chapter-cover .cover-layout { gap: 7cqw; }
  .chapter-cover h1 { font-size: 12.4cqw; }
  .chapter-cover .cover-mascot { width: 78cqw; height: 81cqw; bottom: 18cqw; left: 50%; }
  .chapter-cover .cover-art .app-icon { width: 19cqw; top: 15cqw; left: -1cqw; }
  .dual .paired-shots { justify-content: center; gap: 4cqw; }
}
@media(prefers-reduced-motion:reduce) { .is-active .game-sprite { animation: none; } }
@media print { body { background: white; } .deck { border: 0; border-radius: 0; box-shadow: none; } .slide { border-radius: 0; } .game-sprite { animation: none!important; } }