/* ───────────── Tokens ───────────── */
:root {
  --paper: #f6f1e6;
  --paper-deep: #ece4d3;
  --ink: #332c24;
  --ink-soft: #6f665a;
  --ink-faint: #a99f90;
  --moss: #6f8247;
  --clay: #96694d;
  --leaf-1: #8d9b5c;
  --leaf-2: #74874a;
  --leaf-3: #a5a66b;
  --leaf-4: #6c8960;
  --dry: #a09381;

  --font-text: "Literata", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;

  --ease: cubic-bezier(.65, .05, .36, 1);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --rise: 1s;
  --stagger: 110ms;

  --play-left: 7vw;
  --play-width: min(38vw, 34rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { position: fixed; inset: 0; }

button { font: inherit; color: inherit; }
code { font-size: .85em; background: var(--paper-deep); padding: .05em .35em; border-radius: 3px; }
.hand { font-family: var(--font-hand); }

/* Grano de papel */
.paper {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────────── Árbol persistente ───────────── */
.tree-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 50vw;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  z-index: 1;
  pointer-events: none;
  transition: transform 2.4s var(--ease), opacity .6s ease;
}
.tree-layer[data-pos="center"] { transform: translate(25vw, 5vh) scale(.82); }
@media (max-height: 800px) { .tree-layer[data-pos="center"] { transform: translate(25vw, 9vh) scale(.72); } }
.tree-layer[data-pos="right"] { transform: translateX(50vw); }
.tree-layer[data-pos="left"] { transform: translateX(0); }
.tree-layer.is-swapping { opacity: 0; }

/* Bordes difuminados: el árbol puede crecer más allá de su zona sin invadir el texto.
   Son degradados color papel encima del SVG (no una máscara): una máscara obliga al navegador a
   renderizar el árbol fuera de pantalla en cada fotograma y es lo primero que falla en
   animaciones pesadas, sobre todo en Safari y en celulares. */
.tree-layer { --fade-y: 8%; --fade-x: 6%; }
.tree-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--paper), rgba(246, 241, 230, 0) var(--fade-y)),
    linear-gradient(to top, var(--paper), rgba(246, 241, 230, 0) var(--fade-y)),
    linear-gradient(to right, var(--paper), rgba(246, 241, 230, 0) var(--fade-x)),
    linear-gradient(to left, var(--paper), rgba(246, 241, 230, 0) var(--fade-x));
}

/* Colores del árbol de arbol/ (variables que el componente ya expone). */
.tree-layer { --arbol-ink: var(--ink); --arbol-ink-dry: var(--dry); }

/* ───────────── Escenas ───────────── */
.scene {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.scene-inner {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
  transition: opacity .55s ease;
}
.scene-inner > * { pointer-events: auto; }
.scene-inner.is-leaving { opacity: 0; }

.rise,
.late {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--rise) var(--ease-out),
    transform var(--rise) var(--ease-out);
  transition-delay: calc(var(--d, 0) * var(--stagger));
}
.is-in .rise,
.late.on { opacity: 1; transform: none; }

/* Líneas dibujadas */
.scribble path,
.answer-line path,
.ring path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
}
.title-line { width: min(15rem, 60%); height: 14px; margin-top: -.2rem; }
.title-line .scribble { display: block; width: 100%; height: 100%; }
.is-in .title-line .scribble path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s var(--ease) calc(var(--d, 0) * var(--stagger) + 300ms);
}

/* Botones de texto */
.link-btn {
  position: relative;
  background: none;
  border: 0;
  padding: .35em .6em .5em;
  font-family: var(--font-hand);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}
.link-btn > span { position: relative; z-index: 1; }
.link-btn .scribble {
  position: absolute;
  left: .4em;
  right: .4em;
  bottom: .1em;
  width: calc(100% - .8em);
  height: 10px;
}
.link-btn .scribble path { transition: stroke-dashoffset .7s var(--ease); stroke-dashoffset: 1; }
.link-btn:hover .scribble path,
.link-btn:focus-visible .scribble path { stroke-dashoffset: 0; }
.link-btn .ring {
  position: absolute;
  inset: -.15em -.5em -.1em;
  width: calc(100% + 1em);
  height: calc(100% + .25em);
  overflow: visible;
}
.is-in .link-btn .ring path,
.late.on .link-btn .ring path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s var(--ease) calc(var(--d, 0) * var(--stagger) + 500ms);
}
.link-btn.is-primary:hover .ring path { stroke-width: 2; }
.link-btn:focus-visible { outline: none; }
.link-btn:focus-visible > span { text-decoration: underline wavy var(--ink-faint) 1px; text-underline-offset: 6px; }

.notice { color: var(--ink-soft); font-size: .95rem; max-width: 36ch; margin: .5rem auto 0; }
.notice.small { font-size: .82rem; }

/* ───── Intro ───── */
.scene[data-layout="intro"] .scene-inner { justify-content: center; }
.intro {
  width: min(40rem, 90vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 11vh 0 9vh;
}
.intro-head { display: flex; flex-direction: column; align-items: center; }
.title {
  margin: 0;
  font-size: clamp(3.6rem, 9vw, 6.4rem);
  font-weight: 600;
  line-height: .9;
  letter-spacing: .005em;
}
.phrase {
  margin: 1.2rem 0 0;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.08rem, 1.9vw, 1.32rem);
  color: var(--ink-soft);
  max-width: 36ch;
}
.intro-spacer { flex: 1; pointer-events: none !important; }
.intro-actions { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.intro-actions .link-btn:not(.is-primary) { font-size: 1.4rem; color: var(--ink-soft); }

/* ───── Partida: preguntas y etapas ───── */
.scene[data-layout="play"] .scene-inner { align-items: center; padding: 0 0 0 var(--play-left); }
.panel {
  width: var(--play-width);
  max-height: 72dvh;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 1rem 0;
}
.panel::-webkit-scrollbar { display: none; }

.kicker {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--ink-soft);
}

.q-text {
  margin: .5rem 0 0;
  font-weight: 400;
  font-size: clamp(1.32rem, 2.05vw, 1.8rem);
  line-height: 1.32;
  letter-spacing: -.005em;
  text-wrap: pretty;
}
.q-context { margin: .8rem 0 0; color: var(--ink-soft); font-size: 1rem; max-width: 52ch; }

.answers { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .25rem; }
.answer {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: .7rem 0 1rem 2.3rem;
  font-size: 1.06rem;
  line-height: 1.45;
  cursor: pointer;
  transition: opacity .7s ease, color .4s ease;
}
.answer-key {
  position: absolute;
  left: .2rem;
  top: .48rem;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--ink-faint);
  transition: color .4s ease;
}
.answer-line {
  position: absolute;
  left: 2.3rem;
  bottom: .3rem;
  width: calc(100% - 2.3rem);
  height: 10px;
}
.answer-line path { stroke-width: 1.4; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease), stroke .4s; }
.answer:not(:disabled):hover .answer-line path,
.answer:focus-visible .answer-line path,
.answer.is-chosen .answer-line path { stroke-dashoffset: 0; }
.answer:not(:disabled):hover .answer-key,
.answer:focus-visible .answer-key { color: var(--ink); }
.answer:focus-visible { outline: none; }
.answer.is-chosen .answer-line path { stroke: var(--moss); stroke-width: 1.8; }
.answer.is-chosen .answer-key { color: var(--moss); }

.answer.is-locked { cursor: not-allowed; color: var(--ink-faint); }
.answer.is-locked .answer-line path { stroke: var(--ink-faint); stroke-dasharray: .015 .02; stroke-dashoffset: 0; opacity: .6; }
.answer-lock { display: block; font-size: 1.15rem; line-height: 1.2; margin-top: .15rem; color: var(--ink-faint); }

.answers.is-resolved .answer { cursor: default; }
.answers.is-resolved .answer:not(.is-chosen) { opacity: .2; }

.q-after { margin-top: 1.4rem; }
.q-after[data-action] { cursor: pointer; }
.outcome { margin: 0; font-style: italic; color: var(--ink-soft); max-width: 48ch; }

.after-actions { margin-top: 1rem; margin-left: -.6em; }
.after-actions .link-btn { font-size: 1.6rem; }

/* Ecos: consecuencias de decisiones anteriores */
.echoes { margin-top: 1.4rem; }
.echoes-title { margin: 0 0 .3rem; font-size: 1.3rem; color: var(--ink-soft); }
.echo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.echo-list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; align-items: start; }
.leaf-icon { width: 1.1rem; height: .8rem; margin-top: .45rem; }
.leaf-icon path { fill: var(--leaf-2); stroke: var(--ink); stroke-width: .6; }
.echo-text { display: block; font-size: .98rem; }
.echo-deltas { display: block; font-size: 1.15rem; line-height: 1.2; color: var(--ink-soft); }

/* Tarjeta de etapa */
.stage-title {
  margin: .2rem 0 0;
  font-size: clamp(3.4rem, 6.4vw, 5rem);
  font-weight: 600;
  line-height: .95;
}
.stage-sub {
  margin: 1.1rem 0 0;
  font-style: italic;
  font-weight: 300;
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 30ch;
}

/* ───── Estadísticas en vivo ───── */
.stats {
  position: fixed;
  left: var(--play-left);
  bottom: 5vh;
  width: var(--play-width);
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1s ease, transform 1s var(--ease-out);
  pointer-events: none;
}
.stats.is-visible { opacity: 1; transform: none; }
.stat { position: relative; min-width: 0; }
.stat-label {
  display: block;
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-row { display: flex; align-items: center; gap: .45rem; margin-top: .2rem; }
.stat-bar { flex: 1; min-width: 0; height: 8px; overflow: visible; }
.stat-bar path { fill: none; stroke-linecap: round; }
.stat-bar .track { stroke: var(--ink-faint); stroke-width: 1.1; opacity: .5; }
.stat-bar .fill {
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.4s var(--ease);
}
.stat-value { font-size: .82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 1.6rem; text-align: right; }
.stat-delta { position: absolute; right: 0; top: -.35rem; font-size: 1.3rem; opacity: 0; pointer-events: none; }
.stat-delta.pos { color: var(--moss); }
.stat-delta.neg { color: var(--clay); }
.stat-delta.show { animation: delta 2.6s var(--ease-out) forwards; }
@keyframes delta {
  0% { opacity: 0; transform: translateY(5px); }
  14% { opacity: 1; transform: none; }
  72% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-7px); }
}

/* ───── Final ───── */
.scene[data-layout="final"] .scene-inner { justify-content: flex-end; align-items: center; padding-right: 7vw; }
.final {
  width: min(38vw, 34rem);
  max-height: 92dvh;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 1.5rem .8rem 3.5rem;
  margin-inline: -.8rem;
  overscroll-behavior: contain;
  /* Si el cierre no cabe, se desplaza dentro del panel y se desvanece hacia abajo. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.5rem, #000 calc(100% - 3.5rem), transparent);
          mask-image: linear-gradient(to bottom, transparent 0, #000 1.5rem, #000 calc(100% - 3.5rem), transparent);
}
.final::-webkit-scrollbar { display: none; }
@media (min-width: 761px) and (max-height: 860px) {
  .fin { font-size: clamp(3.2rem, 6vw, 4.6rem); }
  .final-stats { margin-top: 1.2rem; gap: .35rem; }
  .final-reflection { margin-top: 1.1rem; }
  .final-reflection p { font-size: .98rem; line-height: 1.55; }
}
.fin { margin: 0; font-size: clamp(4rem, 8vw, 6rem); font-weight: 600; line-height: .9; letter-spacing: .04em; }
.final-title { margin: 1rem 0 0; font-size: 1.7rem; line-height: 1.15; }
.final-text { margin: .4rem 0 0; font-size: 1.12rem; line-height: 1.6; max-width: 46ch; text-wrap: pretty; }

.final-stats { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .55rem; }
.final-stats li {
  display: grid;
  grid-template-columns: 7.2rem 1fr 2.2rem 4.6rem;
  align-items: center;
  gap: .8rem;
}
.fs-label { font-size: 1.35rem; line-height: 1.1; }
.fs-spark { height: 22px; }
.spark { display: block; width: 100%; height: 100%; overflow: visible; }
.spark path { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fs-value { text-align: right; font-variant-numeric: tabular-nums; }
.fs-band { font-size: .85rem; color: var(--ink-soft); font-style: italic; }

.final-reflection { margin-top: 1.6rem; color: var(--ink); }
.final-reflection p { margin: 0 0 .7rem; max-width: 48ch; text-wrap: pretty; }
.final-echoes { margin-top: 1.2rem; }
.final-meta { margin: 1.4rem 0 0; font-size: .88rem; color: var(--ink-soft); }
.final-actions { margin-top: 1.4rem; margin-left: -.4em; }

/* ───── Ajustes ───── */
.settings-toggle {
  position: fixed;
  top: max(2.6vh, env(safe-area-inset-top));
  right: 3vw;
  z-index: 6;
  display: flex;
  align-items: center;
  height: 2.6rem;
  background: none;
  border: 0;
  padding: 0 .5rem;
  font-size: 1.45rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .3s ease;
}
.settings-toggle:hover,
.settings-toggle:focus-visible { color: var(--ink); outline: none; text-decoration: underline wavy var(--ink-faint) 1px; text-underline-offset: 5px; }

/* Logo (yahel.dev): misma altura que el botón de ajustes, en la esquina opuesta. */
.brand {
  position: fixed;
  top: max(2.6vh, env(safe-area-inset-top));
  left: 3vw;
  z-index: 6;
  display: flex;
  align-items: center;
  height: 2.6rem;
  padding: 0 .5rem;
  color: var(--ink);
  opacity: .8;
  transition: opacity .3s ease;
}
.brand svg { display: block; height: 1.7rem; width: auto; }
.brand:hover,
.brand:focus-visible { opacity: 1; outline: none; }
.brand:focus-visible svg { outline: 1px dashed var(--ink-faint); outline-offset: 5px; }

.settings { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; }
.settings[hidden] { display: none; }
.settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(246, 241, 230, .74);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .5s ease;
}
.settings.is-open .settings-backdrop { opacity: 1; }
.settings-panel {
  position: relative;
  width: min(27rem, 88vw);
  max-height: 86dvh;
  overflow-y: auto;
  padding: 2rem 2.3rem 1.8rem;
  background: var(--paper);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .6s var(--ease-out);
}
.settings.is-open .settings-panel { opacity: 1; transform: none; }
.panel-edge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.panel-edge path { fill: none; stroke: var(--ink); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.settings-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; }
.settings-head h2 { margin: 0; font-size: 2.3rem; font-weight: 600; line-height: 1; }

.text-btn {
  background: none;
  border: 0;
  padding: .1rem .2rem;
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline var(--ink-faint) 1px;
  text-underline-offset: 4px;
}
.text-btn:hover,
.text-btn:focus-visible { color: var(--ink); outline: none; text-decoration-style: wavy; }
.text-btn[aria-pressed="true"] { color: var(--moss); }

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px dashed rgba(111, 102, 90, .3);
}
.setting-row[hidden] { display: none; }
.confirm { font-size: .92rem; color: var(--ink-soft); }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 9.5rem; height: 18px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--ink-faint); border-radius: 2px; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--ink-faint); border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%; background: var(--ink); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ink); }
input[type="range"]:focus-visible { outline: 1px dashed var(--ink-faint); outline-offset: 4px; }

details { border-bottom: 1px dashed rgba(111, 102, 90, .3); }
summary {
  list-style: none;
  cursor: pointer;
  padding: .7rem 0;
  font-size: 1.4rem;
  display: flex;
  justify-content: space-between;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--ink-faint); transition: transform .4s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
summary:focus-visible { outline: none; text-decoration: underline wavy var(--ink-faint) 1px; }
.details-body { padding: 0 0 .9rem; font-size: .95rem; color: var(--ink-soft); }
.details-body p { margin: 0 0 .6rem; }
.details-body ul { margin: 0; padding-left: 1.1rem; }
.details-body li + li { margin-top: .3rem; }
.details-body a { color: var(--ink); text-decoration: underline dashed var(--ink-faint) 1px; text-underline-offset: 3px; transition: text-decoration-color .3s ease; }
.details-body a:hover, .details-body a:focus-visible { text-decoration-color: var(--ink); outline: none; }

.noscript { position: fixed; inset: 0; display: grid; place-items: center; z-index: 20; }

/* ───────────── Pantallas angostas: árbol arriba, texto abajo ───────────── */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  html, body { font-size: 16px; }
  :root { --play-left: 7vw; --play-width: 86vw; }

  .tree-layer { width: 100vw; top: 6dvh; height: 40dvh; --fade-y: 8%; --fade-x: 4%; }
  .tree-layer[data-pos="center"] { transform: translateY(24dvh); }
  .tree-layer[data-pos="right"],
  .tree-layer[data-pos="left"] { transform: translateY(0); }

  .intro { padding: 9dvh 0 8dvh; }

  .scene[data-layout="play"] .scene-inner { align-items: flex-start; padding: 46dvh 7vw 15dvh; }
  .panel { max-height: 39dvh; padding: .4rem 0 1rem; }
  .q-text { font-size: 1.2rem; }
  .answers { margin-top: 1rem; }
  .answer { padding: .5rem 0 .8rem 2rem; font-size: 1rem; }
  .answer-line { left: 2rem; width: calc(100% - 2rem); }
  .stage-title { font-size: 3.2rem; }

  .stats { bottom: max(2.4dvh, env(safe-area-inset-bottom)); gap: .7rem; }
  .stat-label { font-size: 1.05rem; }
  .stat-value { display: none; }
  .stat-delta { top: -1.25rem; right: auto; left: 0; }

  .scene[data-layout="final"] .scene-inner { justify-content: center; padding: 44dvh 7vw 0; }
  .final { width: calc(100% + 1.6rem); max-height: 56dvh; padding: .5rem .8rem 3.5rem; }
  .fin { font-size: 3.4rem; }
  .final-stats li { grid-template-columns: 6.2rem 1fr 2rem; }
  .fs-band { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --rise: .25s; --stagger: 20ms; }
  .tree-layer { transition-duration: .8s; }
}