/* ===========================================================================
   MODO CONSOLA — piel alternativa de la home de shoutad.com

   Todas las reglas cuelgan de html[data-modo="consola"]. Ese atributo solo
   existe si el visitante pulsa el boton. Mientras no lo pulse, este fichero
   no aplica ni una sola regla: el diseno original queda intacto por
   construccion, no por cuidado.

   La pagina esta maquetada con estilos en linea, que ganan a cualquier hoja.
   Por eso aqui se selecciona por el contenido del atributo style y se usa
   !important: es la unica forma de repintarla sin reescribir 260 elementos.
   =========================================================================== */

/* Colores que usan los dos juegos. En modo normal son los de siempre. */
:root{
  --jc-fondo:#ffffff; --jc-tinta:#0c0e14; --jc-violeta:#5b3df5;
  --jc-cian:#00b2e0; --jc-verde:#0d9b7c; --jc-rosa:#d6395e;
  --jc-ambar:#f5a524; --jc-niebla:#e8e9f2;
}

/* ============================== el boton, en la cabecera junto al menu ==== */

.modo-btn{
  display:inline-flex; align-items:center; gap:9px;
  margin-left:auto;              /* empuja el boton a la derecha */
  margin-right:14px;             /* aire entre el boton y las tres lineas */
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px; font-weight:700; letter-spacing:.06em;
  border:1px solid rgba(12,14,20,.15);
  background:rgba(255,255,255,.9);
  color:#0c0e14;
  padding:9px 15px; min-height:40px;
  border-radius:999px; cursor:pointer; white-space:nowrap;
  transition:border-color .18s ease, background .18s ease, transform .1s ease;
}
.modo-btn:hover{ border-color:rgba(91,61,245,.45); background:#fff; }
.modo-btn:active{ transform:translateY(1px); }
.modo-btn:focus-visible{ outline:2px solid #5b3df5; outline-offset:3px; }

.modo-btn__punto{
  width:8px; height:8px; border-radius:50%;
  background:#5b3df5; flex:none;
}

/* En pantalla estrecha el rotulo se acorta para no comerle sitio a la marca */
@media (max-width:560px){
  .modo-btn{ padding:8px 12px; font-size:11px; gap:7px; margin-right:10px; }
  .modo-btn__punto{ width:7px; height:7px; }
}
@media (max-width:344px){
  .modo-btn [data-etiqueta]{ display:none; }
  .modo-btn::after{ content:"CONSOLA"; }
  html[data-modo="consola"] .modo-btn::after{ content:"SALIR"; }
}

/* ========================================================================= */
/* ============================ A PARTIR DE AQUI: SOLO EN MODO CONSOLA ===== */
/* ========================================================================= */

html[data-modo="consola"]{
  --jc-fondo:#0e0d08; --jc-tinta:#ffc352; --jc-violeta:#ffc352;
  --jc-cian:#6fe38b; --jc-verde:#6fe38b; --jc-rosa:#ff6b5e;
  --jc-ambar:#ffd98a; --jc-niebla:rgba(255,195,82,.18);
  background:#0a0906;
}

html[data-modo="consola"] body{ background:#0a0906 !important; color:#ffc352 !important; }

/* Rejilla de barrido del monitor */
html[data-modo="consola"] body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:65;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.30) 0 1px,transparent 1px 3px);
}

/* ------------------------------------------------------------- tipografia */
html[data-modo="consola"] body,
html[data-modo="consola"] p,
html[data-modo="consola"] a,
html[data-modo="consola"] span,
html[data-modo="consola"] div,
html[data-modo="consola"] li,
html[data-modo="consola"] h1,
html[data-modo="consola"] h2,
html[data-modo="consola"] h3,
html[data-modo="consola"] strong,
html[data-modo="consola"] button,
html[data-modo="consola"] input,
html[data-modo="consola"] textarea,
html[data-modo="consola"] label{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace !important;
  letter-spacing:-.01em !important;
}
/* La monoespaciada ocupa mas por caracter, asi que el titular baja un punto
   respecto al normal, pero sin encogerse en movil (antes caia a 30 px). */
html[data-modo="consola"] h1{ font-size:clamp(30px,5vw,54px) !important; }
@media (max-width:720px){
  html[data-modo="consola"] h1{ font-size:clamp(34px,10.8vw,50px) !important; }
}

/* ---------------------------------------------------------------- fondos */
html[data-modo="consola"] [style*="background:#fff"],
html[data-modo="consola"] [style*="background:#ffffff"],
html[data-modo="consola"] [style*="background:#f7f8fc"],
html[data-modo="consola"] [style*="background:#fbfbfe"]{
  background:#12100a !important;
}
html[data-modo="consola"] [style*="rgba(255,255,255,0.80)"],
html[data-modo="consola"] [style*="rgba(255,255,255,0.82)"]{
  background:rgba(10,9,6,.86) !important;
}
html[data-modo="consola"] [style*="radial-gradient"],
html[data-modo="consola"] [style*="linear-gradient(130deg"],
html[data-modo="consola"] [style*="linear-gradient(160deg"]{
  background:#0d0b07 !important;
}
html[data-modo="consola"] [style*="linear-gradient(180deg,#07080b"],
html[data-modo="consola"] [style*="background:#07080b"]{
  background:#070603 !important;
}
html[data-modo="consola"] [style*="linear-gradient(100deg,#5b3df5"]{
  background:#ffc352 !important; color:#0a0906 !important;
}
html[data-modo="consola"] [style*="rgba(94,227,193"]{ background:rgba(111,227,139,.10) !important; }

/* ----------------------------------------------------------------- textos */
html[data-modo="consola"] [style*="color:#0c0e14"],
html[data-modo="consola"] [style*="color:#22283a"]{ color:#ffc352 !important; }
html[data-modo="consola"] [style*="color:#5a6070"],
html[data-modo="consola"] [style*="color:#b6bbca"],
html[data-modo="consola"] [style*="color:#d8f6ee"]{ color:#c99340 !important; }
html[data-modo="consola"] [style*="color:#9aa0b0"],
html[data-modo="consola"] [style*="color:#9ea3b4"],
html[data-modo="consola"] [style*="color:#767c8e"],
html[data-modo="consola"] [style*="color:#a7acbd"]{ color:#8a6526 !important; }
html[data-modo="consola"] [style*="color:#5b3df5"],
html[data-modo="consola"] [style*="color:#8f7cff"]{ color:#ffd98a !important; }
html[data-modo="consola"] [style*="color:#0d9b7c"],
html[data-modo="consola"] [style*="color:#5ee3c1"]{ color:#6fe38b !important; }
html[data-modo="consola"] [style*="color:#d6395e"],
html[data-modo="consola"] [style*="color:#ff5e84"]{ color:#ff6b5e !important; }
html[data-modo="consola"] [style*="color:#fff"]{ color:#ffc352 !important; }

/* ----------------------------------------------------------------- bordes */
html[data-modo="consola"] [style*="border:1px solid"]{
  border-color:rgba(255,195,82,.26) !important;
}
html[data-modo="consola"] [style*="border-radius:20px"],
html[data-modo="consola"] [style*="border-radius:18px"],
html[data-modo="consola"] [style*="border-radius:16px"],
html[data-modo="consola"] [style*="border-radius:24px"],
html[data-modo="consola"] [style*="border-radius:28px"]{ border-radius:4px !important; }
html[data-modo="consola"] [style*="border-radius:999px"]{ border-radius:3px !important; }
html[data-modo="consola"] [style*="box-shadow"]{ box-shadow:none !important; }

/* -------------------------------------------------------- formulario y CTA */
html[data-modo="consola"] input,
html[data-modo="consola"] textarea{
  background:#0d0b07 !important; color:#ffc352 !important;
  border-color:rgba(255,195,82,.3) !important; border-radius:3px !important;
}
html[data-modo="consola"] ::placeholder{ color:#7a5a22 !important; }

/* ------------------------------------------------------------- los juegos */
html[data-modo="consola"] .jug{
  background:#12100a !important; border-color:rgba(255,195,82,.28) !important;
  border-radius:4px !important; box-shadow:none !important;
}
html[data-modo="consola"] .jug canvas{ background:#0e0d08 !important; }
html[data-modo="consola"] .jug__barra{ border-bottom-color:rgba(255,195,82,.18) !important; color:#8a6526 !important; }
html[data-modo="consola"] .jug__datos b{ color:#ffc352 !important; }
html[data-modo="consola"] .jug__velo{ background:rgba(14,13,8,.9) !important; }
html[data-modo="consola"] .jug__velo p{ color:#c99340 !important; }
html[data-modo="consola"] .jug__btn{
  background:#ffc352 !important; color:#0a0906 !important;
  border-radius:3px !important; box-shadow:none !important;
}
html[data-modo="consola"] .jug__mando button{
  background:#12100a !important; color:#ffc352 !important;
  border-color:rgba(255,195,82,.24) !important; border-radius:3px !important;
}

/* -------------------------------------------------------------- el boton */
/* En la consola: plano, de fosforo y con esquinas rectas */
html[data-modo="consola"] .modo-btn{
  background:#12100a !important; color:#ffc352 !important;
  border-color:rgba(255,195,82,.34) !important; border-radius:3px !important;
}
html[data-modo="consola"] .modo-btn__punto{ background:#6fe38b !important; }

/* Quien pide movimiento reducido no recibe el barrido parpadeante */
@media (prefers-reduced-motion:reduce){
  html[data-modo="consola"] body::after{ display:none; }
}

/* Los logos de socios son PNG oscuros sobre blanco: en un fondo negro
   quedarian como dos rectangulos brillantes. Se invierten y se tinen de
   ambar para que pertenezcan a la escena. */
html[data-modo="consola"] img[src*="meta-business"],
html[data-modo="consola"] img[src*="google-partner"]{
  filter:invert(1) sepia(1) saturate(2.2) hue-rotate(1deg) brightness(.92) !important;
  opacity:.86;
}