/* Interfaz del prototipo. Oscuro, sobrio, para que el color lo pongan las cartas. */

:root {
  color-scheme: dark;
  --bg: #0d0b12;
  --bg-2: #14111c;
  --panel: #191524;
  --panel-2: #211c30;
  --line: #2e2740;
  --fg: #ece7f5;
  --muted: #9a92ad;
  --gold: #f6d06b;
  --red: #e0564a;
  --green: #5fc46f;
  --blue: #6ab7ff;
  --radius: 12px;
  --card-w: 190px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: radial-gradient(1200px 700px at 50% -10%, #1c1730, var(--bg));
  color: var(--fg);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

/* ───────── Barra superior ───────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 18px;
  background: rgba(13, 11, 18, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; font-size: 16px; letter-spacing: .01em; }
.brand .lens {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--gold);
  box-shadow: inset 0 0 0 3px var(--bg), 0 0 12px rgba(246, 208, 107, .4);
}
.brand .tag {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px;
}
.tabs { display: flex; gap: 4px; margin-left: auto; }
.tabs button {
  background: none; border: 1px solid transparent; border-radius: 99px;
  padding: 6px 15px; cursor: pointer; color: var(--muted);
}
.tabs button:hover { color: var(--fg); background: var(--panel); }
.tabs button.on { color: #1a1320; background: var(--gold); font-weight: 600; }
.profile { margin-left: auto; display: flex; gap: 14px; align-items: center; color: var(--muted); font-size: 13px; }
.profile b { color: var(--fg); font-variant-numeric: tabular-nums; }
.nivel-jugador { display: flex; align-items: center; gap: 7px; cursor: help; }
.nv-barra { width: 64px; height: 5px; background: var(--panel-2); border-radius: 99px; overflow: hidden; }
.nv-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #ffe08a); transition: width .3s; }

/* Las siete casillas se reparten el ancho, sin pasar de 42 px. Con ancho fijo sumaban 330 px y en
   un móvil de 390 la hoja de bienvenida se salía por la derecha. */
.racha { display: flex; gap: 5px; justify-content: center; }
.racha-dia {
  display: grid; gap: 2px; justify-items: center; padding: 7px 0; flex: 1 1 0; min-width: 0; max-width: 42px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; font-size: 12px;
}
.racha-dia.hecho { border-color: var(--gold); background: rgba(246, 208, 107, .12); }
.racha-dia.hoy { box-shadow: 0 0 0 2px var(--gold); }
.rd-n { color: var(--muted); font-size: 11px; }
.rd-premio { font-weight: 700; color: var(--gold); }

/* ───────── Botones ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 18px; cursor: pointer; transition: .14s;
}
.btn:hover:not(:disabled) { background: #2b2440; border-color: #453a61; }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn.primary { background: var(--gold); border-color: var(--gold); color: #1a1320; font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: #ffe08a; border-color: #ffe08a; }
.btn.ghost { background: none; }
.btn.danger { color: var(--red); border-color: #4a2a2c; }
.btn.small { padding: 5px 11px; font-size: 13px; border-radius: 8px; }

/* ───────── Pantallas ───────── */
.screen { padding: 22px; max-width: 1500px; margin: 0 auto; }
.screen[hidden] { display: none; }

/* ───────── Revelar ───────── */
.reveal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; min-height: 72vh; }
.reveal-intro h1 { font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 12px; }
.lede { color: var(--muted); max-width: 46ch; margin: 0 0 22px; }
.reveal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.quota { color: var(--muted); font-size: 13px; margin: 14px 0 0; }
.odds { margin-top: 18px; max-width: 46ch; }
.odds summary { cursor: pointer; color: var(--muted); font-size: 13.5px; }
.odds ul { list-style: none; padding: 10px 0 0; margin: 0; display: grid; gap: 4px; font-size: 13.5px; }
.odds li { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding-bottom: 3px; }
.odds li b { font-variant-numeric: tabular-nums; }

.reveal-stage { display: grid; place-items: center; min-height: 460px; width: calc(var(--card-w) * 1.9); }
.reveal-empty { text-align: center; color: var(--muted); }
.frame-hint {
  width: calc(var(--card-w) * 1.4); aspect-ratio: 3 / 4; margin: 0 auto 16px;
  border: 2px dashed var(--line); border-radius: 18px;
}
.reveal-stage .card { --card-w: 300px; }

@keyframes flip-in {
  0% { transform: rotateY(90deg) scale(.86); opacity: 0; }
  60% { transform: rotateY(-8deg) scale(1.04); opacity: 1; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}
@keyframes burst {
  0% { transform: scale(.4); opacity: .95; }
  100% { transform: scale(2.4); opacity: 0; }
}
.reveal-anim { animation: flip-in .62s cubic-bezier(.2, .8, .3, 1) both; }
.reveal-burst {
  position: absolute; inset: 0; margin: auto; width: 160px; height: 160px; border-radius: 50%;
  pointer-events: none; animation: burst .8s ease-out forwards;
}
.reveal-holder { position: relative; display: grid; place-items: center; }
.reveal-meta { text-align: center; margin-top: 14px; color: var(--muted); font-size: 13px; }
.reveal-meta b { color: var(--fg); }

/* ───────── Filtros y rejillas ───────── */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filters input, .filters select {
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px;
}
.filters input { min-width: 210px; }
.filters .count { margin-left: auto; color: var(--muted); font-size: 13px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr)); gap: 16px; }
.grid.small { --card-w: 150px; gap: 11px; }
.empty-note { color: var(--muted); padding: 40px 0; text-align: center; grid-column: 1 / -1; }

/* ═════════ CARTA ═════════ */
.card {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  border-radius: 14px; overflow: hidden; cursor: pointer;
  background: linear-gradient(160deg, var(--aff-deep, #222), #0e0b14 70%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .16s, box-shadow .16s, border-color .16s;
  user-select: none;
}
.card:hover { transform: translateY(-4px); border-color: var(--aff, #666); }
.card.size-lg { width: 300px; }
.c-inner { position: absolute; inset: 0; display: grid; grid-template-rows: auto 46% auto 1fr auto; }

.c-head { display: flex; align-items: center; gap: 7px; padding: 7px 9px 5px; }
.cost {
  flex: none; width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: radial-gradient(circle at 35% 30%, #fff6d6, var(--gold));
  color: #2a1e0a; box-shadow: 0 0 10px rgba(246, 208, 107, .35);
}
.cost.discounted { background: radial-gradient(circle at 35% 30%, #d6f6ff, var(--blue)); color: #06202e; }
.c-name {
  font-size: 12.5px; font-weight: 650; line-height: 1.15;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.c-art { position: relative; overflow: hidden; background: #08060d; border-block: 1px solid rgba(0, 0, 0, .5); }
.art-svg { width: 100%; height: 100%; display: block; }

.c-band {
  display: flex; justify-content: space-between; gap: 6px; align-items: center;
  padding: 3px 9px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
  background: rgba(0, 0, 0, .42); color: #cfc6de;
}
.c-rar { color: var(--aff); font-weight: 700; }

.c-body { padding: 7px 9px; overflow: hidden; display: flex; flex-direction: column; gap: 3px; }
.c-text { margin: 0; font-size: 11.5px; line-height: 1.32; }
.c-text b { color: var(--aff); }
.c-flavor {
  margin: 0; font-size: 10.5px; font-style: italic; color: #a79dbb; line-height: 1.28;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.c-foot { display: flex; align-items: center; gap: 6px; padding: 5px 9px 7px; min-height: 26px; }
.c-ped { font-size: 9px; color: #6f6685; margin-left: auto; text-align: right; line-height: 1.2; }

.stat {
  flex: none; min-width: 23px; height: 23px; padding: 0 5px; border-radius: 6px;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.stat.atk { background: #3a1f1c; color: #ff9c86; box-shadow: inset 0 0 0 1px #5d2f28; }
.stat.hp { background: #14301f; color: #86e6a4; box-shadow: inset 0 0 0 1px #235438; }
.stat.hp.hurt { background: #3a1f1c; color: #ffb4a4; box-shadow: inset 0 0 0 1px #5d2f28; }
.stat.atk.buffed { color: #ffd98a; box-shadow: inset 0 0 0 1px var(--gold); }

.kw {
  display: inline-block; font-size: 9px; text-transform: uppercase; letter-spacing: .05em;
  background: rgba(255, 255, 255, .09); border-radius: 4px; padding: 1px 5px; margin: 0 3px 2px 0;
  cursor: help;
}
.kw.special { background: rgba(246, 208, 107, .2); color: var(--gold); }

/* Marcos por rareza: el acabado sube, el poder no. */
.rar-comun      { box-shadow: var(--shadow), inset 0 0 0 2px #4a3a2c; }
.rar-poco_comun { box-shadow: var(--shadow), inset 0 0 0 2px #6d737d; }
.rar-rara       { box-shadow: var(--shadow), inset 0 0 0 2px #a5703c; }
.rar-epica      { box-shadow: var(--shadow), inset 0 0 0 2px #cdd3dd, 0 0 18px rgba(205, 211, 221, .18); }
.rar-legendaria { box-shadow: var(--shadow), inset 0 0 0 2.5px var(--gold), 0 0 26px rgba(246, 208, 107, .28); }
.rar-unica      { box-shadow: var(--shadow), 0 0 32px rgba(190, 120, 255, .4); border-color: #b478ff; }

.foil {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .55;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .55) 46%, rgba(160, 220, 255, .5) 52%, transparent 66%);
  background-size: 260% 100%;
  animation: foil-sweep 4.5s linear infinite;
}
@keyframes foil-sweep { from { background-position: 190% 0; } to { background-position: -90% 0; } }

.unique-ring {
  position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  background: conic-gradient(from 0deg, #b478ff, #6ab7ff, #f6d06b, #ff7ad9, #b478ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 2px;
  animation: spin 7s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

.c-count {
  position: absolute; top: 7px; right: 7px; z-index: 3;
  background: rgba(0, 0, 0, .7); border-radius: 99px; padding: 1px 7px; font-size: 11px; font-weight: 700;
}

/* En tamaño pequeño manda el texto de reglas: la ambientación se lee en el detalle. */
.size-sm .c-flavor { display: none; }
.size-sm .c-name { font-size: 11.5px; }
.size-sm .c-text { font-size: 11px; }
.size-sm .c-ped { font-size: 8px; }
.size-sm .c-band { padding: 2px 7px; font-size: 8.5px; }
.size-sm .c-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.size-sm .c-rar { white-space: nowrap; }

.card.picked { outline: 2px solid var(--gold); outline-offset: 2px; }
.card.dimmed { opacity: .34; filter: grayscale(.6); }

/* Carta de espaldas */
.card-back { background: linear-gradient(160deg, #241c38, #100c1a); cursor: default; }
.card-back:hover { transform: none; }
.cb-inner { position: absolute; inset: 0; display: grid; place-items: center; }
.cb-lens {
  width: 42%; aspect-ratio: 1; border-radius: 50%;
  border: 3px solid rgba(246, 208, 107, .55);
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .5), 0 0 22px rgba(246, 208, 107, .2);
}

/* ═════════ Constructor de mazos ═════════ */
.builder { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 22px; align-items: start; }
.deck-side {
  position: sticky; top: 74px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px; display: flex; flex-direction: column; gap: 13px;
  max-height: calc(100vh - 96px);
}
.deck-head input {
  width: 100%; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 11px; margin-bottom: 10px;
}
.deck-meters { display: grid; gap: 7px; }
.meter { display: grid; gap: 3px; font-size: 12.5px; }
.meter .row { display: flex; justify-content: space-between; color: var(--muted); }
.meter .row b { color: var(--fg); font-variant-numeric: tabular-nums; }
.bar { height: 5px; background: var(--panel-2); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--gold); transition: width .2s; }
.bar.over i { background: var(--red); }

.curve { display: flex; align-items: stretch; gap: 4px; height: 58px; }
.curve .col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.curve .col i { width: 100%; background: linear-gradient(#7a63b4, #3a2f57); border-radius: 3px 3px 0 0; min-height: 2px; }
.curve .col span { font-size: 9.5px; color: var(--muted); line-height: 1; }

.summoner-pick { display: grid; gap: 5px; }
.summoner-pick .sp-title { font-size: 12px; color: var(--muted); }
.summoner-pick select { width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; }
.summoner-pick .sp-text { font-size: 12px; color: var(--muted); min-height: 32px; }

.deck-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 90px; display: grid; gap: 2px; align-content: start; }
.deck-list li {
  display: flex; align-items: center; gap: 8px; padding: 4px 7px; border-radius: 7px;
  background: var(--panel-2); cursor: pointer; font-size: 12.5px;
  border-left: 3px solid var(--aff, #555);
}
.deck-list li:hover { background: #33294b; }
.deck-list li .dl-cost {
  flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: #2a1e0a;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.deck-list li .dl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-list li .dl-x { margin-left: auto; color: var(--muted); }
.deck-list li:hover .dl-x { color: var(--red); }
.deck-empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 22px 0; }

.deck-errors { font-size: 12.5px; color: var(--red); display: grid; gap: 3px; }
.deck-errors:empty { display: none; }
.deck-ok { color: var(--green); }
.deck-buttons { display: flex; gap: 7px; flex-wrap: wrap; }
.deck-buttons .btn { flex: 1; padding: 8px 10px; font-size: 13.5px; }

.saved-decks { border-top: 1px solid var(--line); padding-top: 11px; display: grid; gap: 5px; }
.saved-decks .sd-title { font-size: 12px; color: var(--muted); }
.saved-deck { display: flex; align-items: center; gap: 8px; font-size: 13px; background: var(--panel-2); border-radius: 8px; padding: 6px 9px; }
.saved-deck b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-deck .sd-meta { color: var(--muted); font-size: 11.5px; margin-left: auto; white-space: nowrap; }

/* ═════════ Inicio ═════════ */
.inicio { display: grid; gap: 20px; max-width: 900px; }
.ini-cabecera { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.ini-cabecera h1 { font-size: 28px; margin-bottom: 6px; }
.ini-cabecera p { margin: 0; }
.ini-resumen { display: flex; gap: 20px; }
.ini-dato { text-align: center; }
.ini-dato b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.ini-dato span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 640px) {
  .ini-cabecera { grid-template-columns: 1fr; gap: 14px; }
  .ini-resumen { justify-content: space-between; gap: 8px; }
}

.tareas { display: grid; gap: 10px; }
.tarea {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; border-left: 3px solid var(--line);
}
.tarea.principal { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(246,208,107,.07), var(--panel) 40%); }
.ta-texto { display: grid; gap: 3px; }
.ta-texto b { font-size: 15.5px; }
.ta-texto span { font-size: 13px; color: var(--muted); }
.ta-lado { display: grid; gap: 5px; justify-items: end; }
.ta-premio { font-size: 11.5px; color: var(--gold); white-space: nowrap; }

/* ═════════ Mercado ═════════ */
.mercado, .gremio, .chat { display: grid; gap: 18px; }
.mercado h2, .gremio h2 { font-size: 19px; }
.mer-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.mer-head h1 { font-size: 26px; margin-bottom: 8px; }
.mer-head p { margin: 0 0 6px; max-width: 66ch; }
.mer-cartera {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 22px; text-align: center; min-width: 160px;
}
.cart-num { font-size: 30px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.cart-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.cart-ventas { margin-top: 6px; font-size: 12px; color: var(--muted); }
.mer-check { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }

.ofertas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.oferta { display: grid; gap: 6px; }
.oferta.repetida { opacity: .6; }
.of-pie { display: grid; gap: 3px; justify-items: center; }
.of-precio { font-weight: 700; color: var(--gold); font-size: 13.5px; }
.of-precio.ganga { color: var(--green); }
.of-vendedor { font-size: 11px; color: var(--muted); }
.vendibles { --card-w: 130px; }
.vendible { display: grid; gap: 5px; }

/* ═════════ Gremio ═════════ */
.gr-head { display: flex; gap: 20px; align-items: start; justify-content: space-between; }
.gr-head h1 { font-size: 26px; margin-bottom: 4px; }
.gr-head p { margin: 0 0 4px; }
.gremios { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.gremio-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; display: grid; gap: 6px; align-content: start;
}
.gr-lema { font-size: 12.5px; color: var(--muted); font-style: italic; }
.gr-miembros { font-size: 12px; color: var(--muted); }
.gr-meta {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; display: grid; gap: 8px; max-width: 520px;
}
.gr-tabla { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-width: 480px; }
.gr-tabla li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; font-size: 13.5px;
}
.gr-tabla li.tu { border-color: var(--gold); }
.gt-pos { color: var(--muted); font-variant-numeric: tabular-nums; }
.gt-puntos { font-weight: 700; font-variant-numeric: tabular-nums; }
.gr-historial { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; color: var(--muted); font-size: 13px; }

/* ═════════ Chat ═════════ */
.aviso-simulado {
  margin: 0; padding: 10px 14px; border-radius: 10px; font-size: 13px; max-width: 70ch;
  background: rgba(224, 86, 74, .1); border: 1px solid rgba(224, 86, 74, .3); color: #ffb4a4;
}
.chat-canales { display: flex; gap: 8px; flex-wrap: wrap; }
.chat-canal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 15px; cursor: pointer; color: inherit; display: grid; gap: 1px; text-align: left;
}
.chat-canal span { font-size: 11px; color: var(--muted); }
.chat-canal.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.chat-mensajes {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; display: grid; gap: 6px; align-content: start;
  height: min(52vh, 460px); overflow-y: auto; max-width: 760px;
}
.msg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: baseline; font-size: 13.5px; }
.msg-quien { color: var(--blue); font-weight: 600; white-space: nowrap; }
.msg.mio .msg-quien { color: var(--gold); }
.msg-hora { font-size: 11px; color: #5d556f; font-variant-numeric: tabular-nums; }
.chat-escribir { display: flex; gap: 8px; max-width: 760px; }
.chat-escribir input {
  flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px;
}

/* ═════════ Campaña ═════════ */
.campana { display: grid; gap: 20px; }
.campana[hidden] { display: none; }
.camp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.camp-head h1 { font-size: 26px; margin-bottom: 8px; }
.camp-head p { margin: 0; max-width: 62ch; }
@media (max-width: 640px) { .camp-head { grid-template-columns: 1fr; gap: 14px; } }
.camp-marcador {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 20px; text-align: center; min-width: 190px;
}
.cm-num { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cm-num span { font-size: 15px; color: var(--muted); font-weight: 400; }
.cm-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.cm-estrellas { margin-top: 6px; font-size: 13px; color: var(--gold); }

.mundos { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 9px; }
.mundo {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 8px; cursor: pointer; display: grid; gap: 3px; justify-items: center;
  transition: .14s; color: inherit; text-align: center;
}
.mundo:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-2px); }
.mundo.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.mundo.cerrado { opacity: .38; cursor: not-allowed; }
.mu-n { font-size: 19px; font-weight: 700; color: var(--gold); line-height: 1; }
.mu-nombre { font-size: 12.5px; font-weight: 600; }
.mu-prog { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.mundo-detalle h2 { font-size: 20px; margin-bottom: 3px; }
.mundo-detalle > p { margin: 0 0 14px; }
.niveles { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.nivel {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; cursor: pointer; display: grid; gap: 4px; text-align: left;
  color: inherit; transition: .14s; border-left: 3px solid var(--line);
}
.nivel:hover:not(:disabled) { border-color: var(--gold); border-left-color: var(--gold); transform: translateY(-2px); }
.nivel.cerrado { opacity: .35; cursor: not-allowed; }
.nivel.hecho { border-left-color: var(--green); }
.nivel.jefe { border-left-color: var(--red); background: linear-gradient(180deg, var(--panel), #22161f); }
.ni-id { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ni-rival { font-size: 12.5px; color: var(--muted); }
.ni-estrellas { font-size: 12.5px; color: var(--gold); letter-spacing: .06em; }
.nivel.cerrado .ni-estrellas { color: var(--muted); }
.ni-jefe {
  position: absolute; top: 9px; right: 10px; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--red); border: 1px solid #4a2a2c; border-radius: 99px; padding: 1px 6px;
}
.ni-mod { font-size: 11px; color: var(--blue); }

/* ═════════ Lobby ═════════ */
.lobby { max-width: 900px; margin: 0 auto; display: grid; gap: 18px; }
.lobby[hidden] { display: none; }
.lobby h1 { font-size: 26px; }
.lobby-decks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.lobby-deck {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; cursor: pointer; transition: .14s; display: grid; gap: 6px;
}
.lobby-deck:hover { border-color: var(--gold); transform: translateY(-2px); }
.lobby-deck.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.lobby-deck b { font-size: 15px; }
.lobby-deck .ld-meta { color: var(--muted); font-size: 12.5px; }
.lobby-deck .ld-affs { display: flex; gap: 4px; }
.lobby-deck .dot { width: 10px; height: 10px; border-radius: 50%; }
.rivales { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.rival {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 15px; cursor: pointer; transition: .14s; display: grid; gap: 6px; align-content: start;
}
.rival:hover { border-color: var(--gold); transform: translateY(-2px); }
.rival.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.rival.batido { border-left: 3px solid var(--green); }
.rv-top { display: flex; align-items: baseline; gap: 8px; }
.rv-top b { font-size: 15px; }
.rv-nivel { margin-left: auto; color: var(--gold); font-size: 12px; letter-spacing: .08em; cursor: help; }
.rv-frase { font-size: 12.5px; color: var(--muted); font-style: italic; line-height: 1.35; }
.rv-meta { font-size: 12px; color: var(--muted); }
.rv-batido { font-size: 11.5px; color: var(--green); }

.lobby-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stat-line { display: flex; gap: 18px; color: var(--muted); font-size: 13.5px; }
.stat-line b { color: var(--fg); }

/* ═════════ Partida ═════════ */
/* El tablero tiene un ancho máximo y se centra.
   Sin tope, en un monitor ancho la barra del invocador se estiraba dos mil píxeles con la barra de
   vida perdida en la esquina izquierda y cinco huecos vacíos flotando en el medio. Un tablero de
   cartas no mejora por ser más ancho: mejora por estar junto. */
.match {
  display: grid; grid-template-rows: auto 1fr auto; gap: 8px;
  height: calc(100dvh - 92px); overflow: hidden;
  max-width: 1340px; margin-inline: auto; width: 100%;
}
.match[hidden] { display: none; }
.screen[data-screen="jugar"] { padding: 10px 18px 0; }

.side {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px;
}
.side.me { background: linear-gradient(180deg, var(--panel), #1d1730); }

.summoner {
  display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center;
  cursor: pointer; border-radius: 10px; padding: 5px; transition: .14s;
}
.summoner.targetable { box-shadow: 0 0 0 2px var(--red); background: rgba(224, 86, 74, .12); }
.summoner.targetable:hover { background: rgba(224, 86, 74, .25); }
.summoner .portrait {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-size: 19px; font-weight: 700; background: var(--panel-2); border: 2px solid var(--aff, var(--gold));
}
.summoner .s-name { font-size: 13.5px; font-weight: 600; }
.summoner .s-sub { font-size: 11.5px; color: var(--muted); }
.hp-row { display: flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.hp-bar { flex: 1; height: 7px; background: #2a1013; border-radius: 99px; overflow: hidden; min-width: 60px; }
.hp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #e0564a, #ff8f7a); transition: width .3s; }
.hp-val { font-weight: 700; font-size: 14px; }

.luz { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.luz .pip { width: 11px; height: 11px; border-radius: 50%; background: #2c2640; box-shadow: inset 0 0 0 1px #3d3557; }
.luz .pip.on { background: radial-gradient(circle at 35% 30%, #fff3cf, var(--gold)); box-shadow: 0 0 7px rgba(246, 208, 107, .6); }
.luz .pip.extra { background: radial-gradient(circle at 35% 30%, #d6f6ff, var(--blue)); box-shadow: 0 0 7px rgba(106, 183, 255, .6); }
.luz-label { font-size: 12px; color: var(--muted); margin-left: 5px; font-variant-numeric: tabular-nums; }

.side-info { display: grid; gap: 5px; }
.side-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pill { font-size: 11.5px; color: var(--muted); background: var(--panel-2); border-radius: 99px; padding: 2px 9px; }
.pill.place { color: var(--gold); border: 1px solid rgba(246, 208, 107, .3); cursor: help; }

/* Las dos mesas y lo que va entre ellas.
   Antes las filas eran `1fr auto 1fr`: con las mesas vacías, esos dos `1fr` se repartían todo el
   alto sobrante y dejaban cuatrocientos píxeles de nada en el centro de la pantalla, mientras la
   mano quedaba aplastada contra el borde de abajo. Ahora las filas ocupan lo que necesitan y el
   bloque entero se centra, así que el hueco sobrante queda repartido y no cavado en medio. */
.boards {
  display: grid; grid-template-rows: auto auto auto; gap: 6px;
  min-height: 0; align-content: center;
}
.board {
  display: flex; gap: 9px; align-items: center; justify-content: center; min-height: 128px;
  border-radius: var(--radius); padding: 8px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .035), transparent 70%);
  border: 1px dashed transparent;
}
.board.drop { border-color: var(--gold); background: rgba(246, 208, 107, .07); }
.board-empty { color: #4d4563; font-size: 12.5px; }

.midline { display: flex; align-items: center; justify-content: center; gap: 14px; }
.midline .rule { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.turn-badge { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Criatura en mesa */
.minion {
  position: relative; width: 104px; height: 124px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(170deg, var(--aff-deep, #222), #0c0913);
  border: 1px solid var(--line); cursor: pointer; flex: none;
  transition: transform .14s, box-shadow .14s, filter .14s;
  display: grid; grid-template-rows: 56px auto 1fr;
}
.minion:hover { transform: translateY(-3px); }
.minion .m-art { overflow: hidden; background: #08060d; }
.minion .m-name {
  font-size: 10px; font-weight: 600; padding: 3px 5px 1px; line-height: 1.15;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.minion .m-kws { padding: 0 4px; overflow: hidden; }
.minion .m-kws .kw { font-size: 7.5px; padding: 0 3px; }
.minion .stat { position: absolute; bottom: 4px; width: 21px; height: 21px; min-width: 21px; font-size: 12px; }
.minion .stat.atk { left: 4px; }
.minion .stat.hp { right: 4px; }
.minion .m-equip { position: absolute; top: 3px; right: 4px; font-size: 11px; color: var(--gold); }
.minion .m-shield { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px #8fd8ff, inset 0 0 14px rgba(143, 216, 255, .45); border-radius: 10px; }

.minion.can-attack { box-shadow: 0 0 0 1.5px var(--green), 0 0 14px rgba(95, 196, 111, .3); }
.minion.exhausted, .minion.sick { filter: grayscale(.55) brightness(.72); cursor: default; }
.minion.sick::after {
  content: "zZ"; position: absolute; top: 3px; left: 5px; font-size: 10px; color: #9fd0ff; opacity: .85;
}
.minion.stealth { opacity: .72; border-style: dashed; }
.minion.selected { box-shadow: 0 0 0 2.5px var(--gold), 0 0 20px rgba(246, 208, 107, .45); transform: translateY(-6px); }
.minion.targetable { box-shadow: 0 0 0 2px var(--red), 0 0 16px rgba(224, 86, 74, .4); cursor: crosshair; }
.minion.targetable:hover { transform: translateY(-3px) scale(1.04); }
.minion.token { border-style: dotted; }
.minion { cursor: pointer; }
.minion::before { content: ""; position: absolute; inset: 0; pointer-events: none; }

@keyframes hit { 0%, 100% { transform: translate(0); } 25% { transform: translate(-5px, 2px); } 75% { transform: translate(5px, -2px); } }
.minion.hit, .summoner.hit { animation: hit .3s; }

/* El motor avisa de cada cosa con su propio evento, así que cada una tiene su destello. */
@keyframes flash-ring {
  0% { box-shadow: 0 0 0 0 var(--flash), 0 0 18px 4px var(--flash); }
  100% { box-shadow: 0 0 0 2px transparent, 0 0 0 0 transparent; }
}
.minion.armor-flash, .summoner.armor-flash { --flash: #d7b98a; animation: flash-ring .42s ease-out; }
.minion.shield-flash, .summoner.shield-flash { --flash: #8fd8ff; animation: flash-ring .42s ease-out; }
.minion.heal-flash, .summoner.heal-flash { --flash: #7fe6a0; animation: flash-ring .42s ease-out; }
.minion.buff-flash, .summoner.buff-flash { --flash: var(--gold); animation: flash-ring .42s ease-out; }
@keyframes pop-in { from { transform: scale(.6) translateY(14px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.minion.fresh { animation: pop-in .28s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes fade-die { to { transform: scale(.7) rotate(6deg); opacity: 0; filter: grayscale(1); } }
.minion.dying { animation: fade-die .35s forwards; pointer-events: none; }

/* Mano */
.hand-zone { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
/* La mano, en abanico.
   Las cartas se solapan a propósito (margen negativo): sujetas de canto y separadas no parecen
   una mano, parecen una estantería. El giro y la caída de cada una los reparte `src/mano.mjs`,
   que es quien sabe cuántas hay. */
.hand {
  display: flex; justify-content: center; align-items: flex-end;
  min-height: 178px; padding: 22px 0 6px; perspective: 1100px;
}
.hand .card {
  --card-w: 116px; width: 116px; flex: none;
  --giro: 0deg; --caida: 0px; --lado: 0; --orden: 0;
  margin-inline: -14px;
  transform-origin: 50% 130%;              /* gira desde abajo, como si se sujetaran por el borde */
  transform: rotate(var(--giro)) translateY(var(--caida));
  z-index: calc(var(--orden) + 1);
  transition: transform .17s cubic-bezier(.2, .8, .3, 1), box-shadow .17s, opacity .17s;
}

/* La ola. `data-ola` lo pone `src/mano.mjs` según dónde esté el puntero: 0 es la carta que tienes
   debajo, 1 y 2 sus vecinas. No se usa `:hover` porque en una pantalla táctil no existe, y mover
   el dedo por encima de la mano es justo el gesto que esto tiene que entender. */
.hand .card[data-ola="0"] {
  transform: rotate(0deg) translateY(-30px) scale(1.14);
  z-index: 40; box-shadow: 0 18px 38px rgba(0, 0, 0, .62);
}
.hand .card[data-ola="1"] {
  transform: rotate(var(--giro)) translateY(calc(var(--caida) - 12px)) translateX(calc(var(--lado) * 13px));
  z-index: 20;
}
.hand .card[data-ola="2"] {
  transform: rotate(var(--giro)) translateY(calc(var(--caida) - 4px)) translateX(calc(var(--lado) * 6px));
  z-index: 10;
}

.hand .card.unplayable { opacity: .5; filter: saturate(.5); }
.hand .card.unplayable[data-ola="0"] { transform: rotate(0deg) translateY(-16px) scale(1.06); }

/* La carta en grande que sale al dejar el ratón encima. Es lo que hace que la mano se pueda leer:
   a 116 px de ancho el texto de una carta no se lee, y abrir la ficha de cada una en mitad del
   turno no lo hace nadie. No intercepta el ratón, porque taparía la carta que la ha sacado. */
.vista-carta {
  position: fixed; z-index: 90; pointer-events: none;
  animation: vista-entra .13s ease-out;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .7));
}
.vista-carta .card { width: 260px; cursor: default; }
@keyframes vista-entra { from { opacity: 0; transform: translateY(6px) scale(.96); } }

@media (prefers-reduced-motion: reduce) {
  .hand .card { transition: none; }
  .vista-carta { animation: none; }
}
.hand-opp { display: flex; justify-content: center; gap: 5px; height: 52px; }
.hand-opp .card-back { width: 40px; height: 52px; border-radius: 6px; }
.hand-opp .cb-lens { border-width: 2px; }

.match-side-panel { display: grid; gap: 8px; width: 240px; }
.turn-controls { display: grid; gap: 7px; }
.btn-end { padding: 13px; font-size: 15px; }
.btn-end.waiting { background: var(--panel-2); border-color: var(--line); color: var(--muted); }
.power-btn { display: grid; gap: 2px; text-align: left; padding: 9px 12px; }
.power-btn .pb-name { font-weight: 600; font-size: 13.5px; }
.power-btn .pb-text { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.power-btn.primary .pb-text { color: #5a4a20; }

.log {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; font-size: 12px; color: var(--muted);
  height: 112px; overflow-y: auto; display: flex; flex-direction: column-reverse; gap: 2px;
}
.log .entry { line-height: 1.35; }
.log .entry.turn-mark { color: var(--gold); margin-top: 4px; }

.prompt-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 30;
  background: rgba(20, 16, 30, .96); border: 1px solid var(--gold); border-radius: 99px;
  padding: 9px 18px; display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow);
}
.prompt-bar b { color: var(--gold); }
.pista { margin: 0; font-size: 11px; color: #6f6685; text-align: center; line-height: 1.3; }
.consejo {
  margin: 0; padding: 9px 13px; border-radius: 10px; font-size: 12.5px; line-height: 1.4;
  background: rgba(106, 183, 255, .1); border: 1px solid rgba(106, 183, 255, .3); color: #b6dcff;
}
.mulligan .consejo { max-width: 60ch; text-align: center; }

/* ═════════ Superposiciones ═════════ */
.overlay {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(6, 4, 10, .84); backdrop-filter: blur(4px); padding: 24px;
}
.overlay[hidden] { display: none; }
.overlay .sheet {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; max-width: 520px; width: 100%; display: grid; gap: 14px; text-align: center;
  box-shadow: var(--shadow);
}
.overlay .sheet h2 { font-size: 24px; }
.overlay .sheet .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.overlay .detail { display: grid; gap: 16px; justify-items: center; }
.overlay .detail .kw-help { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); max-width: 300px; }
.pedigri {
  border-top: 1px solid var(--line); padding-top: 12px; max-width: 320px;
  display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); text-align: left;
}
.pedigri h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--gold); margin-bottom: 2px; }
.pedigri .hitos { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.pedigri .hitos li { color: var(--green); font-size: 12px; }
.pedigri .hitos li::before { content: "◆ "; opacity: .7; }
.win-banner { font-size: 42px; }

.toasts { position: fixed; top: 64px; right: 18px; z-index: 70; display: grid; gap: 7px; justify-items: end; }
.toast {
  background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 9px; padding: 9px 14px; font-size: 13.5px; box-shadow: var(--shadow);
  animation: toast-in .2s ease-out;
}
.toast.err { border-left-color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* ═════════ Retos ═════════ */
.retos { margin-top: 26px; max-width: 46ch; }
.retos-title { font-size: 15px; margin-bottom: 8px; }
.retos-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 5px; }
.retos-list li {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 8px; padding: 7px 11px;
}
.retos-list li.hecho { border-left-color: var(--green); opacity: .62; }
.retos-list li.hecho .r-texto { text-decoration: line-through; }
.retos-list .r-texto { flex: 1; }
.retos-list .r-prog { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.retos-list .r-premio {
  flex: none; background: rgba(246, 208, 107, .16); color: var(--gold);
  border-radius: 99px; padding: 1px 8px; font-size: 12px; font-weight: 700;
}
.retos-list li.hecho .r-premio { background: rgba(95, 196, 111, .16); color: var(--green); }
.retos-list.semanal li { border-left-color: var(--blue); align-items: flex-start; }
.retos-list.semanal li.hecho { border-left-color: var(--green); }
.retos-list.semanal .r-texto { line-height: 1.35; }
.retos-list.semanal .r-premio { background: rgba(106, 183, 255, .16); color: var(--blue); }
.retos-list.semanal li.hecho .r-premio { background: rgba(95, 196, 111, .16); color: var(--green); }

.premio { color: var(--gold); margin: 0; }

/* Anuncio de carta Única: el documento pide que se note que no es una carta cualquiera. */
.unica-sheet { max-width: 420px; }
.unica-kicker {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  background: linear-gradient(90deg, #b478ff, #6ab7ff, #f6d06b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.unica-sheet .card { margin: 0 auto; }
.retos-hechos { list-style: none; margin: 0; padding: 0; color: var(--green); font-size: 13px; display: grid; gap: 2px; }

/* ═════════ Enciclopedia ═════════ */
.enc-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px;
  align-items: start; margin-bottom: 20px;
}
.enc-head h1 { font-size: 26px; margin-bottom: 8px; }
@media (max-width: 640px) { .enc-head { grid-template-columns: 1fr; gap: 14px; } }
.enc-head p { margin: 0; max-width: 58ch; }
.enc-reglas {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px;
}
.enc-reglas h2 { font-size: 15px; margin-bottom: 8px; }
.enc-reglas ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.enc-reglas b { color: var(--fg); }

.card.no-tengo { filter: grayscale(.85) brightness(.62); }
.card.no-tengo:hover { filter: none; }

.enc-mas { display: grid; place-items: center; margin: 18px 0; }
.enc-mas[hidden] { display: none; }

.enc-vocab { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 22px; }
.enc-vocab h2 { font-size: 20px; margin-bottom: 6px; }
.enc-vocab > p { max-width: 70ch; margin: 0 0 18px; }
.enc-vocab h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 8px; }
.vocab-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 26px; }
.vocab-cols > div { display: grid; gap: 8px; align-content: start; }
.vocab-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 4px; }
.vocab-list li {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: baseline;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; font-size: 13px;
}
.vocab-list li span { color: var(--muted); }
.vocab-list li i { font-style: normal; color: var(--gold); font-size: 12px; white-space: nowrap; }

/* ═════════ Arte dibujado a mano ═════════ */
/* Se usa si existe en art/manual/; si no, se ve el dibujo procedural y nada de esto aplica. */
.arte-manual { width: 100%; height: 100%; object-fit: cover; display: block; }
.arte-retrato { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.portrait:has(.arte-retrato) { padding: 0; overflow: hidden; }

.rival.con-retrato { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "retrato top" "retrato frase" "retrato meta" "retrato affs"; column-gap: 12px; }
.rival.con-retrato .rv-retrato { grid-area: retrato; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; }
.rival.con-retrato .rv-top { grid-area: top; }
.rival.con-retrato .rv-frase { grid-area: frase; }
.rival.con-retrato .rv-meta { grid-area: meta; }

/* El tapete solo se pinta si hay imagen: la variable la define app.mjs al arrancar. */
body.con-arte-manual .boards {
  background-image: var(--tapete, none);
  background-size: cover;
  background-position: center;
}

/* ═════════ Cambio de mano inicial ═════════ */
.mulligan { display: grid; gap: 16px; align-content: start; justify-items: center; padding-top: 4vh; }
.mulligan h1 { font-size: 26px; }
.mulligan > p { max-width: 60ch; text-align: center; margin: 0; }
/* Fila que salta de línea, no rejilla: la rejilla de auto-fill se medía para cinco columnas (794 px)
   y, como la pantalla de partida se ajusta a lo que contiene, en un móvil echaba toda la pantalla
   por la derecha: el título salía cortado y la tercera carta no se veía. Con flex lo mínimo es una
   carta, y en un móvil caben tres por fila. */
.grid.small.mulligan-mano {
  display: flex; flex-wrap: wrap; justify-content: center; max-width: 900px;
  --card-w: min(150px, calc((100vw - 64px) / 3));
}
.mulligan-mano > .card { width: var(--card-w); }
.mulligan { min-width: 0; max-width: 100%; }
.mulligan > p { overflow-wrap: anywhere; }
.mulligan-mano .card.descartada {
  opacity: .45; filter: grayscale(.8);
  outline: 2px dashed var(--red); outline-offset: 2px;
}
.mulligan-mano .card.descartada::after {
  content: "se cambia"; position: absolute; inset: auto 0 8px; text-align: center;
  font-size: 11px; color: var(--red); text-transform: uppercase; letter-spacing: .06em;
}
.mulligan-pie { display: flex; gap: 16px; align-items: center; }
.mulligan-aviso {
  margin: 0; padding: 7px 16px; border-radius: 99px; font-size: 13.5px;
  background: rgba(246, 208, 107, .12); border: 1px solid rgba(246, 208, 107, .35); color: var(--gold);
}

/* ═════════ Cámara sellada ═════════ */
.sealed { display: grid; gap: 16px; }
.sealed[hidden] { display: none; }
.sealed-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; align-items: start;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
}
.sealed-head h1 { font-size: 24px; margin-bottom: 6px; }
.sealed-head p { margin: 0 0 6px; max-width: 62ch; }
.sealed-controls { display: grid; gap: 8px; }
.sealed-count {
  font-size: 26px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
  border-radius: 10px; padding: 6px;
}
.sealed-count.bien { background: rgba(95, 196, 111, .14); color: var(--green); }
.sealed-count.mal { background: rgba(224, 86, 74, .12); color: var(--red); }
.sealed-summoner { font-size: 13px; line-height: 1.35; }
.sealed-error { color: var(--red); font-size: 13.5px; margin: 0; }

/* Una carta sellada es temporal: se ve que no tiene arte revelado de verdad.
   Las que no están en el mazo se apagan, pero siguen legibles: hay que poder elegir. */
.sealed-card .c-art { filter: saturate(.55) contrast(1.04); }
.sealed-card.picked .c-art { filter: none; }
.sealed-off { opacity: .66; }
.sealed-off:hover { opacity: 1; }
.keep-grid { --card-w: 118px; max-height: 46vh; overflow-y: auto; padding: 4px; }

/* ═════════ Responsive ═════════ */
@media (max-width: 1100px) {
  .sealed-head { grid-template-columns: 1fr; }
  .builder { grid-template-columns: 1fr; }
  .deck-side { position: static; max-height: none; }
  .reveal-wrap { grid-template-columns: 1fr; }
  .reveal-stage { width: 100%; }
  .match-side-panel { width: 190px; }
}
@media (max-width: 760px) {
  :root { --card-w: 140px; }
  .screen { padding: 14px; }
  .topbar { flex-wrap: wrap; gap: 10px; }
  /* Sin envolver, las once pestañas forman una fila de 800 px que en un móvil no cabe, y como el
     cuerpo lleva overflow-x oculto no se corta con scroll: se corta y punto, dejando pestañas
     inalcanzables. Se descubrió al medir las once pantallas a 390 px de ancho. */
  .tabs { order: 3; width: 100%; margin: 0; flex-wrap: wrap; justify-content: flex-start; gap: 5px; }
  .tabs button { padding: 5px 11px; font-size: 13.5px; }
  .profile { margin-left: 0; }
  /* minmax(0, 1fr) y no 1fr a secas: `1fr` es `minmax(auto, 1fr)`, y ese suelo `auto` deja que
     el contenido estire la pista por encima del contenedor. Como .match lleva overflow oculto, eso
     no desborda la página: la RECORTA. La mano de cinco cartas de 116 px mide 608 y estiraba el
     tablero 254 px fuera de un móvil de 390, con las cartas de la derecha inalcanzables. */
  .side { grid-template-columns: minmax(0, 1fr); }
  .hand-zone { grid-template-columns: minmax(0, 1fr); }
  /* Y la mano rueda de lado DENTRO de su caja, que es donde el desbordamiento no molesta: con
     cinco cartas legibles no hay tamaño que quepa en 390 px, así que o se encogen hasta no verse
     o se deslizan. */
  .hand { overflow-x: auto; overflow-y: hidden; justify-content: flex-start; scrollbar-width: thin; }
  .hand .card { --card-w: 96px; width: 96px; }
  .hand .card:hover { transform: none; box-shadow: none; }
  .match-side-panel { width: 100%; grid-template-columns: 1fr 1fr; }
  .log { grid-column: 1 / -1; height: 84px; }
  .minion { width: 84px; height: 108px; grid-template-rows: 46px auto 1fr; }
  .match { height: auto; }
}

/* Aviso de que el poder sube de precio: pequeño, para que no compita con el coste actual. */
.pb-subida { display: block; font-size: 11px; opacity: .7; margin-top: 2px; }

/* Aviso de aleación activa. Va dentro de la mesa, pegado abajo, para que se lea como una
   propiedad de esa mesa y no como un mensaje del sistema. */
.aleacion-aviso {
  position: absolute; left: 8px; bottom: 4px;
  font-size: 11px; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(220, 180, 60, .16); border: 1px solid rgba(220, 180, 60, .4);
  color: #d9b743; pointer-events: none;
}
.board { position: relative; }

/* Huecos de la fila, para elegir dónde entra una criatura. Estrechos, porque compiten por sitio
   con las propias criaturas: lo que tienen que hacer es ser pulsables, no llamar la atención. */
.hueco {
  /* Encogibles: con la mesa llena son seis huecos compitiendo por sitio con cinco criaturas, y en
     pantalla estrecha eso desborda la fila. Pueden estrecharse hasta 14px sin dejar de pulsarse. */
  flex: 0 1 auto; width: 26px; min-width: 14px; min-height: 96px;
  display: grid; place-items: center;
  border: 1px dashed rgba(255, 255, 255, .28); border-radius: 8px;
  background: rgba(255, 255, 255, .03); color: rgba(255, 255, 255, .5);
  font-size: 13px; cursor: pointer; padding: 0;
  transition: background .12s, border-color .12s, color .12s;
}
.hueco:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); color: #fff; }
/* El hueco que da adyacencia. Mismo dorado que el aviso de aleación: las dos son la misma idea,
   que la mesa te está dando ataque por cómo está colocada. */
.hueco.gana {
  border-color: rgba(220, 180, 60, .7); border-style: solid;
  background: rgba(220, 180, 60, .14); color: #d9b743; font-weight: 700;
}
.hueco.gana:hover { background: rgba(220, 180, 60, .26); }

/* ───────────────────────── Mosaico ─────────────────────────
   El segundo modo de combate. Aquí la foto ES la superficie de juego, así que la carta de la
   rejilla es casi toda ilustración: los cuatro números van encima, pequeños, y el nombre solo
   aparece al pasar por encima. Lo que tiene que verse a un metro es de quién es cada casilla. */

.mo-portada { max-width: 720px; margin: 0 auto; padding: 32px 16px; }
.mo-portada h1 { margin: 0 0 12px; }
.mo-lead { font-size: 16px; line-height: 1.55; margin: 0 0 14px; }
.mo-falta { color: #e0a33a; }

.mo-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.mo-cabecera h1 { margin: 0 0 4px; }
.mo-marcador { display: flex; gap: 10px; }
.mo-punto { text-align: center; padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,.05); }
.mo-punto b { display: block; font-size: 22px; line-height: 1.1; }
.mo-punto span { font-size: 11px; opacity: .7; }
.mo-punto.mia b { color: #6fc2ff; }
.mo-punto.suya b { color: #ff8a6f; }

.mo-mesa { display: grid; gap: 14px; justify-items: center; margin-top: 14px; }
.mo-quien { display: block; font-size: 12px; opacity: .7; margin-bottom: 6px; text-align: center; }
.mo-dorsos { display: flex; gap: 6px; justify-content: center; }
.mo-dorso {
  width: 26px; height: 36px; border-radius: 5px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 4px, rgba(255,255,255,.03) 4px 8px);
  border: 1px solid rgba(255,255,255,.14);
}

.mo-rejilla {
  display: grid;
  grid-template-columns: repeat(var(--lado, 3), minmax(76px, 116px));
  gap: 8px;
}

.mo-celda {
  position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden;
  border: 2px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
  padding: 0; display: grid; place-items: center; color: inherit;
}
.mo-celda.vacia { cursor: pointer; border-style: dashed; font-size: 22px; opacity: .55; }
.mo-celda.vacia:hover { opacity: 1; background: rgba(255,255,255,.08); }
.mo-celda.bloqueada { opacity: .25; }

/* De quién es la casilla. Es lo único que hay que poder leer de lejos, así que va en el borde y
   en un velo de color sobre la foto, no en un icono pequeño. */
.mo-celda.puesta::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  transition: background .35s ease;
}
.mo-celda.puesta.mia { border-color: #4a9fe0; }
.mo-celda.puesta.mia::after { background: linear-gradient(180deg, rgba(74,159,224,.30), rgba(74,159,224,.10)); }
.mo-celda.puesta.suya { border-color: #e0684a; }
.mo-celda.puesta.suya::after { background: linear-gradient(180deg, rgba(224,104,74,.30), rgba(224,104,74,.10)); }

.mo-art { position: absolute; inset: 0; }
.mo-art svg { width: 100%; height: 100%; display: block; }

.mo-lado {
  position: absolute; z-index: 2; font-size: 12px; font-weight: 700; line-height: 1;
  padding: 2px 4px; border-radius: 4px; background: rgba(0,0,0,.55); color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.mo-lado.arriba { top: 3px; left: 50%; transform: translateX(-50%); }
.mo-lado.abajo { bottom: 3px; left: 50%; transform: translateX(-50%); }
.mo-lado.izquierda { left: 3px; top: 50%; transform: translateY(-50%); }
.mo-lado.derecha { right: 3px; top: 50%; transform: translateY(-50%); }

.mo-nombre {
  position: absolute; z-index: 3; bottom: 0; left: 0; right: 0;
  font-size: 10px; padding: 12px 4px 3px; text-align: center;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  opacity: 0; transition: opacity .15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mo-celda:hover .mo-nombre, .mo-carta:hover .mo-nombre { opacity: 1; }

/* La carta que entra y las que cambian de bando. El giro es el verbo del modo: «tu carta ahora
   es mía». Un volteo holgado se anuncia más que uno apretado, que es información y no adorno. */
@keyframes mo-entrar { from { transform: scale(.7); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes mo-girar { 50% { transform: rotateY(90deg) scale(1.04); } }
.mo-celda.entrando { animation: mo-entrar .4s ease-out; z-index: 4; }
.mo-celda.volteando { animation: mo-girar .5s ease-in-out; z-index: 4; }
.mo-celda.volteando.holgado { box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.mo-celda.volteando.apretado { box-shadow: 0 0 0 2px rgba(255,255,255,.25); }

.mo-mano .mo-cartas { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mo-mano.quieta { opacity: .55; pointer-events: none; }
.mo-carta {
  position: relative; width: 92px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden;
  border: 2px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  padding: 0; cursor: pointer; color: inherit;
  transition: transform .12s, border-color .12s;
}
.mo-carta:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.4); }
.mo-carta.elegida { border-color: #4a9fe0; transform: translateY(-6px); box-shadow: 0 6px 18px rgba(74,159,224,.35); }

.mo-aviso { text-align: center; min-height: 20px; font-size: 13px; opacity: .85; margin: 10px 0 4px; }
.mo-vacia { opacity: .5; font-size: 13px; }

@media (max-width: 560px) {
  .mo-rejilla { grid-template-columns: repeat(var(--lado, 3), minmax(64px, 92px)); gap: 6px; }
  .mo-carta { width: 68px; }
}

/* Elegir la mano del Mosaico. El medidor de cobertura no es un adorno: es la única forma de
   enseñar, sin un tutorial, que aquí lo que vale es el conjunto y no la carta. */
.mo-eleccion { max-width: 960px; margin: 0 auto; }
.mo-cobertura { text-align: center; padding: 6px 14px; border-radius: 10px; background: rgba(255,255,255,.05); }
.mo-cobertura b { display: block; font-size: 26px; line-height: 1.05; }
.mo-cobertura b span { font-size: 14px; opacity: .55; font-weight: 400; }
.mo-cobertura > span { font-size: 11px; opacity: .7; }

.mo-brujula { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 6px; }
.mo-dir {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: 2px 8px; align-items: center;
  padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.mo-dir-n { grid-row: span 2; font-size: 20px; font-weight: 700; }
.mo-dir-l { font-size: 11px; opacity: .7; text-transform: capitalize; }
.mo-dir-barra { height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.mo-dir-barra i { display: block; height: 100%; background: currentColor; }
.mo-dir.bien { color: #63c08a; }
.mo-dir.regular { color: #d8b34a; }
.mo-dir.flojo { color: #e0684a; }

.mo-pista { font-size: 13px; opacity: .85; margin: 6px 0 12px; }
.mo-acciones { flex-wrap: wrap; }
.mo-coleccion {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px; margin-top: 14px;
  max-height: 52vh; overflow-y: auto; padding: 4px;
}
.mo-coleccion .mo-carta { width: 100%; }

@media (max-width: 560px) {
  .mo-brujula { grid-template-columns: repeat(2, 1fr); }
  .mo-coleccion { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

/* La mejor marca de la escalera. Va destacada porque es lo único que convierte ese modo de una
   lotería de siete victorias seguidas en un objetivo que siempre tiene algo en juego. */
.esc-marca { border-left: 3px solid rgba(220, 180, 60, .6); padding-left: 10px; margin-top: 6px; }
.esc-marca b { color: #d9b743; }

/* Elegir rival en el Mosaico. Dos niveles y no cinco: la diferencia entre ellos está medida
   (49,7 puntos) y una lista larga de dificultades sin medir es una lista de adivinanzas. */
.mo-niveles { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin: 12px 0; }
.mo-niveles .mo-quien { align-self: center; margin: 0 4px 0 0; }
.mo-nivel {
  display: grid; gap: 1px; padding: 8px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
  transition: border-color .12s, background .12s;
}
.mo-nivel:hover { border-color: rgba(255,255,255,.35); }
.mo-nivel.on { border-color: #4a9fe0; background: rgba(74,159,224,.12); }
.mo-nivel input { display: none; }
.mo-nivel b { font-size: 14px; }
.mo-nivel span { font-size: 11px; opacity: .7; }
.mo-punto.nivel b { font-size: 15px; }

/* Pantallas de móvil de verdad. A este ancho lo que sobra son los espaciados, no el contenido. */
@media (max-width: 430px) {
  .tabs button { padding: 5px 9px; font-size: 12.5px; }
  .topbar { padding: 8px 12px; gap: 10px; }
  .screen { padding: 12px; }
  .card.size-lg { width: min(300px, 88vw); }
  .filters input { min-width: 0; width: 100%; }
}

/* ═════════ Tu foto es tu carta ═════════ */
/* La foto rellena la ventana de arte recortando, nunca deformando: una cara estirada hace que la
   carta deje de parecer tuya, que es justo lo que se busca. */
.c-foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.card.con-foto .c-art { background: #0b0910; }

.m-art .c-foto { border-radius: 7px; }

/* La estrella: marco propio y una marca que se ve a distancia, porque es LA carta del jugador. */
.card.estrella { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow); }
.c-estrella {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff6d6, var(--gold));
  color: #2a1e0a; font-size: 13px; line-height: 1;
  box-shadow: 0 0 10px rgba(246, 208, 107, .5);
}

/* ── Hoja de subir foto ── */
.sheet.subida { max-width: 460px; }
.subida-previa {
  aspect-ratio: 5 / 3; border-radius: 10px; overflow: hidden; background: #0b0910;
  border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 14px;
}
.subida-previa img { width: 100%; height: 100%; object-fit: cover; }
.subida-previa .cargando { color: var(--muted); font-size: 13px; }

.campo { display: block; margin-bottom: 14px; }
.campo > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.campo input[type="text"] {
  width: 100%; background: var(--panel); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 11px; color: var(--fg);
}
.campo input[type="range"] { width: 100%; }

.opciones { display: flex; flex-wrap: wrap; gap: 7px; }
.opcion {
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 12px; color: var(--fg); cursor: pointer; font-size: 13px;
  transition: border-color .15s, background .15s;
}
.opcion:hover { border-color: var(--aff, #666); }
.opcion.on { border-color: var(--aff, var(--gold)); background: color-mix(in srgb, var(--aff, #f6d06b) 16%, transparent); }

/* ── Hoja de la carta estrella ── */
.estrella-cab { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.estrella-cab .card { width: 150px; flex: none; }
.estrella-datos { flex: 1; min-width: 0; }
.estrella-escalera { display: flex; gap: 6px; margin: 10px 0; }
.esc-paso {
  flex: 1; text-align: center; padding: 6px 4px; border-radius: 8px; font-size: 12px;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
}
.esc-paso.hecho { border-color: var(--gold); color: var(--fg); }
.esc-paso.ahora { border-color: var(--gold); background: color-mix(in srgb, #f6d06b 18%, transparent); color: var(--fg); }
.sacrificables { max-height: 320px; overflow-y: auto; margin: 12px 0; }
.sacrificables .card { cursor: pointer; }
.sacrificables .card.elegida { outline: 2px solid var(--red, #e0564a); outline-offset: 2px; }

@media (max-width: 560px) {
  .estrella-cab { flex-direction: column; align-items: center; }
  .sheet.subida { max-width: 100%; }
}

/* ═════════ Dos personas, un móvil ═════════ */
.sheet.hotseat-inicio { max-width: 420px; }

/* La pantalla de por medio tapa el tablero entero a propósito: si se transparentara, el que
   acaba de jugar vería la mano del otro, que es justo lo que esta pantalla existe para evitar. */
.sheet.pasar-movil { max-width: 380px; text-align: center; }
.sheet.pasar-movil .win-banner { font-size: 46px; }
#overlay:has(.pasar-movil) { background: #08060d; }

/* El hueco del arte cuando la imagen no carga: el color de su afinidad en vez de un icono roto. */
.c-art { background: linear-gradient(160deg, var(--aff-deep, #1a1520), #0b0910); }
.m-art { background: linear-gradient(160deg, var(--aff-deep, #1a1520), #0b0910); }

/* ═════════ Ver qué hace una carta ═════════ */
/* El botón de la esquina. Es la única pista visible de que una carta se puede mirar en grande:
   antes solo estaba el clic derecho, que en un móvil no existe.

   44 px de zona tocable aunque el círculo se vea de 22: es el tamaño por debajo del cual un dedo
   falla, y fallar aquí significa jugar la carta sin querer. El círculo se ve a medias y se
   enciende al acercarse, para que no compita con el dibujo. */
.ver-ficha {
  position: absolute; top: 5px; right: 5px; z-index: 4;
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(12, 10, 18, .72); color: #e7e0f5;
  font: 700 12px/1 system-ui, sans-serif; cursor: pointer;
  display: grid; place-items: center;
  opacity: .55; transition: opacity .12s, background .12s, transform .12s;
}
.ver-ficha::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.ver-ficha:hover, .ver-ficha:focus-visible { opacity: 1; background: rgba(12, 10, 18, .92); transform: scale(1.08); }
.ver-ficha:focus-visible { outline: 2px solid var(--gold, #f6d06b); outline-offset: 1px; }
.card:hover .ver-ficha, .minion:hover .ver-ficha { opacity: .92; }

/* La estrella ya ocupa esa esquina, así que el botón se corre a la izquierda. */
.card.estrella .ver-ficha { right: 32px; }

/* En la carta grande del detalle no pinta nada: ya estás mirándola. */
.card.size-lg .ver-ficha { display: none; }

/* En una criatura de la mesa, que es más pequeña, el botón se reduce un punto. */
.minion .ver-ficha { width: 20px; height: 20px; top: 3px; right: 3px; font-size: 11px; }

/* En pantalla táctil no hay «pasar por encima», así que el botón se ve siempre entero. Y se hace
   más grande de verdad: la carta recorta lo que se salga de ella, así que agrandar solo la zona
   invisible no sirve de nada en la esquina, que es justo donde está. */
@media (hover: none) {
  .ver-ficha { opacity: .85; width: 30px; height: 30px; font-size: 14px; }
  .minion .ver-ficha { width: 26px; height: 26px; font-size: 13px; }
}

/* ═════════ La mano en una pantalla grande ═════════ */
/* En un monitor sobra sitio justo donde hace falta: la mano. A 116 px una carta no se lee ni
   acercándose, y todo el espacio libre se estaba yendo al hueco vacío del centro del tablero.
   A 148 px el nombre, el coste y los números se leen sin sacar la carta grande, que pasa a ser
   para el texto de reglas y no para enterarte de qué carta es. */
@media (min-width: 1100px) and (min-height: 760px) {
  .hand .card { --card-w: 148px; width: 148px; margin-inline: -16px; }
  .hand { min-height: 218px; padding-top: 26px; }
}


/* ═════════ Lo que pasa en la mesa, contado con la imagen ═════════ */
/* Ver `src/efectos.mjs` para el porqué de cada uno de los tres. */

/* ── El número que sube de quien recibe el golpe ── */
.num-flotante {
  position: fixed; z-index: 80; pointer-events: none;
  transform: translate(-50%, -50%);
  font: 800 25px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -.02em;
  /* Contorno oscuro para que se lea igual sobre un dibujo claro que sobre uno oscuro: sin él,
     un "-4" rojo sobre la ilustración de un atardecer no se ve. */
  text-shadow: 0 2px 0 rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .7);
  animation: num-sube .9s cubic-bezier(.2, .7, .3, 1) forwards;
}
.num-flotante.dano { color: #ff6b5e; }
.num-flotante.cura { color: #7fdc6a; }
.num-flotante.mejora { color: #f6d06b; }
.num-flotante.escudo { color: #8fd3ff; font-size: 20px; }
@keyframes num-sube {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  32%  { transform: translate(-50%, -62%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(.95); }
}

/* ── La flecha desde quien ataca hasta donde apuntas ── */
.flecha-objetivo {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 70; pointer-events: none; overflow: visible;
}
.flecha-objetivo .hilo {
  stroke: var(--gold, #f6d06b); stroke-width: 5; stroke-linecap: round;
  opacity: .92;
  filter: drop-shadow(0 0 7px rgba(246, 208, 107, .55));
  stroke-dasharray: 13 9;
  animation: hilo-corre .5s linear infinite;
}
.flecha-objetivo .punta {
  fill: var(--gold, #f6d06b);
  filter: drop-shadow(0 0 7px rgba(246, 208, 107, .6));
}
@keyframes hilo-corre { to { stroke-dashoffset: -22; } }

/* ── El cartel de turno ── */
.cartel-turno {
  position: fixed; top: 34%; left: 0; right: 0; z-index: 75;
  pointer-events: none; text-align: center;
  font: 700 34px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .01em;
  text-shadow: 0 3px 16px rgba(0, 0, 0, .9);
  animation: cartel-pasa 1.4s ease-out forwards;
}
.cartel-turno.mio { color: #f6d06b; }
.cartel-turno.suyo { color: #cfc6de; font-size: 27px; }
@keyframes cartel-pasa {
  0%   { opacity: 0; transform: scale(.82); }
  14%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}

/* ── La carta que puedes pagar se distingue de la que no ── */
/* Antes solo se apagaba la que no podías jugar, y apagada sobre fondo oscuro es casi lo mismo que
   encendida. Marcar en positivo lo que SÍ puedes hacer es lo que hace que de un vistazo sepas
   cuántas jugadas tienes. */
.hand .card.jugable { border-color: rgba(246, 208, 107, .55); }
.hand .card.jugable::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(246, 208, 107, .45), 0 0 16px rgba(246, 208, 107, .28);
  animation: jugable-late 2.4s ease-in-out infinite;
}
@keyframes jugable-late { 50% { box-shadow: inset 0 0 0 1px rgba(246, 208, 107, .7), 0 0 22px rgba(246, 208, 107, .42); } }

@media (prefers-reduced-motion: reduce) {
  .num-flotante, .cartel-turno { animation-duration: .01ms; }
  .flecha-objetivo .hilo { animation: none; }
  .hand .card.jugable::before { animation: none; }
}


/* ═════════ El panel lateral, en su propia columna ═════════ */
/* El panel (poder, terminar turno, consejo y registro) compartía fila con la mano. Como el panel
   mide más de lo que mide la mano, esa fila se estiraba a la altura del panel y la mano, alineada
   abajo, dejaba un agujero de casi doscientos píxeles justo encima. En pantalla se veía como si
   faltara media pantalla de tablero.

   Ahora ocupa una columna entera a la derecha, de arriba abajo, que es donde lo pone cualquier
   juego del género: los controles quietos en un sitio y el tablero entero en el otro.

   `display: contents` en `.hand-zone` hace que sus dos hijos entren en la rejilla de `.match`
   como si el envoltorio no existiera. Solo en pantalla ancha: en un móvil la mano y el panel van
   uno debajo de otro, y ahí el envoltorio sí hace falta. */
@media (min-width: 1100px) {
  .match {
    grid-template-columns: minmax(0, 1fr) 250px;
    grid-template-rows: auto 1fr auto auto;
    column-gap: 14px;
  }
  .match > .side, .match > .boards { grid-column: 1; }
  .hand-zone { display: contents; }
  .hand { grid-column: 1; }
  .match-side-panel {
    grid-column: 2; grid-row: 1 / -1;
    width: auto; align-self: stretch;
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }
  /* Con la columna entera para él, el registro puede crecer y enseñar la partida, en vez de ser
     una ventanita de cuatro renglones. */
  .match-side-panel .log { min-height: 0; }
}