/* Buzón + sistema de diálogos
   (archivo: css/components/mailbox-dialogue.css) */
/* ══════════ BOTÓN BUZÓN (pestaña pegada al borde izquierdo) ══════════ */
#sbmail-fab {
  position: fixed;
  left: 0;
  top: 26%;
  z-index: 880;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 12px 10px;
  border: 4px solid #000;
  border-left: none;
  border-radius: 0 20px 20px 0;
  background: linear-gradient(180deg, var(--yellow-bright, #FFD700) 0%, var(--yellow-mid, #F5C200) 55%, var(--yellow-dark, #C89A00) 100%);
  box-shadow: 5px 6px 0 #000, 0 10px 26px rgba(0,0,0,.55), inset 0 3px 0 rgba(255,255,255,.5);
  cursor: pointer;
  transform: translateX(-6px) rotate(-1.5deg);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, filter .18s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#sbmail-fab:hover {
  transform: translateX(4px) rotate(-1.5deg) scale(1.06);
  box-shadow: 8px 8px 0 #000, 0 14px 30px rgba(0,0,0,.6), inset 0 3px 0 rgba(255,255,255,.55);
  filter: saturate(1.15);
}
#sbmail-fab:active {
  transform: translateX(0) rotate(-1.5deg) scale(.92);
  box-shadow: 2px 2px 0 #000, inset 0 3px 0 rgba(255,255,255,.4);
}
#sbmail-fab.sbmail-hidden { opacity: 0; pointer-events: none; transform: translateX(-110%); }

@keyframes sbmailIdle {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(4deg)  translateY(-3px); }
}

/* sobre dibujado en SVG */
#sbmail-fab .sbmail-env {
  width: 40px; height: 32px; display: block; overflow: visible;
  animation: sbmailIdle 3.4s ease-in-out infinite;
}
#sbmail-fab:hover .sbmail-env { animation-play-state: paused; }
#sbmail-fab .sbmail-flap {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
#sbmail-fab:hover .sbmail-flap { transform: rotateX(150deg) translateY(-2px); }
#sbmail-fab .sbmail-label {
  font-family: 'Fredoka One', 'Fredoka', sans-serif;
  font-size: .78rem;
  letter-spacing: 1px;
  color: #1a1400;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .28s ease, margin .28s ease;
}
#sbmail-fab:hover .sbmail-label { max-width: 120px; }

/* burbuja de "correo nuevo" */
#sbmail-badge {
  position: absolute;
  top: -9px;
  right: -9px;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border: 3px solid #000;
  border-radius: 999px;
  background: var(--red-close, #ff3333);
  color: #fff;
  font-family: 'Fredoka One', 'Fredoka', sans-serif;
  font-size: .72rem;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 3px 0 #000;
  animation: sbmailBadge 1s ease-in-out infinite;
  pointer-events: none;
}
#sbmail-badge.sbmail-off { display: none; }
@keyframes sbmailBadge {
  0%, 100% { transform: scale(1) rotate(-8deg); }
  50%      { transform: scale(1.22) rotate(8deg); }
}

/* ══════════ OVERLAY DEL DIÁLOGO ══════════ */
#sbdlg-overlay {
  /* ═══ AJUSTES RÁPIDOS DEL PERSONAJE Y LA CAJA ═══
     Toca sólo estos valores para recolocarlo todo.        */
  --npc-w      : clamp(300px, 46vw, 640px);  /* ancho del personaje            */
  --npc-max-h  : min(96vh, 1020px);          /* alto máximo (lo hace más grande) */
  --npc-x      : 0px;                        /* moverlo a der (+) / izq (-)    */
  --npc-y      : 0px;                        /* subirlo (+) / bajarlo (-)      */
  --box-inset  : clamp(84px, 14vw, 230px);   /* cuánto se aparta la caja del borde
                                                (menos = la caja tapa más cuerpo) */
  --box-alpha  : .86;                        /* opacidad de la caja: baja para
                                                ver más cuerpo por detrás        */
  --sbdlg-padb : clamp(12px, 3.5vh, 40px);   /* margen inferior de la escena    */

  position: fixed;
  inset: 0;
  z-index: 60000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0 clamp(10px, 3vw, 40px) var(--sbdlg-padb);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#sbdlg-overlay.sbdlg-on { display: flex; }

/* — fondo semitransparente en movimiento — */
#sbdlg-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 120%, rgba(255,215,0,.16), transparent 62%),
              linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,.42) 100%);
  /* el desenfoque a pantalla completa es LO MÁS CARO de todo esto:
     en modo ligero se desactiva solo (ver .sbdlg-lite más abajo)      */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .35s ease;
  contain: strict;
}
#sbdlg-overlay.sbdlg-vis #sbdlg-bg { opacity: 1; }

/* cintas de peligro que se deslizan */
#sbdlg-bg::before {
  content: '';
  position: absolute;
  inset: -18%;
  will-change: transform;
  background: repeating-linear-gradient(45deg,
    rgba(255,215,0,.075) 0 26px, rgba(0,0,0,0) 26px 60px);
  animation: sbdlgSlide 9s linear infinite;
}
/* sol de rayos girando */
#sbdlg-bg::after {
  content: '';
  position: absolute;
  left: 50%; top: 55%;
  width: 122vmax; height: 122vmax;   /* lo justo para cubrir al girar */
  margin: -61vmax 0 0 -61vmax;
  will-change: transform;
  background: repeating-conic-gradient(from 0deg,
    rgba(255,255,255,.030) 0deg 7deg, rgba(255,255,255,0) 7deg 14deg);
  animation: sbdlgSpin 70s linear infinite;
  opacity: .85;
}
@keyframes sbdlgSlide { to { transform: translate(60px, 60px); } }
@keyframes sbdlgSpin  { to { transform: rotate(360deg); } }

/* ══════════ ESCENARIO: NPC + CAJA ══════════ */
#sbdlg-stage {
  position: relative;
  width: min(1140px, 100%);
  display: block;
  padding-left: var(--box-inset);
  transform: translateY(30px);
  opacity: 0;
  transition: transform .38s cubic-bezier(.34,1.56,.64,1), opacity .28s ease,
              filter .3s ease;
}
#sbdlg-overlay.sbdlg-vis #sbdlg-stage { transform: translateY(0); opacity: 1; }
#sbdlg-overlay.sbdlg-shake #sbdlg-stage { animation: sbdlgShake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes sbdlgShake {
  10%, 90% { transform: translate(-4px, 2px) rotate(-.6deg); }
  20%, 80% { transform: translate(7px, -4px) rotate(.8deg); }
  30%, 50%, 70% { transform: translate(-11px, 5px) rotate(-1.1deg); }
  40%, 60% { transform: translate(11px, -5px) rotate(1.1deg); }
}

/* — el personaje: foto grande a la izquierda, medio cuerpo por
     detrás de la caja de texto (estilo novela visual) — */
#sbdlg-npc-wrap {
  position: absolute;
  left: var(--npc-x);
  bottom: calc(var(--npc-y) - var(--sbdlg-padb));  /* llega hasta el borde de la pantalla */
  width: var(--npc-w);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1;                 /* ← por debajo de la caja */
  pointer-events: none;
}
/* resplandor detrás del personaje, para que no flote suelto */
#sbdlg-npc-wrap::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 4%;
  width: 128%; aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle,
    rgba(255,215,0,.20) 0%, rgba(255,215,0,.07) 42%, transparent 68%);
  z-index: -1;
  animation: sbdlgGlow 4.6s ease-in-out infinite;
}
@keyframes sbdlgGlow {
  0%, 100% { opacity: .65; }
  50%      { opacity: 1;   }
}
/* sombra del suelo: sólo tiene sentido si tu personaje se ve entero.
   Actívala cambiando display a 'block'.                              */
#sbdlg-npc-shadow {
  display: none;
  position: absolute;
  bottom: 2px;
  width: 62%;
  height: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  filter: blur(5px);
  animation: sbdlgShadow 3.2s ease-in-out infinite;
}
@keyframes sbdlgShadow {
  0%, 100% { transform: scale(1);    opacity: .45; }
  50%      { transform: scale(.88);  opacity: .32; }
}
#sbdlg-npc {
  position: relative;
  transform-origin: 50% 100%;
  animation: sbdlgBreathe 3.2s ease-in-out infinite;
  will-change: transform;
}
#sbdlg-npc.sbdlg-in { animation: sbdlgEnter .45s cubic-bezier(.34,1.56,.64,1), sbdlgBreathe 3.2s ease-in-out 0.45s infinite; }
/* El meneo de "está hablando" está DESACTIVADO a propósito.
   Al terminar la frase se quitaba la clase y la animación saltaba de
   golpe a la de respirar (que arranca de cero), y ese tirón era el
   "bicho" raro que se veía. Con el bop del clic ya se nota vivo.
   ¿Lo quieres de vuelta? Descomenta la línea de abajo:
#sbdlg-npc.sbdlg-talking { animation: sbdlgTalk .26s ease-in-out infinite; }
*/

/* capa interior: los golpes/saltos, para que no peleen con la respiración */
#sbdlg-npc-inner { transform-origin: 50% 100%; will-change: transform; }
#sbdlg-npc-inner.sbdlg-bop { animation: sbdlgBop .34s cubic-bezier(.34,1.56,.64,1); }
#sbdlg-npc-inner.sbdlg-hop { animation: sbdlgHop .17s ease-out; }
@keyframes sbdlgHop {
  0%   { transform: translateY(0)    scale(1, 1); }
  45%  { transform: translateY(-4px) scale(.985, 1.02); }
  100% { transform: translateY(0)    scale(1, 1); }
}
@keyframes sbdlgBreathe {
  0%, 100% { transform: translateY(0)    scale(1, 1); }
  50%      { transform: translateY(-7px) scale(.995, 1.015); }
}
@keyframes sbdlgTalk {
  0%, 100% { transform: translateY(-1px) scale(1.005, .992) rotate(-.5deg); }
  50%      { transform: translateY(-5px) scale(.992, 1.012) rotate(.5deg); }
}
@keyframes sbdlgBop {
  0%   { transform: translateY(0)     scale(1, 1); }
  30%  { transform: translateY(6px)   scale(1.14, .84); }
  60%  { transform: translateY(-14px) scale(.90, 1.16); }
  100% { transform: translateY(0)     scale(1, 1); }
}
@keyframes sbdlgEnter {
  0%   { transform: translateX(-70px) translateY(20px) scale(.7) rotate(-9deg); opacity: 0; }
  100% { transform: translateX(0) translateY(0) scale(1) rotate(0deg); opacity: 1; }
}
#sbdlg-npc-img {
  display: block;
  width: 100%;
  height: var(--npc-max-h);
  object-fit: contain;
  object-position: bottom center;   /* siempre apoyado abajo */
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(4px 6px 0 rgba(0,0,0,.5));
  /* ¿Quieres que las piernas se desvanezcan en vez de cortarse en seco?
     Descomenta estas dos líneas:
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); */
}
#sbdlg-npc-fallback {
  display: none;
  width: min(100%, clamp(150px, 26vw, 320px));
  aspect-ratio: 1;
  border: 6px solid #000;
  border-radius: 26px;
  background: linear-gradient(180deg, var(--yellow-bright, #FFD700), var(--yellow-dark, #C89A00));
  box-shadow: 6px 7px 0 #000, inset 0 5px 0 rgba(255,255,255,.45);
  font-size: clamp(48px, 10vw, 96px);
  line-height: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#sbdlg-npc.sbdlg-fallback #sbdlg-npc-img { display: none; }
#sbdlg-npc.sbdlg-fallback #sbdlg-npc-fallback { display: flex; }
#sbdlg-npc-fallback { animation: sbdlgFaceIdle 2.8s ease-in-out infinite; }
@keyframes sbdlgFaceIdle { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }

/* — la caja de texto — */
#sbdlg-box {
  position: relative;
  z-index: 2;                 /* ← por encima del personaje */
  min-width: 0;
  padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 32px) clamp(26px, 3vw, 34px)
           clamp(26px, 5vw, 62px);
  border: 5px solid #000;
  border-radius: 20px;
  background: linear-gradient(180deg,
    rgba(30,30,30,var(--box-alpha)) 0%,
    rgba(11,11,11,calc(var(--box-alpha) + .08)) 100%);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  box-shadow: 7px 8px 0 #000, 0 18px 44px rgba(0,0,0,.6), inset 0 3px 0 rgba(255,255,255,.06);
  transform: rotate(.35deg);
}
#sbdlg-box::before { /* cinta amarilla superior */
  content: '';
  position: absolute;
  left: 14px; right: 14px; top: -5px;
  height: 7px;
  border-radius: 6px;
  background: repeating-linear-gradient(45deg,
    var(--yellow-stripe1, #F0B800) 0 10px, #111 10px 20px);
}
#sbdlg-box.sbdlg-pop { animation: sbdlgBoxPop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes sbdlgBoxPop {
  0%   { transform: rotate(.35deg) scale(1); }
  45%  { transform: rotate(-.4deg) scale(1.018, .975); }
  100% { transform: rotate(.35deg) scale(1); }
}

/* placa con el nombre */
#sbdlg-name {
  position: absolute;
  top: -22px;
  left: 18px;
  padding: 5px 18px;
  border: 4px solid #000;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--yellow-bright, #FFD700), var(--yellow-dark, #C89A00));
  box-shadow: 0 4px 0 #000, 0 8px 16px rgba(0,0,0,.45);
  font-family: 'Fredoka One', 'Fredoka', sans-serif;
  font-size: clamp(.8rem, 1.8vw, 1rem);
  letter-spacing: 1.2px;
  color: #1a1400;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  transform: rotate(-2.2deg);
  white-space: nowrap;
  max-width: calc(100% - 40px);
  overflow: hidden;
  text-overflow: ellipsis;
}
#sbdlg-name.sbdlg-empty { display: none; }

#sbdlg-text {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: clamp(.98rem, 2.1vw, 1.32rem);
  line-height: 1.62;
  color: var(--text-light, #eee);
  min-height: 3.2em;
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: 0 2px 0 rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.75);
}
#sbdlg-text .sbw { display: inline-block; white-space: pre; }
#sbdlg-text .sbc {
  display: inline-block;
  opacity: 0;
  transform: translateY(-8px) scale(.6);
}
#sbdlg-text .sbc.sbon {
  opacity: 1;
  transform: none;
  transition: opacity .09s linear, transform .16s cubic-bezier(.34,1.56,.64,1);
}
/* estilos de marcado */
#sbdlg-text .sb-hi { color: var(--yellow-bright, #FFD700); font-weight: 600; text-shadow: 0 2px 0 #000, 0 0 12px rgba(255,215,0,.45); }
#sbdlg-text .sb-hi.sbon  { animation: sbdlgWiggle 1.5s ease-in-out infinite .16s; }
#sbdlg-text .sb-shk { color: var(--red-close, #ff5555); font-weight: 600; }
#sbdlg-text .sb-shk.sbon { animation: sbdlgJit .13s steps(2) infinite; }
#sbdlg-text .sb-wav.sbon { animation: sbdlgWav 1.7s ease-in-out infinite; }
#sbdlg-text .sb-grn { color: var(--green-done, #39ff14); font-weight: 600; text-shadow: 0 2px 0 #000, 0 0 12px rgba(57,255,20,.4); }
@keyframes sbdlgWiggle { 0%,100%{transform:rotate(-4deg) translateY(0)} 50%{transform:rotate(4deg) translateY(-2px)} }
@keyframes sbdlgJit    { 0%{transform:translate(-1.5px,1px)} 100%{transform:translate(1.5px,-1px)} }
@keyframes sbdlgWav    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* flecha de continuar */
#sbdlg-next {
  position: absolute;
  right: 16px;
  bottom: 10px;
  font-size: 1.1rem;
  color: var(--yellow-bright, #FFD700);
  text-shadow: 0 2px 0 #000;
  opacity: 0;
  transition: opacity .2s;
  animation: sbdlgArrow .9s ease-in-out infinite;
}
#sbdlg-next.sbdlg-show { opacity: 1; }
@keyframes sbdlgArrow { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

/* opciones / respuestas */
#sbdlg-choices {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
#sbdlg-choices.sbdlg-show { display: flex; animation: sbdlgChoiceIn .3s ease both; }
@keyframes sbdlgChoiceIn { from { opacity:0; transform: translateY(10px);} to {opacity:1;transform:none;} }
.sbdlg-choice {
  font-family: 'Fredoka One', 'Fredoka', sans-serif;
  font-size: clamp(.82rem, 1.7vw, .98rem);
  padding: 10px 18px;
  border: 4px solid #000;
  border-radius: 12px;
  background: linear-gradient(180deg, #3a3a3a, #232323);
  color: #fff;
  box-shadow: 0 5px 0 #000, 0 8px 16px rgba(0,0,0,.4);
  cursor: pointer;
  transition: transform .12s, background .18s, box-shadow .12s;
}
.sbdlg-choice:hover {
  background: linear-gradient(180deg, var(--yellow-bright, #FFD700), var(--yellow-dark, #C89A00));
  color: #1a1400;
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #000, 0 10px 20px rgba(0,0,0,.45);
}
.sbdlg-choice:active { transform: translateY(4px); box-shadow: 0 1px 0 #000; }

/* botones de la esquina */
#sbdlg-tools {
  position: absolute;
  top: clamp(10px, 2.4vh, 22px);
  right: clamp(10px, 2.4vw, 24px);
  display: flex;
  gap: 10px;
  z-index: 3;
}
.sbdlg-tool {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 4px solid #000;
  border-radius: 12px;
  background: linear-gradient(180deg, #2c2c2c, #171717);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 5px 0 #000, 0 8px 18px rgba(0,0,0,.45);
  transition: transform .12s, background .18s;
}
.sbdlg-tool:hover { background: linear-gradient(180deg, #3d3d3d, #232323); transform: translateY(-2px); }
.sbdlg-tool:active { transform: translateY(4px); box-shadow: 0 1px 0 #000; }
#sbdlg-close:hover { background: linear-gradient(180deg, #ff5b5b, #b81f1f); }

#sbdlg-hint {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  font-family: 'Fredoka', sans-serif;
  font-size: .72rem;
  letter-spacing: 1px;
  color: rgba(255,255,255,.42);
  text-shadow: 0 2px 0 rgba(0,0,0,.7);
  pointer-events: none;
  animation: sbdlgHint 2.6s ease-in-out infinite;
}
@keyframes sbdlgHint { 0%,100%{opacity:.35} 50%{opacity:.75} }

/* ══════════════════════════════════════════════════════════════
   SHOWCASE — tarjeta central con título, texto e imagen opcional.
   Aparece encima del diálogo, lo desenfoca por detrás y se cierra
   con un clic (ese clic NO pasa la frase: sólo cierra la tarjeta).
   ══════════════════════════════════════════════════════════════ */
#sbdlg-showcase {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  pointer-events: none;          /* los clics caen al overlay */
}
#sbdlg-showcase.sbdlg-sc-on { display: flex; }

#sbdlg-sc-card {
  position: relative;
  pointer-events: auto;
  width: min(560px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 30px) clamp(18px, 2.4vw, 24px);
  border: 6px solid #000;
  border-radius: 22px;
  background: linear-gradient(180deg, #262626 0%, #101010 100%);
  box-shadow: 9px 10px 0 #000, 0 26px 64px rgba(0,0,0,.75), inset 0 3px 0 rgba(255,255,255,.07);
  text-align: center;
  transform: rotate(-.7deg);
  animation: sbdlgScIn .4s cubic-bezier(.34,1.56,.64,1);
}
#sbdlg-sc-card::before {           /* cinta amarilla de siempre */
  content: '';
  position: absolute;
  left: 16px; right: 16px; top: -6px;
  height: 8px;
  border-radius: 6px;
  background: repeating-linear-gradient(45deg,
    var(--yellow-stripe1, #F0B800) 0 10px, #111 10px 20px);
}
@keyframes sbdlgScIn {
  0%   { opacity: 0; transform: rotate(-6deg) scale(.72) translateY(26px); }
  60%  { opacity: 1; transform: rotate(1.2deg) scale(1.03) translateY(0); }
  100% { opacity: 1; transform: rotate(-.7deg) scale(1); }
}
#sbdlg-showcase.sbdlg-sc-out #sbdlg-sc-card { animation: sbdlgScOut .22s ease forwards; }
@keyframes sbdlgScOut {
  to { opacity: 0; transform: rotate(2deg) scale(.86) translateY(14px); }
}

#sbdlg-sc-title {
  display: inline-block;
  margin: 2px 0 14px;
  padding: 7px 22px;
  border: 4px solid #000;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--yellow-bright, #FFD700), var(--yellow-dark, #C89A00));
  box-shadow: 0 5px 0 #000, 0 9px 18px rgba(0,0,0,.5);
  font-family: 'Fredoka One', 'Fredoka', sans-serif;
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  letter-spacing: 1.2px;
  color: #1a1400;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  transform: rotate(-1.6deg);
}
#sbdlg-sc-title.sbdlg-empty { display: none; }

#sbdlg-sc-img {
  display: none;
  width: 100%;
  max-height: 42vh;
  margin: 0 0 16px;
  object-fit: contain;
  border: 5px solid #000;
  border-radius: 14px;
  background: #0a0a0a;
  box-shadow: 5px 6px 0 #000, inset 0 0 0 2px rgba(255,255,255,.05);
}
#sbdlg-sc-img.sbdlg-show { display: block; }

#sbdlg-sc-text {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: clamp(.92rem, 1.9vw, 1.1rem);
  line-height: 1.6;
  color: var(--text-light, #eee);
  white-space: pre-line;
  text-shadow: 0 2px 0 rgba(0,0,0,.7);
}
#sbdlg-sc-text.sbdlg-empty { display: none; }

#sbdlg-sc-hint {
  margin-top: 16px;
  font-family: 'Fredoka', sans-serif;
  font-size: .72rem;
  letter-spacing: 1px;
  color: rgba(255,255,255,.4);
  animation: sbdlgHint 2.6s ease-in-out infinite;
}

/* el diálogo de detrás: desenfocado, apagado y sin clics */
#sbdlg-overlay.sbdlg-sc #sbdlg-stage {
  filter: blur(var(--sc-blur, 3px)) brightness(.55);
  pointer-events: none;
}
/* congelado mientras hay tarjeta: un desenfoque animado cuesta carísimo */
#sbdlg-overlay.sbdlg-sc #sbdlg-stage *,
#sbdlg-overlay.sbdlg-sc #sbdlg-stage *::before { animation-play-state: paused !important; }
#sbdlg-overlay.sbdlg-sc #sbdlg-next { opacity: 0; }
#sbdlg-overlay.sbdlg-lite.sbdlg-sc #sbdlg-stage { filter: brightness(.45); }

/* ══════════════════════════════════════════════════════════════
   MODO LIGERO (.sbdlg-lite)
   Se enciende solo si el navegador va justo — Opera GX con el
   limitador de RAM/CPU activado, portátiles, móviles… — o a mano
   con el botón ⚡. Apaga lo que cuesta caro: desenfoques a pantalla
   completa, el sol giratorio y los filtros animados.
   ══════════════════════════════════════════════════════════════ */
#sbdlg-overlay.sbdlg-lite #sbdlg-bg {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: radial-gradient(ellipse at 50% 120%, rgba(255,215,0,.14), transparent 62%),
              linear-gradient(0deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.72) 100%);
}
#sbdlg-overlay.sbdlg-lite #sbdlg-bg::after  { display: none; }
#sbdlg-overlay.sbdlg-lite #sbdlg-bg::before { animation-duration: 20s; opacity: .55; }
#sbdlg-overlay.sbdlg-lite #sbdlg-box {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(180deg, rgba(28,28,28,.93) 0%, rgba(10,10,10,.97) 100%);
}
#sbdlg-overlay.sbdlg-lite #sbdlg-npc-img          { filter: none; }
#sbdlg-overlay.sbdlg-lite #sbdlg-npc-wrap::before { animation: none; opacity: .7; }
#sbdlg-overlay.sbdlg-lite #sbdlg-npc              { animation-duration: 5s; }
#sbdlg-overlay.sbdlg-lite #sbdlg-text .sbc        { transform: none; }
#sbdlg-overlay.sbdlg-lite #sbdlg-text .sbc.sbon   { transition: opacity .05s linear; }
#sbdlg-overlay.sbdlg-lite #sbdlg-text .sb-hi.sbon,
#sbdlg-overlay.sbdlg-lite #sbdlg-text .sb-shk.sbon,
#sbdlg-overlay.sbdlg-lite #sbdlg-text .sb-wav.sbon { animation: none; }
#sbdlg-overlay.sbdlg-lite #sbdlg-npc-inner.sbdlg-hop { animation: none; }
#sbmail-fab.sbmail-lite .sbmail-env   { animation: none; }
#sbmail-fab.sbmail-lite #sbmail-badge { animation: none; }

#sbdlg-perf.sbdlg-tool-on {
  background: linear-gradient(180deg, var(--yellow-bright, #FFD700), var(--yellow-dark, #C89A00));
  color: #1a1400;
}

/* pestaña del navegador en segundo plano → ni un frame gastado */
#sbdlg-overlay.sbdlg-frozen *,
#sbdlg-overlay.sbdlg-frozen *::before,
#sbdlg-overlay.sbdlg-frozen *::after { animation-play-state: paused !important; }

/* ── móvil ── */
@media (max-width: 620px) {
  #sbdlg-overlay {
    --npc-w     : 88vw;
    --npc-max-h : min(74vh, 640px);
    --box-inset : 0px;          /* la caja ocupa todo el ancho */
    --box-alpha : .90;          /* algo más opaca para que se lea bien */
  }
  #sbdlg-box { padding: 24px 18px 30px 20px; }
  #sbdlg-name { left: 12px; }
  #sbmail-fab { padding: 10px 12px 10px 8px; top: 22%; }
  #sbmail-fab .sbmail-env { width: 32px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  #sbmail-fab, #sbdlg-npc, #sbdlg-bg::before, #sbdlg-bg::after, #sbdlg-next { animation: none !important; }
}