/* La web del mapa. Mismo aire que el panel: fondo oscuro y latón. */

:root {
  color-scheme: dark;
  --fondo: #14120f;
  --papel: #1c1917;
  --texto: #eae4d9;
  --tenue: #968d80;
  --linea: #302a24;
  --laton: #cf9a35;
  --latonsv: #2a2115;
  --verde: #6aa972;
  --rojo: #d3705a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--laton); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Barra ── */

.barra {
  display: flex; align-items: center; gap: 22px;
  padding: 0 20px; height: 52px;
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
  position: sticky; top: 0; z-index: 10;
}
.marca {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; letter-spacing: .14em; font-size: .82rem;
  color: var(--laton); text-decoration: none;
}
.marca:hover { text-decoration: none; }
.marca img { display: block; }

/* Por debajo de esto la barra va justa de sitio y el escudo dice lo mismo
   que la palabra. Se queda el escudo, que se reconoce antes. */
@media (max-width: 420px) { .marca span { display: none; } }
.barra nav { display: flex; gap: 18px; flex: 1; }
.barra nav a { color: var(--tenue); font-size: .92rem; }
.barra nav a.activa, .barra nav a:hover { color: var(--texto); text-decoration: none; }
.quien { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--tenue); }
.quien img { border-radius: 50%; }
.salir { color: var(--tenue); font-size: 1.1rem; }

main { padding: 22px 20px 40px; max-width: 1100px; margin: 0 auto; }

/* Las páginas de texto se leen mejor en una columna estrecha —de ahí el
   ancho máximo de arriba—, pero el mapa no se lee: se mira. Ahí el límite
   sobra y lo que se quiere es la pantalla entera, que en un monitor
   panorámico son más de dos mil píxeles que estaban en negro. */
main.ancho { max-width: none; padding: 0; margin: 0; }

/* ── Portada ── */

.portada { max-width: 34rem; margin: 10vh auto; text-align: center; }

/* El escudo preside las pantallas de entrada. Con `height:auto` para que no
   se deforme si algún día el logo cambia de proporción. */
.escudo {
  width: 150px; height: auto; margin: 0 auto 22px; display: block;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .45));
}
@media (max-width: 560px) { .escudo { width: 112px; margin-bottom: 16px; } }
.portada h1 { font-size: 2rem; margin: 0 0 10px; }
.portada p { color: var(--tenue); }
.aviso { color: var(--rojo); }

/* ── Piezas ── */

.boton {
  display: inline-block; padding: 8px 16px; border-radius: 4px;
  background: var(--latonsv); border: 1px solid var(--laton);
  color: var(--laton); font-size: .9rem; cursor: pointer;
}
.boton:hover { background: var(--laton); color: var(--fondo); text-decoration: none; }
.boton.grande { padding: 12px 26px; font-size: 1rem; margin-top: 18px; }

.tarjeta {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 5px; padding: 18px 20px; margin-bottom: 16px;
}
.tarjeta h2 { font-size: 1.05rem; margin: 0 0 12px; }

.tenue { color: var(--tenue); font-size: .88rem; }
.vacio { color: var(--tenue); font-style: italic; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--linea); }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue); }
td { font-variant-numeric: tabular-nums; }

.datos { display: flex; gap: 26px; flex-wrap: wrap; }
.datos div { display: flex; flex-direction: column; }
.datos b { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue); }

.interruptor { display: flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.interruptor input { accent-color: var(--laton); }
.interruptor.grande { padding: 8px 0; font-size: .96rem; }

.buscador { display: flex; gap: 8px; margin-bottom: 14px; }
.buscador input {
  flex: 1; max-width: 280px; padding: 7px 10px; border-radius: 4px;
  border: 1px solid var(--linea); background: var(--fondo); color: var(--texto);
}

code {
  background: var(--latonsv); color: var(--laton);
  padding: 1px 5px; border-radius: 3px; font-size: .88em;
}

/* ── Mapa ── */

/* Dos columnas: el mapa se queda con todo lo que sobre y el panel tiene un
   ancho fijo, porque una lista de nombres no mejora por ser más ancha. La
   altura se ata a la ventana —menos la barra— para que la página no tenga
   barra de desplazamiento: el mapa se navega arrastrando, y una página que
   además se mueve entera al rueda del ratón es un lío. */
.mapa-pantalla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 14px;
  height: calc(100dvh - 52px);
  padding: 12px 14px;
}

.mapa-zona { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.mapa-panel {
  display: flex; flex-direction: column; gap: 12px;
  min-height: 0; overflow-y: auto;
}

.mapa-barra {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.pestanas { display: flex; gap: 4px; }
.pestana {
  padding: 6px 14px; border-radius: 4px; cursor: pointer;
  background: transparent; border: 1px solid var(--linea);
  color: var(--tenue); font-size: .9rem; font-family: inherit;
}
.pestana.activa { border-color: var(--laton); color: var(--laton); background: var(--latonsv); }

/* La caja se come el hueco que le deja la barra de arriba. `min-height: 0`
   no es adorno: sin él un hijo de flex se niega a encoger por debajo de su
   contenido y el mapa desbordaría la ventana por abajo. */
.lienzo-caja {
  position: relative; flex: 1; min-height: 0; display: flex;
}

/* La casilla va pegada al cursor, no en una esquina: en una esquina obliga a
   mirar a un sitio distinto de donde estás señalando, y para leerla acabas
   perdiendo de vista el punto. Desplazada un poco abajo a la derecha no tapa
   lo que apuntas, y `pointer-events: none` evita que se coma los clics.

   La posición exacta la pone el JavaScript en cada movimiento. */
.casilla {
  position: absolute; pointer-events: none; z-index: 2;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .8rem; letter-spacing: .06em; line-height: 1;
  padding: 4px 8px; border-radius: 4px; white-space: nowrap;
  background: rgba(20, 18, 15, .88); border: 1px solid var(--linea);
  color: var(--laton);
}

#mapa {
  display: block; flex: 1; width: 100%; min-height: 0;
  background: #0d0b09;
  border: 1px solid var(--linea); border-radius: 5px;
  cursor: grab; touch-action: none;
}
#mapa:active { cursor: grabbing; }

.leyenda {
  display: flex; gap: 12px 18px; flex-wrap: wrap;
  margin-top: 8px; font-size: .82rem; color: var(--tenue);
}
.leyenda span { display: flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.p-yo { background: #4ea8de; }
.p-clan { background: #6aa972; }
.p-otro { background: #cf9a35; }
.p-base { background: transparent; border: 2px solid #cf9a35; border-radius: 2px; }
.p-abandonada { background: transparent; border: 2px dashed #968d80; border-radius: 2px; }
.p-excede { background: transparent; border: 2px solid #d3705a; border-radius: 2px; }

/* ── Panel lateral ── */

.bloque {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 5px; padding: 11px 12px;
}
.bloque > h3 {
  margin: 0 0 8px; font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tenue);
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.bloque > h3 span { letter-spacing: 0; text-transform: none; font-weight: 400; }

/* Un ajuste con su etiqueta, su control y su explicación debajo. */
.ajuste { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); }
.ajuste > label { display: block; margin-bottom: 6px; font-size: .9rem; }
.ajuste select {
  padding: 6px 9px; border-radius: 4px;
  background: var(--fondo); border: 1px solid var(--linea);
  color: var(--texto); font: inherit; font-size: .9rem;
}
.ajuste select:focus { outline: none; border-color: var(--laton); }
.ajuste p { margin: 8px 0 0; }

.buscar-panel {
  width: 100%; margin-bottom: 8px; padding: 6px 9px;
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 4px;
  color: var(--texto); font: inherit; font-size: .88rem;
}
.buscar-panel:focus { outline: none; border-color: var(--laton); }

/* La lista puede tener cien nombres y el panel no crece: se desplaza ella
   sola y el resto del panel se queda quieto. */
.lista-jugadores {
  list-style: none; margin: 0; padding: 0;
  max-height: 42vh; overflow-y: auto;
}
.lista-jugadores li {
  display: flex; align-items: baseline; gap: 7px;
  padding: 4px 6px; border-radius: 4px; cursor: pointer;
  font-size: .88rem; line-height: 1.35;
}
.lista-jugadores li:hover { background: var(--latonsv); }
.lista-jugadores li.propio { color: var(--laton); }
.lista-jugadores li i {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  align-self: center;
}
.lista-jugadores .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-jugadores .cuando { font-size: .76rem; color: var(--tenue); flex: none; }

/* Los desconectados salen al buscar, apagados: se distinguen de un vistazo
   de los que están jugando ahora, sin necesitar una etiqueta que lo diga. */
.lista-jugadores li.apagado { color: var(--tenue); }
.lista-jugadores li.apagado i { border: 1px solid var(--linea); }

.lista-jugadores .separador {
  cursor: default; padding: 9px 6px 3px;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tenue); border-top: 1px solid var(--linea); margin-top: 6px;
}
.lista-jugadores .separador:hover { background: transparent; }

.lista-vacia { color: var(--tenue); font-size: .85rem; padding: 2px 6px; }

/* ── Ficha ── */

.ficha-punto {
  background: var(--papel); border: 1px solid var(--laton);
  border-radius: 5px; padding: 12px 15px;
}
.ficha-punto h4 {
  margin: 12px 0 6px; font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tenue);
}
.dot-on, .dot-off {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 5px; vertical-align: middle; flex: none;
}
.dot-on  { background: var(--verde); }
.dot-off { background: transparent; border: 1px solid var(--linea); }

/* El nombre del clan, dentro de la ficha de alguien, lleva a su ficha. Se
   pinta como texto y no como botón: es un enlace entre fichas, no una acción,
   y con aspecto de botón competiría con los que sí lo son. */
.enlace-clan {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--laton); text-decoration: underline; text-underline-offset: 2px;
}
.enlace-clan:hover { color: var(--texto); }

/* Los miembros del clan */
.miembros-ficha { display: flex; flex-direction: column; gap: 3px; }
.miembro {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: none; border: none; border-radius: 4px; cursor: pointer;
  color: var(--texto); font: inherit; font-size: .88rem;
  padding: 4px 6px; text-align: left;
}
.miembro:hover { background: var(--latonsv); }
.miembro-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.miembro-cuando { font-size: .76rem; color: var(--tenue); flex: none; }
.ficha-punto .mini {
  margin-top: 0; padding: 4px 9px; font-size: .8rem;
}

/* El total de cada mundo, encima del desglose. */
.total-mapa {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 9px; margin-bottom: 5px;
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 4px;
}
.total-donde { font-size: .85rem; }
.total-cifras { font-size: .78rem; color: var(--tenue); }
.total-cifras b { color: var(--texto); font-weight: 600; }

/* Cada base es un botón que lleva la cámara hasta ella. Como botón y no como
   enlace porque no navega a ningún sitio: mueve el mapa.

   Dos líneas: dónde está arriba, qué tiene abajo. Con las cifras a la derecha
   en la misma línea no cabían las tres sin apretarlas. */
.bases-ficha { display: flex; flex-direction: column; gap: 5px; }
.base-fila {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 4px;
  color: var(--texto); font: inherit; padding: 7px 9px;
}
.base-fila:hover { border-color: var(--laton); background: var(--latonsv); }
.base-donde {
  font-size: .85rem; display: flex; align-items: baseline;
  justify-content: space-between; gap: 8px;
}
.base-que { font-size: .78rem; color: var(--tenue); }
.base-marca { font-size: .76rem; color: var(--tenue); }
.base-marca em { font-style: normal; }
.base-marca .mal { color: var(--rojo); }

/* La casilla de la rejilla, siempre con la misma pinta la diga quien la diga:
   el cursor, una base o un jugador. Se reconoce de un vistazo como algo que
   se puede escribir en el chat. */
.cas {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-style: normal; font-weight: 600; letter-spacing: .05em;
  color: var(--laton);
}
.ficha-punto b { color: var(--laton); }
.ficha-punto p { margin: 4px 0 0; font-size: .86rem; color: var(--tenue); }
.ficha-punto button {
  background: var(--latonsv); border: 1px solid var(--laton); color: var(--laton);
  cursor: pointer; font: inherit; font-size: .85rem;
  padding: 5px 11px; border-radius: 4px; margin-top: 6px;
}
.ficha-punto button:hover { background: var(--laton); color: var(--fondo); }
.ficha-punto code { font-size: .8rem; }
.ficha-punto .aviso { color: var(--rojo); font-size: .85rem; margin: 0 0 6px; }
.oculto { display: none; }

/* Por debajo de esto no caben dos columnas: el panel se va debajo del mapa y
   la página vuelve a desplazarse con normalidad. */
@media (max-width: 900px) {
  .mapa-pantalla {
    grid-template-columns: 1fr;
    height: auto; padding: 12px;
  }
  .mapa-zona { height: 62vh; }
  .mapa-panel { overflow: visible; }
  .lista-jugadores { max-height: 34vh; }
}

@media (max-width: 640px) {
  main { padding: 16px 12px 30px; }
  main.ancho { padding: 0; }
  .barra { gap: 14px; padding: 0 12px; }
  .barra nav { gap: 12px; }
}