/* =====================================================================
   TABLERO · "JUGAR" DESDE UNA LLAVE (js/tablero-jugar.js). Prefijo jg. Va después de components.css.
   Solo tokens de css/base.css. Piezas:
     .jgq > .jgb   botón "Jugar" dentro de una casilla de la pirámide. Es un .llq con un .llw, como
                   "Ganó A" / "Ganó B": misma altura (44 px), mismo reparto, y cabe en la casilla más
                   estrecha (104 px). La casilla crece hacia abajo y las líneas se vuelven a medir solas.
     .jgbl         botón "Jugar" de una tarjeta de la Lista (un .btn más de .tbacts)
     .jgduo …      ficha 'jugar': los dos jugadores con su héroe, las acciones y cómo poner los héroes
     .jgl          línea "Tablero · Semifinal: …" en el duelo y en el modo partida de esa llave
     .jgrul        nombre de un jugador en un carrete de la ruleta (css/ruleta.css): una sola línea
   ===================================================================== */

/* ---------- botón "Jugar" en la pirámide y en la Lista ---------- */
.jgb,.jgbl{display:flex;align-items:center;justify-content:center;gap:5px}
.jgb{width:100%;font-size:14px;line-height:18px;font-weight:700}
.jgb svg,.jgbl svg{flex:none;width:12px;height:12px}
.jgbl{display:inline-flex;gap:6px}
.jgbl svg{width:13px;height:13px}

/* ---------- ficha: los dos jugadores ---------- */
.jgduo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;margin-top:12px}
.jgj{align-self:stretch;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px 14px;text-align:center}
.jgn{max-width:100%;font-size:20px;line-height:25px;font-weight:700;overflow-wrap:anywhere}
.jgj .av,.jgq0{flex:none;margin:8px 0 6px}
.jgq0{
  width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  border:2px dashed var(--fg3);color:var(--fg2);font-size:28px;line-height:1;font-weight:600;
}
.jgh{max-width:100%}
.jgh strong{display:block;font-size:17px;line-height:22px;font-weight:600;overflow-wrap:anywhere}
.jgh small{display:block;font-size:13px;line-height:18px;color:var(--fg2)}
.jgj.is-none .jgh strong{font-weight:400;color:var(--fg2)}
.jgvs{font-size:13px;line-height:18px;font-weight:700;letter-spacing:.06em;color:var(--fg2)}
.jgvet{margin:10px 4px 0;font-size:13px;line-height:18px;color:var(--fg2);overflow-wrap:anywhere}
.jgvet b{font-weight:600;color:var(--fg)}

/* ---------- ficha: jugar y cambiar los héroes ---------- */
.jgact,.jgops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.jgact > :only-child,.jgops > :first-child,.jgops > :last-child:nth-child(2){grid-column:1 / -1}
.jgact .btn,.jgops .btn{min-width:0;padding-inline:8px}
.cap + .jgops{margin-top:0}
.jgayu{margin:8px 4px 0;font-size:13px;line-height:18px;color:var(--fg2)}
.jgnota{margin:12px 4px 0;font-size:14px;line-height:19px;color:var(--fg2)}
.jgnota p{margin:0}
.jgnota .ok{font-weight:600;color:var(--good-ink)}
.jgnota .ok::before{content:"✓ "}
.jgnota .bad{margin:0 -4px;padding:10px 12px;border-radius:10px;background:var(--bad-bg);color:var(--bad-ink);font-weight:600;overflow-wrap:anywhere}
.jgfin{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.jgfn{font-size:13px;line-height:18px;color:var(--fg2)}

/* ---------- línea "Tablero · …" en el duelo y en el modo partida ---------- */
.jgl{margin:4px 0 0;font-size:13px;line-height:18px;color:var(--fg2);overflow-wrap:anywhere}
.jgl b{font-weight:600;color:var(--fg)}
/* en el duelo de una llave se sortea entre todos: "Sortear solo entre mis héroes" no aplica */
.jgl ~ .missort{display:none}

/* ---------- ruleta: el nombre del jugador en vez de "Jugador 1" ---------- */
.jgrul{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}