/*
 * Lads English shared visual token system · V269.4
 * Loaded after the legacy lesson and game component stylesheets so both
 * experiences resolve through one palette, spacing and device layer.
 */
:root {
  color-scheme: light dark;
  --accent-primary: #c65376;
  --accent-primary-deep: #174a7c;
  --accent-nature: #5e845a;
  --accent-weather: #66869a;
  --accent-feelings: #7d6bb2;
  --accent-night: #293568;
  --accent-gold: #d3a34c;
  --accent-rose-soft: #f2b7c9;
  --private-bg: #fbf6f1;
  --private-paper: #fffdf9;
  --private-surface: rgba(255, 253, 249, .96);
  --private-soft: #fff6f7;
  --private-ink: #34242c;
  --private-muted: #735f68;
  --private-line: rgba(92, 51, 68, .17);
  --private-shadow: 0 20px 55px rgba(66, 39, 49, .13);
  --private-radius: 24px;
  --private-safe-top: env(safe-area-inset-top, 0px);
  --private-safe-right: env(safe-area-inset-right, 0px);
  --private-safe-bottom: env(safe-area-inset-bottom, 0px);
  --private-safe-left: env(safe-area-inset-left, 0px);
  --private-header-height: 68px;
  --zone-accent: var(--accent-primary);
  --zone-accent-deep: var(--accent-primary-deep);
  --zone-soft: #fff0f4;
  --zone-glow: rgba(198, 83, 118, .18);

  /* Backwards-compatible aliases used by both existing component sheets. */
  --wine: var(--accent-primary-deep);
  --rose: var(--accent-primary);
  --rose-soft: var(--accent-rose-soft);
  --cream: var(--private-bg);
  --paper: var(--private-paper);
  --surface: var(--private-surface);
  --surface-soft: var(--private-soft);
  --ink: var(--private-ink);
  --muted: var(--private-muted);
  --line: var(--private-line);
  --gold: var(--accent-gold);
  --leaf: var(--accent-nature);
  --leaf-bright: #7ea274;
  --shadow: var(--private-shadow);
  --radius: var(--private-radius);
  --safe-bottom: var(--private-safe-bottom);
  --game-green: var(--accent-nature);
  --game-green-dark: #416b47;
  --game-blue: var(--accent-weather);
  --game-purple: var(--accent-feelings);
  --game-pink: var(--accent-primary);
  --game-gold: var(--accent-gold);
  --game-cream: var(--private-bg);
  --game-card: var(--private-paper);
  --game-soft: var(--private-soft);
  --game-line: var(--private-line);
  --game-shadow: var(--private-shadow);
  --text-primary: var(--private-ink);
  --text-secondary: #57454d;
  --text-support: var(--private-muted);
  --learning-note-bg-start: #174a7c;
  --learning-note-bg-end: #1b7080;
  --learning-note-text: #fff9fb;
  --learning-note-support: #ffeaf1;
  --learning-note-accent: #ffd0df;
  --progress-emphasis: #7b1d40;
  --accent-text: #9d315b;
  --zone-accent-text: var(--zone-accent-deep);
  --feedback-success-text: #56734b;
  --feedback-error-text: #a3264e;
  --complete-button-start: #4c673f;
  --complete-button-end: #59734b;
  --complete-button-text: #ffffff;
}

html[data-theme-resolved="dark"] {
  --accent-primary: #e18aa6;
  --accent-primary-deep: #b85e7d;
  --accent-nature: #8db386;
  --accent-weather: #8cabbc;
  --accent-feelings: #aaa0d2;
  --accent-night: #7f91ce;
  --accent-gold: #e3bd6c;
  --accent-rose-soft: #704354;
  --private-bg: #191719;
  --private-paper: #2b2629;
  --private-surface: rgba(43, 38, 41, .97);
  --private-soft: #352d31;
  --private-ink: #fff4f7;
  --private-muted: #d4c3ca;
  --private-line: rgba(255, 231, 239, .15);
  --private-shadow: 0 22px 64px rgba(0, 0, 0, .28);
  --zone-soft: #3a2930;
  --zone-glow: rgba(225, 138, 166, .18);
  --game-green-dark: #b9ddb0;
  --text-secondary: #eadce1;
  --learning-note-bg-start: #573141;
  --learning-note-bg-end: #7b3f59;
  --learning-note-text: #fff8fb;
  --learning-note-support: #f7e9ee;
  --learning-note-accent: #ffe0eb;
  --progress-emphasis: #ffb7cf;
  --accent-text: #f0a3bd;
  --zone-accent-text: #f0a3bd;
  --feedback-success-text: #b9ddb0;
  --feedback-error-text: #ff9fbd;
}

/* Selectable Rice Village palette: young rice, harvest gold and warm paper. */
html[data-theme-resolved="village"] {
  color-scheme: light;
  --accent-primary: #b76a58;
  --accent-primary-deep: #355e3b;
  --accent-nature: #527d43;
  --accent-weather: #66877d;
  --accent-feelings: #75806a;
  --accent-night: #4c5a3f;
  --accent-gold: #c79a2f;
  --accent-rose-soft: #ecd2bd;
  --private-bg: #f3f0dc;
  --private-paper: #fffdf0;
  --private-surface: rgba(255, 253, 240, .97);
  --private-soft: #edf3df;
  --private-ink: #253620;
  --private-muted: #61705a;
  --private-line: rgba(53, 94, 59, .20);
  --private-shadow: 0 22px 58px rgba(51, 74, 40, .16);
  --zone-accent: var(--accent-nature);
  --zone-accent-deep: #315737;
  --zone-soft: #f0f2d7;
  --zone-glow: rgba(199, 154, 47, .19);
  --leaf-bright: #78a35d;
  --soil: #9b7048;
  --game-green-dark: #315737;
  --text-secondary: #43533e;
  --text-pronunciation: #4f6f45;
  --panel-solid: #fffdf0;
  --panel-soft: #f4f3df;
  --panel-raised: #fffff8;
  --focus-ring: #527d43;
  --button-primary-start: #315737;
  --button-primary-end: #3f662f;
  --button-primary-text: #ffffff;
  --learning-note-bg-start: #294b31;
  --learning-note-bg-end: #3f663a;
  --learning-note-text: #fffdf0;
  --learning-note-support: #f3f5e5;
  --learning-note-accent: #f4d88a;
  --progress-emphasis: #315737;
  --accent-text: #315737;
  --zone-accent-text: #315737;
  --feedback-success-text: #416735;
  --feedback-error-text: #8f3249;
}

/* Selectable Beach palette (internal compatibility ID: pattaya). */
html[data-theme-resolved="pattaya"] {
  color-scheme: light;
  --accent-primary: #df7767;
  --accent-primary-deep: #225b76;
  --accent-nature: #4d8b70;
  --accent-weather: #469dcc;
  --accent-feelings: #7185c4;
  --accent-night: #274f78;
  --accent-gold: #d4a64a;
  --accent-rose-soft: #f4c2ae;
  --private-bg: #eaf6f8;
  --private-paper: #fffdf6;
  --private-surface: rgba(255, 253, 246, .97);
  --private-soft: #edf8f8;
  --private-ink: #173b4d;
  --private-muted: #5a7480;
  --private-line: rgba(34, 91, 118, .19);
  --private-shadow: 0 22px 60px rgba(27, 86, 111, .16);
  --zone-accent: var(--accent-weather);
  --zone-accent-deep: #225b76;
  --zone-soft: #e7f7fb;
  --zone-glow: rgba(70, 157, 204, .20);
  --leaf-bright: #70a88c;
  --soil: #b88a5f;
  --game-green-dark: #226d75;
  --text-secondary: #365a69;
  --text-pronunciation: #276f8f;
  --panel-solid: #fffdf6;
  --panel-soft: #eef9fa;
  --panel-raised: #ffffff;
  --focus-ring: #277ea7;
  --button-primary-start: #225b76;
  --button-primary-end: #176f7d;
  --button-primary-text: #ffffff;
  --learning-note-bg-start: #17485d;
  --learning-note-bg-end: #176f7d;
  --learning-note-text: #fffdf6;
  --learning-note-support: #e9fbff;
  --learning-note-accent: #ffe0a6;
  --progress-emphasis: #225b76;
  --accent-text: #225b76;
  --zone-accent-text: #225b76;
  --feedback-success-text: #276b59;
  --feedback-error-text: #98394b;
}

/* V243: keep the personal lesson note readable on every selectable theme. */
.lesson-aside .learning-note {
  color: var(--learning-note-text);
  background: linear-gradient(155deg, var(--learning-note-bg-start), var(--learning-note-bg-end));
  border-color: color-mix(in srgb, var(--learning-note-accent) 32%, transparent);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--learning-note-bg-start) 28%, transparent);
}
.lesson-aside .learning-note h2 {
  color: var(--learning-note-text);
}
.lesson-aside .learning-note .eyebrow {
  color: var(--learning-note-accent);
}
.lesson-aside .learning-note p[lang="th"],
.lesson-aside .learning-note .instruction-english {
  color: var(--learning-note-support) !important;
}
.mini-progress .rice-progress-copy strong {
  color: var(--progress-emphasis);
}

body[data-visual-zone="weather-care"],
.game-portal [data-zone="weather-care"] {
  --zone-accent: var(--accent-weather);
  --zone-accent-deep: #3e6378;
  --zone-soft: #edf4f7;
  --zone-glow: rgba(102, 134, 154, .20);
}
body[data-visual-zone="farm-routine"],
.game-portal [data-zone="farm-routine"] {
  --zone-accent: var(--accent-nature);
  --zone-accent-deep: #3f6947;
  --zone-soft: #eef6e9;
  --zone-glow: rgba(94, 132, 90, .20);
}
body[data-visual-zone="feelings-trust"],
.game-portal [data-zone="feelings-trust"] {
  --zone-accent: var(--accent-feelings);
  --zone-accent-deep: #584b91;
  --zone-soft: #f0effa;
  --zone-glow: rgba(125, 107, 178, .20);
}
body[data-visual-zone="night-festival"],
.game-portal [data-zone="night-festival"] {
  --zone-accent: var(--accent-gold);
  --zone-accent-deep: var(--accent-night);
  --zone-soft: #edeffc;
  --zone-glow: rgba(41, 53, 104, .22);
}
body[data-visual-zone="travel-city"],
.game-portal [data-zone="travel-city"] {
  --zone-accent: #4f8ea6;
  --zone-accent-deep: #3a5d7b;
  --zone-soft: #edf5f8;
  --zone-glow: rgba(79, 142, 166, .19);
}

html[data-theme-resolved="dark"] body[data-visual-zone],
html[data-theme-resolved="dark"] .game-portal [data-zone] {
  --zone-soft: color-mix(in srgb, var(--zone-accent-deep) 28%, var(--private-paper));
}

body.lads-portal {
  color: var(--private-ink);
  background:
    radial-gradient(circle at 12% 4%, var(--zone-glow), transparent 29%),
    radial-gradient(circle at 88% 12%, rgba(211, 163, 76, .13), transparent 25%),
    linear-gradient(180deg, color-mix(in srgb, var(--private-bg) 93%, var(--zone-soft)), var(--private-bg));
}

.lads-topbar,
.game-topbar {
  padding-top: calc(10px + var(--private-safe-top));
  padding-right: max(clamp(14px, 4vw, 48px), var(--private-safe-right));
  padding-left: max(clamp(14px, 4vw, 48px), var(--private-safe-left));
  background: color-mix(in srgb, var(--private-paper) 90%, transparent);
  border-color: var(--private-line);
}

.lads-topbar a:focus-visible,
.lads-topbar button:focus-visible,
.lads-topbar select:focus-visible,
.game-topbar a:focus-visible,
.game-topbar button:focus-visible,
.game-topbar select:focus-visible,
.stat-tab:focus-visible,
.unit-node:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--zone-accent) 62%, white);
  outline-offset: 3px;
}

.course-hero,
.lesson-hero,
.game-hero {
  border-color: color-mix(in srgb, var(--zone-accent) 30%, var(--private-line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--private-paper) 96%, var(--zone-soft)), color-mix(in srgb, var(--zone-soft) 76%, var(--private-paper)));
}

.lesson-hero:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: linear-gradient(var(--zone-accent), var(--zone-accent-deep));
}

.lesson-hero h2,
.card-number,
.eyebrow,
.unit-copy small {
  color: var(--zone-accent-text);
}

.lesson-hero > *,
.lesson-hero-copy,
.game-hero > *,
.game-hero-copy {
  min-width: 0;
}
.lesson-hero h1,
.game-hero h1 {
  overflow-wrap: anywhere;
}
.lesson-topic-art {
  width: 100%;
  max-width: 100%;
}

.lesson-topic-art img,
.journey-card[data-visual-zone] .journey-card-visual img,
.game-portal [data-zone] .unit-art img {
  filter: saturate(.92) contrast(.96);
}

.lesson-topic-art:after,
.journey-card-visual:after,
.unit-art:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, transparent 45%, var(--zone-glow));
  mix-blend-mode: multiply;
}

.lesson-topic-art,
.journey-card-visual,
.unit-art {
  position: relative;
  isolation: isolate;
}

.journey-card {
  --zone-accent: var(--accent-primary);
  --zone-accent-deep: var(--accent-primary-deep);
  --zone-soft: #fff0f4;
  --zone-glow: rgba(198, 83, 118, .18);
  border-top: 4px solid var(--zone-accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--private-paper) 96%, var(--zone-soft)), var(--private-paper));
  content-visibility: auto;
  contain-intrinsic-size: 315px;
}

.journey-card[data-visual-zone="weather-care"] {
  --zone-accent: var(--accent-weather);
  --zone-accent-deep: #3e6378;
  --zone-soft: #edf4f7;
  --zone-glow: rgba(102, 134, 154, .20);
}
.journey-card[data-visual-zone="farm-routine"] {
  --zone-accent: var(--accent-nature);
  --zone-accent-deep: #3f6947;
  --zone-soft: #eef6e9;
  --zone-glow: rgba(94, 132, 90, .20);
}
.journey-card[data-visual-zone="feelings-trust"] {
  --zone-accent: var(--accent-feelings);
  --zone-accent-deep: #584b91;
  --zone-soft: #f0effa;
  --zone-glow: rgba(125, 107, 178, .20);
}
.journey-card[data-visual-zone="night-festival"] {
  --zone-accent: var(--accent-gold);
  --zone-accent-deep: var(--accent-night);
  --zone-soft: #edeffc;
  --zone-glow: rgba(41, 53, 104, .22);
}
.journey-card[data-visual-zone="travel-city"] {
  --zone-accent: #4f8ea6;
  --zone-accent-deep: #3a5d7b;
  --zone-soft: #edf5f8;
  --zone-glow: rgba(79, 142, 166, .19);
}

.journey-card:hover {
  border-color: var(--zone-accent);
}

/* Each learning activity has a recognizable but quiet identity. */
.content-card {
  position: relative;
  overflow: clip;
}
.content-card:before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--activity-accent, var(--zone-accent));
  opacity: .9;
}
.instruction-card { --activity-accent: var(--accent-weather); }
.vocabulary-card { --activity-accent: var(--accent-primary); }
.grammar-card { --activity-accent: var(--accent-gold); }
.model-card { --activity-accent: #4f8ea6; }
.dialogue-section { --activity-accent: var(--accent-feelings); }
.quiz-card { --activity-accent: var(--accent-nature); }
.builder-card { --activity-accent: #d88451; }
.speaking-card { --activity-accent: var(--accent-primary); }

.word-card,
.sentence-card,
.dialogue-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--private-paper) 96%, var(--zone-soft)), var(--private-paper));
}

.primary-button,
.complete-button,
.quest-button.primary {
  background: linear-gradient(135deg, var(--zone-accent-deep), var(--zone-accent));
}

.private-mascot {
  display: block;
  width: clamp(76px, 9vw, 118px);
  height: auto;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
  border-radius: 26px;
  box-shadow: 0 12px 28px rgba(78, 46, 55, .14);
}

.game-hero-mascot {
  position: absolute;
  right: clamp(14px, 3vw, 32px);
  bottom: 14px;
  z-index: 4;
  width: clamp(94px, 13vw, 150px);
  border-radius: 30px;
  transform: rotate(2deg);
}

.stat-tab {
  appearance: none;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--game-line);
  border-radius: 20px;
  background: var(--game-card);
  box-shadow: 0 9px 25px rgba(49, 32, 39, .07);
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}
.stat-tab > span { grid-row: 1 / 3; font-size: 2rem; }
.stat-tab strong { color: var(--text-primary); font-size: 1.35rem; font-weight: 950; }
.stat-tab small { color: var(--text-support); font-size: .78rem; font-weight: 800; }
.stat-tab:hover {
  transform: translateY(-2px);
  border-color: var(--stat-color, var(--zone-accent));
}

.stat-dialog {
  width: min(660px, calc(100% - 24px));
  max-height: min(78dvh, 760px);
  padding: 0;
  border: 1px solid var(--private-line);
  border-radius: 28px;
  color: var(--private-ink);
  background: var(--private-paper);
  box-shadow: 0 32px 100px rgba(28, 21, 24, .4);
}
.stat-dialog::backdrop {
  background: rgba(25, 20, 23, .60);
  backdrop-filter: blur(6px);
}
.stat-dialog-shell {
  position: relative;
  padding: clamp(24px, 5vw, 40px);
}
.stat-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--private-line);
  border-radius: 14px;
  color: inherit;
  background: var(--private-soft);
  cursor: pointer;
}
.stat-dialog h2 {
  margin: .2rem 52px .3rem 0;
  font-size: clamp(1.65rem, 5vw, 2.25rem);
}
.stat-dialog-lead {
  margin: 0 0 20px;
  color: var(--private-muted);
}
.stat-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
}
.stat-day {
  display: grid;
  place-items: center;
  min-height: 62px;
  padding: 7px 2px;
  border: 1px solid var(--private-line);
  border-radius: 14px;
  background: var(--private-soft);
}
.stat-day small,
.stat-day strong { display: block; }
.stat-day small { font-size: .72rem; }
.stat-day.is-active {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 14%, var(--private-paper));
}
.stat-level {
  display: grid;
  gap: 12px;
  padding: 20px;
  border-radius: 20px;
  background: var(--private-soft);
}
.stat-level-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.stat-level-track {
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-feelings) 17%, var(--private-paper));
}
.stat-level-track span {
  display: block;
  width: var(--level-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-feelings), var(--accent-weather));
}
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.achievement-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--private-line);
  border-radius: 17px;
  background: var(--private-soft);
}
.achievement-card.is-locked {
  filter: grayscale(.85);
  opacity: .54;
}
.achievement-card > span { font-size: 1.7rem; }
.achievement-card strong,
.achievement-card small { display: block; }
.achievement-card small { color: var(--private-muted); }
.word-collection {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 46dvh;
  overflow: auto;
  padding: 3px;
}
.word-chip {
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--accent-weather) 35%, var(--private-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-weather) 10%, var(--private-paper));
  font-weight: 800;
}
.word-chip small {
  color: var(--private-muted);
  font-weight: 650;
}

.world-divider {
  --zone-accent: var(--accent-primary);
  --zone-accent-deep: var(--accent-primary-deep);
  --zone-soft: #fff0f4;
  --zone-glow: rgba(198, 83, 118, .18);
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr auto;
  grid-template-areas: "world-art world-copy world-mascot";
  gap: 14px;
  align-items: center;
  width: min(720px, 100%);
  margin: 24px auto 8px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--zone-accent) 35%, var(--private-line));
  border-radius: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--zone-soft) 88%, var(--private-paper)), var(--private-paper));
  box-shadow: 0 10px 26px var(--zone-glow);
}
.world-divider:first-child { margin-top: 0; }
.world-art {
  grid-area: world-art;
  width: 92px;
  height: 68px;
  margin: 0;
  overflow: hidden;
  border-radius: 15px;
}
.world-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.world-copy {
  grid-area: world-copy;
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}
.world-copy small,
.world-copy strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.world-copy small {
  color: var(--zone-accent-text);
  font-size: .75rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.world-copy strong {
  font-size: 1.16rem;
}
.world-lock-summary {
  display: block;
  margin-top: 5px;
  color: var(--private-muted);
  font-size: .78rem;
  font-weight: 800;
}
.world-mascot {
  grid-area: world-mascot;
  width: 66px;
  height: 66px;
  border-radius: 18px;
  object-fit: cover;
}

.path-unit {
  --zone-accent: var(--accent-nature);
  --zone-accent-deep: #416b47;
  --zone-soft: #eef6e9;
  --zone-glow: rgba(94, 132, 90, .18);
}
.path-unit .unit-node {
  background: linear-gradient(145deg, color-mix(in srgb, var(--zone-accent) 74%, white), var(--zone-accent));
}
.path-unit.is-unlocked .unit-copy {
  border-color: color-mix(in srgb, var(--zone-accent) 35%, var(--private-line));
}

.answer-panel.is-celebrating .answer-status-icon {
  animation: success-pop .56s cubic-bezier(.18, 1.45, .42, 1);
}
.answer-panel.is-celebrating:after,
.result-card.is-celebrating:after {
  content: "✦  ★  ✦";
  position: absolute;
  top: 10px;
  right: 18px;
  color: var(--accent-gold);
  font-size: 1.25rem;
  animation: celebration-rise .9s ease-out both;
  pointer-events: none;
}
.result-card { position: relative; overflow: clip; }
.result-card.is-celebrating .result-stars {
  animation: success-pop .7s cubic-bezier(.18, 1.45, .42, 1);
}
@keyframes success-pop {
  0% { transform: scale(.55) rotate(-8deg); opacity: .2; }
  70% { transform: scale(1.14) rotate(3deg); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes celebration-rise {
  from { opacity: 0; transform: translateY(20px) scale(.7); }
  45% { opacity: 1; }
  to { opacity: 0; transform: translateY(-20px) scale(1.12); }
}

/* V14.7 four-theme surfaces. Light and Night remain untouched above. */
html[data-theme-resolved="village"] body.lads-portal {
  background:
    radial-gradient(circle at 11% 5%, rgba(120, 163, 93, .24), transparent 28%),
    radial-gradient(circle at 89% 12%, rgba(199, 154, 47, .22), transparent 26%),
    linear-gradient(180deg, #f5f1d8 0%, #f4f3df 46%, #eef2dc 100%);
}
html[data-theme-resolved="pattaya"] body.lads-portal {
  background:
    radial-gradient(circle at 84% 8%, rgba(255, 205, 116, .28), transparent 24%),
    radial-gradient(circle at 12% 7%, rgba(79, 177, 216, .23), transparent 27%),
    linear-gradient(180deg, #e5f6fd 0%, #eefafa 48%, #fff5dc 100%);
}

html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) :is(.lads-topbar, .game-topbar) {
  background: color-mix(in srgb, var(--private-paper) 88%, transparent);
  border-color: var(--private-line);
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) :is(.theme-control, .theme-control select) {
  color: var(--private-ink);
  border-color: color-mix(in srgb, var(--zone-accent-deep) 25%, var(--private-line));
  background: color-mix(in srgb, var(--private-paper) 92%, var(--zone-soft));
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) :is(.course-hero, .lesson-hero, .game-hero) {
  border-color: color-mix(in srgb, var(--zone-accent) 30%, var(--private-line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--private-paper) 96%, var(--zone-soft)), color-mix(in srgb, var(--zone-soft) 74%, var(--private-paper)));
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) :is(
  .personal-greeting,
  .content-card,
  .aside-card,
  .source-merge article,
  .word-card,
  .sentence-card,
  .dialogue-card,
  .gate-card,
  .daily-phrase-card,
  .practice-card,
  .path-section,
  .unit-copy,
  .challenge-card,
  .result-card,
  .help-dialog
) {
  color: var(--private-ink);
  border-color: var(--private-line);
  background: var(--private-surface);
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) :is(.word-card, .sentence-card, .dialogue-card, .quiz-question label) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--private-paper) 95%, var(--zone-soft)), var(--private-paper));
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) :is(.grammar-card, .daily-phrase-main, .daily-phrase-insights section) {
  border-color: color-mix(in srgb, var(--accent-gold) 34%, var(--private-line));
  background: color-mix(in srgb, var(--accent-gold) 9%, var(--private-paper));
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) :is(.speaking-card, .teacher-structure) {
  border-color: color-mix(in srgb, var(--accent-primary) 25%, var(--private-line));
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--private-paper));
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) :is(
  .soft-button,
  .quiet-button,
  .speak-button,
  .builder-answer,
  .builder-answer button,
  .word-bank button,
  .lesson-navigation a
) {
  color: var(--zone-accent-deep);
  border-color: var(--private-line);
  background: var(--private-paper);
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) :is(.primary-button, .complete-button, .quest-button.primary, .gate-form > button, .mobile-action-bar .primary) {
  color: var(--button-primary-text);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
  background: linear-gradient(135deg, var(--button-primary-start), var(--button-primary-end));
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) .mobile-action-bar {
  border-color: var(--private-line);
  background: color-mix(in srgb, var(--private-paper) 94%, transparent);
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) .mobile-action-bar :is(a, button) {
  color: var(--zone-accent-deep);
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) .gate-form input {
  color: var(--private-ink) !important;
  -webkit-text-fill-color: var(--private-ink);
  border-color: var(--private-line);
  background: var(--private-paper) !important;
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) :is(.notice, .magic-link-status) {
  color: color-mix(in srgb, var(--private-ink) 82%, #65410f);
  border-color: color-mix(in srgb, var(--accent-gold) 44%, var(--private-line));
  background: color-mix(in srgb, var(--accent-gold) 14%, var(--private-paper));
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) .notice.error {
  color: #782c3f;
  border-color: rgba(194, 80, 105, .36);
  background: #fff1f3;
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) .pwa-toast {
  color: #fff;
  background: var(--zone-accent-deep);
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) .game-entry-card {
  border-color: color-mix(in srgb, var(--zone-accent) 31%, var(--private-line));
  background: linear-gradient(120deg, var(--zone-soft), var(--private-paper) 58%, color-mix(in srgb, var(--accent-gold) 9%, var(--private-paper)));
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) .game-link-button {
  color: var(--zone-accent-deep);
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) :is(.game-hero h1, .game-hero h1 span) {
  color: var(--zone-accent-deep);
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) .game-hero-copy > p:not(.game-kicker) {
  color: var(--text-secondary);
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) :is(.game-kicker, .challenge-type, .unit-copy small) {
  color: var(--zone-accent-deep);
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) :is(.stat-tab, .mobile-stat-tabs, .stat-dialog) {
  color: var(--private-ink);
  border-color: var(--private-line);
  background: var(--private-paper);
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) .round-progress {
  background: color-mix(in srgb, var(--zone-accent) 16%, var(--private-paper));
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) .answer-option.is-selected {
  color: var(--private-ink);
  border-color: var(--zone-accent);
  background: color-mix(in srgb, var(--zone-accent) 13%, var(--private-paper));
  box-shadow: 0 4px 0 var(--zone-accent);
}
html:is([data-theme-resolved="village"], [data-theme-resolved="pattaya"]) .game-audio-button.slow {
  color: #73550d;
  border-color: color-mix(in srgb, var(--accent-gold) 46%, var(--private-line));
  background: color-mix(in srgb, var(--accent-gold) 15%, var(--private-paper));
}

/* Rice Village keeps a green path with gold harvest cues. */
html[data-theme-resolved="village"] :is(.journey-card, .world-divider, .path-unit) {
  --zone-accent: #5d8648;
  --zone-accent-deep: #315737;
  --zone-soft: #eff3d8;
  --zone-glow: rgba(199, 154, 47, .18);
}
html[data-theme-resolved="village"] :is(.game-entry-world, .hero-emblem) {
  background: linear-gradient(145deg, #7da258, #3f713f 58%, #c69a35);
}
html[data-theme-resolved="village"] .game-hero:before {
  background: linear-gradient(180deg, #a9cb79, #6e9b55 68%, #c49a3a);
}
html[data-theme-resolved="village"] .hero-world:after {
  background: linear-gradient(180deg, rgba(246, 232, 177, .05), rgba(47, 84, 45, .40));
}
html[data-theme-resolved="village"] :is(.daily-phrase-day, .combo-pill, .practice-icon) {
  color: #624a0e;
  background: #f5e8b9;
}

/* Beach uses a sky-to-sea path and quiet coral/sand details. */
html[data-theme-resolved="pattaya"] :is(.journey-card, .world-divider, .path-unit) {
  --zone-accent: #469dcc;
  --zone-accent-deep: #225b76;
  --zone-soft: #e8f7fa;
  --zone-glow: rgba(70, 157, 204, .20);
}
html[data-theme-resolved="pattaya"] :is(.game-entry-world, .hero-emblem) {
  background: linear-gradient(145deg, #75cbe1, #3499b8 54%, #e0b35d);
}
html[data-theme-resolved="pattaya"] .game-hero:before {
  background: linear-gradient(180deg, #83d3dc, #4aa8b6 66%, #e2bd72);
}
html[data-theme-resolved="pattaya"] .hero-world:after {
  background: linear-gradient(180deg, rgba(143, 220, 241, .05), rgba(27, 92, 119, .42));
}
html[data-theme-resolved="pattaya"] .path-unit.is-unlocked .unit-node {
  color: #fff;
  background: linear-gradient(145deg, #76c7df, #398fab);
  box-shadow: 0 8px 0 #22677d, 0 13px 25px rgba(33, 105, 132, .24);
}
html[data-theme-resolved="pattaya"] .path-unit.is-current .unit-node {
  animation-name: pattaya-node-pulse;
}
@keyframes pattaya-node-pulse {
  50% { box-shadow: 0 8px 0 #22677d, 0 0 0 11px rgba(70, 157, 204, .17), 0 13px 25px rgba(33, 105, 132, .24); }
}
html[data-theme-resolved="pattaya"] :is(.daily-phrase-day, .combo-pill, .practice-icon) {
  color: #744437;
  background: #fde4d7;
}
html[data-theme-resolved="pattaya"] .listen-audio-controls .game-audio-button:not(.slow) {
  color: #174e68;
  border-color: rgba(56, 144, 181, .30);
  background: linear-gradient(145deg, #e7f8fd, #c8ebf2);
  box-shadow: 0 6px 0 #78b9cc;
}

/* Topic variation still operates inside either new atmosphere. */
html[data-theme-resolved="village"] :is(body[data-visual-zone="weather-care"], .game-portal [data-zone="weather-care"], .journey-card[data-visual-zone="weather-care"]) {
  --zone-accent: #66877d;
  --zone-accent-deep: #3f6961;
  --zone-soft: #e7f0e7;
  --zone-glow: rgba(102, 135, 125, .19);
}
html[data-theme-resolved="village"] :is(body[data-visual-zone="farm-routine"], .game-portal [data-zone="farm-routine"], .journey-card[data-visual-zone="farm-routine"]) {
  --zone-accent: #527d43;
  --zone-accent-deep: #315737;
  --zone-soft: #eaf2d9;
  --zone-glow: rgba(82, 125, 67, .20);
}
html[data-theme-resolved="village"] :is(body[data-visual-zone="feelings-trust"], .game-portal [data-zone="feelings-trust"], .journey-card[data-visual-zone="feelings-trust"]) {
  --zone-accent: #7b856d;
  --zone-accent-deep: #56614c;
  --zone-soft: #f0f0df;
  --zone-glow: rgba(123, 133, 109, .18);
}
html[data-theme-resolved="village"] :is(body[data-visual-zone="night-festival"], .game-portal [data-zone="night-festival"], .journey-card[data-visual-zone="night-festival"]) {
  --zone-accent: #c79a2f;
  --zone-accent-deep: #4c5a3f;
  --zone-soft: #f6edcb;
  --zone-glow: rgba(199, 154, 47, .22);
}
html[data-theme-resolved="village"] :is(body[data-visual-zone="travel-city"], .game-portal [data-zone="travel-city"], .journey-card[data-visual-zone="travel-city"]) {
  --zone-accent: #6f8b68;
  --zone-accent-deep: #455f48;
  --zone-soft: #eaf0df;
  --zone-glow: rgba(111, 139, 104, .18);
}

html[data-theme-resolved="pattaya"] :is(body[data-visual-zone="weather-care"], .game-portal [data-zone="weather-care"], .journey-card[data-visual-zone="weather-care"]) {
  --zone-accent: #469dcc;
  --zone-accent-deep: #225b76;
  --zone-soft: #e5f5fc;
  --zone-glow: rgba(70, 157, 204, .21);
}
html[data-theme-resolved="pattaya"] :is(body[data-visual-zone="farm-routine"], .game-portal [data-zone="farm-routine"], .journey-card[data-visual-zone="farm-routine"]) {
  --zone-accent: #4d8b70;
  --zone-accent-deep: #326753;
  --zone-soft: #e9f5ed;
  --zone-glow: rgba(77, 139, 112, .19);
}
html[data-theme-resolved="pattaya"] :is(body[data-visual-zone="feelings-trust"], .game-portal [data-zone="feelings-trust"], .journey-card[data-visual-zone="feelings-trust"]) {
  --zone-accent: #7185c4;
  --zone-accent-deep: #4e609a;
  --zone-soft: #eef1fb;
  --zone-glow: rgba(113, 133, 196, .19);
}
html[data-theme-resolved="pattaya"] :is(body[data-visual-zone="night-festival"], .game-portal [data-zone="night-festival"], .journey-card[data-visual-zone="night-festival"]) {
  --zone-accent: #d4a64a;
  --zone-accent-deep: #274f78;
  --zone-soft: #f8efd3;
  --zone-glow: rgba(212, 166, 74, .22);
}
html[data-theme-resolved="pattaya"] :is(body[data-visual-zone="travel-city"], .game-portal [data-zone="travel-city"], .journey-card[data-visual-zone="travel-city"]) {
  --zone-accent: #3da0aa;
  --zone-accent-deep: #236774;
  --zone-soft: #e4f5f4;
  --zone-glow: rgba(61, 160, 170, .20);
}

/* iPad: keep the private navigation to one compact row. */
@media (min-width: 701px) and (max-width: 1024px) {
  :root { --private-header-height: 60px; }
  .lads-topbar {
    display: grid;
    grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
    gap: 12px;
    min-height: calc(var(--private-header-height) + var(--private-safe-top));
    padding-top: calc(7px + var(--private-safe-top));
    padding-bottom: 7px;
  }
  .lads-topbar .private-brand {
    white-space: nowrap;
    font-size: .9rem;
  }
  .lads-topbar nav {
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
    gap: 3px;
  }
  .lads-topbar nav a,
  .lads-topbar .topbar-install {
    min-height: 40px;
    padding: 7px 8px;
    font-size: .76rem;
    white-space: nowrap;
  }
  .lads-topbar .theme-control {
    min-width: 0;
    white-space: nowrap;
  }
  .lads-topbar .theme-control > span { display: none; }
  .lads-topbar .theme-control select {
    max-width: 92px;
    min-height: 40px;
    font-size: .76rem;
  }
  .game-topbar {
    min-height: calc(var(--private-header-height) + var(--private-safe-top));
    padding-top: calc(7px + var(--private-safe-top));
    padding-bottom: 7px;
  }
}

/* iPhone 16 Pro Max and other large phones up to 480 CSS pixels. */
@media (max-width: 700px) {
  :root { --private-header-height: 58px; }
  body.lads-portal :is(input, select, textarea),
  body.lads-login-page :is(input, select, textarea) {
    font-size: 16px;
  }
  .lads-topbar,
  .game-topbar {
    min-height: calc(var(--private-header-height) + var(--private-safe-top));
    padding-top: calc(7px + var(--private-safe-top));
  }
  .lesson-hero > .complete-button { display: none; }
  .game-portal .mobile-stat-tabs {
    top: calc(var(--private-header-height) + var(--private-safe-top));
  }
  .lads-topbar .theme-control select,
  .game-topbar .game-theme-control select {
    max-width: 116px;
  }
  .game-portal .mobile-stat-tabs .stat-tab {
    min-height: 64px;
    cursor: pointer;
  }
  .game-portal .mobile-stat-tabs .stat-tab small,
  .game-portal .challenge-topic-art figcaption,
  .game-portal .unit-copy small {
    font-size: 12px;
    line-height: 1.25;
  }
  .game-portal .stat-th { display: none; }
  .game-hero-mascot {
    right: 12px;
    bottom: 10px;
    width: 78px;
    border-radius: 21px;
  }
  .game-hero-copy { padding-right: 93px; }
  .world-divider {
    grid-template-columns: 82px minmax(0, 1fr) 52px;
    gap: 14px;
    margin: 32px auto 12px;
    padding: 12px 14px;
    border-radius: 18px;
  }
  .world-art { width: 82px; height: 62px; }
  .world-copy small { font-size: 12px; letter-spacing: .04em; }
  .world-copy strong { font-size: .93rem; line-height: 1.3; }
  .world-mascot { width: 48px; height: 48px; border-radius: 14px; }
  .world-divider.is-future-world {
    grid-template-columns: 68px minmax(0, 1fr) 44px;
    min-height: 88px;
    margin-block: 18px;
    padding: 10px 12px;
    opacity: .76;
    box-shadow: 0 6px 16px var(--zone-glow);
  }
  .world-divider.is-future-world .world-art { width: 68px; height: 52px; }
  .world-divider.is-future-world .world-mascot { width: 42px; height: 42px; }
  .world-divider.is-future-world .world-copy strong { font-size: .9rem; }
  .world-divider.is-future-world .world-lock-summary { font-size: 12px; }

  .quest-path .path-unit {
    position: relative;
    transform: translateX(var(--path-x-mobile, 0));
  }
  .quest-path .path-unit[data-has-link="true"] {
    padding-bottom: 90px;
  }
  .quest-path-links {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 0;
    display: block;
    width: 100%;
    max-width: none;
    overflow: visible;
    pointer-events: none;
  }
  .quest-path-link {
    fill: none;
    stroke: color-mix(in srgb, var(--zone-accent) 42%, var(--private-line));
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 1 14;
    vector-effect: non-scaling-stroke;
    opacity: .8;
  }
  .quest-path > .path-unit,
  .quest-path > .world-divider {
    z-index: 1;
  }

  .path-unit.is-future-compact {
    grid-template-columns: 1fr;
    width: 190px;
    gap: 3px;
    margin-block: -5px;
  }
  .path-unit.is-future-compact .unit-node {
    width: 66px;
    height: 58px;
    font-size: 1.42rem;
    box-shadow: 0 5px 0 #bac4bb, 0 9px 15px rgba(30, 47, 34, .10);
  }
  .path-unit.is-future-compact .unit-copy {
    padding: 2px 8px;
    opacity: .53;
  }
  .path-unit.is-future-compact .unit-art,
  .path-unit.is-future-compact .unit-copy > span:not(.unit-stars) {
    display: none;
  }
  .path-unit.is-future-compact .unit-copy strong {
    font-size: .8rem;
  }
  .path-unit.is-future-compact .unit-stars {
    font-size: .75rem !important;
  }

  .achievement-grid { grid-template-columns: 1fr; }
  .stat-dialog-shell { padding: 25px 17px 20px; }
  .stat-calendar { gap: 4px; }
  .stat-day { min-height: 56px; border-radius: 11px; }
}

@media (max-width: 480px) {
  .hero-actions > * {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 360px) {
  .lads-topbar .theme-control select,
  .game-topbar .game-theme-control select {
    max-width: 101px;
  }
  .quest-path .path-unit {
    transform: translateX(var(--path-x-small, 0));
  }
  .world-divider,
  .world-divider.is-future-world {
    grid-template-columns: 62px minmax(0, 1fr) 40px;
    gap: 10px;
    padding-inline: 10px;
  }
  .world-art,
  .world-divider.is-future-world .world-art {
    width: 62px;
    height: 48px;
  }
  .world-mascot,
  .world-divider.is-future-world .world-mascot {
    width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .answer-panel.is-celebrating .answer-status-icon,
  .answer-panel.is-celebrating:after,
  .result-card.is-celebrating:after,
  .result-card.is-celebrating .result-stars {
    animation: none !important;
  }
}

/*
 * V244 final-cascade safeguard.
 * The four-theme surface group above intentionally styles every .aside-card.
 * Keep this component override last so its dark panel and light copy always
 * resolve together instead of leaving pale learning-note text on a cream card.
 */
html[data-theme-resolved] body.lads-portal .lesson-aside .aside-card.learning-note {
  color: var(--learning-note-text) !important;
  background: var(--learning-note-bg-start) !important;
  background: linear-gradient(155deg, var(--learning-note-bg-start), var(--learning-note-bg-end)) !important;
  border-color: var(--learning-note-accent) !important;
  box-shadow: 0 18px 38px rgba(29, 48, 35, .22);
}
html[data-theme-resolved] body.lads-portal .lesson-aside .aside-card.learning-note h2 {
  color: var(--learning-note-text) !important;
  -webkit-text-fill-color: var(--learning-note-text);
}
html[data-theme-resolved] body.lads-portal .lesson-aside .aside-card.learning-note .eyebrow {
  color: var(--learning-note-accent) !important;
  -webkit-text-fill-color: var(--learning-note-accent);
}
html[data-theme-resolved] body.lads-portal .lesson-aside .aside-card.learning-note p[lang="th"],
html[data-theme-resolved] body.lads-portal .lesson-aside .aside-card.learning-note .instruction-english {
  color: var(--learning-note-support) !important;
  -webkit-text-fill-color: var(--learning-note-support);
}

/* V251.2 — compact, high-contrast friendly unit covers */
.curriculum-unit[data-unit-theme]{
  --unit-bg-1:#f8eee8;
  --unit-bg-2:#e9f2e3;
  --unit-accent:#70405a;
  --unit-accent-text:#70405a;
  --unit-title:#233b2d;
  --unit-copy:#476052;
  --unit-line:rgba(45,74,55,.16);
  margin:22px 0 32px;
  scroll-margin-top:88px;
}
.curriculum-unit[data-unit-theme="dawn-home"]{--unit-bg-1:#f9eadf;--unit-bg-2:#e6f1df;--unit-accent:#8a5b66;--unit-accent-text:#895a65;--unit-title:#294333;--unit-copy:#526c5b}
.curriculum-unit[data-unit-theme="sunrise-day"]{--unit-bg-1:#fff0cf;--unit-bg-2:#f7e1d6;--unit-accent:#a26036;--unit-accent-text:#8d542f;--unit-title:#4e442c;--unit-copy:#6b6048}
.curriculum-unit[data-unit-theme="cozy-cooking"]{--unit-bg-1:#fbe5d8;--unit-bg-2:#e6f2df;--unit-accent:#a6573e;--unit-accent-text:#995039;--unit-title:#354a36;--unit-copy:#596955}
.curriculum-unit[data-unit-theme="market-blue"]{--unit-bg-1:#e5f0f8;--unit-bg-2:#e1f1e9;--unit-accent:#376f91;--unit-accent-text:#366d8e;--unit-title:#244657;--unit-copy:#516b79}
.curriculum-unit[data-unit-theme="field-green"]{--unit-bg-1:#f0efc8;--unit-bg-2:#dfebcf;--unit-accent:#667f3e;--unit-accent-text:#556933;--unit-title:#3b4b27;--unit-copy:#5c6749}
.curriculum-unit[data-unit-theme="travel-sky"]{--unit-bg-1:#dfeefa;--unit-bg-2:#dff1ed;--unit-accent:#3379a0;--unit-accent-text:#2d6c8e;--unit-title:#234d61;--unit-copy:#4d6b79}
.curriculum-unit[data-unit-theme="future-indigo"]{--unit-bg-1:#e8e5f7;--unit-bg-2:#e4edf4;--unit-accent:#5d5b9e;--unit-accent-text:#5d5b9e;--unit-title:#38395e;--unit-copy:#5f627e}
.curriculum-unit[data-unit-theme="faith-gold"]{--unit-bg-1:#f3e8cf;--unit-bg-2:#eee5f5;--unit-accent:#8b6c39;--unit-accent-text:#7a5f32;--unit-title:#54452e;--unit-copy:#6e634a}
.curriculum-unit[data-unit-theme="campus-blue"]{--unit-bg-1:#f8dfe8;--unit-bg-2:#f8ead9;--unit-accent:#9a4267;--unit-accent-text:#9a4267;--unit-title:#652945;--unit-copy:#83556b}
.curriculum-unit[data-unit-theme="neighborhood-teal"]{--unit-bg-1:#dff3ef;--unit-bg-2:#e8f0dc;--unit-accent:#287b70;--unit-accent-text:#257268;--unit-title:#244d48;--unit-copy:#4f6d68}
.curriculum-unit[data-unit-theme="service-slate"]{--unit-bg-1:#e4ebf0;--unit-bg-2:#e8e5f3;--unit-accent:#526b82;--unit-accent-text:#4e667c;--unit-title:#344655;--unit-copy:#556570}
.curriculum-unit[data-unit-theme="journey-coral"]{--unit-bg-1:#f9e1d7;--unit-bg-2:#e4eef6;--unit-accent:#b25f4d;--unit-accent-text:#944f40;--unit-title:#654038;--unit-copy:#775d57}
.curriculum-unit[data-unit-theme="wellness-mint"]{--unit-bg-1:#dff2e4;--unit-bg-2:#edf0d8;--unit-accent:#4d8360;--unit-accent-text:#427153;--unit-title:#31513d;--unit-copy:#566d5d}
.curriculum-unit[data-unit-theme="confidence-plum"]{--unit-bg-1:#eee1f2;--unit-bg-2:#f5e4e9;--unit-accent:#805487;--unit-accent-text:#7d5284;--unit-title:#503757;--unit-copy:#725b76}

.curriculum-unit-heading.storybook-cover{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-height:0;
  margin:0 0 14px;
  padding:15px 17px;
  border:1px solid var(--unit-line);
  border-radius:22px;
  background:
    radial-gradient(circle at 92% 10%,rgba(255,255,255,.62),transparent 32%),
    linear-gradient(135deg,var(--unit-bg-1),var(--unit-bg-2));
  box-shadow:0 12px 28px rgba(45,30,37,.10);
  color:var(--unit-title);
}
.curriculum-unit-heading.storybook-cover::before{
  content:"";
  position:absolute;
  z-index:-1;
  right:-38px;
  bottom:-58px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--unit-accent) 16%,transparent),transparent 68%);
  pointer-events:none;
}
.curriculum-unit-heading.storybook-cover::after{display:none}
.curriculum-unit-heading.storybook-cover .curriculum-unit-number{
  display:grid;
  width:52px;
  height:52px;
  margin:0;
  place-items:center;
  border:1px solid rgba(255,255,255,.72);
  border-radius:17px;
  background:rgba(255,255,255,.70);
  box-shadow:0 8px 18px rgba(39,28,33,.12),inset 0 1px 0 rgba(255,255,255,.9);
  color:var(--unit-accent-text);
  font-size:1.55rem;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.curriculum-unit-copy{
  display:grid;
  min-width:0;
  gap:2px;
  align-content:center;
}
.curriculum-unit-heading.storybook-cover .eyebrow{
  margin:0 0 2px;
  color:var(--unit-accent-text)!important;
  -webkit-text-fill-color:var(--unit-accent-text)!important;
  font-size:.68rem;
  line-height:1.3;
  letter-spacing:.11em;
}
.curriculum-unit-heading.storybook-cover h3{
  margin:0;
  color:var(--unit-title)!important;
  -webkit-text-fill-color:var(--unit-title)!important;
  font-size:clamp(1.28rem,2.4vw,1.65rem);
  line-height:1.2;
  letter-spacing:-.025em;
}
.curriculum-unit-heading.storybook-cover .unit-title-en{
  margin:1px 0 0;
  color:var(--unit-copy)!important;
  -webkit-text-fill-color:var(--unit-copy)!important;
  font-size:.94rem;
  font-weight:800;
  line-height:1.35;
}
.curriculum-unit-heading.storybook-cover .unit-tagline{
  margin:5px 0 0;
  color:var(--unit-title)!important;
  -webkit-text-fill-color:var(--unit-title)!important;
  font-size:.94rem;
  font-weight:720;
  line-height:1.45;
}
.curriculum-unit-heading.storybook-cover .unit-tagline-en{
  margin:0;
  color:var(--unit-copy)!important;
  -webkit-text-fill-color:var(--unit-copy)!important;
  font-size:.82rem;
  font-weight:620;
  line-height:1.4;
}
.curriculum-unit-heading.storybook-cover .unit-motif{
  align-self:center;
  padding:6px 2px 6px 8px;
  color:var(--unit-accent);
  font-size:1.35rem;
  letter-spacing:.04em;
  white-space:nowrap;
  opacity:.92;
  text-shadow:none;
}
.curriculum-unit[data-unit-theme] .journey-card{
  border-color:color-mix(in srgb,var(--unit-accent) 18%,transparent);
  box-shadow:0 11px 24px rgba(48,29,38,.08);
}
.curriculum-unit[data-unit-theme] .journey-card .card-number,
.curriculum-unit[data-unit-theme] .journey-card-learning-note{
  color:var(--unit-accent-text)!important;
  -webkit-text-fill-color:var(--unit-accent-text)!important;
}
.curriculum-unit[data-unit-theme] .journey-card-learning-note{
  display:inline-flex;
  margin-top:10px;
  font-size:.76rem;
  font-weight:850;
  letter-spacing:.035em;
}

html[data-theme-resolved="dark"] .curriculum-unit[data-unit-theme]{
  --unit-bg-1:#2c2729;
  --unit-bg-2:#27312a;
  --unit-title:#f7edf1;
  --unit-copy:#d6c8cf;
  --unit-accent-text:color-mix(in srgb,var(--unit-accent) 55%,white);
  --unit-line:rgba(255,219,232,.14);
}
html[data-theme-resolved="dark"] .curriculum-unit[data-unit-theme="sunrise-day"],
html[data-theme-resolved="dark"] .curriculum-unit[data-unit-theme="cozy-cooking"],
html[data-theme-resolved="dark"] .curriculum-unit[data-unit-theme="faith-gold"]{--unit-bg-1:#332b25;--unit-bg-2:#2c2a26}
html[data-theme-resolved="dark"] .curriculum-unit[data-unit-theme="market-blue"],
html[data-theme-resolved="dark"] .curriculum-unit[data-unit-theme="travel-sky"]{--unit-bg-1:#23303a;--unit-bg-2:#23332f}
html[data-theme-resolved="dark"] .curriculum-unit[data-unit-theme="future-indigo"]{--unit-bg-1:#292a3b;--unit-bg-2:#293139}
html[data-theme-resolved="dark"] .curriculum-unit[data-unit-theme="campus-blue"]{--unit-bg-1:#392731;--unit-bg-2:#362d28}
html[data-theme-resolved="dark"] .curriculum-unit-heading.storybook-cover .curriculum-unit-number{background:rgba(28,24,26,.54);border-color:rgba(255,255,255,.15)}

@media(max-width:620px){
  .curriculum-unit[data-unit-theme]{margin:18px 0 26px}
  .curriculum-unit-heading.storybook-cover{
    grid-template-columns:44px minmax(0,1fr) auto;
    gap:11px;
    padding:12px 13px;
    border-radius:18px;
  }
  .curriculum-unit-heading.storybook-cover .curriculum-unit-number{
    width:44px;
    height:44px;
    border-radius:14px;
    font-size:1.34rem;
  }
  .curriculum-unit-heading.storybook-cover .eyebrow{font-size:.61rem;letter-spacing:.09em}
  .curriculum-unit-heading.storybook-cover h3{font-size:1.16rem;line-height:1.22}
  .curriculum-unit-heading.storybook-cover .unit-title-en{font-size:.84rem}
  .curriculum-unit-heading.storybook-cover .unit-tagline{margin-top:4px;font-size:.84rem;line-height:1.38}
  .curriculum-unit-heading.storybook-cover .unit-tagline-en{display:none}
  .curriculum-unit-heading.storybook-cover .unit-motif{padding-left:2px;font-size:1.05rem;letter-spacing:0}
}
@media(max-width:390px){
  .curriculum-unit-heading.storybook-cover{grid-template-columns:40px minmax(0,1fr);padding:11px 12px}
  .curriculum-unit-heading.storybook-cover .curriculum-unit-number{width:40px;height:40px;font-size:1.2rem}
  .curriculum-unit-heading.storybook-cover .unit-motif{display:none}
}
@media(prefers-reduced-motion:no-preference){
  .curriculum-unit-heading.storybook-cover{transition:transform .2s ease,box-shadow .2s ease}
  .curriculum-unit-heading.storybook-cover:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(45,30,37,.13)}
}

/* ===== V251.17 content and clutter reduction ===== */
.gate-card-simple{
  max-width:560px;
  padding:clamp(26px,5vw,44px);
}
.gate-card-simple h1{
  margin:.2rem 0 .45rem;
  font-size:clamp(2rem,6vw,3.2rem);
}
.gate-card-simple .thai-lead{
  margin:0 0 20px;
}
.gate-card-simple .gate-note{
  margin-top:18px;
  text-align:center;
}

.compact-progress-strip{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  margin:16px 0 20px;
  padding:13px 17px;
  border-radius:22px;
}
.compact-progress-strip .personal-greeting-copy h2{
  margin:0;
  font-size:clamp(.96rem,2.7vw,1.2rem);
  line-height:1.15;
  white-space:nowrap;
}
.rice-progress.home-strip{
  grid-template-columns:54px minmax(185px,auto);
  gap:10px;
}
.rice-progress.home-strip svg{width:54px}
.rice-progress.home-strip .rice-progress-copy{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:10px;
  row-gap:2px;
  align-items:center;
}
.rice-progress.home-strip .rice-progress-copy strong{
  grid-row:1 / 3;
  padding:5px 10px;
  font-size:1.25rem;
}
.rice-progress.home-strip .rice-progress-copy span{
  font-size:.83rem;
  line-height:1.3;
}
.rice-progress.home-strip .rice-progress-copy small{
  font-size:.76rem;
  line-height:1.3;
}

.curriculum-unit{
  border:0;
}
.curriculum-unit > summary{
  list-style:none;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(52,93,58,.1);
}
.curriculum-unit > summary::-webkit-details-marker{display:none}
.curriculum-unit-heading.storybook-cover{
  grid-template-columns:54px minmax(0,1fr) auto auto;
  margin-bottom:0;
}
.curriculum-unit[open] > .curriculum-unit-heading.storybook-cover{
  margin-bottom:14px;
}
.unit-cover-status{
  display:grid;
  justify-items:end;
  gap:4px;
  color:var(--unit-copy);
  font-size:.74rem;
  font-weight:850;
  line-height:1.25;
  white-space:nowrap;
}
.unit-expand-icon{
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border:1px solid var(--unit-line);
  border-radius:999px;
  background:rgba(255,255,255,.48);
  color:var(--unit-accent-text);
  font-size:1rem;
  transition:transform .2s ease;
}
.curriculum-unit[open] .unit-expand-icon{transform:rotate(180deg)}
.curriculum-unit.is-complete:not([open]) .curriculum-unit-heading.storybook-cover{opacity:.83}
.curriculum-unit.is-current .curriculum-unit-heading.storybook-cover{
  box-shadow:0 14px 34px color-mix(in srgb,var(--unit-accent) 20%,transparent);
}
.curriculum-unit:not([open]) .lesson-card-grid{display:none}

.conversation-summary-copy{
  display:grid;
  gap:2px;
  min-width:0;
}
.conversation-summary-copy em{
  margin-top:4px;
  color:var(--text-support);
  font-size:.82rem;
  font-style:normal;
  font-weight:600;
  line-height:1.45;
}
.conversation-summary-meta{
  display:grid;
  flex:none;
  justify-items:end;
  gap:4px;
  color:var(--text-support);
  font-size:.72rem;
  font-weight:850;
  white-space:nowrap;
}
.practice-conversation-body{
  min-height:70px;
}
.conversation-loading{
  margin:0;
  padding:12px;
  color:var(--text-support);
  text-align:center;
}
.conversation-load-error{color:var(--wine)}

.hero-install-action[hidden]{display:none!important}
.home-game-card{
  margin-top:30px;
}

@media(max-width:760px){
  .compact-progress-strip{
    grid-template-columns:1fr;
    gap:8px;
    padding:12px 14px;
  }
  .compact-progress-strip .personal-greeting-copy h2{
    font-size:.92rem;
  }
  .rice-progress.home-strip{
    grid-template-columns:48px 1fr;
  }
  .rice-progress.home-strip svg{width:48px}
  .curriculum-unit-heading.storybook-cover{
    grid-template-columns:44px minmax(0,1fr) auto;
  }
  .curriculum-unit-heading.storybook-cover .unit-motif{display:none}
  .unit-cover-status{
    font-size:.66rem;
  }
  .unit-expand-icon{
    width:26px;
    height:26px;
  }
  .practice-conversation > summary{
    align-items:flex-start;
  }
}
/* V261.4: large-phone structure extends through 480px without applying
   the tighter <=430px typography compaction to iPhone 16 Pro Max. */
@media(max-width:480px){
  .curriculum-unit-heading.storybook-cover{
    grid-template-columns:40px minmax(0,1fr);
  }
  .unit-cover-status{
    grid-column:1 / -1;
    grid-template-columns:1fr auto;
    align-items:center;
    justify-items:start;
    width:100%;
    padding-top:4px;
  }
  .unit-cover-status .unit-expand-icon{justify-self:end}
}
@media(max-width:430px){
  .compact-progress-strip .personal-greeting-copy h2{
    font-size:.84rem;
  }
  .rice-progress.home-strip .rice-progress-copy strong{
    font-size:1.12rem;
  }
}
@media (hover:none), (pointer:coarse){
  .curriculum-unit-heading.storybook-cover:hover,
  .game-entry-card .primary-button:hover,
  .offline-settings button:hover{
    transform:none;
  }
}


/* ===== V251.20 compact expanded unit header ===== */
.curriculum-unit[open] > .curriculum-unit-heading.storybook-cover{
  grid-template-columns:minmax(0,1fr);
  gap:0;
  min-height:0;
  margin-bottom:12px;
  padding:11px 15px 12px;
  border-radius:17px;
  box-shadow:0 8px 20px rgba(45,30,37,.08);
}
.curriculum-unit[open] > .curriculum-unit-heading.storybook-cover .curriculum-unit-number,
.curriculum-unit[open] > .curriculum-unit-heading.storybook-cover .unit-tagline,
.curriculum-unit[open] > .curriculum-unit-heading.storybook-cover .unit-tagline-en,
.curriculum-unit[open] > .curriculum-unit-heading.storybook-cover .unit-cover-status,
.curriculum-unit[open] > .curriculum-unit-heading.storybook-cover .unit-motif{
  display:none!important;
}
.curriculum-unit[open] > .curriculum-unit-heading.storybook-cover .curriculum-unit-copy{
  gap:1px;
}
.curriculum-unit[open] > .curriculum-unit-heading.storybook-cover .eyebrow{
  margin:0 0 2px;
  font-size:.64rem;
  line-height:1.2;
  letter-spacing:.1em;
}
.curriculum-unit[open] > .curriculum-unit-heading.storybook-cover h3{
  margin:0;
  font-size:1.18rem;
  line-height:1.2;
}
.curriculum-unit[open] > .curriculum-unit-heading.storybook-cover .unit-title-en{
  margin:1px 0 0;
  font-size:.84rem;
  line-height:1.3;
}
@media(max-width:620px){
  .curriculum-unit[open] > .curriculum-unit-heading.storybook-cover{
    grid-template-columns:minmax(0,1fr);
    padding:10px 13px 11px;
    border-radius:16px;
  }
  .curriculum-unit[open] > .curriculum-unit-heading.storybook-cover h3{
    font-size:1.08rem;
  }
  .curriculum-unit[open] > .curriculum-unit-heading.storybook-cover .unit-title-en{
    font-size:.8rem;
  }
}
@media(max-width:480px){
  .curriculum-unit[open] > .curriculum-unit-heading.storybook-cover{
    grid-template-columns:minmax(0,1fr);
    padding:9px 12px 10px;
  }
}


/* ===== V261.5 short-height landscape / iPhone safe-area refinement ===== */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  :root { --private-header-height: 50px; }
  .lads-topbar,
  .game-topbar {
    min-height: calc(var(--private-header-height) + var(--private-safe-top));
    padding-top: calc(4px + var(--private-safe-top));
    padding-right: calc(12px + var(--private-safe-right));
    padding-bottom: 4px;
    padding-left: calc(12px + var(--private-safe-left));
  }
  .lads-topbar nav a,
  .lads-topbar .topbar-install,
  .lads-topbar .theme-control select,
  .game-topbar .game-back,
  .game-topbar .game-theme-control select {
    min-height: 40px;
  }
  .stat-dialog-shell,
  .help-dialog {
    max-height: calc(100dvh - var(--private-safe-top) - var(--private-safe-bottom) - 12px);
    overflow:auto;
  }
}

/* ===== V269.4 theme-readable instructional and completion states ===== */
:is(.source-merge span, .quiz-question legend span, .grammar-pattern-label) {
  color: var(--accent-text);
}

:is(.question-feedback, .quiz-result, .builder-feedback).ok {
  color: var(--feedback-success-text);
}
:is(.question-feedback, .quiz-result, .builder-feedback).bad,
.conversation-load-error {
  color: var(--feedback-error-text);
}

.complete-button.is-complete,
.mobile-action-bar [data-complete-lesson].is-complete {
  color: var(--complete-button-text);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
  background: linear-gradient(135deg, var(--complete-button-start), var(--complete-button-end));
}

html[data-theme-resolved="dark"] .game-portal .unit-copy small {
  color: #b0d491;
}