/* ══════════════════════════════════════════════════════════════════
   COP · EL AVISO DE «ESTO TODAVÍA NO ES DE VERDAD»  (05/09/2026)
   ──────────────────────────────────────────────────────────────────
   La barra que le dice al jugador, sin vueltas, que lo que está
   mirando es una maqueta: que no hay servidor detrás, que los números
   son de ejemplo y que nada de lo que toque se guarda.

   ⚠⚠ POR QUÉ SE MUDA ACÁ. Estaba escrita TRES VECES, copiada letra por
   letra, en `survival.html`, `doble-nada.html` y `batalla-sobres.html`
   —siempre como `.dn-aviso`, un nombre heredado de Doble o Nada que ya
   no decía nada en las otras dos—. Y `crash-run.html`, que es la más
   nueva y la única sin servidor NI aviso, no la tenía. Tres copias y un
   agujero es exactamente el patrón que veníamos corrigiendo en los
   botones y en las tabs.

   ⚠⚠ Y POR QUÉ NO SE BORRA EL AVISO EN VEZ DE COMPARTIRLO. Porque una
   pantalla publicada que muestra un pozo de 3.000 monedas, un ranking
   con cinco nombres y un rival que aparece a los dos segundos ESTÁ
   AFIRMANDO ALGO. El jugador no tiene forma de saber que el rival es un
   `setTimeout`. Mientras el modo no tenga servidor, este cartel no es
   una molestia temporal: es la parte honesta de la pantalla.

   CÓMO SE USA — primero de todo, adentro del `<main>`:

     <div class="cop-aviso">MAQUETA · Survival Clash todavía no tiene
       servidor: los datos son de ejemplo y nada de lo que toques acá
       crea un torneo.</div>

   ⚠ EL TEXTO DICE QUÉ NO PASA, no «esto es una demo». «Nada de lo que
   toques acá crea un torneo» se entiende sin saber qué es una demo, y
   contesta la única pregunta que importa: ¿esto me cuesta algo?

   ⚠ EL DÍA QUE EL MODO TENGA SERVIDOR se borra la línea del HTML y ya.
   No hay interruptor ni condicional: un aviso que se apaga solo es un
   aviso que un día se apaga sin que nadie lo haya decidido.
   ══════════════════════════════════════════════════════════════════ */

.cop-aviso{
  margin:0 0 var(--gap-md, .7rem);
  padding:var(--gap-md, .7rem) var(--gap-lg, 1rem);
  border-radius:var(--r-card, 14px);
  /* ⚠ DORADO Y NO ROJO: no es un error del jugador ni una falla de la
     app, es una advertencia. El rojo lo leería como «algo se rompió» y
     lo haría salir de la pantalla, que es lo contrario de lo que
     queremos — la maqueta está publicada justamente para que la mire. */
  background:rgba(240,185,11,.12);
  border:1px solid rgba(240,185,11,.45);
  color:#f0b90b;
  font:700 .82rem var(--texto, 'Inter', system-ui, sans-serif);
  text-align:center;
  line-height:1.45;
}
.cop-aviso[hidden]{display:none}

/* ── LA VERSIÓN CHICA, PARA UN PEDAZO DE PANTALLA ──────────────────
   Cuando lo de ejemplo no es la pantalla entera sino una sección: el
   chip que ya usan `explorar` y el panel de Tus Mercados. Mismo color,
   otra forma — barra si es toda la pantalla, píldora si es un pedazo. */
.cop-aviso-chip{
  display:inline-block;
  padding:.2rem var(--gap-md, .7rem);
  border-radius:999px;
  background:rgba(240,185,11,.12);
  color:#f0b90b;
  font:800 .66rem var(--texto, 'Inter', system-ui, sans-serif);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.cop-aviso-chip[hidden]{display:none}