/* ===========================================================================
   FAUNEX — PIEL VICTORIANA
   ---------------------------------------------------------------------------
   Un despacho de naturalista del XIX: verde de gabinete, pergamino sepia, oro
   envejecido y serif de tratado científico.

   Este fichero se carga DESPUÉS de los otros y casi todo lo que hace es
   redefinir las fichas de styles.css. Quitar su <link> devuelve el juego al
   aspecto claro anterior, entero y sin tocar nada más.

   Lo que NO toca, a propósito: los colores del tablero (terrenos, piezas,
   movimiento, ataque). El tablero es la lámina científica y va claro sobre el
   fondo oscuro, como una plancha enmarcada en la pared del gabinete. Teñirlo
   de verde lo volvería ilegible y arruinaría las texturas.

   Fuente: Century Schoolbook Bold, la del manual de identidad. Solo existe el
   peso negrita, así que el cuerpo de texto va en Georgia: serif de pantalla,
   presente en todos los dispositivos, 0 KB y funciona sin internet, que es lo
   que necesita el fichero para compartir.
   =========================================================================== */

@font-face{
  font-family:"Century Schoolbook Faunex";
  src:url("assets/marca/century-schoolbook-bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;     /* si tarda, se lee con la de respaldo y luego cambia */
}

:root{
  /* ---- paleta del manual ---- */
  --verde-victoriano:#1F4A33;
  --sepia-pergamino:#EBE1CD;
  --verde-gabinete:#133021;
  --oro-envejecido:#C69C57;
  --tinta-grabado:#1A1D1A;

  /* ---- superficies y tinta ---- */
  --bg:var(--verde-victoriano);
  --bg-brillo:#265741;
  --panel:var(--verde-gabinete);
  --panel-2:#0E2618;
  --campo:#0E2618;
  --ink:var(--sepia-pergamino);
  --ink-soft:#A8A08C;
  /* Bordes de pergamino, como el marco de una lámina. El fino se atenúa: a
     pleno sepia, veinte cajas con borde de 2 px marean. */
  --line:rgba(235,225,205,.38);
  --line-fuerte:var(--sepia-pergamino);

  /* ---- marca ---- */
  --green:var(--oro-envejecido);      /* lo activo y lo principal va en oro */
  --green-d:var(--oro-envejecido);
  --oro:var(--oro-envejecido);
  --oro-suave:rgba(198,156,87,.16);

  /* ---- tipografía del manual ---- */
  --tipo-titulo:"Century Schoolbook Faunex","Century Schoolbook","TeX Gyre Schola",
                "Playfair Display","Times New Roman",serif;
  --tipo-texto:Georgia,"Century Schoolbook","Times New Roman",serif;
  --titulo-espaciado:.08em;
  --titulo-transforma:uppercase;
  --titulo-peso:700;

  /* ---- geometría: láminas enmarcadas, no pastillas ---- */
  --radio:2px;
  --radio-chico:0px;
  --radio-caja:2px;
  --borde:1px;
  --sombra:0 10px 30px rgba(0,0,0,.45);
  --sombra-suave:0 2px 10px rgba(0,0,0,.35);
}

/* El papel del fondo: una veladura, no un degradado de app moderna. */
body{
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(38,87,65,.85) 0%, transparent 70%),
    var(--verde-victoriano);
}

/* ------------------------------  CABECERA  -------------------------------- */

.top h1{
  color:var(--sepia-pergamino);
  font-size:44px;                      /* H1 del manual */
  line-height:1.05;
}
.top .tag{
  color:var(--ink-soft);font-size:13px;
  text-transform:uppercase;letter-spacing:.10em;
}
.top .autor{color:var(--ink-soft)}
.top .autor a{color:var(--oro-envejecido);text-decoration:none;border-bottom:1px solid transparent}
.top .autor a:hover,.top .autor a:focus-visible{border-bottom-color:var(--oro-envejecido)}
.top .autor b{color:inherit;font-weight:700}
.top .frase{color:var(--ink-soft);opacity:.85}

/* El desmán, sobre el título. Las medidas salen del manual: círculo de 180-220
   en portada, 38 en cabecera de partida. */
/* El desmán va como máscara, no como imagen: así toma el color de la ficha de
   tinta y cambia con el tema, y de paso pesa una cuarta parte. */
.marca{
  display:block;width:180px;height:180px;margin:0 auto 14px;
  background-color:var(--sepia-pergamino);
  -webkit-mask:url("assets/marca/desman-mascara.png") center/contain no-repeat;
  mask:url("assets/marca/desman-mascara.png") center/contain no-repeat;
}
body[data-phase="place"] .marca,
body[data-phase="play"] .marca,
body[data-phase="over"] .marca{width:38px;height:38px;margin-bottom:6px}
body[data-phase="place"] .top h1,
body[data-phase="play"] .top h1,
body[data-phase="over"] .top h1{font-size:18px}
body[data-phase="place"] .top .tag,
body[data-phase="play"] .top .tag,
body[data-phase="over"] .top .tag,
body[data-phase="place"] .top .frase,
body[data-phase="play"] .top .frase,
body[data-phase="over"] .top .frase{display:none}

/* -------------------------  TÍTULOS Y TEXTO  ------------------------------ */

h2,h3{font-family:var(--tipo-titulo);font-weight:700}
h2{font-size:28px;text-transform:uppercase;letter-spacing:.05em;color:var(--sepia-pergamino)}
h3{font-size:20px;letter-spacing:.02em;color:var(--sepia-pergamino)}
.hint{color:var(--ink-soft);line-height:1.6}

/* Etiquetas, ELO y botones: 13 px, negrita, versales, mucho espaciado. */
button,.tab,.maptab,.chipelo{letter-spacing:.06em}

/* ---------------------------  CONTENEDORES  ------------------------------- */
/* Marcos de lámina: línea fina de pergamino y esquinas rectas. */

.pickcol,.modocard,.modonivel,.card,.mapcard,.banner,.hintbox,.logbox,
.teams,.baraja,.creamapa-panel,.hacefaltacuenta,.modal,.chip{
  border-color:var(--line);
}
.modal{
  background:var(--verde-gabinete);
  border:1px solid var(--sepia-pergamino);
  box-shadow:var(--sombra);
}
.modal h2{color:var(--sepia-pergamino)}

/* --------------------------------  BOTONES  ------------------------------- */

button{font-family:var(--tipo-texto)}
button.primary{
  background:var(--oro-envejecido);
  border-color:var(--oro-envejecido);
  color:var(--tinta-grabado);            /* oro con tinta, nunca con blanco */
  font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.10em;
}
button.primary:hover:not(:disabled){background:#d6ae6b;border-color:#d6ae6b}
button.ghost,button:not(.primary){
  background:transparent;border-color:var(--line);color:var(--ink);
}
button:not(.primary):hover:not(:disabled){border-color:var(--oro-envejecido);color:var(--oro-envejecido)}
button:disabled{opacity:.4}

.tab.sel,.maptab.sel{
  background:var(--oro-envejecido);border-color:var(--oro-envejecido);color:var(--tinta-grabado);
}
.tab,.maptab{background:transparent;color:var(--ink-soft)}

/* --------------------------------  CAMPOS  -------------------------------- */

input[type=text],input[type=number],select,textarea{
  background:var(--campo);color:var(--ink);border-color:var(--line);
  font-family:var(--tipo-texto);
}
input::placeholder{color:var(--ink-soft);opacity:.7}
.namecol input{background:var(--campo);color:var(--ink)}
.namecol.esia input{background:rgba(235,225,205,.06);color:var(--ink-soft)}
input[type=range]{accent-color:var(--oro-envejecido)}

/* --------------------------------  CUENTA  -------------------------------- */

.chip{background:rgba(235,225,205,.06);color:var(--ink)}
.chip:hover{border-color:var(--oro-envejecido)}
.chipavatar{background:rgba(235,225,205,.10);border-radius:50%}
/* El ELO es el rango del naturalista: va en oro, como manda el manual. */
.chipelo{
  background:transparent;color:var(--oro-envejecido);
  border:1px solid rgba(198,156,87,.5);font-weight:700;
}
/* ---- Expediente del naturalista ---- */
/* Una lámina de archivo: retrato en cornisa ovalada, cifras bajo su sello y el
   rango honorífico en oro. Las medidas y los roles salen del manual. */
.expediente{
  display:flex;gap:18px;align-items:center;
  padding:16px;margin-bottom:18px;
  border:1px solid var(--line);
  background:rgba(235,225,205,.04);
}
.expretrato{
  flex:0 0 auto;width:86px;height:104px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--oro-envejecido);
  border-radius:50% / 42%;                 /* la cornisa ovalada */
  background:rgba(235,225,205,.06);
}
.expretrato img{width:68px;height:68px;object-fit:contain}
.expdatos{flex:1 1 auto;min-width:0}
.exprango{
  margin:0 0 10px;font-family:var(--tipo-titulo);font-size:17px;line-height:1.25;
  color:var(--oro-envejecido);text-transform:uppercase;letter-spacing:.05em;
}
.expcifras{display:flex;gap:18px;flex-wrap:wrap}
.expcifras div{display:flex;flex-direction:column}
.expcifras b{
  font-family:var(--tipo-titulo);font-size:26px;line-height:1;
  color:var(--sepia-pergamino);font-variant-numeric:tabular-nums;
}
.expcifras div:first-child b{color:var(--oro-envejecido)}
.expcifras span{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.10em;
  color:var(--ink-soft);margin-top:4px;
}
.expfalta{display:block;margin-top:12px;font-size:12px;color:var(--ink-soft)}
.expfalta i{color:var(--sepia-pergamino);font-style:normal}
.tablaclasi .nom small{
  display:block;font-size:10.5px;font-weight:400;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.06em;
}

@media (max-width:760px){
  .expediente{flex-direction:column;text-align:center;gap:12px}
  .expcifras{justify-content:center}
  .exprango{font-size:15px}
}

.tablaclasi tr.tuyo{background:rgba(198,156,87,.14)}
.tablaclasi .num b{color:var(--oro-envejecido)}
.avatarop{background:rgba(235,225,205,.06)}
.avatarop.sel{border-color:var(--oro-envejecido);background:rgba(198,156,87,.16)}
.elocambio{color:var(--oro-envejecido)}

/* -------------------------------  PARTIDA  -------------------------------- */
/* El tablero se queda como está: es la lámina. Lo que cambia es el marco. */

.board{background:var(--tinta-grabado);box-shadow:var(--sombra)}
.banner{background:var(--verde-gabinete);color:var(--ink)}
.hintbox,.logbox,.teams,.baraja{background:var(--verde-gabinete);color:var(--ink)}
.boardfoot{color:var(--ink-soft)}
.zoomtablero{background:transparent;border-color:var(--line);color:var(--ink)}

/* ------------------------------  TARJETAS  -------------------------------- */

.card{background:var(--verde-gabinete);color:var(--ink)}
.card h3{color:var(--sepia-pergamino);font-size:17px}
.card .terr span{background:rgba(235,225,205,.08);color:var(--ink)}
.card .abil{color:var(--ink-soft)}
.card.taken{background:rgba(19,48,33,.5)}
.mapcard{background:var(--verde-gabinete)}
.modocard{background:var(--verde-gabinete)}
.modocard b{color:var(--sepia-pergamino);font-family:var(--tipo-titulo);letter-spacing:.04em}
.modocard:hover{border-color:var(--oro-envejecido);box-shadow:var(--sombra-suave)}
.slot{background:rgba(235,225,205,.05);color:var(--ink-soft)}
.slot.filled{background:rgba(235,225,205,.09)}

/* --------------------------------  MÓVIL  --------------------------------- */

@media (max-width:760px){
  .marca{width:96px;height:96px;margin-bottom:10px}
  .top h1{font-size:32px}               /* H1 móvil del manual */
  h2{font-size:22px}
  h3{font-size:18px}
}

/* ----------------------------  PARTIDAS EN RED  --------------------------- */

.redpanel{max-width:430px;margin:22px auto 0}
.redlobby{
  padding:20px 18px;border:1px solid var(--line);background:var(--verde-gabinete);
  text-align:center;
}
.redlobby button{width:100%;margin-bottom:10px}
.redo{margin:6px 0 12px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}
.redcampo{display:block;margin-bottom:10px;text-align:left}
.redcampo span{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:5px;
  text-transform:uppercase;letter-spacing:.08em}
.redcampo input{
  width:100%;padding:10px 12px;background:var(--campo);color:var(--ink);
  border:1px solid var(--line);font:inherit;font-size:20px;letter-spacing:.35em;text-align:center;
}
/* El código se dicta en voz alta: grande, en oro y con las letras separadas. */
.redcodigo{
  margin:10px 0 14px;font-family:var(--tipo-titulo);font-size:42px;
  letter-spacing:.22em;color:var(--oro-envejecido);
}
.redpista{margin:0 0 6px;font-size:13px;color:var(--ink-soft);line-height:1.5}
.redaviso{margin:10px 0 0;font-size:12.5px;color:var(--atk)}

.redbarra{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;max-width:1100px;margin:0 auto 12px;padding:9px 14px;
  border:1px solid var(--line);background:var(--verde-gabinete);font-size:13px;
}
.redjug{color:var(--ink-soft)}
.redjug b{color:var(--oro-envejecido);font-variant-numeric:tabular-nums}
.redturno{
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-soft);font-variant-numeric:tabular-nums;
}
.redturno.mio{color:var(--oro-envejecido)}

@media (max-width:760px){
  .redbarra{flex-wrap:wrap;justify-content:center;text-align:center}
  .redcodigo{font-size:34px}
}