/* El tablero (assets/tablero.js) y la paleta de toda la web. Desde la sesión 6 los colores
   son los del libro: turquesa y naranja de la cubierta, tinta casi negra, rojo de acento y
   cartelas blancas con borde duro. Modo claro y oscuro. */
:root{
  --velo-sombra:0.16;
  /* la cubierta del libro */
  --turquesa:#0e9fa3; --turquesa-2:#0b8083; --turquesa-3:#d3ecec; --banda:#0e9fa3;
  --naranja:#f98b12; --naranja-2:#e07a06;
  --paper:#eef5f4; --paper-2:#dfecea; --paper-3:#ffffff;
  --ink:#1d1a17; --ink-dim:#6b635b;
  --acento:#b3402b; --acento-2:#8f3122; --laton:#f98b12;
  --line:rgba(29,26,23,.16); --line-strong:rgba(29,26,23,.55);
  --borde:#1d1a17;                       /* el borde duro de las cartelas del libro */
  --room-1:#dbe7cf; --room-2:#f0d9b4; --room-3:#d9e7f3; --room-4:#f3d7d5; --room-5:#e6dff0; --room-6:#cfe7e4;
  --fem:#c9a0a6; --masc:#93a9c2; --good:#2f7d4f; --bad:#b3402b;
  --accent-sat:48%; --accent-light:42%;
  --muro:#1d1a17; --alfombra-borde:#3b2a1e;
  --sombra-dura:0 3px 0 rgba(29,26,23,.22);
  --shadow:0 3px 0 rgba(29,26,23,.16), 0 14px 26px -18px rgba(29,26,23,.55);
  --tipo-display:"Lilita One","Jost","Trebuchet MS",sans-serif;
  --tipo-texto:"Jost","Helvetica Neue",Arial,sans-serif;
  --tipo-rotulo:"Boogaloo","Jost",sans-serif;
  --tipo-mano:"Caveat","Segoe Script",cursive;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --turquesa:#2fc7cb; --turquesa-2:#5bdadd; --turquesa-3:#12312f; --banda:#0b6f72;
    --naranja:#ffa733; --naranja-2:#ffbb5e;
    --paper:#131f1e; --paper-2:#0e1817; --paper-3:#1c2b2a;
    --ink:#f1ece2; --ink-dim:#a3b0ae;
    --acento:#e2705a; --acento-2:#f08a72; --laton:#ffa733;
    --line:rgba(241,236,226,.18); --line-strong:rgba(241,236,226,.42);
    --borde:#0b1413;
    --room-1:#333f2f; --room-2:#453b2a; --room-3:#2b3947; --room-4:#402d31; --room-5:#3a3348; --room-6:#2c3f3c;
    --fem:#7a4d54; --masc:#3f5872; --good:#6fbf7f; --bad:#e2685a;
    --accent-sat:58%; --accent-light:66%;
    --muro:#0b1413; --alfombra-borde:#d8c9a8;
    --sombra-dura:0 3px 0 rgba(0,0,0,.5);
    --shadow:0 3px 0 rgba(0,0,0,.45), 0 16px 30px -18px #000;
  }
}
:root[data-theme="dark"]{
  --turquesa:#2fc7cb; --turquesa-2:#5bdadd; --turquesa-3:#12312f; --banda:#0b6f72;
  --naranja:#ffa733; --naranja-2:#ffbb5e;
  --paper:#131f1e; --paper-2:#0e1817; --paper-3:#1c2b2a;
  --ink:#f1ece2; --ink-dim:#a3b0ae;
  --acento:#e2705a; --acento-2:#f08a72; --laton:#ffa733;
  --line:rgba(241,236,226,.18); --line-strong:rgba(241,236,226,.42);
  --borde:#0b1413;
  --room-1:#333f2f; --room-2:#453b2a; --room-3:#2b3947; --room-4:#402d31; --room-5:#3a3348; --room-6:#2c3f3c;
  --fem:#7a4d54; --masc:#3f5872; --good:#6fbf7f; --bad:#e2685a;
  --accent-sat:58%; --accent-light:66%;
  --muro:#0b1413; --alfombra-borde:#d8c9a8;
  --sombra-dura:0 3px 0 rgba(0,0,0,.5);
  --shadow:0 3px 0 rgba(0,0,0,.45), 0 16px 30px -18px #000;
}

/* --- el plano ---
   Orden de capas dentro del tablero (ninguna casilla sube de z: si lo hiciera, su fondo
   taparía el mueble y el rótulo de las vecinas; ese era el fallo de la sesión 5):
   1 alfombra · 2 mueble · 3 muros · 4 bestia · 5 sombra · 6 marca · 8 aspa y notas ·
   9 rótulo · 10 ficha. */
/* Sin marco cuadrado: el contorno es el de las salas (muro-sala), huecos incluidos, y la
   sombra la echa cada casilla (solo se ve donde no hay otra casilla debajo: el contorno). */
.tablero{
  position:relative; display:grid; aspect-ratio:1/1; width:100%;
  overflow:visible; background:transparent;
  --trama:rgba(29,26,23,.13); --sombra-casilla:4px 5px 0 rgba(29,26,23,.22);
  touch-action:manipulation;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tablero{ --trama:rgba(241,236,226,.12); --sombra-casilla:4px 5px 0 rgba(0,0,0,.5); } }
:root[data-theme="dark"] .tablero{ --trama:rgba(241,236,226,.12); --sombra-casilla:4px 5px 0 rgba(0,0,0,.5); }
.tablero .muros{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; overflow:visible; }
.tablero .muros path.alfombra{ stroke:var(--alfombra-borde); stroke-width:0.035; fill:none; stroke-linecap:square; }
.tablero .muro-sala{ position:relative; z-index:3; pointer-events:none; place-self:stretch; }
.tablero .muro-sala svg{ display:block; width:100%; height:100%; overflow:visible; }
.tablero .muro-sala path{ stroke:var(--muro); fill:none; stroke-linecap:square; stroke-width:0.1; }
.tablero .muro-sala path.exterior{ stroke-width:0.16; }
.tablero .mueble{ position:relative; z-index:2; place-self:center; object-fit:contain; pointer-events:none; }
.tablero .mueble.bestia{ z-index:4; object-fit:fill; }
.tablero .sombra-bestia{ position:relative; z-index:5; pointer-events:none; place-self:stretch; background:rgba(40,30,20,var(--velo-sombra)); }
.tablero .campo{ position:absolute; inset:-1px; z-index:1; background-size:100% 100%; background-position:center; background-repeat:no-repeat; pointer-events:none; }
.tablero .cell{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-width:0; min-height:0; overflow:visible;
  /* La línea entre casillas: un poco más gruesa que el píxel de antes y a escala del tablero
     (sesión 13, lo pidió Remi). Las dos casillas vecinas ponen la suya, así que lo que se ve
     es el doble. */
  border:max(1.5px, calc(var(--celda, 40px) * .018)) solid rgba(20,16,12,.55);
  user-select:none; -webkit-user-select:none;
  background-color:var(--sala, var(--room-1));
  background-clip:border-box; box-shadow:var(--sombra-casilla);
}
.tablero .cell.fuera{ background:transparent; border-color:transparent; box-shadow:none; }
/* en oscuro, el color de la sala se apaga (el suelo dibujado va encima y no cambia) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tablero .cell{ background-color:color-mix(in srgb, var(--sala, var(--room-1)) 34%, #131f1e); border-color:rgba(0,0,0,.6); }
  :root:not([data-theme="light"]) .tablero .cell.fuera{ background:transparent; border-color:transparent; }
}
:root[data-theme="dark"] .tablero .cell{ background-color:color-mix(in srgb, var(--sala, var(--room-1)) 34%, #131f1e); border-color:rgba(0,0,0,.6); }
:root[data-theme="dark"] .tablero .cell.fuera{ background:transparent; border-color:transparent; }
.tablero .cell.blocked::after{ content:""; position:absolute; inset:0; background:rgba(40,30,20,var(--velo-sombra)); pointer-events:none; }
/* Las dos casillas de un objeto de dos llevan la misma línea que las demás (sesión 13). Antes
   se borraba (`join-*` en transparente) para que el dibujo se viera seguido, pero por debajo
   quedaba el color liso de la sala, sin el suelo: en vez de desaparecer, la línea se veía
   clara. Remi la quiere negra como todas; el dibujo pasa por encima igual. */
/* La marca: la capa donde se pintan los realces (cursor, sala, objetos citados, pista).
   Va por encima de muebles y muros, y así ninguna casilla necesita subir de z. */
.tablero .cell .marca{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.tablero .room-tag{
  position:absolute; left:50%; bottom:6%; transform:translate(-50%,0);
  font-family:var(--tipo-rotulo); font-size:calc(var(--celda, 40px) * .23 * var(--rot-escala, 1)); letter-spacing:.03em;
  text-transform:uppercase; color:var(--ink); background:var(--paper-3);
  border:max(1px, calc(var(--celda, 40px) * .028)) solid var(--muro); border-radius:.5em;
  padding:.05em .32em; pointer-events:none; white-space:nowrap; z-index:9; line-height:1.25;
}
.token{
  width:78%; height:78%; max-width:78%; max-height:78%; flex:none; border-radius:50%;
  background:hsl(var(--hue) var(--accent-sat) var(--accent-light)); color:#fff9ec;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--tipo-display); font-size:calc(var(--celda, 40px) * .4);
  border:max(1.5px, calc(var(--celda, 40px) * .05)) solid var(--muro);
  box-shadow:0 2px 4px rgba(0,0,0,.35); position:relative; z-index:10; overflow:hidden;
}
.token.victima{ background:var(--ink); }
.token img.retrato{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.tablero .cell.sit .token{ width:62%; height:62%; max-width:62%; max-height:62%; transform:translate(24%,-24%); }