:root { --u: 1; --noche: #140a2e; --vio: #7C5CFF; --cian: #22D3EE; --lima: #B6F23A; --rosa: #FF4FD8; --nar: #FF8A3D; }
html, body { margin: 0; height: 100%; background: var(--noche); overflow: hidden; color: #fff; }
#lienzo { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; font-family: 'Fredoka', 'Baloo 2', system-ui, sans-serif; }

/* ── subtítulos ── */
#subs { position: absolute; left: 0; right: 0; bottom: calc(64px * var(--u)); }
.vertical #subs { bottom: calc(330px * var(--u)); }
.sub { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; will-change: transform, opacity; }
.sub .linea { text-wrap: balance; font-weight: 700; font-size: calc(84px * var(--u)); line-height: 1.12; letter-spacing: .004em; padding: 0 calc(90px * var(--u)); }
.vertical .sub .linea { font-size: calc(92px * var(--u)); padding: 0 calc(60px * var(--u)); }
.sub.grande .linea { font-size: calc(104px * var(--u)); }
.vertical .sub.grande .linea { font-size: calc(108px * var(--u)); }
.w { display: inline-grid; transform-origin: 50% 85%; }
.w b { grid-area: 1 / 1; font-weight: 700; white-space: nowrap; position: relative; }
.w .st { color: #2a1150; -webkit-text-stroke: calc(17px * var(--u)) #2a1150; filter: drop-shadow(0 calc(8px * var(--u)) 0 rgba(22, 6, 48, .55)); }
.w .fi { color: #fffaf3; }
.hl .fi { background: linear-gradient(92deg, #ffe066, #ff8a3d 48%, #ff4fd8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chispa .hl .fi { background-image: linear-gradient(92deg, #fff1a8, #ffd34a 40%, #22D3EE); }
.ahora .hl .fi { background-image: linear-gradient(92deg, #d6ff6a, #B6F23A 30%, #22D3EE 75%, #8fe8ff); }
.final .hl .fi { background-image: linear-gradient(92deg, #ffe066, #ff8a3d 35%, #ff4fd8 70%, #b48cff); }
.subsub { margin-top: .35em; font-weight: 600; font-size: calc(36px * var(--u)); color: #fff;
  text-shadow: 0 0 calc(3px * var(--u)) #2a1150, 0 calc(3px * var(--u)) 0 #2a1150, calc(2px * var(--u)) 0 0 #2a1150, calc(-2px * var(--u)) 0 0 #2a1150, 0 calc(-2px * var(--u)) 0 #2a1150; }
.vertical .subsub { font-size: calc(40px * var(--u)); padding: 0 1em; }

/* ── etiquetas sobre las islas y los agentes ── */
#etqs { position: absolute; inset: 0; }
.etq { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: .42em; white-space: nowrap; transform-origin: 50% 100%;
  font-weight: 700; font-size: calc(38px * var(--u)); color: #2a1b4a; background: #fffaf3; padding: .2em .75em .22em .5em; border-radius: 999px;
  box-shadow: 0 0 0 calc(4px * var(--u)) var(--c), 0 calc(8px * var(--u)) calc(18px * var(--u)) rgba(30, 8, 60, .45); will-change: transform; }
.etq i { width: .62em; height: .62em; border-radius: 50%; flex: none; }
.etq.peq { font-size: calc(27px * var(--u)); box-shadow: 0 0 0 calc(3px * var(--u)) var(--c), 0 0 calc(18px * var(--u)) var(--c); }
.vertical .etq { font-size: calc(40px * var(--u)); }
.vertical .etq.peq { font-size: calc(30px * var(--u)); }

/* ── píldora de capítulo y marca ── */
#capitulo { position: absolute; top: calc(46px * var(--u)); left: calc(54px * var(--u)); font-weight: 700; font-size: calc(30px * var(--u));
  letter-spacing: .16em; padding: .32em .9em .3em; border-radius: 999px; transform-origin: 0 50%; opacity: 0; }
#capitulo.antes { background: rgba(42, 22, 74, .78); color: #f1e6ff; box-shadow: inset 0 0 0 calc(3px * var(--u)) #c9b3ff; }
#capitulo.ahora { background: linear-gradient(90deg, #B6F23A, #22D3EE); color: #14092e; box-shadow: 0 0 calc(26px * var(--u)) rgba(34, 211, 238, .65); }
.vertical #capitulo { top: calc(120px * var(--u)); }
#marca { position: absolute; top: calc(44px * var(--u)); right: calc(54px * var(--u)); font-weight: 600; font-size: calc(32px * var(--u)); display: flex; align-items: center; gap: .4em;
  text-shadow: 0 calc(2px * var(--u)) calc(6px * var(--u)) rgba(30, 10, 60, .6); opacity: .92; }
#marca i { width: .9em; height: .9em; border-radius: .18em; background: linear-gradient(135deg, var(--rosa), var(--nar)); box-shadow: inset 0 -.12em 0 rgba(0,0,0,.18); }
.vertical #marca { top: calc(118px * var(--u)); }

/* ── modo vivo: controles ── */
#controles { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 999px; background: rgba(20, 10, 46, .72); box-shadow: 0 6px 24px rgba(0,0,0,.35); font: 600 14px 'Fredoka', system-ui, sans-serif; z-index: 5;
  opacity: .25; transition: opacity .3s; }
#controles:hover, #controles:focus-within, .tactil #controles { opacity: 1; }
#controles button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 16px; cursor: pointer; }
#controles button:hover { background: rgba(255,255,255,.24); }
#controles .volver { color: #fff; text-decoration: none; padding: 0 10px; white-space: nowrap; }
.barra { width: min(32vw, 260px); height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
#progreso { height: 100%; width: 0; background: linear-gradient(90deg, var(--lima), var(--cian)); }
#portada { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 20%, rgba(255,160,120,.18), rgba(20,10,46,.72)); z-index: 6;
  font-family: 'Fredoka', system-ui, sans-serif; text-align: center; padding: 16px; }
#portada .caja { max-width: 680px; }
#portada h1 { font-size: clamp(40px, 9vw, 76px); margin: .2em 0 .1em; line-height: 1; text-shadow: 0 4px 0 #2a1150; }
#portada p { font-size: clamp(16px, 4vw, 20px); opacity: .92; margin: 0 0 1.2em; }
#portada button { font: 700 20px 'Fredoka', system-ui, sans-serif; padding: .7em 1.6em; border-radius: 999px; border: 0; cursor: pointer; color: #14092e;
  background: linear-gradient(90deg, var(--lima), var(--cian)); box-shadow: 0 8px 30px rgba(34,211,238,.45); }
#portada button:disabled { opacity: .6; cursor: wait; }
.cubo { width: 72px; height: 60px; margin: 0 auto; border-radius: 10px; background: #ec6b4b; position: relative; box-shadow: inset 0 -10px 0 #d0533c; animation: bote 1.2s ease-in-out infinite; }
.cubo i { position: absolute; top: 16px; width: 14px; height: 20px; background: #fff; border-radius: 3px; }
.cubo i:first-child { left: 16px; } .cubo i:last-child { right: 16px; }
@keyframes bote { 50% { transform: translateY(-10px) scaleY(1.05); } }
.render #controles, .render #portada { display: none !important; }
@media (prefers-reduced-motion: reduce) { .cubo { animation: none; } }
#portada[hidden], #controles[hidden] { display: none; }
.sinui #ui { display: none; }