/* ============================================================================
   /tracks: one road, one world, the missions in order.
   ============================================================================
   Phone first, like the Academy Antics map the founder pointed at. The page
   wears the world's own dark (the choir stage's maroon taken to black, the
   market's a warm night), the world is the header, and the missions sit
   under it as dioramas: the place itself, cut out and floating on the dark,
   not a photo in a white box. The one Play is in the header picture. Every
   mission is a tile, once, in order, two across on a phone and three on a
   tablet; the one the Play opens is the wide tile, with its two lines and
   why the guide chose it. Locked tiles say what opens them: the knowledge
   graph, not the order, decides (tracks.ts roadOf).

   The type is the quest page's: Fraunces for what is read, Figtree for what
   is pressed.
   ========================================================================== */
.tracks-page {
  --road-deep: #7b1e2b;
  --road-gold: #d8a03a;
  --road-cream: #fbf3e3;
  --road-soft: #f2e4c8;
  --road-ink: #3a1a1f;
  /* The dark the page sits in: the world's own colour taken most of the way to black, and one step up for a card's ground. */
  --road-night: color-mix(in srgb, var(--road-deep) 26%, #000);
  --road-dusk: color-mix(in srgb, var(--road-deep) 46%, #000);
  --road-line: color-mix(in srgb, var(--road-gold) 40%, transparent);
  --road-muted: color-mix(in srgb, var(--road-cream) 58%, var(--road-deep));
  background: var(--road-night);
  color: var(--road-cream);
}
.tracks-page[data-track="spanish"] {
  --road-deep: #b0552f;
  --road-gold: #e1a63b;
  --road-cream: #f8efd9;
  --road-soft: #efdfbd;
  --road-ink: #3b2a1a;
}
/* The mast reads in cream over the dark, and the mark keeps a cream disc so it never sinks into the stage. */
.tracks-page .brand b, .tracks-page .mast-link { color: var(--road-cream); }
.tracks-page .brand .mark { background: var(--road-cream); border-radius: 50%; padding: 3px; box-sizing: border-box; }
.tracks-page .skip-link { color: var(--road-ink); }
/* A sixteen pixel gutter on a phone; the site's wider one from a tablet up. */
.tracks-page .wrap { padding-inline: 16px; }
@media (min-width: 641px) { .tracks-page .wrap { padding-inline: clamp(20px, 4vw, 56px); } }
.tracks-page .mast { min-height: 68px; }
.tracks-page .mast[hidden] + .track-main { padding-top: 20px; }
.tracks-page .mast-link { font-family: var(--sans); font-weight: 600; font-size: 15px; }
.track-main { max-width: 1080px; padding-bottom: 96px; position: relative; }
/* A little dusk in the dark: a warm glow over the road and a few motes of light, never in the way. */
.tracks-page { background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--road-gold) 16%, transparent), transparent 70%), radial-gradient(70% 50% at 50% 100%, color-mix(in srgb, var(--road-deep) 45%, transparent), transparent 70%), var(--road-night); background-attachment: fixed; }
.tracks-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .55; background-image: radial-gradient(1.6px 1.6px at 12% 22%, #ffd592, transparent), radial-gradient(1.2px 1.2px at 78% 14%, #ffd592, transparent), radial-gradient(1.4px 1.4px at 64% 58%, #ffcf85, transparent), radial-gradient(1.2px 1.2px at 30% 72%, #ffd592, transparent), radial-gradient(1.6px 1.6px at 90% 80%, #ffcf85, transparent), radial-gradient(1px 1px at 46% 36%, #fff0c8, transparent); }

/* ------------------------------------------------------------ the header */
/* No picture of the room up here (the founder, 2026-09-30: the header and the first mission showed the same room). The road's dragon, the title,
   the level and the six steps as pips, and the one Play. */
.track-head { position: relative; margin: 8px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mascot title" "go go"; align-items: center; gap: 10px 14px; }
.track-mascot { grid-area: mascot; width: clamp(76px, 18vw, 128px); height: auto; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .55)); animation: mascot-bob 3.2s ease-in-out infinite; }
@keyframes mascot-bob { 50% { transform: translateY(-6px); } }
.track-title { grid-area: title; min-width: 0; }
.track-title .eye { color: var(--road-gold); margin: 0; }
.track-title h1 { font: 500 clamp(34px, 7vw, 58px)/1 var(--serif); margin: 2px 0 4px; color: var(--road-cream); }
.track-title h1 .stop { color: var(--road-gold); }
.track-child { font: 400 clamp(16px, 2.2vw, 19px)/1.35 var(--serif); color: color-mix(in srgb, var(--road-cream) 88%, var(--road-gold)); margin: 2px 0 0; }
.track-child:empty { display: none; }
.track-pips { list-style: none; display: flex; gap: 6px; margin: 8px 0 0; padding: 0; }
.track-pips li { width: 14px; height: 14px; border-radius: 3px; background: color-mix(in srgb, var(--road-cream) 14%, transparent); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.track-pips li.pip-done { background: var(--road-gold); }
.track-pips li.pip-next { background: transparent; box-shadow: inset 0 0 0 2px var(--road-gold), 0 0 10px color-mix(in srgb, var(--road-gold) 60%, transparent); }
.track-go { grid-area: go; justify-self: stretch; }
.track-go[hidden] { display: none; }
.track-go .play { width: 100%; min-height: 54px; font-size: 18px; box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--road-gold) 80%, transparent); }
.track-note { margin: 10px 2px 0; color: var(--road-muted); }
.track-note:empty { display: none; }
.track-problem { color: var(--road-gold); min-height: 1.4em; margin-top: 12px; }
@media (min-width: 641px) {
  .track-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mascot title go"; gap: 12px 26px; margin-top: 14px; }
  .track-go .play { width: auto; padding-inline: 34px; }
}

/* -------------------------------------------------------------- islands */
/* Each mission is its own floating island (story-world-scene.js island mode), drawn once on a clear ground over a pool of warm light. */
.card-scene { position: relative; width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: visible; }
.card-scene::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: 2%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--road-gold) 26%, transparent), transparent 75%); }
.card-scene canvas, .card-scene .scene-still { position: relative; width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .55)); transition: transform .25s ease; }
.track-card.tappable:hover .scene-still, .track-card.tappable:focus-within .scene-still { transform: translateY(-4px) scale(1.02); }
/* The island the Play opens glows and breathes; locked and unwritten ones are drawn cold and dim. */
.track-card.is-next .card-scene::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--road-gold) 60%, transparent), transparent 78%); animation: next-glow 2.6s ease-in-out infinite; }
@keyframes next-glow { 50% { opacity: .55; transform: scale(1.08); } }
.track-card[data-state="locked"] .card-scene .scene-still, .track-card[data-authored="false"] .card-scene .scene-still { filter: grayscale(.7) brightness(.55) drop-shadow(0 12px 12px rgba(0, 0, 0, .45)); }
.track-card[data-state="locked"] .card-scene::before, .track-card[data-authored="false"] .card-scene::before { opacity: .2; }
/* A small gold lock on a locked island, so it reads as closed and not only as dark. */
.track-card[data-state="locked"] .card-scene::after { content: ""; position: absolute; top: 14%; right: 16%; width: 32px; height: 32px; border-radius: 50%; background: var(--road-night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8a03a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 17px no-repeat; box-shadow: 0 0 0 2px color-mix(in srgb, var(--road-gold) 55%, transparent), 0 6px 14px rgba(0, 0, 0, .5); }
.card-caption { position: absolute; left: 10px; right: 10px; bottom: 8px; margin: 0; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .5); color: var(--road-cream); font: 500 13px/1.3 var(--sans); }
.track-card .card-caption { display: none; }
.card-scene.flat { background: linear-gradient(135deg, var(--road-dusk), var(--road-night)); border-radius: 50%; }
.card-scene.flat .card-caption { display: block; }
.card-scene.flat::before { display: none; }

/* --------------------------------------------------------------- the road */
/* Two islands across on a phone and three on a wider screen, every other one lower, a dotted path of light from one to the next. */
.track-map { position: relative; list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.track-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.track-path path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 9; }
.track-path path.lit { stroke: var(--road-gold); }
.track-path path.dim { stroke: color-mix(in srgb, var(--road-cream) 22%, transparent); }
.track-card { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 2px; text-align: center; }
/* The road snakes (tracks-page.js layoutRoad): left to right, then back, and the island in the middle of a row sits lower. */
.track-card.low { margin-top: 54px; }
.track-card.tappable { cursor: pointer; }
.track-card[aria-disabled="true"] { cursor: default; }
.card-body { position: relative; z-index: 2; display: grid; justify-items: center; gap: 4px; padding: 0 2px; }
/* The words sit on a soft patch of the night, so the road's dots pass under them, never through them. No box. */
.card-body::before { content: ""; position: absolute; inset: -8px -14px; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--road-night) 94%, transparent) 55%, transparent); }
.card-eye { font: 600 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--road-gold); margin: 0; }
.card-title { font: 500 clamp(17px, 4.4vw, 22px)/1.15 var(--serif); color: var(--road-cream); margin: 0; text-wrap: balance; }
.track-card.is-next .card-title { font-size: clamp(19px, 5vw, 26px); }
.card-line { margin: 0; font: 400 14px/1.4 var(--serif); color: color-mix(in srgb, var(--road-cream) 82%, var(--road-gold)); text-wrap: balance; }
.card-line b { font: 600 10px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--road-gold); display: block; margin-bottom: 1px; }
.card-why { margin: 2px 0 0; font: 700 12px/1.35 var(--sans); color: var(--road-cream); text-wrap: balance; }
.card-why .level-dragon { color: var(--road-gold); }
.card-state { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; margin-top: 4px; }
.card-after { font: 500 13px/1.3 var(--sans); color: var(--road-muted); text-wrap: balance; flex-basis: 100%; }
@media (min-width: 760px) {
  .track-map { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 34px; margin-top: 24px; }
  .track-card.low { margin-top: 64px; }
  .card-line { font-size: 15px; }
}

/* The chips: one word each. */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 11px; border-radius: 999px; font: 700 13px/1 var(--sans); letter-spacing: .02em; }
.chip svg { width: 14px; height: 14px; }
.chip-next { background: var(--road-gold); color: var(--road-ink); }
.chip-done { background: transparent; color: var(--road-gold); border: 1.5px solid var(--road-gold); }
.chip-locked { background: transparent; color: var(--road-muted); border: 1px solid color-mix(in srgb, var(--road-cream) 22%, transparent); }
.chip-open { background: transparent; color: var(--road-gold); border: 1.5px dashed var(--road-gold); }
.chip-soon { background: transparent; color: var(--road-muted); border: 1.5px dashed color-mix(in srgb, var(--road-cream) 28%, transparent); }
/* Play is the one loud thing on the map: gold on the dark, big enough for a thumb. */
.play { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 12px 28px; border-radius: 999px; border: 2px solid var(--road-gold); background: var(--road-gold); color: var(--road-ink); font: 700 18px/1 var(--sans); text-decoration: none; transition: transform .15s ease, background .15s ease; }
.play svg { width: 18px; height: 18px; }
.play:hover, .play:focus-visible { background: color-mix(in srgb, var(--road-gold) 80%, #fff); transform: translateY(-1px); }
.replay { font: 600 13px/1 var(--sans); min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--road-cream) 45%, transparent); color: var(--road-cream); text-decoration: none; display: inline-flex; align-items: center; }
.replay:hover, .replay:focus-visible { background: color-mix(in srgb, var(--road-cream) 12%, transparent); }
.tracks-page :focus-visible { outline: 3px solid var(--road-gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .play, .replay, .track-card, .scene-still { transition: none; } .track-mascot, .track-card.is-next .card-scene::before { animation: none; } }

/* The guide's level, under the title: one step up per mission done. Over the dark header the line reads in the title's cream. */
.track-level { margin: 6px 0 0; font: 700 14px/1.35 var(--sans); color: color-mix(in srgb, var(--road-cream) 88%, var(--road-gold)); }
.track-level .level-dragon { color: var(--road-gold, #b8860b); }