/* One Origin — components for the eight perspective pages.

   These pages borrow the story shell from scene.css and the shared helpers from
   module-kit.js. Everything here is themed by the same variables, light and dark. */

/* ---------- shared control row (matches modules.css chips) ---------- */
.pv-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .6em;
  align-items: center;
  margin: 1.5em 0 0 0;
}
.pv-controls .label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sand-dim);
}
.pv-chip {
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.1;
  padding: .5em .9em;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: transparent;
  color: var(--sand-dim);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease, transform .2s ease;
}
.pv-chip:hover { border-color: var(--clay); color: var(--sand); transform: translateY(-1px); }
.pv-chip[aria-pressed="true"], .pv-chip.is-on {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(184, 94, 55, .1);
}
.pv-stage {
  width: 100%;
  margin: 1.4em 0 .4em 0;
  background: var(--void-2);
  border: 1px solid var(--hair);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.pv-stage svg, .pv-stage canvas { display: block; width: 100%; height: auto; }
.pv-note {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--sand-dim);
  margin-top: .7em;
  line-height: 1.55;
}
.pv-field { display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap; }
.pv-field label {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--sand-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.pv-input, .pv-select {
  font-family: var(--mono);
  font-size: .86rem;
  color: var(--sand);
  padding: .5em .7em;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: var(--void-2);
  min-width: 12ch;
}
.pv-input:focus-visible, .pv-select:focus-visible { border-color: var(--gold); }
input[type="range"].pv-range { width: min(420px, 100%); accent-color: var(--clay); }

.pv-detail {
  margin-top: 1.2em;
  padding: 1em 1.2em;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--clay);
  border-radius: 6px;
  background: var(--panel);
  font-size: .92rem;
  line-height: 1.6;
}
.pv-detail h3 { font-size: 1.05rem; margin-bottom: .35em; }
.pv-detail .src { font-family: var(--mono); font-size: .68rem; color: var(--sand-dim); margin-top: .6em; }

.pv-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 1.6em; align-items: start; }
@media (max-width: 860px) { .pv-grid { grid-template-columns: 1fr; } }

/* stat cards in a row */
.pv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 1.4em; }
.pv-stat {
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--panel);
}
.pv-stat .k { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sand-dim); }
.pv-stat .v { font-family: var(--serif); font-size: 1.5rem; margin-top: .2em; color: var(--gold); }
.pv-stat .s { font-size: .74rem; color: var(--sand-dim); margin-top: .2em; }

/* kit chips for footsteps */
.kit-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1em; }
.kit-chip {
  font-family: var(--mono);
  font-size: .72rem;
  padding: .55em 1em;
  border: 1px dashed var(--hair);
  border-radius: 999px;
  color: var(--sand-dim);
  opacity: .45;
  transition: opacity .4s ease, border-color .4s ease, color .4s ease;
}
.kit-chip.is-lit { opacity: 1; border-style: solid; border-color: var(--verdant); color: var(--verdant); }

/* language tree */
.lang-word { margin: 0 0 .55em 0; font-size: .9rem; line-height: 1.5; }
.lang-word .w { font-family: var(--serif); color: var(--sand); }
.lang-word .g { color: var(--sand-dim); font-size: .78rem; }
.lang-word.is-echo .w { color: var(--clay); }

/* deep time layer list */
.layer-list { display: grid; gap: 8px; margin-top: 1.2em; }
.layer-row {
  display: grid;
  grid-template-columns: minmax(120px, .9fr) 1.6fr;
  gap: 12px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--panel);
  transition: opacity .5s ease, border-color .5s ease;
}
.layer-row .t { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sand-dim); }
.layer-row .n { font-size: .82rem; line-height: 1.5; }
.layer-row.is-gone { opacity: .38; }
.layer-row.is-gone .t::after { content: ' · gone'; color: var(--crimson); }

/* stardust bars */
.elem-bars { display: grid; gap: 6px; margin-top: 1.2em; }
.elem-bar { display: grid; grid-template-columns: 2.2em 1fr 4.2em; gap: 10px; align-items: center; font-family: var(--mono); font-size: .74rem; color: var(--sand-dim); }
.elem-bar .track { height: 10px; border-radius: 999px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--hair); }
.elem-bar .fill { height: 100%; width: 0; border-radius: 999px; transition: width .8s cubic-bezier(.2,.75,.25,1); }
.elem-bar.is-on { color: var(--sand); }
.elem-bar.is-on .sym { color: var(--gold); }

/* postcard */
.postcard-wrap { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.2em; }
.postcard-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.postcard-actions button {
  font-family: var(--mono);
  font-size: .78rem;
  padding: .7em 1.1em;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: var(--panel);
  color: var(--sand);
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.postcard-actions button:hover { border-color: var(--gold); transform: translateY(-1px); }

/* mirror */
.mirror-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr); gap: 1.4em; }
@media (max-width: 860px) { .mirror-shell { grid-template-columns: 1fr; } }
.mirror-canvas { position: relative; border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; background: var(--panel-2); }
.mirror-canvas canvas, .mirror-canvas svg { display: block; width: 100%; height: auto; }
.pct-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--mono);
  font-size: .8rem;
  padding: .5em .9em;
  border-radius: 999px;
  background: rgba(23, 20, 14, .68);
  color: var(--gold);
  border: 1px solid rgba(224, 189, 123, .5);
  backdrop-filter: blur(6px);
}
.trait-list { display: grid; gap: 6px; margin-top: 1em; }
.trait-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: .82rem;
  border-bottom: 1px dashed var(--hair);
  padding: .45em 0;
  color: var(--sand-dim);
}
.trait-row .st { font-family: var(--mono); font-size: .72rem; color: var(--verdant); }
.trait-row.is-on .st::after { content: ' ✓'; }
.trait-row.is-on { color: var(--sand); }

@media (prefers-reduced-motion: reduce) {
  .kit-chip, .elem-bar .fill, .layer-row, .pv-chip { transition: none; animation: none; }
}

/* ---------- footsteps ---------- */
.fp-axis { font-family: var(--mono); font-size: 9px; fill: var(--sand-dim); }
.fp-origin { font-family: var(--mono); font-size: 10px; fill: var(--gold); }
.fp-ev { cursor: pointer; }
.fp-ev circle { transition: opacity .4s ease, r .3s ease; }

/* ---------- languages ---------- */
.lang-branch { fill: none; stroke: var(--sand-dim); stroke-opacity: .5; stroke-width: 1.4; transition: stroke .3s ease, stroke-width .3s ease; }
.lang-branch.is-selected { stroke: var(--gold); stroke-opacity: 1; stroke-width: 2.2; }
.lang-leaf { cursor: pointer; }
.lang-leaf circle { transition: fill .3s ease, r .3s ease; }
.lang-leaf:hover circle, .lang-leaf:focus-visible circle { fill: var(--gold); }
.lang-name { font-family: var(--serif); font-size: 11px; fill: var(--sand); text-anchor: middle; }
.lang-meta { font-family: var(--mono); font-size: 8px; fill: var(--sand-dim); }
.lang-root-label { font-family: var(--mono); font-size: 10px; fill: var(--gold); }

/* ---------- multiplier ---------- */
.gm-axis { font-family: var(--mono); font-size: 9px; fill: var(--sand-dim); }
.gm-slots { stroke: var(--clay); stroke-width: 2; }
.gm-alive { stroke: var(--verdant); stroke-width: 2; }
.gm-slots-label { font-family: var(--mono); font-size: 10px; fill: var(--clay); }
.gm-alive-label { font-family: var(--mono); font-size: 10px; fill: var(--verdant); }
.gm-cross { fill: none; stroke: var(--crimson); stroke-width: 2; }
.gm-cross-label { font-family: var(--mono); font-size: 10px; fill: var(--crimson); }

/* ---------- stardust ---------- */
.st-body { fill: rgba(34,39,33,.06); stroke: var(--sand-dim); stroke-width: 1.2; }
.st-dot { cursor: pointer; transition: fill-opacity .3s ease; }
.st-dot:hover, .st-dot:focus-visible { fill-opacity: .6; }
.st-sym { font-family: var(--mono); font-size: 11px; font-weight: 700; pointer-events: none; }

/* =====================================================================
   Motion and interaction layer (mirror, deep time, stardust, night sky,
   postcard). Everything here respects prefers-reduced-motion below.
   ===================================================================== */

@keyframes pv-pop {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pv-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- mirror: photo tone, stage cards, threads ---------- */
#mirror-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mirror-stage-tag {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-family: var(--mono);
  font-size: .72rem;
  padding: .4em .8em;
  border-radius: 999px;
  background: rgba(23, 20, 14, .6);
  color: var(--sand);
  border: 1px solid rgba(236, 233, 224, .3);
  backdrop-filter: blur(6px);
}
.mirror-kicker {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sand-dim);
  margin-top: .2em;
}
.mirror-rail-title { margin-top: 2em; font-size: 1.2rem; }
.mirror-rail { position: relative; margin-top: 1.2em; padding-top: 58px; }
.mirror-threads {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.mirror-thread { fill: none; stroke: var(--sand-dim); stroke-opacity: .35; stroke-width: 1.4; transition: stroke .4s ease, stroke-opacity .4s ease, stroke-width .4s ease; }
.mirror-thread.is-on { stroke: var(--gold); stroke-opacity: 1; stroke-width: 2.4; }
.mirror-stops {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 760px) { .mirror-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mirror-stop {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--panel);
  color: var(--sand);
  cursor: pointer;
  text-align: left;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.mirror-stop:hover { transform: translateY(-2px); border-color: var(--clay); }
.mirror-stop[aria-pressed="true"], .mirror-stop.is-on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(224, 189, 123, .25); }
.mirror-thumb { width: 100%; aspect-ratio: 1 / 1; border-radius: 6px; display: block; background: var(--panel-2); }
.mirror-stop .ms-name { font-family: var(--serif); font-size: .95rem; }
.mirror-stop .ms-age { font-family: var(--mono); font-size: .66rem; color: var(--sand-dim); }

/* ---------- deep time ---------- */
.dt-milestones { display: flex; flex-wrap: wrap; gap: .5em; margin-top: 1em; }
.dt-stage { margin-top: 1em; }
.dt-explain { min-height: 4.2em; animation: pv-rise .6s ease both; }
.layer-row[role="button"] { cursor: pointer; transition: opacity .5s ease, border-color .3s ease, transform .3s ease; }
.layer-row[role="button"]:hover, .layer-row[role="button"]:focus-visible { border-color: var(--clay); transform: translateX(3px); }
.layer-row[role="button"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.layer-row.is-gone { opacity: .45; }

/* ---------- stardust: star sources, forge, body ---------- */
.sd-title { margin-top: 2em; font-size: 1.2rem; }
#st-sources { margin-top: .8em; }
.sd-forge { margin-top: .9em; }
.sd-forge canvas { display: block; width: 100%; height: auto; aspect-ratio: 960 / 440; }
#st-svg { cursor: pointer; }
.elem-bar[role="button"] { cursor: pointer; }
.elem-bar[role="button"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* ---------- night sky: the people and their threads ---------- */
.ns-stage { position: relative; }
.ns-threads {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.ns-thread { fill: none; stroke: var(--gold); stroke-opacity: .45; stroke-width: 1.4; stroke-dasharray: 5 6; transition: stroke-opacity .5s ease, stroke-width .5s ease; }
.ns-thread.is-on { stroke-opacity: .9; stroke-width: 2; animation: pv-dash 2.4s linear infinite; }
@keyframes pv-dash { to { stroke-dashoffset: -44; } }
.ns-people {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) { .ns-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ns-people { grid-template-columns: 1fr; } }
.ns-person {
  margin: 0;
  border: 1px solid var(--hair);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
  cursor: pointer;
  transition: border-color .4s ease, transform .3s ease, opacity .4s ease;
  opacity: .72;
}
.ns-person:hover, .ns-person:focus-visible { transform: translateY(-2px); border-color: var(--clay); opacity: 1; }
.ns-person.is-on { border-color: var(--gold); opacity: 1; }
.ns-person:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ns-person img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ns-person figcaption { display: grid; gap: 4px; padding: 9px 10px 11px; font-size: .78rem; line-height: 1.45; color: var(--sand-dim); }
.ns-person figcaption strong { font-family: var(--serif); font-weight: 500; font-size: .95rem; color: var(--sand); }

/* ---------- postcard: map, controls, diagrams ---------- */
.pc-map { margin-top: 1.2em; }
.pc-map svg { display: block; width: 100%; height: auto; cursor: crosshair; }
.pc-land { fill: var(--panel-2); stroke: var(--hair); stroke-width: .8; }
.pc-gridline { fill: none; stroke: var(--hair); stroke-width: .6; stroke-dasharray: 2 5; }
.pc-route-ghost { fill: none; stroke: var(--sand-dim); stroke-opacity: .45; stroke-width: 1.6; stroke-dasharray: 3 6; }
.pc-route-trail { fill: none; stroke: var(--clay); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pc-city { fill: var(--sand-dim); fill-opacity: .55; cursor: pointer; transition: r .25s ease, fill .25s ease; }
.pc-city:hover { r: 4.5; fill: var(--gold); fill-opacity: 1; }
.pc-city.is-home { fill: var(--gold); fill-opacity: 1; r: 4.5; }
.pc-rift { fill: var(--verdant); stroke: var(--void-2); stroke-width: 2; }
.pc-rift-label, .pc-home-label { font-family: var(--mono); font-size: 13px; fill: var(--sand); paint-order: stroke; stroke: var(--void-2); stroke-width: 3px; stroke-linejoin: round; }
.pc-home { fill: var(--gold); stroke: var(--void-2); stroke-width: 2; }
.pc-walker { fill: var(--clay); stroke: var(--void-2); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(184, 94, 55, .7)); }
.pc-controls { margin-top: 1em; }
.pc-controls .pv-field { min-width: 220px; flex: 1 1 220px; }
.pc-controls output { font-family: var(--mono); font-size: .74rem; color: var(--sand); min-width: 11ch; }
.pc-controls input[type="range"].pv-range { width: min(240px, 100%); }
.pc-diagrams { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 1.4em; margin-top: 1.2em; align-items: start; }
@media (max-width: 760px) { .pc-diagrams { grid-template-columns: 1fr; } }
.pc-bars { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--hair); border-radius: 8px; background: var(--panel); }
.pc-bar { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr minmax(90px, auto); gap: 10px; align-items: center; font-size: .8rem; }
.pc-bar-label { color: var(--sand-dim); }
.pc-track { height: 12px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--hair); overflow: hidden; }
.pc-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--verdant), var(--clay)); transition: width .7s cubic-bezier(.2, .75, .25, 1); }
.pc-bar:last-of-type .pc-fill { background: linear-gradient(90deg, var(--gold), var(--clay)); }
.pc-bar-value { font-family: var(--mono); font-size: .74rem; color: var(--sand); text-align: right; }
.pc-bar-scale { font-family: var(--mono); font-size: .66rem; color: var(--sand-dim); }
.pc-gens-wrap { padding: 14px 16px; border: 1px solid var(--hair); border-radius: 8px; background: var(--panel); }
.pc-gens-title { font-size: .86rem; line-height: 1.5; color: var(--sand); margin-bottom: 10px; }
.pc-gens { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.pc-gen-dot {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--clay);
  opacity: .9;
  overflow: hidden;
}
.pc-gen-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  width: calc(var(--frac, 1) * 100%);
  background: var(--gold);
}
.pc-gen-dot.pop { animation: pv-pop .4s cubic-bezier(.2, .8, .3, 1.3) both; }
.pc-gen-more { font-family: var(--mono); font-size: .72rem; color: var(--sand-dim); align-self: center; }

@media (prefers-reduced-motion: reduce) {
  .ns-thread.is-on, .dt-explain, .pc-gen-dot.pop { animation: none; }
  .mirror-thread, .mirror-stop, .ns-person, .pc-fill, .pc-city, .layer-row[role="button"] { transition: none; }
}

/* ======================================================================
   v2 — responsive controls, touch targets and the animated timeline/picker
   ====================================================================== */

/* Controls are at least 40px tall, and 44px for touch screens. */
.pv-chip, .postcard-actions button, .pc-city-chip { min-height: 40px; }
@media (pointer: coarse) {
  .pv-chip, .postcard-actions button, .pc-city-chip { min-height: 44px; }
  .pv-chip { padding-top: .75em; padding-bottom: .75em; }
}

/* Selects and fields may shrink on a phone instead of pushing the page sideways. */
.pv-field { min-width: 0; max-width: 100%; }
.pv-field select.pv-select { flex: 1 1 200px; width: auto; max-width: 100%; min-width: 0; }
.pv-select, .pv-input { max-width: 100%; }
.pv-controls { max-width: 100%; }
.pv-controls > * { min-width: 0; }
@media (max-width: 520px) {
  .pv-controls { gap: .5em; }
  .pv-field { flex-basis: 100%; }
  .pv-field select.pv-select, .pv-field .pv-input { width: 100%; }
  .pv-controls .pv-chip { flex: 1 1 auto; text-align: center; }
  .pv-note { font-size: .68rem; }
}

/* ---------- postcard: city picker ---------- */
.pc-picker { width: 100%; margin-top: 1.5em; }
.pc-picker-title { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sand-dim); }
.pc-continents { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .9em 1.1em; margin-top: .8em; }
.pc-continent { border: 1px solid var(--hair); border-radius: 10px; padding: .75em .8em; background: var(--panel); min-width: 0; }
.pc-continent-name { display: block; font-family: var(--serif); font-size: 1rem; color: var(--sand); margin-bottom: .45em; }
.pc-city-row { display: flex; flex-wrap: wrap; gap: .4em; }
.pc-city-chip { font-size: .7rem; padding: .45em .7em; }
.pc-city-chip[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: rgba(184, 94, 55, .12); }
.pc-entry { margin-top: 1em; }
.pc-entry-field { flex: 1 1 260px; }
.pc-entry-field .pv-input { width: 100%; }

/* ---------- footsteps: animated road ---------- */
.fp-hero { margin-bottom: 1.6em; }
.fp-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fp-stage svg { min-width: 640px; }
@media (min-width: 720px) { .fp-stage svg { min-width: 0; } }
.fp-swipe { display: none; }
@media (max-width: 719px) { .fp-swipe { display: block; } }
.fp-road { stroke: var(--clay); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 10; animation: fp-flow 1.4s linear infinite; }
@keyframes fp-flow { to { stroke-dashoffset: -24; } }
.fp-origin-dot { fill: var(--gold); animation: fp-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes fp-pulse { 50% { transform: scale(1.35); opacity: .6; } }
.fp-origin { font-family: var(--mono); font-size: 11px; fill: var(--gold); }
.fp-axis { font-family: var(--mono); font-size: 10px; fill: var(--sand-dim); }
.fp-print { fill: var(--sand-dim); opacity: .14; transition: opacity .5s ease, fill .5s ease; }
.fp-print.is-walked { fill: var(--verdant); opacity: .85; }
.fp-stem { stroke: var(--sand-dim); stroke-opacity: .55; stroke-dasharray: 2 3; }
.fp-dot { fill: var(--sand-dim); opacity: .4; transition: r .3s ease, opacity .3s ease, fill .3s ease; }
.fp-ev.is-reached .fp-dot { fill: var(--verdant); opacity: 1; }
.fp-ev.is-chosen .fp-dot { fill: var(--gold); }
.fp-ev-label { font-family: var(--mono); font-size: 11px; fill: var(--sand); }
.fp-ev.is-chosen .fp-ev-label { fill: var(--gold); }
.fp-ev { cursor: pointer; }
.fp-ev:focus-visible .fp-dot { stroke: var(--gold); stroke-width: 3; }
.fp-hit { fill: transparent; }
.fp-playhead { stroke: var(--clay); stroke-width: 2; }
.fp-walker { fill: var(--clay); stroke: var(--void-2); stroke-width: 2; }
.fp-jump { margin-top: .9em; }
.fp-jump-btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: rgba(184, 94, 55, .1); }
.fp-play[aria-pressed="true"] { border-color: var(--clay); color: var(--clay); }

@media (prefers-reduced-motion: reduce) {
  .fp-road, .fp-origin-dot { animation: none; }
  .fp-print, .fp-dot { transition: none; }
}

/* ---------- multiplier: crosshair, tooltip, glowing dots ---------- */
.gm-stage { position: relative; touch-action: none; }
.gm-stage svg { cursor: crosshair; }
.gm-slots { stroke: var(--clay); stroke-width: 2.6; filter: drop-shadow(0 0 4px rgba(184, 94, 55, .45)); }
.gm-alive { stroke: var(--verdant); stroke-width: 2.6; filter: drop-shadow(0 0 4px rgba(71, 116, 94, .45)); }
.gm-dot { fill: var(--clay); }
.gm-dot.is-over { fill: var(--crimson); }
.gm-cursor-line { stroke: var(--gold); stroke-dasharray: 3 4; stroke-width: 1; }
.gm-cursor-dot { fill: var(--gold); stroke: var(--void-2); stroke-width: 2; }
.gm-tip {
  position: absolute; top: 8px; left: 0; pointer-events: none;
  font-family: var(--mono); font-size: .72rem; line-height: 1.45;
  padding: .55em .75em; border-radius: 8px; width: 160px;
  background: var(--panel); border: 1px solid var(--hair); color: var(--sand);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  opacity: 0; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease;
}
.gm-tip.is-on { opacity: 1; transform: none; }
.gm-tip b { color: var(--gold); font-weight: 500; }
@media (max-width: 520px) { .gm-tip { width: 150px; font-size: .66rem; } }

/* ---------- languages: echoes, motes and branch drawing ---------- */
.lang-stage svg { min-width: 0; }
.lang-echo { font-family: var(--serif); font-size: 12px; fill: var(--clay); opacity: 0; }
.lang-echo.is-pop { animation: lang-pop .6s cubic-bezier(.2,.9,.3,1.2) forwards; }
@keyframes lang-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lang-leaf:hover .lang-echo { opacity: 1; }
.lang-mote { fill: var(--gold); opacity: 0; animation: lang-rise linear infinite; }
@keyframes lang-rise {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  20% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-190px) scale(1.2); }
}
.lang-leaf { outline: none; }
.lang-leaf:focus-visible circle { stroke: var(--gold); stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .lang-mote, .lang-echo.is-pop { animation: none; } .lang-echo { opacity: 1; } }

/* ---------- mirror: visceral overlay on the photo ---------- */
.mirror-canvas { position: relative; }
#mirror-fx { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.mirror-canvas .pct-badge { z-index: 2; }
.mirror-stage-tag { z-index: 2; }
@media (max-width: 520px) {
  .mirror-shell { gap: 1em; }
  .pct-badge { font-size: .7rem; top: 8px; left: 8px; }
}