:root {
  /* Paleta y tipos de la guía de estilo (dev-docs/ui-kit.html): tema Noche; el claro (Pergamino) más abajo.
     El tablero, las cartas y las cajas de color vienen de la muestra de la portada (muestra.css). */
  --noche: #14110E; --superficie: #1E1A15; --muro: #2A241D; --muro-claro: #3A3128;
  --pergamino: #F5EEDC; --piedra: #D6D6CE; --ceniza: #B4B4AB; --humo: #8E8E85; --apagado: #6C6C64;
  --ambar: #F0A93C; --oxido: #B0492A; --oxido-claro: #E07A55;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: Geist, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --glyph: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", "Apple Symbols", serif;
  --foco: 0 0 0 3px rgba(240, 169, 60, .35);
  /* colores de los usos de las cartas, como en la muestra: invocar (oro), dados y movimiento (azul) */
  --k-inv: #e3a94b; --k-dad: #6fa8dc;
  --bg: #14110E;
  --panel: #1E1A15;
  --panel-2: #2A241D;
  --line: #3A3128;
  --line-soft: #2A241D;
  --text: #F5EEDC;
  --muted: #8E8E85;
  --accent: #F0A93C;
  --accent-2: #F0A93C;
  --good: #8DBF7A;
  --bad: #E07A55;
  --light-sq: #ECE3CC;
  --dark-sq: #B5BD95;
  --white-team: #FBF7EC;
  --black-team: #1A1A18;
  --sq: min(66px, calc((100vw - 32px) / 8), calc((100vh - 230px) / 8)); /* con cabecera; en la partida, body.in-game */
  --bar-h: 50px; /* fila de arriba de cada columna en la partida: barra del rival, contexto y herramientas (a la misma altura) */
  --red-suit: #A8452C;
  --card: #F3ECDD;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--sans); }
button { font: inherit; }
[hidden] { display: none !important; }

/* ---------- Cabecera (solo fuera de la partida: pantalla de inicio y tutorial) ---------- */
#top { display: flex; align-items: center; gap: 16px 24px; padding: 10px 24px; background: var(--top-bg); border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.brand { font: 400 20px/1 var(--serif); letter-spacing: .3em; color: var(--brand); }
a.brand { text-decoration: none; } /* lleva a la portada o, con sesión en la web, a la plaza (marca.js) */
a.brand:hover { color: var(--accent-2); }
.brand span { font: 400 12px var(--sans); letter-spacing: 0; color: var(--muted); margin-left: 6px; }
body.in-game #top { display: none; }
.top-sp { flex: 1; }
.top-actions { display: flex; align-items: center; gap: 8px; }
/* Íconos de línea de las herramientas (registro, sonido, tema, pantalla completa, menú) */
.top-actions .btn.icon { display: inline-flex; align-items: center; justify-content: center; height: 34px; }
.top-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#btn-theme .ic-moon, :root[data-theme="light"] #btn-theme .ic-sun { display: none; }
:root[data-theme="light"] #btn-theme .ic-moon { display: inline; }
#btn-fs { display: none; } /* solo en la partida */
#btn-fs .fs-off, body.fs-on #btn-fs .fs-on { display: none; }
body.fs-on #btn-fs .fs-off { display: inline; }

/* ---------- Partida: sin cabecera ----------
   Cada columna lateral empieza con una fila de la altura de la barra del rival, así los dos paneles quedan a ras del
   tablero: a la izquierda, el contexto (marca y, si hay, condición, puzle o sala); a la derecha, las herramientas.
   Sin cabecera, el tablero crece con la pantalla: 176 px de alto = márgenes, las dos barras de jugador y el marco;
   660 px de ancho = las dos columnas laterales a 280 px, los huecos y el marco. */
body.in-game { --sq: min(80px, calc((100vw - 660px) / 8), calc((100vh - 176px) / 8)); }
.gcol .panel { max-height: calc(100vh - 48px - var(--bar-h)); }
.gcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.game-row { height: var(--bar-h); display: flex; align-items: center; gap: 8px; min-width: 0; }
#game-ctx { overflow: hidden; }
.ctx-brand { flex: none; margin: 0 8px 0 2px; font-size: 18px; }
.ctx-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel); font: 500 13px var(--sans); white-space: nowrap; cursor: help; }
.ctx-chip .k { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ctx-chip b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ctx-chip .sep { width: 1px; height: 12px; margin: 0 2px; background: var(--line); }
.ctx-chip.pz-stars { color: #e7b84a; letter-spacing: 2px; font-size: 14px; }
.ctx-chip.net-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.ctx-chip.net-tag.off .dot { background: var(--ambar); box-shadow: 0 0 0 3px rgba(240, 169, 60, .22); }
/* Herramientas: un solo grupo de botones de ícono sobre la superficie (06 · Botones, el ⋯ de la guía) */
#game-tools { justify-content: flex-end; }
#game-tools .top-actions { gap: 2px; padding: 4px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; }
#game-tools .btn { height: 34px; border-color: transparent; border-radius: 8px; color: var(--ceniza); }
#game-tools .btn:hover:not(:disabled) { background: var(--panel-2); border-color: transparent; color: var(--text); }
#game-tools .lang-btn { padding: 0 9px; }
#game-tools #btn-fs { display: inline-flex; position: relative; margin-left: 7px; }
#game-tools #btn-fs::before { content: ""; position: absolute; left: -5px; top: 8px; bottom: 8px; width: 1px; background: var(--line); } /* separa las de la partida de las de la página */
:root[data-theme="light"] #game-tools .btn { color: var(--muted); }
:root[data-theme="light"] #game-tools .btn:hover:not(:disabled) { color: var(--text); }

/* ---------- Botones ---------- */
/* 06 · Botones: secundario con borde, principal ámbar */
.btn { background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 7px 14px; font: 500 13px var(--sans); cursor: pointer; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.btn:focus-visible { outline: none; box-shadow: var(--foco); }
a.btn { display: inline-block; text-decoration: none; }
.btn:hover:not(:disabled) { border-color: var(--muted); }
.btn:disabled { background: var(--panel-2); border-color: transparent; color: var(--apagado); opacity: 1; cursor: not-allowed; }
.btn.primary { background: var(--ambar); border-color: var(--ambar); color: var(--noche); font-weight: 600; }
.btn.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(240, 169, 60, .3); }
.btn.ghost { background: transparent; }
.btn.small { padding: 4px 9px; font-size: 12px; border-radius: 8px; }
/* Acciones con cartas de «Acciones del turno» (J Explorador, ♠ Maniobra…): más que los chips, menos que el botón de dados */
.row.acts { margin-top: 8px; }
.btn.act { padding: 6px 12px; font-size: 13px; font-weight: 600; border-color: var(--ambar); border-radius: 10px; }
.btn.act:not(.primary) { background: rgba(240, 169, 60, .12); }
.btn.act:not(.primary):hover:not(:disabled) { background: rgba(240, 169, 60, .24); border-color: var(--ambar); }
.turn-chips .chip { border-radius: 8px; } /* mismo redondeo que los botones de acción */
/* Icono de carta junto a J, Q y K en los botones */
.card-ic { display: inline-block; box-sizing: border-box; width: .7em; height: .98em; border: 1.5px solid #fff; border-radius: 3px; background: linear-gradient(160deg, #fffdf5, #d9d2bd); box-shadow: 0 0 0 1px #0006, inset 0 0 0 1.5px #0003; vertical-align: -.15em; margin-right: .12em; transform: rotate(-6deg); }
.btn.danger { border-color: var(--oxido); color: var(--oxido-claro); }
.btn.danger:hover:not(:disabled) { background: rgba(176, 73, 42, .15); border-color: var(--oxido); }
.btn.on { background: rgba(240, 169, 60, .18); border-color: var(--ambar); }

/* ---------- Layout ---------- */
#game { display: grid; grid-template-columns: minmax(280px, 340px) auto minmax(280px, 340px); gap: 24px; padding: 20px 16px; align-items: start; justify-content: center; }
/* los paneles: superficie de la guía (radio 16) y, adentro, cajas como las de la muestra de la portada */
.panel { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 92px); overflow: auto; scrollbar-width: thin; }
.panel h3 { margin: 0 0 8px; font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--accent-2); }
.box { --c: var(--muted); background: var(--inset); border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 16px 12px; }
/* cajas de un uso de las cartas (k-inv: invocar, k-dad: dados y movimiento): borde y título del color de la muestra */
.box.k-inv { --c: var(--k-inv); } .box.k-dad { --c: var(--k-dad); }
.box.k-inv, .box.k-dad { border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 6%, var(--inset)); }
.panel .box.k-inv h3, .panel .box.k-dad h3 { color: var(--c); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
.row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.row-end { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.chip { display: inline-block; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); font: 500 11px/1.4 var(--mono); letter-spacing: .02em; background: var(--inset); }
.chip.ok { border-color: #4f7a43; color: #b9dcae; }
.chip.no { color: var(--apagado); text-decoration: line-through; }
.btn .sq-tag { opacity: .7; font-size: 11px; font-weight: 400; }
.team-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 6px; border: 1px solid #888; }
.team-dot.w { background: var(--white-team); }
.team-dot.b { background: var(--black-team); }
.teamhead { font: 400 22px/1.1 var(--serif); }

@media (max-width: 1100px) {
  #game { grid-template-columns: 1fr; }
  #center { order: -1; }
  .panel, .gcol .panel { max-height: none; }
  /* Partida en una sola columna: arriba el contexto y las herramientas en una fila, después el tablero y los paneles */
  body.in-game { --sq: min(80px, calc((100vw - 52px) / 8), calc((100vh - 234px) / 8)); }
  body.in-game #game { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding-top: 12px; }
  .gcol { display: contents; }
  #game-ctx { order: -3; }
  #game-tools { order: -2; }
  body.in-game #center { grid-column: 1 / -1; }
  body.in-game #left, body.in-game #right { grid-column: 1 / -1; }
}

/* ---------- Tablero ---------- */
#center { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* Pista sobre el tablero (módulo «pistas»): siempre 1 línea de alto, para que el tablero no salte; lo que no entra se corta con «…». */
#hint { height: 22px; line-height: 22px; max-width: calc(var(--sq) * 8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; color: var(--ceniza); font-size: 14px; font-weight: 400; }
/* el marco del tablero de la muestra (muestra.css .ms-board) */
#board-wrap { padding: 10px; background: #2a2620; border-radius: 14px; box-shadow: 0 24px 40px -14px rgba(0, 0, 0, .7); }
#board { display: grid; grid-template-columns: repeat(8, var(--sq)); grid-template-rows: repeat(8, var(--sq)); user-select: none; }
.sq { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sq.l { background: var(--light-sq); }
.sq.d { background: var(--dark-sq); }
.sq.center-sq::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px #0000000f; pointer-events: none; }
.sq .coord { position: absolute; font: 500 9px var(--mono); color: #0008; pointer-events: none; }
.sq .coord.f { right: 3px; bottom: 1px; }
.sq .coord.r { left: 3px; top: 1px; }
/* Casillas de muro: la casilla normal, oscurecida (el color del muro lo da su contorno) */
.sq.wall-w::before, .sq.wall-b::before { content: ""; position: absolute; inset: 0; background: #0000008c; pointer-events: none; }

.piece { font-size: calc(var(--sq) * .78); line-height: 1; font-family: var(--glyph); font-variant-emoji: text; transition: transform .15s; z-index: 1; pointer-events: none; }
/* las piezas de la muestra: blancas en marfil con contorno, negras en tinta */
.piece.w { color: #fbf7ee; text-shadow: 0 0 1px #2a2620, 1px 1px 0 #2a2620, -1px -1px 0 #2a2620, 1px -1px 0 #2a2620, -1px 1px 0 #2a2620; }
.piece.b { color: #1b1813; text-shadow: 0 0 1px #fff6; }
.piece.down { transform: rotate(180deg) scale(.9); filter: grayscale(1) brightness(.8); opacity: .7; }
.sq.selected { background: var(--ambar); }
.sq.inspect { box-shadow: inset 0 0 0 3px #7fb0e0; }
.sq.flash { animation: flash .8s ease-out; }
@keyframes flash { from { box-shadow: inset 0 0 0 6px #fff; } to { box-shadow: inset 0 0 0 0 #fff0; } }

.badge { position: absolute; font: 600 10px/1 var(--mono); padding: 2px 3px; border-radius: 4px; z-index: 2; pointer-events: none; }
.badge.st { right: 2px; top: 2px; width: 16px; height: 16px; box-sizing: border-box; padding: 2px 0 0; display: flex; align-items: center; justify-content: center; background: #000a; color: #fff; font: 700 12px/1 var(--glyph); font-variant-emoji: text; } /* el símbolo del estado (FX.STATUS_ICON), centrado: el padding de arriba lo baja 1 px */
.badge.st.T { background: var(--ambar); color: var(--noche); }
.sq.selected .badge.st.T { background: var(--noche); color: var(--ambar); } /* la casilla seleccionada también es ámbar: se invierte para que se siga viendo */
.badge.st.E { background: #2f7a38; }
.badge.st.S { background: #a63a2b; }
.badge.st.H { background: #6b6b6b; }
.badge.shield { right: 2px; top: 2px; background: #2f7a38; color: #fff; }
.badge.fort { left: 2px; bottom: 2px; background: #555; color: #fff; }
.badge.wallrook { left: 2px; top: 2px; background: #8b5a2b; color: #fff; }

.mark { position: absolute; pointer-events: none; z-index: 3; }
/* alcance: el punto ámbar de la guía (19 · Casilla) */
.mark.move { width: 26%; height: 26%; border-radius: 50%; background: rgba(240, 169, 60, .85); box-shadow: 0 0 0 2px rgba(255, 255, 255, .4); }
.mark.extra { width: 30%; height: 30%; border-radius: 50%; background: #e0a030dd; box-shadow: 0 0 0 2px #fff8; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #1a1a1a; } /* ♣ marcha */
.mark.extra.jr { width: 36%; height: 36%; background: #76706bee; color: #fff; font-size: 13px; } /* marcha Junior: gris, con el icono de la carta */
.mark.extra.jr .jr-ic { vertical-align: 0; }
.mark.attack { inset: 7%; border-radius: 50%; border: 3px solid #d9583e; display: flex; align-items: flex-end; justify-content: center; }
.mark.attack.lose { border-style: dashed; border-color: #d27a2a; }
.mark.attack span { background: #d9583e; color: #fff; font: 600 11px/1 var(--mono); padding: 2px 4px; border-radius: 4px; margin-bottom: -8px; }
.mark.attack.lose span { background: #b26a22; }
.mark.place { inset: 18%; border-radius: 8px; border: 3px dashed #1aa5b8; background: #1aa5b822; }
.mark.zap { inset: 4px; border-radius: 6px; border: 4px solid #9b59d0; }
.mark.push { inset: 4px; border-radius: 6px; border: 4px dashed #1f7fd1; } /* K Empujón: pieza enemiga que se puede empujar */
.sq:hover .mark.move, .sq:hover .mark.extra { transform: scale(1.25); }


/* ---------- Dados ---------- */
.dice-row { display: flex; gap: 12px; align-items: stretch; }
.die { flex: 1; text-align: center; background: var(--inset); border: 1px solid var(--line-soft); border-radius: 12px; padding: 8px 6px; }
.die .lbl { font: 500 10px var(--mono); text-transform: uppercase; color: var(--muted); letter-spacing: .12em; }
.die .val { font: 400 40px/1.05 var(--serif); }
.die.mando .val { color: #8fc3ff; }
.die.fuerza .val { color: #ff9f8a; }
.die .nat { font: 400 11px var(--mono); color: var(--muted); }
.die .nat.mod { color: var(--accent-2); }
.die .row { justify-content: center; margin-top: 4px; }
.die.roll { animation: roll .35s ease-out; }
@keyframes roll { 0% { transform: rotate(-20deg) scale(.7); opacity: .3; } 100% { transform: none; opacity: 1; } }

/* ---------- Cartas ---------- */
/* Mano en una sola fila: con muchas cartas se solapan cada vez más en vez de agrandar el panel (--n = cantidad de cartas). */
.hand { display: flex; align-items: flex-start; container-type: inline-size; --n: 1; --cw: 54px; --reserve: 0px; padding-top: 6px; }
/* en la mano, más grandes (como la mano de la muestra): el número en serif y el palo debajo */
.hand > .card:not(.back):not(.jr) { width: 54px; height: 76px; font-size: 26px; }
.hand.hidden-hand { --cw: 30px; --reserve: 90px; }
.hand > .card { flex-shrink: 0; }
.hand > .card + .card { margin-left: min(5px, (100cqw - var(--reserve) - var(--n) * var(--cw)) / max(var(--n) - 1, 1)); }
.hand > .card:hover, .hand > .card.sel { z-index: 3; }
.hand.tight > .card { align-items: flex-start; padding-left: 4px; } /* solapadas: número y palo a la izquierda, visibles */
/* cartas: las de la muestra de la portada (pergamino, número en serif, sombra caída) */
.card { width: 44px; height: 62px; border-radius: 7px; background: var(--card); color: #1d1a16; border: 1px solid #cfc3aa; box-shadow: -2px 3px 8px rgba(0, 0, 0, .35); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; font: 400 21px/1 var(--serif); position: relative; transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-3px); }
.card.red { color: var(--red-suit); }
.card.sel { border-color: var(--ambar); box-shadow: 0 0 0 2px var(--noche), 0 0 0 4px var(--ambar), 0 0 16px rgba(240, 169, 60, .45); transform: translateY(-6px); }
.card.ace { background: linear-gradient(160deg, #fff4cf, #e8c66b); border-color: #b98a1f; }
/* dorso (19 · Carta): rayado muro con filete de pergamino */
.card.back { background: repeating-linear-gradient(45deg, #2a241d 0 4px, #3a3128 4px 8px); border: 2px solid #F5EEDC; cursor: default; }
.card.fig { background: #f0e9ff; }
/* chip de carta de la muestra (.ms-chip) */
.minicard { display: inline-block; padding: 1px 5px; border-radius: 4px; background: var(--card); color: #1d1a16; font: 600 12px/1.3 var(--mono); border: 1px solid #cfc3aa; }
.minicard.red { color: var(--red-suit); }
/* Versión Junior (Anexo J): carta de color, con la acción del color arriba y las recetas (piezas) abajo */
.card.jr-C, .minicard.jr-C, .jr-tip.jr-C { --jr: #bc3f1d; --jr-ink: #fff; }
.card.jr-D, .minicard.jr-D, .jr-tip.jr-D { --jr: #8a3a12; --jr-ink: #fff; }
.card.jr-H, .minicard.jr-H, .jr-tip.jr-H { --jr: #76706b; --jr-ink: #fff; }
.card.jr-S, .minicard.jr-S, .jr-tip.jr-S { --jr: #403c39; --jr-ink: #fff; }
/* Emojis 🔴 🟤 ⚪ ⚫ en textos y globos: se pintan con el color de su carta (resaltados de boardfx.js) */
::highlight(jr-C) { color: transparent; text-shadow: 0 0 0 #bc3f1d; }
::highlight(jr-D) { color: transparent; text-shadow: 0 0 0 #8a3a12; }
::highlight(jr-H) { color: transparent; text-shadow: 0 0 0 #76706b; }
::highlight(jr-S) { color: transparent; text-shadow: 0 0 0 #403c39, 0 0 1.5px #e9e2d4; } /* con un halo: el negro se ve también sobre el fondo oscuro */
.card.jr { --u: 44px; background: linear-gradient(var(--jr) 0 8px, #fbf7ee 8px); align-items: stretch; justify-content: flex-start; overflow: hidden; border-color: var(--jr); color: #2b2b2b; }
.card.jr .jr-top { display: block; flex: none; height: calc(var(--u) * .32); background: var(--jr); color: var(--jr-ink); font: 700 calc(var(--u) * .23)/calc(var(--u) * .32) system-ui, sans-serif; text-align: center; white-space: nowrap; }
.jr-ic { display: inline-block; height: 1em; vertical-align: -.14em; overflow: visible; }
.card.jr .jr-dots { font-size: .55em; letter-spacing: 1px; margin-left: 2px; vertical-align: .2em; }
.card.jr .jr-rec { flex: 1; display: flex; align-items: center; justify-content: center; font: 400 calc(var(--u) * .3)/1 'Segoe UI Symbol', 'DejaVu Sans', serif; }
.card.jr .jr-fx { display: block; flex: none; height: calc(var(--u) * .3); border-top: 1px solid color-mix(in srgb, var(--jr) 35%, transparent); color: var(--jr); font: 700 calc(var(--u) * .24)/calc(var(--u) * .3) system-ui, sans-serif; text-align: center; }
.card.jr.fig { background: linear-gradient(var(--jr) 0 8px, #fbf7ee 8px); }
.card.jr.fig .jr-fx { background: color-mix(in srgb, var(--jr) 14%, #fbf7ee); }
.card.jr.ace { background: linear-gradient(var(--jr) 0 8px, transparent 8px), linear-gradient(160deg, #fff4cf, #e8c66b); }
.card.jr.ace .jr-rec { font-size: calc(var(--u) * .45); color: #8a6a14; }
.card.jr.ace .jr-fx { border-top-color: #b98a1f55; }
.card.jr.sel { border-color: var(--accent); }
/* Recetas: una al lado de la otra (la doble, con la pieza dos veces y un poco encimada); con las cartas solapadas, una debajo de la otra */
.card.jr .jr-r + .jr-r { margin-left: .2em; }
.card.jr .jr-r.dbl { letter-spacing: -.3em; padding-right: .3em; }
/* En la mano, un 50% más grandes que las de la baraja; solapadas, el contenido va a la izquierda para que se vea */
.mode-junior .hand { --cw: 66px; }
.hand > .card.jr { --u: 66px; width: 66px; height: 93px; }
.hand.tight > .card.jr { padding-left: 0; align-items: stretch; }
.hand.tight > .card.jr .jr-top, .hand.tight > .card.jr .jr-fx { text-align: left; padding-left: 5px; }
.hand.tight > .card.jr .jr-top { padding-left: 2px; font-size: calc(var(--u) * .18); letter-spacing: -.02em; } /* que el icono entero (Marcha, Dado de pieza) quepa en lo que se ve */
.hand.tight > .card.jr .jr-dots { display: inline-block; writing-mode: vertical-lr; text-orientation: upright; letter-spacing: 0; line-height: 1; margin-left: 1px; vertical-align: middle; } /* solapadas: los puntos uno debajo del otro, para que no queden tapados */
.hand.tight > .card.jr .jr-rec { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding-left: 5px; font-size: calc(var(--u) * .24); }
.hand.tight > .card.jr .jr-r + .jr-r { margin-left: 0; }
.card.deck-top.jr { --u: 30px; }
.minicard.jr { border-color: var(--jr); }

/* ---------- Listas ---------- */
.list { display: flex; flex-direction: column; gap: 6px; }
.list .it { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.pglyph { font-size: 20px; line-height: 1; font-family: var(--glyph); font-variant-emoji: text; }
/* Contorno completo (8 direcciones) + sombra suave: se leen igual sobre fondo claro u oscuro. */
.pglyph { letter-spacing: 1px; }
.pglyph.w { color: var(--white-team); text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 2px 3px #0009; }
.pglyph.b { color: #111; text-shadow: 1px 0 0 #fff6, -1px 0 0 #fff6, 0 1px 0 #fff6, 0 -1px 0 #fff6, 0 0 3px #fff5; }
:root[data-theme="light"] .pglyph.b { text-shadow: 0 1px 2px #0004; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
#log { font-size: 12px; max-height: 280px; overflow: auto; display: flex; flex-direction: column; gap: 3px; }
#log .e { padding: 3px 8px; border-left: 2px solid var(--line); }
#log .e.w { border-left-color: var(--white-team); }
#log .e.b { border-left-color: #6d6d6d; background: #0002; }
#log .e.head { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); margin-top: 6px; }

/* ---------- Overlays ---------- */
.overlay { position: fixed; inset: 0; background: rgba(10, 8, 6, .85); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; overflow: auto; }
#modal { z-index: 70; background: rgba(10, 8, 6, .7); }
.modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 28px; max-width: 460px; width: 100%; box-shadow: inset 0 1px 0 rgba(245, 238, 220, .05), 0 30px 60px -20px rgba(0, 0, 0, .8); }
.modal-box.wide { max-width: 760px; }
.modal-box h1 { font: 400 44px/1 var(--serif); letter-spacing: .2em; color: var(--text); margin: 0; }
.modal-box h2 { margin: 0 0 12px; font: 400 32px/1.05 var(--serif); color: var(--text); }
.modal-box .sub { color: var(--muted); }
.modal-box .btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 16px; }
select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; }
.mods-wrap { margin-top: 12px; }
.mods-wrap > summary { cursor: pointer; color: var(--muted); padding: 4px 0; user-select: none; }
.mods-wrap > summary:hover { color: inherit; }
.mods-wrap[open] > summary { margin-bottom: 6px; }
.curtain-box { text-align: center; }
.curtain-box .big { font: 400 44px/1.05 var(--serif); margin: 8px 0; }
.rules { max-height: 90vh; overflow: auto; position: relative; }
.rules h3 { font: 400 24px/1.1 var(--serif); color: var(--text); margin: 24px 0 6px; }
.rules table { border-collapse: collapse; width: 100%; font-size: 13px; }
.rules th, .rules td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; }
.rules th { background: var(--panel-2); }
.rules .close { position: sticky; top: 0; float: right; z-index: 1; background: var(--panel); }

/* toast (14 · Toasts): superficie con borde óxido (error) o con el punto ámbar (aviso) */
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--superficie); color: var(--pergamino); border: 1px solid var(--oxido); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .7); padding: 12px 18px; border-radius: 12px; z-index: 90; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 90vw; }
#toast.show { opacity: 1; }
#toast.info { border-color: var(--muro-claro); box-shadow: inset 3px 0 0 var(--ambar), 0 20px 40px -10px rgba(0, 0, 0, .7); }

.red-suit { color: #E0715A; }
#left a { color: var(--accent-2); }

/* ---------- Ayudas (globos data-tip) ---------- */
#tip { position: fixed; z-index: 200; max-width: 360px; padding: 10px 12px; border-radius: 10px; background: var(--superficie); color: var(--text); border: 1px solid var(--muro-claro); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .7); font: 13px/1.5 var(--sans); white-space: pre-line; pointer-events: none; opacity: 0; transition: opacity .08s; left: -9999px; top: 0; }
#tip.show { opacity: 1; }
/* Globo completo de una carta Junior (boardfx.js jrTip): acción en su color, recetas y efecto de la figura */
#tip { --tipbg: var(--superficie); }
:root[data-theme="light"] #tip { --tipbg: #fffaf1; }
#tip .jr-tip { white-space: normal; width: 286px; max-width: 100%; }
/* Globo de una carta Junior: la carta impresa (carta-ejemplo.svg) y, debajo y fuera de ella, cómo se juega */
.jr-tip .jt-card { --ink: #15110C; position: relative; background: #F3E8CF; color: var(--ink); border: 1px solid var(--ink); border-radius: 12px; overflow: hidden; font: 13px/1.38 system-ui, sans-serif; }
.jr-tip .jt-sec { position: relative; display: flex; }
.jr-tip .jt-sec + .jt-sec { border-top: 1px dashed var(--ink); }
.jr-tip .jt-side { flex: none; width: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; background: #E6D8B8; border-right: 1px dashed var(--ink); }
.jr-tip .jt-lbl { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 10px/1 Georgia, 'Times New Roman', serif; letter-spacing: .24em; text-transform: uppercase; }
.jr-tip .jt-sic { display: flex; flex-direction: column; align-items: center; font: 400 13px/1.1 'Segoe UI Symbol', 'DejaVu Sans', sans-serif; }
.jr-tip .jt-body { flex: 1; min-width: 0; padding: 8px 10px 9px; }
.jr-tip .jt-act { background: var(--jr); color: var(--jr-ink); }
.jr-tip .jt-act .jt-side { background: transparent; }
.jr-tip .jt-ace { background: linear-gradient(160deg, #fff4cf, #e8c66b); color: var(--ink); }
.jr-tip .jt-h { display: flex; align-items: center; gap: 7px; font-size: 14.5px; }
.jr-tip .jt-ic { flex: none; min-width: 1.6em; text-align: center; font: 700 18px/1 system-ui, sans-serif; white-space: nowrap; }
.jr-tip .jt-tx { margin-top: 3px; }
.jr-tip .jt-rec .jt-tx { margin-top: 5px; font-size: 11.5px; line-height: 1.3; color: #6a5d4a; }
.jr-tip .jt-row { display: flex; align-items: center; gap: 8px; }
.jr-tip .jt-pcs { font: 400 24px/1.15 'Segoe UI Symbol', 'DejaVu Sans', serif; letter-spacing: 1px; }
.jr-tip .jt-more { color: #b5a98f; }
.jr-tip .jt-name { font-size: 12.5px; }
.jr-tip .jt-name i { font-style: normal; font-size: 10.5px; padding: 0 5px; border-radius: 8px; background: var(--ink); color: #F3E8CF; }
.jr-tip .jt-fig .jt-side { background: color-mix(in srgb, var(--jr) 22%, #E6D8B8); }
.jr-tip .jt-fig .jt-ic { color: var(--jr); }
.jr-tip .jt-act .jr-dots { font-size: 9px; letter-spacing: 1px; margin-left: 3px; vertical-align: 2px; }
/* Muescas en los bordes de cada línea de corte, como en la carta impresa */
.jr-tip .jt-sec + .jt-sec::before, .jr-tip .jt-sec + .jt-sec::after { content: ''; position: absolute; top: -7.5px; width: 14px; height: 14px; border-radius: 50%; background: var(--tipbg, #000); z-index: 1; }
.jr-tip .jt-sec + .jt-sec::before { left: -8px; }
.jr-tip .jt-sec + .jt-sec::after { right: -8px; }
.jr-tip .jt-note { margin: 7px 2px 0; font-size: 10.5px; line-height: 1.35; opacity: .7; }
.jr-tip .jt-note + .jt-note { margin-top: 3px; }
.badge.st, .badge.shield, .badge.wallrook { pointer-events: auto; cursor: help; }
h3[data-tip]::after, .legend-tip::after { content: " ⓘ"; font-size: 11px; color: var(--muted); font-weight: 400; }
h3[data-tip], .chip[data-tip], .die[data-tip] { cursor: help; }
/* Resumen de reglas: partes que dependen del modo completo (body.mode-full) */
body:not(.mode-full) .only-full, body.mode-full .only-basic { display: none; }
body:not(.mode-junior) .only-junior, body.mode-junior .not-junior { display: none; } /* versión Junior (Anexo J) */
body:not(.mode-cond) .only-cond { display: none; } /* … y del módulo «Condiciones de batalla» (body.mode-cond) */
body:not(.mode-obj) .only-obj, body.mode-obj .not-obj { display: none; } /* … y del módulo «Objetivos secretos» (body.mode-obj) */

.box-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.panel .box-head h3 { margin: 0; }
.hand .card.back { width: 30px; height: 44px; cursor: default; }
.hand .hidden-note { align-self: center; margin-left: 4px; }
.suit-help { cursor: help; }
.empty-note { padding: 6px 10px; border: 1px dashed var(--line); border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--text); background: var(--inset); text-align: center; }

/* ---------- Tema claro ---------- */
:root { --top-bg: #14110E; --inset: #191612; --brand: var(--piedra); }
:root[data-theme="light"] {
  /* Pergamino (20 · Tema claro): el óxido sustituye al ámbar como acento de texto; los botones principales, en tinta */
  --bg: #F5EEDC; --panel: #FBF7EC; --panel-2: #ECE3CC; --line: #DDD0B0; --line-soft: #E7DCC0;
  --text: #1A1A18; --muted: #6C6C64; --accent: #B0492A; --accent-2: #B0492A;
  --good: #3f7a32; --bad: #B0492A; --top-bg: #F5EEDC; --inset: #F7F1E3; --brand: #1A1A18;
  --black-team: #1A1A18; --red-suit: #A8452C; --k-inv: #a8741c; --k-dad: #2f6aa0;
}
:root[data-theme="light"] .btn.primary { background: #1A1A18; border-color: #1A1A18; color: #F5EEDC; border-radius: 999px; }
/* tema claro (20 · Pergamino de la guía): todos los botones en píldora, también «Tirar dados» */
:root[data-theme="light"] .btn, :root[data-theme="light"] .dsplit { border-radius: 999px; }
:root[data-theme="light"] .btn.primary:hover:not(:disabled) { box-shadow: none; }
:root[data-theme="light"] .lang-btn { color: #1A1A18; }
:root[data-theme="light"] .btn.on { background: rgba(176, 73, 42, .12); border-color: #B0492A; }
:root[data-theme="light"] .chip.ok { border-color: #6fae72; color: #2d6b31; }
:root[data-theme="light"] .chip.no { color: #a89a84; }
:root[data-theme="light"] .die.mando .val { color: #2d5f9c; }
:root[data-theme="light"] .die.fuerza .val { color: #b8412c; }
:root[data-theme="light"] .red-suit { color: #A8452C; }
:root[data-theme="light"] #log .e.b { background: #0000000a; }
:root[data-theme="light"] #board-wrap { box-shadow: 0 24px 40px -18px rgba(60, 40, 10, .45); }
:root[data-theme="light"] .modal-box { box-shadow: 0 20px 60px #0006; }
:root[data-theme="light"] #tip { border-color: #DDD0B0; background: #FBF7EC; box-shadow: 0 20px 40px -12px rgba(60, 40, 10, .35); }
.btn.icon { width: 34px; padding: 6px 0; text-align: center; font-size: 16px; line-height: 1; }
/* número de recurso junto al palo, abajo a la derecha (como en la tabla periódica) */
.card .suit { position: relative; }
.card .suit .res { position: absolute; left: 100%; bottom: -4px; margin-left: 1px; font: 500 9px/1 var(--mono); color: #7a6c55; }

/* Terminar turno: pulsa cuando no quedan acciones */
@keyframes endpulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240, 169, 60, .8); } 50% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(240, 169, 60, 0); } }
.btn.pulse { animation: endpulse 1.1s ease-in-out infinite; }

/* Contorno de muro: borde grueso alrededor de las casillas del muro y sus torres */
.wallb { position: absolute; inset: 0; border-style: dashed; pointer-events: none; z-index: 2; }
.wallb.w { border-color: #fff; }
.wallb.b { border-color: #000; }
/* Escalas: segundo borde, azulado, en las casillas de muro que se pueden cruzar */
.escb { position: absolute; inset: 6px; border: 3px solid #5aa9ff; border-radius: 3px; box-shadow: 0 0 6px #5aa9ffaa; pointer-events: none; z-index: 2; }

/* CPU */
#cpu-log { font-size: 12px; max-height: 360px; overflow: auto; display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
#cpu-log .e { padding: 2px 6px; border-left: 3px solid var(--accent-2, var(--line)); }
/* Inicio rápido contra la PC */

.cpu-recap { border-color: var(--accent-2); }
#recap-top { padding: 12px 12px 0; }
#recap-top:empty { display: none; }

/* Registros guardados (pantalla de inicio) */
.replay-list { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.replay-list .it { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* Elección de ocupar tras una captura: en el panel izquierdo, botones titilando y casilla marcada */
@keyframes blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 196, 0, .9); } 50% { opacity: .55; box-shadow: 0 0 0 6px rgba(255, 196, 0, 0); } }
.btn.blink { animation: blink .9s ease-in-out infinite; }
.occupy-box { border: 2px solid var(--accent); }
.sq.occ-target::after { content: ""; position: absolute; inset: 3px; border: 3px solid var(--accent); border-radius: 4px; animation: blink .9s ease-in-out infinite; pointer-events: none; z-index: 3; }

/* Pantalla inicial: pestañas y paneles */
.tab-panel { border-top: none; border-radius: 0 0 8px 8px; margin-top: 0; }
.mods-wrap > summary a { color: var(--accent-2); }

/* Menú del header (☰): Reglas, Cheatsheet, Dados */
.menu-box { max-width: 320px; }
.menu-box .close { float: right; }
.menu-list { clear: both; display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.menu-list .btn { width: 100%; box-sizing: border-box; }
.app-version { margin: 16px 0 0; text-align: center; font: 400 11px var(--mono); color: var(--muted); }
.menu-list .btn { display: block; text-align: center; padding: 12px; font-size: 15px; text-decoration: none; }
.menu-list .menu-check { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.menu-list .menu-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }

/* Prisioneras en dos columnas: las tuyas (con rescate) | las del rival */
.prison-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.prison-cols .list .it { flex-wrap: wrap; row-gap: 2px; }

/* Registro en modal */
.log-modal .close { float: right; }
.log-modal #log { max-height: 70vh; font-size: 13px; }
.box-head:last-child { margin-bottom: 0; } /* caja solo con encabezado (p. ej. objetivo oculto) */

/* Miniatura de formación (pantalla inicial): 4 filas × 8 columnas */
.fmini { display: grid; grid-template-columns: repeat(8, 24px); grid-auto-rows: 24px; width: max-content; margin-top: 6px; border: 1px solid var(--dark-sq); border-radius: 3px; overflow: hidden; position: relative; }
.fmini > .fmini-q { position: absolute; inset: 0; font-size: 56px; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 10px rgba(0,0,0,.5); pointer-events: none; }
.fmini > span { display: flex; align-items: center; justify-content: center; }
.fmini > .l { background: var(--light-sq); } .fmini > .d { background: var(--dark-sq); }
.fmini .piece { font-size: 20px; transition: none; }
.fmini-res .piece { font-size: 11px; transition: none; }
.fmini-res { display: block; margin-top: 8px; font-size: 75%; }
.fmini-res .piece { letter-spacing: 1px; }

/* Botón «Cerrar» de los modales: separado del contenido de abajo */
.modal-box .close { margin: 0 0 12px 12px; }

/* Juego online */
.net-input { flex: 1; min-width: 0; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font: inherit; }
#net-code { text-transform: uppercase; letter-spacing: 2px; font-weight: 600; }
.net-link-row { flex-wrap: nowrap; }
.net-code { font-family: var(--mono); letter-spacing: .1em; color: var(--accent-2); }
.net-err { color: #e8a33a; }

/* Botón «?» de Formaciones y modal con todas, una al lado de la otra */
.modal-box.forms-modal { max-width: 1180px; }
.forms-modal .close { float: right; }
.forms-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 12px; margin-top: 14px; }
.fcard { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--panel); }
.fcard > b { font: 400 22px/1.05 var(--serif); color: var(--text); }
.fcard > .muted { margin-top: 4px; line-height: 1.35; }

/* Botón de idioma (ES/EN): sin z-index propio, así los modales lo tapan */
/* idioma: el badge de la guía (bandera + código en mono) */
.lang-btn { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--mono); letter-spacing: 0; background: transparent; border-radius: 6px; color: var(--piedra); }
.lang-btn .deck-ico { width: 18px; height: 18px; flex: none; }
.lang-btn .flag { width: 16px; height: 11px; border-radius: 2px; flex: none; }

/* Pantalla principal: página normal debajo del header (no un modal encima de todo) */
#setup { display: flex; justify-content: center; padding: 24px 16px 40px; }
#setup > .modal-box { background: none; border: none; box-shadow: none; padding: 0; }
#setup > .modal-box > h1 { text-align: center; }
#setup .replays-box { max-width: 560px; margin-left: auto; margin-right: auto; } /* misma columna que el lobby */
body:has(#setup:not([hidden])) #game,
body:has(#setup:not([hidden])) #recap-top,
body:has(#setup:not([hidden])) #btn-log { display: none; }
@media (max-width: 600px) {
  #top { gap: 8px 12px; padding: 8px 12px; }
  #setup { padding: 16px 16px 32px; }
  #setup > .modal-box h1 { font-size: 30px; letter-spacing: 2px; }
}

/* Panel de edades: línea de edades + mesa de ases (mismo diseño que el tutorial) */
.age-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
/* la barra de edad de la guía (18 · Progreso): numeral en serif, la actual en pergamino y las pasadas con borde ámbar */
.age-step { text-align: center; border: 1px solid var(--line); border-radius: 10px; padding: 6px 2px 5px; font-size: 11px; color: var(--muted); background: var(--panel); cursor: help; }
.age-step b { display: block; font: italic 400 20px/1 var(--serif); color: inherit; }
.age-step.past { border-color: var(--ambar); color: var(--ambar); background: var(--panel-2); }
.age-step.cur { border-color: var(--ambar); color: var(--noche); background: var(--pergamino); }
:root[data-theme="light"] .age-step.cur { background: #1A1A18; border-color: #1A1A18; color: #F5EEDC; }
:root[data-theme="light"] .age-step.past { border-color: #B0492A; color: #B0492A; }
.age-mesa { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.age-slot { display: inline-flex; width: 34px; height: 24px; border: 1.5px dashed var(--line); border-radius: 6px; align-items: center; justify-content: center; }

/* Rastro de jugadas del turno anterior y efectos de las acciones de la CPU (boardfx.js) */
#board-wrap { position: relative; }
#board-fx { position: absolute; inset: 10px; pointer-events: none; z-index: 5; }
#board-fx svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-items { position: absolute; inset: 0; }
.trail-arrow { fill: none; stroke: #f0b35e; stroke-width: .07; stroke-linecap: round; opacity: .7; }
.trail-arrow.x { stroke: #e0604f; }
.sq .trail { position: absolute; inset: 0; pointer-events: none; }
.sq .trail.from { background: rgba(240, 179, 94, .2); }
.sq .trail.to { background: rgba(240, 179, 94, .38); box-shadow: inset 0 0 0 2px rgba(240, 179, 94, .85); }
.sq .trail.hit { background: rgba(224, 96, 79, .3); box-shadow: inset 0 0 0 2px rgba(224, 96, 79, .9); }
.sq .trail.new { background: rgba(91, 191, 115, .3); box-shadow: inset 0 0 0 2px rgba(91, 191, 115, .85); }
.sq .trail-n { position: absolute; left: 2px; bottom: 2px; z-index: 2; pointer-events: none; font: 700 10px/14px system-ui, sans-serif; color: #fff; background: #000b; border-radius: 7px; padding: 0 4px; }
.fx-ring { position: absolute; width: 12.5%; height: 12.5%; transform: translate(-50%, -50%); }
.fx-ring::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 196, 0, .9), 0 0 18px rgba(255, 196, 0, .8); animation: fxring 1.2s ease-in-out infinite; }
@keyframes fxring { 0%, 100% { opacity: .45; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.04); } }
.fx-arrow { fill: none; stroke: #ffc400; stroke-width: .09; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .95; animation: fxdraw .45s ease forwards; }
.fx-arrow.x { stroke: #ff5a4a; }
@keyframes fxdraw { to { stroke-dashoffset: 0; } }
.fx-fl { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font: 600 14px var(--sans); color: #fff; background: rgba(20, 17, 14, .88); padding: 4px 10px; border-radius: 8px; animation: fxin .45s cubic-bezier(.2, 1.6, .4, 1); z-index: 2; }
.fx-fl.win { font: italic 400 30px var(--serif); color: var(--ambar); background: rgba(20, 17, 14, .92); border: 1px solid var(--ambar); padding: 6px 16px; border-radius: 12px; box-shadow: 0 10px 40px rgba(240, 169, 60, .35); }
.fx-fl.bad { background: #a63a2bee; }
.fx-fl.plus { background: #2f7a38ee; }
.fx-fl.tw { background: #f4efe4f2; color: #1d1a16; border: 1px solid #0006; } /* jugada de Blancas */
.fx-fl.tb { background: #141414f2; color: #fff; border: 1px solid #fff8; } /* jugada de Negras */
.fx-fl.burst { background: none; color: #ffd36b; font-size: calc(var(--sq) * .8); padding: 0; animation: fxburst .5s ease-out forwards; }
.fx-fl.out { opacity: 0; transition: opacity .35s; }
.fx-ghost { position: absolute; width: 12.5%; height: 12.5%; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); }
@keyframes fxin { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes fxburst { from { transform: translate(-50%, -50%) scale(.4); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.8) rotate(40deg); opacity: 0; } }
.bang { display: inline-block; margin-left: 4px; }

/* ---------- Economía (panel compartido con el tutorial) ---------- */
.eco-meter { display: flex; gap: 4px; align-items: center; margin: 8px 0 4px; }
.eco-meter i { width: 16px; height: 22px; border-radius: 3px; border: 2px dashed #F0A93C99; background: #F0A93C18; } /* vacío: ámbar (producción) */
.eco-meter i.loot { border-color: #b34a3a99; background: #b34a3a18; } /* vacío: rojo (saqueo) */
.eco-meter i.on { border-style: solid; border-color: #D9932B; background: linear-gradient(160deg, #F7C878, #F0A93C); }
.eco-meter i.loot.on { border-color: #b34a3a; background: linear-gradient(160deg, #e0604f, #a63a2b); }
.eco-meter i.half { position: relative; overflow: hidden; } /* trabajador suelto: media diagonal rayada, ámbar apagado (no es media carta) */
.eco-meter i.half::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #F0A93C99 0 2px, transparent 2px 4px); clip-path: polygon(0 0, 100% 0, 0 100%); }
.eco-meter i.new { animation: pip-pop .5s ease-out; }
.eco-meter .sep { width: 8px; }
.eco-meter .eco-sum { margin-left: 6px; font-size: 15px; color: var(--accent-2); font-variant-numeric: tabular-nums; } /* como «Cartas al inicio de tu turno» */
@keyframes pip-pop { from { transform: scale(1.8); } to { transform: none; } }
.eco-total { font-size: 14px; }
.eco-total b { font-size: 22px; color: var(--accent-2); display: inline-block; }
.eco-total b.bump { animation: pip-pop .5s ease-out; }

/* ---------- Mazo: dorsos apilados + la carta de arriba boca arriba ---------- */
.deck-row { display: flex; align-items: center; gap: 10px; }
.deck-fan { display: flex; padding-left: 16px; }
.deck-fan .card.back { width: 22px; height: 32px; margin-left: -18px; border-width: 1px; border-left-color: #a8574a; border-radius: 4px; box-shadow: -2px 0 3px rgba(0, 0, 0, .5); }
.deck-fan .card.back:hover, .card.deck-top:hover { transform: none; }
.card.deck-top { width: 30px; height: 42px; font-size: 13px; margin-left: -13px; cursor: default; box-shadow: 0 0 0 2px var(--accent-2), 0 2px 6px rgba(0, 0, 0, .4); }
.deck-fan:empty + .card.deck-top { margin-left: 0; }
.deck-box .minicard { padding-top: 0; padding-bottom: 0; }
.deck-box .deck-row { margin-top: 12px; gap: 8px; } /* se colapsa con los 8 px del título: quedan 12 */
.deck-n { font-size: 10px; font-weight: 400; color: var(--muted); }
.deck-box .age-mesa { margin: 12px 0 0; min-height: 42px; flex-wrap: wrap; gap: 4px; } /* 2–3 ases en una línea; si se juntan 4, bajan a una segunda */
.deck-box .prison-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } /* Mazo a la izquierda y Ases a la derecha, con el mismo ancho */
.deck-box .age-slot { flex: 0 0 auto; width: auto; min-width: 28px; padding: 0 2px; white-space: nowrap; } /* poco padding horizontal; la carta (A♠) nunca se parte en dos líneas */
.deck-box .age-slot .minicard { padding-left: 3px; padding-right: 3px; }
.deck-box .age-slot .minicard { white-space: nowrap; }

/* ---------- Caras de dados (diseño de dados.html) ---------- */
.dface { --s: 56px; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .18); position: relative; display: inline-block; flex: none;
  box-shadow: inset 0 calc(var(--s) * -.05) 0 rgba(0, 0, 0, .18), 0 calc(var(--s) * .06) calc(var(--s) * .18) rgba(0, 0, 0, .4); vertical-align: middle; }
.dface.mando { background: #8a3a12; color: #fff; }
.dface.fuerza { background: #fffaf2; }
.dface.def { background: #2f4858; }
.dface .dl { position: absolute; left: 9%; top: 6%; font: 700 calc(var(--s) * .11) system-ui, sans-serif; opacity: .75; text-transform: uppercase; letter-spacing: .5px; }
.dface .dg { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--s) * .62); line-height: 1; padding-bottom: 6%;
  font-family: "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", Georgia, serif; font-variant-emoji: text; }
.dface .dg svg { width: 56%; height: 56%; }
.dface .dn { position: absolute; right: 8%; bottom: 5%; font: 900 calc(var(--s) * .24)/1 system-ui, sans-serif; }
.dface .dp { position: absolute; inset: 14%; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); }
.dface .dp i { width: 62%; height: 62%; margin: auto; border-radius: 50%; background: #2a2420; visibility: hidden; }
.dface .dp i.on { visibility: visible; }
.dface.def .dp i { background: #fff; }
.dface.inl { --s: 2.5em; margin: 0 .1em; }
.dface.hi { box-shadow: 0 0 0 3px #ffd36b, 0 0 22px #ffd36b99; }
.dface.tumble { animation: dtumble .14s linear infinite; }
.dface.landed { animation: dland .26s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes dtumble { 0%, 100% { transform: rotate(-14deg) translateY(-4px) scale(.96); } 50% { transform: rotate(12deg) translateY(4px) scale(1.03); } }
@keyframes dland { from { transform: scale(1.25) rotate(8deg); } to { transform: none; } }
/* En el panel de dados */
.die .dface { --s: 58px; margin: 4px 0 2px; }
/* En grande sobre el tablero (tiradas de la CPU) */
.fx-dice { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(circle, rgba(20, 17, 14, .78) 0 45%, rgba(20, 17, 14, .3) 75%); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: fxdicein .18s ease-out; transition: opacity .35s; }
.fx-dice.out { opacity: 0; }
.fx-dice-row { display: flex; gap: calc(var(--sq, 60px) * .5); }
.fx-dice .dface { --s: calc(var(--sq, 60px) * 2.1); }
.fx-dice.duel .fx-dice-row { align-items: center; }
.fx-side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fx-side-lbl { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #B4B4AB; padding: 2px 10px; }
.fx-vs { font: italic 400 34px var(--serif); color: var(--ambar); }
/* la leyenda: el cristal ahumado del recuadro de dados de la muestra */
.fx-dice-cap { max-width: 92%; font: 500 16px/1.4 var(--sans); color: #F5EEDC; background: rgba(30, 26, 21, .9); border: 1px solid #3A3128; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); padding: 10px 18px; border-radius: 14px; text-align: center; }
.fx-dice-cap b { color: var(--ambar); font-weight: 600; }
.fx-dice-cap .dbl { color: var(--oxido-claro); }
@keyframes fxdicein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dface.tumble, .dface.landed { animation: none; } }
/* Piezas que activa el dado de mando (después de tirar) */
.sq .mando-box { position: absolute; inset: 4%; border: 2px dashed rgb(90, 169, 255); border-radius: 5px; background: rgba(90, 169, 255, .32); pointer-events: none; }


/* Módulos: «Modo completo» desplegable con una casilla por regla, y «Reglas anteriores» agrupadas al final */

/* ---------- Modo puzle ---------- */
/* Colas en columna, de abajo hacia arriba: el próximo par (o dado) abajo y en grande; los siguientes, encima y más chicos.
   Las tuyas en el panel izquierdo; las de la CPU, en el derecho. */
.pz-cols { display: flex; gap: 18px; align-items: flex-end; justify-content: center; margin-top: 4px; }
.pz-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pz-lbl { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pz-stack { display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; padding-top: 8px;
  -webkit-mask-image: linear-gradient(to top, #000 62%, #0000); mask-image: linear-gradient(to top, #000 62%, #0000); } /* los de arriba se desvanecen: hacia allá va la cola */
.pz-pair, .pz-die { position: relative; display: flex; gap: 3px; padding: 3px; border-radius: 8px; border: 1px solid transparent; }
.pz-stack .dface { --s: 26px; }
.pz-stack .dface .dl { display: none; }
.pz-pair.next .dface, .pz-die.next .dface { --s: 48px; }
.pz-pair.next .dface .dl { display: block; }
.pz-more { font-size: 11px; color: var(--muted); }
.pz-cards { display: flex; flex-wrap: wrap; gap: 3px; }
.pz-pair { position: relative; }
.pz-pair.click { cursor: pointer; }
.pz-pair.click:hover .dface { filter: brightness(1.15); }
.pz-pair.click .dface { cursor: pointer; }
.pz-pair.pburn { opacity: .3; }
.pz-chip { position: absolute; top: -7px; right: -6px; z-index: 1; font: 600 9px var(--mono); background: var(--good); color: #fff; border-radius: 6px; padding: 0 3px; line-height: 13px; }
.pz-plan-hint { font-size: 12px; color: var(--accent-2); }
.pz-stars-big { font-size: 34px; color: #e7b84a; letter-spacing: 4px; margin: 4px 0; }
.card.reserved { opacity: .4; cursor: default; outline: 2px dashed var(--good); outline-offset: -3px; }
#pz-goal { max-width: calc(var(--sq) * 8 + 12px); text-align: center; display: flex; flex-direction: column; gap: 4px; }
#pz-goal .pz-goal-t { font: italic 400 22px/1.1 var(--serif); color: var(--accent-2); }

/* Tirar y recolectar comparten botón (como en la vista móvil): ⇅ cambia uno por otro; recolectar va en óxido. */
.dsplit { display: flex; margin-top: 10px; border-radius: 12px; overflow: hidden; background: var(--ambar); color: var(--noche); box-shadow: 0 8px 28px rgba(240, 169, 60, .22); }
.dsplit .go, .dsplit .swap { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.dsplit .go { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 9px 10px; font-weight: 600; font-size: 15px; }
.dsplit .go small { font: 400 11px var(--mono); opacity: .7; }
.dsplit .swap { width: 38px; border-left: 1px solid #0003; font-size: 16px; background: #0000000f; }
.dsplit .go:hover:not(:disabled), .dsplit .swap:hover:not(:disabled) { background: #ffffff26; }
.dsplit button:disabled { cursor: not-allowed; }
.dsplit .go:disabled { opacity: .5; }
.dsplit.collect { background: var(--oxido); color: #fff; box-shadow: 0 8px 28px rgba(176, 73, 42, .28); }
.dsplit.collect .swap { border-left-color: #fff3; }
.dsplit.flip .go { animation: dflip .28s ease-out; }
@keyframes dflip { from { transform: rotateX(80deg); opacity: .2; } }
.dsplit.dis { opacity: .4; }
.dsplit.dis .go:disabled { opacity: 1; }
.dsplit.dis .go small { opacity: 1; }

/* Íconos de aviso en «Acciones del turno» (torre para acostar, alfil zapador): seleccionan la pieza */
button.chip.hint { cursor: pointer; font: inherit; font-size: 15px; line-height: 1; padding: 1px 7px; vertical-align: middle; }
button.chip.hint small { font-size: 10px; margin: 0 1px; }
button.chip.hint:hover { filter: brightness(1.2); }
/* Flecha ➜ de las acciones que se ejecutan desde «Acciones del turno» (como «Terminar turno ➜») */
.btn.act .ar, .dsplit .go .ar, .end-btn .ar { margin-left: 6px; }
/* «Terminar turno»: el cierre de «Acciones del turno», separado por una línea del color de la caja. Secundario mientras
   queden acciones; sin acciones, el principal (ámbar, latiendo). */
.turn-end { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--c) 28%, transparent); }
.turn-end .muted { text-align: center; }
.btn.end-btn { width: 100%; padding: 10px 14px; font-size: 14px; font-weight: 600; }
.btn.end-btn:not(.primary) { background: var(--inset); }
.btn.end-btn:not(.primary):hover:not(:disabled) { border-color: var(--humo); background: var(--panel-2); }
.btn.end-btn.pulse { animation: endglow 1.4s ease-in-out infinite; } /* a todo el ancho, sin agrandarse: solo el halo */
@keyframes endglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 169, 60, .65); } 60% { box-shadow: 0 0 0 9px rgba(240, 169, 60, 0); } }

/* Órdenes (R19): ficha de cada bando con sus dos bonos; color por tipo de bono (dev-docs/guerra/ordenes.md §3.3) */
:root { --b-eco: #7fb276; --b-mil: #e07a70; --b-def: #7ea7dc; --b-ase: #cf9a62; --b-eda: #b98ac6; --b-mov: #5fc0bd; }
:root[data-theme="light"] { --b-eco: #3d6b3a; --b-mil: #a8322b; --b-def: #2f5d94; --b-ase: #7a4d22; --b-eda: #6b3d78; --b-mov: #1f7a78; }
.order-card { margin-top: 6px; }
.order-card + .order-card { border-top: 1px solid var(--line, #3a3128); padding-top: 6px; }
.order-head { display: flex; align-items: center; gap: 6px; font-size: .92em; }
.order-shield { flex: none; display: block; }
.order-card ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.order-buff { font-size: .82em; line-height: 1.25; border-left: 3px solid var(--bc); padding-left: 6px; }
.order-buff b { color: var(--bc); }
.order-buff.off { opacity: .45; }
.order-buff.bc-eco { --bc: var(--b-eco); } .order-buff.bc-mil { --bc: var(--b-mil); } .order-buff.bc-def { --bc: var(--b-def); }
.order-buff.bc-ase { --bc: var(--b-ase); } .order-buff.bc-eda { --bc: var(--b-eda); } .order-buff.bc-mov { --bc: var(--b-mov); }

/* Partida contra el servidor de la guerra (net-server.js): aviso de desconexión, rendirse, espectador */
.srv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px; margin: 0 0 8px; border: 1px solid var(--line, #3a3128); border-radius: 10px; background: var(--panel, #1e1914); font-size: .92em; }
.srv-bar .sp { flex: 1; }
.srv-warn { color: #e8765f; font-weight: 600; }

/* Barras de jugador (AsedioFX.playerBar): arriba el rival, abajo quien mira, como en chess.com */
.pbar-host { width: calc(var(--sq) * 8 + 20px); }
.pbar { display: flex; align-items: center; gap: 8px; min-height: var(--bar-h); padding: 2px 2px; }
.pb-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pb-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-rating { color: var(--muted); font: 400 12px var(--mono); font-variant-numeric: tabular-nums; cursor: help; }
.pb-order { flex: none; display: inline-flex; cursor: help; }
.pb-order .order-emblem { display: block; }
/* Contorno del escudo del emblema (como --emblem-edge de la web): claro en el tema oscuro, oscuro en el claro. */
:root { --emblem-edge: #efe3c8; }
:root[data-theme="light"] { --emblem-edge: #4a3f33; }
.pb-col { font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pb-sp { flex: 1; }
.pb-clock { flex: none; min-width: 72px; padding: 6px 12px; border-radius: 8px; background: var(--panel-2); border: 1px solid transparent; font: 500 18px/1.2 var(--mono); font-variant-numeric: tabular-nums; text-align: right; cursor: help; }
.pbar.active .pb-clock { background: var(--ambar); border-color: var(--ambar); color: var(--noche); }
.pbar.active .pb-clock.low { background: var(--oxido); border-color: var(--oxido); color: #fff; }
.pb-clock.paused { opacity: .6; }
.pb-name { font-weight: 600; }
.pbar.active .pb-name { color: var(--text); }
#tip.order-tip { white-space: normal; width: 360px; font-size: 14.5px; }
#tip.order-tip .order-head { font-size: 1.05em; }
#tip.order-tip .order-buff { font-size: .95em; }
#tip.order-tip .order-card { margin-top: 0; }