/* BelaWorld — la paleta sale de las fotos de Bela. */

:root {
  --canela: #C0672E;
  --cobre: #E0A05C;
  --carbon: #3A3A3C;
  --crema: #F2EDE4;
  --rosa: #E6679D;
  --morado: #9A5CD0;
  --cocina: #252B3D;
  --roble: #D9C7A8;
}

* { box-sizing: border-box; }

/* Esto es un juego, no una pagina: nada de seleccionar texto al hacer doble
   clic o doble toque, y nada del recuadro azul de "has tocado aqui" que
   Android y iOS pintan encima de medio canvas. El unico sitio donde SI hace
   falta seleccionar es el campo del nombre. */
* {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

html, body {
  margin: 0;
  height: 100%;
  background: #1A1E2A;
  color: var(--crema);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  overscroll-behavior: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Respetar la muesca y la barra de gestos del movil. */
  padding:
    max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}

#escena {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-height: 100%;
}

/* En BatBela el raton NO se ve: Bela le sigue 1:1, asi que la flecha se queda
   justo encima de la chapa del collar — que es el unico punto que colisiona. El
   cursor tapaba literalmente el hitbox. En el hub si hace falta, que ahi se
   pulsan habitaciones. */
#lienzo.sin-cursor { cursor: none; }

#lienzo {
  display: block;
  max-width: 100%;
  /* dvh, no vh: con vh la barra de direcciones del movil deja el canvas
     mas alto que la pantalla y la pagina acaba haciendo scroll al tocar. */
  max-height: calc(100vh - 76px);
  max-height: calc(100dvh - 76px);
  aspect-ratio: 480 / 720;
  image-rendering: pixelated;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  /* `none`, y no `manipulation`: con `manipulation` el navegador SIGUE
     pudiendo quedarse el gesto como desplazamiento, y a los dos pixeles de
     arrastre lanza pointercancel y el dedo se suelta solo. En el atico eso era
     mover a Bela 2 px y que se quedase muerta. `none` desactiva todos los
     gestos del navegador, incluido el zoom por doble toque. */
  touch-action: none;
  cursor: pointer;
  outline: none;
}

#barra {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: center;
}

button {
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 18px;
  border: 2px solid var(--rosa);
  border-radius: 8px;
  background: var(--cocina);
  color: var(--cobre);
  cursor: pointer;
}

button:hover { background: var(--rosa); color: var(--crema); }
button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 3px solid var(--crema); outline-offset: 3px; }

/* La general tiene espacio propio: el tablero completo, también en móvil. */
#boton-ranking.abre-general { border-color: #F3CA79; color: #F3CA79; background: #393347; }
#dialogo-general { width: calc(100% - 32px); max-width: 1160px; max-height: calc(100dvh - 32px); padding: 0; border: 2px solid #746080; border-radius: 16px; color: var(--crema); background: #222637; box-shadow: 0 24px 90px #0009; }
#dialogo-general[open] { display: flex; flex-direction: column; }
#dialogo-general::backdrop { background: #111522e8; }
.general-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px 16px; }
.general-etiqueta { color: #F3CA79; font-size: 11px; font-weight: 700; letter-spacing: 2px; margin: 0 0 8px; }
.general-cabecera h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.6px; }
#cerrar-general { min-height: 44px; flex-shrink: 0; border-color: #746080; color: var(--crema); }
.general-periodo { display: flex; align-items: center; gap: 8px; padding: 0 28px 18px; border-bottom: 1px solid #ffffff16; }
.general-periodo button { min-height: 44px; border-color: #ffffff22; color: #c5c0d2; }
.general-periodo button[aria-pressed="true"] { color: #F3CA79; border-color: #F3CA79; background: #F3CA7912; }
#general-fecha { margin-left: auto; font-size: 12px; color: #b8b2c8; }
#general-contenido { min-height: 0; padding: 24px 28px; overflow-y: auto; overscroll-behavior: contain; }
.general-resumen { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; background: #9A5CD01a; border: 1px solid #9A5CD070; border-radius: 12px; }
.general-resumen h3 { font-size: 22px; margin: 0 0 8px; overflow-wrap: anywhere; }
.general-resumen p { font-size: 14px; color: #c5c0d2; line-height: 1.6; margin: 0; }
.general-ver-objetivos { min-height: 44px; padding: 8px 0; margin-top: 6px; border: 0; background: transparent; color: #efa3c6; font-size: 12px; }
.general-total { text-align: right; flex-shrink: 0; }
.general-total strong { display: block; font-size: 32px; color: #F3CA79; font-variant-numeric: tabular-nums; }
.general-total span { font-size: 12px; color: #b8b2c8; }
.general-seccion { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 28px 0 12px; }
.general-seccion h3 { font-size: 18px; margin: 0; }
.general-seccion>span { color: #b8b2c8; font-size: 12px; }
.general-desliza { display: none; color: #b8b2c8; font-size: 12px; margin: 0 0 10px; }
.general-tabla-scroll { overflow-x: auto; border: 1px solid #ffffff20; border-radius: 10px; overscroll-behavior-x: contain; }
.general-tabla { border-spacing: 0; width: 100%; min-width: 960px; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.general-tabla caption { text-align: left; color: #b8b2c8; font-size: 12px; padding: 12px 16px; max-width: calc(100vw - 64px); }
.general-tabla th, .general-tabla td { padding: 14px 12px; border-top: 1px solid #ffffff12; }
.general-tabla thead th { background: #303447; color: #ded8e9; font-size: 13px; }
.general-tabla small { display: block; font-weight: 400; font-size: 10px; color: #b8b2c8; white-space: nowrap; margin-top: 5px; }
.general-tabla tbody th { text-align: left; max-width: 200px; overflow-wrap: anywhere; }
.general-tabla th:first-child { position: sticky; left: 0; z-index: 1; background: #292d40; text-align: left; min-width: 165px; box-shadow: 3px 0 6px #0002; }
.general-tabla tbody tr:nth-child(even) { background: #ffffff04; }
.general-tabla .general-yo { background: #9A5CD026 !important; }
.general-tabla .general-yo th:first-child { background: #443354; box-shadow: inset 3px 0 var(--rosa), 3px 0 6px #0002; }
.general-tabla .general-yo th small { color: #efa3c6; }
.general-pos { display: inline-block; width: 23px; color: #a9a3ba; vertical-align: top; }
.general-tabla th[scope="row"]>span:last-child { display: inline-block; max-width: 125px; }
.general-tabla .general-nota strong { color: #eca3c6; font-size: 18px; }
.general-tabla .general-mejor strong { color: #F3CA79; }
.general-metas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.general-meta { display: flex; flex-direction: column; padding: 18px; border: 1px solid #ffffff20; border-radius: 10px; background: #292d40; }
.general-meta-titulo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.general-meta h4 { font-size: 16px; margin: 0; }
.general-meta-titulo span { font-size: 11px; color: #bba2d2; }
.general-meta p { color: #c5c0d2; font-size: 13px; line-height: 1.5; margin: 14px 0 0; }
.general-record strong { color: var(--crema); float: right; font-variant-numeric: tabular-nums; }
.general-meta .general-objetivo { margin-bottom: 18px; color: #F3CA79; }
.general-objetivo strong { display: block; font-size: 28px; line-height: 1.4; }
.general-objetivo small { color: #b8b2c8; }
.general-meta button { margin-top: auto; min-height: 44px; font-size: 12px; padding: 10px; color: var(--crema); border-color: #746080; }
.general-reglas { color: #b8b2c8; margin-top: 24px; font-size: 12px; line-height: 1.7; }
.general-reglas summary { cursor: pointer; padding: 12px 0; }
.general-vacio { text-align: center; padding: 32px 12px; color: #c5c0d2; line-height: 1.6; }
@media (max-width: 1055px) { .general-desliza { display: block; } }
@media (max-width: 700px) {
  #dialogo-general { width: 100%; height: 100dvh; max-height: 100dvh; max-width: 100%; margin: 0; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .general-cabecera { padding: 18px 16px 14px; gap: 10px; }
  .general-cabecera h2 { font-size: 21px; }
  #cerrar-general { padding: 8px 10px; font-size: 12px; }
  .general-periodo { padding: 0 16px 14px; flex-wrap: wrap; }
  #general-fecha { flex-basis: 100%; margin: 4px 0 0; }
  #general-contenido { padding: 16px; }
  .general-resumen { padding: 16px; gap: 12px; }
  .general-resumen h3 { font-size: 18px; }
  .general-total strong { font-size: 24px; }
  .general-resumen p { font-size: 12px; }
  .general-metas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .general-seccion>span { display: none; }
  .general-tabla th:first-child { min-width: 128px; max-width: 128px; }
  .general-tabla th[scope="row"]>span:last-child { max-width: 76px; }
}
@media (max-width: 430px) {
  .general-metas { grid-template-columns: 1fr; }
  .general-resumen { align-items: flex-start; }
  .general-etiqueta { font-size: 9px; }
}

/* Apagado: el boton sigue diciendo QUE apaga, solo que atenuado. Con dos
   interruptores hace falta ver de un vistazo cual esta puesto, y cambiar el
   icono por otro obliga a leerlo. */
button.apagado { opacity: 0.4; border-color: var(--gris, #6E6F73); }

/* ---------- la sonoteca ---------- */
/* Es una lista de cuarenta botones con su explicacion al lado, o sea justo lo
   que el canvas de 480x720 hace mal: en pixel art no cabe, y lo que hace falta
   aqui es poder leer CUANDO suena cada cosa. */

.sonoteca { max-width: 620px; text-align: left; }
.sonoteca h2 { text-align: center; }
.sonoteca .sub { text-align: center; font-size: 12px; margin-bottom: 14px; }

/* Lo que suena, pegado arriba: si se va con el scroll no se puede saltar de
   seccion mientras se escucha, que es para lo que esta. */
#sonoteca-ahora {
  position: sticky;
  top: -24px;
  z-index: 2;
  margin: 0 -24px 16px;
  padding: 10px 24px 12px;
  background: #1A1E2A;
  border-bottom: 2px solid rgba(154, 92, 208, 0.4);
  font-size: 13px;
  color: rgba(242, 237, 228, 0.55);
}
#sonoteca-ahora.viva { border-bottom-color: var(--morado); color: var(--crema); }
#sonoteca-ahora strong { display: block; color: var(--cobre); letter-spacing: 1px; }
.ahora-detalle { display: block; font-size: 11px; color: rgba(242, 237, 228, 0.6); }
.ahora-saltos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.sala { margin-bottom: 22px; }
.sala h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--rosa);
  letter-spacing: 1px;
}
.sala .nota {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(242, 237, 228, 0.6);
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 7px;
  border: 2px solid rgba(230, 103, 157, 0.45);
  text-align: left;
}
.chip small {
  font-size: 10px;
  font-weight: 400;
  color: rgba(242, 237, 228, 0.5);
}
.chip:hover small { color: rgba(242, 237, 228, 0.85); }

/* La cancion se distingue del efecto por el color, no por el tamano: son dos
   cosas que se pulsan distinto —una se queda sonando y la otra no. */
.chip.cancion { border-color: var(--morado); color: var(--crema); }
.chip.cancion:hover { background: var(--morado); }

.chip.salto { padding: 4px 9px; font-size: 11px; border-color: rgba(154, 92, 208, 0.5); }
.chip.salto.activa { background: var(--morado); color: var(--crema); }
.chip.salto.parar { border-color: rgba(242, 237, 228, 0.3); }

.pie-prueba {
  margin: 18px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--morado);
}

.capa {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 18, 26, 0.86);
  padding: 16px;
  z-index: 10;
}

.capa[hidden] { display: none; }

.tarjeta {
  width: 100%;
  max-width: 380px;
  background: var(--cocina);
  border: 3px solid var(--rosa);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  /* El contenido de esta capa NO tiene tope: diez hermanos en el marcador mas
     un consejo que escribe el servidor y mide lo que mide. Sin esto, en un
     movil apaisado el boton de cerrar se queda fuera de la pantalla. */
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* La barra, cuadrada y del color de la casa: una barra redondeada del sistema
   encima de un juego de pixel art canta tanto como una fuente suavizada. */
.tarjeta::-webkit-scrollbar { width: 10px; }
.tarjeta::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.35); }
.tarjeta::-webkit-scrollbar-thumb {
  background: var(--morado);
  border: 2px solid var(--cocina);
}
.tarjeta::-webkit-scrollbar-thumb:hover { background: var(--rosa); }
.tarjeta { scrollbar-width: thin; scrollbar-color: var(--morado) rgba(0, 0, 0, 0.35); }

.tarjeta h1, .tarjeta h2 {
  margin: 0 0 10px;
  color: var(--cobre);
  letter-spacing: 2px;
  font-size: 22px;
}

.tarjeta p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(242, 237, 228, 0.75);
}

#campo-nombre {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 2px solid rgba(242, 237, 228, 0.25);
  border-radius: 8px;
  background: #1A1E2A;
  color: var(--crema);
  text-align: center;
}

#campo-nombre:focus { outline: none; border-color: var(--morado); }

.jugadores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}

.jugadores:empty { display: none; }

.jugadores button {
  border-color: var(--morado);
  color: var(--crema);
  padding: 10px 16px;
}

.jugadores button:hover { background: var(--morado); }

#boton-jugador {
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-color: var(--morado);
  color: var(--morado);
}

.sub {
  margin: -4px 0 14px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--morado);
}

.pestanas {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.pestanas button {
  flex: 1;
  font-size: 13px;
  padding: 7px 4px;
  border-color: rgba(242, 237, 228, 0.2);
  color: rgba(242, 237, 228, 0.6);
}

.pestanas button.activa {
  border-color: var(--rosa);
  color: var(--cobre);
}

#lista-marcador {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  text-align: left;
}

#lista-marcador li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 15px;
}

#lista-marcador li:nth-child(odd) { background: rgba(242, 237, 228, 0.05); }
#lista-marcador li.mio { background: rgba(154, 92, 208, 0.25); }
#lista-marcador li.vacio { justify-content: center; color: rgba(242, 237, 228, 0.5); font-size: 14px; }

.pos { width: 24px; color: var(--cobre); font-weight: 700; text-align: center; }

/* Las copas de los tres primeros. El podio se ve antes que los numeros. */
.copa { width: 24px; display: flex; justify-content: center; }
#lista-marcador li.p1 { background: rgba(242, 193, 78, 0.16); }
#lista-marcador li.p2 { background: rgba(201, 205, 212, 0.12); }
#lista-marcador li.p3 { background: rgba(200, 138, 74, 0.13); }
#lista-marcador li.p1 .quien { color: #F2C14E; font-weight: 700; }
#lista-marcador li.p2 .quien { color: #C9CDD4; font-weight: 700; }
#lista-marcador li.p3 .quien { color: #C88A4A; font-weight: 700; }
#lista-marcador li.mio { outline: 2px solid rgba(154, 92, 208, 0.7); }
#lista-marcador .desempate { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: rgba(242, 237, 228, 0.65); }
.quien { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pts { font-weight: 700; color: var(--rosa); }

/* El consejo del final. Sale del diario de partidas del servidor, con los
   numeros de ESA partida dentro: un consejo generico no lo lee nadie. */
.consejo {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 4px solid var(--rosa, #E6679D);
  background: rgba(154, 92, 208, 0.14);
  border-radius: 0 8px 8px 0;
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: left;
  color: #F2EDE4;
}
.consejo::before {
  content: "CONSEJO";
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: #E6679D;
  margin-bottom: 4px;
}

/* La puerta de atras (?prueba=...): que se vea que no es el juego de verdad. */
#etiqueta-prueba {
  text-align: center;
  line-height: 1.4;
  color: var(--morado);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0 8px;
  align-self: center;
  white-space: pre;
}
@media (max-width: 520px) {
  #barra { gap: 4px; }
  #barra button { padding: 8px 7px; min-height: 42px; font-size: 12px; max-width: 115px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pestanas { flex-wrap: wrap; }
}

/* Los mandos siempre caben; el sonido tiene espacio propio en Ajustes. */
#barra { flex-wrap: wrap; max-width: 480px; }
#barra button { min-height: 44px; }
#estado-conexion { min-height: 16px; margin: 0; max-width: 460px; font-size: 12px; text-align: center; color: #F3CA79; }
#lienzo { max-height: calc(100dvh - 112px); }
.resultado { align-items: flex-end; background: rgba(15,18,26,.4); padding-bottom: max(16px,env(safe-area-inset-bottom)); }
.resultado .tarjeta { border-color: #E0A05C; box-shadow: 0 -12px 50px #0007; }
#resultado-puntos { font-size: 30px; margin: 10px 0; }
#resultado-humor { font-size: 15px; color: #F2EDE4; }
#resultado-guardado { font-size: 12px; color: #C6DCBA; }
#resultado-consejo { text-align: left; font-size: 13px; }
.acciones-resultado { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
#resultado-repetir { background: #E0A05C; color: #252B3D; border-color: #E0A05C; }
.ajustes label { display:block; text-align:left; margin:18px 0 8px; }
.ajustes output { float:right; color:#E0A05C; }
.ajustes input[type=range] { width:100%; min-height:36px; accent-color:#E6679D; }
.ajustes .suaves { display:flex; gap:12px; align-items:center; }
.ajustes input[type=checkbox] { width:22px; height:22px; accent-color:#E6679D; }
.interruptores { display:flex; justify-content:center; gap:12px; }
#capa-ajustes { z-index:30; }
#capa-nombre { z-index:40; }
#capa-marcador { z-index:25; }
#capa-resultado { z-index:20; }
#capa-pausa { z-index:15; }
@media(max-width:520px) { #barra button { padding:8px 9px; } #boton-jugador { max-width:80px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; } }