/* destino.css — La Máquina del Destino
   Muy estilo película. El espectador toma decisiones binarias
   (izquierda/derecha, sí/no…) y la web dibuja un árbol de
   decisiones. Al final, todas las rutas convergen: "Todas las
   rutas llevaban a…" + la elección que envías tú desde el control.
   Tema cine: negro, dorado, tipografía serif. */

.exit-bar { position:fixed; top:10px; right:10px; display:flex; gap:8px; z-index:60; }
.exit-btn { font-size:12px; font-weight:600; padding:6px 11px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--muted); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.08); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.exit-btn:active { transform:translateY(1px); }
.exit-btn.danger { color:var(--danger); border-color:#f3c9d2; }
#logout-btn { display:none; }

/* ===================== JUEGO ===================== */
.ds-screen { position:relative; min-height:100svh; min-height:100vh; background:radial-gradient(120% 90% at 50% 30%, #14110a 0%, #0a0906 55%, #030302 100%); color:#efe4c8; overflow:hidden; }
.ds-screen .exit-btn { background:rgba(24,20,10,.9); color:#d8be7a; border-color:#4a3d1e; }
/* Barras cine */
.ds-screen::before, .ds-screen::after { content:""; position:fixed; left:0; right:0; height:34px; background:#000; z-index:40; pointer-events:none; }
.ds-screen::before { top:0; box-shadow:0 1px 0 rgba(216,180,106,.25); }
.ds-screen::after { bottom:0; box-shadow:0 -1px 0 rgba(216,180,106,.25); }
.ds-inner { position:relative; z-index:2; width:100%; max-width:560px; margin:0 auto; min-height:100svh; min-height:100vh; padding:44px 16px 48px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.ds-title { font-family:Georgia,"Times New Roman",serif; font-size:19px; font-weight:800; letter-spacing:6px; margin:0; color:#d8b46a; text-transform:uppercase; text-shadow:0 0 22px rgba(216,180,106,.35); }
.ds-conn { margin:0; min-height:16px; font-size:12px; color:#8a7a52; font-style:italic; }
.ds-conn.is-error { color:#e07; }

/* Intro */
.ds-intro { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
.ds-lead { font-family:Georgia,serif; font-size:19px; color:#efe4c8; line-height:1.6; max-width:360px; }
.ds-lead b { color:#d8b46a; }
.ds-startbtn { font-family:Georgia,serif; font-size:15px; font-weight:700; letter-spacing:3px; padding:15px 40px; border-radius:4px; border:1.5px solid #d8b46a; background:rgba(216,180,106,.08); color:#efd9a0; cursor:pointer; text-transform:uppercase; }
.ds-startbtn:active { transform:translateY(1px); }

/* Máquina */
.ds-machine { width:100%; display:flex; flex-direction:column; align-items:center; gap:12px; }
.ds-treewrap { position:relative; width:100%; height:min(56vh, 460px); border-radius:12px; overflow:hidden; background:radial-gradient(120% 90% at 50% 42%, #100d07 0%, #060502 70%, #010100 100%); box-shadow:inset 0 0 90px rgba(0,0,0,.9), inset 0 0 26px rgba(216,180,106,.06); }
.ds-tree { position:absolute; inset:0; width:100%; height:100%; }
.ds-step { font-family:Georgia,serif; font-size:12px; letter-spacing:2px; color:#a8925c; text-transform:uppercase; }
.ds-prompt { font-family:Georgia,serif; font-size:19px; color:#efe4c8; min-height:26px; text-shadow:0 0 18px rgba(216,180,106,.25); }

.ds-choices { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ds-choice { padding:20px 10px; border-radius:5px; border:1.5px solid #6a5a2e; background:linear-gradient(180deg, rgba(40,33,14,.7), rgba(20,16,6,.7)); color:#efe4c8; font-family:Georgia,serif; font-size:20px; font-weight:700; letter-spacing:1px; cursor:pointer; transition:transform .1s, border-color .2s, background .2s; }
.ds-choice:hover { border-color:#d8b46a; }
.ds-choice:active { transform:scale(.97); }
.ds-choice.gone { opacity:.25; }
.ds-choice.chosen { border-color:#f2cf7a; background:linear-gradient(180deg, rgba(90,70,26,.8), rgba(50,38,12,.8)); box-shadow:0 0 22px rgba(242,207,122,.35); }

.ds-count { font-family:"Courier New",monospace; font-size:11px; letter-spacing:1px; color:#8a7a52; }

/* Revelación */
.ds-reveal { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px; background:radial-gradient(circle at 50% 45%, rgba(20,16,6,.6), rgba(3,3,2,.92)); opacity:0; pointer-events:none; transition:opacity .6s; }
.ds-reveal.show { opacity:1; }
.ds-reveal-pre { font-family:Georgia,serif; font-size:15px; letter-spacing:3px; color:#d8b46a; text-transform:uppercase; max-width:340px; line-height:1.5; }
.ds-reveal-word { font-family:Georgia,serif; font-size:clamp(38px, 13vw, 78px); font-weight:800; line-height:1.05; color:#f4d98a; text-shadow:0 0 40px rgba(244,217,138,.6); word-break:break-word; opacity:0; transform:scale(.8); }
.ds-reveal-word.in { animation:dsWord 1s cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes dsWord { to { opacity:1; transform:scale(1); } }
.ds-reveal-cap { font-family:Georgia,serif; font-style:italic; font-size:15px; color:#c9b688; min-height:20px; max-width:360px; }
.ds-wait { font-family:Georgia,serif; font-style:italic; font-size:15px; color:#a8925c; }

/* ===================== CONTROL ===================== */
.dsc-send { width:100%; padding:14px; border-radius:6px; border:none; cursor:pointer; color:#231708; font-weight:800; font-size:15px; letter-spacing:1px; background:linear-gradient(135deg,#e6c574,#c99f45); }
.dsc-send:active { transform:translateY(1px); }
.dsc-note { margin:0; font-size:12px; color:var(--muted); text-align:left; width:100%; }
.dsc-reset { width:100%; padding:12px; border-radius:6px; border:none; cursor:pointer; color:#e6e9f2; font-weight:800; letter-spacing:.5px; background:#3a4150; }
.dsc-reset:active { transform:translateY(1px); }
.dsc-steps { width:100%; display:flex; gap:8px; }
.dsc-step { flex:1; padding:10px 4px; border-radius:9px; border:1px solid var(--line); background:#f6efe1; color:#7a5e30; font-weight:700; cursor:pointer; }
.dsc-step.active { background:#d8b46a; color:#231708; border-color:#b8923f; }