/* La piel del tablero. Va ENCIMA de style.css y no sustituye nada: sólo pinta.

   La regla que gobierna este fichero: **ninguna de estas reglas puede costar
   altura**. El presupuesto vertical de una pantalla de 360×640 está medido y
   repartido —hud 86, campo 377, pie 177— y la carta en juego sale de ahí. Todo
   lo decorativo va de fondo, de borde o en posición absoluta; nada abre fila.

   Y no se adoptan dos cosas de la maqueta, las dos porque cuestan sitio:
   - Mazo y descarte como columnas de la fila de ranuras. En el juego ya viven
     dentro de las barras de hábitat, y ahí se llevarían el 21 % del ancho: la
     ranura bajaría de 83 a 60 px.
   - El medallón como banda propia entre los dos bandos: 187 px de 640. Aquí va
     de fondo del campo, detrás de las ranuras, y sale gratis. */

/* ------------------------------------------------------------------ el campo
   Piedra repetida y medallón, los dos de fondo. La piedra se apaga EN EL
   FICHERO: venía con luminancia media 107 y el fondo del juego es 20, así que
   el tablero salía beige. Se usa en cuatro sitios y apagarla en cada uno con
   `background-blend-mode` era pedir que algún día se olvide en uno. */
#campo {
  /* El tapete de la tienda pone su medallón y su losa en `--tapete-medallon`
     y `--tapete` (src/ui/tienda.js); sin ellos, los de siempre. */
  background-image:
    var(--tapete-medallon, url('assets/piel/simbolo_huella.webp')),
    var(--tapete, url('assets/piel/piedra.webp'));
  background-repeat: no-repeat, repeat;
  background-position: center center, top left;
  background-size: auto 58%, 170px auto;
  position: relative;
}
/* El velo va en un pseudoelemento y no en `background-color` porque tiene que
   quedar POR ENCIMA de las capas de imagen. */
#campo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 75% at 50% 50%, rgba(25,20,16,.12), rgba(20,16,12,.72) 80%);
}
/* Y las piezas del campo por encima del velo. Las cinco ESTRUCTURALES por su
   nombre, no `#campo > *`: un selector con id gana por especificidad a
   cualquier `.clase { position: absolute }`, así que `#campo > *` le quitaba
   el `absolute` al anuncio —el cartel que `animate.js` cuelga del campo para
   la Mortandad o el clima que se impone— y lo convertía en un hijo flex más.
   Las dos filas de ranuras reparten lo que sobra, así que encogían para
   hacerle sitio: el tablero daba un salto hacia arriba, y como el anuncio
   termina su animación invisible, lo que quedaba era un hueco muerto abajo
   durante el segundo y pico que tarda en quitarse.

   Nombrarlas una a una deja que cualquier capa que se cuelgue del campo
   conserve el posicionamiento que ella declare. Un `absolute` con `z-index`
   ya pinta por encima del velo sin ayuda de esta regla. */
#campo > .habitat,
#campo > .fila-ranuras,
#campo > .franja { position: relative; z-index: 1; }

/* ----------------------------------------------------------------- ranuras
   Piezas dibujadas, no un `border: dashed`. Las tres —vacía, destino y
   abierta— salen del mismo dibujo y llevan la PROPORCIÓN DE LA CARTA, 0,732.

   Que la lleven costó una tanda entera: la primera vez se pidieron a 83×137,
   que era el alto de la ranura ANTES de arreglarla, y el modelo además centró
   el dibujo dejando un 47 % de lienzo transparente. Salió en 0,931.

   Y la ranura necesita el `aspect-ratio` por lo mismo: la fila reparte el alto
   que sobra, la ranura se lo quedaba entero —83×146— y `.carta--ranura` es
   `inset: 0`, así que la carta se estiraba a esa caja. Un 29 % de estirón que
   con un borde punteado no se veía y con un marco dibujado sí. */
.fila-ranuras { counter-reset: zona; align-items: center; }
.ranura {
  counter-increment: zona;
  /* Sin `margin: auto`: en una rejilla eso encoge el item al contenido y la
     ranura se quedaba en 36×50. El ancho lo da el `1fr` de la fila, el alto
     sale de la proporción, y `align-items: center` la centra en lo que sobre. */
  height: auto; aspect-ratio: 82 / 112; max-height: 100%;
  border: 0;
  background: url('assets/piel/ranura_vacia.webp') center / 100% 100% no-repeat;
}
/* El carril abierto: enfrente no hay nadie y por aquí entra el daño. Es el
   único estado encendido del tablero y el que más se mira. */
/* Los dos estados van con el shorthand ENTERO, no sólo `background-image`.
   style.css tiene `.ranura.destino { background: rgba(…) }`, y un shorthand
   resetea `background-size` a `auto` y `background-repeat` a `repeat`: la pieza
   de 332×455 se pintaba a tamaño natural y repetida —el destino gigante al
   arrastrar—. Con el shorthand aquí, que va después, mandan el 100 % y el
   `no-repeat`. */
.ranura.abierta { background: url('assets/piel/ranura_abierta.webp') center / 100% 100% no-repeat; }
/* Y el destino al arrastrar, que significa lo contrario: aquí caería tu carta.
   Por eso una lleva los cantos laterales al rojo y un canal, y la otra luz
   uniforme alrededor: a 83 px hay que poder distinguirlas sin pensar. */
.ranura.destino { background: url('assets/piel/ranura_destino.webp') center / 100% 100% no-repeat; }

/* El rótulo «ZONA n» sale de un contador de CSS y no del marcado: `render.js`
   sólo escribe el número en las tuyas, y así no hace falta tocarlo. Es también
   la razón de que haga falta UNA pieza y no cuatro. */
.ranura:not(.ocupada) { font-size: 0; flex-direction: column; }
.ranura:not(.ocupada)::before {
  content: 'ZONA ' counter(zona);
  font-size: 8px; letter-spacing: .13em; color: rgba(217,164,65,.5); font-weight: 500;
  /* En dos líneas como mucho y sin ensanchar la ranura: la anchura la manda la
     rejilla, no el nombre. */
  max-width: 88%; text-align: center; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
/* Con lugares, la ranura vacía dice el suyo en vez de «ZONA n»: es lo que
   decide dónde soltar la carta, y el número ya lo lleva la fila de lugares. */
.ranura[data-lugar-nombre]:not(.ocupada)::before { content: attr(data-lugar-nombre); text-transform: uppercase; }
.ranura:not(.ocupada)::after {
  content: ''; width: 14px; height: 1px; margin-top: 4px; background: rgba(217,164,65,.28);
}

/* ----------------------------------------------------------------- lugares
   Cada lugar tiene un COLOR, y el color es de la columna: lo llevan el botón
   de la tira y las dos ranuras enfrentadas, para que se vea de un vistazo qué
   columna es cuál sin leer el rótulo. Va aquí y no en `lugares.js` a
   propósito: ese fichero entra en el paquete de la Edge Function, y un color
   allí costaría re-empaquetar, re-anclar y desplegar por una cosa que sólo
   pinta. `test/lugares.test.js` exige que todo lugar del set tenga su tinte
   aquí y que no sobre ninguno.

   Los diecisiete están repartidos por el círculo —lava, huevo, trigo, lima,
   helecho, pino, laguna, río, cielo, violeta, barro, sangre, rosa, óxido,
   piedra, sal, arena— para que cuatro cualesquiera se distingan. */
.lugar[data-lugar="ladera_volcanica"], .ranura[data-lugar="ladera_volcanica"] { --lugar-tinte: #ff5a1f; }
.lugar[data-lugar="nidada"],           .ranura[data-lugar="nidada"]           { --lugar-tinte: #f2a93b; }
.lugar[data-lugar="llanura_abierta"],  .ranura[data-lugar="llanura_abierta"]  { --lugar-tinte: #e5cf4a; }
.lugar[data-lugar="pradera_alta"],     .ranura[data-lugar="pradera_alta"]     { --lugar-tinte: #b6d445; }
.lugar[data-lugar="helechal"],         .ranura[data-lugar="helechal"]         { --lugar-tinte: #5cbf5a; }
.lugar[data-lugar="bosque_coniferas"], .ranura[data-lugar="bosque_coniferas"] { --lugar-tinte: #2a9a62; }
.lugar[data-lugar="laguna"],           .ranura[data-lugar="laguna"]           { --lugar-tinte: #3fcfc4; }
.lugar[data-lugar="rio"],              .ranura[data-lugar="rio"]              { --lugar-tinte: #3a9de6; }
.lugar[data-lugar="acantilado"],       .ranura[data-lugar="acantilado"]       { --lugar-tinte: #a9bfd9; }
.lugar[data-lugar="desfiladero"],      .ranura[data-lugar="desfiladero"]      { --lugar-tinte: #8b80d0; }
.lugar[data-lugar="cienaga"],          .ranura[data-lugar="cienaga"]          { --lugar-tinte: #8c8a3b; }
.lugar[data-lugar="cazadero"],         .ranura[data-lugar="cazadero"]         { --lugar-tinte: #d0362f; }
.lugar[data-lugar="barranco"],         .ranura[data-lugar="barranco"]         { --lugar-tinte: #ee5f8a; }
.lugar[data-lugar="pedregal"],         .ranura[data-lugar="pedregal"]         { --lugar-tinte: #b8763a; }
.lugar[data-lugar="roquedal"],         .ranura[data-lugar="roquedal"]         { --lugar-tinte: #a8a294; }
.lugar[data-lugar="salinas"],          .ranura[data-lugar="salinas"]          { --lugar-tinte: #f0ead8; }
.lugar[data-lugar="cauce_seco"],       .ranura[data-lugar="cauce_seco"]       { --lugar-tinte: #cfa66e; }

/* La TEXTURA del lugar, dentro de la ranura vacía. Va por dentro del marco de
   latón de `ranura_vacia.webp`: los cuatro números son la ventana que mide
   `python tools/lugares.py` —x 11..319 e y 12..439 de 332×454— pasados a
   tamaño y posición de fondo, y no se estiman. La textura va en la capa de
   arriba y la pieza de la ranura debajo, así que el marco sigue siendo el
   marco; y sólo se pinta cuando `render.js` escribe `data-lugar-arte`, que a
   su vez sólo lo hace si el índice dice que el fichero existe: una textura
   que no está no es un 404, es la piedra de siempre. El rótulo del nombre
   lleva un fondo oscuro para leerse encima de cualquier suelo. */
.ranura[data-lugar-arte]:not(.ocupada) {
  background:
    var(--lugar-arte) 45.8% 44.4% / 92.8% 94.1% no-repeat,
    url('assets/piel/ranura_vacia.webp') center / 100% 100% no-repeat;
}
.ranura[data-lugar-arte]:not(.ocupada)::before {
  background: rgba(20,16,12,.72); padding: 1px 5px; border-radius: 3px;
}
.ranura[data-lugar-arte="ladera_volcanica"] { --lugar-arte: url('assets/piel/lugares/ladera_volcanica.webp'); }
.ranura[data-lugar-arte="nidada"]           { --lugar-arte: url('assets/piel/lugares/nidada.webp'); }
.ranura[data-lugar-arte="llanura_abierta"]  { --lugar-arte: url('assets/piel/lugares/llanura_abierta.webp'); }
.ranura[data-lugar-arte="pradera_alta"]     { --lugar-arte: url('assets/piel/lugares/pradera_alta.webp'); }
.ranura[data-lugar-arte="helechal"]         { --lugar-arte: url('assets/piel/lugares/helechal.webp'); }
.ranura[data-lugar-arte="bosque_coniferas"] { --lugar-arte: url('assets/piel/lugares/bosque_coniferas.webp'); }
.ranura[data-lugar-arte="laguna"]           { --lugar-arte: url('assets/piel/lugares/laguna.webp'); }
.ranura[data-lugar-arte="rio"]              { --lugar-arte: url('assets/piel/lugares/rio.webp'); }
.ranura[data-lugar-arte="acantilado"]       { --lugar-arte: url('assets/piel/lugares/acantilado.webp'); }
.ranura[data-lugar-arte="desfiladero"]      { --lugar-arte: url('assets/piel/lugares/desfiladero.webp'); }
.ranura[data-lugar-arte="cienaga"]          { --lugar-arte: url('assets/piel/lugares/cienaga.webp'); }
.ranura[data-lugar-arte="cazadero"]         { --lugar-arte: url('assets/piel/lugares/cazadero.webp'); }
.ranura[data-lugar-arte="barranco"]         { --lugar-arte: url('assets/piel/lugares/barranco.webp'); }
.ranura[data-lugar-arte="pedregal"]         { --lugar-arte: url('assets/piel/lugares/pedregal.webp'); }
.ranura[data-lugar-arte="roquedal"]         { --lugar-arte: url('assets/piel/lugares/roquedal.webp'); }
.ranura[data-lugar-arte="salinas"]          { --lugar-arte: url('assets/piel/lugares/salinas.webp'); }
.ranura[data-lugar-arte="cauce_seco"]       { --lugar-arte: url('assets/piel/lugares/cauce_seco.webp'); }

/* El botón: fondo oscuro teñido, borde del color y una tira del color arriba.
   El nombre se queda en crema y no en el tinte: la sal y el cielo son casi
   blancos y la ciénaga casi marrón, y un rótulo de 8,5 px en cualquiera de
   los dos no se leería. El color va en lo que rodea al texto, no en el texto.
   Las dos primeras declaraciones son el fallback sin `color-mix`. */
.lugar[data-lugar] {
  border-color: var(--lugar-tinte);
  box-shadow: inset 0 2px 0 var(--lugar-tinte), 0 1px 3px rgba(0,0,0,.55);
  border-color: color-mix(in srgb, var(--lugar-tinte) 70%, #1a130d);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--lugar-tinte) 34%, #1a130d),
    color-mix(in srgb, var(--lugar-tinte) 14%, #1a130d));
  text-shadow: 0 1px 1px rgba(0,0,0,.7);
}
.lugar[data-lugar]:active { border-color: var(--lugar-tinte); }
/* Las ranuras de la columna: el rótulo de la vacía en su color, con sombra
   para que se lea también sobre el medallón, y un halo suave del mismo color
   alrededor de las dos —ocupadas o no—, que es lo que une la carta puesta con
   su lugar. El halo es blando a propósito: el aro de rareza de la carta es un
   `box-shadow` de un píxel a la misma altura y un anillo duro aquí se pisaría
   con él. */
.ranura[data-lugar] {
  box-shadow: 0 0 14px -2px var(--lugar-tinte);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lugar-tinte) 30%, transparent), 0 0 14px -2px var(--lugar-tinte);
}
.ranura[data-lugar]:not(.ocupada)::before {
  color: var(--lugar-tinte); font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.7);
}
.ranura[data-lugar]:not(.ocupada)::after { background: var(--lugar-tinte); opacity: .6; }

/* -------------------------------------------------------------- el hábitat
   Canal y relleno, dos piezas que repiten en horizontal porque la barra crece
   con la pantalla. El relleno se recorta con el ancho, que es lo que ya hace
   `render.js` moviendo `width`. */
.habitat-barra {
  background: url('assets/piel/habitat_canal.webp') center / 100% 100% no-repeat;
  height: 8px; border-radius: 0;
}
.habitat-barra i {
  /* `100% 100%`, no `auto 100%`: la pieza es 1000×85 y con `auto` pintaba 94 px
     fijos a 8 px de alto, así que a 70/70 la barra salía como un muñón al 30 %.
     El relleno tiene que estirarse al ancho del <i>, que es lo que render.js
     escribe en porcentaje y style.css anima con `transition: width`: así parte
     llena y baja poco a poco con cada golpe. */
  background: url('assets/piel/habitat_relleno.webp') left center / 100% 100% no-repeat !important;
  border-radius: 0;
}
/* El rival en frío: la misma pieza girada de tono, para no pedir otra. */
.habitat.rival .habitat-barra i { filter: hue-rotate(-28deg) saturate(1.25); }

/* La pila de mazo. Es el objeto MÁS animado del tablero —`enMazo` es el gesto
   que más usa el guión, seis veces: moler, buscar, reciclar, quedarse sin
   robar—. La carta de encima lleva TU dorso, el de la tienda si lo hay, y la
   del rival el suyo: en un duelo `--dorso-rival` (src/ui/tienda.js) y si no
   el de siempre, que tu dorso comprado no puede salir en su mazo. */
.pila i {
  background: #1c1610 var(--dorso, url('assets/piel/dorso.webp')) center / 100% 100% no-repeat;
  filter: var(--dorso-filtro, none);
}
.habitat.rival .pila i {
  background-image: var(--dorso-rival, url('assets/piel/dorso.webp')); filter: none;
}

/* -------------------------------------------------------------------- clima
   La tira dibujada a 12,5:1 —la franja es 348×26, 13:1—, sin texto. La primera
   pieza era 3:1 y llegaba aplastada 4,5 veces con el rótulo chafado; a 26 px
   de alto no cabe ningún texto dibujado, así que «Clima» lo sigue escribiendo
   el CSS en una línea, y el nombre de la carta puesta también. */
.franja {
  border: 0; box-shadow: none;
  background: url('assets/piel/clima.webp') center / 100% 100% no-repeat;
}
.franja-campo:empty { border: 0; min-height: 18px; flex: 1; }

/* ------------------------------------------------------------- hud y pie */
#hud, #pie {
  background:
    linear-gradient(180deg, rgba(28,21,14,.92), rgba(15,11,8,.92)),
    url('assets/piel/piedra.webp') top left / 170px auto repeat;
  border-color: rgba(217,164,65,.3);
}
#hud { box-shadow: inset 0 -1px 0 rgba(217,164,65,.14); }
#pie { box-shadow: inset 0 1px 0 rgba(217,164,65,.14); }

/* Las dos cintas de bando. La pieza trae el medallón del avatar a la izquierda
   y la placa vacía a la derecha, SIN texto: el nombre y la FASE los escribe el
   juego, y la fase —Despliegue, Combate, Descarte— no cabría en un rótulo
   dibujado. Ésa es la razón de pedirla sin rotular. */
/* En tres cortes con `border-image`, no como imagen de fondo de ancho fijo. A
   18 px de alto la pieza entera medía 88 px, y lo que hubiera al principio de
   la fila caía justo sobre su canto derecho de latón: dos aros pisándose. Con
   los cortes, el medallón queda a la izquierda a su tamaño, el canto de latón
   a la derecha, y la placa del medio se estira bajo todo lo que haya en la
   fila. Los cortes son píxeles de la pieza de 1328×273: el medallón ocupa los
   ~300 primeros, el canto los ~40 últimos. */
.hud-bando {
  border-style: solid; border-width: 0 3px 0 20px;
  border-image: url('assets/piel/cinta_bando.webp') 0 40 0 300 fill / 0 3px 0 20px / 0 stretch;
  /* Sin `min-height`: con 24 px el HUD crecía 11 y la mano bajaba de 112 a 94.
     La cinta se escala al alto natural de la fila, 18 px, y no cuesta nada. */
  padding-left: 8px; padding-right: 8px;
}
/* El reloj ya no vive en la cinta: se fue a la fila del turno, flanqueándolo
   con el del otro bando. La placa queda con el nombre a un lado y las tres
   cifras al otro, que es todo lo que cabe a 18 px de alto. */

/* ----------------------------------------------------------- los iconos
   Los cuatro del panel de estadísticas, sacados con alfa. El panel entero no
   sirve: es 5:1 y la fila del HUD mide 18 px, así que sus cajas quedarían en
   ~11 px y ningún número cabría. Los iconos sí caben a 14 px, y sustituyen al
   rótulo de texto de cada recurso. Van por orden en el marcado —trof, bio,
   mano— porque los <i> no llevan clase. */
/* 12 px y `vertical-align: middle`: con 14 y un desplazamiento negativo la
   caja de línea crecía y el HUD pasaba de 86 a 105 px. La fila mide 18 y el
   icono tiene que vivir dentro. */
.rec i {
  display: inline-block; width: 12px; height: 12px; font-size: 0;
  vertical-align: middle; margin: -2px 0 0 2px;
  background: center / contain no-repeat;
}
.hud-recs, .rec { line-height: 18px; }
/* El icono va DELANTE del número, como en la maqueta: «🏆 0/10», no «0/10 🏆».
   `.rec` es flex, así que basta con `order`. Y el «/10» del tope recupera su
   hueco: con el rótulo de texto detrás, el margen negativo lo pegaba al 0. */
.rec i { order: -1; margin: -2px 3px 0 0; }
.rec .tope { margin-left: 0; }
.rec:nth-child(1) i { background-image: url('assets/piel/ico_trofeo.webp'); }
.rec:nth-child(2) i { background-image: url('assets/piel/ico_biomasa.webp'); }
.rec:nth-child(3) i { background-image: url('assets/piel/ico_mano.webp'); }
/* El corazón, junto a la cifra de hábitat, que vive en la barra del campo. */
.habitat-num::before {
  content: ''; display: inline-block; width: 12px; height: 12px;
  vertical-align: middle; margin: -2px 3px 0 0;
  background: url('assets/piel/ico_vida.webp') center / contain no-repeat;
}

/* --------------------------------------------------------------- la mano
   Recuadro con `outline` y no con `border`: un borde sumaría 2 px al alto de
   la fila, y esos 2 px salen de la carta. */
#mano { outline: 1px dashed rgba(217,164,65,.22); outline-offset: 2px; border-radius: 6px; }

/* -------------------------------------------------------------- el botón
   Mantiene los 44 px de alto: es el mínimo táctil y no se negocia. */
#btn-listo {
  background: linear-gradient(180deg, #d9a441, #a4761f);
  color: #241a08; font-weight: 600; letter-spacing: .06em;
  box-shadow: inset 0 1px 0 rgba(255,240,200,.5), 0 1px 3px rgba(0,0,0,.6);
  border-radius: 7px;
}
#btn-listo:disabled {
  background: linear-gradient(180deg, #3a2f22, #241c15);
  color: var(--tenue); box-shadow: none;
}

/* Aquí iba un «canto» de oro arriba y abajo. Se quitó: lo que se había
   recortado de la maqueta era su BARRA DE ESTADO —con el texto «RIVAL» y las
   fichas de biomasa y trofeos— aplastada a 14 px encima del HUD, que por eso
   dejaba de verse. Si algún día se quiere un canto, hay que dibujarlo aparte. */