:root{
  --bg:#0d0f12;
  --bg2:#14171c;
  --ink:#e9e4d8;
  --ink-dim:#9a978f;
  --fog:#1c2027;
  --en:#e8b96a;         /* dorado para el inglés */
  --en-soft:rgba(232,185,106,.14);
  --danger:#c9584f;
  --ok:#6fae7d;
  --line:rgba(255,255,255,.08);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:radial-gradient(120% 80% at 50% -10%,#1a1e25 0%,var(--bg) 55%);
  color:var(--ink);
  font-family:var(--serif);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
#app{max-width:680px;margin:0 auto;min-height:100%;position:relative}

/* ---------- Barra de progreso ---------- */
#progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:50}
#progress .fill{height:100%;width:0;background:linear-gradient(90deg,var(--en),#f0d49a);transition:width .5s ease}

/* ---------- Portada ---------- */
.cover{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 28px;gap:18px}
.cover .kicker{font-family:var(--sans);letter-spacing:.28em;text-transform:uppercase;font-size:11px;color:var(--en);opacity:.85}
.cover h1{font-size:clamp(38px,11vw,66px);font-weight:600;line-height:1.02;letter-spacing:-.02em}
.cover .sub{color:var(--ink-dim);font-style:italic;max-width:26ch;font-size:18px}
.cover .fog-line{width:64px;height:1px;background:var(--line);margin:6px 0}
.cover .note{font-family:var(--sans);font-size:12.5px;color:var(--ink-dim);max-width:34ch;line-height:1.6;opacity:.8}

/* ---------- Botones ---------- */
.btn{
  font-family:var(--sans);font-weight:600;font-size:16px;
  background:var(--en);color:#241a08;border:none;border-radius:100px;
  padding:15px 34px;cursor:pointer;transition:transform .12s ease,box-shadow .3s ease;
  box-shadow:0 8px 30px rgba(232,185,106,.22);
}
.btn:active{transform:scale(.96)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:none;border:1px solid var(--line)}
.btn.pulse{animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 8px 30px rgba(232,185,106,.22)}50%{box-shadow:0 8px 44px rgba(232,185,106,.5)}}

/* ---------- Transición de capítulo ---------- */
.chapter-card{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:40;text-align:center;padding:30px;opacity:0;pointer-events:none}
.chapter-card.show{opacity:1;pointer-events:auto;transition:opacity .6s ease}
.chapter-card .n{font-family:var(--sans);letter-spacing:.3em;text-transform:uppercase;font-size:12px;color:var(--en);margin-bottom:14px}
.chapter-card h2{font-size:clamp(30px,8vw,44px);font-weight:600}

/* ---------- Lectura ---------- */
.reader{padding:84px 26px 140px;animation:fadeUp .8s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reader .ch-label{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:26px;display:flex;justify-content:space-between;align-items:center}
.tide{display:inline-flex;align-items:center;gap:7px}
.tide .bar{width:54px;height:5px;border-radius:3px;background:var(--fog);overflow:hidden}
.tide .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--en),#f0d49a)}
.tide span{color:var(--en);font-size:11px}

.reader p{font-size:20px;margin-bottom:22px;color:var(--ink)}
.en{color:var(--en);border-bottom:1px dashed rgba(232,185,106,.5);cursor:pointer;padding:0 1px;transition:background .2s}
.en:active{background:var(--en-soft)}
.en.revealed{color:var(--ink);border-bottom-color:transparent;background:var(--en-soft);border-radius:3px}
.trans{display:block;font-family:var(--sans);font-size:15px;color:var(--ink-dim);font-style:normal;margin-top:4px;padding-left:14px;border-left:2px solid var(--en-soft);animation:fadeUp .35s ease}

/* ---------- Cliffhanger ---------- */
.hook{margin-top:36px;padding-top:26px;border-top:1px solid var(--line);text-align:center}
.hook .q{font-size:22px;font-style:italic;color:var(--ink);margin-bottom:28px;line-height:1.5}
.hook .continue-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.hook small{font-family:var(--sans);color:var(--ink-dim);font-size:12px}

/* ---------- Decisión ---------- */
.overheard{background:linear-gradient(180deg,rgba(232,185,106,.06),transparent);border:1px solid var(--line);border-radius:14px;padding:20px;margin:10px 0 28px}
.overheard .tag{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--en);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.overheard .tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--en);animation:pulse2 1.4s infinite}
@keyframes pulse2{0%,100%{opacity:.4}50%{opacity:1}}
.overheard p{font-size:19px;margin:0}
.decision-q{font-family:var(--sans);font-weight:600;font-size:16px;color:var(--ink);margin:6px 0 16px}
.options{display:flex;flex-direction:column;gap:12px}
.option{font-family:var(--sans);text-align:left;font-size:16px;line-height:1.5;color:var(--ink);background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;cursor:pointer;transition:border-color .2s,transform .12s}
.option:active{transform:scale(.98)}
.option.correct{border-color:var(--ok);background:rgba(111,174,125,.12)}
.option.wrong{border-color:var(--danger);background:rgba(201,88,79,.1);opacity:.85}
.consequence{font-family:var(--sans);font-size:15.5px;line-height:1.6;margin-top:18px;padding:16px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);animation:fadeUp .4s ease}
.consequence.ok{border-color:rgba(111,174,125,.4)}
.consequence.bad{border-color:rgba(201,88,79,.4)}

/* ---------- Final / stats ---------- */
.finale{padding:100px 28px 80px;text-align:center;animation:fadeUp .8s ease}
.finale h2{font-size:34px;margin-bottom:8px}
.finale .to-be{font-style:italic;color:var(--en);margin-bottom:34px}
.stats{display:flex;flex-direction:column;gap:14px;max-width:340px;margin:0 auto 34px}
.stat{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--sans);border-bottom:1px solid var(--line);padding-bottom:12px}
.stat .k{color:var(--ink-dim);font-size:14px}
.stat .v{color:var(--en);font-size:26px;font-weight:600}
.finale .msg{color:var(--ink-dim);font-family:var(--sans);font-size:14px;max-width:36ch;margin:0 auto 30px;line-height:1.6}

/* ---------- Elegir intensidad ---------- */
.intensity{display:flex;flex-direction:column;gap:12px;width:min(360px,86vw);margin-top:10px}
.intensity-opt{font-family:var(--sans);text-align:left;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;cursor:pointer;transition:border-color .2s,transform .12s}
.intensity-opt:active{transform:scale(.98)}
.intensity-opt:hover{border-color:var(--en)}
.io-k{color:var(--en);font-weight:600;font-size:17px;margin-bottom:4px}
.io-d{color:var(--ink-dim);font-size:14px;line-height:1.5}

/* ---------- Aviso de ajuste ---------- */
.adapt-note{font-family:var(--sans);font-size:13px;color:var(--en);background:var(--en-soft);border-radius:10px;padding:10px 14px;margin-bottom:22px;line-height:1.5;animation:fadeUp .5s ease}

/* ---------- Control flotante ---------- */
.dial{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:30;background:rgba(13,15,18,.82);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:100px;padding:6px}
.dial-btn{font-family:var(--sans);font-size:13.5px;font-weight:600;color:#241a08;background:var(--en);border:none;border-radius:100px;padding:9px 16px;cursor:pointer}
.dial-btn.ghost{background:transparent;color:var(--ink-dim)}
.dial-btn:active{transform:scale(.95)}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:74px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--bg2);border:1px solid var(--line);color:var(--ink);font-family:var(--sans);font-size:13.5px;padding:11px 18px;border-radius:100px;z-index:31;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Minijuegos ---------- */
.minigame{background:linear-gradient(180deg,rgba(232,185,106,.05),transparent);border:1px solid var(--line);border-radius:14px;padding:20px;margin:14px 0 28px;animation:fadeUp .5s ease}
.mg-tag{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--en);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.mg-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--en)}
.mg-instr{font-family:var(--sans);font-size:15px;color:var(--ink-dim);line-height:1.6;margin-bottom:16px}
.mg-sentence{font-size:20px;color:var(--ink);margin-bottom:18px;line-height:1.6}
.mg-gap{color:var(--en);letter-spacing:2px}
.mg-filled{color:var(--en);border-bottom:2px solid var(--en);padding:0 2px;animation:fadeUp .3s ease}
.mg-chips{display:flex;flex-wrap:wrap;gap:10px}
.mg-chip{font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:11px 16px;cursor:pointer;transition:transform .1s,border-color .2s}
.mg-chip:active{transform:scale(.94)}
.mg-chip.right{border-color:var(--ok);color:var(--ok)}
.mg-chip.nope{border-color:var(--danger);opacity:.5}
.mg-chip.placed{border-color:var(--en);color:var(--en)}
.mg-build-line{min-height:52px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px;border:1px dashed var(--line);border-radius:10px;margin-bottom:16px}
.mg-build-line.ok{border-color:var(--ok);border-style:solid}
.mg-placeholder{font-family:var(--sans);color:var(--ink-dim);font-size:14px;font-style:italic}
.mg-success{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink);margin-top:16px;padding-top:14px;border-top:1px solid var(--line);animation:fadeUp .4s ease}
.mg-hint{font-family:var(--sans);font-size:13.5px;color:var(--ink-dim);margin-top:12px}
.shake{animation:shake .5s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

.gate-input{font-family:var(--sans);font-size:16px;text-align:center;background:var(--bg2);border:1px solid var(--line);border-radius:100px;color:var(--ink);padding:14px 22px;width:min(280px,80vw);outline:none}
.gate-input:focus{border-color:var(--en)}
.hidden{display:none!important}