/* Everthal · la mesa: relato, entrada, el cuaderno del personaje, la ficha, el diario y el mapa. */

/* --- Mesa: relato a la izquierda, cuaderno del personaje a la derecha ----------------------- */
.mesa { height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) 6px var(--ancho-panel); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "barra divisor paneles" "relato divisor paneles"; }
/* El tinte de la hora y el sitio (G15): una veladura sobre toda la mesa que no se interpone en nada. */
@property --tinte { syntax: "<color>"; inherits: true; initial-value: transparent; }
.mesa::after { content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; background: var(--tinte); opacity: 0.1; mix-blend-mode: multiply; transition: --tinte 3s ease; }
:root[data-theme="dark"] .mesa::after { mix-blend-mode: soft-light; opacity: 0.3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mesa::after { mix-blend-mode: soft-light; opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .mesa::after { transition: none; } }
.barra { grid-area: barra; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 40px; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; min-width: 0; position: relative; }
.barra::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; background: var(--trazo); filter: var(--pluma); border-radius: 2px; }
.donde { display: grid; min-width: 0; text-align: center; }
.migas { font: 13px var(--f-titulo); letter-spacing: 0.08em; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.migas:empty { display: none; }
.lugar-nombre { font: 500 24px/1.15 var(--f-titulo); letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reloj { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.reloj-texto { display: grid; justify-items: end; line-height: 1.15; }
.reloj-hora { font: 500 19px var(--f-texto); font-variant-numeric: lining-nums tabular-nums; }
.reloj-fecha { font: 13px var(--f-ui); color: var(--tenue); }
.esfera { width: 36px; height: 36px; overflow: visible; }
.esfera .borde { fill: none; stroke: var(--tinta-2); stroke-width: 1.3; filter: var(--pluma); }
.esfera .noche { fill: color-mix(in srgb, var(--acento) 22%, transparent); }
.esfera .astro { stroke: var(--tinta-2); stroke-width: 1; }
.esfera .astro.sol { fill: var(--aviso); }
.esfera .astro.luna { fill: var(--hoja); }
.esfera .horizonte { stroke: var(--tinta-2); stroke-width: 1.2; }

.divisor { grid-area: divisor; cursor: col-resize; background: transparent; width: 6px; justify-self: center; position: relative; }
.divisor::before { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 2px; background: var(--trazo); filter: var(--pluma); opacity: 0.7; }
.divisor:hover::before, .divisor.arrastrando::before { background: var(--acento); opacity: 1; }

/* --- Relato: dos tintas, notas al margen ------------------------------------------------- */
.relato { grid-area: relato; display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }
.relato > * { flex: none; }
.historial { flex: 1; min-height: 150px; overflow-y: auto; padding: 26px 20px 30px; scroll-behavior: smooth; }
/* Cada turno: el texto en su columna y lo que ha cambiado, al margen. */
.turno { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 64ch) minmax(130px, 1fr); column-gap: 34px; font: var(--tam-relato)/1.72 var(--f-texto); }
.turno > * { grid-column: 1; }
.dia { max-width: 900px; margin: 10px auto 22px; justify-content: center; }
.dia span { font: 500 14px var(--f-titulo); letter-spacing: 0.14em; white-space: nowrap; }
.historial > .dia:first-child { margin-top: 0; }
.jugador { margin: 0 0 12px; color: var(--acento); font: italic calc(var(--tam-relato) * 0.96)/1.5 var(--f-texto); display: flex; gap: 10px; white-space: pre-wrap; }
.jugador::before { content: ""; width: 17px; height: 17px; flex: none; margin-top: 0.3em; opacity: 0.8; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4-1 11-11-3-3L5 16z M14 7l3 3 M4 20l3-3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4-1 11-11-3-3L5 16z M14 7l3 3 M4 20l3-3'/%3E%3C/svg%3E") center / contain no-repeat; }
.narracion { margin: 0 0 28px; white-space: pre-wrap; color: var(--tinta); hyphens: auto; }
.narracion strong { font-weight: 700; }
/* La capitular: la primera letra del relato, en rúbrica. */
.historial > .turno:first-of-type .narracion::first-letter { float: left; font: 500 3.5em/0.82 var(--f-titulo); color: var(--rubrica); margin: 0.06em 0.08em 0 0; }
/* Sin cursor de chat: el texto llega párrafo a párrafo, como tinta que se asienta. */
.narracion .parrafo { animation: asentar 0.7s ease-out both; }
@keyframes asentar { from { opacity: 0; filter: blur(1.5px); } to { opacity: 1; filter: none; } }
@keyframes parpadeo { 50% { opacity: 0; } }
.actividad { display: flex; align-items: center; gap: 10px; font: italic 15px var(--f-texto); color: var(--tenue); margin: 4px 0 14px; min-height: 22px; }
/* Gotas de tinta que laten, una tras otra, mientras se escribe el turno. */
.tintero { display: inline-flex; gap: 5px; }
.tintero i { width: 6px; height: 6px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--rubrica); opacity: 0.25; animation: tinta 1.4s ease-in-out infinite; filter: var(--acuarela); }
.tintero i:nth-child(2) { animation-delay: 0.2s; }
.tintero i:nth-child(3) { animation-delay: 0.4s; }
@keyframes tinta { 0%, 100% { opacity: 0.25; transform: rotate(-45deg) scale(0.85); } 40% { opacity: 0.9; transform: rotate(-45deg) scale(1); } }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.turno > .error { font: 15px var(--f-ui); }
.ir-final { position: absolute; right: 24px; bottom: 110px; background: var(--hoja); color: var(--acento); border: 1.5px solid var(--trazo); border-radius: 999px; padding: 5px 14px; box-shadow: var(--sombra); font: 500 14px var(--f-ui); z-index: 3; }

/* El rumbo: lo siguiente para crecer, en una línea sobre el relato (G1). */
.rumbo { display: flex; align-items: center; gap: 8px; max-width: 900px; width: calc(100% - 40px); margin: 8px auto 0; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--trazo) 70%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--hoja-2) 45%, transparent); font: 14px/1.3 var(--f-ui); color: var(--tinta-2); text-align: left; cursor: pointer; }
.rumbo:hover { border-color: var(--acento); }
.rumbo .icono { width: 16px; height: 16px; flex: none; color: var(--rubrica); }
.rumbo-titulo { font: 500 12px var(--f-titulo); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rubrica); flex: none; }
.rumbo-texto { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { .rumbo { width: calc(100% - 32px); margin-top: 6px; } .rumbo-titulo { display: none; } }

/* Tarjetas: lo que entra en la historia con imagen (el sitio al que llegas, lo que importa que consigues). */
.tarjetas { display: flex; flex-wrap: wrap; gap: 14px; margin: -12px 0 26px; }
.tarjeta { margin: 0; display: grid; background: var(--elevada); border: 1px solid var(--trazo); border-radius: var(--radio); overflow: hidden; box-shadow: 0 1px 3px var(--pliegue); animation: asentar 0.9s ease-out both; }
.tarjeta img { display: block; width: 100%; }
.tarjeta figcaption { display: grid; gap: 2px; padding: 8px 12px 10px; font: italic 14.5px/1.4 var(--f-texto); color: var(--tinta-2); }
.tarjeta figcaption strong { font: 500 15px var(--f-titulo); font-style: normal; color: var(--tinta); }
.tarjeta.escenario { flex: 1 1 100%; }
.tarjeta.escenario img { aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 60%; }
.tarjeta.objeto { flex: 0 1 320px; grid-template-columns: 76px 1fr; align-items: center; }
.tarjeta.objeto img { width: 76px; height: 76px; object-fit: contain; padding: 6px; background: var(--hoja-2); }
/* Alguien que entra en la historia (BV4): su retrato, quién es y por qué sale. */
.tarjeta.persona { flex: 1 1 260px; max-width: 380px; grid-template-columns: 84px 1fr; align-items: center; }
.tarjeta.persona img { width: 84px; height: 104px; object-fit: cover; object-position: 50% 18%; }
.tarjeta-tipo { font: 500 11px var(--f-titulo); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rubrica); }
/* Un momento grande (G8): la lámina a todo el ancho y, encima, lo que se alcanza, en oro. */
.tarjeta.momento { flex: 1 1 100%; position: relative; border: 1.5px solid var(--aviso); box-shadow: 0 2px 14px color-mix(in srgb, var(--aviso) 25%, transparent); animation: momento 1.4s ease-out both; }
@keyframes momento { from { opacity: 0; transform: scale(0.985); filter: brightness(1.25) blur(2px); } to { opacity: 1; transform: none; filter: none; } }
.tarjeta.momento.con-lamina img { aspect-ratio: 16 / 8; object-fit: cover; }
.tarjeta.momento.con-lamina figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; background: linear-gradient(transparent, rgb(20 14 6 / 0.82)); color: #f4ead6; }
.tarjeta.momento figcaption { gap: 3px; font: italic 15.5px/1.45 var(--f-texto); }
.tarjeta.momento figcaption strong { font: 500 26px/1.1 var(--f-titulo); letter-spacing: 0.03em; color: inherit; }
.tarjeta.momento.con-lamina figcaption strong { color: #fff6e2; text-shadow: 0 1px 8px rgb(0 0 0 / 0.5); }
.momento-tipo { font: 500 12.5px var(--f-titulo); letter-spacing: 0.16em; text-transform: uppercase; color: var(--aviso); font-style: normal; }
.tarjeta.momento.con-lamina .momento-tipo { color: #e8c46a; }
.tarjeta.momento.sin-lamina { grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 16px; background: color-mix(in srgb, var(--aviso) 7%, var(--elevada)); }
.tarjeta.momento.sin-lamina figcaption { padding: 0; color: var(--tinta-2); }
.tarjeta.momento.sin-lamina figcaption strong { color: var(--tinta); font-size: 22px; }
.momento-retrato, .momento-estrella { width: 96px; height: 96px; border-radius: 50%; background: center top / cover var(--hoja-2); box-shadow: 0 0 0 2px var(--hoja), 0 0 0 4px var(--aviso), 0 0 22px color-mix(in srgb, var(--aviso) 45%, transparent); }
.momento-estrella { display: grid; place-items: center; font-size: 44px; color: var(--aviso); }
@media (max-width: 860px) {
  .tarjeta.momento.con-lamina img { aspect-ratio: 4 / 3; }
  .tarjeta.momento figcaption strong { font-size: 22px; }
  .tarjeta.momento.sin-lamina { grid-template-columns: 64px minmax(0, 1fr); }
  .momento-retrato, .momento-estrella { width: 64px; height: 64px; font-size: 30px; }
}

/* La cabecera de la escena: el escenario del sitio donde estás y lo que se nota de un vistazo. */
.escena-cabecera { display: grid; gap: 10px; }
.escena-imagen { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio); border: 1px solid var(--trazo); }
.escena-notas { display: flex; flex-wrap: wrap; gap: 6px; }
.nota-escena { font: 13px/1 var(--f-ui); color: var(--tinta-2); padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--hoja-2) 70%, transparent); border: 1px solid color-mix(in srgb, var(--trazo) 60%, transparent); }
.nota-escena[title] { cursor: help; }
.detalles { margin: 0; padding-left: 16px; font: 15px/1.45 var(--f-texto); color: var(--tinta-2); list-style: "· "; }
.extras { display: flex; flex-wrap: wrap; gap: 6px 14px; font: italic 14.5px var(--f-texto); color: var(--tinta-2); }
.extras .extra { display: inline-flex; align-items: center; gap: 6px; }
.extras .extra .medallon { --t: 26px; }
.extras .extra.aliado { color: var(--bien); }
.lista.hacer > li.con-medallon { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; }
details.mas > summary { cursor: pointer; font: 14px var(--f-ui); color: var(--acento); padding: 4px 0; }
.inventario .objeto-mini { width: 26px; height: 26px; object-fit: contain; flex: none; }

/* Lo que ha cambiado en el turno: notas al margen, con color solo donde importa. */
.cambios { grid-column: 2; grid-row: 1 / span 3; align-self: start; display: grid; gap: 6px; padding: 3px 0 0 12px; margin-bottom: 20px; font: 13.5px/1.35 var(--f-ui); color: var(--tinta-2); border-left: 1.5px solid color-mix(in srgb, var(--trazo) 70%, transparent); }
.cambios:empty { display: none; }
/* Cada nota del turno, con su icono: de un vistazo se ve qué ha pasado (el tiempo, los dados, lo que sube y lo que cuesta). */
.cambio { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; align-items: start; }
.cambio > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cambio > .icono { width: 15px; height: 15px; margin-top: 1px; stroke-width: 1.8; opacity: 0.85; }
.cambio.tiempo { color: var(--tenue); }
.cambio.avance { font-weight: 500; }
/* Lo que no cabe en la línea del turno (más de tres avisos), plegado: abierto, cada uno en su línea. */
.cambios-mas { display: grid; gap: 6px; }
.cambios-mas summary { cursor: pointer; padding-left: 22px; color: var(--acento); font-style: italic; list-style: none; }
.cambios-mas summary::-webkit-details-marker { display: none; }
.cambios-mas[open] summary { margin-bottom: 2px; }

/* Decidir ahora (4.128): lo que se resuelve de un toque, bajo lo narrado; solo en el último turno. Son botones de
   verdad (no enlaces sueltos al otro lado de la columna): se ven como lo que se puede hacer ya. */
.decisiones { display: grid; gap: 8px; margin: -14px 0 28px; padding: 10px 12px; border-radius: calc(var(--radio) * 2); background: color-mix(in srgb, var(--rubrica) 6%, var(--elevada)); border: 1px solid color-mix(in srgb, var(--rubrica) 35%, var(--trazo)); font: 15px/1.35 var(--f-ui); animation: asentar 0.6s ease-out both; }
.decision { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.decision + .decision { border-top: 1px dashed color-mix(in srgb, var(--trazo) 70%, transparent); padding-top: 8px; }
.decisiones .accion { text-decoration: none; border: 1.5px solid var(--acento); border-radius: 999px; padding: 5px 14px; min-height: 34px; background: var(--hoja); }
.decisiones .accion:hover, .decisiones .accion:focus-visible { background: var(--acento); color: var(--sobre-acento); }
.decision-texto { display: grid; gap: 1px; min-width: 0; color: var(--tinta); font-weight: 500; }
.decision-texto .tenue { font: 400 13.5px var(--f-ui); }
@media (max-width: 860px) { .decision { flex-wrap: wrap; row-gap: 4px; } }
.cambio.bien { color: var(--bien); }
.cambio.mal { color: var(--mal); }
.cambio.avance { color: var(--aviso); }
.cambio .res { font-style: normal; font-weight: 500; }
.cambio .res.critico, .cambio .res.exito { color: var(--bien); }
.cambio .res.exito_parcial { color: var(--aviso); }
.cambio .res.fallo, .cambio .res.imposible { color: var(--mal); }

/* --- Entrada: un renglón donde se escribe con tinta azul ------------------------------------- */
.entrada { max-width: 940px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; padding: 10px 20px max(18px, env(safe-area-inset-bottom)); }
.renglon { position: relative; }
.renglon textarea { display: block; width: 100%; resize: none; border: 0; background: transparent; padding: 6px 2px 8px; font: italic calc(var(--tam-relato) * 0.98)/1.5 var(--f-texto); color: var(--acento); min-height: 46px; max-height: 40vh; }
.renglon textarea::placeholder { color: var(--tenue); }
.renglon textarea:focus { outline: none; }
.renglon textarea:disabled { opacity: 0.6; }
.renglon::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--trazo); filter: var(--pluma); border-radius: 2px; }
.renglon:focus-within::after { background: var(--acento); }
.entrada-botones { display: flex; gap: 16px; align-items: center; padding-bottom: 4px; }
#btn-ideas.llamativo { color: var(--rubrica); text-decoration-color: currentColor; }
.aviso-mesa, .ideas { max-width: 900px; width: calc(100% - 40px); margin: 0 auto 10px; }
.aviso-mesa { padding: 14px 18px; border-radius: var(--radio); background: var(--hoja); position: relative; }
.aviso-mesa::before, .ideas::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--trazo); border-radius: var(--radio); filter: var(--pluma); pointer-events: none; }
.aviso-mesa.muerto::before { border-color: var(--mal); }
.aviso-mesa.mas-alla { opacity: 0.92; }
.aviso-mesa .vias { list-style: none; padding: 0; display: grid; gap: 10px; }
.aviso-mesa .via { padding: 10px 12px; border-left: 2px solid var(--trazo); }
.aviso-mesa .via.cerrada { opacity: 0.6; }
.aviso-mesa .via strong { font-size: 16px; }
.aviso-mesa .via-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.aviso-mesa strong { font: 500 18px var(--f-titulo); letter-spacing: 0.04em; color: var(--rubrica); }
.aviso-mesa p, .aviso-mesa ul { margin: 6px 0; font-family: var(--f-texto); }
/* Las ideas: la cabecera fija y lo de dentro se desliza; el marco (::before) es del contenedor, que no se desliza,
   así que no se corta al bajar (G1). */
.ideas { background: var(--hoja); border-radius: var(--radio); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--sombra); position: relative; max-height: min(62vh, 560px); min-height: 0; }
.ideas-cuerpo { overflow-y: auto; overscroll-behavior: contain; min-height: 0; display: grid; gap: 4px; align-content: start; padding-right: 2px; }
.ideas-cuerpo > .boton-texto { justify-self: start; margin: 4px 8px 2px; }
.ideas-cabecera { display: flex; justify-content: space-between; align-items: center; font: 500 14px var(--f-titulo); letter-spacing: 0.12em; color: var(--rubrica); padding: 0 4px; }
.ideas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.ideas li button { width: 100%; text-align: left; background: none; border: 0; border-radius: var(--radio); padding: 7px 8px; display: grid; gap: 1px; font: italic 16px/1.4 var(--f-texto); color: var(--acento); }
.ideas li button:hover, .ideas li button:focus-visible { background: var(--acento-suave); }
.ideas li .tenue { font: 13px var(--f-ui); }
/* Los toques se hacen al momento: letra recta, como un botón, no como una frase que se propone. */
.ideas .toques li button { font: 500 15px/1.35 var(--f-ui); color: var(--tinta); }
.ideas .toques li button > span:first-child::before { content: "› "; color: var(--rubrica); }
/* Un encargo ofrecido: una fila con sus dos respuestas. */
.ideas .toque-doble { display: flex; align-items: center; gap: 12px; padding: 7px 8px; }
.toque-texto { flex: 1; display: grid; gap: 1px; font: 500 15px/1.35 var(--f-ui); color: var(--tinta); }
.toque-texto > span:first-child::before { content: "› "; color: var(--rubrica); }

/* --- Avisos de logro ------------------------------------------------------------------------ */
.logros { position: fixed; top: 70px; left: 50%; translate: -50% 0; z-index: 20; display: grid; gap: 6px; pointer-events: none; width: min(380px, calc(100vw - 32px)); }
/* En pantalla ancha, a un lado: en el centro tapaban lo que se acababa de narrar (V8). */
@media (min-width: 900px) { .logros { left: auto; right: 16px; translate: none; width: 300px; } }
.logro { background: var(--hoja); border-radius: var(--radio); padding: 10px 14px; display: grid; gap: 1px; box-shadow: var(--sombra); animation: entra 4.6s ease both; position: relative; font-family: var(--f-texto); }
.logro::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--aviso); border-radius: var(--radio); filter: var(--pluma); }
.logro strong { font: 500 13px var(--f-titulo); letter-spacing: 0.12em; color: var(--aviso); }
.logro-icono { display: none; }
.logro.con-icono { grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; }
.logro.con-icono strong, .logro.con-icono > span:last-child { grid-column: 2; }
.logro-tecnica { grid-row: 1 / span 2; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 6px var(--aviso)); }
@keyframes entra { 0% { opacity: 0; translate: 0 -6px; } 8%, 85% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }

/* --- El cuaderno del personaje (paneles) ------------------------------------------------------ */
.paneles { grid-area: paneles; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; min-height: 0; background: var(--hoja); box-shadow: inset 18px 0 22px -18px var(--pliegue); }
.pestanas { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1.5px solid color-mix(in srgb, var(--trazo) 60%, transparent); }
.pestanas button { background: none; border: 0; padding: 9px 8px 8px; font: 500 15px var(--f-titulo); letter-spacing: 0.06em; color: var(--tenue); position: relative; display: flex; align-items: center; gap: 6px; }
.pestanas button:hover { color: var(--tinta); }
.pestanas button[aria-selected="true"] { color: var(--tinta); }
.pestanas button[aria-selected="true"]::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -3px; height: 5px; background: var(--rubrica); border-radius: 3px; filter: var(--acuarela); opacity: 0.85; }
.pestanas .icono { display: none; }
.pestanas .solo-movil { display: none; }
.pestana { overflow-y: auto; padding: 18px 22px 30px; display: grid; gap: 24px; align-content: start; }
.seccion { display: grid; gap: 8px; }
.seccion > h3 { margin: 0; font: 500 13.5px var(--f-titulo); letter-spacing: 0.14em; color: var(--rubrica); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sendas { display: grid; gap: 18px; }
.senda { display: grid; gap: 6px; justify-items: center; text-align: center; }
.senda-viva { display: block; width: min(100%, 300px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #0d0b10 62%, transparent 72%); }
.senda-texto { display: grid; gap: 1px; justify-items: center; }
.senda-nombre { font: 500 18px var(--f-titulo); }
.senda-nota { font-style: italic; color: var(--tenue); text-wrap: balance; }
.senda.atascada .senda-nota { color: var(--aviso); }
.seccion > h3 .tenue { font: italic 13.5px var(--f-texto); letter-spacing: 0; color: var(--tenue); }
.descripcion { margin: 0; font: italic 16.5px/1.55 var(--f-texto); color: var(--tinta-2); }
.estado-malo { color: var(--mal); }
.lista { list-style: none; margin: 0; padding: 0; display: grid; }
.lista > li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 6px 0; min-width: 0; font-family: var(--f-texto); font-size: 16px; }
.lista > li + li { border-top: 1px dashed color-mix(in srgb, var(--trazo) 70%, transparent); }
.lista .rol { color: var(--tenue); font: 14px var(--f-ui); text-align: right; }
.lista .principal { display: grid; min-width: 0; }
.lista .principal .tenue { font: 14px/1.35 var(--f-ui); }
.botones-toque { display: flex; gap: 12px; flex-shrink: 0; }
.nota { margin: 0; font: italic 15px var(--f-texto); }
.vacio { margin: 0; color: var(--tenue); font: italic 15.5px var(--f-texto); }
/* Quién hay: medallón, nombre y qué hacer con él. */
.gente { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gente li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.gente .quien strong, .gente .quien .enlace { font: 500 17px/1.2 var(--f-texto); display: block; }
.gente .quien span { font: 14px/1.3 var(--f-ui); color: var(--tenue); }
.gente .acciones-persona { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.gente .menu-dar { position: relative; }
.gente .menu-dar > summary { list-style: none; cursor: pointer; }
.gente .menu-dar > summary::-webkit-details-marker { display: none; }
.gente .menu-dar-lista { position: absolute; right: 0; z-index: 5; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding: 6px; background: var(--elevada); border: 1px solid var(--trazo); border-radius: var(--radio); box-shadow: var(--sombra); max-height: 50vh; overflow: auto; min-width: 10em; }
/* Estrecho (el móvil, el panel lateral): los botones de cada persona, debajo de su nombre, para que no lo aprieten palabra a palabra. */
.gente { container-type: inline-size; }
@container (max-width: 520px) {
  .gente li { grid-template-columns: 44px minmax(0, 1fr); row-gap: 6px; position: relative; }
  .gente li > .medallon { grid-row: span 2; align-self: start; }
  .gente .acciones-persona { grid-column: 2; justify-content: flex-start; }
  /* Lo que se puede dar, a lo ancho de la fila (debajo del botón): no se sale por ningún lado. */
  .gente .menu-dar { position: static; }
  .gente .menu-dar-lista { left: 56px; right: 0; }
}
/* El panel en su ancho mínimo (320 px): las pestañas caben sin salirse. */
.paneles { container-type: inline-size; }
@media (min-width: 861px) {
  @container (max-width: 380px) {
    .pestanas { padding: 0 8px; gap: 0; }
    .pestanas button { padding-inline: 4px; letter-spacing: 0.02em; }
  }
}
/* Adónde ir: un índice con puntos guía hasta los minutos. */
.itinerario { list-style: none; margin: 0; padding: 0; display: grid; }
.itinerario li { display: flex; align-items: baseline; gap: 6px; padding: 4px 0; }
.itinerario button { background: none; border: 0; padding: 0; font: 16.5px var(--f-texto); color: var(--tinta); text-align: left; }
.itinerario button:hover { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.itinerario .puntos { flex: 1; border-bottom: 2px dotted color-mix(in srgb, var(--trazo) 90%, transparent); transform: translateY(-4px); min-width: 20px; }
.itinerario .min { font: 14px var(--f-ui); color: var(--tenue); font-variant-numeric: lining-nums; white-space: nowrap; }
.itinerario .sale { font: italic 13.5px var(--f-texto); color: var(--tenue); }

/* --- Ficha (siempre a la vista) ------------------------------------------------------------- */
.ficha { padding: 14px 22px 12px; display: grid; gap: 10px; }
.ficha-cabecera { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.ficha-cabecera .medallon { --t: 64px; }
.ficha-nombre { margin: 0; font: 500 26px/1.05 var(--f-titulo); letter-spacing: 0.03em; }
.ficha-sub { font: italic 15px var(--f-texto); color: var(--tinta-2); }
.ficha-estados { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 6px; }
.ficha-aviso { margin: 0; font: 13.5px/1.4 var(--f-ui); color: var(--aviso); border-left: 3px solid currentColor; padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px 16px; }
.recurso { display: grid; gap: 4px; min-width: 0; }
.recurso-cabecera { display: flex; justify-content: space-between; gap: 6px; font: 500 14px var(--f-ui); color: var(--tinta-2); }
.recurso-cabecera span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recurso-cabecera .num { font: 500 16px var(--f-texto); color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; }
.recurso.baja .num { color: var(--r-vida-baja); }
.ficha-dinero { font: 14px var(--f-ui); color: var(--tinta-2); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.ficha-dinero b { font: 500 15px var(--f-texto); color: var(--tinta); font-variant-numeric: lining-nums; }
/* Franja de recursos sobre el relato: solo en móvil, donde la ficha vive en su pestaña. */
.franja { display: none; }

/* --- Personaje: capacidades (por atributo, con la escala de tramos) --------------------------- */
.grupos-stat { display: grid; gap: 10px; }
.grupo-stat { padding: 2px 0 6px; }
.grupo-stat + .grupo-stat { border-top: 1.5px dashed color-mix(in srgb, var(--trazo) 70%, transparent); padding-top: 8px; }
.grupo-titulo { font: 500 13px var(--f-titulo); letter-spacing: 0.12em; color: var(--tenue); padding: 4px 0 2px; }
.stat { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; align-items: center; padding: 5px 0; }
.stat .nombre { min-width: 0; overflow-wrap: anywhere; font-family: var(--f-texto); }
.stat.raiz .nombre { font: 500 17px var(--f-texto); }
.stat.hija .nombre { padding-left: calc(var(--nivel) * 14px); color: var(--tinta-2); font-size: 15.5px; }
.stat .tramo { color: var(--tinta-2); font: italic 14.5px var(--f-texto); text-align: right; white-space: nowrap; }
.stat.raiz .tramo { color: var(--tinta); }
.stat .tramo .num { color: var(--tenue); font-size: 13px; margin-left: 6px; font-style: normal; }
/* Seis peldaños de principiante a de leyenda: los subidos, en tinta; el actual, en rúbrica. */
.escala { display: inline-flex; gap: 3px; align-items: flex-end; height: 16px; }
.escala i { width: 7px; border-radius: 2px; background: var(--trazo); opacity: 0.6; filter: var(--pluma); }
.escala i:nth-child(1) { height: 6px; } .escala i:nth-child(2) { height: 8px; } .escala i:nth-child(3) { height: 10px; }
.escala i:nth-child(4) { height: 12px; } .escala i:nth-child(5) { height: 14px; } .escala i:nth-child(6) { height: 16px; }
.escala i.lleno, .escala i.actual { opacity: 1; }
.escala i.lleno { background: var(--tinta-2); }
.escala i.actual { background: var(--rubrica); }
.stat .carril { grid-column: 1 / -1; height: 5px; margin-top: 5px; }
.stat.hija .carril { margin-left: calc(var(--nivel) * 14px); }
.stat .carril > i { --c: var(--acento); }
.stat.tope .carril { background: repeating-linear-gradient(-45deg, transparent 0 3px, color-mix(in srgb, var(--trazo) 60%, transparent) 3px 5px); }
.stat.tope .carril > i { --c: var(--tenue); opacity: 0.6; }
.stat .detalle { grid-column: 1 / -1; font: italic 14px var(--f-texto); color: var(--tenue); margin-top: 3px; }
.stat.subio .nombre { color: var(--aviso); }
.subida { color: var(--aviso); font: 700 12px var(--f-ui); margin-left: 6px; }

/* --- Desplegables (técnicas, gente) ---------------------------------------------------------- */
.desplegables { display: grid; gap: 8px; }
.desplegable { background: var(--papel); border-radius: var(--radio); position: relative; }
.desplegable::before { content: ""; position: absolute; inset: 0; border: 1.5px solid color-mix(in srgb, var(--trazo) 80%, transparent); border-radius: var(--radio); filter: var(--pluma); pointer-events: none; }
.desplegable:hover::before, .desplegable[open]::before { border-color: var(--trazo); }
.desplegable > summary { list-style: none; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 9px 12px; cursor: pointer; border-radius: var(--radio); position: relative; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary:hover .flecha { color: var(--acento); }
.flecha { color: var(--tenue); display: grid; place-items: center; height: 22px; transition: rotate 160ms ease; }
.flecha .icono { width: 16px; height: 16px; stroke-width: 2.2; }
.desplegable[open] > summary .flecha { rotate: 90deg; color: var(--acento); }
.desplegable-titulo { display: grid; gap: 1px; min-width: 0; }
.desplegable-nombre { font: 500 17px/1.3 var(--f-texto); }
.desplegable-resumen { font: italic 14.5px var(--f-texto); color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desplegable[open] .desplegable-resumen { display: none; }
.desplegable > summary .rol, .desplegable > summary .pnj-marcas { padding-top: 3px; }
.medallon.mini { --t: 34px; }
.desplegable[open] .medallon.mini { display: none; }
.desplegable-cuerpo { padding: 0 14px 12px 38px; display: grid; gap: 8px; position: relative; font-family: var(--f-texto); }
.desplegable-cuerpo > * { margin: 0; }
.desplegable-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 14px var(--f-ui); }
.tecnica.propia .desplegable-nombre { color: var(--acento); }
/* El icono de una técnica (G10): pequeño, delante del nombre. */
.icono-tecnica { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; margin-right: 8px; }
.hace { list-style: "– "; padding-left: 16px; margin: 0 0 8px; font: 15px/1.45 var(--f-texto); color: var(--tinta-2); }
.rol { color: var(--tenue); font: 14px var(--f-ui); }
.inventario li .rol { white-space: nowrap; }
/* El nombre a la izquierda, junto a su dibujo, y lo demás (equipado, sus botones) a la derecha. */
.inventario > li .principal { flex: 1; }
.pnj-nombre { font-weight: 500; }
.pnj-marcas { display: flex; align-items: center; gap: 6px; }
.retrato { float: right; height: 150px; max-width: 45%; object-fit: contain; margin: 0 0 6px 10px; shape-outside: margin-box; }
.pnj.muerto .retrato { filter: grayscale(1) opacity(0.6); }
.desplegable-pie { clear: both; }
.pnj.muerto .pnj-nombre { color: var(--tenue); text-decoration: line-through; }
.recuerdos { margin: 4px 0 0; padding-left: 16px; font-size: 15px; color: var(--tinta-2); }
.tecnica .dominio { display: grid; gap: 4px; margin: 4px 0 8px; font-family: var(--f-ui); }

/* Ideas en práctica. */
.idea { display: grid; gap: 4px; padding: 8px 0; }
.idea + .idea { border-top: 1px dashed color-mix(in srgb, var(--trazo) 70%, transparent); }
.idea-cabecera { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font: 14px var(--f-ui); }
.idea-cabecera strong { font: 500 16.5px var(--f-texto); }
.idea-palabras { margin: 0; font: italic 15.5px/1.5 var(--f-texto); color: var(--acento); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idea-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 13.5px var(--f-ui); color: var(--tenue); }
.idea.lejos { opacity: 0.6; }
.idea-otras { margin: 0; font-size: 13.5px; }
.idea-ayuda { margin: 0; padding-left: 16px; font: 14.5px var(--f-texto); color: var(--tinta-2); list-style: "→ "; }
.pips { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: middle; }
.pips i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--trazo); }
.pips i.lleno { background: var(--aviso); box-shadow: none; }

/* --- Metas y caminos ------------------------------------------------------------------------- */
.objetivo { display: grid; gap: 6px; padding: 10px 0; }
.objetivo + .objetivo { border-top: 1px dashed color-mix(in srgb, var(--trazo) 70%, transparent); }
.objetivo-titulo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font: 500 17px var(--f-texto); }
.objetivo-estado { font: italic 14px var(--f-texto); color: var(--tenue); white-space: nowrap; }
.objetivo.logrado .objetivo-titulo span:first-child { color: var(--tenue); text-decoration: line-through; }
.req { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 6px; align-items: baseline; font: 15px var(--f-texto); color: var(--tinta-2); }
.req .marca { color: var(--tenue); }
.req.ok .marca { color: var(--bien); }
.req .carril { grid-column: 2 / -1; height: 5px; margin: 3px 0 2px; }
.req .carril > i { --c: var(--acento); }
.req .req-opciones { grid-column: 2 / -1; margin: 2px 0 4px; padding-left: 16px; font-size: 13.5px; line-height: 1.35; }
.req.ok .carril > i { --c: var(--bien); }
.listo { font: italic 15px var(--f-texto); color: var(--bien); }

/* --- Diario ------------------------------------------------------------------------------------ */
.vinculo { margin: 0; font: italic 15.5px var(--f-texto); color: var(--tinta-2); }
.capitulo { font: 15.5px/1.6 var(--f-texto); color: var(--tinta-2); padding-left: 12px; border-left: 1.5px solid var(--trazo); }
.capitulo strong { color: var(--rubrica); font-family: var(--f-titulo); }
.dia-diario { display: grid; gap: 10px; }
.dia-diario + .dia-diario { margin-top: 8px; }
.dia-diario h4 { margin: 0; font: 500 13px var(--f-titulo); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rubrica); }
.entrada-diario { display: grid; gap: 2px; }
.entrada-diario .cuando { font: 13px var(--f-ui); color: var(--tenue); }
.ambiente { margin: 6px 0 0; font-size: 13.5px; }
.pistas li { font: 15px/1.5 var(--f-texto); color: var(--tinta-2); }
.entrada-diario p { margin: 0; font: 15.5px/1.55 var(--f-texto); color: var(--tinta-2); }

/* --- Mapa: tinta sobre papel ------------------------------------------------------------------- */
.mapa { border-radius: var(--radio); background: color-mix(in srgb, var(--hoja-2) 55%, transparent); overflow: hidden; display: grid; position: relative; }
.mapa-grande { height: 100%; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.mapa-grande .mapa-lienzo { height: 100%; }
.mapa-selector { display: flex; gap: 2px; padding: 4px; border-bottom: 1px dashed color-mix(in srgb, var(--trazo) 80%, transparent); flex-wrap: wrap; }
.mapa-selector button { background: none; border: 0; border-radius: var(--radio); padding: 3px 9px; font: 13.5px var(--f-titulo); letter-spacing: 0.04em; color: var(--tenue); }
.mapa-selector button[aria-pressed="true"] { color: var(--tinta); background: var(--hoja); }
.mapa-subir { color: var(--tenue); }
.mapa-lienzo { position: relative; touch-action: none; overflow: hidden; min-width: 0; }
.mapa svg { display: block; width: 100%; height: auto; user-select: none; cursor: grab; }
.mapa svg:active { cursor: grabbing; }
.mapa-controles { position: absolute; right: 6px; top: 6px; display: grid; gap: 4px; }
.mapa-controles button { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--trazo); background: var(--hoja); color: var(--tinta-2); font-size: 15px; line-height: 1; }
.mapa-controles button:hover { color: var(--acento); border-color: var(--acento); }
.ruta { fill: none; stroke: var(--tinta-2); stroke-width: 1.4; stroke-linecap: round; opacity: 0.5; filter: var(--pluma); }
.ruta.camino { stroke-width: 2.2; }
.ruta.sendero { stroke-dasharray: 3 4; }
.ruta.peligro { stroke: var(--mal); opacity: 0.7; }
/* Los sitios (BV5): un disco a pluma con su icono; el PJ, en rúbrica y con su «Tú»; lo elegido, con el camino hasta allí. */
.ruta.niebla { stroke-dasharray: 1 5; opacity: 0.35; }
.ruta-elegida { fill: none; stroke: var(--rubrica); stroke-width: 4.5; stroke-linecap: round; opacity: 0.7; filter: var(--pluma); }
.sitio { cursor: pointer; outline: none; }
.sitio .diana { fill: transparent; }
.sitio .disco { fill: var(--hoja); stroke: var(--tinta-2); stroke-width: 1.6; filter: var(--pluma); }
.sitio .icono-sitio { fill: none; stroke: var(--tinta-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.sitio.semilla .disco { stroke: var(--tenue); stroke-dasharray: 3 2; }
.sitio.semilla .icono-sitio { stroke: var(--tenue); }
.sitio .contorno { fill: none; stroke: var(--tenue); stroke-width: 1; opacity: 0.55; }
.sitio.aqui .disco { stroke: var(--rubrica); stroke-width: 2.2; fill: color-mix(in srgb, var(--rubrica) 10%, var(--hoja)); }
.sitio.aqui .icono-sitio { stroke: var(--rubrica); }
.sitio .halo { fill: none; stroke: var(--rubrica); stroke-width: 1.3; opacity: 0.5; filter: var(--pluma); }
.sitio .anillo { fill: none; stroke: var(--rubrica); stroke-width: 1.5; stroke-dasharray: 3 2; }
.sitio.elegido .disco { stroke: var(--rubrica); fill: color-mix(in srgb, var(--rubrica) 14%, var(--hoja)); }
.sitio:hover .disco, .sitio:focus-visible .disco { stroke: var(--acento); stroke-width: 2.4; }
/* El papel del mapa (BV5): del estilo del mundo, velado para que manden los sitios. */
.fondo-mapa { opacity: 0.5; pointer-events: none; }
.fondo-mapa.plano { opacity: 0.75; }
:root[data-theme="dark"] .fondo-mapa { opacity: 0.14; filter: invert(1) sepia(0.4); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fondo-mapa { opacity: 0.14; filter: invert(1) sepia(0.4); } }
/* Un plano por dentro: cada estancia, una sala de muro doble; las puertas, trazos cortos. */
.sitio .sala { fill: color-mix(in srgb, var(--hoja) 88%, transparent); stroke: var(--tinta-2); stroke-width: 2.2; filter: var(--pluma); }
.sitio .sala-muro { fill: none; stroke: var(--tinta-2); stroke-width: 0.8; opacity: 0.6; }
.sitio .sala.aqui { stroke: var(--rubrica); fill: color-mix(in srgb, var(--rubrica) 10%, var(--hoja)); }
.sitio.elegido .sala { stroke: var(--rubrica); stroke-width: 2.8; }
.sitio:hover .sala, .sitio:focus-visible .sala { stroke: var(--acento); }
.sitio.semilla .sala { stroke-dasharray: 5 3; stroke: var(--tenue); }
.nombre-mapa.en-sala { paint-order: normal; stroke: none; pointer-events: none; }
.ruta.puerta { stroke-width: 3; stroke-dasharray: 2 6; opacity: 0.65; }
/* Cambiar de nivel con el zoom: lo de dentro se acerca, lo de fuera se aleja. */
.mapa-lienzo.entra-dentro svg { animation: entra-dentro 0.45s ease-out; }
.mapa-lienzo.entra-fuera svg { animation: entra-fuera 0.45s ease-out; }
@keyframes entra-dentro { from { opacity: 0; scale: 0.82; } to { opacity: 1; scale: 1; } }
@keyframes entra-fuera { from { opacity: 0; scale: 1.18; } to { opacity: 1; scale: 1; } }
.mapa-aviso { position: absolute; left: 50%; top: 10px; translate: -50% 0; padding: 4px 12px; border-radius: 999px; background: var(--elevada); box-shadow: var(--sombra); font: 13px var(--f-ui); color: var(--tinta-2); opacity: 0; pointer-events: none; white-space: nowrap; }
.mapa-aviso.visible { animation: aviso-mapa 1.8s ease-out; }
@keyframes aviso-mapa { 0% { opacity: 0; } 12%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mapa-lienzo.entra-dentro svg, .mapa-lienzo.entra-fuera svg { animation: none; } }
.nombre-mapa { font-family: var(--f-titulo); letter-spacing: 0.03em; fill: var(--tinta-2); paint-order: stroke; stroke: color-mix(in srgb, var(--hoja) 92%, var(--hoja-2)); stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }
.nombre-mapa.aqui { fill: var(--tinta); }
.nombre-mapa.elegido { fill: var(--rubrica); }
.tu { pointer-events: none; }
.tu rect { fill: var(--rubrica); }
.tu text { fill: var(--hoja); font: 700 12px var(--f-titulo); letter-spacing: 0.04em; }
/* Lo que aún no conoce: una mancha de niebla, sin nombre. */
.niebla { cursor: pointer; outline: none; }
.niebla-mancha { fill: color-mix(in srgb, var(--trazo) 70%, var(--hoja-2)); opacity: 0.55; filter: blur(7px); }
.niebla-signo { fill: var(--tenue); font-family: var(--f-titulo); pointer-events: none; }
.niebla.elegido .niebla-mancha, .niebla:hover .niebla-mancha, .niebla:focus-visible .niebla-mancha { opacity: 1; }
.mapa-leyenda { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 12.5px var(--f-ui); color: var(--tenue); padding: 5px 8px; border-top: 1px dashed color-mix(in srgb, var(--trazo) 80%, transparent); }
.mapa-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--hoja); box-shadow: inset 0 0 0 1.5px var(--tinta-2); display: inline-block; }
.punto.aqui { background: var(--rubrica); box-shadow: none; }
.punto.semilla { background: none; box-shadow: inset 0 0 0 1.5px var(--tenue); }
.punto.niebla { width: 11px; height: 11px; background: color-mix(in srgb, var(--trazo) 75%, var(--hoja-2)); box-shadow: none; filter: blur(1.5px); }
.raya { width: 16px; height: 0; border-top: 2px solid var(--mal); display: inline-block; }
.raya.peligro { border-top-style: dashed; }
.raya.camino { border-top: 2.5px solid var(--tinta-2); opacity: 0.6; }
.raya.sendero { border-top: 2px dashed var(--tinta-2); opacity: 0.6; }
/* La ficha del sitio elegido flota sobre el mapa, abajo (BV5). */
.mapa-ficha { position: absolute; left: 8px; right: 8px; bottom: 8px; max-width: 460px; margin-inline: auto; padding: 10px 12px; border: 1px solid var(--trazo); border-radius: calc(var(--radio) * 2 + 4px); background: var(--elevada); box-shadow: var(--sombra); display: grid; gap: 6px; font: 14.5px var(--f-texto); }
.mapa-ficha.aviso { padding: 4px 10px; box-shadow: none; background: color-mix(in srgb, var(--elevada) 85%, transparent); font-size: 13px; right: 46px; }
.mapa:not(.mapa-grande) .mapa-ficha { position: static; margin: 6px 8px 8px; max-width: none; box-shadow: none; }
.mapa:not(.mapa-grande) .mapa-ficha.aviso { margin: 0 8px 4px; border: 0; background: none; padding: 2px 4px; }
.mapa-ficha p { margin: 0; }
.mapa-ficha-cabecera { display: flex; gap: 8px; align-items: baseline; }
.mapa-ficha-cabecera strong { font: 500 16px var(--f-titulo); letter-spacing: 0.04em; }
.mapa-ficha-cerrar { margin-left: auto; align-self: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--trazo); background: none; color: var(--tenue); font-size: 16px; line-height: 1; cursor: pointer; }
.mapa-ficha-cerrar:hover { color: var(--acento); border-color: var(--acento); }
.mapa-ficha-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.mapa-ficha-botones .accion { min-height: 36px; }
details.plegable > summary { list-style: none; cursor: pointer; font: 500 13.5px var(--f-titulo); letter-spacing: 0.14em; color: var(--rubrica); display: flex; justify-content: space-between; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::after { content: "Mostrar"; font: italic 13.5px var(--f-texto); letter-spacing: 0; color: var(--tenue); }
details.plegable[open] > summary::after { content: "Ocultar"; }
details.plegable[open] > summary { margin-bottom: 8px; }

/* La mesa mientras llega la partida (los renglones, en estilos.css). */
.turno.esqueleto .narracion .esq { height: 1em; margin: 0.55em 0; }
.ficha-esqueleto { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 4px 0; }
.pestana-esqueleto { padding: 14px 0; }
.lugar-nombre .esq { display: inline-block; vertical-align: middle; margin: 0; }


/* Una ronda jugada desde el tablero (G4): golpe a golpe, con su marca, sin párrafo. */
.turno.ronda .jugador { margin-bottom: 6px; }
.turno.ronda .narracion { margin-bottom: 18px; white-space: normal; }
.parte-ronda { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font: 15.5px/1.5 var(--f-ui); }
.parte-ronda li { display: flex; gap: 10px; align-items: baseline; animation: golpe 0.35s ease-out both; }
.parte-ronda li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; translate: 0 -1px; background: var(--tenue); opacity: 0.6; }
.parte-ronda li.das::before { background: var(--bien); opacity: 1; }
.parte-ronda li.recibes::before { background: var(--mal); opacity: 1; }
.parte-ronda li.fallo { color: var(--tenue); }
.parte-ronda li.decisivo { font-weight: 600; color: var(--rubrica); }
.parte-ronda li.decisivo::before { background: var(--rubrica); border-radius: 2px; rotate: 45deg; opacity: 1; }
@keyframes golpe { from { opacity: 0; translate: -6px 0; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .parte-ronda li { animation: none; } }

/* Lo que cambia en la ficha se ve cambiar: la cifra que aparece y se va, y la barra que destella. */
.recurso-cabecera .delta { margin-left: auto; font: 600 13px var(--f-ui); animation: delta 2.4s ease-out both; }
.recurso.sube .delta { color: var(--bien); }
.recurso.cae .delta { color: var(--mal); }
.recurso.sube .carril, .recurso.cae .carril { animation: destello 1.1s ease-out; }
.recurso.cae .carril { --destello: var(--mal); }
.recurso.sube .carril { --destello: var(--bien); }
@keyframes delta { 0% { opacity: 0; translate: 0 4px; } 12%, 70% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes destello { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--destello) 60%, transparent); } 100% { box-shadow: 0 0 0 6px transparent; } }

/* El turno que llega se asienta: lo que dice el jugador, las tarjetas, lo que cambió y lo que hay que decidir, uno tras otro. */
.turno.vivo > .jugador { animation: entra-jugador 0.35s ease-out both; }
.turno.vivo > .tarjetas, .turno.vivo > .tarjeta { animation: subir 0.6s 0.25s cubic-bezier(.2,.8,.2,1) both; }
.turno.vivo .cambios > * { animation: brotar 0.4s cubic-bezier(.3,1.4,.5,1) both; }
.turno.vivo .cambios > :nth-child(2) { animation-delay: 0.08s; }
.turno.vivo .cambios > :nth-child(3) { animation-delay: 0.16s; }
.turno.vivo .cambios > :nth-child(4) { animation-delay: 0.24s; }
.turno.vivo .cambios > :nth-child(n+5) { animation-delay: 0.32s; }
.turno.vivo > .decisiones { animation: subir 0.5s 0.4s ease-out both; }
/* Los nombres y lo que pesa, subrayados a pincel al aparecer. */
.narracion .parrafo strong { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--aviso) 26%, transparent) 62%) no-repeat 0 0 / 100% 100%; animation: subrayar 0.9s 0.35s ease-out both; }
@keyframes entra-jugador { from { opacity: 0; translate: 10px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes subir { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes brotar { from { opacity: 0; scale: 0.85; } to { opacity: 1; scale: 1; } }
@keyframes subrayar { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
/* El rumbo nuevo se nota un momento. */
.rumbo.nuevo { animation: rumbo-nuevo 1.6s ease-out; }
@keyframes rumbo-nuevo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rubrica) 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
/* La lámina del sitio nuevo entra fundiéndose. */
.escena-imagen.nueva, .tarjeta.escenario img.nueva { animation: fundir 0.8s ease-out both; }
@keyframes fundir { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .turno.vivo > *, .turno.vivo .cambios > *, .narracion .parrafo strong, .recurso-cabecera .delta, .recurso .carril, .rumbo.nuevo, .escena-imagen, .tarjeta.escenario img { animation: none !important; }
}

/* Compartir el retrato con la Biblioteca (BV6). */
.seccion.roster { display: grid; gap: 8px; }
.seccion.roster .permiso { display: flex; gap: 8px; align-items: baseline; font: 14px/1.4 var(--f-ui); }
.seccion.roster .accion { justify-self: start; }

/* --- Las pistas de la primera vez (G17) ------------------------------------------------------ */
.pista { position: fixed; z-index: 40; width: min(300px, calc(100vw - 24px)); padding: 10px 12px; background: var(--elevada); border: 1.5px solid var(--acento); border-radius: var(--radio); box-shadow: var(--sombra); font: 14px/1.4 var(--f-ui); }
.pista p { margin: 0; }
.pista-botones { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }

/* Lo que nombra el relato y se puede tocar (G3): un subrayado de puntos discreto, que no corta la lectura. */
.narracion .tocable { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer;
  text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, var(--trazo) 70%, transparent); text-underline-offset: 4px; }
.narracion .tocable:hover, .narracion .tocable[aria-expanded="true"] { color: var(--acento); text-decoration-color: var(--acento); }
.narracion .tocable:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 2px; }
.menu-tocable { position: absolute; z-index: 60; min-width: 170px; max-width: min(280px, calc(100vw - 16px)); display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--hoja); color: var(--tinta); border: 1px solid var(--trazo); border-radius: var(--radio); box-shadow: var(--sombra); animation: asentar 0.18s ease-out both; }
.menu-tocable-titulo { font: 600 13px/1.3 var(--f-ui); padding: 4px 8px 6px; opacity: 0.75; border-bottom: 1px solid color-mix(in srgb, var(--trazo) 50%, transparent); margin-bottom: 2px; }
.menu-tocable button { background: none; border: 0; text-align: left; font: inherit; font-family: var(--f-ui); font-size: 15px; color: inherit; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.menu-tocable button:hover, .menu-tocable button:focus-visible { background: color-mix(in srgb, var(--acento) 14%, transparent); outline: none; }
.menu-tocable .tenue { margin: 4px 8px 6px; font-size: 14px; }

/* Capítulos (G16): cada día empieza con su lámina, el día y el sitio; el primer párrafo, con letra capital. */
.capitulo-relato { margin: 34px 0 22px; display: grid; gap: 12px; justify-items: center; text-align: center; }
.capitulo-relato:first-child { margin-top: 6px; }
.capitulo-lamina { width: 100%; max-width: 640px; height: clamp(110px, 18vh, 170px); object-fit: cover; object-position: center 45%; border-radius: var(--radio);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent); }
.capitulo-rotulo { display: grid; gap: 2px; }
.capitulo-dia { font: 500 12.5px/1.4 var(--f-titulo); letter-spacing: 0.12em; color: var(--rubrica); }
.capitulo-lugar { font: 600 clamp(22px, 2.6vw, 28px)/1.15 var(--f-titulo); color: var(--tinta); }
.capitulo-rotulo::after { content: ""; justify-self: center; width: 64px; height: 1.5px; margin-top: 8px; background: var(--rubrica); opacity: 0.5; }
.narracion.capitular::first-letter { float: left; font: 600 3.3em/0.82 var(--f-titulo); margin: 0.06em 0.09em 0 0; color: var(--rubrica); }