/* ============================================================
   Sorteos — capa de estilo propia

   Color vivo y plano. La alegría viene de superficies grandes de
   color, no de efectos de luz: nada de halos, textos luminosos ni
   degradados que simulen brillo. Los botones llevan un reborde
   inferior sólido —tipo ficha de juego— en lugar de un resplandor.
   ============================================================ */

:root {
  /* Fondo índigo-violeta */
  --bg-900: #1b1145;
  --bg-800: #26185c;
  --bg-700: #312070;
  --bg-600: #3d2a86;
  --bg-500: #4b35a0;

  /* Acentos vivos */
  --mint:   #2fd6a7;
  --sky:    #3ec2f5;
  --violet: #9d7bff;
  --pink:   #ff6fb3;
  --orange: #ff9440;
  --yellow: #ffc93c;

  /* Tonos oscuros de cada acento, para el reborde sólido de los botones */
  --mint-d:   #1ea985;
  --pink-d:   #d64a8c;
  --yellow-d: #d69d16;

  /* Bordes */
  --line:        rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .24);

  /* Texto */
  --ink:   #ffffff;
  --muted: #c5b8f5;
  --faint: #9a89d6;

  /* Sombras neutras: separan planos, no iluminan */
  --shadow-sm: 0 2px 6px rgba(10, 5, 35, .35);
  --shadow-md: 0 6px 18px rgba(10, 5, 35, .4);
  --shadow-lg: 0 16px 40px rgba(10, 5, 35, .5);

  --stage-pad: clamp(0.75rem, 2vw, 2rem);
  /* Alto real de la cabecera, medido en main.js: en móvil envuelve a dos
     filas y un valor fijo dejaba el botón de sortear fuera de pantalla. */
  --header-h: 64px;
  --layout-pad: 1.5rem;
}

* { -webkit-tap-highlight-color: transparent; }

html { background: var(--bg-900); }
body {
  color: var(--ink);
  /* Fondo de página: dos manchas de color muy amplias y planas */
  background:
    radial-gradient(120% 90% at 12% -10%, #3a1f7a 0%, transparent 55%),
    radial-gradient(100% 80% at 95% 5%, #4a1f6b 0%, transparent 50%),
    var(--bg-900);
  background-attachment: fixed;
}

::selection { background: rgba(157, 123, 255, .45); }

/* ---------- Scrollbars ---------- */
.panel-scroll::-webkit-scrollbar, .vlist::-webkit-scrollbar { width: 8px; height: 8px; }
.panel-scroll::-webkit-scrollbar-track, .vlist::-webkit-scrollbar-track { background: transparent; }
.panel-scroll::-webkit-scrollbar-thumb, .vlist::-webkit-scrollbar-thumb {
  background: rgba(157, 123, 255, .45); border-radius: 99px;
}
.panel-scroll::-webkit-scrollbar-thumb:hover, .vlist::-webkit-scrollbar-thumb:hover { background: var(--violet); }

/* ============================================================
   CONFETI
   ============================================================ */
/* `<canvas>` es un elemento reemplazado: con `inset: 0` y `width: auto`
   conserva su tamaño intrínseco de 300×150 en vez de estirarse, y todo el
   confeti caía dentro de ese cuadradito de la esquina. El tamaño tiene
   que ser explícito. */
#fx-canvas {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100dvh;
  z-index: 60; pointer-events: none;
}

/* ============================================================
   ÁTOMOS DE UI
   ============================================================ */
.app-logo {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: .9rem; font-size: 1.35rem;
  background: var(--yellow);
  box-shadow: 0 3px 0 var(--yellow-d);
}

#app-header {
  position: relative; z-index: 30;
  border-bottom: 1px solid var(--line);
  background: rgba(27, 17, 69, .86);
  backdrop-filter: blur(10px);
}

.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  border-radius: 99px; border: 1px solid var(--line);
  background: var(--bg-700); padding: .22rem .65rem;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  font-family: 'JetBrains Mono', monospace; color: var(--ink);
  white-space: nowrap;
}
.chip--yellow { border-color: rgba(255,201,60,.55); color: var(--yellow); }
.chip--mint   { border-color: rgba(47,214,167,.55); color: var(--mint); }
.chip--pink   { border-color: rgba(255,111,179,.55); color: var(--pink); }

/* Botón con reborde inferior sólido: se hunde al pulsarlo. */
.btn-primary {
  display: inline-flex; align-items: center; gap: .45rem;
  border-radius: .8rem; padding: .5rem .95rem;
  font-size: .82rem; font-weight: 800; color: #10062e;
  background: var(--mint);
  box-shadow: 0 3px 0 var(--mint-d);
  transition: filter .15s, transform .08s, box-shadow .08s;
}
.btn-primary:hover  { filter: brightness(1.07); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 0 0 var(--mint-d); }
.btn-primary:disabled { opacity: .45; pointer-events: none; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: .8rem; border: 1px solid var(--line);
  background: var(--bg-700); padding: .45rem .75rem;
  font-size: .8rem; font-weight: 600; color: var(--ink);
  transition: background .15s, border-color .15s, transform .08s;
}
.btn-ghost:hover  { background: var(--bg-600); border-color: var(--line-strong); }
.btn-ghost:active { transform: translateY(1px); }
.btn-ghost:disabled { opacity: .35; pointer-events: none; }
.btn-ghost[aria-pressed="false"] { opacity: .55; }

.card {
  border-radius: 1rem; border: 1px solid var(--line);
  background: var(--bg-800);
  padding: 1rem;
}
/* Un punto de color delante de cada título: la sección se reconoce de un vistazo. */
.card-title {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .8rem; font-size: .76rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.card-title::before {
  content: ''; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--violet); flex: none;
}
[data-panel="setup"]  .card:nth-of-type(1) .card-title::before { background: var(--pink); }
[data-panel="setup"]  .card:nth-of-type(2) .card-title::before { background: var(--sky); }
[data-panel="setup"]  .card:nth-of-type(3) .card-title::before { background: var(--mint); }
[data-panel="setup"]  .card:nth-of-type(4) .card-title::before { background: var(--orange); }
[data-panel="people"] .card:nth-of-type(1) .card-title::before { background: var(--sky); }
[data-panel="people"] .card:nth-of-type(2) .card-title::before { background: var(--mint); }
[data-panel="people"] .card:nth-of-type(3) .card-title::before { background: var(--orange); }
[data-panel="people"] .card:nth-of-type(4) .card-title::before { background: var(--pink); }
[data-panel="prizes"] .card:nth-of-type(1) .card-title::before { background: var(--yellow); }
[data-panel="prizes"] .card:nth-of-type(2) .card-title::before { background: var(--pink); }
[data-panel="audit"]  .card:nth-of-type(1) .card-title::before { background: var(--mint); }
[data-panel="audit"]  .card:nth-of-type(2) .card-title::before { background: var(--sky); }
[data-panel="audit"]  .card:nth-of-type(3) .card-title::before { background: var(--yellow); }

.field { display: block; margin-top: .65rem; }
.field > span { display: block; margin-bottom: .3rem; font-size: .74rem; font-weight: 600; color: var(--muted); }
.field input, .field select, input[type="search"], input[type="text"], input[type="number"] {
  width: 100%; border-radius: .7rem; border: 1px solid var(--line);
  background: var(--bg-900); padding: .55rem .7rem;
  font-size: .85rem; color: var(--ink); outline: none;
  transition: border-color .15s;
}
input::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, input[type="search"]:focus { border-color: var(--mint); }
.field select option { background: var(--bg-800); }
.hint { font-size: .73rem; line-height: 1.55; color: var(--faint); }
code { font-family: 'JetBrains Mono', monospace; font-size: .95em; color: var(--mint); }

.note {
  margin-top: .8rem; border-radius: .7rem;
  border-left: 4px solid var(--yellow);
  background: var(--bg-700);
  padding: .6rem .75rem; font-size: .73rem; line-height: 1.55; color: var(--muted);
}
.note b { color: var(--ink); }
.link-btn {
  font: inherit; font-weight: 800; color: var(--yellow);
  text-decoration: underline; text-underline-offset: 2px;
}
.link-btn:hover { color: var(--ink); }

.steps { display: grid; gap: .6rem; counter-reset: step; }
.steps li {
  position: relative; padding-left: 2rem;
  font-size: .77rem; line-height: 1.55; color: var(--muted);
}
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -1px;
  display: grid; place-items: center; width: 1.45rem; height: 1.45rem;
  border-radius: 50%; color: #10062e; font-size: .72rem; font-weight: 800;
}
.steps li:nth-child(1)::before { background: var(--pink); }
.steps li:nth-child(2)::before { background: var(--sky); }
.steps li:nth-child(3)::before { background: var(--mint); }
.steps li:nth-child(4)::before { background: var(--yellow); }

/* Range slider */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: var(--bg-600); outline: none; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--mint); cursor: pointer; border: 3px solid var(--bg-900);
}
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 3px solid var(--bg-900); border-radius: 50%; background: var(--mint); cursor: pointer; }

/* Switch */
.switch { display: flex; align-items: flex-start; gap: .7rem; margin-top: .75rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: relative; flex: none; margin-top: 2px; width: 40px; height: 22px; border-radius: 99px;
  background: var(--bg-600); transition: background .2s;
}
.switch-dot {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--faint); transition: transform .2s ease, background .2s;
}
.switch input:checked + .switch-track { background: var(--mint); }
.switch input:checked + .switch-track .switch-dot { transform: translateX(18px); background: #10062e; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--mint); outline-offset: 2px; }
.switch-label { font-size: .81rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.switch-label em { display: block; font-style: normal; font-size: .7rem; font-weight: 400; color: var(--faint); margin-top: 1px; }

/* Tabs */
.tab {
  flex: 1; border-radius: .6rem; padding: .5rem .3rem;
  font-size: .75rem; font-weight: 700; color: var(--muted); transition: all .15s;
}
.tab:hover { color: var(--ink); background: var(--bg-700); }
.tab--active { background: var(--violet); color: #10062e; }
.tab--active:hover { background: var(--violet); color: #10062e; }

/* Selector de modalidad */
.mode-btn {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  border-radius: .9rem; border: 2px solid var(--line);
  background: var(--bg-900); padding: .9rem .3rem;
  font-size: .78rem; font-weight: 800; color: var(--muted);
  transition: background .15s, border-color .15s, color .15s, transform .08s;
}
.mode-btn__ico { font-size: 1.9rem; line-height: 1; }
.mode-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.mode-btn:active { transform: translateY(1px); }
.mode-btn[data-mode="wheel"].is-active { background: var(--pink); border-color: var(--pink); color: #10062e; }
.mode-btn[data-mode="slot"].is-active  { background: var(--sky);  border-color: var(--sky);  color: #10062e; }

/* Dropzone */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  border: 2px dashed var(--line-strong); border-radius: .9rem;
  padding: 1.5rem 1rem; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--mint); background: var(--bg-700); }

/* ============================================================
   PANEL
   ============================================================ */
.panel-shell {
  position: relative; border-radius: 1.1rem;
  border: 1px solid var(--line);
  background: rgba(38, 24, 92, .82);
  overflow: hidden;
}
.panel-scroll { max-height: calc(100dvh - var(--header-h) - var(--layout-pad)); overflow-y: auto; padding: .75rem; scrollbar-gutter: stable; }

@media (max-width: 1023px) {
  .panel-shell {
    position: fixed; inset: 0; z-index: 70; border-radius: 0;
    background: var(--bg-900); transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
  }
  .panel-shell.is-open { transform: translateX(0); }
  .panel-scroll { max-height: 100dvh; padding: 1rem; padding-top: 4.5rem; }
}

/* Lista virtualizada */
.vlist { position: relative; height: 260px; overflow-y: auto; border-radius: .7rem; border: 1px solid var(--line); background: var(--bg-900); }
.vlist-spacer { position: relative; width: 100%; }
.vlist-rows { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; }
.vrow {
  display: flex; align-items: center; gap: .5rem; height: 34px; padding: 0 .65rem;
  font-size: .75rem; border-bottom: 1px solid var(--line);
}
.vrow__t { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--mint); flex: none; }
.vrow__n { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrow__b { margin-left: auto; flex: none; font-size: .62rem; }
.vrow.is-won { opacity: .55; }
.vrow.is-won .vrow__t { color: var(--yellow); text-decoration: line-through; }

/* Premios */
.prize-item {
  display: flex; align-items: center; gap: .6rem; border-radius: .7rem;
  border: 1px solid var(--line); background: var(--bg-900); padding: .6rem .75rem;
  transition: border-color .15s, background .15s;
}
.prize-item.is-active { border-color: var(--yellow); background: var(--bg-700); }
.prize-item.is-done { opacity: .45; }
.prize-item[draggable="true"] { cursor: grab; }
.prize-item.is-dragging { opacity: .35; }
.prize-rank { font-family: 'JetBrains Mono', monospace; font-size: .7rem; font-weight: 700; color: var(--yellow); flex: none; width: 2.2rem; }
.prize-label { font-size: .83rem; font-weight: 600; color: var(--ink); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prize-qty { font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--muted); flex: none; }
.prize-del { flex: none; opacity: .5; transition: opacity .15s; font-size: .8rem; }
.prize-del:hover { opacity: 1; }

/* Resultados */
.chain-status {
  border-radius: .7rem; padding: .65rem .75rem; font-size: .8rem; font-weight: 700;
  background: var(--bg-900); border-left: 4px solid var(--line-strong); color: var(--muted);
}
.chain-status.is-ok  { border-left-color: var(--mint); color: var(--mint); }
.chain-status.is-bad { border-left-color: var(--pink); color: var(--pink); }

.audit-item { border-radius: .7rem; border: 1px solid var(--line); background: var(--bg-900); padding: .6rem .7rem; }
.audit-item__head { display: flex; align-items: baseline; gap: .5rem; }
.audit-item__ticket { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--yellow); }
.audit-item__meta { margin-top: .3rem; font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: var(--faint); word-break: break-all; }

/* ============================================================
   ESCENARIO
   ============================================================ */
/* Altura acotada: el escenario nunca crece más que la ventana, así el
   botón de sortear jamás queda fuera de cuadro durante una transmisión. */
.stage-shell {
  position: relative; display: flex;
  height: calc(100dvh - var(--header-h) - var(--layout-pad)); min-height: 420px;
  border-radius: 1.1rem; border: 1px solid var(--line);
  background: rgba(38, 24, 92, .55);
  overflow: hidden;
}
/* Lunares festivos, planos y discretos: dan textura sin iluminar nada. */
.stage-shell::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.09) 1.5px, transparent 1.6px);
  background-size: 26px 26px;
}
.stage-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(.75rem, 2vh, 1.5rem); width: 100%; padding: var(--stage-pad);
}
.stage-head { text-align: center; }
.stage-title {
  font-size: clamp(1.6rem, 4.4vw, 3.6rem); font-weight: 900; line-height: 1.05;
  letter-spacing: -.02em;
  /* Degradado de color plano sobre el texto: sin sombra ni desenfoque. */
  background: linear-gradient(92deg, var(--yellow), var(--pink) 45%, var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stage-subtitle { margin-top: .3rem; font-size: clamp(.78rem, 1.3vw, 1rem); color: var(--muted); }
.stage-prize {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: .85rem;
  border-radius: 99px; background: var(--yellow); color: #10062e;
  padding: .35rem 1.1rem;
  box-shadow: 0 3px 0 var(--yellow-d);
}
.stage-prize__rank { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.stage-prize__label { font-size: clamp(.82rem, 1.5vw, 1.05rem); font-weight: 800; }

/* Una sola fila elástica: la modalidad activa recibe exactamente el alto
   sobrante del escenario, así ninguna animación empuja los controles
   fuera de la pantalla. */
.stage-canvas {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr);
  width: 100%; flex: 1 1 auto; min-height: 0;
}
.mode-view { display: grid; place-items: center; width: 100%; min-height: 0; overflow: hidden; }

/* ---------- Botón sortear ---------- */
.stage-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; }
.btn-draw {
  position: relative; border-radius: 99px;
  padding: clamp(.75rem, 1.7vh, 1.05rem) clamp(2.2rem, 5.5vw, 3.8rem);
  font-size: clamp(.95rem, 1.9vw, 1.35rem); font-weight: 900; letter-spacing: .16em; color: #10062e;
  background: var(--yellow);
  box-shadow: 0 5px 0 var(--yellow-d);
  transition: filter .15s, transform .08s, box-shadow .08s;
}
.btn-draw:hover:not(:disabled)  { filter: brightness(1.06); }
.btn-draw:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 0 0 var(--yellow-d); }
.btn-draw:disabled { background: var(--bg-600); color: var(--faint); box-shadow: 0 5px 0 var(--bg-700); cursor: not-allowed; }
.btn-draw__text { position: relative; }
/* El barrido de brillo se retiró; el nodo queda por compatibilidad. */
.btn-draw__glow { display: none; }

/* ---------- Anuncio del ganador ---------- */
/* Rótulo inferior superpuesto (estilo "lower third" de televisión):
   fuera del flujo, así la ruleta conserva toda la altura disponible y
   revelar al ganador no reacomoda un solo píxel. */
.winner-banner {
  position: absolute; z-index: 20; left: 0; right: 0; bottom: 0;
  margin-inline: auto; width: min(100%, 900px);
  text-align: center; pointer-events: none;
}
.winner-banner.is-shown { animation: winnerIn .5s cubic-bezier(.2,.9,.3,1) both; }
/* Opaco: se superpone a la ruleta o a los rodillos, y en ambos casos debe
   leerse limpio incluso comprimido por el códec de una transmisión. */
.winner-card {
  border-radius: 1.1rem; border: 3px solid var(--yellow);
  background: var(--bg-800);
  padding: clamp(.8rem, 2vh, 1.3rem) 1.5rem;
  box-shadow: var(--shadow-lg);
}
.winner-card__eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); }
.winner-card__ticket {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: clamp(1.9rem, 5.6vw, 4.2rem); line-height: 1.1; color: var(--ink);
}
.winner-card__name { font-size: clamp(1rem, 2.3vw, 1.7rem); font-weight: 800; color: var(--yellow); }
.winner-card__meta { margin-top: .3rem; font-family: 'JetBrains Mono', monospace; font-size: .63rem; color: var(--muted); }
/* En pantallas estrechas el código haría saltar el rótulo a dos líneas y
   taparía el escenario; sigue disponible en la pestaña de resultados. */
@media (max-width: 520px) { .winner-card__hash { display: none; } }
@keyframes winnerIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Últimos ganadores ---------- */
.recent-winners { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; max-width: 100%; }
.recent-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: 99px; border: 1px solid var(--line);
  background: var(--bg-700); padding: .25rem .7rem;
  font-size: .7rem; color: var(--muted);
}
.recent-pill b { font-family: 'JetBrains Mono', monospace; color: var(--yellow); }

/* ============================================================
   RULETA
   ============================================================ */
.wheel-wrap { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.wheel-stack {
  position: relative; aspect-ratio: 1; container-type: inline-size;
  height: 100%; max-height: 620px; max-width: 100%;
}
.wheel-canvas { width: 100%; height: 100%; border-radius: 50%; }
.wheel-pointer {
  position: absolute; top: -4px; left: 50%; z-index: 3; transform: translateX(-50%);
  width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent;
  border-top: 30px solid var(--pink);
  transform-origin: 50% 10%;
}
.wheel-pointer.is-ticking { animation: pointerTick .07s ease-out; }
@keyframes pointerTick { 0% { transform: translateX(-50%) rotate(0deg); } 45% { transform: translateX(-50%) rotate(-14deg); } 100% { transform: translateX(-50%) rotate(0deg); } }

/* Núcleo de la ruleta: muestra en grande el número por el que pasa el
   puntero. Con miles de boletos los sectores son demasiado finos para
   llevar texto, así que el número se lee siempre aquí. */
.wheel-hub {
  position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%);
  display: grid; place-items: center; align-content: center; gap: .15rem;
  width: 36%; height: 36%; border-radius: 50%; padding: 3%;
  background: var(--bg-800);
  border: 4px solid var(--violet);
}
.wheel-hub__num {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: clamp(.8rem, 7cqw, 2.6rem); line-height: 1; color: var(--ink);
}
.wheel-hub__label {
  font-size: clamp(.38rem, 2.2cqw, .68rem); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--violet);
  white-space: nowrap;
}

/* ============================================================
   TÓMBOLA
   ============================================================ */
.slot-wrap { --reel-h: clamp(58px, min(15vw, 26vh), 180px); display: flex; flex-direction: column; align-items: center; gap: clamp(.75rem, 2vh, 1.25rem); }
.slot-frame {
  display: flex; gap: clamp(.35rem, 1vw, .75rem);
  border-radius: 1.1rem; border: 3px solid var(--sky);
  background: var(--bg-800);
  padding: clamp(.65rem, 1.7vw, 1.15rem);
}
.reel {
  position: relative; overflow: hidden;
  width: clamp(46px, 9.5vw, 116px); height: var(--reel-h);
  border-radius: .7rem; background: var(--bg-900);
  border: 1px solid var(--line);
}
.reel::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, var(--bg-900) 0%, transparent 34%, transparent 66%, var(--bg-900) 100%);
}
.reel__strip { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; }
.reel__digit {
  display: grid; place-items: center; width: 100%;
  height: var(--reel-h);
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: clamp(2.2rem, 8vw, 6rem); line-height: 1; color: var(--ink);
}
.reel.is-locked { background: var(--yellow); border-color: var(--yellow); }
.reel.is-locked .reel__digit { color: #10062e; }
.reel.is-locked::after { background: linear-gradient(180deg, rgba(255,201,60,.95) 0%, transparent 34%, transparent 66%, rgba(255,201,60,.95) 100%); }
.slot-lever { font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); }

/* Estado vacío compartido */
.mode-empty { display: grid; place-items: center; gap: .4rem; text-align: center; color: var(--faint); padding: 2rem; }
.mode-empty__icon { font-size: 3rem; opacity: .6; }

/* ============================================================
   PANTALLA DEL PÚBLICO
   ============================================================ */
body.is-presenting #panel,
body.is-presenting #app-header,
body.is-presenting #stage-controls .btn-ghost { display: none !important; }
body.is-presenting #app-layout { display: block; max-width: none; padding: 0; }
body.is-presenting .stage-shell { height: 100dvh; min-height: 100dvh; border: 0; border-radius: 0; background: transparent; }
body.is-presenting .stage-inner { gap: clamp(1rem, 3vh, 2.5rem); }
body.is-presenting .stage-title { font-size: clamp(2rem, 5.5vw, 5rem); }
body.is-presenting .hotkey-hint { display: block; }

.hotkey-hint {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 50;
  border-radius: 99px; border: 1px solid var(--line); background: var(--bg-800);
  padding: .3rem .9rem; font-size: .68rem; color: var(--faint);
  opacity: .5; transition: opacity .3s;
}
.hotkey-hint:hover { opacity: 1; }
.hotkey-hint b { color: var(--muted); }

/* ============================================================
   AVISOS Y DIÁLOGOS
   ============================================================ */
.toast {
  display: flex; align-items: flex-start; gap: .55rem;
  border-radius: .8rem; border: 1px solid var(--line);
  background: var(--bg-700); padding: .7rem .85rem;
  font-size: .81rem; color: var(--ink);
  box-shadow: var(--shadow-md);
  animation: toastIn .22s ease-out both;
}
.toast.is-out { animation: toastOut .18s ease-in both; }
.toast--ok   { border-left: 4px solid var(--mint); }
.toast--warn { border-left: 4px solid var(--yellow); }
.toast--err  { border-left: 4px solid var(--pink); }
@keyframes toastIn  { from { opacity: 0; transform: translateX(16px); } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(16px); } }

.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1rem; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(12, 6, 34, .8); }
.modal-box {
  position: relative; width: min(420px, 100%); border-radius: 1rem;
  border: 1px solid var(--line); background: var(--bg-800);
  padding: 1.35rem; color: var(--ink);
  box-shadow: var(--shadow-lg);
  animation: modalIn .18s ease-out both;
}
#modal-body { color: var(--muted); }
#modal-ok { background: var(--pink); box-shadow: 0 3px 0 var(--pink-d); }
#modal-ok:active { box-shadow: 0 0 0 var(--pink-d); }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px); } }

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (min-aspect-ratio: 16/9) and (min-width: 1280px) {
  .stage-inner { max-width: 1600px; margin-inline: auto; }
}