/* Tablero isométrico (iso.js): lo usan iso.html y el mapa de la guerra (apps/web, desde /juego/). */
.iso-board { width: 100%; height: auto; display: block; touch-action: pan-y; user-select: none; }
/* escudos de Orden clonados de la web (OrderEmblem): contorno claro, porque aquí van sobre la ficha oscura y los paños;
   el paño blanco le agrega su propio borde negro (iso.js, CLOTH) */
.iso-board, .iso-tip { --emblem-edge: #efe3c8; }
/* tablero */
.tile-hit { fill: transparent; }
.sel { fill: rgba(255, 215, 90, .35); stroke: #ffd75a; stroke-width: 2.5; pointer-events: none; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { fill: rgba(255, 215, 90, .15); } }
.piece:hover .body { filter: brightness(1.12); }
.piece.out { opacity: 0; transition: opacity .4s; pointer-events: none; }

/* líneas */
.line { fill: none; stroke: #ffd75a; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 9 7; animation: dash .8s linear infinite; filter: drop-shadow(0 0 3px #ffb300); pointer-events: none; transition: opacity 2.5s ease-in; }
.line.fade { opacity: 0; }
.line.team-w { stroke: #fff1c9; }
.line.team-b { stroke: #ff8a5c; filter: drop-shadow(0 0 3px #d63a00); }
@keyframes dash { to { stroke-dashoffset: -16; } }

/* flechas */
.arrow { filter: drop-shadow(0 1px 1px #0008); }
.arrow .shaft { stroke: #d9b27a; stroke-width: 1.8; stroke-linecap: round; }
.arrow .tip { fill: #cfd3d8; stroke: #333; stroke-width: .5; }
.arrow.stuck { opacity: 0 !important; transition: opacity .15s ease-out; }
.arrow .fletch { fill: none; stroke: #f2ead8; stroke-width: 1.4; stroke-linecap: round; }

/* globo de ayuda: ficha de castillo al pasar por una bandera (mismo estilo que la ficha de facción) o texto corto */
.iso-tip { position: fixed; z-index: 9; width: 340px; padding: 14px 16px; background: rgba(13, 11, 9, .88); border: 1px solid #6b5636; border-radius: 12px; pointer-events: none; font-size: 13px; line-height: 1.45; }
.iso-tip[hidden] { display: none; }
.iso-tip p { margin: 0; }
.ct-castle { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ct-castle img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 1px 3px #000a); }
.ct-castle h3 { margin: 0; font-size: 18px; color: #d4a437; }
.ct-owner { display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; padding-bottom: 10px; border-bottom: 1px solid #6b5636; }
.ct-order { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ct-order strong, .ct-prize strong { color: #d4a437; }
.ct-shield svg { width: 30px; height: auto; display: block; filter: drop-shadow(0 1px 2px #000a); }
.ct-prize { padding-top: 10px; }
.iso-tip { color: #efe3c8; font-family: system-ui, sans-serif; }
/* ficha de fortaleza del mapa de la guerra: como las tarjetas «Fortalezas» de la portada */
.ct-fort { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; margin-bottom: 0; padding-bottom: 10px; }
.ct-name { display: grid; gap: 1px; min-width: 0; }
.ct-name h3 { font: 700 16px Georgia, serif; line-height: 1.2; }
/* marca del castillo junto a su nombre (la misma que la bandera chica y «Flancos») */
.ct-castle h3:has(.ct-mark) { display: flex; align-items: center; gap: 6px; }
.ct-mark { flex: none; width: 20px; height: 20px; overflow: visible; }
.ct-name span, .ct-muted { color: #b9aa90; }
/* la marca arriba de la imagen del castillo (que baja para dejarle lugar) y las semanas, chicas y discretas */
.ct-pic { display: grid; justify-items: center; align-self: start; gap: 2px; }
.ct-pic .ct-mark { width: 18px; height: 18px; }
.ct-held { font: italic 11.5px/1.3 Georgia, serif; color: #8f8370; }
.ct-tags { display: grid; justify-items: end; gap: 4px; }
.ct-chip { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 4px; border: 1px solid #8a7c68; white-space: nowrap; }
.ct-chip-w { background: #fbf6ea; color: #15120f; }
.ct-chip-b { background: #15120f; color: #fbf6ea; border-color: #6b5636; }
.ct-status { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.ct-ok { background: #d6efd2; color: #1f5a25; }
.ct-bad { background: #f6d6cf; color: #7a2418; }
.ct-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid #6b5636; }
.ct-cell { display: grid; align-content: start; gap: 4px; padding: 8px 10px 0 0; min-width: 0; }
.ct-cell + .ct-cell { border-left: 1px solid #6b5636; padding-left: 10px; }
.ct-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #b9aa90; }
.ct-val { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ct-val .ct-shield svg { width: 30px; }
.ct-text { display: grid; min-width: 0; line-height: 1.25; }
.ct-strong { font-weight: 700; color: #d4a437; }
.ct-text small { color: #b9aa90; }
.iso-tip.iso-tip-text { width: auto; max-width: 280px; padding: 7px 11px; }

/* estado de la guerra: columna destacada, frente, despliegue, trincheras y topónimos */
.iso-hl { fill: rgba(255, 215, 90, .2); stroke: none; animation: pulse 1.6s ease-in-out infinite; }
/* borde punteado alrededor de la columna destacada: las rayas corren a lo largo del contorno, como si girara */
.iso-hl-edge { fill: none; stroke: #ffd75a; stroke-width: 2.6; stroke-dasharray: 9 6; stroke-linejoin: round; filter: drop-shadow(0 0 2px #ffb300); animation: iso-hl-march .8s linear infinite; }
@keyframes iso-hl-march { to { stroke-dashoffset: -15; } }
@media (prefers-reduced-motion: reduce) { .iso-hl-edge { animation: none; } }
.iso-front { stroke: #ffd75a; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 3px #ffb300); }
.iso-deploy { stroke: #e0604f; stroke-width: 2.4; stroke-dasharray: 7 5; stroke-linecap: round; }
.iso-deploy-wall { fill: rgba(224, 96, 79, .32); stroke: none; }
.iso-deploy-top { stroke: #e0604f; stroke-width: 1.6; stroke-linecap: round; }
.iso-pennant-pole { stroke: #3a3026; stroke-width: 1.6; stroke-linecap: round; }
.iso-pennant { fill: #e0604f; stroke: #7a2418; stroke-width: .8; stroke-linejoin: round; }
.iso-badge { fill: rgba(13, 11, 9, .85); stroke: #d4a437; stroke-width: 1.2; }
.iso-badge-text { font: 700 11px system-ui, sans-serif; fill: #f0b35e; }
.iso-toponym { font: italic 10px Georgia, serif; fill: #fff3d6; paint-order: stroke; stroke: #000a; stroke-width: 2.6px; }
/* peón del captor en el castillo conquistado: resplandor que late, como el panel del bando que juega en las replays (filtro en iso.js) */
.iso-captor { filter: url(#captor-glow); }
/* cartel «Conquistado» bajo ese peón: del color de la facción del captor, con la letra en dorado */
.iso-conq { pointer-events: none; }
.iso-conq rect { stroke: #d4a437; stroke-width: 1; }
.iso-conq text { font: 700 8.5px system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.iso-conq-w rect { fill: #f6f0e4; }
.iso-conq-w text { fill: #8f6a1c; }
.iso-conq-b rect { fill: #221d19; }
.iso-conq-b text { fill: #d4a437; }
@media (prefers-reduced-motion: reduce) { .iso-captor { filter: url(#captor-glow-still); } }
.iso-board [data-col] { cursor: pointer; }
.iso-board.no-click [data-col] { cursor: inherit; }
/* se gira al arrastrarlo (iso.js, opts.drag o el prototipo) */
.iso-board.iso-drag, .iso-board.iso-drag.no-click [data-col] { cursor: grab; }
.iso-board.iso-dragging, .iso-board.iso-dragging [data-col] { cursor: grabbing; }

/* zoom táctil (iso.js): el contenedor recorta el mapa agrandado ×1,75; agrandado, el dedo lo mueve (sin transición) */
.iso-zoom-stage { overflow: hidden; }
.iso-board { transform-origin: 0 0; transition: transform .3s ease; -webkit-touch-callout: none; }
.iso-board.iso-zoomed { touch-action: none; }
.iso-board.iso-panning { transition: none; }
@media (prefers-reduced-motion: reduce) { .iso-board { transition: none; } }

/* modo liviano (teléfonos, iso.js): sin filtros ni animaciones que obliguen a repintar el tablero mientras gira */
.iso-lite .line, .iso-lite .line.team-b, .iso-lite .iso-front, .iso-lite .arrow { filter: none; }
.iso-lite .sel, .iso-lite .iso-hl { animation: none; }
.iso-lite .piece:hover .body { filter: none; }