/* ==========================================================================
   v2 — botones elegantes sin cajas, barra rápida, CRT, guardado por ranuras,
   panel técnico. Se carga después de game.css y sustituye el estilo 9-slice.
   ========================================================================== */
/* cuadros: marco blanco y fondo negro de baja opacidad */
.btn, #choices .choice, .menu-btn {
  border: max(1px, calc(var(--u) * 1.5px)) solid rgba(255,255,255,.85) !important; border-image: none !important; image-rendering: auto;
  background: rgba(0,0,0,.35); border-radius: calc(var(--u) * 3px);
  box-shadow: 0 0 calc(var(--u) * 6px) rgba(255,255,255,.18), inset 0 0 calc(var(--u) * 10px) rgba(255,255,255,.06);
  color: #f3edf7; letter-spacing: .04em; overflow: visible;
  text-shadow: 0 0 calc(var(--u) * 10px) rgba(0,0,0,.95), 0 calc(var(--u) * 2px) calc(var(--u) * 4px) rgba(0,0,0,.9);
  transition: transform .45s var(--ease-spring), color .3s, text-shadow .35s, filter .3s, opacity .3s, background .3s, box-shadow .35s, border-color .3s;
}
/* el cuadro ya hace de fondo: sin sombra redonda detrás */
.btn::before { content: none; }
@media (hover: hover) {
  .btn:hover, #choices .choice:hover, .menu-btn:hover { background: rgba(0,0,0,.5); border-color: #fff !important;
    box-shadow: 0 0 calc(var(--u) * 14px) rgba(255,255,255,.55), 0 0 2px #fff, inset 0 0 calc(var(--u) * 14px) rgba(255,255,255,.14); }
}
.btn.toggled { border-color: #fff !important; box-shadow: 0 0 calc(var(--u) * 12px) rgba(255,255,255,.6), inset 0 0 calc(var(--u) * 12px) rgba(255,255,255,.16); }
/* línea de luz inferior */
.btn::after {
  content: ""; position: absolute; inset: auto 12% calc(var(--u) * 3px) 12%; height: max(1px, calc(var(--u) * 1.5px));
  border-radius: 2px; box-shadow: none; opacity: .38; z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95) 50%, rgba(255,255,255,0));
  transform: scaleX(.3); transition: transform .55s var(--ease-out), opacity .35s, box-shadow .35s;
}
.btn > span { transition: transform .45s var(--ease-spring); }
@media (hover: hover) {
  .btn:hover { transform: translateY(calc(var(--u) * -2px)) scale(1.05); filter: none; color: #fff; 
    text-shadow: 0 0 calc(var(--u) * 14px) rgba(255,255,255,.8), 0 0 calc(var(--u) * 2px) rgba(255,255,255,.9), 0 calc(var(--u)*2px) calc(var(--u)*5px) #000; }
  .btn:hover::after { transform: scaleX(1); opacity: 1; box-shadow: 0 0 calc(var(--u) * 10px) rgba(255,255,255,.9), 0 0 2px #fff; }
  .btn:hover > span { color: inherit; }
}
.btn:active, .btn.pressed { transform: scale(.95) !important; transition-duration: .09s !important; }
.btn:active > span, .btn.pressed > span { text-shadow: 0 0 calc(var(--u)*16px) rgba(255,255,255,1), 0 2px 4px #000; }
.btn.toggled { color: var(--cyan); filter: none; }
.btn.toggled::after { transform: scaleX(1); opacity: 1; box-shadow: 0 0 calc(var(--u)*10px) rgba(255,255,255,.9); background: linear-gradient(90deg, rgba(255,255,255,0), var(--cyan), rgba(255,255,255,0)); }
.btn[disabled], .btn.disabled { opacity: .3; }
.ripple { background: radial-gradient(circle, rgba(255,255,255,.35) 0%, rgba(255,255,255,.12) 40%, transparent 68%); }
.mote { position: fixed; z-index: 9998; width: 2px; height: 2px; border-radius: 50%; pointer-events: none; background: #fff; box-shadow: 0 0 4px rgba(255,255,255,.8); will-change: transform, opacity; }

/* barra rápida */
#dialog-head { min-height: calc(var(--u) * 50px); }
#quickmenu { display: flex; justify-content: center; flex-wrap: wrap; gap: calc(var(--u) * 2px) calc(var(--u) * 8px); margin-top: calc(var(--u) * 6px); }
.btn.qm { font-size: calc(var(--u) * 23px); padding: calc(var(--u) * 6px) calc(var(--u) * 12px); }
#text-box { min-height: calc(var(--u) * 170px * var(--tscale, 1)); }
#text { font-size: calc(var(--u) * 32px * var(--tscale, 1)); }
#dialog-shade { opacity: var(--box-op, 1); }
body.portrait #quickmenu { gap: 0 calc(var(--u) * 2px); }
body.portrait .btn.qm { font-size: calc(var(--u) * 21px); padding: calc(var(--u) * 8px); }

/* opciones */
#choices { align-items: center; gap: calc(var(--u) * 10px); }
#choices .choice { width: auto; min-width: 46%; max-width: 100%; min-height: 0 !important; padding: calc(var(--u) * 14px) calc(var(--u) * 70px); font-size: calc(var(--u) * 34px); line-height: 1.2; }
#choices .choice::before { inset: -18% -6%; }
#choices .choice::after { bottom: calc(var(--u) * 6px); }
#choices .choice .num { left: calc(var(--u) * 26px); opacity: .45; font-size: .7em; }
@media (hover: hover) { #choices .choice:hover { min-height: 0; transform: scale(1.04); } }

/* menú principal */
.menu-btn { width: auto; min-width: calc(var(--mu) * 360px); height: auto; padding: calc(var(--mu) * 7px) calc(var(--mu) * 40px); font-size: calc(var(--mu) * 38px); }
#menu-buttons { gap: calc(var(--mu) * 2px); }
@media (hover: hover) { .menu-btn:hover { width: auto; height: auto; } }

/* notificaciones sin caja */
.toast { border: 0 !important; border-image: none !important; background: radial-gradient(closest-side, rgba(0,0,0,.7), rgba(0,0,0,0)); padding: calc(var(--u)*14px) calc(var(--u)*40px); color: #fff; text-shadow: 0 0 calc(var(--u)*10px) rgba(255,255,255,.7), var(--outline); }

/* ventanas: cristal oscuro */
.modal { border: 0 !important; border-image: none !important; padding: calc(var(--u) * 34px) calc(var(--u) * 40px); border-radius: calc(var(--u) * 18px);
  background: linear-gradient(160deg, rgba(22,22,24,.95), rgba(8,8,12,.97)); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 calc(var(--u)*30px) calc(var(--u)*80px) rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08); }
.modal::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); }
.modal .btn.wide { min-width: calc(var(--u) * 200px); height: auto; padding: calc(var(--u) * 12px) calc(var(--u) * 30px); }
.settings { max-height: 64vh; overflow-y: auto; }
.set-sec { grid-column: 1 / -1; margin-top: calc(var(--u) * 14px); font-size: .75em; letter-spacing: .16em; text-transform: uppercase; color: var(--pink); border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: calc(var(--u)*4px); }
.seg { display: flex; gap: calc(var(--u) * 6px); flex-wrap: wrap; }
.seg button { font-size: .8em; padding: calc(var(--u)*5px) calc(var(--u)*16px); border-radius: 99px; color: #cfc6d8; background: rgba(255,255,255,.06); transition: background .25s, color .25s, transform .25s var(--ease-spring); }
.seg button.on { background: rgba(255,255,255,.25); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
.seg button:hover { transform: translateY(-1px); }

/* ranuras de guardado */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 270px), 1fr)); gap: calc(var(--u) * 16px); }
.slot { position: relative; text-align: left; border-radius: calc(var(--u) * 12px); overflow: hidden; background: rgba(255,255,255,.04); box-shadow: 0 0 0 1px rgba(255,255,255,.1);
  transition: transform .35s var(--ease-spring), box-shadow .3s; font-family: var(--serif); }
.slot .sth { aspect-ratio: 4/3; width: 100%; background: #0b0b10 center/cover no-repeat; display: grid; place-items: center; color: rgba(255,255,255,.22); font-size: calc(var(--u)*40px); transition: transform .6s var(--ease-out); }
.slot .sinfo { padding: calc(var(--u)*8px) calc(var(--u)*12px); font-size: calc(var(--u)*20px); line-height: 1.25; }
.slot .sinfo b { display: block; font-size: 1.1em; color: var(--pink); }
.slot .sinfo i { display: block; opacity: .7; font-family: var(--sans); font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .sdel { position: absolute; right: calc(var(--u)*6px); top: calc(var(--u)*6px); width: calc(var(--u)*40px); height: calc(var(--u)*40px); border-radius: 50%; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .2s; font-size: calc(var(--u)*20px); }
.slot:hover .sdel { opacity: 1; }
@media (hover: hover) { .slot:hover { transform: translateY(calc(var(--u)*-4px)); box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 0 calc(var(--u)*24px) rgba(255,255,255,.35); } .slot:hover .sth { transform: scale(1.05); } }
.slot.confirm { box-shadow: 0 0 0 2px var(--gold); }
.tabs-row { display: flex; justify-content: center; gap: calc(var(--u)*10px); margin-bottom: calc(var(--u)*14px); }

/* ocultar interfaz */
#dialog, #hud, #choices { transition: opacity .35s; }
body.ui-hidden #dialog, body.ui-hidden #hud, body.ui-hidden #choices, body.ui-hidden #toasts { opacity: 0 !important; pointer-events: none !important; }

/* pantalla retro: curvatura ligera */
#crt-glass { position: absolute; inset: 0; pointer-events: none; display: none; }
body.crt #stage-wrap { border-radius: calc(var(--ss) * 60px) / calc(var(--ss) * 52px); }
body.crt #crt-glass { display: block; border-radius: 0;
  background:
    radial-gradient(ellipse 125% 95% at 50% 50%, transparent 64%, rgba(0,0,0,.25) 87%, rgba(0,0,0,.55) 100%),
    radial-gradient(ellipse 55% 30% at 28% 12%, rgba(255,255,255,.045), transparent 70%);
  box-shadow: inset 0 0 70px rgba(0,0,0,.55), inset 0 0 14px rgba(0,0,0,.9); }
body.crt.crt-warp #stage { filter: url(#crt-warp); }

/* panel técnico (Ctrl) */
#dev-panel { left: 12px; top: 12px; width: min(470px, 94vw); max-height: calc(100vh - 24px); overflow: auto; padding: 12px 14px; border-radius: 12px; z-index: 60;
  background: rgba(8,8,14,.92); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 10px 40px rgba(0,0,0,.6); color: #e8e3f0; }
#dev-panel h4 { margin: 10px 0 4px; font: 600 11px/1 Consolas, monospace; letter-spacing: .12em; color: var(--pink); text-transform: uppercase; }
#dev-panel .kv { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; }
#dev-panel .kv span:nth-child(odd) { color: #8b86a0; }
#dev-panel .kv span:nth-child(even) { color: #9ef5b4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dev-panel input[type=text] { width: 100%; max-width: none; padding: 5px 8px; }
#dev-panel .hits { max-height: 180px; overflow: auto; }
#dev-panel .hits div { padding: 3px 6px; border-radius: 4px; cursor: pointer; color: #ddd; }
#dev-panel .hits div:hover { background: rgba(255,255,255,.18); }
#dev-panel .row2 { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
#dev-panel .vars label { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
#dev-panel .vars input[type=text] { width: 120px; }

/* paleta monocroma de la interfaz (los colores de los personajes se mantienen) */
:root { --pink: #e8e8e8; --cyan: #ffffff; --mint: #bdbdbd; --gold: #ffffff; }
.btn.toggled { color: #fff; text-shadow: 0 0 calc(var(--u)*12px) rgba(255,255,255,.9), 0 2px 4px #000; }
.pill.save > span { color: inherit; }
#legal-touch { color: #fff; }
.switch.on { background: #d0d0d0; } .switch.on::after { background: #111; }
.seg button.on { background: rgba(255,255,255,.22); box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
#boot .bar i { background: linear-gradient(90deg, #888, #fff); }
.spark { box-shadow: 0 0 8px rgba(255,255,255,.9); }
/* pulsación estable: solo transform/opacity, nunca tamaño */
.btn > span { pointer-events: none; }
.btn::before, .btn::after { pointer-events: none; }
.btn > .ripple, .ripple { position: absolute !important; pointer-events: none; z-index: 0; left: 0; top: 0; }
#quickmenu .btn { flex: 0 0 auto; }

/* el contenido del botón nunca cambia su tamaño */
.btn { contain: layout; }

/* filtro anime clásico (solo el escenario: la interfaz y el texto quedan nítidos) */
body.anime-svg #camera { filter: url(#anime-soft); }
body.anime-lite[data-anime="soft"] #camera { filter: blur(0.3px) contrast(1.05) saturate(1.03); }
body.anime-lite[data-anime="strong"] #camera { filter: blur(0.55px) contrast(1.08) saturate(1.05) brightness(1.02); }

/* recorte del escenario: evita que los fondos (más grandes que la pantalla) asomen como un borde claro con la curvatura */
#stage { overflow: hidden; }

/* ---------- aviso "X recordará esto." ---------- */
.remember-hint { align-self: flex-start; padding: calc(var(--u)*8px) calc(var(--u)*26px) calc(var(--u)*8px) calc(var(--u)*18px); font-family: var(--serif); font-style: italic; font-size: calc(var(--u)*22px); letter-spacing: .04em; color: #fff;
  background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,0)); border-left: 2px solid rgba(255,255,255,.85); text-shadow: 0 0 calc(var(--u)*8px) rgba(255,255,255,.45);
  animation: remember-in 4.2s ease forwards; }
@keyframes remember-in { 0% { opacity: 0; transform: translateX(calc(var(--u)*-24px)); } 10% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(var(--u)*-8px)); } }

/* ---------- panel de desarrollador v2 ---------- */
#dev-panel { z-index: 62; width: min(520px, 94vw); font: 12px/1.45 Consolas, "Cascadia Mono", monospace; }
#dev-panel .dev-head { display: flex; justify-content: space-between; align-items: center; }
#dev-panel .dev-head b { color: #fff; font-size: 13px; }
#dev-panel .dev-head span { opacity: .55; font-size: 11px; }
#dev-panel .dev-tabs { display: flex; gap: 2px; margin: 8px 0 2px; border-bottom: 1px solid rgba(255,255,255,.2); }
#dev-panel .dev-tabs button { flex: 1; padding: 6px 4px; background: none; border: 0; border-bottom: 2px solid transparent; color: #aaa; cursor: pointer; font: inherit; }
#dev-panel .dev-tabs button.on { color: #fff; border-bottom-color: #fff; }
#dev-panel button { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); color: #eee; border-radius: 5px; padding: 3px 8px; cursor: pointer; font: inherit; }
#dev-panel button:hover { background: rgba(255,255,255,.2); }
#dev-panel button.main { background: #fff; color: #000; }
#dev-panel select, #dev-panel input[type=number], #dev-panel input[type=text] { background: #111; color: #eee; border: 1px solid rgba(255,255,255,.3); border-radius: 5px; padding: 3px 6px; font: inherit; }
#dev-panel .dev-line > div { padding: 2px 0; border-bottom: 1px dashed rgba(255,255,255,.08); word-break: break-word; }
#dev-panel .dev-line .k { display: inline-block; min-width: 82px; color: #8b86a0; }
#dev-panel .dev-line code { color: #9ef5b4; font-size: 11px; }
#dev-panel .dev-route { color: #ccc; word-break: break-word; }
#dev-panel .dev-route span:last-child { color: #fff; font-weight: 700; }
#dev-panel .dev-bar { display: grid; grid-template-columns: 96px 1fr 28px; gap: 8px; align-items: center; margin: 3px 0; }
#dev-panel .dev-bar > div { position: relative; height: 8px; background: rgba(255,255,255,.1); border-radius: 4px; }
#dev-panel .dev-bar i { position: absolute; top: 0; bottom: 0; background: #fff; border-radius: 4px; }
#dev-panel .dev-bar b { position: absolute; top: -3px; bottom: -3px; width: 1px; background: #888; }
#dev-panel .dev-bar em { font-style: normal; text-align: right; color: #fff; }
#dev-panel .dev-flags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
#dev-panel .dev-flags span { padding: 1px 6px; border-radius: 9px; border: 1px solid rgba(255,255,255,.2); color: #777; font-size: 11px; }
#dev-panel .dev-flags span.on { color: #000; background: #ddd; }
#dev-panel .dev-preview { margin-top: 6px; padding: 6px; background: rgba(255,255,255,.05); border-radius: 6px; }
#dev-panel .dev-preview .ttl { color: #fff; margin-bottom: 4px; }
#dev-panel .dev-preview div { color: #999; padding: 1px 0; }
#dev-panel .dev-preview div.cur { color: #fff; background: rgba(255,255,255,.1); }
#dev-panel .dev-preview b { display: inline-block; min-width: 40px; color: #fff; }
#dev-panel .dev-preview i { font-style: normal; color: #8b86a0; margin-right: 4px; }
#dev-panel .dev-preview i.new, #dev-panel .dev-preview em { color: #ffd479; font-style: normal; }
#dev-panel .dev-preview .miss { color: #ff9a9a; }
#dev-panel .nov { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,.08); }
#dev-panel .nov.cur { background: rgba(255,255,255,.08); }
#dev-panel .nov > div { display: flex; flex-direction: column; }
#dev-panel .nov b { color: #fff; font-weight: 600; }
#dev-panel .nov span { color: #bbb; }
#dev-panel .nov small { color: #777; }
#dev-panel .vars input[type=number] { width: 64px; }

/* barra de recorrido de novedades */
#dev-tour { position: fixed; right: 10px; top: 10px; z-index: 59; display: flex; align-items: center; gap: 8px; max-width: min(520px, calc(100vw - 20px));
  padding: 8px 10px; background: rgba(8,8,14,.92); border: 1px solid rgba(255,255,255,.55); border-radius: 10px; color: #eee; font: 12px/1.4 Consolas, monospace; box-shadow: 0 8px 30px rgba(0,0,0,.6); }
#dev-tour[hidden] { display: none; }
#dev-tour > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#dev-tour small { color: #999; letter-spacing: .08em; }
#dev-tour b { color: #fff; font-size: 13px; }
#dev-tour span { color: #ccc; }
#dev-tour i { color: #8b86a0; font-style: normal; font-size: 11px; }
#dev-tour button { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 6px; padding: 6px 10px; cursor: pointer; font: inherit; }
#dev-tour button:disabled { opacity: .3; cursor: default; }

/* ---------- menú de inicio en cuadro 4:3, con la disposición del original (640×480 → unidades de 1280×960) ---------- */
#screen-menu { --mu: var(--ms); inset: auto; left: var(--mx); top: var(--my); width: calc(var(--ms) * 1280px); height: calc(var(--ms) * 960px); background: #000; }
#menu-bg > img:first-child { object-fit: cover; }
.menu-light { width: calc(var(--mu) * 450px); left: calc(var(--mu) * 638px); top: calc(var(--mu) * 458px); }
.menu-light.l2 { width: calc(var(--mu) * 330px); }
#menu-center { position: absolute; inset: 0; transform: none; display: block; }
#title-logo { position: absolute; left: 0; right: 0; margin: 0 auto; top: calc(var(--mu) * -13px); height: calc(var(--mu) * 482px); max-width: none; }
#menu-buttons { position: absolute; left: 0; right: 0; top: calc(var(--mu) * 452px); gap: calc(var(--mu) * 4px); }
.menu-btn { min-width: calc(var(--mu) * 424px); padding: calc(var(--mu) * 5px) calc(var(--mu) * 36px); font-size: calc(var(--mu) * 34px); line-height: 1.2; }
#menu-flags { left: calc(var(--mu) * 18px); top: calc(var(--mu) * 16px); gap: calc(var(--mu) * 26px); }
.menu-audio { right: calc(var(--mu) * 6px); top: calc(var(--mu) * 4px); }
#menu-patrons { right: calc(var(--mu) * 16px); top: auto; bottom: calc(var(--mu) * 26px); max-height: calc(var(--mu) * 560px); overflow: hidden; text-align: right; }
#menu-version { left: calc(var(--mu) * 16px); bottom: calc(var(--mu) * 30px); }
#menu-credits { bottom: calc(var(--mu) * 30px); }

/* ---------------------------------------------------------------- efecto psicodélico (comando fx «psico», niveles 1-3) */
#psico-wrap { position: absolute; inset: 0; }
/* capa de color: tiñe la imagen de arcoíris sin borrar sus detalles (mezcla «color») */
#fx-psico { position: absolute; inset: -25%; pointer-events: none; opacity: 0; transition: opacity 1.6s ease;
  mix-blend-mode: color; background: conic-gradient(from 0deg at 50% 50%, #ff2bd6, #ffe600, #00ffd0, #4b5bff, #ff7a00, #ff2bd6); }
/* manchas que invierten los colores (mezcla «diferencia»), solo en el nivel 3 */
#fx-psico-b { position: absolute; inset: -20%; pointer-events: none; opacity: 0; mix-blend-mode: difference;
  background: radial-gradient(circle at 30% 40%, #ff00aa 0, transparent 38%), radial-gradient(circle at 72% 62%, #00ffee 0, transparent 42%), radial-gradient(circle at 50% 85%, #ffee00 0, transparent 30%); }
#stage.psico-1 #fx-psico { opacity: .3; animation: psico-spin 10s linear infinite; }
#stage.psico-2 #fx-psico { opacity: .55; animation: psico-spin 5s linear infinite, psico-breathe 2.4s ease-in-out infinite; }
#stage.psico-3 #fx-psico { opacity: .6; animation: psico-spin 2.2s linear infinite reverse, psico-breathe 0.9s ease-in-out infinite; }
#stage.psico-3 #fx-psico-b { animation: psico-pulse 1.3s ease-in-out infinite, psico-wander 3.1s ease-in-out infinite; }
#stage.psico-1 .layer { animation: psico-hue1 9s linear infinite; }
#stage.psico-2 .layer { animation: psico-hue2 4s linear infinite; }
#stage.psico-3 .layer { animation: psico-hue3 1.6s linear infinite; }
#stage.psico-2 #psico-wrap { filter: url(#psico-warp); animation: psico-wobble 3.7s ease-in-out infinite; }
#stage.psico-3 #psico-wrap { filter: url(#psico-warp-strong); animation: psico-wobble3 1.7s ease-in-out infinite; }
@keyframes psico-spin { to { transform: rotate(360deg); } }
@keyframes psico-breathe { 0%, 100% { filter: blur(0); } 50% { filter: blur(8px); } }
@keyframes psico-pulse { 0%, 100% { opacity: 0; } 35% { opacity: .75; } 60% { opacity: .2; } 80% { opacity: .6; } }
@keyframes psico-wander { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(8%, -6%) scale(1.3); } 66% { transform: translate(-7%, 5%) scale(.8); } }
@keyframes psico-hue1 { from { filter: hue-rotate(0deg) saturate(1.6); } to { filter: hue-rotate(360deg) saturate(1.6); } }
@keyframes psico-hue2 { from { filter: hue-rotate(0deg) saturate(2.3) contrast(1.15) drop-shadow(8px 0 0 rgba(255, 0, 140, .55)) drop-shadow(-8px 0 0 rgba(0, 255, 230, .55)); }
  to { filter: hue-rotate(360deg) saturate(2.3) contrast(1.15) drop-shadow(8px 0 0 rgba(255, 0, 140, .55)) drop-shadow(-8px 0 0 rgba(0, 255, 230, .55)); } }
@keyframes psico-hue3 {
  0% { filter: brightness(1.7) hue-rotate(0deg) saturate(3) contrast(1.3) invert(0) drop-shadow(18px 0 0 rgba(255, 0, 140, .75)) drop-shadow(-18px 0 0 rgba(0, 255, 230, .75)); }
  25% { filter: brightness(1.5) hue-rotate(90deg) saturate(4) contrast(1.5) invert(.2) drop-shadow(-26px 10px 0 rgba(255, 230, 0, .75)) drop-shadow(26px -10px 0 rgba(90, 0, 255, .75)); }
  50% { filter: brightness(1.3) hue-rotate(180deg) saturate(2.5) contrast(1.2) invert(.75) drop-shadow(10px 22px 0 rgba(0, 255, 120, .75)) drop-shadow(-10px -22px 0 rgba(255, 60, 0, .75)); }
  75% { filter: brightness(1.8) hue-rotate(270deg) saturate(5) contrast(1.6) invert(.3) drop-shadow(-30px 0 0 rgba(255, 0, 255, .75)) drop-shadow(30px 0 0 rgba(0, 200, 255, .75)); }
  100% { filter: brightness(1.7) hue-rotate(360deg) saturate(3) contrast(1.3) invert(0) drop-shadow(18px 0 0 rgba(255, 0, 140, .75)) drop-shadow(-18px 0 0 rgba(0, 255, 230, .75)); } }
@keyframes psico-wobble { 0%, 100% { transform: scale(1.04) rotate(0deg) skew(0deg, 0deg); } 25% { transform: scale(1.07) rotate(1.3deg) skew(2deg, 0deg); } 75% { transform: scale(1.03) rotate(-1.3deg) skew(-2deg, 1deg); } }
@keyframes psico-wobble3 { 0%, 100% { transform: scale(1.1) rotate(0deg) skew(0deg, 0deg); } 20% { transform: scale(1.2) rotate(4deg) skew(7deg, -2deg); }
  45% { transform: scale(1.05) rotate(-3deg) skew(-6deg, 4deg); } 70% { transform: scale(1.25) rotate(5deg) skew(3deg, -6deg) translateX(-30px); } 85% { transform: scale(1.12) rotate(-5deg) skew(-8deg, 2deg) translateY(20px); } }

/* ---------------------------------------------------------------- legibilidad y quién habla */
/* sombra suave detrás del texto del diálogo (sigue la «Opacidad del cuadro» de Ajustes) */
#text-box { isolation: isolate; }
#text-box::before { content: ""; position: absolute; z-index: -1; inset: -12% -3% -8%; pointer-events: none; opacity: var(--box-op, 1);
  background: radial-gradient(ellipse 62% 70% at 50% 58%, rgba(0, 0, 0, .2), rgba(0, 0, 0, .12) 55%, rgba(0, 0, 0, 0) 100%); }
#text { text-shadow: var(--outline), 0 0 14px rgba(0, 0, 0, .7); }
/* con varios personajes en pantalla, los que no hablan se oscurecen un poco */
.obj img { transition: filter .25s ease; }
.obj.dim img { filter: brightness(.68) saturate(.8); }

/* ---------------------------------------------------------------- cartel de final */
.ending-card { position: absolute; left: 0; right: 0; top: 34%; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6px);
  pointer-events: none; text-align: center; color: #fff; text-shadow: var(--outline-thick), 0 0 24px rgba(0, 0, 0, .9); animation: ending-in 2.4s ease both; }
.ending-card small { font-family: var(--sans); letter-spacing: .4em; font-size: calc(var(--u) * 26px); opacity: .8; }
.ending-card b { font-family: var(--serif); font-size: calc(var(--u) * 78px); line-height: 1.05; }
@keyframes ending-in { from { opacity: 0; transform: translateY(calc(var(--u) * 18px)); letter-spacing: .08em; } to { opacity: 1; transform: none; letter-spacing: 0; } }