/* ==========================================================
   Jungle Safari Spelling Quest — Functional Game Engine
   Emerald + warm gold. Field-notebook / ancient-map direction.
   Premium visual skin — all gameplay/JS hooks preserved.
   ========================================================== */

:root {
  /* Foliage / emerald */
  --emerald-950: #0b2317;
  --emerald-900: #0f2f21;
  --emerald-800: #163f2b;
  --emerald-700: #1d5638;
  --emerald-600: #256d48;
  --emerald-500: #2f8a58;

  /* Warm gold / brass */
  --gold-600: #b0801f;
  --gold-500: #cf9d34;
  --gold-400: #e2bb57;
  --gold-300: #f1d281;
  --gold-100: #fbeecb;

  /* Parchment */
  --parch-50: #fcf5e1;
  --parch-100: #f7ead0;
  --parch-200: #efdcb4;
  --parch-300: #e4ca94;
  --parch-line: rgba(120, 88, 40, 0.16);

  /* Wood (letter tiles) */
  --wood-900: #4b2f14;
  --wood-800: #5e3c1b;
  --wood-700: #7a4f24;
  --wood-600: #9a6a34;
  --wood-500: #b98846;

  /* Stone (answer slots) */
  --stone-200: #e7ddc6;
  --stone-300: #d6c8a8;
  --stone-400: #b8a67f;

  /* Ink + status */
  --ink: #2a2011;
  --ink-soft: #5b4a2c;
  --muted: #5f4e30;
  --danger: #a4412c;
  --success: #2b7a4b;

  /* Panels + effects */
  --panel: linear-gradient(180deg, var(--parch-50), var(--parch-200));
  --panel-edge: 1px solid rgba(120, 84, 30, 0.32);
  --shadow-lg: 0 24px 60px rgba(6, 22, 13, 0.42);
  --shadow-md: 0 12px 30px rgba(6, 22, 13, 0.28);
  --ring-gold: inset 0 0 0 1.5px rgba(207, 157, 52, 0.55);

  /* Radii */
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --focus: 0 0 0 4px rgba(241, 210, 129, 0.85);

  /* Typography */
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-arabic: "Noto Naskh Arabic", "Amiri", "Scheherazade New", "Traditional Arabic", "Segoe UI", serif;

  /* Type scale (fluid) */
  --fs-display: clamp(2rem, 3.4vw, 3rem);
  --fs-h1: clamp(1.3rem, 1.2vw + 1rem, 2rem);
  --fs-h2: clamp(1.55rem, 2.2vw, 2.5rem);
  --fs-h3: clamp(1.12rem, 0.6vw + 0.9rem, 1.35rem);
  --fs-lead: clamp(1rem, 0.7vw + 0.85rem, 1.28rem);
  --fs-body: clamp(0.95rem, 0.3vw + 0.85rem, 1.05rem);
  --fs-small: clamp(0.84rem, 0.2vw + 0.78rem, 0.94rem);
  --fs-label: 0.72rem;
  --lh-tight: 1.12;
  --lh-body: 1.55;

  /* Focus ring — high-contrast on gold AND emerald surfaces */
  --focus-ring: 0 0 0 3px rgba(9, 30, 20, 0.92), 0 0 0 6px rgba(241, 210, 129, 0.95);

  /* Layout tokens (from stage 1) */
  --header-h: clamp(56px, 7.4vh, 78px);
  --shell-pad: clamp(10px, 1.6vw, 22px);
  --gap: clamp(0.6rem, 1.1vw, 1rem);
  --pad: clamp(0.75rem, 1.35vw, 1.15rem);

  /* Tile geometry (from stage 1; overridden per word length) */
  --tile: clamp(44px, 4.6vw, 60px);
  --tile-h: clamp(50px, 5.2vw, 66px);
  --tile-fs: clamp(1.15rem, 1.5vw, 1.65rem);

  /* Optional real wooden-tile texture. Leave `none` to keep the CSS wood look;
     set to url("../assets/ui/wood-letter-tile.webp") to use an image. */
  --letter-tile-image: url("../assets/ui/wood-letter-tile.webp");

  font-size: clamp(15px, 0.9vw + 0.45rem, 18px);
}

* { box-sizing: border-box; }

html {
  /* Opaque base behind everything. Even if the jungle photo fails to load or a
     screen renders short, the page can never show a transparent checkerboard —
     the worst case is solid dark jungle green. */
  background-color: #062817;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background-color: #062817;   /* plain dark-green fallback if the image fails to load */
  background-image:
    /* subtle dark-green overlay so the cream panels + text stay readable */
    linear-gradient(rgba(3, 28, 15, 0.42), rgba(3, 28, 15, 0.62)),
    /* real jungle photo — path is relative to css/, so ../assets/… */
    url("../assets/backgrounds/jungle-main-bg.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; }

button:focus-visible,
[tabindex]:focus-visible,
.level-card:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---- App shell ---- */
.app-shell {
  width: min(1420px, 100%);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: var(--shell-pad);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* ---- Header: brass field plate ---- */
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  padding: 0.55rem 1rem;
  background: linear-gradient(180deg, var(--parch-50), var(--parch-200));
  border: var(--panel-edge);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md), var(--ring-gold);
}

.brand-lockup { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }

/* The title lives in a fixed-height plate — it must not grow into two lines. */
.topbar #game-title {
  font-size: clamp(1.02rem, 1.25vw + 0.5rem, 1.4rem);
  line-height: 1.14;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compass medallion */
.brand-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(2.5rem, 4vw, 3.1rem);
  height: clamp(2.5rem, 4vw, 3.1rem);
  background: url("../assets/ui/logo.webp") center / contain no-repeat;
}
.brand-icon::before {
  /* The logo image now carries the compass mark; the masked glyph is retired. */
  content: none;
}

.eyebrow, .badge, .zone-label, .clue-label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emerald-700);
  font-size: var(--fs-label);
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  color: var(--emerald-900);
}

h2 {
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.06;
  color: var(--emerald-900);
}

h3 {
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: var(--emerald-900);
}

.muted { color: var(--muted); }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.top-actions, .hero-actions, .game-actions, .report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}
.centered { justify-content: center; }

/* ==========================================================
   Buttons
   ========================================================== */
.primary-btn, .secondary-btn, .ghost-btn, .danger-btn, .sound-btn {
  min-height: 46px;
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}

.primary-btn:hover, .secondary-btn:hover, .ghost-btn:hover,
.danger-btn:hover, .sound-btn:hover, .tile-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05) saturate(1.03);
}
.primary-btn:active, .secondary-btn:active, .ghost-btn:active,
.danger-btn:active, .sound-btn:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.97);
}

/* Gold, embossed — the treasure action */
.primary-btn {
  color: #2c1c02;
  background:
    url("../assets/ui/button-gold.webp") center / 100% 100% no-repeat,
    linear-gradient(180deg, var(--gold-300), var(--gold-500) 70%, var(--gold-600));
  border-radius: 16px;
  padding-inline: clamp(1.7rem, 4vw, 2.7rem);
  box-shadow: 0 6px 14px rgba(60, 38, 14, 0.34);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.4);
}

/* Deep foliage */
.secondary-btn {
  color: var(--gold-100);
  background: linear-gradient(180deg, var(--emerald-600), var(--emerald-800));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 0 var(--emerald-900), 0 12px 22px rgba(9, 32, 19, 0.3);
}

.ghost-btn {
  color: var(--emerald-900);
  background: rgba(207, 157, 52, 0.18);
  border: 1px solid rgba(120, 84, 30, 0.28);
}

.danger-btn {
  color: #fff;
  background: linear-gradient(180deg, #c05a41, var(--danger));
  box-shadow: 0 6px 0 #6f2a1c;
}

.large-btn { min-height: 56px; padding-inline: 1.6rem; font-size: 1.04rem; }

.sound-btn {
  color: var(--gold-100);
  background: linear-gradient(180deg, var(--emerald-700), var(--emerald-900));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 5px 0 var(--emerald-950);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Speaker icon (replaces the old sound emoji) */
.sound-icon {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--emb-sound) center / contain no-repeat;
  mask: var(--emb-sound) center / contain no-repeat;
}

/* ---- Screen host ---- */
.screen-root { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.screen { flex: 1 1 auto; min-height: 0; }

.animate-in { animation: riseIn 0.4s ease both; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   Parchment panels + map-corner ornaments
   ========================================================== */
.hero-card, .reward-card, .section-heading, .activity-panel,
.mission-panel, .teacher-note, .level-card, .report-content, .report-card {
  position: relative;
  background: var(--panel);
  border: var(--panel-edge);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), var(--ring-gold);
}

/* Ornate vine corners on the two feature cards */
.hero-card::before, .hero-card::after,
.reward-card::before, .reward-card::after {
  content: "";
  position: absolute;
  width: clamp(46px, 6vw, 80px); height: clamp(46px, 6vw, 80px);
  background: url("../assets/ui/vine-corner.webp") center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
}
.hero-card::before, .reward-card::before { top: 3px; left: 3px; }
.hero-card::after, .reward-card::after { bottom: 3px; right: 3px; transform: rotate(180deg); }

/* ==========================================================
   Start screen — expedition invitation
   ========================================================== */
.start-screen { display: flex; flex-direction: column; gap: var(--gap); justify-content: center; }

/* The two-column split belongs to the START screen: copy on the left, the
   painted jungle panel on the right. It is NOT a generic card layout. The
   boss screens also use .hero-card as a parchment panel, and when they
   inherited this grid their headings, badges and buttons were auto-placed
   into whichever column came next — which is exactly why they looked
   scattered. Scoping the grid here keeps every other .hero-card a plain
   block that stacks in reading order. */
.start-screen .hero-card {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  min-height: clamp(340px, 58vh, 540px);
  overflow: hidden;
}

.hero-copy {
  padding: clamp(1.6rem, 4vw, 3.8rem);
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
#start-title {
  font-size: var(--fs-display);
  line-height: 1.04;
  margin-bottom: 0.35rem;
}
.hero-copy .lead { margin-bottom: 0.35rem; }
.hero-copy .hero-actions { margin-top: 0.7rem; }

.badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 0.95rem;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  color: var(--emerald-800);
  background: rgba(47, 138, 88, 0.14);
  border: 1px solid rgba(47, 138, 88, 0.28);
}

/* Jungle-silhouette + canopy light panel that holds the floating map cards */
.hero-visual {
  position: relative;
  min-height: 240px;
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(11, 35, 23, 0.10), rgba(11, 35, 23, 0.30)),
    var(--hero-image, url("../assets/ui/start-screen-bg.webp")) 66% center / cover no-repeat,
    linear-gradient(180deg, rgba(47, 138, 88, 0.28), rgba(11, 35, 23, 0.85));
}
/* canopy leaf silhouettes along the bottom */
.hero-visual::after {
  /* The hero is now a full generated illustration; the old CSS scallop bushes
     would sit on top of it, so they are retired. */
  content: none;
}
/* Subtle safari guide standing at the trailhead (behind the floating cards) */
.hero-visual::before {
  /* The generated hero illustration is self-contained (it already includes the
     explorer), so the separate mascot silhouette overlay is retired. */
  content: none;
}

/* The floating compass / map / gem cards and the spinning sun-disc were
   decorative SVG overlays on the hero. They are removed; the hero art is
   now a single generated illustration set as the .hero-visual background. */

.teacher-note {
  padding: 0.9rem 1.2rem;
  background: linear-gradient(180deg, var(--parch-50), var(--parch-100));
}
.teacher-note strong { color: var(--emerald-800); }

/* ==========================================================
   Section heading (levels / report)
   ========================================================== */
.section-heading { flex: 0 0 auto; padding: 1.05rem 1.4rem; }
.section-heading h2 { margin-bottom: 0.25rem; }
.section-heading p { margin-bottom: 0; color: var(--muted); }

/* ==========================================================
   Level selection — safari trail cards
   ========================================================== */
.levels-screen { display: flex; flex-direction: column; gap: var(--gap); }

.levels-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  counter-reset: lvl;
}

.level-card {
  --accent: var(--emerald-600);
  --accent-soft: rgba(47, 138, 88, 0.14);
  counter-increment: lvl;
  display: flex;
  min-height: clamp(220px, 34vh, 288px);
  padding: 1rem 1rem 1.05rem;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  color: var(--ink);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
/* Big faded level number watermark (game-like) */
.level-card::before {
  content: counter(lvl);
  position: absolute;
  top: 0.1rem; right: 0.7rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.7rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
/* accent ribbon at the top of each trail card */
.level-card > div:first-child { position: relative; z-index: 1; }
.level-card { border-top: 5px solid var(--accent); }
.level-card:hover,
.level-card:focus-visible {
  transform: translateY(-4px);
  filter: brightness(1.03);
  box-shadow: var(--shadow-lg), var(--ring-gold), 0 0 0 2px var(--accent);
}

/* Distinct trails (order matches words.json: Camp, River, Temple, Canyon) */
.level-card:nth-child(1) { --accent: #2f8a58; --accent-soft: rgba(47, 138, 88, 0.16); }
.level-card:nth-child(2) { --accent: #2f7fa8; --accent-soft: rgba(47, 127, 168, 0.16); }
.level-card:nth-child(3) { --accent: #8a6f9a; --accent-soft: rgba(138, 111, 154, 0.16); }
.level-card:nth-child(4) { --accent: #cf9d34; --accent-soft: rgba(207, 157, 52, 0.18); }

/* Badge slot — real PNG badge (contain) with the CSS emblem as fallback */
.level-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.4rem; height: 4.4rem;
  /* frameless: the badge PNGs are self-contained premium emblems */
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* Layer 1: the CSS emblem placeholder (shown now), tinted by the trail accent */
.level-badge-icon {
  position: absolute;
  inset: 0;
  background: var(--accent);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 58%; mask-size: 58%;
  pointer-events: none;
}
.level-badge-icon.camp     { -webkit-mask-image: var(--emb-tent);   mask-image: var(--emb-tent); }
.level-badge-icon.river    { -webkit-mask-image: var(--emb-waves);  mask-image: var(--emb-waves); }
.level-badge-icon.temple   { -webkit-mask-image: var(--emb-temple); mask-image: var(--emb-temple); }
.level-badge-icon.treasure { -webkit-mask-image: var(--emb-chest);  mask-image: var(--emb-chest); }

/* Layer 2: the real badge PNG (shown as `contain` so the full emblem is visible).
   If it fails to load, the tinted CSS emblem above remains as the fallback. */
.level-badge-image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 3px 5px rgba(11, 35, 23, 0.30));
  pointer-events: none;
}
.level-badge-image.camp     { background-image: var(--badge-camp, none); }
.level-badge-image.river    { background-image: var(--badge-river, none); }
.level-badge-image.temple   { background-image: var(--badge-temple, none); }
.level-badge-image.treasure { background-image: var(--badge-treasure, none); }

.level-card .eyebrow { color: var(--accent); }
.level-card h3 { margin: 0.55rem 0 0.2rem; }

.level-card .level-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.65rem; }

.small-chip {
  display: inline-flex;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--emerald-900);
  font-size: 0.74rem;
  font-weight: 800;
  border: 1px solid rgba(120, 84, 30, 0.16);
}

/* The "Play Level" pill baked into each card by app.js */
.level-card .primary-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  margin-top: 1rem;
  min-height: 46px;
  font-size: 0.98rem;
  position: relative;
  z-index: 1;
}

/* Completed levels: gold top accent + a check seal on the badge */
.level-card.is-completed { border-top-color: var(--gold-500); }
.level-card.is-completed .level-icon::after {
  content: "\2713";
  position: absolute;
  right: -6px; bottom: -6px;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--emerald-900);
  font-weight: 900; font-size: 0.95rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32), inset 0 0 0 2px rgba(255, 255, 255, 0.45);
  z-index: 2;
}

/* ==========================================================
   GAME SCREEN
   ========================================================== */
.game-screen { height: 100%; min-height: 0; }

.game-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: var(--gap);
  height: 100%;
  min-height: 0;
}

.mission-panel, .activity-panel { padding: var(--pad); min-height: 0; }

/* LEFT: safari mission field-notebook (ruled paper + margin line) */
.mission-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  overflow: auto;
  background:
    linear-gradient(90deg, transparent 20px, rgba(164, 65, 44, 0.28) 20px 21px, transparent 21px),
    repeating-linear-gradient(180deg, transparent 0 29px, var(--parch-line) 29px 30px),
    linear-gradient(180deg, var(--parch-50), var(--parch-100));
  padding-left: 30px;
}
.mission-panel h2 { font-size: clamp(1.35rem, 1.8vw, 2rem); margin-bottom: 0; }

.stat-stack { display: grid; gap: 0.55rem; }

.stat-pill {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  background: rgba(255, 250, 235, 0.55);
  border: 1px solid rgba(120, 84, 30, 0.18);
  box-shadow: inset 3px 0 0 var(--gold-500);
}
.stat-pill span { color: var(--muted); font-weight: 700; }
.stat-pill strong { color: var(--emerald-900); font-family: var(--font-display); font-size: 1.12rem; }

/* Safari guide card — feather medallion + note */
.safari-guide {
  margin-top: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: center;
  text-align: left;
  padding: 0.85rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(207, 157, 52, 0.16), rgba(47, 138, 88, 0.12));
  border: 1px solid rgba(120, 84, 30, 0.2);
}
.safari-guide p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
/* A ROUND PORTRAIT, not a cropped standee.
   The guide used to be the full-body painting squeezed into a tall rectangle,
   so his hat and his boots were both sliced off by the box and the result read
   as a clipped silhouette. He is now a head-and-shoulders cameo in a gold rim
   — the same shape the eye already reads as "a person speaking to you". */
.guide-face {
  position: relative;
  display: grid; place-items: center;
  width: 5.2rem; height: 5.2rem;
  flex: 0 0 auto;
  font-size: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 15%, rgba(47, 138, 88, 0.30), rgba(11, 35, 23, 0.55));
  box-shadow:
    inset 0 0 0 2px rgba(226, 187, 87, 0.6),
    inset 0 -0.6rem 1rem rgba(0, 0, 0, 0.3),
    var(--shadow-md);
}
/* Fallback feather emblem (shows only if the mascot image is absent) */
.guide-face::before {
  content: "";
  width: 52%; height: 52%;
  background: var(--gold-300);
  -webkit-mask: var(--emb-feather) center/contain no-repeat;
  mask: var(--emb-feather) center/contain no-repeat;
}
/* The portrait crop fills the disc: face centred, shoulders at the rim. */
.guide-face.mascot-image-slot::after {
  background-image: var(--mascot-portrait);
  background-size: 118%;
  background-position: center 22%;
}

/* RIGHT: activity board (deep emerald felt holding parchment cards) */
.activity-panel {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(47, 138, 88, 0.22), transparent 60%),
    linear-gradient(180deg, var(--emerald-700), var(--emerald-900));
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(207, 157, 52, 0.4);
}

.activity-scroll {
  display: grid;
  gap: 0.8rem;
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 0.25rem;
}

.clue-card, .answer-zone, .tiles-zone, .feedback-box {
  padding: 0.9rem 1rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--parch-50), var(--parch-100));
  border: 1px solid rgba(120, 84, 30, 0.28);
  box-shadow: var(--ring-gold);
}

/* Arabic clue — large + elegant.
   The painted scroll used to sit behind this card. Its brass rollers ate the
   left and right thirds of the strip, forced huge horizontal padding to keep
   the word clear of them, and squashed longer Arabic clues. The card is now
   plain parchment with a gold rim, like every other card on the board: the
   meaning gets the full width, and the Listen button has real room. */
.clue-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  padding: clamp(0.9rem, 2vw, 1.3rem) clamp(5.5rem, 11vw, 7.5rem);
  min-height: clamp(94px, 12vh, 132px);
}
.clue-label {
  color: #7a5320;
  text-shadow: 0 1px 1px rgba(255, 250, 235, 0.7);
  margin: 0;
}
.clue-card #speak-btn {
  position: absolute;
  top: 50%; right: clamp(0.9rem, 2.5vw, 1.6rem);
  transform: translateY(-50%);
  z-index: 2;
}
.arabic-clue {
  font-family: var(--font-arabic);
  font-size: clamp(1.9rem, 3.4vw, 3.3rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--emerald-900);
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.zone-label { color: var(--emerald-700); margin-bottom: 0.55rem; }

/* Answer slots + tiles */
.answer-slots, .letter-tiles {
  display: flex; flex-wrap: wrap; gap: 0.55rem;
  min-height: var(--tile-h);
  align-items: center;
}
.answer-slots[data-size="mid"], .letter-tiles[data-size="mid"] {
  --tile: clamp(38px, 4vw, 52px); --tile-h: clamp(44px, 4.4vw, 58px); --tile-fs: clamp(1.05rem, 1.3vw, 1.5rem);
}
.answer-slots[data-size="long"], .letter-tiles[data-size="long"] {
  --tile: clamp(32px, 3.4vw, 46px); --tile-h: clamp(38px, 3.8vw, 52px); --tile-fs: clamp(0.95rem, 1.2vw, 1.35rem);
}

.answer-slot, .tile-btn {
  display: grid; place-items: center;
  width: var(--tile); height: var(--tile-h);
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: var(--tile-fs);
  font-weight: 800;
  text-transform: uppercase;
}

/* Carved-stone answer slots */
.answer-slot {
  color: var(--emerald-900);
  background: linear-gradient(180deg, var(--stone-300), var(--stone-200));
  border: 1px solid rgba(96, 74, 40, 0.4);
  box-shadow: inset 0 3px 6px rgba(70, 52, 24, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}
/* Empty slots show a faint "fill me" marker */
.answer-slot:empty::after {
  content: "";
  width: 34%; height: 3px; border-radius: 2px;
  background: rgba(96, 74, 40, 0.28);
}
/* Filled slots turn a warm gold — a satisfying progress cue as the word builds */
.answer-slot:not(:empty) {
  background: linear-gradient(180deg, #f4e6c2, #e8d4a8);
  border-color: rgba(176, 128, 31, 0.5);
  box-shadow: inset 0 2px 4px rgba(176, 128, 31, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}

/* Polished wooden letter tiles with golden edges */
.tile-btn {
  color: #34210b;
  background:
    /* real wooden-tile texture on top (falls back to the wood gradients if it fails to load) */
    var(--letter-tile-image, none) center / 100% 100% no-repeat,
    /* default CSS wood grain + base (fallback) */
    repeating-linear-gradient(90deg, rgba(90, 55, 20, 0.06) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, #e7bd77, #c58f45 60%, #a5722f);
  border: 2px solid var(--gold-500);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 4px rgba(74, 44, 16, 0.4),
    0 6px 0 var(--wood-800),
    0 12px 18px rgba(60, 38, 14, 0.32);
}
.tile-btn:hover { filter: brightness(1.04); }
.tile-btn.used {
  opacity: 0.4;
  pointer-events: none;
  transform: translateY(5px);
  box-shadow: inset 0 2px 6px rgba(74, 44, 16, 0.5);
}

.feedback-box {
  min-height: 52px;
  display: flex; align-items: center;
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--emerald-900);
}
.feedback-box.success {
  color: #fff4cf;
  background: linear-gradient(180deg, rgba(10, 50, 30, 0.94), rgba(7, 40, 24, 0.94));
  border-color: rgba(232, 194, 92, 0.75);
}
.feedback-box.warning {
  color: #4a3410;
  background: linear-gradient(180deg, #fbe8c2, #f3d99b);
  border-color: rgba(176, 128, 31, 0.7);
}
/* Review = calm warm-stone, clearly readable, not alarming red */
.feedback-box.error {
  color: #4a3410;
  background: linear-gradient(180deg, #f7e7ca, #ead0a0);
  border-color: rgba(163, 96, 42, 0.6);
}

/* Control bar — Check is the dominant treasure action */
.control-bar {
  flex: 0 0 auto;
  margin-top: 0.85rem;
  padding: 0.9rem 0.95rem 0.5rem;
  border-top: 1px solid rgba(207, 157, 52, 0.45);
}
.control-bar .game-actions { justify-content: flex-start; gap: 0.5rem; }

/* The trail-building controls were oversized. Compact them so Undo / Clear /
   Hint read as secondary tools and Check stays the one dominant action. */
.control-bar .game-actions .secondary-btn {
  padding: 0.44rem 0.95rem;
  font-size: 0.9rem;
  border-radius: 0.6rem;
  --btn-drop: 3px;
}
.control-bar #check-btn {
  margin-inline-start: auto;
  min-width: clamp(104px, 12vw, 140px);
  min-height: 44px;
  padding: 0.5rem 1.3rem;
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  --btn-drop: 4px;
}

/* ==========================================================
   Reward screen — treasure unlocked
   ========================================================== */
.reward-screen { display: grid; place-items: center; position: relative; }
/* Cheering safari guide beside the reward card (hidden on small screens) */
.reward-screen::after {
  content: "";
  position: absolute;
  left: clamp(6px, 2.5vw, 44px); bottom: 0;
  width: clamp(120px, 14vw, 210px);
  height: clamp(220px, 42vh, 430px);
  background: url("../assets/ui/safari-guide-cheer.webp") bottom center / contain no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.4));
  pointer-events: none;
  z-index: 1;
  animation: fxGuideIn .7s cubic-bezier(.2, .9, .25, 1.25) both;
}
@keyframes fxGuideIn { from { opacity: 0; transform: translateY(28px) scale(.9); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) { .reward-screen::after { display: none; } }
.reward-card { width: min(880px, 100%); padding: clamp(1.4rem, 3.6vw, 3.4rem); text-align: center; }

.reward-icon {
  position: relative;
  display: grid; place-items: center;
  width: clamp(8rem, 12vw, 12rem);
  height: clamp(8rem, 12vw, 12rem);
  margin: 0 auto 1rem;
  font-size: 0;
  border-radius: 0;
  overflow: visible;
  /* soft golden reward glow behind the map piece (fades out, no hard box) */
  background: radial-gradient(circle, rgba(242, 194, 86, 0.30), transparent 62%);
  box-shadow: none;
}
.reward-icon::before {
  content: "";
  width: 42%; height: 42%;
  background: var(--emerald-800);
  -webkit-mask: var(--emb-map) center/contain no-repeat;
  mask: var(--emb-map) center/contain no-repeat;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.1rem 0 1.5rem;
}
.summary-item {
  padding: 0.9rem 0.85rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff7e4, #f6e7c4);
  border: 1px solid rgba(176, 128, 31, 0.35);
  box-shadow: var(--ring-gold);
}
.summary-item span { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 800; }
.summary-item strong { display: block; margin-top: 0.3rem; font-family: var(--font-display); font-size: 1.42rem; color: var(--emerald-800); }

/* ==========================================================
   Teacher report — Safari Field Report
   ========================================================== */
.report-screen { display: flex; flex-direction: column; gap: var(--gap); }
.report-content { padding: 1rem; display: grid; gap: 1rem; }
.report-content .summary-grid { margin: 0; }
/* Overall metrics read as a clean dashboard row (distinct from the reward's treasure receipt) */
.report-content .summary-item {
  background: linear-gradient(180deg, var(--parch-50), var(--parch-100));
  border: 1px solid rgba(120, 84, 30, 0.2);
  box-shadow: none;
}
.report-content .summary-item strong { color: var(--emerald-800); font-size: 1.5rem; }

.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }

.report-card {
  padding: 0.85rem 0.95rem;
  background: linear-gradient(180deg, var(--parch-50), var(--parch-100));
  box-shadow: var(--ring-gold);
  overflow: hidden;
}
/* Document-style section header band per card */
.report-card h3 {
  margin: -0.85rem -0.95rem 0.7rem;
  padding: 0.5rem 0.95rem;
  font-size: var(--fs-h3);
  color: var(--emerald-800);
  background: linear-gradient(180deg, rgba(47, 138, 88, 0.14), rgba(47, 138, 88, 0.05));
  border-bottom: 2px solid rgba(207, 157, 52, 0.5);
}

.report-card table { width: 100%; border-collapse: collapse; }
.report-card td, .report-card th {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid rgba(120, 84, 30, 0.18);
  text-align: left; vertical-align: top;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink);
}
.report-card th { color: var(--emerald-800); white-space: nowrap; font-weight: 700; width: 44%; }
/* Zebra rows for scannability */
.report-card tbody tr:nth-child(even) td,
.report-card tbody tr:nth-child(even) th { background: rgba(120, 84, 30, 0.05); }
.report-card tr:last-child td, .report-card tr:last-child th { border-bottom: 0; }

.report-card.review-list { grid-column: 1 / -1; }
/* Review list = the actionable section, flagged in gold */
.report-card.review-list h3 {
  background: linear-gradient(180deg, rgba(176, 128, 31, 0.2), rgba(176, 128, 31, 0.08));
  border-bottom-color: rgba(176, 128, 31, 0.6);
}
.report-card.review-list thead th {
  width: auto;
  background: rgba(47, 138, 88, 0.12);
  border-bottom: 1px solid rgba(120, 84, 30, 0.3);
}

.empty-state { padding: 1.6rem; text-align: center; color: var(--muted); }
.report-actions { flex: 0 0 auto; justify-content: flex-end; }

/* ==========================================================
   Stage-2 gameplay states (re-skinned)
   ========================================================== */
[hidden] { display: none !important; }

.primary-btn:disabled, .secondary-btn:disabled, .ghost-btn:disabled,
.danger-btn:disabled, .sound-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  filter: grayscale(0.45) brightness(0.98);
  box-shadow: none;
  text-shadow: none;
}
.letter-tiles.tiles-locked { pointer-events: none; opacity: 0.55; }

.activity-panel.support-used .clue-card {
  border-color: rgba(207, 157, 52, 0.7);
  box-shadow: var(--ring-gold), inset 0 0 0 2px rgba(207, 157, 52, 0.35);
}

/* Support-active state — the Hint button now reads "Listen Again" (label set in JS) */
#hint-btn.is-used {
  color: #2c1c02;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500) 70%, var(--gold-600));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 0 var(--gold-600), 0 12px 20px rgba(103, 71, 11, 0.28);
}

/* Revealed correct spelling in review = calm green, not scary */
.answer-slot.revealed {
  background: linear-gradient(180deg, rgba(43, 122, 75, 0.2), rgba(43, 122, 75, 0.1));
  border-color: rgba(43, 122, 75, 0.55);
  color: var(--emerald-900);
  box-shadow: inset 0 2px 4px rgba(43, 122, 75, 0.2);
}

.review-choice { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.review-choice #continue-btn { margin-inline-start: auto; padding-inline: 1.5rem; min-width: clamp(120px, 14vw, 168px); }

/* Next Word bar — shown after a correct answer that carries a teachingNote */
.next-choice { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.next-choice #next-word-btn {
  margin-inline-start: auto;
  min-width: clamp(140px, 16vw, 190px);
  min-height: 52px;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}

/* ==========================================================
   Asset-ready image slots (Stage 4)
   Each slot defaults to `none`, so the CSS emblem / gradient placeholder shows.
   Set the matching variable to url("assets/…") later to drop in real art with
   zero layout change. The overlay sits on top of the emblem and covers it.
   ========================================================== */
:root {
  --bg-image: url("../assets/backgrounds/jungle-main-bg.webp");  /* (applied directly on body; path is relative to css/) */
  --mascot-image: url("../assets/mascots/safari-guide.webp");  /* full-body safari guide */
  --mascot-portrait: url("../assets/mascots/safari-guide-portrait.webp");  /* head-and-shoulders crop */
  --reward-map-image: url("../assets/ui/treasure-map-piece.webp");
  --badge-camp: url("../assets/ui/badge-safari-camp.webp");
  --badge-river: url("../assets/ui/badge-river-trail.webp");
  --badge-temple: url("../assets/ui/badge-hidden-temple.webp");
  --badge-treasure: url("../assets/ui/badge-treasure-canyon.webp");
}

.mascot-image-slot::after,
.reward-map-piece::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}
.mascot-image-slot::after { background-image: var(--mascot-image); }
.reward-map-piece::after  {
  background-image: var(--reward-map-image);
  background-size: contain;                 /* show the full map piece, never cropped */
  filter: drop-shadow(0 1.1rem 1.6rem rgba(0, 0, 0, 0.38));
}
/* (Level badge image slots are defined with the .level-badge-image classes above.) */

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1050px) {
  .start-screen .hero-card, .game-layout { grid-template-columns: 1fr; }
  .game-screen, .game-layout { height: auto; }
  .activity-panel, .activity-scroll { overflow: visible; }
  .levels-grid, .summary-grid, .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-visual { min-height: 220px; }
  /* When the game stacks, the mission panel becomes a slim HUD:
     the three stats sit in a compact row (label over value). */
  .mission-panel { gap: 0.6rem; }
  .stat-stack { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.5rem; }
  .stat-pill { flex-direction: column; align-items: flex-start; gap: 0.05rem; }
  .stat-pill strong { font-size: 1rem; }
}

@media (max-width: 680px) {
  .app-shell { padding: 10px; }

  /* Elegant, compact header — brand stacked above full-width actions */
  .topbar {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0.55rem; padding: 0.6rem 0.8rem;
  }
  .brand-lockup { gap: 0.6rem; }
  .brand-icon { width: 2.4rem; height: 2.4rem; }
  #game-title { font-size: 1.05rem; line-height: 1.12; }
  .topbar #game-title { white-space: normal; overflow: visible; }
  .top-actions { width: 100%; }
  .top-actions button { flex: 1 1 auto; }

  /* Action groups stack full-width */
  .hero-actions, .game-actions, .report-actions { width: 100%; }
  .hero-actions button, .game-actions button, .report-actions button { flex: 1 1 auto; }
  /* Prominent Check on its own full-width row, below the helper buttons */
  .control-bar #check-btn { margin-inline-start: 0; flex-basis: 100%; }

  /* Screen-space efficiency (summary stays 2×2 from the tablet rule) */
  .levels-grid, .report-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 170px; }
  #start-title { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  /* Hide the decorative guide card on phones to keep the game above the fold */
  .safari-guide { display: none; }

  /* Clue scroll: Listen drops back into normal flow, centred */
  .clue-card { padding-inline: 1.4rem; }
  .clue-card #speak-btn { position: static; transform: none; margin-top: 0.5rem; }

  /* Review / next-word choice groups */
  .review-choice, .next-choice { width: 100%; }
  .review-choice button, .next-choice button { flex: 1 1 auto; }
  .review-choice #continue-btn, .next-choice #next-word-btn { margin-inline-start: 0; }
}

/* ==========================================================
   Motion & lighting (Phase 1) — cosmetic only, projector-safe
   ========================================================== */

/* Keep app content above the ambient firefly / god-ray layers */
.app-shell { position: relative; z-index: 1; }

/* Drifting god-rays over the jungle background */
body::before {
  content: "";
  position: fixed; inset: -12%;
  pointer-events: none; z-index: 0;
  background:
    linear-gradient(116deg, transparent 0 33%, rgba(255, 240, 190, 0.06) 39%, rgba(255, 240, 190, 0.11) 45%, transparent 51% 100%),
    linear-gradient(101deg, transparent 0 58%, rgba(255, 240, 190, 0.05) 65%, transparent 72% 100%);
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* Ambient fireflies (elements created by js/fx.js) */
/* Ambient bokeh — real fireflies image, black backdrop dropped via screen blend */
/* Retired: the drifting firefly / bokeh layer. */
.fx-fireflies, .fx-firefly { display: none !important; }

/* Keep the teacher report calm/professional — quiet the ambient effects there */
body:has(.report-screen) .fx-fireflies { display: none !important; }
body:has(.report-screen)::before { opacity: 0.22 !important; }

/* Smooth screen entrance (enriches the existing .animate-in hook) */
.animate-in { animation: fxRise 0.44s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes fxRise { from { opacity: 0; transform: translateY(14px) scale(.994); } to { opacity: 1; transform: none; } }

/* Wooden letter tiles cascade in; springy press */
.letter-tiles .tile-btn { animation: fxTileIn 0.42s cubic-bezier(.2, .9, .25, 1.35) backwards; }
.letter-tiles .tile-btn:nth-child(1) { animation-delay: .02s; }
.letter-tiles .tile-btn:nth-child(2) { animation-delay: .06s; }
.letter-tiles .tile-btn:nth-child(3) { animation-delay: .10s; }
.letter-tiles .tile-btn:nth-child(4) { animation-delay: .14s; }
.letter-tiles .tile-btn:nth-child(5) { animation-delay: .18s; }
.letter-tiles .tile-btn:nth-child(6) { animation-delay: .22s; }
.letter-tiles .tile-btn:nth-child(7) { animation-delay: .26s; }
.letter-tiles .tile-btn:nth-child(8) { animation-delay: .30s; }
.letter-tiles .tile-btn:nth-child(9) { animation-delay: .34s; }
.letter-tiles .tile-btn:nth-child(10) { animation-delay: .38s; }
.letter-tiles .tile-btn:nth-child(n+11) { animation-delay: .42s; }
@keyframes fxTileIn { from { opacity: 0; transform: translateY(-16px) scale(.7) rotate(-6deg); } to { opacity: 1; transform: none; } }
.tile-btn:active { transform: translateY(2px) scale(.94); }

/* Correct-answer celebration: gentle slot pop (paired with a sparkle burst) */
.answer-slots.fx-celebrate .answer-slot { animation: fxSlotPop .5s ease; }
.answer-slots.fx-celebrate .answer-slot:nth-child(2n) { animation-delay: .06s; }
.answer-slots.fx-celebrate .answer-slot:nth-child(3n) { animation-delay: .10s; }
@keyframes fxSlotPop {
  0%   { transform: none; }
  35%  { transform: translateY(-9px) scale(1.09); }
  70%  { transform: translateY(0) scale(1); }
  100% { transform: none; }
}

/* Wrong-answer: brief, non-punishing shake */
.answer-slots.fx-shake { animation: fxShake .48s ease; }
@keyframes fxShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* Success feedback pop */
.feedback-box.success { animation: fxFbPop .34s ease; }
@keyframes fxFbPop { from { transform: scale(.985); } to { transform: none; } }

/* Level badges: lift + glow on hover/focus */
.level-icon { transition: transform .25s cubic-bezier(.2, .8, .25, 1), filter .25s ease; }
.level-card:hover .level-icon,
.level-card:focus-visible .level-icon {
  transform: translateY(-4px) scale(1.06);
  filter: drop-shadow(0 8px 14px rgba(6, 26, 16, 0.35)) brightness(1.05);
}

/* Reward screen: map piece scales in, halo breathes */
.reward-map-piece::after { animation: fxRewardIn .8s cubic-bezier(.2, .9, .25, 1.25) both; }
@keyframes fxRewardIn { from { opacity: 0; transform: scale(.5) rotate(-7deg); } to { opacity: 1; transform: none; } }
.reward-icon { animation: fxHalo 2.8s ease-in-out infinite; }
@keyframes fxHalo { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 20px rgba(242, 194, 86, .55)); } }

/* Buttons: subtle press */
.primary-btn:active, .secondary-btn:active, .ghost-btn:active,
.danger-btn:active, .sound-btn:active { transform: translateY(1px) scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .animate-in,
  body::before, .fx-fireflies, .fx-firefly,
  .letter-tiles .tile-btn, .reward-icon, .reward-map-piece::after,
  .answer-slots.fx-celebrate .answer-slot, .answer-slots.fx-shake,
  .feedback-box.success, .reward-screen::after { animation: none !important; }
  .fx-fireflies { display: none !important; }
  * { transition: none !important; }
}

/* ==========================================================
   Print — clean Safari Field Report handout
   ========================================================== */
/* Print rules for the teacher report now live in css/print.css. */
:root {
  --emb-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1a11 11 0 100 22 11 11 0 000-22zm0 2.4a8.6 8.6 0 110 17.2 8.6 8.6 0 010-17.2z'/%3E%3Cpath fill='%23000' d='M12 5.2l1.9 4.9 4.9 1.9-4.9 1.9L12 18.8l-1.9-4.9L5.2 12l4.9-1.9z'/%3E%3C/svg%3E");
  --emb-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h16a1 1 0 011 1v14a1 1 0 01-1 1H4a1 1 0 01-1-1V5a1 1 0 011-1zm2 3v10h12V7H6z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' d='M9.3 9.3l5.4 5.4m0-5.4l-5.4 5.4'/%3E%3C/svg%3E");
  --emb-gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 3h12l3 5-9 13L3 8l3-5zm1.1 2L5.4 7.9h3.3L10 5H7.1zm9.8 0H14l1.3 2.9h3.3L16.9 5zM9.6 7.9l2.4 8.3 2.4-8.3H9.6z'/%3E%3C/svg%3E");
  --emb-feather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.5 3.2c-6.3-.4-12.4 2.7-14.6 9-.8 2.3-.8 4.6-.3 6.5l-2.3 2.3 1.4 1.4 2.3-2.3c1.9.5 4.2.5 6.5-.3 6.3-2.2 9.4-8.3 9-14.6a1 1 0 00-1.9-.1L9.7 14.2H12l-4 4.2c-.2-4.9 2.7-9.6 7.3-11.6L11 10.5h2.5z'/%3E%3C/svg%3E");
  --emb-tent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3l9.5 16.8a1 1 0 01-.9 1.5H3.4a1 1 0 01-.9-1.5L12 3zm0 4.7L6.6 19h3.1l2.3-4.2L14.3 19h3.1L12 7.7z'/%3E%3C/svg%3E");
  --emb-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M2.5 8c2-2 4-2 6 0s4 2 6 0 4-2 6 0M2.5 13c2-2 4-2 6 0s4 2 6 0 4-2 6 0M2.5 18c2-2 4-2 6 0s4 2 6 0 4-2 6 0'/%3E%3C/svg%3E");
  --emb-temple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l9.5 5.2v2.3H2.5V7.2L12 2zM5 11h2.2v7H5v-7zm3.9 0H11v7H8.9v-7zm4 0H15v7h-2.1v-7zm3.9 0H19v7h-2.2v-7zM2.5 19.3h19V22h-19v-2.7z'/%3E%3C/svg%3E");
  --emb-chest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 6a3 3 0 013-3h8a3 3 0 013 3v3H5V6zm-1 5h16v6a2 2 0 01-2 2H6a2 2 0 01-2-2v-6zm7 1.6h2v2.8h-2v-2.8z'/%3E%3C/svg%3E");
  --emb-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23000' d='M32 6C18 6 8 15 8 28c0 2 .3 4 .9 5.7C13 22 22 14 33 12 24 16 16 24 12 35c2 .7 4 1 6 1 13 0 22-10 22-24 0-3-2-6-8-6z'/%3E%3C/svg%3E");
  --emb-sound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 9v6h3.5L13 20V4L7.5 9H4z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' d='M16.5 8.5a5 5 0 010 7M19 6a8.5 8.5 0 010 12'/%3E%3C/svg%3E");
}

/* ==========================================================
   Stage 2 — Learning flow: intro screen, difficulty modes,
   learning-support card, and after-answer explanation.
   Uses the existing design tokens (parchment / gold / emerald).
   ========================================================== */

/* --- Mission panel: objective + mode chip --- */
.mission-objective {
  margin: 0.15rem 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.35;
}
.mode-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--emerald-900);
  background: rgba(207, 157, 52, 0.2);
  border: 1px solid rgba(176, 128, 31, 0.5);
}
.mode-chip:empty { display: none; }

/* --- Learning-support card (sentence / picture / focus / syllables) --- */
.support-card {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  padding: 0.75rem 0.95rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--parch-50), var(--parch-100));
  border: 1px solid rgba(120, 84, 30, 0.24);
  box-shadow: var(--ring-gold);
}
.support-card:has(.picture-clue[hidden]):has(.sentence-clue[hidden]):has(.focus-chip[hidden]):has(.syllable-chip[hidden]):has(.reveal-btn[hidden]) {
  display: none; /* nothing to show (rare) */
}
.picture-clue {
  flex: 0 0 auto;
  width: clamp(74px, 12vw, 104px);
  height: clamp(74px, 12vw, 104px);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--gold-400);
  background: var(--parch-200);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.picture-clue-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.support-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sentence-clue {
  margin: 0;
  color: var(--emerald-900);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.5vw + 0.95rem, 1.25rem);
  line-height: 1.35;
}
.sentence-clue::before { content: "\201C"; color: var(--gold-600); }
.sentence-clue::after  { content: "\201D"; color: var(--gold-600); }
.support-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.focus-chip, .syllable-chip {
  display: inline-flex;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  border: 1px solid rgba(120, 84, 30, 0.24);
}
.focus-chip { background: rgba(47, 138, 88, 0.16); color: var(--emerald-800); }
.syllable-chip { background: rgba(207, 157, 52, 0.18); color: #6d5115; font-family: var(--font-display); letter-spacing: 0.04em; }
.reveal-btn { align-self: flex-start; min-height: 40px; padding-inline: 0.9rem; font-size: 0.9rem; }

/* Challenge mode: meaning hidden until requested */
.clue-card.meaning-hidden .clue-label { color: #7a5320; }

/* --- After-answer explanation --- */
.word-explanation {
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(10, 50, 30, 0.06), rgba(10, 50, 30, 0.02));
  border: 1px solid rgba(43, 122, 75, 0.35);
  box-shadow: var(--ring-gold);
}
.exp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.exp-syll {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: var(--emerald-900);
}
.exp-focus {
  display: inline-flex;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--emerald-800);
  background: rgba(47, 138, 88, 0.16);
  border: 1px solid rgba(47, 138, 88, 0.28);
}
.exp-dot { color: var(--gold-600); font-weight: 900; }
.exp-note { margin: 0; color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.4; }

/* --- Level intro screen --- */
.level-intro-screen { display: grid; place-items: start center; }
.intro-card {
  width: min(760px, 100%);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border-radius: var(--radius-xl);
  background: var(--panel);
  border: var(--panel-edge);
  box-shadow: var(--shadow-lg);
}
.intro-card h2 { margin: 0.2rem 0 0.1rem; font-size: var(--fs-h2); }
.intro-theme { margin: 0 0 0.4rem; font-weight: 700; }
.intro-block { margin-top: 1.15rem; }
.intro-block h3 {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--emerald-700);
}
.intro-block p { margin: 0; color: var(--ink); font-size: var(--fs-body); line-height: 1.5; }
.criteria-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.criteria-list li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.4;
}
.criteria-list li::before {
  content: "\2713";
  position: absolute;
  left: 0; top: 0;
  width: 1.2rem; height: 1.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 900;
  color: #fff;
  background: var(--emerald-600);
}

/* --- Difficulty mode picker --- */
.mode-block .mode-suggestion, #mode-suggestion { margin-bottom: 0.7rem; }
.mode-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.mode-option {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.3rem;
  min-height: 64px;
  padding: 0.7rem 0.6rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--emerald-900);
  background: linear-gradient(180deg, var(--parch-50), var(--parch-100));
  border: 1.5px solid rgba(120, 84, 30, 0.32);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mode-option strong { font-size: 1rem; }
.mode-option:hover { transform: translateY(-2px); }
.mode-option.is-selected {
  border-color: var(--gold-500);
  background: linear-gradient(180deg, var(--gold-100), var(--gold-300));
  box-shadow: var(--ring-gold), 0 6px 16px rgba(103, 71, 11, 0.22);
}
.suggested-tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--emerald-600);
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
}
.mode-description {
  margin: 0.7rem 0 0;
  min-height: 2.4em;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.4;
}
.intro-card .hero-actions { margin-top: 1.4rem; }

@media (max-width: 640px) {
  .support-card { flex-direction: column; align-items: stretch; text-align: center; }
  .picture-clue { align-self: center; }
  .support-chips { justify-content: center; }
  .mode-options { grid-template-columns: 1fr; }
}

/* ==========================================================
   Stage 4 — Review Camp banner + report review-focus card
   ========================================================== */
.review-banner, .sprint-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(207, 157, 52, 0.16), rgba(176, 128, 31, 0.1));
  border: 1px solid rgba(176, 128, 31, 0.45);
  box-shadow: var(--ring-gold);
}
.review-banner .eyebrow { color: var(--gold-600); }
.review-banner h3 { margin: 0.2rem 0 0.1rem; font-size: var(--fs-h3); }
.review-banner .muted { margin: 0; }
.review-banner .primary-btn, .sprint-banner .primary-btn { min-height: 46px; min-width: clamp(150px, 18vw, 200px); }
.review-banner.is-empty {
  background: linear-gradient(180deg, var(--parch-50), var(--parch-100));
  border-color: rgba(120, 84, 30, 0.24);
  box-shadow: none;
  opacity: 0.85;
}

.focus-card p { margin: 0.35rem 0; color: var(--ink); font-size: var(--fs-body); line-height: 1.5; }
.focus-card strong { color: var(--emerald-800); }
.focus-card { border-top: 4px solid var(--gold-500); }

@media (max-width: 640px) {
  .review-banner, .sprint-banner { flex-direction: column; align-items: stretch; text-align: left; }
  .review-banner .primary-btn, .sprint-banner .primary-btn { width: 100%; }
}

/* ==========================================================
   Stage 5 — Teacher report upgrade
   ========================================================== */
.privacy-note {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-md);
  background: rgba(47, 138, 88, 0.1);
  border: 1px solid rgba(47, 138, 88, 0.28);
  color: var(--emerald-800);
  font-size: var(--fs-small);
  font-weight: 600;
}
.report-subhead {
  margin: 1.4rem 0 0.2rem;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--emerald-700);
}
.level-line { margin: 0 0 0.6rem; color: var(--ink-soft); font-weight: 700; font-size: var(--fs-small); }

/* Per-word evidence tables */
.evidence-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.evidence-table th, .evidence-table td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--parch-line);
  vertical-align: middle;
}
.evidence-table th { color: var(--emerald-700); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.evidence-table td.res-good { color: var(--success); font-weight: 800; }
.evidence-table td.res-mid  { color: #9a6a1c; font-weight: 800; }
.evidence-table td.res-bad  { color: var(--danger); font-weight: 800; }

/* Pattern analysis bars */
.pattern-card table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.pattern-card th, .pattern-card td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--parch-line); }
.pattern-card th { color: var(--emerald-700); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.acc-bar {
  display: inline-block;
  width: clamp(60px, 12vw, 120px);
  height: 9px;
  border-radius: 999px;
  background: rgba(120, 84, 30, 0.16);
  overflow: hidden;
  vertical-align: middle;
  margin-right: 0.4rem;
}
.acc-fill { display: block; height: 100%; border-radius: 999px; }
.acc-fill.low  { background: linear-gradient(90deg, #c96a48, var(--danger)); }
.acc-fill.mid  { background: linear-gradient(90deg, var(--gold-400), var(--gold-600)); }
.acc-fill.high { background: linear-gradient(90deg, var(--emerald-500), var(--emerald-700)); }

/* Recommendations */
.recs-card { border-top: 4px solid var(--emerald-600); }
.recs-card ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.recs-card li { color: var(--ink); font-size: var(--fs-body); line-height: 1.45; }

/* Print rules for the teacher report now live in css/print.css. */

/* ==========================================================
   Stage 6 — Round-based sessions: level progress + intro round line
   ========================================================== */
.level-progress {
  position: relative;
  height: 8px;
  margin: 0.7rem 0 0.2rem;
  border-radius: 999px;
  background: rgba(120, 84, 30, 0.18);
  overflow: hidden;
}
.level-progress > span {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-600));
  transition: width .4s ease;
}
.level-card.is-mastered .level-progress > span {
  background: linear-gradient(90deg, var(--emerald-500), var(--emerald-700));
}
.small-chip.chip-mastered {
  background: rgba(43, 122, 75, 0.18);
  color: var(--emerald-800);
  border-color: rgba(43, 122, 75, 0.35);
}
.level-card.is-mastered { border-top-color: var(--emerald-600); }

.intro-round {
  margin: 0.1rem 0 0.4rem;
  font-weight: 800;
  font-size: var(--fs-small);
  color: var(--gold-600);
}

/* ==========================================================
   Safari Spell Sprint (Stage 1)
   ========================================================== */
.sprint-banner {
  background: linear-gradient(180deg, rgba(47,138,88,0.16), rgba(20,90,55,0.12));
  border-color: rgba(43,122,75,0.42);
}
.sprint-banner .eyebrow { color: var(--emerald-700); }

/* --- Setup --- */
.sprint-setup { display: grid; place-items: start center; }
.sprint-card {
  width: min(680px, 100%);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--radius-xl);
  background: var(--panel);
  border: var(--panel-edge);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.sprint-emblem {
  width: 64px; height: 64px; margin: 0 auto 0.5rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--gold-300), var(--gold-500) 70%);
  border: 3px solid var(--gold-600);
  box-shadow: var(--ring-gold);
  position: relative;
}
.sprint-emblem::after {
  content: ""; position: absolute; inset: 18px;
  border-radius: 50%; border: 3px solid var(--emerald-900);
  border-top-color: transparent; border-right-color: transparent;
  transform: rotate(35deg);
}
.sprint-card h2 { margin: 0.1rem 0 0.2rem; font-size: var(--fs-h2); }
.sprint-card .lead { color: var(--ink-soft); margin: 0 0 1rem; }
.sprint-setup-block { margin-top: 1.1rem; text-align: left; }
.sprint-setup-block h3 {
  margin: 0 0 0.5rem; font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--emerald-700);
}
.sprint-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sprint-option {
  flex: 1 1 auto; min-width: 90px; min-height: 48px;
  padding: 0.55rem 0.9rem; border-radius: var(--radius-md); cursor: pointer;
  font-family: var(--font-body); font-weight: 800; color: var(--emerald-900);
  background: linear-gradient(180deg, var(--parch-50), var(--parch-100));
  border: 1.5px solid rgba(120,84,30,0.32);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.sprint-option:hover { transform: translateY(-2px); }
.sprint-option.is-selected {
  border-color: var(--gold-500);
  background: linear-gradient(180deg, var(--gold-100), var(--gold-300));
  box-shadow: var(--ring-gold);
}

/* --- Play --- */
.sprint-play { display: grid; gap: 1rem; }
.sprint-hud {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.9rem; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--parch-50), var(--parch-100));
  border: 1px solid rgba(120,84,30,0.28); box-shadow: var(--ring-gold);
}
.hud-item { display: flex; flex-direction: column; min-width: 64px; }
.hud-item span { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.hud-item strong { font-family: var(--font-display); font-size: 1.4rem; color: var(--emerald-900); line-height: 1; }
#sprint-timer { color: var(--emerald-800); transition: color .2s ease; }
#sprint-timer.warn { color: #9a6a1c; animation: sprintPulse 1s ease-in-out infinite; }
#sprint-timer.critical { color: var(--danger); animation: sprintPulse 0.6s ease-in-out infinite; }
@keyframes sprintPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.sprint-hud .ghost-btn { margin-left: auto; }

.sprint-stage {
  padding: clamp(1rem, 3vw, 1.8rem);
  border-radius: var(--radius-xl);
  background: var(--panel); border: var(--panel-edge); box-shadow: var(--shadow-lg);
  text-align: center;
}
.sprint-clue-card {
  padding: 0.9rem 1rem; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--parch-50), var(--parch-100));
  border: 1px solid rgba(120,84,30,0.24);
}
.sprint-sentence { margin: 0 0 0.4rem; font-family: var(--font-display); font-size: clamp(1.05rem, 1vw + 1rem, 1.4rem); color: var(--emerald-900); }
.sprint-clue-row { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.sprint-arabic { font-size: 1.3rem; color: var(--ink); font-weight: 700; }
.sprint-prompt { margin: 1.1rem 0 0.6rem; font-weight: 800; color: var(--ink-soft); }
.sprint-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.sprint-choice {
  min-height: 84px; padding: 0.8rem 1rem; cursor: pointer;
  font-family: var(--font-display); font-size: clamp(1.3rem, 2vw + 1rem, 2rem); font-weight: 700;
  color: var(--emerald-900); letter-spacing: 0.02em;
  background: linear-gradient(180deg, var(--parch-50), var(--parch-200));
  border: 2px solid var(--gold-400); border-radius: var(--radius-lg);
  box-shadow: 0 4px 0 rgba(120,84,30,0.28), var(--ring-gold);
  transition: transform .1s ease, box-shadow .1s ease, background .15s ease;
}
.sprint-choice:hover:not(:disabled) { transform: translateY(-2px); }
.sprint-choice:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(120,84,30,0.28); }
.sprint-choice.is-correct {
  border-color: var(--emerald-600); color: #fff;
  background: linear-gradient(180deg, var(--emerald-500), var(--emerald-700));
  box-shadow: 0 0 0 3px rgba(47,138,88,0.3), 0 6px 16px rgba(20,80,50,0.3);
}
.sprint-choice.is-wrong {
  border-color: var(--danger); color: #fff;
  background: linear-gradient(180deg, #d98b5f, var(--danger));
}
.sprint-feedback { min-height: 1.6em; margin-top: 0.9rem; font-weight: 700; font-size: var(--fs-body); }
.sprint-feedback.good { color: var(--success); }
.sprint-feedback.bad { color: var(--danger); }
.sprint-toast {
  position: fixed; left: 50%; top: 22%; transform: translate(-50%, -8px);
  padding: 0.6rem 1.1rem; border-radius: 999px; pointer-events: none;
  font-family: var(--font-display); font-weight: 800; color: #fff;
  background: linear-gradient(180deg, var(--gold-500), var(--gold-600));
  box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .2s ease, transform .2s ease; z-index: 40;
}
.sprint-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --- Results --- */
.sprint-results { display: grid; place-items: start center; }
.sprint-result-card {
  width: min(680px, 100%); padding: clamp(1.4rem, 3vw, 2.2rem); text-align: center;
  border-radius: var(--radius-xl); background: var(--panel); border: var(--panel-edge); box-shadow: var(--shadow-lg);
}
.sprint-bigscore { display: flex; flex-direction: column; align-items: center; margin: 0.4rem 0 0.2rem; }
.sprint-bigscore strong { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 4.5rem); line-height: 1; color: var(--gold-600); }
.sprint-bigscore span { color: var(--ink-soft); font-weight: 700; }
.sprint-message { color: var(--emerald-800); font-weight: 700; margin: 0.4rem 0 1rem; }
.sprint-missed { margin-top: 1rem; text-align: left; }
.sprint-missed h3 { margin: 0 0 0.4rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--emerald-700); }
.sprint-missed-words { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.4rem; }
.miss-chip {
  display: inline-flex; padding: 0.28rem 0.7rem; border-radius: 999px; font-weight: 800; font-size: 0.9rem;
  color: #7a3b2b; background: rgba(190,90,60,0.14); border: 1px solid rgba(190,90,60,0.3);
}
.hero-actions.wrap { flex-wrap: wrap; }

@media (max-width: 560px) {
  .sprint-choices { grid-template-columns: 1fr; }
  .hud-item { min-width: 54px; }
  .hud-item strong { font-size: 1.15rem; }
}

/* Sprint results card in the teacher report (Stage 3) */
.sprint-report-card { border-top: 4px solid var(--emerald-600); }
.sprint-report-card p { margin: 0.4rem 0; color: var(--ink); font-size: var(--fs-body); line-height: 1.5; }
.sprint-report-card strong { color: var(--emerald-800); }
.summary-item strong small { font-size: 0.7em; color: var(--muted); font-weight: 700; }

/* ==========================================================
   Safari Spell Sprint — Stage 4 polish (motion / mobile)
   ========================================================== */
.sprint-timerbar {
  height: 10px; margin-top: 0.5rem; border-radius: 999px; overflow: hidden;
  background: rgba(120, 84, 30, 0.16);
  border: 1px solid rgba(120, 84, 30, 0.22);
}
.sprint-timerbar > span {
  display: block; height: 100%; border-radius: 999px; width: 100%;
  background: linear-gradient(90deg, var(--emerald-500), var(--emerald-700));
  transition: width .2s linear, background .4s ease;
}
.sprint-timerbar.warn > span { background: linear-gradient(90deg, var(--gold-400), var(--gold-600)); }
.sprint-timerbar.critical > span { background: linear-gradient(90deg, #d98b5f, var(--danger)); }

/* Each new question's choices fade/scale in for a fast, clean feel */
.sprint-choice { animation: sprintChoiceIn .18s ease both; }
@keyframes sprintChoiceIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Satisfying pop on a correct pick */
.sprint-choice.is-correct { animation: sprintCorrectPop .34s ease; }
@keyframes sprintCorrectPop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* Streak heat */
#sprint-streak.hot {
  color: var(--gold-600);
  text-shadow: 0 0 10px rgba(207, 157, 52, 0.55);
  animation: sprintHeat 0.9s ease-in-out infinite;
}
@keyframes sprintHeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Keep the HUD (timer) visible while playing on small screens */
@media (max-width: 720px) {
  .sprint-hud {
    position: sticky; top: 8px; z-index: 20;
    backdrop-filter: saturate(1.1);
  }
  .sprint-stage { padding: 1rem 0.85rem; }
  .sprint-choice { min-height: 72px; }
}
@media (max-width: 420px) {
  .hud-item span { font-size: 0.62rem; }
  .hud-item strong { font-size: 1.05rem; }
  .sprint-arabic { font-size: 1.1rem; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  #sprint-timer.warn, #sprint-timer.critical,
  #sprint-streak.hot { animation: none; }
  .sprint-choice, .sprint-choice.is-correct { animation: none; }
  .sprint-timerbar > span { transition: none; }
  .sprint-toast { transition: opacity .2s ease; }
}

/* ==========================================================
   Safari Sentence Quest — contextual vocabulary / reading mode
   Matches the jungle-safari system (emerald / gold / parchment).
   Parchment "explorer journal" scroll + carved trail-sign choices.
   ========================================================== */

/* --- Levels-screen entry banner --- */
.sentence-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.2rem; margin: 0 0 1.1rem; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(207,157,52,0.18), rgba(176,128,31,0.12));
  border: 1px solid rgba(176,128,31,0.42); box-shadow: var(--ring-gold);
}
.sentence-banner .eyebrow { color: var(--gold-600); }
.sentence-banner h3 { margin: 0.2rem 0 0.1rem; font-size: var(--fs-h3); }
.sentence-banner .muted { margin: 0; }
.sentence-banner .primary-btn { min-height: 46px; min-width: clamp(150px, 18vw, 200px); }

/* --- Setup --- */
.sq-setup { display: grid; place-items: start center; }
.sq-card {
  width: min(680px, 100%); padding: clamp(1.4rem, 3vw, 2.2rem); text-align: center;
  border-radius: var(--radius-xl); background: var(--panel); border: var(--panel-edge); box-shadow: var(--shadow-lg);
}
.sq-emblem {
  width: 64px; height: 64px; margin: 0 auto 0.5rem; position: relative;
  border-radius: 50%; border: 3px solid var(--gold-600); box-shadow: var(--ring-gold);
  background: radial-gradient(circle at 42% 40%, var(--parch-50), var(--parch-200) 70%);
}
/* Magnifying-glass motif */
.sq-emblem::before {
  content: ""; position: absolute; left: 15px; top: 15px; width: 24px; height: 24px;
  border-radius: 50%; border: 3px solid var(--emerald-800); background: rgba(47,138,88,0.12);
}
.sq-emblem::after {
  content: ""; position: absolute; left: 38px; top: 38px; width: 16px; height: 5px; border-radius: 3px;
  background: var(--emerald-900); transform: rotate(45deg);
}
.sq-card h2 { margin: 0.1rem 0 0.2rem; font-size: var(--fs-h2); }
.sq-card .lead { color: var(--ink-soft); margin: 0 0 1rem; }
.sq-setup-block { margin-top: 1.1rem; text-align: left; }
.sq-setup-block h3 {
  margin: 0 0 0.5rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--emerald-700);
}
.sq-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sq-option {
  flex: 1 1 auto; min-width: 96px; min-height: 48px; padding: 0.55rem 0.9rem; cursor: pointer;
  border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 800; color: var(--emerald-900);
  background: linear-gradient(180deg, var(--parch-50), var(--parch-100));
  border: 1.5px solid rgba(120,84,30,0.32);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.sq-option:hover { transform: translateY(-2px); }
.sq-option.is-selected {
  border-color: var(--gold-500);
  background: linear-gradient(180deg, var(--gold-100), var(--gold-300));
  box-shadow: var(--ring-gold);
}
.sq-style-desc { margin: 0.6rem 0 0; color: var(--ink-soft); font-size: var(--fs-small); min-height: 1.4em; }

/* --- Play --- */
.sq-play { display: grid; gap: 1rem; }
.sq-hud {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.9rem; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--parch-50), var(--parch-100));
  border: 1px solid rgba(120,84,30,0.28); box-shadow: var(--ring-gold);
}
.sq-hud .ghost-btn { margin-right: auto; }
#sq-timer { color: var(--emerald-800); transition: color .2s ease; }
#sq-timer.warn { color: #9a6a1c; animation: sqPulse 1s ease-in-out infinite; }
#sq-timer.critical { color: var(--danger); animation: sqPulse 0.6s ease-in-out infinite; }
@keyframes sqPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.sq-timerbar {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(120, 84, 30, 0.16); border: 1px solid rgba(120, 84, 30, 0.22);
}
.sq-timerbar > span {
  display: block; height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--emerald-500), var(--emerald-700));
  transition: width .2s linear, background .4s ease;
}
.sq-timerbar.warn > span { background: linear-gradient(90deg, var(--gold-400), var(--gold-600)); }
.sq-timerbar.critical > span { background: linear-gradient(90deg, #d98b5f, var(--danger)); }

.sq-stage {
  padding: clamp(1rem, 3vw, 1.8rem); border-radius: var(--radius-xl); text-align: center;
  background: var(--panel); border: var(--panel-edge); box-shadow: var(--shadow-lg);
}
.sq-mode-title {
  margin: 0 0 0.9rem; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--emerald-700); font-weight: 800;
}
.sq-level-tag { color: var(--gold-600); }

/* Parchment "explorer journal" scroll holding the sentence */
.sq-scroll {
  position: relative; margin: 0 auto; max-width: 620px;
  padding: clamp(1.1rem, 2.4vw, 1.7rem) clamp(1rem, 2.4vw, 1.6rem);
  border-radius: 14px;
  background:
    repeating-linear-gradient(180deg, transparent 0 30px, var(--parch-line) 30px 31px),
    linear-gradient(180deg, var(--parch-50), var(--parch-100));
  border: 1px solid rgba(120,84,30,0.30);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), var(--shadow-md);
}
.sq-scroll::before, .sq-scroll::after {
  content: ""; position: absolute; left: 8px; right: 8px; height: 10px;
  background: linear-gradient(180deg, var(--parch-300), var(--parch-200));
  border: 1px solid rgba(120,84,30,0.28); border-radius: 6px;
}
.sq-scroll::before { top: -6px; }
.sq-scroll::after { bottom: -6px; }
.sq-scroll-pin {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--gold-300), var(--gold-600));
  border: 2px solid var(--gold-600); box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.sq-sentence {
  margin: 0; font-family: var(--font-display); line-height: 1.6;
  font-size: clamp(1.15rem, 1.3vw + 1rem, 1.6rem); color: var(--emerald-950);
}
.sq-blank {
  display: inline-block; min-width: 4.5ch; margin: 0 0.15em; padding: 0 0.35em;
  border-bottom: 3px solid var(--gold-600);
  background: linear-gradient(180deg, transparent 60%, rgba(207,157,52,0.16));
  border-radius: 3px;
}

.sq-support { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin: 0.9rem 0 0.2rem; }
.sq-hint-btn { min-height: 42px; }
.sq-hint-text { font-size: 1.25rem; font-weight: 800; color: var(--ink); font-family: var(--font-arabic); }

.sq-prompt { margin: 1rem 0 0.7rem; font-weight: 800; color: var(--ink-soft); }

.sq-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.sq-choice {
  display: flex; align-items: center; gap: 0.6rem; text-align: left;
  min-height: 66px; padding: 0.7rem 0.9rem; cursor: pointer;
  font-family: var(--font-display); font-size: clamp(1.15rem, 1vw + 0.9rem, 1.55rem); font-weight: 700;
  color: var(--emerald-900);
  background: linear-gradient(180deg, var(--parch-50), var(--parch-200));
  border: 2px solid var(--gold-400); border-radius: var(--radius-lg);
  box-shadow: 0 4px 0 rgba(120,84,30,0.28), var(--ring-gold);
  transition: transform .1s ease, box-shadow .1s ease, background .15s ease;
  animation: sqChoiceIn .18s ease both;
}
@keyframes sqChoiceIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
.sq-choice:hover:not(:disabled) { transform: translateY(-2px); }
.sq-choice:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(120,84,30,0.28); }
.sq-choice:disabled { cursor: default; }
.sq-choice-key {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 8px;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 800; color: var(--emerald-900);
  background: rgba(207,157,52,0.22); border: 1px solid rgba(176,128,31,0.4);
}
.sq-choice-word { flex: 1 1 auto; }
.sq-choice-mark { flex: 0 0 auto; font-size: 1.3rem; font-weight: 900; min-width: 1.2em; text-align: right; }
.sq-choice.is-correct {
  border-color: var(--emerald-600); color: #fff;
  background: linear-gradient(180deg, var(--emerald-500), var(--emerald-700));
  box-shadow: 0 0 0 3px rgba(47,138,88,0.3), 0 6px 16px rgba(20,80,50,0.3);
  animation: sqCorrectPop .34s ease;
}
.sq-choice.is-correct .sq-choice-key { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.5); color: #fff; }
.sq-choice.is-correct .sq-choice-mark { color: #eafff2; }
@keyframes sqCorrectPop { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
.sq-choice.is-wrong {
  border-color: var(--danger); color: #fff;
  background: linear-gradient(180deg, #d98b5f, var(--danger));
}
.sq-choice.is-wrong .sq-choice-key { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.45); color: #fff; }
.sq-choice.is-wrong .sq-choice-mark { color: #fff; }

.sq-feedback {
  min-height: 1.6em; margin-top: 1rem; padding: 0 0.2rem; font-weight: 600; font-size: var(--fs-body); line-height: 1.5;
}
.sq-feedback.good { color: var(--success); }
.sq-feedback.bad { color: #8a3b22; }
.sq-feedback strong { font-weight: 800; }
.sq-fb-arabic { display: inline-block; margin-inline-start: 0.4rem; font-family: var(--font-arabic); font-weight: 800; color: var(--ink); }

.sq-next-wrap { margin-top: 0.9rem; min-height: 8px; }
.sq-next-wrap .primary-btn { min-width: clamp(160px, 24vw, 240px); }

.sq-toast {
  position: fixed; left: 50%; top: 22%; transform: translate(-50%, -8px);
  padding: 0.6rem 1.1rem; border-radius: 999px; pointer-events: none; z-index: 40;
  font-family: var(--font-display); font-weight: 800; color: #fff;
  background: linear-gradient(180deg, var(--emerald-500), var(--emerald-700));
  box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.sq-toast.show { opacity: 1; transform: translate(-50%, 0); }

#sq-streak.hot {
  color: var(--gold-600); text-shadow: 0 0 10px rgba(207, 157, 52, 0.55);
  animation: sqHeat 0.9s ease-in-out infinite;
}
@keyframes sqHeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* --- Results --- */
.sq-results { display: grid; place-items: start center; }
.sq-result-card {
  width: min(700px, 100%); padding: clamp(1.4rem, 3vw, 2.2rem); text-align: center;
  border-radius: var(--radius-xl); background: var(--panel); border: var(--panel-edge); box-shadow: var(--shadow-lg);
}
.sq-bigscore { display: flex; flex-direction: column; align-items: center; margin: 0.4rem 0 0.2rem; }
.sq-bigscore strong { font-family: var(--font-display); font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1; color: var(--gold-600); }
.sq-bigscore span { color: var(--ink-soft); font-weight: 700; }
.sq-message { color: var(--emerald-800); font-weight: 700; margin: 0.4rem 0 1rem; }
.sq-missed { margin-top: 1rem; text-align: left; }
.sq-missed h3 { margin: 0 0 0.4rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--emerald-700); }
.sq-missed-words { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.4rem; }

/* --- Teacher report card --- */
.sentence-report-card { border-top: 4px solid var(--gold-500); }
.sentence-report-card p { margin: 0.4rem 0; color: var(--ink); font-size: var(--fs-body); line-height: 1.5; }
.sentence-report-card strong { color: var(--emerald-800); }
.sentence-report-card .report-note { color: var(--ink-soft); font-size: var(--fs-small); }

/* --- Responsive --- */
@media (max-width: 720px) {
  .sq-hud { position: sticky; top: 8px; z-index: 20; backdrop-filter: saturate(1.1); }
  .sq-stage { padding: 1rem 0.85rem; }
}
@media (max-width: 560px) {
  .sq-choices { grid-template-columns: 1fr; }
  .sentence-banner { flex-direction: column; align-items: stretch; text-align: left; }
  .sentence-banner .primary-btn { width: 100%; }
  .hud-item { min-width: 54px; }
}
@media (max-width: 420px) {
  .hud-item span { font-size: 0.62rem; }
  .hud-item strong { font-size: 1.05rem; }
  .sq-choice { min-height: 58px; font-size: 1.1rem; }
  .sq-hint-text { font-size: 1.05rem; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  #sq-timer.warn, #sq-timer.critical, #sq-streak.hot { animation: none; }
  .sq-choice, .sq-choice.is-correct { animation: none; }
  .sq-timerbar > span { transition: none; }
  .sq-toast { transition: opacity .2s ease; }
}

/* ==========================================================================
   ██  BOARD-GAME EXPERIENCE LAYER  ██
   Turns the spelling activity into a luxury jungle-safari board game.
   Additive only — every selector below is a new class or a scoped
   enhancement, so nothing here overrides the existing engine styles.
   Built on the existing tokens: emerald / gold / parchment / wood.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BoardGameFX — motion vocabulary (transform/opacity only)
   -------------------------------------------------------------------------- */
@keyframes bgfxCardFlip {
  0%   { transform: perspective(900px) rotateX(-78deg) translateY(-10px); opacity: 0; }
  60%  { transform: perspective(900px) rotateX(8deg); opacity: 1; }
  100% { transform: perspective(900px) rotateX(0); opacity: 1; }
}
.bgfx-card-flip { animation: bgfxCardFlip .6s cubic-bezier(.2, .8, .25, 1) both; transform-origin: top center; }

@keyframes bgfxBoardPulse { 0%,100% { transform: scale(1); } 45% { transform: scale(1.012); } }
.bgfx-board-pulse { animation: bgfxBoardPulse .62s ease; }

@keyframes bgfxBoardWobble {
  0%,100% { transform: rotate(0) translateX(0); }
  20% { transform: rotate(-.7deg) translateX(-4px); }
  45% { transform: rotate(.6deg) translateX(4px); }
  70% { transform: rotate(-.35deg) translateX(-2px); }
}
.bgfx-board-wobble { animation: bgfxBoardWobble .5s ease; }

@keyframes bgfxTileLift { 0% { transform: none; } 50% { transform: translateY(-6px) scale(1.06); } 100% { transform: none; } }
.bgfx-tile-lift { animation: bgfxTileLift .2s ease; }

@keyframes bgfxTilePlace {
  0% { transform: translateY(-10px) scale(1.12); }
  60% { transform: translateY(2px) scale(.96); }
  100% { transform: none; }
}
.bgfx-tile-place { animation: bgfxTilePlace .3s cubic-bezier(.2, .9, .25, 1.3); }

@keyframes bgfxTokenHop {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-16px) scale(1.08); }
  70% { transform: translateY(-4px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}
.bgfx-token-hop { animation: bgfxTokenHop .46s cubic-bezier(.3, .8, .3, 1); }

@keyframes bgfxScreenIn { from { opacity: 0; transform: translateY(10px) scale(.996); } to { opacity: 1; transform: none; } }
.bgfx-screen-in { animation: bgfxScreenIn .5s cubic-bezier(.2, .8, .25, 1) both; }

@keyframes bgfxChestOpen {
  0% { transform: scale(.6) rotate(-6deg); opacity: 0; }
  55% { transform: scale(1.08) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.bgfx-chest-open { animation: bgfxChestOpen 1s cubic-bezier(.2, .9, .25, 1.2) both; }

@keyframes bgfxMapReveal {
  0% { transform: scale(.4) rotate(-10deg); opacity: 0; filter: brightness(1.6); }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; filter: none; }
}
.bgfx-map-reveal { animation: bgfxMapReveal .95s cubic-bezier(.2, .9, .25, 1.2) both; }

/* Streak / achievement toasts (stacked, top-centre) */
.bgfx-toast-layer {
  position: fixed; left: 50%; top: clamp(64px, 10vh, 96px);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  z-index: 10000; pointer-events: none;
}
.bgfx-toast {
  padding: .55rem 1.15rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  color: var(--emerald-950);
  background: linear-gradient(180deg, var(--parch-50), var(--parch-200));
  border: 2px solid var(--gold-500);
  box-shadow: 0 10px 26px rgba(6, 22, 13, .38), var(--ring-gold);
  opacity: 0; transform: translateY(-12px) scale(.9);
  transition: opacity .28s ease, transform .28s cubic-bezier(.2, .9, .25, 1.3);
}
.bgfx-toast.is-gold {
  color: #3a2a06;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  border-color: var(--gold-600);
}
.bgfx-toast.show { opacity: 1; transform: translateY(0) scale(1); }

/* Floating "+1 Trail Step" micro-reward chip */
.bgfx-micro {
  position: fixed; z-index: 10000; pointer-events: none;
  transform: translate(-50%, 0);
  padding: .2rem .6rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  color: #3a2a06;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  border: 1.5px solid var(--gold-600);
  box-shadow: 0 6px 16px rgba(6, 22, 13, .32);
  opacity: 0;
  transition: transform .95s cubic-bezier(.2, .8, .2, 1), opacity .95s ease;
}
.bgfx-micro.go { opacity: 1; transform: translate(-50%, -46px) scale(1.04); }

/* Retired: the drifting-leaves ambient layer. */
.bgfx-leaves, .bgfx-leaf { display: none !important; }

/* --------------------------------------------------------------------------
   2. Player token (compass pawn) — used on the board and the mini-trail
   -------------------------------------------------------------------------- */
.player-token, .trail-token {
  --tok: 34px;
  width: var(--tok); height: var(--tok); border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, #fff6dc 0 14%, transparent 15%),
    conic-gradient(from 0deg, var(--gold-400), var(--gold-600), var(--gold-400));
  border: 2.5px solid #fff3cf;
  box-shadow: 0 6px 14px rgba(6, 22, 13, .45), inset 0 0 0 2px var(--gold-600);
  position: relative; display: inline-block; flex: 0 0 auto;
}
.player-token::before, .trail-token::before {
  /* compass needle */
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 13px solid #b5372a;
  transform: translateY(-3px);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .3));
}
.player-token::after, .trail-token::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 13px solid #f6f0e0;
  transform: translateY(3px);
}
/* On the board, the token perches above the current landmark. */
.trail-node .board-token {
  position: absolute; top: -18px; left: 50%; translate: -50% 0; z-index: 3;
}
.trail-token { --tok: 26px; position: absolute; top: -20px; left: 50%; translate: -50% 0; z-index: 4; }

/* --------------------------------------------------------------------------
   3. START SCREEN — "open the board game box"
   -------------------------------------------------------------------------- */
.hero-card.game-box {
  position: relative;
  border-image: linear-gradient(160deg, var(--gold-400), var(--gold-600)) 1;
}
.hero-card.game-box::after {
  /* torn-parchment shimmer sweeping across the lid */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 244, 207, .28) 50%, transparent 65%);
  background-size: 250% 100%; mix-blend-mode: screen; pointer-events: none;
  animation: bgfxShimmer 6s ease-in-out infinite;
}
@keyframes bgfxShimmer { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }

.hero-visual.box-lid::before { filter: saturate(1.05) brightness(1.02); }

.start-modes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem;
  margin-top: 1.1rem;
}
.start-mode-card {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .8rem .6rem; text-align: center;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 250, 235, .96), rgba(233, 214, 175, .96));
  border: 1.5px solid rgba(120, 84, 30, .34);
  box-shadow: 0 8px 18px rgba(6, 22, 13, .22), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .18s cubic-bezier(.2, .8, .25, 1), box-shadow .18s ease;
  cursor: pointer; color: var(--ink);
}
.start-mode-card:hover, .start-mode-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(6, 22, 13, .3), var(--ring-gold);
}
.start-mode-emblem {
  width: 84px; height: 84px; border-radius: 16px;
  display: grid; place-items: center;
  position: relative;
  background: none;
}
.start-mode-emblem::before {
  content: ""; position: absolute; inset: 0;
  background: center / contain no-repeat;
}
.start-mode-emblem.tile::before  { background-image: url("../assets/ui/mode-tile.webp"); }
.start-mode-emblem.speed::before { background-image: url("../assets/ui/mode-sprint.webp"); }
.start-mode-emblem.story::before { background-image: url("../assets/ui/mode-sentence.webp"); }
.start-mode-emblem.camp::before  { background-image: url("../assets/ui/mode-review.webp"); }
.start-mode-name { font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--emerald-900); }
.start-mode-sub { font-size: .74rem; color: var(--muted); }

.teacher-note-collapsible { padding: 0; }
.teacher-note-collapsible > summary {
  cursor: pointer; list-style: none; padding: .7rem 1rem;
  font-size: var(--fs-small); color: var(--ink-soft);
}
.teacher-note-collapsible > summary::-webkit-details-marker { display: none; }
.teacher-note-collapsible > summary::before { content: "▸ "; color: var(--gold-600); }
.teacher-note-collapsible[open] > summary::before { content: "▾ "; }
.teacher-note-collapsible > p { margin: 0 1rem .8rem; font-size: var(--fs-small); color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   4. LEVEL BOARD — the winding jungle treasure trail
   -------------------------------------------------------------------------- */
.jungle-board {
  position: relative;
  padding: clamp(1rem, 3vw, 2rem) clamp(.8rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.4rem);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(47, 138, 88, .22), transparent 60%),
    repeating-linear-gradient(90deg, rgba(120, 84, 30, .05) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, var(--parch-50), var(--parch-200));
  border: 1px solid rgba(120, 84, 30, .3);
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255, 255, 255, .35), inset 0 0 60px rgba(120, 84, 30, .12);
  overflow: hidden;
}
.jungle-board::before {
  /* faint compass rose watermark */
  content: ""; position: absolute; right: 3%; bottom: 4%;
  width: clamp(80px, 12vw, 160px); aspect-ratio: 1;
  background: var(--emb-compass) center / contain no-repeat;
  opacity: .08; pointer-events: none;
}
.jungle-board::after {
  /* dashed "X marks the spot" corner */
  content: "✕"; position: absolute; left: 4%; top: 6%;
  font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.4rem);
  color: rgba(164, 65, 44, .35); transform: rotate(-12deg); pointer-events: none;
}

.map-collection {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 auto 1.2rem; padding: .5rem .9rem; width: fit-content;
  border-radius: 999px;
  background: rgba(11, 35, 23, .5); border: 1px solid var(--gold-600);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 207, .18);
  position: relative; z-index: 1;
}
.map-collection-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-300); font-weight: 800; }
.map-slots { display: inline-flex; gap: .35rem; }
.map-slot {
  width: 18px; height: 18px; border-radius: 4px;
  background: rgba(255, 244, 207, .12); border: 1px dashed rgba(255, 244, 207, .4);
}
.map-slot.filled {
  background: var(--reward-map-image, var(--gold-400)) center / cover no-repeat, var(--gold-500);
  border: 1px solid var(--gold-300);
  box-shadow: 0 0 8px rgba(242, 194, 86, .6);
}
.map-collection-count { font-family: var(--font-display); font-weight: 700; color: var(--gold-100); }

.board-canvas { position: relative; z-index: 1; }
.trail {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(.4rem, 1.4vw, 1rem);
}
.trail-cell { position: relative; flex: 1 1 0; display: flex; justify-content: center; }
.trail-cell.up   { transform: translateY(-16px); }
.trail-cell.down { transform: translateY(16px); }
/* dotted connector between landmarks (desktop: horizontal footprints) */
.trail-cell:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; left: 82%; width: 40%; height: 4px;
  background-image: radial-gradient(circle, var(--gold-600) 0 45%, transparent 46%);
  background-size: 14px 4px; background-repeat: repeat-x;
  opacity: .55; z-index: 0; pointer-events: none;
}
.trail-cell.up:not(:last-child)::after   { top: 62%; }
.trail-cell.down:not(:last-child)::after { top: 38%; }

.trail-node {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  width: 100%; max-width: 220px; padding: 1rem .8rem 1.1rem; text-align: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 251, 240, .98), rgba(236, 218, 182, .98));
  border: 1px solid rgba(120, 84, 30, .34);
  border-top: 5px solid var(--accent, var(--emerald-600));
  box-shadow: 0 14px 30px rgba(6, 22, 13, .34), inset 0 1px 0 rgba(255, 255, 255, .55);
  color: var(--ink); cursor: pointer;
  transition: transform .2s cubic-bezier(.2, .8, .25, 1), box-shadow .2s ease;
}
.trail-node.camp     { --accent: #2f8a58; }
.trail-node.river    { --accent: #2f7fa8; }
.trail-node.temple   { --accent: #8a6f9a; }
.trail-node.treasure { --accent: var(--gold-500); }
.trail-node:hover, .trail-node:focus-visible {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 22px 44px rgba(6, 22, 13, .42), var(--ring-gold);
}
.trail-node:active { transform: translateY(-2px) scale(.99); }

/* The number sits IN the coin, not near it.
   It was inheriting the body's 1.6 line-height, so the glyph box was taller
   than the 30px circle and the digit floated up and left. Explicit box sizing,
   line-height 1, and tabular figures so 1 and 8 occupy the same width. */
.node-step {
  position: absolute; top: -12px; left: -10px;
  box-sizing: border-box;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: center;
  color: #3a2a06;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  border: 2px solid #fff3cf; box-shadow: 0 4px 10px rgba(6, 22, 13, .35);
}

/* A hidden cell is still a child, so the last VISIBLE cell has to be told it
   is the end of the trail — otherwise the footprints walk off into nothing. */
.trail-cell[hidden] { display: none; }
.trail-cell.is-tail::after { display: none; }
.node-badge {
  width: clamp(64px, 8vw, 88px); aspect-ratio: 1; border-radius: 16px;
  background-size: cover; background-position: center;
  box-shadow: 0 6px 16px rgba(6, 22, 13, .4), inset 0 0 0 3px rgba(255, 244, 207, .35);
}
.node-badge.camp     { background-image: var(--badge-camp); }
.node-badge.river    { background-image: var(--badge-river); }
.node-badge.temple   { background-image: var(--badge-temple); }
.node-badge.treasure { background-image: var(--badge-treasure); }
.node-body { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 100%; }
.node-eyebrow { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--accent); }
.node-name { font-family: var(--font-display); font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 700; color: var(--emerald-900); line-height: 1.1; }
.node-progress { width: 84%; height: 7px; border-radius: 999px; background: rgba(120, 84, 30, .2); overflow: hidden; }
.node-progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-400), var(--gold-600)); }
.node-meta { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }
.node-chip {
  font-size: .68rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px;
  background: rgba(47, 138, 88, .14); color: var(--emerald-800);
}
.node-chip.state { background: rgba(207, 157, 52, .2); color: #6d5115; }
/* The play buttons are GEL now, not carved wood.
   The wooden plank texture (button-gold.webp) was a picture of a button
   stretched to fit — it went muddy at small sizes and its painted highlight
   never matched the light on the real buttons. This is the same gold gel
   recipe as .primary-btn: hard side wall, specular top, and it bottoms out
   1:1 on press. Same object, same physics, everywhere in the game. */
.node-cta {
  position: relative;
  isolation: isolate;
  margin-top: .35rem;
  display: inline-block;
  font-family: var(--font-display); font-weight: 800; font-size: .9rem;
  line-height: 1.15;
  color: #3f2c07;
  padding: .46rem 1.15rem;
  border: 2px solid #f7e3ac;
  border-radius: .7rem;
  background: linear-gradient(180deg, #ffe9a8 0%, #f1d281 38%, #d9a93f 62%, #c08f28 100%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -2px 3px rgba(120, 84, 12, .35),
    0 4px 0 #8a640f,
    0 6px 10px rgba(30, 20, 4, .4);
  transition: transform .12s var(--btn-ease, ease), box-shadow .12s ease;
}
/* the gel gloss */
.node-cta::before {
  content: "";
  position: absolute; inset: 2px 2px 45% 2px;
  z-index: -1; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.14) 55%, rgba(255,255,255,0));
  pointer-events: none;
}
/* The CTA is a <span> inside the card button, so the press state comes from
   the parent — but the wall still collapses by exactly its own height. */
.trail-node:active .node-cta,
.mode-piece:active .node-cta {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 3px 7px rgba(120, 84, 12, .45),
    0 0 0 #8a640f,
    0 1px 3px rgba(30, 20, 4, .4);
}
.mode-piece.is-locked .node-cta { filter: grayscale(.55) brightness(.9); }
.node-stamp { display: none; }

/* Completed landmark: gold glow + a stamped treasure-map piece */
.trail-node.is-completed { border-top-color: var(--gold-500); box-shadow: 0 14px 30px rgba(6, 22, 13, .34), 0 0 0 2px rgba(242, 194, 86, .5), 0 0 26px rgba(242, 194, 86, .35); }
.trail-node.is-completed .node-stamp {
  display: block; position: absolute; right: -8px; top: -10px;
  width: 42px; height: 42px; transform: rotate(9deg);
  background: var(--reward-map-image) center / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(6, 22, 13, .4));
}
.trail-node.is-mastered::after {
  content: "Mastered";
  /* This was absolutely positioned into the bottom-right corner, where it sat
     ON the Revisit button in a colour nobody could read. It is a flex item at
     the end of the card now: its own line, its own space, legible. */
  position: static;
  order: 99;
  margin-top: .1rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #7a5a12;
}

/* ---------- the CTA tells you where you are, by colour ----------
   Four states, four buttons, one flat gold for all of them — so "Start Trail"
   and "Revisit" and "Continue" all shouted equally loudly. Now the colour
   carries the meaning and you can read the whole board at a glance. */

/* Continue — you are mid-trail. Emerald: keep going. */
.trail-node.is-progress .node-cta {
  color: #eafbf1;
  border-color: rgba(126, 214, 160, .55);
  background: linear-gradient(180deg, #45a06d 0%, #2f8a58 38%, #1d5638 64%, #163f2b 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -2px 3px rgba(0, 0, 0, .3),
    0 4px 0 #0f2f21,
    0 6px 10px rgba(4, 18, 10, .45);
}
.trail-node.is-progress:active .node-cta {
  transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 3px 7px rgba(0,0,0,.4), 0 0 0 #0f2f21, 0 1px 3px rgba(4,18,10,.4);
}

/* Master it — every word seen, none of them owned yet. Copper: the challenge. */
.trail-node.is-completed:not(.is-mastered) .node-cta {
  color: #3a1f04;
  border-color: #f6c98a;
  background: linear-gradient(180deg, #ffcf8e 0%, #f0a851 38%, #d17c22 64%, #b26414 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 -2px 3px rgba(120, 60, 8, .35),
    0 4px 0 #7d430c,
    0 6px 10px rgba(30, 14, 2, .4);
}
.trail-node.is-completed:not(.is-mastered):active .node-cta {
  transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 3px 7px rgba(120,60,8,.45), 0 0 0 #7d430c, 0 1px 3px rgba(30,14,2,.4);
}

/* Revisit — finished and mastered. Parchment: done, quiet, still open to you. */
.trail-node.is-mastered .node-cta {
  color: #5a4520;
  border-color: #d9c091;
  background: linear-gradient(180deg, #fdf6e4 0%, #f4e6c4 45%, #e6d2a6 100%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -2px 3px rgba(140, 108, 50, .22),
    0 4px 0 #b39a68,
    0 6px 8px rgba(40, 28, 10, .3);
}
.trail-node.is-mastered:active .node-cta {
  transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 3px 6px rgba(140,108,50,.3), 0 0 0 #b39a68, 0 1px 2px rgba(40,28,10,.3);
}
/* Start Trail keeps the bright gold gel from .node-cta — it is the invitation. */
.trail-node.is-current { animation: bgfxCurrentGlow 2.6s ease-in-out infinite; }
@keyframes bgfxCurrentGlow {
  0%, 100% { box-shadow: 0 14px 30px rgba(6, 22, 13, .34), var(--ring-gold); }
  50% { box-shadow: 0 16px 34px rgba(6, 22, 13, .4), 0 0 0 3px rgba(242, 194, 86, .7), 0 0 30px rgba(242, 194, 86, .5); }
}
/* Undiscovered landmark: mysterious but inviting (still fully playable) */
.trail-node.is-mystery { filter: saturate(.7); }
.trail-node.is-mystery .node-badge { filter: grayscale(.5) brightness(.82); }
.trail-node.is-mystery .node-badge::after { }
.trail-node.is-mystery::before {
  content: "?"; position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; pointer-events: none;
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 700;
  color: rgba(11, 35, 23, .28);
  animation: bgfxMystery 3.4s ease-in-out infinite;
}
@keyframes bgfxMystery { 0%,100% { opacity: .5; } 50% { opacity: .9; } }
.trail-node.is-mystery:hover::before, .trail-node.is-mystery:focus-visible::before { opacity: 0; transition: opacity .2s; }

/* Expedition modes rail (the other mini-games) */
.expedition-modes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem;
  margin-top: var(--gap);
}
/* The emblem, the copy and the button were three flex siblings fighting over
   one narrow row: the title wrapped, the description spilled back under the
   emblem, and the button was squeezed on top of both. They now live in named
   grid areas — the emblem owns its column outright, the button owns the
   bottom row — so nothing can ever land on the artwork again. */
.mode-piece {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "emblem body"
    "cta    cta";
  align-items: center;
  gap: .55rem .9rem;
  text-align: left;
  padding: 1rem; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(15, 47, 33, .92), rgba(11, 35, 23, .92));
  border: 1px solid var(--gold-600);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255, 244, 207, .12);
  color: var(--parch-50); cursor: pointer;
  transition: transform .18s cubic-bezier(.2, .8, .25, 1), box-shadow .18s ease;
}
.mode-piece:hover, .mode-piece:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(6, 22, 13, .45), var(--ring-gold); }
.mode-piece.is-locked { opacity: .6; cursor: default; }
.mode-piece.is-locked:hover { transform: none; box-shadow: var(--shadow-md); }
.mode-piece-emblem {
  grid-area: emblem;
  width: 76px; height: 76px; flex: 0 0 auto; border-radius: 14px;
  background: radial-gradient(circle at 40% 30%, var(--gold-400), var(--gold-600));
  display: grid; place-items: center; box-shadow: inset 0 0 0 2px rgba(255, 244, 207, .4);
  position: relative;
}
.mode-piece-emblem::before {
  content: ""; position: absolute; inset: 11px;
  background: var(--emerald-950);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
}
.mode-piece-emblem.sprint::before   { -webkit-mask-image: var(--emb-compass); mask-image: var(--emb-compass); }
.mode-piece-emblem.sentence::before { -webkit-mask-image: var(--emb-map);     mask-image: var(--emb-map); }
.mode-piece-emblem.review::before   { -webkit-mask-image: var(--emb-tent);    mask-image: var(--emb-tent); }
.mode-piece-body { grid-area: body; display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.mode-piece .node-eyebrow { color: var(--gold-300); }
.mode-piece-title { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: var(--parch-50); line-height: 1.2; }
.mode-piece-desc { font-size: .84rem; color: rgba(250, 246, 239, .82); line-height: 1.35; }
/* Full-width gel button along the bottom — a proper target, not a squeezed pill. */
.mode-piece .node-cta {
  grid-area: cta;
  justify-self: stretch;
  margin: .35rem 0 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   5. GAMEPLAY — carved board table + mini-trail
   -------------------------------------------------------------------------- */
/* Recessed emerald-felt trays hold the pieces, framed in wood. */
.activity-panel.board-surface .answer-zone,
.activity-panel.board-surface .tiles-zone {
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(47, 138, 88, .22), transparent 70%),
    linear-gradient(180deg, var(--emerald-800), var(--emerald-900));
  border: 3px solid var(--wood-700);
  box-shadow:
    inset 0 3px 12px rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(255, 244, 207, .12),
    0 3px 0 var(--wood-800);
  padding: .8rem;
}
.activity-panel.board-surface .answer-zone .zone-label,
.activity-panel.board-surface .tiles-zone .zone-label { color: var(--gold-300); }

/* Mini-trail progress strip in the mission panel */
.mini-trail {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: .4rem 0 .2rem; padding: .7rem .6rem .9rem; min-height: 46px;
  border-radius: var(--radius-md);
  background: rgba(11, 35, 23, .35); border: 1px solid rgba(120, 84, 30, .3);
}
.trail-step {
  position: relative; width: 14px; height: 14px; border-radius: 50%;
  background: rgba(120, 84, 30, .28); border: 1px solid rgba(120, 84, 30, .5);
  flex: 0 0 auto;
}
.trail-step.is-done { background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); border-color: var(--gold-600); box-shadow: 0 0 6px rgba(242, 194, 86, .5); }
.trail-step.is-current { box-shadow: 0 0 0 3px rgba(242, 194, 86, .35); }
.trail-step.finish {
  width: 20px; height: 20px; border-radius: 5px; background: transparent; border: 0;
  background-image: var(--reward-map-image); background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 2px 4px rgba(6, 22, 13, .4));
}

/* Mascot reactions */
.guide-face.react-cheer { animation: bgfxGuideCheer .9s cubic-bezier(.2, .8, .25, 1.4); }
.guide-face.react-think { animation: bgfxGuideThink .9s ease; }
@keyframes bgfxGuideCheer { 0%,100% { transform: none; } 30% { transform: translateY(-8px) scale(1.08) rotate(-3deg); } 60% { transform: translateY(-2px) scale(1.03) rotate(2deg); } }
@keyframes bgfxGuideThink { 0%,100% { transform: none; } 50% { transform: rotate(-5deg) translateX(-3px); } }

/* --------------------------------------------------------------------------
   6. REWARD — treasure chest opening + map piece
   -------------------------------------------------------------------------- */
/* The chest was a FIXED 120–168px box holding a 128–192px map piece. The
   piece was bigger than its own container, and `place-items: center` let it
   spill out the bottom, straight over the "Treasure found" badge underneath.
   The chest now takes its size from what it holds. */
.reward-chest {
  position: relative; width: fit-content; height: auto;
  margin: 0 auto 1.1rem; display: grid; place-items: center;
}
.reward-chest::before {
  /* glowing halo behind the piece */
  content: ""; position: absolute; inset: -14%;
  background: radial-gradient(circle, rgba(242, 194, 86, .5), transparent 62%);
  animation: bgfxHaloPulse 2.6s ease-in-out infinite; pointer-events: none;
}
@keyframes bgfxHaloPulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } }
.reward-chest .reward-icon { position: relative; z-index: 1; margin: 0; }

.reward-map-collection {
  display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap;
  margin: 1rem auto 0; padding: .55rem 1rem; width: fit-content;
  border-radius: 999px; background: rgba(11, 35, 23, .4); border: 1px solid var(--gold-600);
}
/* The "A Guardian has woken" button was landing flush against the collection
   strip — two loud objects touching, with the red reading as an error state. */
.reward-card .hero-actions { margin-top: 1.4rem; row-gap: .7rem; }
.reward-map-collection .map-collection-label { color: var(--gold-300); }
.reward-map-collection .map-slot.fresh { animation: bgfxMapReveal .95s cubic-bezier(.2, .9, .25, 1.2) both; }

/* --------------------------------------------------------------------------
   7. MODE RESKINS — Safari Speed Round & Story Card Quest
   -------------------------------------------------------------------------- */
/* Sprint: sand-timer bar + stepping-stone choice cards + streak flame */
.sprint-timerbar {
  background:
    repeating-linear-gradient(90deg, rgba(207, 157, 52, .18) 0 6px, transparent 6px 12px),
    rgba(11, 35, 23, .35);
}
.sprint-timerbar > span {
  background: linear-gradient(90deg, var(--gold-300), var(--gold-500)) !important;
  box-shadow: inset 0 0 6px rgba(255, 244, 207, .5);
}
.sprint-choice {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .5), transparent 60%),
    linear-gradient(180deg, var(--stone-200), var(--stone-300));
  border: 2px solid var(--wood-600);
  box-shadow: 0 6px 0 var(--wood-700), 0 10px 18px rgba(6, 22, 13, .3);
  font-family: var(--font-display);
}
.sprint-choice:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 9px 0 var(--wood-700), 0 14px 22px rgba(6, 22, 13, .34); }
.sprint-choice:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 3px 0 var(--wood-700), 0 6px 12px rgba(6, 22, 13, .3); }
.sprint-streak.hot { position: relative; color: var(--gold-500); }
.sprint-streak.hot::after {
  content: "🔥"; position: absolute; right: -1.3em; top: -.1em; font-size: .9em;
  animation: bgfxFlame 1s ease-in-out infinite;
}
@keyframes bgfxFlame { 0%,100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.18) rotate(4deg); } }

/* Sentence Quest: choice cards read like stone tablets / trail signs */
.sq-choice {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .45), transparent 60%),
    linear-gradient(180deg, var(--parch-50), var(--parch-200));
  border: 2px solid var(--wood-600);
  box-shadow: 0 5px 0 var(--wood-700), 0 9px 16px rgba(6, 22, 13, .26);
}
.sq-choice:hover:not(:disabled) { transform: translateY(-3px); }
.sq-choice.is-correct { animation: bgfxTilePlace .4s ease; }

/* --------------------------------------------------------------------------
   8. RESPONSIVE — board folds to a vertical trail on narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .trail { flex-direction: column; align-items: center; gap: 1.4rem; }
  .trail-cell { width: 100%; max-width: 320px; }
  .trail-cell.up, .trail-cell.down { transform: none; }
  .trail-cell:not(:last-child)::after {
    top: auto; bottom: -1.15rem; left: 50%; transform: translateX(-50%);
    width: 4px; height: 1.3rem;
    background-image: radial-gradient(circle, var(--gold-600) 0 45%, transparent 46%);
    background-size: 4px 12px; background-repeat: repeat-y;
  }
  .trail-node { max-width: 320px; flex-direction: row; text-align: left; align-items: center; }
  .trail-node .node-body { align-items: flex-start; }
  .trail-node .node-progress { align-self: stretch; width: 100%; }
  .node-meta { justify-content: flex-start; }
  .trail-node .board-token { top: -14px; left: auto; right: 12px; translate: 0 0; }
  .start-modes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .start-modes { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   9. REDUCED MOTION — everything above becomes calm/instant
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bgfx-card-flip, .bgfx-board-pulse, .bgfx-board-wobble, .bgfx-tile-lift,
  .bgfx-tile-place, .bgfx-token-hop, .bgfx-screen-in, .bgfx-chest-open,
  .bgfx-map-reveal, .player-token, .trail-token, .trail-node.is-current,
  .trail-node.is-mystery::before, .hero-card.game-box::after, .reward-chest::before,
  .reward-map-collection .map-slot.fresh, .sprint-streak.hot::after,
  .guide-face.react-cheer, .guide-face.react-think, .bgfx-leaf { animation: none !important; }
  .bgfx-leaves { display: none !important; }
  .bgfx-toast { transition: opacity .2s ease !important; transform: none !important; }
  .bgfx-toast.show { transform: none !important; }
  .bgfx-micro { transition: opacity .2s ease !important; }
  .bgfx-micro.go { transform: translate(-50%, -20px) !important; }
}

/* ==========================================================================
   STAGE 1 — Install / offline layer
   Header install button + jungle-parchment toast. Additive only; nothing
   above this block is affected.
   ========================================================================== */

.install-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-color: rgba(226, 187, 87, 0.55);
  background: linear-gradient(180deg, rgba(241, 210, 129, 0.22), rgba(176, 128, 31, 0.16));
  color: var(--gold-100);
  animation: install-btn-breathe 3.6s ease-in-out infinite;
}

.install-btn:hover,
.install-btn:focus-visible {
  border-color: var(--gold-300);
  background: linear-gradient(180deg, rgba(241, 210, 129, 0.34), rgba(176, 128, 31, 0.24));
}

.install-btn-glyph {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--glyph-install) center / contain no-repeat;
  mask: var(--glyph-install) center / contain no-repeat;
}

:root {
  --glyph-install: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 3h2v9.2l3.1-3.1 1.4 1.4L12 16l-5.5-5.5 1.4-1.4L11 12.2V3z'/%3E%3Cpath fill='%23000' d='M4 18h16v2H4z'/%3E%3C/svg%3E");
}

@keyframes install-btn-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 187, 87, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(226, 187, 87, 0.12); }
}

/* --- toast --- */
.safari-toast {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: min(92vw, 30rem);
  padding: 0.8rem 1.05rem;
  border: 1px solid rgba(120, 88, 40, 0.35);
  border-radius: 0.85rem;
  background: var(--panel, linear-gradient(180deg, #fcf5e1, #efdcb4));
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.35;
  box-shadow: 0 1.1rem 2.4rem rgba(11, 35, 23, 0.4);
  transform: translate(-50%, 1.5rem);
  opacity: 0;
  transition: transform 0.34s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.34s ease;
  pointer-events: auto;
}

.safari-toast.is-in {
  transform: translate(-50%, 0);
  opacity: 1;
}

.safari-toast.tone-warn {
  border-color: rgba(164, 65, 44, 0.45);
  box-shadow: 0 1.1rem 2.4rem rgba(60, 20, 12, 0.42);
}

.safari-toast-text { flex: 1 1 auto; }

.safari-toast-action {
  flex: 0 0 auto;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--gold-600);
  border-radius: 0.55rem;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--wood-900);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.safari-toast-action:hover { filter: brightness(1.06); }

@media (prefers-reduced-motion: reduce) {
  .safari-toast { transition: opacity 0.2s ease; transform: translate(-50%, 0); }
  .install-btn { animation: none; }
}

/* ==========================================================================
   STAGE 2 — Explorer identity
   Header HUD, XP gain chips, rank-up ceremony, profile card, onboarding.
   Additive only.
   ========================================================================== */

/* ---------- header HUD ---------- */
.explorer-hud {
  display: inline-flex;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0.3rem 0.35rem;
  border: 1px solid rgba(226, 187, 87, 0.42);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(15, 47, 33, 0.9), rgba(11, 35, 23, 0.9));
  color: var(--parch-50);
  font: inherit;
}

/* The crest half: opens the profile. */
.hud-main {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.05rem 0.35rem 0.05rem 0.05rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.hud-main:hover, .hud-main:focus-visible { filter: brightness(1.12); }

/* The purse half: a real button that opens the Trading Post. It is separated
   from the crest by a hairline so it reads as its own target, not decoration. */
.hud-coins {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border: 0;
  border-left: 1px solid rgba(226, 187, 87, 0.28);
  border-radius: 0 999px 999px 0;
  background: none;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--gold-300);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.12s ease;
}
.hud-coins:hover, .hud-coins:focus-visible {
  background: rgba(226, 187, 87, 0.16);
  color: #ffe9a8;
}
.hud-coins:active { transform: translateY(1px); }

.explorer-hud:hover { border-color: var(--gold-300); }

.hud-avatar {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--gold-300), var(--gold-600));
  color: var(--emerald-950);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.hud-avatar-art { width: 68%; height: 68%; }

.hud-body { display: grid; gap: 0.18rem; min-width: 7.5rem; text-align: left; }

.hud-line-1 { display: flex; align-items: center; gap: 0.6rem; }
.hud-line-2 { display: flex; align-items: center; gap: 0.45rem; }

.hud-name { font-weight: 700; font-size: 0.86rem; letter-spacing: 0.01em; }

.coin-dot,
.gain-coin {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--gold-300), var(--gold-600));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  display: inline-block;
}

.hud-rank {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--parch-300);
  white-space: nowrap;
}

.hud-xpbar {
  flex: 1 1 auto;
  height: 0.32rem;
  min-width: 2.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.hud-xpfill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  transition: width 0.6s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.explorer-hud.is-gained { animation: hud-pop 0.5s ease; }

@keyframes hud-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.055); box-shadow: 0 0 0 5px rgba(226, 187, 87, 0.16); }
  100% { transform: scale(1); }
}

/* ---------- floating XP gain chip ---------- */
.gain-chip {
  position: fixed;
  z-index: 8800;
  transform: translate(-50%, 0);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(226, 187, 87, 0.5);
  background: rgba(11, 35, 23, 0.94);
  color: var(--gold-300);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 1.1s ease;
}

.gain-chip b { color: var(--parch-50); }
.gain-chip.is-up { opacity: 1; transform: translate(-50%, -2.6rem); }

/* ---------- shared overlay shell ---------- */
.rankup-overlay,
.profile-overlay,
.onboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: radial-gradient(circle at 50% 40%, rgba(11, 35, 23, 0.82), rgba(4, 14, 9, 0.94));
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease;
  overflow-y: auto;
}

.rankup-overlay.is-in,
.profile-overlay.is-in,
.onboard-overlay.is-in { opacity: 1; }

.rankup-card,
.profile-card,
.onboard-card {
  position: relative;
  width: min(94vw, 34rem);
  padding: 1.6rem;
  border: 1px solid rgba(120, 88, 40, 0.4);
  border-radius: 1.1rem;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.55);
  transform: translateY(1.2rem) scale(0.97);
  transition: transform 0.36s cubic-bezier(0.2, 0.9, 0.25, 1);
  text-align: center;
}

.is-in .rankup-card,
.is-in .profile-card,
.is-in .onboard-card { transform: translateY(0) scale(1); }

/* ---------- rank-up ceremony ---------- */
.rankup-rays {
  position: absolute;
  inset: -30% -10%;
  z-index: 0;
  background:
    repeating-conic-gradient(from 0deg at 50% 34%,
      rgba(226, 187, 87, 0.16) 0deg 7deg,
      transparent 7deg 18deg);
  animation: rays-turn 22s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}

@keyframes rays-turn { to { transform: rotate(360deg); } }

.rankup-card > *:not(.rankup-rays) { position: relative; z-index: 1; }

.rankup-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.rankup-crest {
  display: grid;
  place-items: center;
  width: 6.5rem;
  height: 6.5rem;
  margin: 0.9rem auto 0.7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--gold-300), var(--gold-600));
  color: var(--emerald-950);
  box-shadow: 0 0 0 6px rgba(226, 187, 87, 0.18), 0 0 2.4rem rgba(226, 187, 87, 0.5);
  animation: crest-glow 2.6s ease-in-out infinite;
}

.rankup-avatar { width: 62%; height: 62%; }

@keyframes crest-glow {
  0%, 100% { box-shadow: 0 0 0 6px rgba(226, 187, 87, 0.16), 0 0 2rem rgba(226, 187, 87, 0.42); }
  50%      { box-shadow: 0 0 0 10px rgba(226, 187, 87, 0.1), 0 0 3.4rem rgba(226, 187, 87, 0.65); }
}

.rankup-title {
  margin: 0.2rem 0 0.35rem;
  font-size: clamp(1.6rem, 4.6vw, 2.15rem);
  color: var(--wood-900);
}

.rankup-blurb { margin: 0 0 1rem; color: var(--ink-soft); }

.rankup-ladder {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 1.15rem;
}

.ladder-pip {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: rgba(120, 88, 40, 0.24);
}

.ladder-pip.is-done { background: var(--gold-500); }

.ladder-pip.is-now {
  width: 1.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  box-shadow: 0 0 0.6rem rgba(226, 187, 87, 0.7);
}

/* ---------- profile card ---------- */
.profile-card { text-align: left; }

.profile-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }

.profile-avatar {
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--gold-300), var(--gold-600));
  color: var(--emerald-950);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.profile-avatar-art { width: 64%; height: 64%; }
.profile-name { margin: 0; font-size: 1.5rem; color: var(--wood-900); }
.profile-rank { margin: 0.1rem 0 0; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.profile-xp { margin-bottom: 1.1rem; }

.profile-xpbar {
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(120, 88, 40, 0.2);
  overflow: hidden;
  margin-bottom: 0.4rem;
}

.profile-xpbar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
}

.profile-xp p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 0 0 1.15rem;
  padding: 0;
  list-style: none;
}

.profile-stats li {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0.35rem;
  border: 1px solid var(--parch-line);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.35);
  text-align: center;
}

.ps-num { font-size: 1.15rem; font-weight: 800; color: var(--wood-800); font-variant-numeric: tabular-nums; }
.ps-lab { font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

.profile-avatars p { margin: 0 0 0.5rem; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ---------- avatar picker (shared) ---------- */
.avatar-row { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; }

.avatar-pick {
  display: grid;
  place-items: center;
  gap: 0.25rem;
  width: 3.3rem;
  height: 3.3rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: rgba(120, 88, 40, 0.12);
  color: var(--wood-800);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.avatar-pick svg { width: 62%; height: 62%; }
.avatar-pick:hover { transform: translateY(-2px) scale(1.05); background: rgba(226, 187, 87, 0.25); }

.avatar-pick.is-on {
  border-color: var(--gold-500);
  background: radial-gradient(circle at 32% 28%, var(--gold-300), var(--gold-500));
  color: var(--emerald-950);
  box-shadow: 0 0 0 4px rgba(226, 187, 87, 0.2);
}

.avatar-name { display: none; }

/* ---------- onboarding ---------- */
.onboard-card { width: min(94vw, 40rem); text-align: center; }

.onboard-eyebrow { margin: 0; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.onboard-title { margin: 0.35rem 0 0.4rem; font-size: clamp(1.6rem, 4.6vw, 2.1rem); color: var(--wood-900); }
.onboard-lead { margin: 0 auto 1.4rem; max-width: 30rem; color: var(--ink-soft); font-size: 0.94rem; }

.onboard-step { margin-bottom: 1.4rem; text-align: left; }

.onboard-step h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  font-size: 0.94rem;
  color: var(--wood-800);
}

.step-num {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--wood-900);
  font-size: 0.78rem;
  font-weight: 800;
}

.onboard-avatars .avatar-pick {
  width: 4rem;
  height: 4rem;
  border-radius: 0.9rem;
}

.name-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.name-chip {
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(120, 88, 40, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  color: var(--wood-800);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.name-chip:hover { transform: translateY(-1px); background: rgba(226, 187, 87, 0.28); }

.name-chip.is-on {
  border-color: var(--gold-600);
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--wood-900);
  box-shadow: 0 0 0 3px rgba(226, 187, 87, 0.22);
}

.reroll-btn { display: block; margin: 0 auto; font-size: 0.82rem; }
.onboard-go { width: 100%; }
.onboard-go[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .hud-body { min-width: 6.5rem; }
  .hud-name { max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .onboard-avatars .avatar-pick { width: 3.3rem; height: 3.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rankup-rays,
  .rankup-crest,
  .explorer-hud.is-gained { animation: none; }
  .gain-chip,
  .rankup-card,
  .profile-card,
  .onboard-card { transition: opacity 0.2s ease; transform: none; }
}

/* ==========================================================================
   STAGE 3 — The collection loop
   Base Camp, campfire streak, daily quests, Relic Album, Trading Post,
   companions, and the purchasable tile skins / board themes / frames.
   ========================================================================== */

/* ---------- Base Camp on the start screen ---------- */
.base-camp { margin-top: 1.6rem; }
.camp-empty {
  margin: 0.4rem 0 0;
  padding: 1.1rem 1.2rem;
  border: 1px dashed rgba(226, 187, 87, 0.4);
  border-radius: 0.85rem;
  background: linear-gradient(180deg, rgba(15, 47, 33, 0.72), rgba(11, 35, 23, 0.82));
  color: var(--parch-100);
  font-size: 0.92rem;
}

.camp-heading {
  margin: 0 0 0.75rem;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.camp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
}

.camp-card {
  position: relative;
  display: block;
  padding: 0.95rem;
  border: 1px solid rgba(226, 187, 87, 0.28);
  border-radius: 0.85rem;
  background: linear-gradient(180deg, rgba(15, 47, 33, 0.86), rgba(11, 35, 23, 0.92));
  color: var(--parch-50);
  text-align: left;
  font: inherit;
}

button.camp-card { cursor: pointer; transition: transform 0.18s ease, border-color 0.18s ease; }
button.camp-card:hover { transform: translateY(-2px); border-color: var(--gold-300); }

.camp-num { margin: 0; font-size: 1.9rem; font-weight: 800; color: var(--gold-300); font-variant-numeric: tabular-nums; line-height: 1.05; }
.camp-num small { font-size: 0.9rem; color: var(--parch-300); font-weight: 600; }
.camp-lab { margin: 0.1rem 0 0; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--parch-300); }
.camp-sub { margin: 0.5rem 0 0; font-size: 0.75rem; color: rgba(247, 234, 208, 0.72); line-height: 1.35; }

.camp-bar {
  display: block;
  height: 0.3rem;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.camp-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); }

/* campfire */
.campfire { display: grid; justify-items: start; }
.fire-art { position: absolute; top: 0.7rem; right: 0.8rem; width: 2.4rem; height: 2.6rem; }
.fire-img { position: absolute; inset: -0.2rem; width: calc(100% + 0.4rem); height: calc(100% + 0.4rem); object-fit: contain; }
/* When the real campfire image is present, hide the CSS-drawn flame. */
.fire-art:has(.fire-img) .flame,
.fire-art:has(.fire-img) .log { display: none; }
.fire-art .log {
  position: absolute; bottom: 0; left: 0; right: 0; height: 0.45rem;
  border-radius: 999px; background: linear-gradient(90deg, var(--wood-700), var(--wood-900));
}
.fire-art .flame {
  position: absolute; bottom: 0.35rem; left: 50%; width: 1rem; height: 1.5rem;
  transform: translateX(-50%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, var(--gold-300), #e2762f);
  opacity: 0.35;
}
.campfire.is-lit .flame { opacity: 1; animation: flicker 1.6s ease-in-out infinite; }
.fire-art .f2 { width: 0.6rem; height: 1rem; background: linear-gradient(180deg, #fff3c4, var(--gold-400)); }
.campfire.is-lit .f2 { animation: flicker 1.1s ease-in-out infinite reverse; }
.campfire.is-lit { box-shadow: 0 0 1.6rem rgba(226, 130, 47, 0.22); border-color: rgba(226, 130, 47, 0.5); }

@keyframes flicker {
  0%, 100% { transform: translateX(-50%) scaleY(1) skewX(0deg); }
  35%      { transform: translateX(-50%) scaleY(1.14) skewX(-4deg); }
  70%      { transform: translateX(-50%) scaleY(0.94) skewX(4deg); }
}

/* quests */
.quest-list { list-style: none; margin: 0.55rem 0 0; padding: 0; display: grid; gap: 0.5rem; }

.quest { display: flex; align-items: center; gap: 0.5rem; }

.quest-tick {
  width: 1rem; height: 1rem; flex: 0 0 auto;
  border: 1.5px solid rgba(226, 187, 87, 0.55);
  border-radius: 50%;
}
.quest.is-done .quest-tick { background: var(--gold-400); border-color: var(--gold-300); box-shadow: 0 0 0.5rem rgba(226, 187, 87, 0.6); }

.quest-body { flex: 1 1 auto; display: grid; gap: 0.22rem; min-width: 0; }
.quest-label { font-size: 0.76rem; color: var(--parch-100); }
.quest.is-done .quest-label { color: var(--gold-300); text-decoration: line-through; opacity: 0.75; }

.quest-bar { height: 0.22rem; border-radius: 999px; background: rgba(0, 0, 0, 0.42); overflow: hidden; }
.quest-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); transition: width 0.5s ease; }

.quest-coins { font-size: 0.74rem; font-weight: 700; color: var(--gold-300); flex: 0 0 auto; }

.post-coin {
  position: absolute; top: 0.75rem; right: 0.8rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--gold-300), var(--gold-600));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.38);
}

/* ---------- companions ---------- */
.companion-strip { margin-top: 1rem; }
.comp-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.6rem; }

.comp-pick {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  width: 7.2rem;
  padding: 0.7rem 0.4rem;
  border: 1px solid rgba(226, 187, 87, 0.25);
  border-radius: 0.85rem;
  background: rgba(11, 35, 23, 0.8);
  color: var(--gold-300);
  font: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.comp-pick svg { width: 4.4rem; height: 4.4rem; }
.comp-pick:hover:not(.is-locked) { transform: translateY(-2px); border-color: var(--gold-300); }
.comp-pick.is-on { border-color: var(--gold-300); background: rgba(226, 187, 87, 0.18); box-shadow: 0 0 0 3px rgba(226, 187, 87, 0.16); }
.comp-pick.is-locked { opacity: 0.42; cursor: not-allowed; color: var(--parch-300); }
.comp-lock { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; font-size: 2rem; font-weight: 800; }
.comp-name { font-size: 0.6rem; letter-spacing: 0.03em; color: var(--parch-300); }

/* the buddy that sits on the board */
.buddy {
  position: fixed;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 400;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--gold-300), var(--gold-600));
  color: var(--emerald-950);
  box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.buddy-art { width: 66%; height: 66%; }
.buddy.is-cheer { animation: buddy-cheer 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.4); }
.buddy.is-sad { animation: buddy-sad 0.5s ease; }

@keyframes buddy-cheer {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-0.8rem) scale(1.14) rotate(-8deg); }
  60% { transform: translateY(-0.2rem) scale(1.03) rotate(5deg); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes buddy-sad {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-9deg) translateY(2px); }
  65% { transform: rotate(6deg) translateY(2px); }
}

/* ---------- Relic Album ---------- */
.album-overlay,
.shop-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: radial-gradient(circle at 50% 40%, rgba(11, 35, 23, 0.84), rgba(4, 14, 9, 0.95));
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.album-overlay.is-in,
.shop-overlay.is-in { opacity: 1; }

.album-card,
.shop-card {
  display: flex;
  flex-direction: column;
  width: min(96vw, 52rem);
  max-height: 88vh;
  border: 1px solid rgba(120, 88, 40, 0.4);
  border-radius: 1.1rem;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.album-head,
.shop-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--parch-line);
  background: rgba(255, 255, 255, 0.32);
}
.album-head h2, .shop-head h2 { margin: 0; font-size: 1.35rem; color: var(--wood-900); }
.album-head p, .shop-head p { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }
.album-head div, .shop-head div { flex: 1 1 auto; }

.album-body,
.shop-body { padding: 1.2rem 1.3rem; overflow-y: auto; }

.album-level { margin-bottom: 1.5rem; }
.album-level h3 {
  display: flex; align-items: baseline; gap: 0.6rem;
  margin: 0 0 0.7rem; font-size: 1rem; color: var(--wood-800);
}
.album-level h3 span { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.relic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
  gap: 0.5rem;
}

.relic {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.3rem;
  border: 1px dashed rgba(120, 88, 40, 0.35);
  border-radius: 0.6rem;
  background: rgba(120, 88, 40, 0.06);
}

.relic-gem {
  width: 1.5rem; height: 1.5rem;
  clip-path: polygon(50% 0%, 100% 35%, 82% 100%, 18% 100%, 0% 35%);
  background: rgba(120, 88, 40, 0.22);
}

.relic-word { font-size: 0.68rem; color: var(--muted); font-weight: 600; }

.relic.is-found {
  border-style: solid;
  border-color: var(--gold-500);
  background: linear-gradient(180deg, rgba(241, 210, 129, 0.5), rgba(226, 187, 87, 0.28));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.relic.is-found .relic-gem {
  background: linear-gradient(160deg, #fff3c4, var(--gold-400) 45%, var(--gold-600));
  box-shadow: 0 0 0.55rem rgba(226, 187, 87, 0.75);
}
.relic.is-found .relic-word { color: var(--wood-900); }

/* relic pop-up mid-game */
.relic-pop {
  position: fixed;
  right: 1.1rem;
  top: 5.2rem;
  z-index: 8900;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--gold-500);
  border-radius: 0.8rem;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.82rem;
  box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.42);
  transform: translateX(120%);
  transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.relic-pop.is-in { transform: translateX(0); }
.relic-pop .relic-gem {
  width: 1.7rem; height: 1.7rem; flex: 0 0 auto;
  background: linear-gradient(160deg, #fff3c4, var(--gold-400) 45%, var(--gold-600));
  box-shadow: 0 0 0.7rem rgba(226, 187, 87, 0.8);
}

/* ---------- Trading Post ---------- */
.shop-head { position: sticky; top: 0; z-index: 2; }
.shop-head-title { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 auto; }
.shop-crest {
  flex: 0 0 auto;
  width: 2.6rem; height: 2.6rem;
  border-radius: 0.7rem;
  background:
    radial-gradient(circle at 34% 30%, var(--gold-300), var(--gold-600));
  border: 2px solid var(--gold-600);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 6px rgba(30, 20, 4, 0.3);
  -webkit-mask: none;
}
.shop-crest::after {
  content: "";
  position: absolute;
  inset: 0;
}
.shop-purse {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--gold-600);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--wood-900);
  font-weight: 800;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.shop-section { margin-bottom: 1.7rem; }
.shop-section h3 {
  margin: 0 0 0.8rem;
  padding-bottom: 0.4rem;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wood-800);
  border-bottom: 1px solid var(--parch-line);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.8rem;
}

.shop-item {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 1rem 0.7rem 0.85rem;
  border: 1px solid var(--parch-line);
  border-radius: 0.85rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.32));
  text-align: center;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.shop-item:hover { transform: translateY(-2px); box-shadow: 0 0.6rem 1.2rem rgba(30, 20, 4, 0.14); }
.shop-item.is-owned { background: linear-gradient(180deg, rgba(233, 244, 236, 0.7), rgba(255, 255, 255, 0.4)); }
.shop-item.is-on {
  border-color: var(--gold-500);
  box-shadow: inset 0 0 0 1px var(--gold-400), 0 0 0 3px rgba(226, 187, 87, 0.18);
}

/* Preview well — hosts the swatch today, a real generated asset image later. */
.shop-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 1.25rem 0;
  border-radius: 0.6rem;
  background:
    repeating-linear-gradient(45deg, rgba(120, 88, 40, 0.05) 0 6px, transparent 6px 12px),
    rgba(120, 88, 40, 0.05);
}
.shop-tick {
  position: absolute;
  top: 0.3rem; right: 0.3rem;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--emerald-600);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.shop-tick::after {
  content: "";
  position: absolute;
  left: 0.34rem; top: 0.2rem;
  width: 0.28rem; height: 0.52rem;
  border: solid #fff;
  border-width: 0 0.16rem 0.16rem 0;
  transform: rotate(45deg);
}

.shop-name { font-size: 0.86rem; font-weight: 800; color: var(--wood-900); }
.shop-blurb { font-size: 0.7rem; color: var(--muted); line-height: 1.32; min-height: 2.4em; }

.swatch {
  width: 6rem;
  height: 4.6rem;
  border-radius: 0.55rem;
  border: 2px solid var(--gold-500);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 3px 0 var(--wood-800);
  background-size: cover;
  background-position: center;
}
/* Tiles and frames are transparent art — render them whole and large with no
   crop or plate border so the generated detail actually reads. */
.sw-tiles-wood, .sw-tiles-bamboo, .sw-tiles-ivory, .sw-tiles-obsidian, .sw-tiles-royal,
.sw-frame-vine, .sw-frame-brass, .sw-frame-laurel {
  width: 5.6rem; height: 5.6rem;
  border: 0;
  box-shadow: none;
  background-size: contain;
}

.shop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 4.6rem;
  margin-top: 0.15rem;
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--gold-600);
  border-radius: 0.55rem;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--wood-900);
  font: inherit;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
}
.shop-btn:hover { filter: brightness(1.06); }
.shop-btn.is-equipped { background: var(--emerald-700); border-color: var(--emerald-800); color: var(--parch-50); cursor: default; }
.shop-btn.is-poor { opacity: 0.5; filter: grayscale(0.4); }
.shop-btn.buy .coin-dot { margin-right: 0.05rem; }

/* swatch previews */
/* Real generated preview art. Gradients are kept as the background fallback so a
   missing image never leaves an empty swatch; the image paints on top. */
.sw-tiles-wood     { background: linear-gradient(180deg, #e7bd77, #c58f45 60%, #a5722f); }
.sw-tiles-bamboo   { background: linear-gradient(180deg, #dbe8a8, #9cb85e 60%, #6f8c3c); }
.sw-tiles-ivory    { background: linear-gradient(180deg, #fbf3e2, #e6d7bb 60%, #cbb894); }
.sw-tiles-obsidian { background: linear-gradient(180deg, #4a4f5c, #23262f 60%, #14161c); }
.sw-tiles-royal    { background: linear-gradient(180deg, #ffe9a8, #e0b64a 60%, #a97d1c); }
.sw-theme-day      { background: linear-gradient(180deg, #4a8f5c, #1d5638); }
.sw-theme-golden   { background: linear-gradient(180deg, #f0b46a, #a4562a); }
.sw-theme-monsoon  { background: linear-gradient(180deg, #7f9aa8, #2f4854); }
.sw-theme-night    { background: linear-gradient(180deg, #2b3a6b, #0a1024); }
.sw-frame-none     { background: rgba(120, 88, 40, 0.15); border-style: dashed; }
.sw-frame-vine     { background: rgba(120,88,40,0.08); }
.sw-frame-brass    { background: rgba(120,88,40,0.08); }
.sw-frame-laurel   { background: rgba(120,88,40,0.08); }

/* Tile skins — real webp on top of the gradient fallback */
.sw-tiles-wood     { background-image: url("../assets/ui/tile-wood.webp"),     linear-gradient(180deg, #e7bd77, #c58f45 60%, #a5722f); }
.sw-tiles-bamboo   { background-image: url("../assets/ui/tile-bamboo.webp"),   linear-gradient(180deg, #dbe8a8, #9cb85e 60%, #6f8c3c); }
.sw-tiles-ivory    { background-image: url("../assets/ui/tile-ivory.webp"),    linear-gradient(180deg, #fbf3e2, #e6d7bb 60%, #cbb894); }
.sw-tiles-obsidian { background-image: url("../assets/ui/tile-obsidian.webp"), linear-gradient(180deg, #4a4f5c, #23262f 60%, #14161c); }
.sw-tiles-royal    { background-image: url("../assets/ui/tile-royal.webp"),    linear-gradient(180deg, #ffe9a8, #e0b64a 60%, #a97d1c); }
.sw-tiles-wood, .sw-tiles-bamboo, .sw-tiles-ivory, .sw-tiles-obsidian, .sw-tiles-royal {
  background-size: contain, cover; background-position: center; background-repeat: no-repeat;
}

/* Board themes — landscape thumbnails */
.sw-theme-day     { background-image: url("../assets/ui/board-day.webp"); }
.sw-theme-golden  { background-image: url("../assets/ui/board-golden.webp"); }
.sw-theme-monsoon { background-image: url("../assets/ui/board-monsoon.webp"); }
.sw-theme-night   { background-image: url("../assets/ui/board-night.webp"); }
.sw-theme-day, .sw-theme-golden, .sw-theme-monsoon, .sw-theme-night {
  background-size: cover; background-position: center; background-repeat: no-repeat;
}

/* Avatar frames — transparent rings */
.sw-frame-vine   { background-image: url("../assets/ui/frame-vine.webp"); }
.sw-frame-brass  { background-image: url("../assets/ui/frame-brass.webp"); }
.sw-frame-laurel { background-image: url("../assets/ui/frame-laurel.webp"); }
.sw-frame-vine, .sw-frame-brass, .sw-frame-laurel {
  background-size: contain; background-position: center; background-repeat: no-repeat;
}

/* ==========================================================================
   EQUIPPED COSMETICS — body classes set by SafariCollection.applySkins()
   ========================================================================== */

/* tile skins */
body.tiles-bamboo .tile-btn {
  color: #2c3a12;
  background:
    repeating-linear-gradient(90deg, rgba(60, 80, 20, 0.08) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, #dbe8a8, #9cb85e 60%, #6f8c3c);
  border-color: #cddc8a;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -3px 4px rgba(40,60,15,0.35), 0 6px 0 #55692c, 0 12px 18px rgba(30,45,10,0.32);
}
body.tiles-ivory .tile-btn {
  color: #4a3c25;
  background:
    repeating-linear-gradient(90deg, rgba(120, 95, 55, 0.05) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, #fbf3e2, #e6d7bb 60%, #cbb894);
  border-color: #d8c39a;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.75), inset 0 -3px 4px rgba(120,95,55,0.22), 0 6px 0 #a08d6c, 0 12px 18px rgba(90,72,44,0.3);
}
body.tiles-obsidian .tile-btn {
  color: #f0e6cd;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, #4a4f5c, #23262f 60%, #14161c);
  border-color: #6d7382;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.22), inset 0 -3px 4px rgba(0,0,0,0.6), 0 6px 0 #0c0e12, 0 12px 18px rgba(0,0,0,0.45);
}
body.tiles-royal .tile-btn {
  color: #4a3407;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, #ffe9a8, #e0b64a 60%, #a97d1c);
  border-color: #fff3c4;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.8), inset 0 -3px 4px rgba(120,88,20,0.4), 0 6px 0 #8a640f, 0 12px 18px rgba(120,88,20,0.4), 0 0 1.4rem rgba(226,187,87,0.4);
}

/* board themes — retint the jungle behind the board */
body.theme-golden {
  background-color: #3d2410;
  background-image:
    linear-gradient(rgba(120, 60, 15, 0.42), rgba(60, 26, 8, 0.66)),
    url("../assets/backgrounds/jungle-main-bg.webp");
  filter: none;
}
body.theme-golden .app-shell { --theme-warm: 1; }

body.theme-monsoon {
  background-color: #16262c;
  background-image:
    linear-gradient(rgba(30, 60, 72, 0.5), rgba(12, 28, 36, 0.72)),
    url("../assets/backgrounds/jungle-main-bg.webp");
}

body.theme-night {
  background-color: #060b18;
  background-image:
    radial-gradient(circle at 74% 16%, rgba(226, 187, 87, 0.18), transparent 34%),
    linear-gradient(rgba(8, 16, 40, 0.66), rgba(3, 6, 18, 0.86)),
    url("../assets/backgrounds/jungle-main-bg.webp");
}

/* Retired: the night-board firefly drift. */
body.theme-night .app-shell::after { content: none !important; display: none !important; }

/* avatar frames — the equipped frame now renders the real generated ring image
   around the avatar (the colour ring is kept as a subtle backup). */
.hud-avatar, .profile-avatar { position: relative; overflow: visible; }
.hud-avatar::after, .profile-avatar::after {
  content: none;
  position: absolute;
  left: 50%; top: 50%;
  width: 168%; height: 168%;
  transform: translate(-50%, -50%);
  background: center / contain no-repeat;
  pointer-events: none;
}
body.frame-vine   .hud-avatar::after, body.frame-vine   .profile-avatar::after { content: ""; background-image: url("../assets/ui/frame-vine.webp"); }
body.frame-brass  .hud-avatar::after, body.frame-brass  .profile-avatar::after { content: ""; background-image: url("../assets/ui/frame-brass.webp"); }
body.frame-laurel .hud-avatar::after, body.frame-laurel .profile-avatar::after { content: ""; background-image: url("../assets/ui/frame-laurel.webp"); }

body.frame-vine .hud-avatar,
body.frame-vine .profile-avatar { box-shadow: 0 0 0 2px #2f5320; }
body.frame-brass .hud-avatar,
body.frame-brass .profile-avatar { box-shadow: 0 0 0 2px #8a6a22; }
body.frame-laurel .hud-avatar,
body.frame-laurel .profile-avatar {
  box-shadow: 0 0 0 2px var(--gold-600), 0 0 1rem rgba(226, 187, 87, 0.6);
}

/* ---------- responsive + motion ---------- */
@media (max-width: 720px) {
  /* iOS Safari mishandles fixed background attachment (it detaches and can leave
     bare gaps), so on phones the jungle scrolls with the page instead. */
  body { background-attachment: scroll; }
  .camp-grid { grid-template-columns: 1fr 1fr; }
  .camp-card.quests { grid-column: 1 / -1; }
  .buddy { width: 2.9rem; height: 2.9rem; left: 0.7rem; bottom: 0.7rem; }
  .relic-grid { grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); }
  .album-head, .shop-head { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .campfire.is-lit .flame,
  .buddy.is-cheer,
  .buddy.is-sad { animation: none; }
  .relic-pop { transition: opacity 0.2s ease; transform: none; }
}

@media print {
  .base-camp, .buddy, .relic-pop, .safari-toast { display: none !important; }
}

/* ==========================================================================
   STAGE 4 — The juice layer
   Combo meter, slow motion, coin cascade, sparks, screen shake, day/night.
   Purely presentational. Every effect is disabled under reduced-motion.
   ========================================================================== */

/* ---------- combo meter ---------- */
.combo-meter {
  position: fixed;
  top: 5.2rem;
  left: 1.1rem;
  z-index: 8600;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.9rem 0.5rem 0.6rem;
  border: 1px solid rgba(226, 187, 87, 0.5);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(20, 12, 4, 0.92), rgba(10, 6, 2, 0.94));
  color: var(--gold-300);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-1.5rem);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.combo-meter.is-on { opacity: 1; transform: translateX(0); }
.combo-meter.is-bump { animation: combo-bump 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.5); }

@keyframes combo-bump {
  0% { transform: translateX(0) scale(1); }
  40% { transform: translateX(0) scale(1.16); }
  100% { transform: translateX(0) scale(1); }
}

.combo-flame {
  position: relative;
  width: 1.5rem;
  height: 1.9rem;
  flex: 0 0 auto;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: linear-gradient(180deg, #ffd977, #e2762f 55%, #b83a12);
  animation: flicker 0.9s ease-in-out infinite;
  filter: drop-shadow(0 0 0.5rem rgba(226, 118, 47, 0.7));
}

.cf-core {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 45%;
  height: 55%;
  transform: translateX(-50%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: linear-gradient(180deg, #fffbe8, #ffd977);
  animation: flicker 0.62s ease-in-out infinite reverse;
}

.combo-count { font-size: 1.15rem; font-weight: 900; font-variant-numeric: tabular-nums; }

.combo-word {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--parch-300);
}

.combo-meter.tier-hot {
  border-color: #ff9d4a;
  box-shadow: 0 0 1.4rem rgba(255, 140, 50, 0.45);
}
.combo-meter.tier-hot .combo-flame { transform: scale(1.16); }

.combo-meter.tier-blaze {
  border-color: #fff0b8;
  box-shadow: 0 0 2rem rgba(255, 190, 80, 0.7), inset 0 0 1rem rgba(255, 160, 60, 0.25);
  animation: blaze-pulse 1.1s ease-in-out infinite;
}
.combo-meter.tier-blaze .combo-flame {
  transform: scale(1.32);
  background: linear-gradient(180deg, #ffffff, #ffd977 40%, #ff6a1f);
}
.combo-meter.tier-blaze .combo-word { color: #fff0b8; }

@keyframes blaze-pulse {
  0%, 100% { box-shadow: 0 0 1.6rem rgba(255, 190, 80, 0.55); }
  50%      { box-shadow: 0 0 2.8rem rgba(255, 190, 80, 0.95); }
}

/* ---------- slow motion on a perfect word ---------- */
body.is-slowmo .tile-btn,
body.is-slowmo .answer-slot,
body.is-slowmo .board-table,
body.is-slowmo .clue-card {
  transition-duration: 0.9s !important;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.is-slowmo::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 8500;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255, 240, 190, 0.22), transparent 55%);
  animation: slowmo-flash 0.85s ease-out forwards;
}

@keyframes slowmo-flash {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}

.answer-slots.is-perfect {
  animation: perfect-lift 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes perfect-lift {
  0%   { transform: scale(1); }
  22%  { transform: scale(1.09) translateY(-6px); filter: brightness(1.3) saturate(1.2); }
  55%  { transform: scale(1.03) translateY(-2px); filter: brightness(1.1); }
  100% { transform: scale(1); filter: none; }
}

/* ---------- coin cascade ---------- */
.coin-layer {
  position: fixed;
  inset: 0;
  z-index: 8700;
  pointer-events: none;
  overflow: hidden;
}

.coin-drop {
  position: absolute;
  top: -3rem;
  width: var(--size, 1rem);
  height: var(--size, 1rem);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff3c4, var(--gold-400) 45%, var(--gold-600));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0.5rem rgba(226, 187, 87, 0.6);
  animation: coin-fall linear forwards;
}

@keyframes coin-fall {
  0%   { transform: translateY(0) rotate(0deg) scaleX(1); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateY(108vh) rotate(var(--spin, 360deg)) scaleX(0.35); opacity: 0.9; }
}

/* ---------- sparks ---------- */
.spark-layer {
  position: fixed;
  inset: 0;
  z-index: 8650;
  pointer-events: none;
  overflow: hidden;
}

.spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d5, var(--gold-400) 60%, transparent 70%);
  transform: translate(-50%, -50%) scale(var(--s, 1));
  animation: spark-fly 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

.spark.big {
  width: 8px;
  height: 8px;
  animation-duration: 0.95s;
  background: radial-gradient(circle, #ffffff, var(--gold-300) 50%, transparent 72%);
}

@keyframes spark-fly {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(var(--s, 1)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.1); }
}

/* ---------- gentle board shake on a wrong answer ---------- */
.is-shaken { animation: board-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

@keyframes board-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* ---------- parallax drift on the background ---------- */
body { background-position: calc(50% + var(--px, 0px)) calc(50% + var(--py, 0px)); }

/* ---------- day / night cycle (free "Jungle Day" board only) ---------- */
body.tod-dawn {
  background-color: #2c3b28;
  background-image:
    linear-gradient(rgba(190, 120, 70, 0.26), rgba(30, 45, 30, 0.62)),
    url("../assets/backgrounds/jungle-main-bg.webp");
}

body.tod-dusk {
  background-color: #33261a;
  background-image:
    linear-gradient(rgba(150, 78, 30, 0.32), rgba(30, 26, 18, 0.7)),
    url("../assets/backgrounds/jungle-main-bg.webp");
}

body.tod-night {
  background-color: #08121c;
  background-image:
    radial-gradient(circle at 76% 14%, rgba(200, 220, 255, 0.16), transparent 32%),
    linear-gradient(rgba(8, 20, 42, 0.62), rgba(3, 8, 16, 0.84)),
    url("../assets/backgrounds/jungle-main-bg.webp");
}

/* ---------- respect the user's motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  .combo-flame,
  .cf-core,
  .combo-meter.tier-blaze,
  .combo-meter.is-bump,
  .answer-slots.is-perfect,
  .is-shaken { animation: none; }
  .coin-layer, .spark-layer { display: none; }
  body.is-slowmo::after { display: none; }
  body { background-position: center center; }
}

@media print {
  .combo-meter, .coin-layer, .spark-layer { display: none !important; }
}

/* ==========================================================================
   STAGE 5 — The Temple Guardian (boss fight)
   ========================================================================== */

/* ---------- picker ----------
   The picker and the two result screens are single-column parchment panels.
   Everything is centred on one axis, which also keeps the badge and the
   buttons clear of the vine ornaments in the corners. */
.boss-picker .hero-card,
.boss-result .hero-card {
  display: block;
  min-height: 0;
  overflow: visible;
  padding: clamp(1.9rem, 4vw, 3rem) clamp(1.6rem, 5vw, 3.4rem);
  text-align: center;
}

.boss-picker .badge { margin-inline: auto; }
.boss-picker .lead,
.boss-result .lead { max-width: 62ch; margin-inline: auto; }
.boss-picker .hero-actions,
.boss-result .hero-actions { justify-content: center; margin-top: 1.4rem; }
.boss-picker h2 { margin-bottom: 0.7rem; }

.boss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 1rem;
  max-width: 58rem;
  margin: 1.6rem auto 0.4rem;
}

.boss-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding: 1.3rem 0.9rem 1.1rem;
  border: 1px solid rgba(226, 187, 87, 0.3);
  border-radius: 0.9rem;
  background: linear-gradient(180deg, rgba(30, 22, 14, 0.9), rgba(14, 10, 6, 0.95));
  color: var(--parch-100);
  font: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.boss-card:hover {
  transform: translateY(-3px);
  border-color: #c0392b;
  box-shadow: 0 0 1.6rem rgba(192, 57, 43, 0.35);
}

/* The Guardian IS the card. It was a thumbnail; it is now a portrait. */
.boss-idol { display: grid; place-items: center; width: 8.5rem; height: 8.5rem; color: var(--stone-300); }
.boss-idol svg { width: 100%; height: 100%; }
.boss-card-name { font-weight: 700; font-size: 1rem; }
.boss-card-sub { font-size: 0.76rem; color: var(--parch-300); }

.boss-card.is-beaten { border-color: var(--gold-500); }
.boss-card.is-beaten .boss-idol { color: var(--gold-400); }

.boss-trophy,
.boss-trophy-big {
  background:
    radial-gradient(circle at 40% 30%, #fff3c4, var(--gold-400) 45%, var(--gold-600));
  clip-path: polygon(20% 0, 80% 0, 76% 46%, 62% 62%, 62% 82%, 80% 100%, 20% 100%, 38% 82%, 38% 62%, 24% 46%);
}

.boss-trophy { position: absolute; top: 0.5rem; right: 0.5rem; width: 1.1rem; height: 1.3rem; }
.boss-empty { color: var(--parch-300); font-style: italic; }

/* ---------- arena ---------- */
.boss-arena { display: grid; gap: 1rem; }

.boss-stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  padding: 1.4rem 1rem 1rem;
  border: 1px solid rgba(120, 60, 40, 0.4);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 50% 30%, rgba(120, 40, 20, 0.35), transparent 60%),
    linear-gradient(180deg, rgba(24, 14, 8, 0.92), rgba(10, 6, 4, 0.95));
  overflow: hidden;
}

.boss-figure { position: relative; display: grid; place-items: center; width: 8.5rem; height: 8.5rem; }

.boss-aura {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 70, 40, 0.34), transparent 68%);
  animation: aura-breathe 3.2s ease-in-out infinite;
}

.boss-idol-big { position: relative; display: grid; place-items: center; width: 100%; height: 100%; color: var(--stone-300); }
.boss-idol-big svg { width: 100%; height: 100%; filter: drop-shadow(0 0.4rem 0.8rem rgba(0, 0, 0, 0.6)); }

@keyframes aura-breathe {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.12); opacity: 1; }
}

.boss-figure.phase-angry .boss-aura { background: radial-gradient(circle, rgba(230, 90, 30, 0.5), transparent 68%); animation-duration: 1.9s; }
.boss-figure.phase-angry .boss-idol-big { color: #f0b98a; }
.boss-figure.phase-fury  .boss-aura { background: radial-gradient(circle, rgba(255, 60, 30, 0.62), transparent 66%); animation-duration: 1.05s; }
.boss-figure.phase-fury  .boss-idol-big { color: #ffcf8f; animation: fury-shudder 0.35s ease-in-out infinite; }

@keyframes fury-shudder {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px) rotate(-0.6deg); }
  75% { transform: translateX(2px) rotate(0.6deg); }
}

.boss-figure.is-hit { animation: boss-hit 0.42s ease; }

@keyframes boss-hit {
  0% { transform: scale(1); filter: brightness(1); }
  18% { transform: scale(1.09) translateX(-6px); filter: brightness(2.4) saturate(0.2); }
  45% { transform: scale(0.97) translateX(4px); filter: brightness(1.3); }
  100% { transform: scale(1); filter: brightness(1); }
}

.dmg-chip {
  position: absolute;
  top: 12%;
  left: 58%;
  font-size: 1.3rem;
  font-weight: 900;
  color: #ffd977;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  animation: dmg-float 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes dmg-float {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  20% { opacity: 1; transform: translateY(-0.5rem) scale(1.2); }
  100% { opacity: 0; transform: translateY(-3rem) scale(1); }
}

/* health bar */
.boss-hpwrap { width: min(100%, 30rem); text-align: center; }

.boss-hp {
  height: 1rem;
  border: 2px solid rgba(226, 187, 87, 0.5);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.boss-hp-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7e1f12, #c0392b 55%, #e8624a);
  transition: width 0.6s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.boss-phase {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parch-300);
}
.boss-phase.is-angry { color: #ff9d4a; font-weight: 800; }
.boss-phase.is-fury  { color: #ff5f3d; font-weight: 900; animation: blaze-pulse 0.8s ease-in-out infinite; }

/* ---------- player panel ---------- */
.boss-panel {
  padding: 1.1rem;
  border: 1px solid var(--parch-line);
  border-radius: 1rem;
  background: var(--panel);
}

.boss-panel.is-struck { animation: board-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

.boss-status { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }

.boss-hearts { display: inline-flex; gap: 0.3rem; flex: 0 0 auto; }

.heart {
  width: 1.25rem;
  height: 1.25rem;
  background: linear-gradient(180deg, #e8624a, #a4291a);
  clip-path: path("M12 21s-8-5.2-8-11a4.6 4.6 0 018-3 4.6 4.6 0 018 3c0 5.8-8 11-8 11z");
  -webkit-clip-path: path("M12 21s-8-5.2-8-11a4.6 4.6 0 018-3 4.6 4.6 0 018 3c0 5.8-8 11-8 11z");
  transform: scale(1.04);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.heart.is-lost { opacity: 0.22; filter: grayscale(1); transform: scale(0.85); }

.boss-torch {
  flex: 1 1 auto;
  height: 0.65rem;
  border-radius: 999px;
  background: rgba(60, 40, 15, 0.28);
  overflow: hidden;
}

.torch-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b83a12, #e2762f 50%, #ffd977);
  transition: width 0.1s linear;
}
.torch-fill.is-dying { background: linear-gradient(90deg, #7e1f12, #c0392b); animation: blaze-pulse 0.45s ease-in-out infinite; }

.boss-torch-num { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--wood-800); min-width: 2.4rem; text-align: right; }

.boss-prompt { margin: 0 0 0.7rem; color: var(--ink-soft); font-size: 0.9rem; }
.boss-actions-top { margin-bottom: 0.8rem; }

.boss-slots, .boss-runes { justify-content: center; }
.rune-btn { text-transform: lowercase; }

.boss-slots .answer-slot.is-revealed {
  background: linear-gradient(180deg, #f6d0c6, #e8a898);
  border-color: var(--danger);
  color: var(--danger);
  font-weight: 800;
}

.boss-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 0.9rem; }

.boss-feedback { min-height: 2.4em; margin: 0.8rem 0 0; text-align: center; font-size: 0.9rem; color: var(--ink-soft); }
.boss-feedback.is-good { color: var(--success); font-weight: 700; }
.boss-feedback.is-bad  { color: var(--danger); }
.boss-feedback.is-warn { color: var(--wood-700); }

/* What the three buttons actually do — said once, in plain English. */
.boss-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.4rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--parch-300);
}
.boss-legend strong { color: var(--gold-300); font-weight: 800; }

@media (max-width: 720px) {
  .boss-legend { flex-direction: column; align-items: center; gap: 0.2rem; }
}

/* ---------- result ---------- */
.boss-win { position: relative; overflow: hidden; text-align: center; }
.boss-win > *:not(.rankup-rays) { position: relative; z-index: 1; }

.boss-trophy-big { width: 5rem; height: 6rem; margin: 0 auto 0.9rem; filter: drop-shadow(0 0 1.4rem rgba(226, 187, 87, 0.75)); animation: crest-glow 2.4s ease-in-out infinite; }

.boss-spoils {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin: 1.2rem 0;
  padding: 0;
  list-style: none;
}

.boss-spoils li {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.4rem;
  border: 1px solid var(--parch-line);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.35);
  text-align: center;
}

.boss-lose { text-align: center; }
.boss-idol-fallen {
  width: 13rem;
  height: 13rem;
  margin: 0 auto 1.2rem;
  color: var(--stone-400);
  transform: rotate(-6deg);
  opacity: 0.9;
}
.boss-idol-fallen svg { width: 100%; height: 100%; }

@media (max-width: 720px) {
  .boss-figure { width: 6.5rem; height: 6.5rem; }
  .boss-spoils { grid-template-columns: 1fr; }
  .boss-idol-fallen { width: 9rem; height: 9rem; }
  .boss-idol { width: 6.5rem; height: 6.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .boss-aura,
  .boss-figure.phase-fury .boss-idol-big,
  .boss-figure.is-hit,
  .boss-panel.is-struck,
  .boss-phase.is-fury,
  .torch-fill.is-dying,
  .boss-trophy-big,
  .dmg-chip { animation: none; }
}

/* boss entry points */
.mode-piece-emblem.boss { background: radial-gradient(circle at 40% 34%, #e8624a, #7e1f12); }
.mode-piece.boss:hover { border-color: #c0392b; box-shadow: 0 0 1.4rem rgba(192, 57, 43, 0.3); }
.boss-cta {
  background: linear-gradient(180deg, #e8624a, #a4291a) !important;
  border-color: #7e1f12 !important;
  color: #fff3e6 !important;
  animation: blaze-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .boss-cta { animation: none; } }

/* ==========================================================================
   STAGE 6 — The mastery engine
   Mastery dial, "words waking up" (spaced repetition), weak-spot detector.
   ========================================================================== */

.mastery-panel { margin-top: 1.6rem; }

.mastery-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 0.75rem;
}

/* ---------- the dial ---------- */
.mastery-ring-card { display: flex; align-items: center; gap: 1rem; }

.mastery-ring { width: 6.2rem; height: 6.2rem; flex: 0 0 auto; transform: rotate(-90deg); }

.ring-track {
  fill: none;
  stroke: rgba(0, 0, 0, 0.42);
  stroke-width: 8;
}

.ring-fill {
  fill: none;
  stroke: url(#none);
  stroke: var(--gold-400);
  stroke-width: 8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 0.4rem rgba(226, 187, 87, 0.6));
  transition: stroke-dasharray 0.9s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.ring-num {
  transform: rotate(90deg);
  transform-origin: 40px 40px;
  text-anchor: middle;
  font-size: 1.15rem;
  font-weight: 800;
  fill: var(--gold-300);
  font-family: var(--font-body);
}

.mastery-legend { min-width: 0; }
.mastery-fraction { margin: 0.1rem 0 0.5rem; font-size: 1.35rem; font-weight: 800; color: var(--gold-300); }
.mastery-fraction small { font-size: 0.8rem; color: var(--parch-300); font-weight: 600; }

.mastery-breakdown { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.2rem; }
.mastery-breakdown li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; color: var(--parch-100); }

.dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: 0 0 auto; }
.dot.is-mastered { background: var(--gold-400); box-shadow: 0 0 0.4rem rgba(226, 187, 87, 0.7); }
.dot.is-learning { background: var(--emerald-500); }
.dot.is-fresh { background: rgba(214, 200, 168, 0.35); }

/* ---------- words waking up ---------- */
.waking { display: grid; justify-items: start; position: relative; }
.waking[disabled] { opacity: 0.6; cursor: default; }

.waking-art {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #cfe6ff, #5d82b8);
  box-shadow: inset -0.35rem -0.15rem 0 rgba(0, 0, 0, 0.28);
}
/* When the celestial images are present, drop the CSS circle and swap sun/moon
   with the card state (moon while resting, sun when words are due). */
.waking-art:has(.waking-img) { background: none; box-shadow: none; }
.waking-img { position: absolute; inset: -0.25rem; width: calc(100% + 0.5rem); height: calc(100% + 0.5rem); object-fit: contain; }
.waking .waking-img.sun { display: none; }
.waking.is-due .waking-img.moon { display: none; }
.waking.is-due .waking-img.sun { display: block; }

.waking.is-due .waking-art {
  background: radial-gradient(circle at 34% 30%, #fff3c4, var(--gold-400) 55%, var(--gold-600));
  box-shadow: 0 0 0.9rem rgba(226, 187, 87, 0.8);
  animation: wake-pulse 2.1s ease-in-out infinite;
}
.waking.is-due .waking-art:has(.waking-img) { background: none; }

.waking.is-due { border-color: rgba(226, 187, 87, 0.55); }
.waking.is-due .camp-num { color: var(--gold-300); }

@keyframes wake-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0.7rem rgba(226, 187, 87, 0.6); }
  50%      { transform: scale(1.12); box-shadow: 0 0 1.5rem rgba(226, 187, 87, 0.95); }
}

/* ---------- weak spot ---------- */
.weakspot { border-color: rgba(192, 57, 43, 0.4); }
.weakspot:hover { border-color: #e8624a; box-shadow: 0 0 1.2rem rgba(192, 57, 43, 0.3); }
.weakspot.is-clear { border-color: rgba(226, 187, 87, 0.2); }

.weak-name {
  margin: 0.15rem 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: #f0a48a;
  text-transform: capitalize;
  line-height: 1.2;
}
.weakspot.is-clear .weak-name { color: var(--parch-300); }

.camp-bar span.is-bad { background: linear-gradient(90deg, #7e1f12, #e8624a); }

@media (max-width: 900px) {
  .mastery-grid { grid-template-columns: 1fr 1fr; }
  .mastery-ring-card { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .mastery-grid { grid-template-columns: 1fr; }
  .mastery-ring-card { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .waking.is-due .waking-art { animation: none; }
  .ring-fill { transition: none; }
}

/* ==========================================================================
   STAGE 7 — Teacher Studio, Projector Mode, Class Battle
   ========================================================================== */

/* ---------- studio ---------- */
.studio-overlay {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: radial-gradient(circle at 50% 40%, rgba(11, 35, 23, 0.86), rgba(4, 14, 9, 0.96));
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.studio-overlay.is-in { opacity: 1; }

.studio-card {
  display: flex;
  flex-direction: column;
  width: min(96vw, 46rem);
  max-height: 90vh;
  border: 1px solid rgba(120, 88, 40, 0.42);
  border-radius: 1.1rem;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.studio-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.3rem 0.9rem;
  border-bottom: 1px solid var(--parch-line);
  background: rgba(255, 255, 255, 0.3);
}
.studio-head div { flex: 1 1 auto; }
.studio-head h2 { margin: 0; font-size: 1.3rem; color: var(--wood-900); }
.studio-head p { margin: 0.2rem 0 0; font-size: 0.83rem; color: var(--ink-soft); }

.studio-tabs {
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem 1.3rem 0;
  border-bottom: 1px solid var(--parch-line);
  background: rgba(255, 255, 255, 0.18);
}

.studio-tab {
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 0.55rem 0.55rem 0 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.studio-tab.is-on {
  border-color: var(--parch-line);
  background: var(--parch-50);
  color: var(--wood-900);
}

.studio-body { padding: 1.2rem 1.3rem; overflow-y: auto; }
.studio-section { margin-bottom: 1.7rem; }
.studio-section h3 { margin: 0 0 0.4rem; font-size: 1rem; color: var(--wood-800); }
.studio-count {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--gold-400);
  color: var(--wood-900);
  font-size: 0.72rem;
}

.studio-hint { margin: 0 0 0.8rem; font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; }
.studio-hint code {
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
  background: rgba(120, 88, 40, 0.12);
  font-size: 0.78rem;
}

.studio-label {
  display: block;
  margin: 0.6rem 0 0.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.studio-input,
.studio-textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(120, 88, 40, 0.35);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.65);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
}
.studio-textarea { resize: vertical; line-height: 1.6; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85rem; }
.studio-input:focus, .studio-textarea:focus { outline: 2px solid var(--gold-500); border-color: var(--gold-500); }

.studio-parse { min-height: 1.4em; margin: 0.45rem 0 0; font-size: 0.8rem; color: var(--muted); }
.studio-parse.is-ok { color: var(--success); font-weight: 600; }
.studio-parse.is-warn { color: var(--danger); }

.studio-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-top: 0.9rem; }

.studio-lists { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.studio-list {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--parch-line);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.4);
}
.sl-body { flex: 1 1 12rem; display: grid; gap: 0.15rem; min-width: 0; }
.sl-name { font-weight: 700; color: var(--wood-900); }
.sl-meta { font-size: 0.74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.sl-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.sl-actions .ghost-btn { font-size: 0.75rem; padding: 0.3rem 0.6rem; color: var(--wood-800); border-color: rgba(120,88,40,0.35); }
.sl-del:hover { border-color: var(--danger); color: var(--danger); }

/* ---------- projector mode ---------- */
body.is-projector { font-size: clamp(19px, 1.5vw + 0.5rem, 27px); }
body.is-projector .app-shell { max-width: none; }
body.is-projector .topbar .eyebrow { display: none; }

body.is-projector .tile-btn,
body.is-projector .answer-slot {
  --tile-w: clamp(64px, 6.4vw, 96px);
  --tile-h: clamp(64px, 6.4vw, 96px);
  --tile-fs: clamp(1.7rem, 2.4vw, 2.6rem);
  border-width: 3px;
}

body.is-projector .clue-card,
body.is-projector .panel,
body.is-projector .hero-card { --parch-line: rgba(90, 62, 20, 0.4); }

body.is-projector .lead,
body.is-projector .boss-prompt,
body.is-projector .feedback-box { font-size: 1.18em; }

body.is-projector h2 { font-size: 2.1em; }

/* higher contrast so it survives a washed-out projector */
body.is-projector .app-shell { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
body.is-projector .base-camp,
body.is-projector .mastery-panel,
body.is-projector .buddy,
body.is-projector .combo-meter { display: none; }

/* ---------- class battle ---------- */
.battle-layer {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  padding: 2vh 2vw;
  background:
    radial-gradient(circle at 50% 30%, rgba(29, 86, 56, 0.6), transparent 60%),
    linear-gradient(180deg, #0b2317, #04120a);
  color: var(--parch-50);
  text-align: center;
}

.battle-inner { width: min(100%, 60rem); display: grid; gap: 2.2vh; }

.battle-scores { display: flex; align-items: center; justify-content: center; gap: 2rem; }

.battle-team {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 2rem;
  border: 2px solid transparent;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.35);
  min-width: 9rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.battle-team.t0 { border-color: rgba(226, 187, 87, 0.3); }
.battle-team.t1 { border-color: rgba(93, 176, 255, 0.3); }

.battle-team.is-turn { transform: scale(1.08); }
.battle-team.t0.is-turn { border-color: var(--gold-300); box-shadow: 0 0 2rem rgba(226, 187, 87, 0.4); }
.battle-team.t1.is-turn { border-color: #7fc4ff; box-shadow: 0 0 2rem rgba(93, 176, 255, 0.4); }

.bt-name { font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--parch-300); }
.bt-score { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.battle-team.t0 .bt-score { color: var(--gold-300); }
.battle-team.t1 .bt-score { color: #9fd4ff; }

.battle-vs { font-size: 1.1rem; color: var(--parch-300); letter-spacing: 0.2em; }
.battle-turn { margin: 0; font-size: 1.05rem; color: var(--gold-300); letter-spacing: 0.06em; }

.battle-word {
  display: grid;
  place-items: center;
  gap: 1rem;
  min-height: 22vh;
  padding: 2rem 1rem;
  border: 2px dashed rgba(226, 187, 87, 0.35);
  border-radius: 1.2rem;
  background: rgba(0, 0, 0, 0.3);
}
.battle-word.is-revealed { border-style: solid; border-color: var(--gold-400); background: rgba(226, 187, 87, 0.12); }

.bw-hidden { display: flex; gap: 0.7rem; }
.bw-hidden i {
  display: block;
  width: clamp(2rem, 4vw, 3.4rem);
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(247, 234, 208, 0.45);
}

.bw-word {
  font-size: clamp(3rem, 11vw, 8rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--gold-300);
  text-shadow: 0 0.3rem 1.2rem rgba(0, 0, 0, 0.6);
}
.bw-ar { font-size: clamp(1.4rem, 3.4vw, 2.4rem); color: var(--parch-100); }
.bw-say { font-size: 1.05rem; color: var(--parch-300); }

.battle-controls,
.battle-award { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.battle-award .primary-btn,
.battle-award .ghost-btn { font-size: 1.05rem; padding: 0.75rem 1.6rem; }
.battle-yes { min-width: 14rem; }

.battle-exit { justify-self: center; opacity: 0.7; font-size: 0.85rem; }

.battle-end h2 { font-size: clamp(2.2rem, 7vw, 4rem); margin: 0; color: var(--gold-300); }
.battle-final { font-size: clamp(1.2rem, 3vw, 2rem); color: var(--parch-100); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .battle-team { transition: none; }
}

@media print {
  .studio-overlay, .battle-layer { display: none !important; }
}

/* ==========================================================================
   STAGE 8 — Content scale: grade filter, four new regions, seasonal events
   ========================================================================== */

/* ---------- grade-band filter ---------- */
.grade-filter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}

.grade-filter-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parch-300);
  margin-right: 0.2rem;
}

.grade-chip {
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(226, 187, 87, 0.35);
  border-radius: 999px;
  background: rgba(11, 35, 23, 0.75);
  color: var(--parch-100);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.grade-chip:hover { transform: translateY(-1px); border-color: var(--gold-300); }
.grade-chip.is-on {
  border-color: var(--gold-500);
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--wood-900);
  box-shadow: 0 0 0 3px rgba(226, 187, 87, 0.18);
}

/* ---------- emblems for the four new landmarks ---------- */
.node-emblem.falls,
.mode-piece-emblem.falls { background: linear-gradient(180deg, #8fd8ff, #2f7fa8); }
.node-emblem.ruins,
.mode-piece-emblem.ruins { background: linear-gradient(180deg, #cdbfa2, #6b5a3e); }
.node-emblem.peak,
.mode-piece-emblem.peak { background: linear-gradient(180deg, #e8eef5, #5d7186); }
.node-emblem.court,
.mode-piece-emblem.court { background: linear-gradient(180deg, #7ee6b0, #17714a); }

.trail-node.falls .node-badge { box-shadow: 0 0 1.2rem rgba(143, 216, 255, 0.35); }
.trail-node.ruins .node-badge { box-shadow: 0 0 1.2rem rgba(205, 191, 162, 0.3); }
.trail-node.peak .node-badge { box-shadow: 0 0 1.2rem rgba(232, 238, 245, 0.32); }
.trail-node.court .node-badge { box-shadow: 0 0 1.2rem rgba(126, 230, 176, 0.35); }

/* ---------- seasonal events ---------- */
.event-panel { margin-top: 1.6rem; }
.event-grid { display: grid; gap: 0.75rem; }

.event-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(226, 187, 87, 0.45);
  border-radius: 0.95rem;
  background: linear-gradient(120deg, rgba(30, 22, 10, 0.94), rgba(12, 30, 22, 0.92));
  color: var(--parch-50);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.event-card:hover { transform: translateY(-2px); border-color: var(--gold-300); }
.event-card.is-locked { cursor: default; opacity: 0.7; border-style: dashed; }

.event-glow {
  position: absolute;
  inset: -40% -10%;
  background: conic-gradient(from 0deg at 22% 50%,
    rgba(226, 187, 87, 0.16) 0deg 10deg, transparent 10deg 40deg);
  animation: rays-turn 26s linear infinite;
  pointer-events: none;
}

.event-body { position: relative; flex: 1 1 auto; display: grid; gap: 0.2rem; min-width: 0; }

.event-tag {
  display: inline-block;
  justify-self: start;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--wood-900);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-name { font-size: 1.2rem; font-weight: 800; color: var(--gold-300); }
.event-sub { font-size: 0.85rem; color: var(--parch-100); }
.event-meta { font-size: 0.72rem; color: var(--parch-300); }

.event-cta {
  position: relative;
  flex: 0 0 auto;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--gold-600);
  border-radius: 0.6rem;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--wood-900);
  font-weight: 800;
  font-size: 0.82rem;
}

.event-card.is-done .event-cta { background: var(--emerald-700); border-color: var(--emerald-800); color: var(--parch-50); }

/* per-event colouring */
.event-card.ev-ramadan { background: linear-gradient(120deg, rgba(40, 22, 60, 0.95), rgba(14, 30, 40, 0.92)); }
.event-card.ev-ramadan .event-name { color: #ffd977; }
.event-card.ev-nationalday { background: linear-gradient(120deg, rgba(10, 40, 26, 0.95), rgba(50, 14, 18, 0.9)); }
.event-card.ev-winter { background: linear-gradient(120deg, rgba(16, 34, 58, 0.95), rgba(10, 20, 34, 0.94)); }
.event-card.ev-winter .event-name { color: #bfe3ff; }

@media (max-width: 620px) {
  .event-card { flex-direction: column; align-items: stretch; }
  .event-cta { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .event-glow { animation: none; }
}