/* =====================================================================
   LEIZE — sistema visual compartido
   Madera, latón y hierro. Zumaia, 1986.
   Enlazar SIEMPRE después del <style> de cada página para que gane.
   ===================================================================== */

:root{
  --neg:#070603;
  --neg2:#0a0704;
  --crema:#d8c9ae;
  --ambar:#c8a05a;
  --ambar-cl:#f0dcb0;
  --gris:#6b5c46;
  --sangre:#a8452e;
  --verde:#7fa86a;

  /* maderas */
  --mad-cl:#4e3822;
  --mad:#39281700;
  --mad-1:#4a3520;
  --mad-2:#332415;
  --mad-3:#20160d;
  --mad-borde:#120c07;

  /* metales */
  --laton:#b8934e;
  --laton-osc:#6d5227;
  --hierro:#2b2b2e;
}

/* ---------------------------------------------------------- veta de madera */
.madera,
.btn,
.panel-mad{
  background-image:
    /* veta fina */
    repeating-linear-gradient(93deg,
      rgba(0,0,0,.20) 0 2px,
      rgba(255,232,190,.022) 2px 5px,
      rgba(0,0,0,.10) 5px 10px,
      rgba(255,232,190,.014) 10px 13px),
    /* nudos y manchas largas */
    repeating-linear-gradient(88deg,
      rgba(0,0,0,0) 0 34px,
      rgba(0,0,0,.13) 34px 41px),
    linear-gradient(180deg, var(--mad-1) 0%, var(--mad-2) 52%, var(--mad-3) 100%);
}

/* ================================================================ BOTONES */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:12px/1 'Courier New',monospace;
  letter-spacing:.10em; text-transform:uppercase;
  color:#e6d3ab;
  text-shadow:0 1px 0 rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.5);
  padding:11px 20px;
  border:1px solid var(--mad-borde);
  border-radius:2px;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(226,186,124,.26),      /* canto superior iluminado */
    inset 0 -3px 5px rgba(0,0,0,.55),         /* sombra interior baja */
    inset 3px 0 6px rgba(0,0,0,.28),
    inset -3px 0 6px rgba(0,0,0,.28),
    0 2px 0 #0c0805,                          /* grosor del tablón */
    0 4px 9px rgba(0,0,0,.55);
  transition:transform .06s, box-shadow .06s, filter .15s;
}
.btn::before,
.btn::after{                                   /* remaches de latón */
  content:''; position:absolute; top:50%; width:4px; height:4px;
  margin-top:-2px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e3c684, var(--laton) 45%, var(--laton-osc));
  box-shadow:0 1px 1px rgba(0,0,0,.8), inset 0 -1px 1px rgba(0,0,0,.4);
  opacity:.85;
}
.btn::before{ left:6px; }
.btn::after { right:6px; }

.btn:hover:not(:disabled){
  filter:brightness(1.18);
  color:#fbeac2;
  box-shadow:
    inset 0 1px 0 rgba(240,205,140,.36),
    inset 0 -3px 5px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(200,160,90,.28),
    0 2px 0 #0c0805,
    0 5px 14px rgba(180,130,60,.20);
}
.btn:active:not(:disabled){
  transform:translateY(2px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.7),
    inset 0 -1px 0 rgba(226,186,124,.10),
    0 0 0 #0c0805,
    0 1px 3px rgba(0,0,0,.6);
}
.btn:disabled{ opacity:.34; cursor:not-allowed; filter:saturate(.35); }

/* variantes */
.btn.sm{ padding:6px 12px; font-size:11px; letter-spacing:.06em; }
.btn.sm::before,.btn.sm::after{ display:none; }
.btn.on{
  color:#fdf0cd;
  box-shadow:
    inset 0 1px 0 rgba(240,205,140,.4),
    inset 0 -3px 5px rgba(0,0,0,.5),
    inset 0 0 0 1px var(--ambar),
    0 2px 0 #0c0805, 0 4px 12px rgba(200,160,90,.22);
}
/* hierro: acciones peligrosas */
.btn.hierro{
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,.14) 1px 4px),
    linear-gradient(180deg,#3c3c40,#26262a 55%,#17171a);
  color:#c9c4bb;
}
.btn.hierro::before,.btn.hierro::after{
  background:radial-gradient(circle at 35% 30%,#9aa0a6,#5c6166 50%,#2c2f33);
}
/* latón: la acción principal */
.btn.grande{
  font-size:16px; letter-spacing:.26em; padding:20px 46px;
  box-shadow:
    inset 0 2px 0 rgba(232,196,132,.30),
    inset 0 -5px 9px rgba(0,0,0,.6),
    0 3px 0 #0c0805,
    0 8px 22px rgba(0,0,0,.7);
}
.btn.grande::before,.btn.grande::after{ width:6px;height:6px;margin-top:-3px; }
.btn.grande::before{ left:11px } .btn.grande::after{ right:11px }

/* ================================================================ PANELES */
.panel-mad{
  border:1px solid var(--mad-borde);
  border-radius:2px;
  box-shadow:
    inset 0 1px 0 rgba(226,186,124,.14),
    inset 0 -2px 8px rgba(0,0,0,.6),
    0 3px 10px rgba(0,0,0,.55);
}
/* placa de latón para títulos */
.placa{
  display:inline-block;
  font-family:'Vasca',Georgia,serif; font-weight:400;
  letter-spacing:.20em; font-size:13px;
  color:#2a1d0d;
  padding:5px 16px;
  background:linear-gradient(180deg,#d9b877,var(--laton) 45%,#8e6d33);
  border:1px solid #56411e;
  border-radius:1px;
  text-shadow:0 1px 0 rgba(255,235,190,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,240,205,.55),
    inset 0 -2px 3px rgba(0,0,0,.28),
    0 2px 5px rgba(0,0,0,.55);
}

/* =============================================================== BARRAS */
.barra{
  position:relative; height:14px;
  background:linear-gradient(180deg,#120d08,#1e160f);
  border:1px solid var(--mad-borde);
  border-radius:1px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.75);
  overflow:hidden;
}
.barra > i{
  position:absolute; inset:0; width:0; display:block;
  transition:width .35s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 5px rgba(0,0,0,.4);
}
.barra.hp    > i{ background:linear-gradient(180deg,#c8503a,#8a2418 60%,#5e150d); }
.barra.argia > i{ background:linear-gradient(180deg,#f5da8e,#c9a04e 55%,#7a5c1e); }
.barra.carb  > i{ background:linear-gradient(180deg,#93b87c,#5d8449 60%,#38542a); }
.barra > span{
  position:absolute; right:6px; top:0; line-height:12px;
  font:10px 'Courier New',monospace; color:#f0e2c2;
  text-shadow:0 1px 2px #000,0 0 4px #000;
}

/* ============================================================ ETIQUETAS */
.etq{
  font:10px 'Courier New',monospace; letter-spacing:.18em;
  color:var(--gris); margin-bottom:3px;
}

/* ================================================================ VARIOS */
.cuerda{                                   /* separador de cuerda trenzada */
  height:6px; margin:14px 0;
  background:repeating-linear-gradient(64deg,
    #4a3a22 0 5px, #6a5433 5px 9px, #392b18 9px 14px);
  box-shadow:0 1px 3px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,225,170,.10);
  border-radius:3px; opacity:.55;
}
.vinieta{
  position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 130px 30px rgba(0,0,0,.9);
}

/* ==========================================================================
   PIEL DE MADERA Y PIEDRA
   Todo lo de arriba dibujaba los marcos con degradados y sombras de CSS.
   Ahora los dibuja el arte: cada marco es un PNG de 9 recortes —cuatro
   esquinas, cuatro lados y un centro que se descarta— estirado con
   border-image. Se ve igual a cualquier tamaño y no hay que tocar nada
   cuando cambia la caja.

   Dos pieles, y cambian solas: MADERA arriba, en Zumaia; PIEDRA abajo, en la
   cueva. La clase la pone `pintar()` en el <body>, así que el juego cambia de
   material al bajar sin que haya que duplicar una sola regla.
   ========================================================================== */
:root{
  --ui-mad-b: url('ui/boton_madera.png');
  --ui-mad-p: url('ui/panel_madera.png');
  --ui-pie-b: url('ui/btn_piedra.png');
  --ui-pie-p: url('ui/marco_piedra.png');
}
.btn, .panel-mad, .over .in.panel-mad, .slot, .barra, .gauge .b, .ic{
  image-rendering:pixelated;
}

/* ------------------------------------------------------------- BOTONES */
.btn{
  background-image:none;
  background-color:transparent;
  border-width:6px 9px 7px 9px;
  border-style:solid; border-color:transparent;
  border-image:var(--ui-mad-b) 6 9 7 9 fill stretch;
  border-radius:0;
  box-shadow:none;
  padding:5px 14px;
  min-height:26px;
  text-shadow:0 1px 0 rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.btn::before, .btn::after{ display:none; }   /* los remaches los trae el arte */
.btn:hover:not(:disabled){
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)) brightness(1.22);
  box-shadow:none;
}
.btn:active:not(:disabled){
  transform:translateY(2px);
  filter:drop-shadow(0 0 0 rgba(0,0,0,0)) brightness(.9);
  box-shadow:none;
}
.btn.sm{ padding:2px 7px; font-size:10px; min-height:22px; }
.btn.grande{ padding:9px 22px; font-size:13px; min-height:34px; }
/* El color de familia ya no pinta el borde: tiñe el texto y deja un halo.
   Sobre madera con musgo, un borde de color quedaría de plástico. */
.btn[class*="c-"]{ box-shadow:none; border-color:transparent; }
.btn[class*="c-"]{ color:color-mix(in srgb, var(--t) 45%, #f0dcb4); }
.btn[class*="c-"]:hover:not(:disabled){
  color:#fff; box-shadow:none;
  filter:drop-shadow(0 0 7px var(--g)) drop-shadow(0 2px 3px rgba(0,0,0,.6)) brightness(1.15);
}
.btn.mejor{ animation:none; filter:drop-shadow(0 0 9px rgba(240,215,138,.55)); }
body.encueva .btn{
  border-width:5px 17px 7px 17px;
  border-image:var(--ui-pie-b) 5 17 7 17 fill stretch;
  padding:5px 6px;
}

/* -------------------------------------------------------------- PANELES */
.panel-mad{
  background-image:url('ui/tex_madera.png');
  background-repeat:repeat;
  background-size:64px 64px;
  border-width:14px 16px 16px 16px;
  border-style:solid; border-color:transparent;
  border-image:var(--ui-mad-p) 14 16 16 16 stretch;
  box-shadow:none;
}
body.encueva .panel-mad{
  background-image:url('ui/tex_piedra.png');
  border-width:26px;
  border-image:var(--ui-pie-p) 26 stretch;
}
/* Las ventanas siempre en piedra: son cosas que pasan, no muebles. */
.over .in.panel-mad, #ctrlIn, #selPJIn{
  background-image:url('ui/tex_piedra.png');
  border:26px solid transparent;
  border-image:var(--ui-pie-p) 26 stretch;
}
.slot{
  border:10px solid transparent;
  border-image:url('ui/hueco_piedra.png') 9 10 10 11 fill stretch;
  background:none;
}
.slot:hover{ filter:brightness(1.2); }

/* --------------------------------------------------------------- BARRAS */
.barra{
  border:5px solid transparent;
  border-image:url('ui/barra_piedra.png') 4 8 5 8 fill stretch;
  background:none;
  height:auto; min-height:16px;
  padding:0;
}
.barra > i{ height:8px; margin:1px 0; }
.gauge .b{
  border:5px solid transparent;
  border-image:url('ui/barra_piedra.png') 4 8 5 8 fill stretch;
  background:none;
  height:auto; min-height:14px;
}
.gauge .b i{ height:6px; }

/* ---------------------------------------------------------------- ICONOS
   Un solo PNG y desplazamiento de fondo: 36 objetos y una sola petición. */
.ic{
  display:inline-block; width:22px; height:22px; flex:none;
  background-image:url('ui/iconos.png');
  background-size:176px 110px;      /* 8 x 5 casillas de 22 */
  vertical-align:-5px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.7));
}
.ic.g{ width:30px; height:30px; background-size:240px 150px; vertical-align:-8px; }
.fila .ic{ margin-right:2px; }
.est .ic{ margin-right:4px; }

/* ==========================================================================
   BOTONES CON CINTA · el color ya no sólo tiñe la letra
   Cada botón lleva una franja de su familia a la izquierda. El color dice
   QUÉ CLASE de acción es —pegar, habilidad, objeto, defensa, salir— y la
   franja es lo que se ve de reojo sin leer. Al pasar por encima la franja
   crece y el botón se ilumina desde ella, así que el resaltado también es
   posicional y no sólo de brillo.
   ========================================================================== */
.btn{ position:relative; overflow:hidden; padding-left:20px; }
.btn::before{
  content:''; display:block; position:absolute; left:0; top:0; bottom:0;
  width:7px; background:var(--t,#8a7659);
  box-shadow:0 0 8px -1px var(--t,#8a7659);
  transition:width .12s, box-shadow .12s;
}
.btn:hover:not(:disabled)::before{ width:12px; box-shadow:0 0 14px 1px var(--t,#8a7659); }
.btn:disabled::before{ filter:grayscale(1) brightness(.5); }
.btn[class*="c-"]{ color:#f0dcb4; }
.btn[class*="c-"]:hover:not(:disabled){
  color:#fff;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)) brightness(1.12);
  box-shadow:inset 26px 0 26px -22px var(--g,rgba(200,160,90,.5));
}
.btn .ica{
  width:18px;height:18px;flex:none;margin-right:2px;
  background:url('ui/iconos.png') no-repeat;background-size:144px 90px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.8));
}
/* familias — el mismo juego de color que ya había, pero ahora se ve */
.btn.c-eraso{--t:#c04030;--g:rgba(200,64,48,.55)}
.btn.c-obj  {--t:#5f9a52;--g:rgba(95,154,82,.5)}
.btn.c-hab  {--t:#4d7fa8;--g:rgba(77,127,168,.5)}
.btn.c-huir {--t:#c2a03c;--g:rgba(194,160,60,.5)}
.btn.c-def  {--t:#7b8794;--g:rgba(123,135,148,.45)}
.btn.c-jaitsi{--t:#e0d0a0;--g:rgba(240,215,138,.6)}

/* ------------------------------------------------- JAITSI, el protagonista
   Bajar es LA decisión del juego. Tenía el mismo tamaño que recargar la
   lámpara. Ahora manda en la barra: más alto, más ancho y con la cinta
   clara, que es el único botón que la lleva. */
.btn.jefe{
  padding:13px 30px 13px 26px;
  font-size:15px; letter-spacing:.20em; min-height:48px;
  color:#fbeac2;
}
.btn.jefe::before{ width:11px; }
.btn.jefe:hover:not(:disabled)::before{ width:17px; }
.btn.jefe .ica{ width:24px; height:24px; }
.btn.jefe .sub{
  display:block; font-size:9px; letter-spacing:.14em; opacity:.6; margin-top:2px;
}

/* ------------------------------------------------------------- HUD grande
   Era una tira de 32 px con los medidores apretados. Se sube a 46 y las
   barras crecen: la vida y la argia son lo que se mira sin querer, y hasta
   ahora había que buscarlas. */
#hud{ height:46px; padding:0 12px; gap:14px; }
#hud .gauge{ gap:7px; }
#hud .gauge .v{ font-size:13px; min-width:30px; }
#hud .gauge .ic svg{ width:17px; height:17px; }
#hud .gauge .b{ min-height:17px; width:clamp(74px,10vw,132px); }
#hud .gauge .b i{ height:8px; }
#hudInfo{ font-size:11px; }
#acciones{ min-height:58px; gap:9px; padding:5px 10px; }

/* ==========================================================================
   FUERA EL LATÓN
   Los rótulos de destino del mapa y los títulos del panel eran una placa
   dorada con degradado. Dos problemas: en un juego cuyo HUD ya es madera y
   piedra, el latón es un tercer material que no viene de ninguna parte; y a
   tamaño pequeño el degradado se convierte en una mancha amarilla.

   Se sustituyen por LETRA GRABADA: sin caja, grande, oscura, con un realce
   claro justo encima del trazo. Es lo que hace una inscripción en piedra
   —la luz entra por arriba y la sombra cae dentro del surco— y aquí funciona
   porque el fondo es siempre una foto clara.
   ========================================================================== */

/* ------------------------------------------------- títulos del panel */
.placa{
  display:block;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:2px 0 7px;
  font-family:'Vasca',Georgia,serif;
  font-size:clamp(17px,2.1vw,25px);
  letter-spacing:.13em;
  line-height:1.05;
  color:#efe0bd;
  /* Grabado: un filo claro arriba, el surco oscuro abajo y algo de peso. */
  text-shadow:
    0 -1px 0 rgba(255,244,214,.35),
    0  1px 0 #150e07,
    0  2px 0 #0c0805,
    0  3px 6px rgba(0,0,0,.75);
}
body.encueva .placa{ color:#d7c8a4; }
/* Una línea de cuerda debajo, que es el separador que ya existe */
.placa::after{
  content:''; display:block; margin-top:6px; height:2px;
  background:linear-gradient(90deg,transparent,#6b5220 12%,#c8a05a 50%,#6b5220 88%,transparent);
  opacity:.55;
}

/* ------------------------------------------- destinos del mapa de Zumaia */
.zona .pl{
  background:none;
  border:0;
  box-shadow:none;
  padding:0;
  font-family:'Vasca',Georgia,serif;
  font-weight:400;
  /* Cuatro de los seis destinos caen en la misma fila y muy juntos. A 26 px
     se pisan en una ventana pequeña, así que el cuerpo va atado al ancho y
     el rótulo nunca parte de línea. */
  font-size:clamp(12px,1.45vw,20px);
  letter-spacing:.08em;
  white-space:nowrap;
  color:#12100c;
  /* Sobre foto a plena luz manda el NEGRO, no el dorado: se lee sobre el
     agua, sobre el monte y sobre las fachadas blancas sin tener que meter
     una caja que tape el sitio al que vas. */
  text-shadow:
    0 -1px 0 rgba(255,255,255,.55),
    0  1px 0 rgba(255,255,255,.75),
    0  2px 5px rgba(255,255,255,.45),
    0  0   14px rgba(255,255,255,.55);
  transition:color .12s, text-shadow .12s;
}
.zona:hover .pl{
  color:#000;
  text-shadow:
    0 -1px 0 rgba(255,255,255,.7),
    0  1px 0 rgba(255,246,214,.95),
    0  0   10px rgba(255,238,190,.95),
    0  0   26px rgba(240,215,138,.8);
}
.zona.jaitsi .pl{
  color:#5a120c;
  text-shadow:
    0 -1px 0 rgba(255,255,255,.5),
    0  1px 0 rgba(255,236,214,.8),
    0  0   14px rgba(255,220,200,.7);
}
.zona .amb{
  font-size:clamp(9px,1vw,12px);
  color:#1c1a15;
  opacity:0;
  transform:translateY(-3px);
  transition:opacity .14s, transform .14s;
  text-shadow:0 1px 0 rgba(255,255,255,.8), 0 0 10px rgba(255,255,255,.75);
}
/* El texto de ambiente sólo cuando pasas por encima: el mapa se lee limpio */
.zona:hover .amb{ opacity:1; transform:translateY(0); }

/* --------------------------------------------- juntas flojas y blindadas
   El botón del miembro dice de un vistazo si ahí se pega bien o mal. Sólo
   se colorea cuando has MIRADO: si no, sería regalar la información que
   BEGIRATU tiene que ganarse. */
.btn.c-eraso.debil{ --t:#5f9a52; --g:rgba(95,200,82,.55); }
.btn.c-eraso.duro { --t:#7b6a5a; --g:rgba(140,110,90,.4); opacity:.72; }
.btn .mult{ font-size:10px; margin-left:3px; opacity:.9; font-weight:bold; }
.btn.debil .mult{ color:#9be08a; }
.btn.duro  .mult{ color:#c9a08a; }

/* ------------------------------------------------------- FICHA TÉCNICA
   El tooltip pasa de una frase suelta a una ficha: qué sube, qué baja y
   cómo queda frente a lo que llevas puesto. Verde lo que mejora, rojo lo
   que empeora, y el número al lado. */
#tip{
  max-width:330px; padding:9px 11px; line-height:1.55; text-align:left;
  background:rgba(10,8,6,.97);
  border:1px solid #3a2e1e;
  box-shadow:0 6px 22px rgba(0,0,0,.8);
  font-size:11px; color:#c9b68e;
}
#tip .tn{ font-size:12px; color:#f0d78a; letter-spacing:.06em;
  display:block; margin-bottom:3px }
#tip .td{ color:#8a7659; font-style:italic; display:block; margin-bottom:6px }
#tip .tr{ display:flex; justify-content:space-between; gap:14px }
#tip .tr b{ font-weight:normal }
#tip .sube{ color:#8ad07a }
#tip .baja{ color:#d07a6a }
#tip .neu { color:#c9b68e }
#tip .tcmp{ margin-top:6px; padding-top:5px; border-top:1px solid #2a2118;
  color:#8a7659 }

/* ------------------------------------------------------------- ESTADOS
   Lo temporal tiene que verse o no existe. Una pastilla por efecto, del
   color de lo que hace, con los turnos que le quedan. En el HUD, al lado de
   los medidores: es información de turno, no de inventario. */
#hudEst{ display:flex; gap:5px; align-items:center; margin-left:4px }
.estado{
  display:inline-flex; align-items:center; gap:4px;
  font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 7px;
  color:var(--ec,#c8a05a);
  border:1px solid color-mix(in srgb, var(--ec,#c8a05a) 45%, #120c07);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--ec,#c8a05a) 12%, transparent),
    rgba(8,6,4,.6));
  box-shadow:inset 0 0 8px -3px var(--ec,#c8a05a);
}
.estado b{ font-size:11px; color:#f0e2c0; font-weight:bold }

/* ==========================================================================
   RÓTULOS COLGADOS · el mapa deja de ser una lista de palabras
   --------------------------------------------------------------------------
   La letra grabada estaba bien pero era un cartel muerto: seis palabras
   clavadas sobre una foto. Ahora cada destino es una TABLILLA COLGADA de un
   clavo, con veta de madera dentro de la letra y un balanceo lento.

   Tres decisiones que importan:

   · La veta va DENTRO de la letra (`background-clip:text`), no detrás. Una
     caja con textura taparía el sitio al que vas, que es justo lo que
     queríamos evitar cuando se quitó el latón.
   · El halo blanco se queda. Es lo único que garantiza que se lea sobre el
     agua, sobre el monte y sobre una fachada encalada, y sigue funcionando
     con la letra transparente porque la sombra se dibuja por la forma del
     glifo, no por su color.
   · El balanceo tiene PARONES. Un vaivén continuo parece un GIF; una tablilla
     de verdad se queda quieta, la mueve el aire, y vuelve a quedarse quieta.
     Por eso los fotogramas van repetidos: 0% y 20% valen lo mismo.
   ========================================================================== */
.zona{ --osc:7s; --ret:0s; }
.zona .pl{
  position:relative;
  display:inline-block;
  padding-top:7px;                       /* sitio para el clavo y la cuerda */
  transform-origin:50% 0;                /* cuelga de arriba, como debe */
  animation:tablilla var(--osc) ease-in-out var(--ret) infinite;
  will-change:transform;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .zona .pl{
    color:transparent;
    background-image:
      /* veta fina: la madera de la tablilla */
      repeating-linear-gradient(92deg,
        rgba(255,255,255,.10) 0 1px, rgba(0,0,0,.20) 1px 2px, transparent 2px 5px),
      /* nudos y desgaste, sin repetirse a lo bruto */
      radial-gradient(120% 60% at 22% 12%, rgba(120,92,48,.55), transparent 60%),
      radial-gradient(90% 70% at 78% 88%, rgba(60,40,18,.6), transparent 65%),
      linear-gradient(178deg,#3b3227 0%, #17130d 46%, #2b2318 78%, #0f0c08 100%);
    -webkit-background-clip:text;
            background-clip:text;
  }
  /* Estas dos reglas existían antes con `color` sólido —negro al pasar por
     encima, rojo la lonja— y ganaban por especificidad, así que tapaban la
     veta justo cuando más se mira la tablilla. Se repiten aquí, con su
     textura, para que la letra siga siendo hueca. */
  .zona:hover .pl{
    color:transparent;
    background-image:
      repeating-linear-gradient(92deg,
        rgba(255,240,205,.22) 0 1px, rgba(0,0,0,.18) 1px 2px, transparent 2px 5px),
      radial-gradient(120% 60% at 22% 12%, rgba(226,176,86,.75), transparent 62%),
      linear-gradient(178deg,#6b5124 0%, #2a2013 55%, #4d3a1a 100%);
  }
  /* La lonja es la madera vieja de la puerta blanca: más roja y más sucia */
  .zona.jaitsi .pl{
    color:transparent;
    background-image:
      repeating-linear-gradient(92deg,
        rgba(255,220,200,.12) 0 1px, rgba(0,0,0,.28) 1px 2px, transparent 2px 5px),
      radial-gradient(110% 60% at 30% 15%, rgba(140,52,38,.7), transparent 62%),
      linear-gradient(178deg,#4a1a12 0%, #200b08 52%, #3a140e 100%);
  }
  .zona.jaitsi:hover .pl{
    color:transparent;
    background-image:
      repeating-linear-gradient(92deg,
        rgba(255,225,205,.24) 0 1px, rgba(0,0,0,.22) 1px 2px, transparent 2px 5px),
      radial-gradient(110% 60% at 30% 15%, rgba(206,86,62,.85), transparent 64%),
      linear-gradient(178deg,#7c2c1e 0%, #2c0f0a 55%, #562014 100%);
  }
}
/* El clavo del que cuelga, y la cuerda hasta él */
.zona .pl::before{
  content:''; position:absolute; left:50%; top:0; width:3px; height:3px;
  margin-left:-1.5px; border-radius:50%;
  background:#c9b68e;
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 6px rgba(255,255,255,.6);
}
.zona .pl::after{
  content:''; position:absolute; left:50%; top:2px; width:1px; height:6px;
  margin-left:-.5px;
  background:linear-gradient(180deg,rgba(20,14,8,.85),rgba(20,14,8,.25));
  box-shadow:0 0 4px rgba(255,255,255,.55);
}
@keyframes tablilla{
  0%,   20%  { transform:rotate(-.55deg) }
  33%        { transform:rotate(.75deg)  }
  44%,  56%  { transform:rotate(-.30deg) }   /* se para a medio camino */
  68%        { transform:rotate(.38deg)  }
  80%, 100%  { transform:rotate(-.55deg) }
}
/* Al pasar por encima el aire aprieta: más recorrido y más rápido */
.zona:hover .pl{ animation-duration:calc(var(--osc) * .42); }
.zona:hover .pl::before{ box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 10px rgba(255,236,180,.95); }
/* La lonja cuelga más pesada: menos recorrido, más lento. Es la que da miedo */
.zona.jaitsi .pl{ animation-duration:calc(var(--osc) * 1.35); }

@media (prefers-reduced-motion:reduce){
  .zona .pl{ animation:none }
}

/* ==========================================================================
   POLEA · el panel de la derecha se iza y se arría
   --------------------------------------------------------------------------
   Cambiar de sitio cambiaba el panel de golpe: el contenido viejo
   desaparecía y aparecía el nuevo en el mismo fotograma. Ahora el panel SE
   VA por arriba, como un panel de teatro tirado con soga, y el del sitio
   siguiente BAJA cuando ya está cargado.

   El detalle que lo hace creíble son los parones. Una soga no se tira de un
   tirón continuo: se tira, se afianza, se vuelve a tirar. Por eso subir son
   tres tirones con sus descansos, y bajar es soltar cuerda a trompicones
   con un rebote al asentar. Un `translateY` lineal parecería un ascensor.

   Durante el movimiento el lateral se pone POR ENCIMA del telón (67 > 66):
   así el gesto se ve, en vez de ocurrir detrás de la cortina. */
/* `overflow:hidden` sólo mientras dura el gesto: el panel tiene que
   DESAPARECER por el canto de su columna, como quien lo iza detrás de un
   telar. Sin esto se le ve subir por encima del lienzo del juego y parece un
   fallo de maquetación en vez de una polea. */
#side.polea{ position:relative; z-index:67; overflow:hidden; }
#pnl.iza{ animation:poleaSube .52s cubic-bezier(.6,.02,.9,.4) forwards; }
#pnl.arria{ animation:poleaBaja .78s cubic-bezier(.25,.9,.35,1) forwards; }

@keyframes poleaSube{
  0%          { transform:translateY(0);      opacity:1 }
  14%         { transform:translateY(4px);    opacity:1 }   /* la soga tensa */
  30%, 38%    { transform:translateY(-26%);   opacity:1 }   /* primer tirón */
  56%, 62%    { transform:translateY(-58%);   opacity:.9 }  /* segundo */
  100%        { transform:translateY(-118%);  opacity:0 }
}
@keyframes poleaBaja{
  0%          { transform:translateY(-118%);  opacity:0 }
  26%, 33%    { transform:translateY(-52%);   opacity:.85 } /* suelta y frena */
  55%, 60%    { transform:translateY(-14%);   opacity:1 }   /* otra vez */
  82%         { transform:translateY(3px)     }             /* pasa de largo */
  92%         { transform:translateY(-2px)    }             /* y se asienta */
  100%        { transform:translateY(0);      opacity:1 }
}
@media (prefers-reduced-motion:reduce){
  #pnl.iza, #pnl.arria{ animation:none }
}

/* ==========================================================================
   AVISOS DE GUÍA
   --------------------------------------------------------------------------
   Un juego que hay que explicar en un manual está mal explicado, pero uno que
   no explica nada esconde la mitad de lo que tiene. El término medio es
   decirlo CUANDO PASA y no antes: la primera vez que ganas pesetas, la
   primera vez que se te rompe algo, la primera vez que tienes puntos sin
   repartir.

   Tres reglas, y las tres son de no molestar:

   · No paran el juego ni roban el foco. Aparecen en una esquina y ya.
   · Se van solos a los cuatro segundos — salvo que pases el ratón por
     encima, porque si no el botón de «más detalles» sería un botón que hay
     que cazar.
   · Cada uno sale UNA VEZ por partida. Un consejo repetido es ruido.
   ========================================================================== */
#guia{
  position:fixed; right:14px; bottom:44px; z-index:64;
  display:flex; flex-direction:column-reverse; gap:8px;
  pointer-events:none;            /* el hueco vacío no se come los clics */
  max-width:min(340px,42vw);
}
.aviso-guia{
  pointer-events:auto;
  background:linear-gradient(180deg,rgba(18,14,9,.97),rgba(10,8,5,.97));
  border:1px solid #3a2e1e;
  border-left:3px solid #c8a05a;
  box-shadow:0 8px 26px rgba(0,0,0,.8);
  padding:9px 11px 8px;
  color:#c9b68e; font-size:11px; line-height:1.5;
  animation:guiaEntra .34s cubic-bezier(.2,.9,.3,1);
}
.aviso-guia.sale{ animation:guiaSale .3s ease-in forwards; }
.aviso-guia .ag-t{
  display:flex; align-items:center; gap:6px;
  color:#f0d78a; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:4px;
}
.aviso-guia .ag-t img{ width:16px; height:16px; image-rendering:pixelated }
.aviso-guia .ag-x{
  margin-left:auto; cursor:pointer; color:#6a5f4c; font-size:13px; line-height:1;
}
.aviso-guia .ag-x:hover{ color:#c9b68e }
.aviso-guia .ag-mas{
  display:block; width:100%; margin-top:7px; padding:4px 6px;
  background:rgba(200,160,90,.10); border:1px solid #4a3a20;
  color:#c8a05a; font-family:inherit; font-size:10px; letter-spacing:.08em;
  cursor:pointer; text-align:left;
}
.aviso-guia .ag-mas:hover{ background:rgba(200,160,90,.22); color:#f0d78a }
/* La barrita que se vacía: el aviso dice cuánto le queda en vez de
   desaparecer de golpe y dejarte con la duda de si lo has imaginado. */
.aviso-guia .ag-bar{ height:2px; background:#2a2118; margin-top:7px }
.aviso-guia .ag-bar i{ display:block; height:100%; background:#c8a05a;
  transform-origin:left; animation:guiaBarra 4s linear forwards }
.aviso-guia:hover .ag-bar i{ animation-play-state:paused }

@keyframes guiaEntra{
  from{ opacity:0; transform:translateX(26px) }
  to  { opacity:1; transform:translateX(0) }
}
@keyframes guiaSale{
  to{ opacity:0; transform:translateX(26px) }
}
@keyframes guiaBarra{ from{ transform:scaleX(1) } to{ transform:scaleX(0) } }

@media (prefers-reduced-motion:reduce){
  .aviso-guia{ animation:none }
  .aviso-guia .ag-bar i{ animation-duration:4s }
}

/* ==========================================================================
   WIKI
   --------------------------------------------------------------------------
   Índice a la izquierda, entrada a la derecha. Sin imágenes grandes: texto e
   iconos del propio juego, que es lo que se puede leer de un vistazo y lo que
   no hay que volver a dibujar cada vez que cambie una mecánica.
   ========================================================================== */
.wikiIn{ width:min(880px,94vw); max-height:88vh; display:flex; flex-direction:column }
.wikiCab{ display:flex; align-items:center; gap:10px; margin-bottom:10px }
.wikiCab h2{ flex:1; margin:0 }
.wikiCuerpo{ display:flex; gap:14px; min-height:0; flex:1 }
.wikiIndice{
  flex:0 0 190px; overflow-y:auto; padding-right:8px;
  border-right:1px solid #2a2118;
}
.wikiIndice .wsec{
  font-size:9px; letter-spacing:.16em; color:#6a5f4c; text-transform:uppercase;
  margin:10px 0 4px;
}
.wikiIndice .wsec:first-child{ margin-top:0 }
.wikiIndice a{
  display:flex; align-items:center; gap:6px;
  padding:3px 6px; color:#c9b68e; font-size:11px; cursor:pointer;
  border-left:2px solid transparent;
}
.wikiIndice a:hover{ background:rgba(200,160,90,.10); color:#f0d78a }
.wikiIndice a.act{ border-left-color:#c8a05a; background:rgba(200,160,90,.14);
  color:#f0d78a }
.wikiIndice a img{ width:16px; height:16px; image-rendering:pixelated }

.wikiTexto{ flex:1; overflow-y:auto; padding-right:6px;
  color:#c9b68e; font-size:12px; line-height:1.7 }
.wikiTexto h3{ display:flex; align-items:center; gap:8px;
  color:#f0d78a; font-size:15px; letter-spacing:.08em; margin-bottom:10px }
.wikiTexto h3 img{ width:24px; height:24px; image-rendering:pixelated }
.wikiTexto p{ margin-bottom:10px }
.wikiTexto b{ color:#e8d9b4; font-weight:normal }
.wikiTexto .wl{ color:#c8a05a; cursor:pointer; border-bottom:1px dotted #6b5220 }
.wikiTexto .wl:hover{ color:#f0d78a; border-bottom-color:#c8a05a }
.wikiTexto .wver{ margin-top:14px; padding-top:9px; border-top:1px solid #2a2118 }
.wikiTexto .wver span{ font-size:9px; letter-spacing:.16em; color:#6a5f4c;
  text-transform:uppercase; margin-right:8px }
@media (max-width:720px){
  .wikiCuerpo{ flex-direction:column }
  .wikiIndice{ flex:0 0 auto; max-height:26vh; border-right:0;
    border-bottom:1px solid #2a2118; padding-right:0 }
}

/* ==========================================================================
   TÍTULOS QUE NO SE SALEN
   --------------------------------------------------------------------------
   ARRITOKIETA y PRACTICANTE se salían del panel. El cuerpo de la letra está
   atado al ancho de la ventana (`2.1vw`), que funciona para ZUMAIA o BARRA
   pero no para una palabra de doce letras con `letter-spacing`.

   Se arregla donde está el problema —la palabra larga— y no bajando el
   cuerpo de todos los títulos, que dejaría los cortos raquíticos. La clase
   la pone el propio generador contando letras, así que vale también para las
   que vengan: nadie tiene que acordarse de nada.

   El `letter-spacing` baja además del cuerpo. Es lo que más ancho añade sin
   que se note al mirar, y por eso es lo primero que hay que quitar.
   ========================================================================== */
.placa.larga{
  font-size:clamp(13px,1.5vw,18px);
  letter-spacing:.07em;
}
.placa.muylarga{
  font-size:clamp(11px,1.25vw,15px);
  letter-spacing:.04em;
}

/* ==========================================================================
   LA TIENDA
   --------------------------------------------------------------------------
   La trastienda del Metro era una lista de filas de treinta píxeles de alto:
   icono minúsculo, nombre, precio, y un botón «+». Con doce productos había
   que leer doce renglones para saber qué hay, y el icono —que es la parte
   que se reconoce de un vistazo— era lo más pequeño de la fila.

   Ahora es una REJILLA DE CUATRO con el icono grande y cuadrado. Se ve lo
   que hay sin leer, que es como se mira un escaparate.

   El panel se ensancha al doble SÓLO en la tienda (`body.tienda`): en la
   cueva ese ancho se lo estaría quitando a la galería, que es donde se
   juega.
   ========================================================================== */
body.tienda #main{ grid-template-columns:1fr clamp(360px,34vw,520px) }

.tiendaRej{
  display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:4px;
}
.prod{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 3px 5px;
  background:linear-gradient(180deg,rgba(40,32,22,.55),rgba(16,12,8,.75));
  border:1px solid #2a2118;
  color:#c9b68e; font-family:inherit; font-size:9px; line-height:1.25;
  cursor:pointer; text-align:center;
  /* Sin transición al pulsar: lo que confirma la compra es el icono que sale
     volando, no que el botón se ponga de otro color medio segundo. */
  transition:border-color .12s, background .12s;
}
.prod:hover{ border-color:#c8a05a; background:linear-gradient(180deg,
  rgba(70,54,30,.6),rgba(20,15,9,.8)) }
.prod .ic{ width:38px; height:38px; background-size:304px 190px;
  vertical-align:0; margin:0 }
.prod .pn{ color:#e8d9b4; font-size:9px; letter-spacing:.04em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.2em }
.prod .pp{ color:#f0d78a; font-size:11px }
.prod .pq{ position:absolute; top:3px; right:4px; color:#6a5f4c; font-size:9px }
/* LO QUE NO PUEDES PAGAR se apaga entero y lo dice el precio en rojo. Antes
   sólo se desactivaba el «+», así que el producto parecía disponible y el
   botón parecía roto. */
.prod.nopuedo{
  opacity:.42; filter:grayscale(1); cursor:not-allowed;
  border-color:#1e1811;
}
.prod.nopuedo:hover{ border-color:#3a2e1e; background:linear-gradient(180deg,
  rgba(40,32,22,.55),rgba(16,12,8,.75)) }
.prod.nopuedo .pp{ color:#a05a4a }

/* --------------------------------------------------- el icono que se va
   Al comprar, una copia del icono sale del producto y cae al centro de
   abajo, como cuando arrastras algo a la papelera. Es la confirmación:
   dice QUÉ has comprado y HACIA DÓNDE ha ido —la mochila está abajo— sin
   escribir una línea de texto.

   Va en `position:fixed` y fuera de la rejilla a propósito: si estuviera
   dentro, el repintado del panel al descontar las pesetas se lo llevaría por
   delante a mitad de vuelo. */
/* EL RECORDATORIO DE LO PENDIENTE.
   Un chip que late despacio mientras te quedan puntos por gastar. Late, no
   parpadea: lo segundo es una alarma y esto no es urgente, sólo es algo que
   se te ha olvidado. Se apaga solo cuando no queda nada, así que nunca hay
   que acordarse de quitarlo. */
.chip.pendiente{
  cursor:pointer; color:#f0d78a; border-color:#6a5320;
  background:rgba(60,45,12,.55);
  animation:latidoPend 2.2s ease-in-out infinite;
}
.chip.pendiente b{color:#fff}
@keyframes latidoPend{
  0%,100%{ box-shadow:0 0 0 0 rgba(240,215,138,0) }
  50%    { box-shadow:0 0 10px 1px rgba(240,215,138,.45) }
}
@media (prefers-reduced-motion:reduce){ .chip.pendiente{ animation:none } }

.vuelaCompra{
  position:fixed; z-index:70; pointer-events:none;
  animation:vuelaCompra .62s cubic-bezier(.45,.05,.55,.95) forwards;
}
@keyframes vuelaCompra{
  0%  { transform:translate(0,0) scale(1);      opacity:1 }
  22% { transform:translate(var(--dx3),var(--dy3)) scale(1.25); opacity:1 }
  100%{ transform:translate(var(--dx),var(--dy)) scale(.35);    opacity:0 }
}
@media (prefers-reduced-motion:reduce){ .vuelaCompra{ animation-duration:.01s } }

/* ==========================================================================
   TÁCTIL · iPad y tabletas
   --------------------------------------------------------------------------
   Regla número uno: en un Mac esto no existe. Todo cuelga de `body.tactil`,
   que se pone SÓLO si el aparato tiene puntero grueso. Si un día se cambia
   de idea, se quita la clase y el juego vuelve a ser exactamente el de antes.

   Regla número dos: nada de un mando virtual encima del juego. Los botones
   translúcidos de cruceta tapan justo la esquina por la que viene el bicho.
   Aquí se toca DONDE SE QUIERE IR, que es lo que hace un dedo cuando nadie
   le ha enseñado nada.
   ========================================================================== */

/* Sin rebote elástico ni zoom por doble toque: en un juego, los dos son
   accidentes esperando a pasar en mitad de una pelea. */
body.tactil{ overscroll-behavior:none; touch-action:manipulation;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent }

/* Las zonas de andar de la calle. Sin dibujo: se sienten, no se ven. Sólo
   dan una señal al tocarlas, para que la primera vez se entienda. */
.zonaTac{
  position:absolute; top:0; bottom:0; width:34%; z-index:5;
  display:none; background:transparent;
  transition:background .18s;
}
body.tactil.encalle .zonaTac{ display:block }

/* ------------------------------------------------------------- EL MANDO
   Abajo a la izquierda, donde cae el pulgar sin mover la mano. Y SÓLO en
   táctil: en un ordenador ni se dibuja ni ocupa sitio.

   Va translúcido a propósito. Es una ayuda que hay que tener a mano, no un
   elemento de la escena: si pesara lo mismo que el juego, en una pantalla de
   móvil —que ya va justa— se llevaría media cueva por delante. */
#joy{
  display:none; position:absolute; z-index:6;
  left:14px; bottom:14px; width:116px; height:116px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(28,23,17,.50) 0 62%, rgba(28,23,17,.26) 100%);
  border:1px solid rgba(200,160,90,.34);
  box-shadow:0 3px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(226,186,124,.10);
  touch-action:none;              /* el dedo mueve el palo, no la página */
  opacity:.46; transition:opacity .16s;
}
body.tactil #joy{ display:block }
#joy.on{ opacity:.86 }
/* La cruz, muy tenue: dice que se mueve en cuatro direcciones sin gritarlo. */
#joy::before, #joy::after{
  content:''; position:absolute; background:rgba(226,186,124,.13);
}
#joy::before{ left:50%; top:16%; bottom:16%; width:1px; transform:translateX(-50%) }
#joy::after{ top:50%; left:16%; right:16%; height:1px; transform:translateY(-50%) }
#joyPalo{
  position:absolute; left:50%; top:50%; width:46px; height:46px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:linear-gradient(180deg,#3a2f20,#1a140d);
  border:1px solid rgba(226,186,124,.42);
  box-shadow:0 2px 8px rgba(0,0,0,.7), inset 0 1px 0 rgba(226,186,124,.22);
  pointer-events:none;            /* el que escucha es el aro, no el palo */
}
/* En un móvil en horizontal la escena es baja: el mando encoge para no
   comerse el suelo de la cueva, que es por donde se anda. */
@media (max-height:520px){
  #joy{ width:92px; height:92px; left:10px; bottom:10px }
  #joyPalo{ width:38px; height:38px }
}
.zonaTac.izq{ left:0 }
.zonaTac.der{ right:0 }
.zonaTac.on{ background:linear-gradient(90deg,rgba(240,215,138,.13),transparent) }
.zonaTac.der.on{ background:linear-gradient(270deg,rgba(240,215,138,.13),transparent) }
/* La flecha aparece al tocar y se va: enseña sin estorbar. */
.zonaTac::after{
  content:''; position:absolute; top:50%; width:0; height:0; opacity:0;
  border:14px solid transparent; transition:opacity .18s;
}
.zonaTac.izq::after{ left:16px; border-right-color:rgba(240,215,138,.75) }
.zonaTac.der::after{ right:16px; border-left-color:rgba(240,215,138,.75) }
.zonaTac.on::after{ opacity:1 }

/* En tableta, el HUD y los botones necesitan dedo, no ratón: 44 px es el
   mínimo que Apple lleva veinte años repitiendo, y tiene razón. */
body.tactil .btn{ min-height:44px; padding:9px 14px }
body.tactil .btn.sm{ min-height:38px }
body.tactil .prod{ min-height:96px }
body.tactil .wikiIndice a{ padding:7px 8px }
body.tactil .zona{ padding:6px }

/* El aviso de «toca aquí para entrar» del muelle, que en tableta sustituye
   a la tecla E. Va sobre el portal, como el de teclado. */
body.tactil .pistaTac{ display:block }
.pistaTac{
  display:none; position:absolute; z-index:6; pointer-events:none;
  padding:5px 9px; background:rgba(8,6,5,.86); border:1px solid #c8a05a;
  color:#f0d78a; font-size:11px; letter-spacing:.06em; white-space:nowrap;
  transform:translate(-50%,0);
}

/* ==========================================================================
   LA PESETA
   --------------------------------------------------------------------------
   Es la única cifra que sale en todas las pantallas —la barra, la tienda, el
   botín, las recompensas, la ficha de cada objeto— y era lo único que se
   escribía con letras: «340 pta».

   Va como archivo suelto y no dentro del atlas de iconos a propósito:
   `ui/iconos.png` lo regenera una herramienta a partir de una lámina, así que
   lo que se metiera ahí se perdería en la siguiente pasada.

   Y no se reutiliza el icono de `moneda`, que ya es un objeto del juego —la
   moneda del cepillo, la que se lanza en combate—. Dos cosas distintas con el
   mismo dibujo es peor que no tener dibujo.
   ========================================================================== */
.pta{
  display:inline-block; vertical-align:-2px;
  width:13px; height:13px; margin:0 3px 0 1px;
  background:url('ui/pta.png') no-repeat center/contain;
  image-rendering:pixelated;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.7));
}
/* En los sitios donde la cifra manda —el HUD, el total de la venta— la moneda
   crece con ella en vez de quedarse de adorno pequeño al lado. */
.chip .pta{ width:15px; height:15px; vertical-align:-3px }
.pta.g{ width:18px; height:18px; vertical-align:-4px }
body.tactil .pta{ width:15px; height:15px }

/* ==========================================================================
   MÓVIL EN HORIZONTAL
   --------------------------------------------------------------------------
   Un iPhone tumbado son unos 850 × 390. El ancho da igual — es más que un
   portátil pequeño — y **el problema es la altura**: 390 px para barra
   superior, escena, barra de acciones y registro.

   Por eso esto va por ALTURA y no por anchura. La regla de 820 px de ancho no
   se dispara en un móvil tumbado (850 > 820) y sin embargo es ahí donde más
   falta hace apretar.

   Lo que se hace, en orden de lo que más sitio devuelve:
     · el registro se va — es lo único que se puede leer después;
     · la barra de arriba adelgaza y pierde lo que se repite;
     · el panel lateral pasa a cajón, como en vertical;
     · y los botones se quedan tocables, que es lo que no se puede sacrificar.

   Nada de esto existe por encima de 520 px de alto, o sea que en un Mac no
   cambia una sola línea.
   ========================================================================== */
@media (max-height:520px){
  /* PRESUPUESTO DE ALTURA. Un móvil tumbado son unos 400 px de alto y hay que
     repartirlos a mano, porque si se deja que cada trozo pida lo suyo, la
     escena —que es el juego— se queda con lo que sobre. Y lo que sobraba eran
     tres dedos.

     El reparto, medido sobre 400:
        barra de arriba   24
        ESCENA            todo lo demás  ← manda
        medidores         26
        acciones          46 en UNA fila
        huecos            ~10

     La escena va con `flex:1` y `min-height:0`. Sin el `min-height:0` un hijo
     de flex se niega a encoger por debajo de su contenido y devuelve todo el
     apretón a los demás: es el motivo clásico de que estas cuentas no salgan.
  */
  #app{ padding:3px; gap:2px }
  #main{ grid-template-columns:1fr; min-height:0 }
  #escena{ min-height:0 }

  /* La barra de arriba en UNA línea que no se corta. Lo que no cabe se
     desplaza con el dedo en vez de quedarse fuera de la pantalla — que era lo
     que pasaba con «PROF · SIN EXTRAER», que se salía por la derecha. */
  #top{
    min-height:0; padding:1px 3px; gap:5px;
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none;
  }
  #top::-webkit-scrollbar{ display:none }
  #top>*{ flex:none }
  #top .logo-min{ height:15px }
  #top .lugar{ font-size:9px; letter-spacing:.10em }
  #top .chip{ padding:1px 4px; font-size:9px }
  #top .sep{ display:none }
  /* Se van los que se repiten en el panel: el nombre y la experiencia. */
  #cPJ, #cXp{ display:none }

  /* EL REGISTRO SE QUEDA. Estaba escondido en pantalla baja, y era la decisión
     equivocada: el registro es lo ÚNICO que dice qué acaba de pasar —qué has
     cogido, cuánto te han quitado, por qué se ha ido la luz— y en un móvil, que
     es donde menos se ve el resto, es donde más falta hace.

     Cabe porque no ocupa sitio propio: se apoya sobre la escena, abajo, con
     fondo translúcido y sólo tres renglones. La escena sigue teniendo toda la
     pantalla; el texto flota encima de la parte de abajo, que es la que menos
     información lleva.

     Y con el panel lateral abierto se va, porque ahí dentro ya hay dónde mirar
     y dos cosas que leer a la vez no son ninguna. */
  /* Sólo cuando de verdad está colgado de la escena. Con el panel abierto
     vuelve a su columna y a ser una caja normal. */
  #log.flotante{
    display:block;
    position:absolute; left:6px; right:6px; bottom:4px; z-index:12;
    height:auto; max-height:32%;
    padding:5px 8px;
    font-size:11px; line-height:1.4;
    background:linear-gradient(180deg,rgba(6,5,3,0),rgba(6,5,3,.86) 22%);
    border:0; border-radius:2px;
    pointer-events:none;                /* no roba el toque a lo de debajo */
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%);
            mask-image:linear-gradient(180deg,transparent,#000 26%);
  }
  /* Sólo lo último. Un registro largo tapando media escena no es un registro:
     es una cortina. Los renglones viejos se ocultan y se recuperan abriendo el
     panel, donde el registro vuelve a su sitio y se puede recorrer entero. */
  #log.flotante p{ display:none }
  #log.flotante p:nth-last-child(-n+3){ display:block }
  /* La escena es quien lo sostiene: sin esto, `position:absolute` se colgaría
     de la página entera y el registro acabaría en una esquina. */
  #escena{ position:relative }

  /* Los medidores, en una tira fina. */
  #hud{ height:26px }
  .gauge .v{ font-size:11px; min-width:18px }
  .gauge .ic{ width:13px; height:13px }
  .gauge .b{ width:34px }

  /* LAS ACCIONES, EN UNA SOLA FILA que se desplaza a lo ancho. Siete botones
     a tamaño de dedo no caben en 850 px, y en dos filas se comían un tercio
     de la pantalla. En una fila que se arrastra caben todos y la escena se
     queda con su sitio. */
  #acciones{
    min-height:0; gap:4px; flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
    padding-bottom:2px;
    /* Y que el último botón no quede debajo de la barra de gestos. */
    padding-bottom:max(2px,env(safe-area-inset-bottom));
    scroll-padding-inline:8px;
  }
  #acciones::-webkit-scrollbar{ display:none }
  #acciones>*{ flex:none }
  .btn{ min-height:40px; padding:5px 9px; font-size:9px; letter-spacing:.08em }
  .btn.sm{ min-height:36px; padding:4px 7px; font-size:9px }
  .btn.jefe{ min-height:44px; padding:5px 11px }
  .btn .ica{ width:15px; height:15px }
  .btn .sub{ font-size:8px }
  .nota{ display:none }          /* la ayuda de teclado, en un móvil, sobra */

  /* El panel, cajón. */
  #side{
    position:fixed; top:0; right:0; bottom:0; width:min(300px,64vw);
    z-index:60; padding:8px; gap:6px;
    background:linear-gradient(180deg,rgba(14,11,7,.98),rgba(8,6,4,.98));
    border-left:1px solid #3a2e1e;
    box-shadow:-14px 0 34px rgba(0,0,0,.7);
    transform:translateX(101%);
    transition:transform .26s cubic-bezier(.25,.9,.35,1);
    overflow-y:auto;
  }
  body.panelOn #side{ transform:translateX(0) }
  /* El asa SIGUE SIENDO GRANDE aquí. Antes esta regla la encogía a 22×64 y
     deshacía justo lo que se acababa de arreglar: en la pantalla donde más
     falta hace acertarla con el dedo, era donde más pequeña se ponía. */
  #asaPanel{ display:flex; width:30px; min-height:84px }
  body.panelOn #asaPanel{ right:min(300px,64vw) }

  /* El reloj de bolsillo es precioso y aquí es un lujo de 110 px. */
  #reloj{ width:52px; left:4px; top:4px }
  #mini{ width:62px; top:4px; right:4px }

  /* Los rótulos del mapa de Zumaia: a esta altura se pisaban unos a otros. */
  .zona .pl{ font-size:10px; letter-spacing:.04em; padding-top:5px }
  .zona .amb{ display:none }
  .misiones{ font-size:8px; padding:5px 6px; width:20% }
  .jaitsiG .jt{ font-size:13px }

  /* Diálogos y menús a pantalla casi completa: con 400 px de alto, un panel
     centrado con márgenes deja el texto en una rendija. */
  #cine .caja{ padding:7px 11px }
  #cine .tx{ font-size:12px }
  #cine .tr{ font-size:10px }
  #cine .actor{ max-height:58vh }
  .over .in{ max-height:95vh; padding:9px 11px }
  .wikiIn{ max-height:95vh }
  .wikiCuerpo{ gap:8px }
  .wikiIndice{ flex:0 0 132px }
  .wikiTexto{ font-size:11px; line-height:1.55 }
  .toast{ font-size:10px; padding:5px 8px }
  #guia{ bottom:52px; max-width:min(280px,52vw) }
  .aviso-guia{ font-size:10px }
}

/* Aviso de girar el móvil. En vertical un móvil deja el juego en una
   rendija, y antes de romper la maquetación para un caso que no toca, se
   pide girar — que es lo que hace todo juego con esta forma. */
#gira{
  display:none; position:fixed; inset:0; z-index:90;
  background:#0a0806; color:#c9b68e;
  align-items:center; justify-content:center; text-align:center;
  font-size:13px; letter-spacing:.1em; padding:24px;
}
#gira i{ display:block; font-size:34px; margin-bottom:14px;
  animation:giraGiro 2.2s ease-in-out infinite }
@keyframes giraGiro{ 0%,60%,100%{transform:rotate(0)} 80%{transform:rotate(-90deg)} }
@media (max-width:560px) and (orientation:portrait){
  body.tactil #gira{ display:flex }
}

/* ==========================================================================
   EL CÓDICE
   --------------------------------------------------------------------------
   Ventana grande y a dos columnas: la lista a la izquierda y el expositor a
   la derecha. El sprite manda —ocupa la mitad de la ficha— porque el sprite
   es lo que se ha ganado; los números son el pie de foto.

   Lo bloqueado no se oculta: se enseña en negro. Un hueco no dice nada; una
   silueta apagada dice «esto existe y no lo has visto todavía», que es lo
   que hace que apetezca bajar otra vez.
   ========================================================================== */
.codiceIn{max-width:min(94vw,880px);width:100%}
.codiceCuerpo{display:grid;grid-template-columns:minmax(150px,220px) 1fr;
  gap:14px;text-align:left;align-items:start}
.codiceRej{display:flex;flex-direction:column;gap:4px;max-height:60vh;overflow-y:auto}
.codC{border:1px solid #2a2118;background:#0b0805;padding:7px 9px;cursor:pointer;
  font-size:10.5px;letter-spacing:.1em;color:#c9b68e;transition:background .15s}
.codC:hover{background:#171008}
.codC.sel{border-color:#6a5320;background:#1d1409;color:#fff}
/* Bloqueado: negro, sin nombre y sin cursor de mano. Nada que pulsar. */
.codC.bloq{color:#3a3128;background:#070504;border-color:#1a150f;cursor:default}
.codC.bloq:hover{background:#070504}

.codiceFicha{min-height:280px}
.codiceFicha h3{font-size:15px;letter-spacing:.2em;color:#fff;margin:10px 0 4px}
.codDesc{font-size:11px;color:#9a8768;line-height:1.7;margin-bottom:10px}
.codVacio{color:#463c2c;font-size:11px;text-align:center;padding:60px 0;
  letter-spacing:.14em}

/* EL EXPOSITOR. Fondo de vitrina, el sprite grande y sin suavizar, y el gif
   entrando al pasar por encima sin que la caja dé un salto: por eso el alto
   es fijo y la imagen se ajusta dentro. Un expositor que cambia de tamaño al
   rozarlo es un expositor que se pelea contigo. */
.codExpo{position:relative;height:210px;display:flex;align-items:center;
  justify-content:center;background:
    radial-gradient(ellipse at 50% 60%,#1d1610 0%,#0a0705 70%);
  border:1px solid #2a2118}
.codExpo img{max-height:180px;max-width:80%;image-rendering:pixelated}
/* Los dos botones de ataque, debajo del sprite. Discretos: la ficha es para
   leer, y esto es un extra que se pulsa cuando apetece. */
/* La ranura, dentro de la ficha que sale al pasar por encima. Va en otro
   color y con más espacio entre letras porque es una etiqueta, no texto: se
   busca de un vistazo y no se lee. */
.zn{color:#c8a05a;letter-spacing:.1em;font-size:.92em}
/* Los mandos de volumen. Tres filas iguales: nombre, barra y cifra. La cifra
   va a la derecha y con ancho fijo para que la barra no baile al pasar de
   9 % a 100 %. */
/* ------------------------------------------------------------- EL ARMARIO
   Muñeco al centro y dos ranuras a cada lado. Es la disposición de siempre en
   un RPG y funciona por una razón concreta: el ojo va al centro, ve cómo
   queda, y las ranuras están donde la ropa se lleva —lo de la cabeza arriba,
   lo de los pies abajo—, así que no hay que leerlas para encontrarlas. */
.armario{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;
  align-items:center;margin:2px 0 8px}
.armCol{display:flex;flex-direction:column;gap:6px;min-width:0}
.armMedio{position:relative;display:flex;flex-direction:column;align-items:center}
#armCv{width:104px;height:104px;image-rendering:pixelated;
  background:radial-gradient(ellipse at 50% 86%,rgba(200,160,90,.13),transparent 62%)}
.armGiro{padding:1px 8px;font-size:10px;opacity:.7;margin-top:-2px}
.armGiro:hover{opacity:1}
.armR{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  width:100%;min-width:0;padding:5px 7px;cursor:pointer;text-align:left;
  background:rgba(20,17,14,.55);border:1px solid #2e2820;color:#8a7f6a}
.armR:hover:not(:disabled){border-color:#c8a05a;background:rgba(40,33,24,.7)}
.armR.on{border-color:#6b5c46;color:#e8d9b4}
.armR.armVacia{opacity:.42;cursor:default}
.armR .armIco{width:14px;height:14px;color:#c8a05a;flex:0 0 auto}
.armR .armZ{font-size:8px;letter-spacing:.12em;color:#6b5c46}
/* El nombre puede ser largo —«Gorro preindoeuropeo»— y la ranura es estrecha.
   Que parta por palabras antes que desbordar por el canto. */
.armR .armN{font-size:10px;line-height:1.15;color:inherit;
  overflow-wrap:anywhere;word-break:break-word}
@media (max-width:760px){
  #armCv{width:84px;height:84px}
  .armR{padding:7px}          /* dedo */
  .armR .armN{font-size:9px}
}
.volFila{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.volFila .volN{flex:0 0 70px;font-size:10px;color:#8a7f6a;
  letter-spacing:.08em;text-transform:uppercase}
.volFila input[type=range]{flex:1;min-width:0;height:14px;accent-color:#c8a05a;
  background:transparent;cursor:pointer}
.volFila .volC{flex:0 0 38px;text-align:right;font-size:10px;color:#c8a05a}
@media (max-width:760px){
  .volFila{gap:6px}
  .volFila .volN{flex-basis:56px;font-size:9px}
  .volFila input[type=range]{height:22px}   /* dedo, no ratón */
}
.codBotones{display:flex;gap:6px;justify-content:center;margin:-4px 0 8px}
.codBotones .btn{font-size:9px;padding:3px 9px;opacity:.82}
.codBotones .btn:hover{opacity:1}
.codHint{position:absolute;bottom:5px;right:7px;font-size:8.5px;
  letter-spacing:.12em;color:#5a4c38;pointer-events:none}
.codExpo:hover .codHint{color:#8a7659}

.codDeb{display:flex;justify-content:space-between;gap:10px;font-size:10.5px;
  color:#8a7659;border-top:1px solid #1c1610;padding-top:5px;margin-top:5px}
.codDeb>div{color:#c9b68e;text-align:right}
.codPend{color:#5a4c38;font-style:italic}

@media (max-height:520px){
  .codiceCuerpo{grid-template-columns:minmax(120px,160px) 1fr;gap:9px}
  .codExpo{height:130px}
  .codExpo img{max-height:112px}
  .codiceRej{max-height:44vh}
}


/* ============================================================== TUTORIAL
   Un velo por encima de todo, con un agujero donde está lo que se explica.
   El agujero NO se hace con una máscara: se hace con una sombra enorme hacia
   fuera del recuadro, que es una línea de CSS en vez de un SVG, y se ve igual.
   Lo importante es que el velo no deja pulsar nada de debajo — si dejara, se
   avanzaría el tutorial y se pulsaría el botón a la vez. */
#tuto{position:fixed;inset:0;z-index:9000;display:none}
#tuto.on{display:block}
#tuto.pregunta{background:rgba(6,5,8,.82);
  display:flex;align-items:center;justify-content:center}
#tuto .tu-caja{max-width:420px;padding:20px 22px;text-align:center}
#tuto .tu-caja h2{margin:0 0 8px;font-size:15px;letter-spacing:.06em}
#tuto .tu-caja p{margin:0 0 16px;font-size:12px;color:#a89a80;line-height:1.5}
#tuto .tu-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#tuto .tu-foco{position:fixed;border:2px solid #c8a05a;border-radius:3px;
  box-shadow:0 0 0 4000px rgba(6,5,8,.80), 0 0 18px rgba(200,160,90,.55) inset;
  pointer-events:none;animation:tuLate 1.6s ease-in-out infinite}
@keyframes tuLate{0%,100%{border-color:#c8a05a}50%{border-color:#f0d79a}}
#tuto .tu-msg{position:fixed;max-width:300px;padding:11px 13px;
  background:#17130e;border:1px solid #4a4136;
  box-shadow:0 6px 22px rgba(0,0,0,.6);pointer-events:none}
#tuto .tu-msg p{margin:0 0 7px;font-size:12px;line-height:1.5;color:#e8d9b4}
#tuto .tu-msg span{font-size:9px;letter-spacing:.14em;color:#8a7f6a;
  text-transform:uppercase}
/* Sin foco —un paso que sólo cuenta algo— el cartel va en medio y se separa
   del fondo con su propio velo. */
#tuto.on.sinFoco{background:rgba(6,5,8,.62)}


/* Exportar e importar partidas: al pie del panel y sin llamar la atención. */
#slPie{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.07);
  opacity:.75}
#slPie:hover{opacity:1}
#slPie .nota{font-size:10px;color:#8a7f6a}
.slot.exportable{outline:1px dashed rgba(200,160,90,.55);outline-offset:-3px}
.slot.exportable:hover{outline-color:#c8a05a}


/* ====================================================== HAY MÁS ABAJO
   Un panel que se corta por el borde no dice que se corta. En un ratón se
   descubre rodando la rueda sin querer; en un dedo, ni eso — y lo que no se
   ve, no existe.

   Dos flechas: una arriba y otra abajo, pegadas al canto del panel. Cada una
   aparece SÓLO si hay algo en esa dirección, así que al llegar al fondo la de
   abajo se va sola y queda la de arriba. Eso es lo que convierte una flecha en
   una medida y no en un adorno.

   No se pueden pulsar a propósito: son una señal, no un botón, y un botón que
   hace lo mismo que arrastrar sólo añade una cosa que aprender. */
.desliza{ position:relative }
.desliza>.dz{
  position:absolute; left:0; right:0; height:26px; pointer-events:none;
  z-index:8; opacity:0; transition:opacity .22s ease;
  display:flex; align-items:center; justify-content:center;
}
.desliza>.dz.se-ve{ opacity:1 }
.desliza>.dz-arriba{ top:0;
  background:linear-gradient(180deg,rgba(10,8,6,.92),rgba(10,8,6,0)) }
.desliza>.dz-abajo{ bottom:0;
  background:linear-gradient(0deg,rgba(10,8,6,.92),rgba(10,8,6,0)) }
.desliza>.dz i{
  display:block; width:9px; height:9px;
  border-left:2px solid #c8a05a; border-bottom:2px solid #c8a05a;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.9));
}
.desliza>.dz-arriba i{ transform:rotate(135deg); margin-top:4px;
  animation:dzArr 1.9s ease-in-out infinite }
.desliza>.dz-abajo i{ transform:rotate(-45deg); margin-bottom:4px;
  animation:dzAba 1.9s ease-in-out infinite }
@keyframes dzArr{ 0%,100%{ transform:rotate(135deg) translate(0,0) }
                  50%{ transform:rotate(135deg) translate(2px,-2px) } }
@keyframes dzAba{ 0%,100%{ transform:rotate(-45deg) translate(0,0) }
                  50%{ transform:rotate(-45deg) translate(2px,-2px) } }
@media (prefers-reduced-motion:reduce){
  .desliza>.dz i{ animation:none }
}


/* ====================================================== TÁCTIL, EN GENERAL
   Tres cosas que no dependen del tamaño de la pantalla sino del dedo, y que
   estaban sin decir. */
@media (pointer:coarse){
  /* El destello gris de Android al tocar cualquier cosa. En un juego oscuro
     canta muchísimo y no aporta nada: ya hay estados `:active` propios. */
  *{ -webkit-tap-highlight-color:transparent }
  /* Nada de zoom por doble toque: en un juego, un doble toque es una acción,
     no una lupa. Y sin esto la primera pulsación se retrasa 300 ms. */
  html{ touch-action:manipulation }
  /* Tamaño mínimo de dedo en TODO lo que se pulsa, no sólo en los botones de
     la barra: las × de cerrar y las flechas del mapa eran de 18 px. */
  .btn, .slot .acc button, .ag-x, .zona, .prod, .tal{ min-height:44px }
  .ag-x{ display:inline-flex; align-items:center; justify-content:center;
         min-width:44px }
  /* Y las listas se arrastran con inercia, como espera la mano. */
  #pnl, #log, .over .in, .wikiTexto, .wikiLista, .codiceRej, #slLista{
    -webkit-overflow-scrolling:touch }
}

/* ============================================ PANTALLAS MUY ESTRECHAS
   Una tablet en vertical o un móvil grande tumbado: hay ancho de sobra para
   leer pero el panel lateral fijo se come un tercio. A partir de aquí el panel
   ya es cajón (lo hace la regla de altura), pero los diálogos y las rejillas
   seguían pensados para un escritorio. */
@media (max-width:900px){
  .over .in{ padding:16px 18px; max-width:94vw;
             max-height:88vh; max-height:88dvh }
  .tiendaRej{ grid-template-columns:repeat(auto-fill,minmax(84px,1fr)) }
  .wikiCuerpo{ flex-direction:column }
}


/* ====================================================== LA TARJETA DE UN VECINO
   Contrasta a propósito con el resto del panel. Todo lo demás ahí dentro son
   renglones finos —material, precios, rumores— y una persona no puede parecer
   un renglón de la lista de la compra.

   Tres cosas la separan: se despega con margen, tiene fondo propio con una
   cinta de latón a la izquierda, y el botón va ABAJO y ancho en vez de
   apretado al canto. El texto deja de ir estrujado en medio. */
.npc{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:'cara txt' 'pie pie';
  gap:9px 11px;
  margin:11px 0;
  padding:11px 12px 11px 14px;
  background:
    linear-gradient(90deg,#c8a05a 0 3px,transparent 3px),
    linear-gradient(180deg,rgba(40,32,21,.92),rgba(22,17,11,.92));
  border:1px solid #4a3c26;
  border-left:0;
  box-shadow:0 3px 14px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.35) inset;
}
.npc-cara{
  grid-area:cara; width:56px; height:56px; flex:none; overflow:hidden;
  border:1px solid #3a2e1e; background:#0d0a07;
  box-shadow:0 0 0 1px rgba(200,160,90,.18) inset;
}
.npc-cara img{ width:100%; height:100%; object-fit:cover; display:block;
  image-rendering:pixelated }
.npc-txt{ grid-area:txt; min-width:0; align-self:center }
.npc-txt b{
  display:block; color:#f0e2c0; font-size:12px; letter-spacing:.10em;
  margin-bottom:3px;
  /* Un nombre largo se parte en vez de salirse por el canto derecho. */
  overflow-wrap:anywhere;
}
.npc-txt span{
  display:block; font-size:10px; line-height:1.5; color:#a2937a;
  overflow-wrap:anywhere;
}
.npc-pie{ grid-area:pie; display:flex; justify-content:stretch }
.npc-pie .btn{ flex:1; justify-content:center }
/* Sin botón —ya está hecho, o toca esperar— la tarjeta se apaga un poco: se
   sigue viendo quién es, pero deja de pedir que la pulses. */
.npc:not(:has(.npc-pie)){ opacity:.72 }

/* ================================================ TÍTULOS QUE NO SE CORTAN
   `Korrokoia`, `Ondarraspiko`, `Arritokieta`… en euskera las palabras son
   largas y el panel en un móvil son 300 px. El tamaño ya baja por tramos según
   la longitud, pero eso es una regla a ojo: acierta con las que había el día
   que se escribió y falla con la siguiente.

   Lo de abajo es el respaldo de verdad —que se parta antes de salirse— y el
   ajuste fino lo hace `ajustaPlacas()`, que MIDE. */
.placa{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}