/* Self-hosted (not a CDN) so headline text never depends on a live network
   request during a stream — falls back to Arial Black if it ever fails to load.
   Baloo 2 (ExtraBold) chosen to match the rounded lettering of the Chasers logo. */
@font-face{
  font-family:'Baloo 2';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('fonts/baloo2-extrabold.woff2') format('woff2');
}
:root{
  --brand-red:#df2030;
  --brand-red-dark:#9c1420;
  --green:#38b44a;
  --green-dark:#1f7a30;
  --ink:#0c0c0e;
  --paper:#18181c;
  --radius-lg:20px;
  --radius-pill:999px;
  --shadow-soft:0 8px 24px rgba(0,0,0,.4);
  --font:'Baloo 2', 'Arial Black', Arial, 'Helvetica Neue', sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background:var(--ink); color:#fff;}
a{color:inherit;}
button{font-family:inherit; cursor:pointer;}
input,select{font-family:inherit;}

/* --- Espejo (?espejo=1): la copia de un juego que ve cada espectador dentro del live de
   Chasers (shared/espejo.js). Sin panel, sin botones, sin que se pueda tocar: lo único que
   manda es lo que llega del control del vendedor. Lo que sea propio de cada juego (fondo
   transparente o no, qué botones de su escenario sobran) va en la CSS del juego. --- */
html.modo-espejo, html.modo-espejo body{ pointer-events: none; }
html.modo-espejo .dock, html.modo-espejo .corner-hover, html.modo-espejo .dock-grab,
html.modo-espejo .watermark, html.modo-espejo .modal-overlay{ display: none !important; }
html.modo-espejo input::placeholder, html.modo-espejo textarea::placeholder{ color: transparent; }
/* Hasta el primer estado no hay nada cierto que enseñar. */
html.modo-espejo.espejo-sin-estado .stage{ visibility: hidden; }
/* El live pinta encima del video: arriba, el nombre del vendedor, el letrero de envíos y las
   cifras (unos 170 px); abajo, el chat (el tercio de abajo). El escenario se acomoda en lo que
   queda en medio para que nada del juego quede debajo de eso. Lo que va pegado arriba (racha,
   avisos) baja lo mismo. */
html.modo-espejo{ --espejo-arriba: max(17vh, 170px); --espejo-abajo: max(30vh, 170px); }
html.modo-espejo .stage{ padding-top: var(--espejo-arriba) !important; padding-bottom: var(--espejo-abajo) !important; }
html.modo-espejo .streak-pill{ top: calc(var(--espejo-arriba) - 48px) !important; }
html.modo-espejo .award-toasts, html.modo-espejo .atk-toasts{ top: calc(var(--espejo-arriba) - 44px) !important; }

/* --- Control (?control=1): el juego dentro del panel del live. El botón de «modo Live» esconde
   el panel para capturarlo con OBS, y ahí no hace falta (lo público ya es el espejo); sin el
   ⚙ a la vista no había forma de volver. --- */
html.modo-control .live-toggle{ display: none !important; }