/* ============================================================
   WARERA TCG - Cliente
   Estetica: mesa de guerra oscura, madera envejecida, metal
   remachado, laton, verde oliva. Solo system fonts.
   ============================================================ */

:root {
  --wood-1:#3a2716; --wood-2:#2a1b0e; --wood-3:#180f06;
  --metal-1:#33322b; --metal-2:#57544a; --metal-3:#7d7a68; --metal-hi:#a9a58f;
  --brass:#b8912f; --brass-hi:#e8c25a; --brass-lo:#6e5418;
  --olive:#5f5f2c; --olive-hi:#8f8f3c;
  --green:#6fbf3a; --green-hi:#a6ef5e;
  --red:#c8382c; --red-hi:#ff5a48;
  --gold:#efc84a;
  --ink:#ece1c6; --ink-dim:#b6ab8b; --ink-faint:#8a8068;

  /* La mano y, sobre todo, la zona de despliegue mandan en pantalla.
     El esbirro se dimensiona por ALTO (min de vh/vw) para garantizar
     >=150px de alto en 1080p sin desbordar en anchos pequenos. */
  --card-w: clamp(92px, 8.6vw, 140px);
  --minion-h: clamp(122px, min(21vh, 11.6vw), 208px);
  --minion-w: calc(var(--minion-h) * 0.74);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", "Segoe UI",
               system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(60,40,20,.35), transparent 60%),
    repeating-linear-gradient(92deg, #241708 0 5px, #1e1206 5px 10px),
    linear-gradient(#241708, #120b04);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ---------- Paneles metalicos genericos ---------- */
.panel-metal {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.25)),
    linear-gradient(160deg, var(--metal-2), var(--metal-1));
  border: 3px solid #1b1a15;
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 2px rgba(120,116,98,.35),
    0 8px 22px rgba(0,0,0,.6);
}
/* remaches en las esquinas */
.panel-metal::before {
  content:""; position:absolute; inset:6px; border-radius:6px;
  pointer-events:none;
  background:
    radial-gradient(circle 3px at 0 0, #cfc9ad 40%, #3a382c 55%, transparent 60%),
    radial-gradient(circle 3px at 100% 0, #cfc9ad 40%, #3a382c 55%, transparent 60%),
    radial-gradient(circle 3px at 0 100%, #cfc9ad 40%, #3a382c 55%, transparent 60%),
    radial-gradient(circle 3px at 100% 100%, #cfc9ad 40%, #3a382c 55%, transparent 60%);
  background-repeat:no-repeat;
}

/* ============================================================
   PANTALLAS
   ============================================================ */
.screen { display: none; position: fixed; inset: 0; }
.screen.active { display: flex; align-items: center; justify-content: center; }

/* ---------- Login ---------- */
.login-box, .waiting-box {
  width: min(90vw, 440px);
  padding: 38px 34px 30px;
  text-align: center;
}
.dogtags { color: var(--brass); letter-spacing: 8px; font-size: 22px; opacity:.7; }
.game-title {
  font-size: clamp(34px, 6vw, 58px);
  letter-spacing: 6px; font-weight: 800;
  color: var(--ink);
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(200,150,60,.35);
  margin: 6px 0 2px;
}
.game-title span { color: var(--brass-hi); }
.tagline {
  color: var(--ink-dim); letter-spacing: 4px; font-size: 12px;
  margin-bottom: 26px;
}
#name-input {
  width: 100%; padding: 13px 14px; font-size: 18px;
  color: var(--ink); text-align: center; letter-spacing: 1px;
  background: linear-gradient(#161009, #241a0e);
  border: 2px solid #0d0a05;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7), inset 0 0 0 1px rgba(120,116,98,.3);
  border-radius: 6px; outline: none;
  font-family: inherit;
}
#name-input::placeholder { color: var(--ink-faint); }
#name-input:focus { box-shadow: inset 0 2px 6px rgba(0,0,0,.7), 0 0 0 2px rgba(200,150,60,.5); }

.btn-brass {
  margin-top: 18px; padding: 13px 40px; cursor: pointer;
  font-family: inherit; font-size: 20px; font-weight: 800; letter-spacing: 3px;
  color: #22160a; text-shadow: 0 1px 0 rgba(255,255,255,.35);
  background: linear-gradient(180deg, var(--brass-hi), var(--brass) 55%, var(--brass-lo));
  border: 2px solid #2a1e08;
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 5px 12px rgba(0,0,0,.55);
  transition: transform .08s, filter .12s;
}
.btn-brass:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-brass:active { transform: translateY(1px); filter: brightness(.95); }
.login-hint { margin-top: 20px; color: var(--ink-faint); font-size: 12px; letter-spacing: 1px; }

/* ---------- Selector de mazo (V0.3) ---------- */
.deck-select-label {
  margin: 18px 0 8px; color: var(--brass-hi);
  font-size: 12px; font-weight: 700; letter-spacing: 3px;
}
.deck-select { display: flex; gap: 10px; justify-content: center; }
.deck-card {
  position: relative; flex: 1 1 0; min-width: 0;
  min-height: clamp(120px, 22vh, 168px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8px 9px 10px; cursor: pointer; overflow: hidden;
  font-family: inherit; text-align: left;
  border: 2px solid #0d0a05; border-radius: 8px;
  background-color: #1a1206; background-size: cover; background-position: 50% 22%;
  box-shadow: inset 0 0 0 1px rgba(120,116,98,.3), 0 4px 10px rgba(0,0,0,.5);
  filter: grayscale(.55) brightness(.68);
  transition: filter .14s, transform .08s, box-shadow .16s;
}
.deck-card[data-deck="warera"] { background-image: url("/cards/Spain/legion.png"); }
.deck-card[data-deck="inkietud"] { background-image: url("/cards/inkietud/mazo inkietud/15Loko.png"); }
/* Velo oscuro para que el texto sea legible sobre la imagen. */
.deck-card .deck-tint {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(6,4,1,.15) 0%, rgba(6,4,1,.55) 55%, rgba(6,4,1,.9) 100%);
}
.deck-card .deck-name {
  position: relative; z-index: 1;
  font-weight: 800; letter-spacing: 3px; font-size: 17px; color: var(--ink);
  text-shadow: 0 2px 4px #000, 0 0 8px rgba(0,0,0,.85);
}
.deck-card .deck-desc {
  position: relative; z-index: 1; margin-top: 4px;
  font-size: 10.5px; line-height: 1.25; letter-spacing: .3px;
  color: var(--ink-dim); text-shadow: 0 1px 3px #000, 0 0 6px rgba(0,0,0,.9);
}
.deck-card:hover { filter: grayscale(.25) brightness(.88); transform: translateY(-1px); }
.deck-card.selected {
  filter: none; border-color: var(--brass-hi);
  box-shadow: 0 0 0 2px var(--brass-hi), 0 0 16px rgba(232,194,90,.55), 0 4px 10px rgba(0,0,0,.5);
}
.deck-card.selected .deck-name { color: var(--brass-hi); }
.deck-card.selected .deck-desc { color: var(--ink); }
/* Móvil / login estrecho o bajo: tarjetas más compactas sin romper el layout. */
@media (max-width: 480px), (max-height: 640px) {
  .deck-select-label { margin: 12px 0 6px; font-size: 11px; }
  .deck-select { gap: 8px; }
  .deck-card { min-height: clamp(96px, 17vh, 132px); padding: 7px 8px 9px; }
  .deck-card .deck-name { font-size: 15px; letter-spacing: 2px; }
  .deck-card .deck-desc { font-size: 9.5px; }
}

/* ---------- Esperando ---------- */
.waiting-box h2 { letter-spacing: 3px; font-weight: 700; margin-bottom: 8px; }
.waiting-box p { color: var(--ink-dim); font-size: 13px; letter-spacing: 1px; }
.radar {
  width: 92px; height: 92px; margin: 4px auto 22px; border-radius: 50%;
  border: 2px solid rgba(140,200,90,.35);
  background: radial-gradient(circle, rgba(90,150,60,.12), transparent 70%);
  position: relative; overflow: hidden;
}
.radar span {
  position: absolute; inset: 0;
  background: conic-gradient(from 0deg, rgba(150,220,90,.55), transparent 25%);
  animation: sweep 1.8s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }

/* ============================================================
   PARTIDA - layout
   ============================================================ */
.game-grid {
  display: grid;
  grid-template-columns: 1fr clamp(160px, 15vw, 230px);
  width: 100vw; height: 100vh;
  gap: 8px; padding: 8px;
}
.battlefield {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0; min-height: 0;
  padding: 6px 14px 0;
  border-radius: 12px;
  border: 3px solid #0e0a05;
  background:
    linear-gradient(rgba(10,6,2,.30), rgba(6,4,1,.55)),
    repeating-linear-gradient(90deg, #3a2712 0 4px, #33220f 4px 8px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 74px, rgba(255,255,255,.03) 74px 76px, rgba(0,0,0,.22) 76px 150px),
    linear-gradient(#3d2a16, #201408);
  box-shadow: inset 0 0 60px rgba(0,0,0,.6), inset 0 0 0 2px rgba(120,90,50,.25);
}

/* filas de tablero — dominan el viewport */
.board-row {
  position: relative;
  flex: 3 1 0; min-height: var(--minion-h);
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 6px 10px;
  border-radius: 8px;
  border: 2px solid rgba(20,14,7,.7);
  background:
    linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.12)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.15) 0 6px, rgba(255,255,255,.02) 6px 12px);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.55);
}
.board-row.empty::after {
  content: "SIN ESBIRROS"; color: var(--ink-faint); letter-spacing: 3px;
  font-size: 12px; opacity: .5;
}
/* V0.3 — fila abarrotada (>7 esbirros): reduce el tamaño local del esbirro para
   que quepan hasta 10 sin desbordar ni scroll horizontal. Hay que re-declarar
   AMBAS variables aqui: --minion-w se computa en :root a partir del --minion-h de
   :root, asi que redeclararla en la fila la recalcula con el --minion-h reducido. */
.board-row.crowded {
  --minion-h: clamp(84px, 9.4vw, 138px);
  --minion-w: calc(var(--minion-h) * 0.74);
  gap: 5px;
}

/* franja central / turno */
.mid-strip { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 1px 0; }
.mid-line { flex: 1; height: 2px; background: linear-gradient(90deg, transparent, rgba(180,145,47,.5), transparent); }
.turn-indicator {
  display: flex; flex-direction: column; align-items: center; line-height: 1.05;
  padding: 3px 18px; border-radius: 6px; min-width: 150px;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
  border: 1px solid rgba(120,90,50,.4);
}
.turn-indicator .ti-label { font-weight: 800; letter-spacing: 3px; font-size: 15px; }
.turn-indicator .ti-turn { font-size: 10px; color: var(--ink-dim); letter-spacing: 2px; }
.turn-indicator.yours .ti-label { color: var(--green-hi); text-shadow: 0 0 10px rgba(110,190,60,.6); }
.turn-indicator.theirs .ti-label { color: var(--red-hi); }

/* ============================================================
   Franja de heroe (info jugador)
   ============================================================ */
.hero-strip {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 3px 10px; min-height: 58px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.10));
  border: 1px solid rgba(120,90,50,.35);
}
.hero-strip.active-turn { border-color: rgba(120,200,70,.6); box-shadow: 0 0 14px rgba(110,190,60,.25); }

.hero-portrait {
  position: relative; width: 54px; height: 54px; flex: 0 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #7f7c68, #45433a 60%, #23221b);
  border: 3px solid #17150f;
  box-shadow: inset 0 2px 5px rgba(255,255,255,.25), inset 0 -4px 8px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.hero-portrait.opp { cursor: default; }
/* Objetivo legal de ataque: anillo rojo pulsante + icono de espadas + escala.
   Muy visible tanto en seleccion por clic como durante el arrastre. */
.hero-portrait.target-legal {
  cursor: crosshair; z-index: 6;
  transform: scale(1.08);
  animation: heroTargetPulse 1s ease-in-out infinite;
}
.hero-portrait.target-legal::after {
  content: "⚔"; position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1; color: #fff;
  text-shadow: 0 0 6px #000, 0 2px 3px rgba(0,0,0,.9);
  pointer-events: none;
}
@keyframes heroTargetPulse {
  0%,100% {
    box-shadow: 0 0 0 3px var(--red), 0 0 14px rgba(255,90,72,.7),
                inset 0 2px 5px rgba(255,255,255,.25), inset 0 -4px 8px rgba(0,0,0,.6);
  }
  50% {
    box-shadow: 0 0 0 6px var(--red-hi), 0 0 26px rgba(255,90,72,1),
                inset 0 2px 5px rgba(255,255,255,.25), inset 0 -4px 8px rgba(0,0,0,.6);
  }
}
.hp-badge {
  position: absolute; bottom: -6px; right: -8px;
  min-width: 24px; height: 24px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff;
  background: radial-gradient(circle at 35% 30%, #ff6d5a, var(--red) 60%, #6e120b);
  border: 2px solid #2a0705; border-radius: 50%;
  text-shadow: 0 1px 2px #000; box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.hero-meta { display: flex; flex-direction: column; gap: 3px; min-width: 96px; }
.hero-name {
  font-weight: 700; letter-spacing: 1px; font-size: 15px; color: var(--ink);
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mana-line { display: flex; align-items: center; gap: 8px; }
.mana-num { font-size: 12px; color: var(--brass-hi); font-weight: 700; letter-spacing: 1px; }

/* bidones de mana */
.mana-pips { display: flex; gap: 3px; flex-wrap: wrap; max-width: 160px; }
.pip {
  width: 9px; height: 13px; border-radius: 2px; position: relative;
  background: #241f14; border: 1px solid #0b0906;
  box-shadow: inset 0 0 2px #000;
}
.pip::before {
  content: ""; position: absolute; top: -3px; left: 2px; width: 4px; height: 3px;
  background: #3a3524; border-radius: 1px 1px 0 0;
}
.pip.full { background: linear-gradient(#c9d24a, #6f7d1c); box-shadow: 0 0 4px rgba(190,210,70,.5); }
.pip.full::before { background: #9aa63a; }
.pip.temp { background: linear-gradient(#f0cf6a, #a8791f); box-shadow: 0 0 5px rgba(235,190,80,.75); }
.pip.temp::before { background: #d9b24a; }

/* zonas: mazo / cementerio / mano rival / fatiga */
.zones { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.zone {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 40px; padding: 3px 4px; border-radius: 5px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.30));
  border: 1px solid #17130b;
}
.zone .zicon { font-size: 16px; line-height: 1; color: var(--metal-hi); }
.zone .zcount { font-weight: 800; font-size: 15px; color: var(--ink); }
.zone .zlbl { font-size: 8px; letter-spacing: 1px; color: var(--ink-faint); }
.zone.deck .zicon { color: #b0a678; }
.zone.grave .zicon { color: #9a8f7a; }
.zone.fatigue .zcount { color: var(--red-hi); }

/* mano rival: dorsos */
.hand-backs { display: flex; align-items: center; }
.hand-backs .cardback {
  width: 16px; height: 24px; margin-left: -9px; border-radius: 3px;
  background: linear-gradient(150deg, #4a3a1e, #241608);
  border: 1px solid #0d0a05;
  box-shadow: 1px 0 2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(180,145,47,.25);
}
.hand-backs .hb-count {
  margin-left: 6px; font-weight: 800; font-size: 14px; color: var(--ink); align-self: center;
}

/* ============================================================
   Esbirros en tablero
   ============================================================ */
.minion {
  position: relative; flex: 0 0 auto;
  width: var(--minion-w); height: var(--minion-h);
  border-radius: 8px;
  background-color: #120b04;
  background-repeat: no-repeat;
  background-size: 172%;
  background-position: 50% 20%;
  border: 2px solid #0d0a05;
  box-shadow: inset 0 0 0 1px rgba(120,116,98,.4), 0 4px 8px rgba(0,0,0,.55);
  cursor: default; overflow: hidden;
  transition: transform .1s, box-shadow .12s;
}
.minion .mname {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 10px; letter-spacing: .3px; text-align: center;
  padding: 10px 3px 3px; color: var(--ink);
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* estadisticas */
.mstat {
  position: absolute; bottom: -5px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 19px; color: #fff; text-shadow: 0 1px 2px #000;
  border-radius: 50%; border: 2px solid #17120a;
}
.mstat.atk {
  left: -5px;
  background: radial-gradient(circle at 35% 30%, #ffe37a, var(--gold) 60%, #7a5c12);
  color: #2a1e05; text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.mstat.hp {
  right: -5px;
  background: radial-gradient(circle at 35% 30%, #ff8f7c, var(--red) 60%, #6e120b);
}
.mstat.hp.dmg {
  background: radial-gradient(circle at 35% 30%, #ff5a48, #ff2013 60%, #8a0c04);
  box-shadow: 0 0 8px rgba(255,60,40,.8);
}
/* V0.3 — estadistica bufada (por encima del valor impreso) en verde brillante.
   El ataque siempre; la vida solo cuando esta sin daño (dmg manda el rojo). */
.mstat.atk.buffed {
  background: radial-gradient(circle at 35% 30%, #b6ff7a, #7ed957 58%, #2f8a1e);
  color: #0e2405; text-shadow: 0 1px 0 rgba(255,255,255,.45);
  box-shadow: 0 0 9px rgba(126,217,87,.9);
}
.mstat.hp.buffed {
  background: radial-gradient(circle at 35% 30%, #b6ff7a, #7ed957 58%, #2f8a1e);
  color: #0e2405; text-shadow: 0 1px 0 rgba(255,255,255,.45);
  box-shadow: 0 0 9px rgba(126,217,87,.9);
}
.minion .multi {
  position: absolute; top: 2px; right: 2px;
  font-size: 9px; font-weight: 800; color: #2a1e05;
  background: var(--gold); border-radius: 4px; padding: 0 3px;
  border: 1px solid #17120a;
}

/* indicadores de estado */
.minion.ready {
  box-shadow: inset 0 0 0 1px rgba(120,116,98,.4), 0 0 0 2px var(--green), 0 0 14px rgba(110,190,60,.7);
  cursor: pointer;
}
.minion.ready:hover { transform: translateY(-4px); }
.minion.selected {
  box-shadow: inset 0 0 0 1px rgba(120,116,98,.4), 0 0 0 3px var(--green-hi), 0 0 20px rgba(160,240,90,.9);
  transform: translateY(-6px);
}
.minion.stealth { opacity: .55; }
.minion.stealth::after {
  content: ""; position: absolute; inset: 0; border: 2px dashed rgba(210,210,230,.5);
  border-radius: 8px; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(180,190,210,.06) 0 5px, transparent 5px 10px);
}
.minion.divine {
  box-shadow: inset 0 0 0 2px rgba(255,225,120,.9), 0 0 14px rgba(255,210,80,.85), 0 4px 8px rgba(0,0,0,.55);
}
.minion.divine::before {
  content: ""; position: absolute; inset: -2px; border-radius: 9px; pointer-events: none;
  box-shadow: 0 0 12px 2px rgba(255,215,90,.7); border: 1px solid rgba(255,225,140,.8);
}
/* provocar: marco escudo */
.minion.taunt {
  border-color: #8b8a6a;
  box-shadow: inset 0 0 0 3px rgba(90,90,44,.9), inset 0 0 0 5px rgba(160,160,110,.5), 0 4px 8px rgba(0,0,0,.6);
}
.minion.taunt .taunt-badge {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 20px; z-index: 3;
  background: linear-gradient(180deg, #b7b585, #6f6e3e);
  border: 1px solid #2a2915;
  clip-path: polygon(50% 0, 100% 22%, 100% 62%, 50% 100%, 0 62%, 0 22%);
  box-shadow: 0 2px 3px rgba(0,0,0,.6);
}

/* objetivo legal (esbirro enemigo): borde rojo mas grueso + leve pulso */
.minion.target-legal {
  cursor: crosshair;
  border-color: var(--red-hi);
  box-shadow: inset 0 0 0 2px rgba(255,90,72,.9), 0 0 0 4px var(--red), 0 0 18px rgba(255,90,72,.9);
  animation: minionTargetPulse 1s ease-in-out infinite;
}
.minion.target-legal:hover { transform: translateY(-4px); }
@keyframes minionTargetPulse {
  0%,100% { filter: brightness(1);    box-shadow: inset 0 0 0 2px rgba(255,90,72,.9), 0 0 0 4px var(--red),     0 0 16px rgba(255,90,72,.8); }
  50%     { filter: brightness(1.28); box-shadow: inset 0 0 0 2px rgba(255,120,100,1), 0 0 0 5px var(--red-hi), 0 0 26px rgba(255,90,72,1); }
}
@keyframes pulseTarget {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

/* huecos de insercion en tu tablero */
.islot {
  flex: 0 0 auto; width: 10px; align-self: stretch; border-radius: 6px;
  display: none;
}
.you-board.placing .islot {
  display: block; width: clamp(44px, 5vw, 72px);
  background:
    linear-gradient(rgba(150,235,95,.14), rgba(120,200,70,.06)),
    repeating-linear-gradient(45deg, rgba(150,235,95,.32) 0 8px, rgba(120,200,70,.10) 8px 16px);
  border: 3px dashed rgba(160,240,100,.85);
  box-shadow: inset 0 0 10px rgba(150,235,95,.35);
  cursor: pointer;
}
.you-board.placing .islot:hover {
  background: rgba(150,235,95,.45);
  box-shadow: 0 0 16px rgba(150,235,95,.7), inset 0 0 10px rgba(255,255,255,.4);
}

/* ============================================================
   Mano propia
   ============================================================ */
.hand-row {
  position: relative;
  flex: 0 0 auto; min-height: calc(var(--card-w) * 1.30);
  margin-bottom: -6px; /* la mano puede solapar ligeramente el borde inferior */
  display: flex; align-items: flex-end; justify-content: center;
  gap: 8px; padding: 4px 6px 0; overflow: visible;
  z-index: 5;
}
.card {
  position: relative; flex: 0 0 auto;
  width: var(--card-w); height: calc(var(--card-w) * 1.42);
  border-radius: 7px;
  background-size: cover; background-position: center; background-color: #0c0803;
  box-shadow: 0 6px 12px rgba(0,0,0,.6);
  transition: transform .12s, box-shadow .12s;
  cursor: default;
}
.card:hover { transform: translateY(-10px) scale(1.04); z-index: 20; box-shadow: 0 12px 22px rgba(0,0,0,.7); }
.card.playable {
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--green), 0 0 16px rgba(110,190,60,.6), 0 6px 12px rgba(0,0,0,.6);
}
.card.playable:hover {
  box-shadow: 0 0 0 3px var(--green-hi), 0 0 22px rgba(160,240,90,.85), 0 12px 22px rgba(0,0,0,.7);
}
.card.selected {
  transform: translateY(-18px) scale(1.06); z-index: 25;
  box-shadow: 0 0 0 3px var(--green-hi), 0 0 26px rgba(160,240,90,.95), 0 14px 24px rgba(0,0,0,.75);
}
.card.unplayable { filter: brightness(.72) saturate(.85); }
/* badge de coste actual (siempre) */
.card .cost-badge {
  position: absolute; top: -6px; left: -6px; z-index: 3;
  min-width: 26px; height: 26px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: #fff; text-shadow: 0 1px 2px #000;
  border-radius: 50%; border: 2px solid #0a1830;
  background: radial-gradient(circle at 35% 30%, #7fb4ff, #2f6fd0 60%, #13315f);
  box-shadow: 0 2px 5px rgba(0,0,0,.6);
}
.card .cost-badge.cheap { background: radial-gradient(circle at 35% 30%, #9be85a, #4fae2a 60%, #2a6614); border-color:#153a08; color:#0e2405; text-shadow:0 1px 0 rgba(255,255,255,.4);}
.card .cost-badge.pricey { background: radial-gradient(circle at 35% 30%, #ff9d6a, #d0602f 60%, #6e2e13); border-color:#3a1408; }
/* V0.3 — coste con descuento activo (aura de Legion, etc.) en verde brillante. */
.card .cost-badge.discount {
  background: radial-gradient(circle at 35% 30%, #b6ff7a, #7ed957 58%, #2f8a1e);
  border-color:#153a08; color:#0e2405; text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow: 0 0 10px rgba(126,217,87,.9);
}

/* ============================================================
   Sidebar: log + END TURN
   ============================================================ */
.sidebar { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.log-panel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 8px 6px; }
.log-header {
  text-align: center; font-weight: 800; letter-spacing: 2px; font-size: 12px;
  color: var(--brass-hi); padding-bottom: 6px; border-bottom: 1px solid rgba(180,145,47,.35);
  margin-bottom: 6px;
}
.log { flex: 1 1 auto; overflow-y: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 2px; }
.log-entry {
  font-size: 11.5px; line-height: 1.25; letter-spacing: .2px;
  padding: 3px 6px; border-radius: 4px; color: var(--ink-dim);
  border-left: 3px solid var(--metal-3);
  background: rgba(0,0,0,.2);
  animation: logIn .25s ease;
}
@keyframes logIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; } }
.log-entry.turn   { border-color: var(--brass-hi); color: var(--brass-hi); font-weight: 700; }
.log-entry.attack, .log-entry.damage { border-color: var(--red); color: #e8b0a4; }
.log-entry.death  { border-color: #6a6a6a; color: #9a9a9a; font-style: italic; }
.log-entry.play, .log-entry.summon { border-color: var(--green); color: #c2e6a4; }
.log-entry.draw   { border-color: #4f8fd0; color: #a8c8ef; }
.log-entry.heal   { border-color: #3fae5a; color: #a6e6b0; }
.log-entry.buff   { border-color: var(--gold); color: #ecd48a; }
.log-entry.fatigue, .log-entry.burn { border-color: #a03028; color: #d89088; }
/* V0.3 — eventos de conexion/reconexion en ambar. */
.log-entry.connection { border-color: #e0a12e; color: #f0c674; font-weight: 600; }
.log::-webkit-scrollbar { width: 7px; }
.log::-webkit-scrollbar-track { background: rgba(0,0,0,.3); }
.log::-webkit-scrollbar-thumb { background: var(--metal-2); border-radius: 4px; }

/* END TURN circular */
.endturn-wrap { flex: 0 0 auto; display: flex; justify-content: center; padding-bottom: 4px; }
.end-turn {
  width: clamp(78px, 10vh, 116px); height: clamp(78px, 10vh, 116px);
  border-radius: 50%; cursor: pointer; font-family: inherit;
  font-weight: 800; letter-spacing: 1px; font-size: clamp(13px, 1.6vh, 18px);
  color: #efe6cf; text-shadow: 0 1px 2px #000; line-height: 1.05;
  background: radial-gradient(circle at 38% 30%, #9a9781, #4c4a3d 58%, #29271f);
  border: 4px solid #1c1a14;
  box-shadow:
    0 0 0 3px #6b6858,
    inset 0 3px 8px rgba(255,255,255,.28),
    inset 0 -7px 13px rgba(0,0,0,.65),
    0 6px 14px rgba(0,0,0,.6);
  transition: filter .12s, transform .08s, box-shadow .15s;
}
.end-turn:disabled { filter: grayscale(.8) brightness(.5); cursor: not-allowed; }
.end-turn:not(:disabled) {
  color: #f4ffe6;
  box-shadow:
    0 0 0 3px #6b8a4a,
    inset 0 3px 8px rgba(255,255,255,.3),
    inset 0 -7px 13px rgba(0,0,0,.6),
    0 0 18px rgba(120,200,70,.55), 0 6px 14px rgba(0,0,0,.6);
  animation: readyPulse 1.6s ease-in-out infinite;
}
.end-turn:not(:disabled):hover { filter: brightness(1.12); transform: scale(1.04); }
.end-turn:not(:disabled):active { transform: scale(.97); }
@keyframes readyPulse {
  0%,100% { box-shadow: 0 0 0 3px #6b8a4a, inset 0 3px 8px rgba(255,255,255,.3), inset 0 -7px 13px rgba(0,0,0,.6), 0 0 12px rgba(120,200,70,.4), 0 6px 14px rgba(0,0,0,.6); }
  50%     { box-shadow: 0 0 0 3px #8fbf5a, inset 0 3px 8px rgba(255,255,255,.3), inset 0 -7px 13px rgba(0,0,0,.6), 0 0 26px rgba(150,230,90,.75), 0 6px 14px rgba(0,0,0,.6); }
}

/* ============================================================
   Overlay fin de partida
   ============================================================ */
.overlay {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(0,0,0,.65), rgba(0,0,0,.9));
  backdrop-filter: blur(3px);
}
.overlay.hidden { display: none; }
.gameover-box { width: min(90vw, 460px); padding: 40px 32px; text-align: center; }
#go-title {
  font-size: clamp(40px, 8vw, 72px); font-weight: 800; letter-spacing: 6px;
  text-shadow: 0 3px 0 #000, 0 0 24px currentColor; margin-bottom: 10px;
}
#go-title.win  { color: var(--green-hi); }
#go-title.lose { color: var(--red-hi); }
#go-title.draw { color: var(--brass-hi); }
#go-reason { color: var(--ink-dim); font-size: 15px; letter-spacing: 1px; margin-bottom: 26px; }

/* ============================================================
   Toasts
   ============================================================ */
#toast-container {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  padding: 10px 20px; border-radius: 6px; font-weight: 700; letter-spacing: 1px; font-size: 14px;
  color: #fff; text-shadow: 0 1px 2px #000;
  background: linear-gradient(180deg, #a83228, #6e1c15);
  border: 2px solid #2a0a06;
  box-shadow: 0 6px 16px rgba(0,0,0,.6);
  animation: toastIn .2s ease, toastOut .3s ease 2.2s forwards;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-12px); } }

/* ============================================================
   V2 — cuenta atras de turno
   ============================================================ */
.hidden { display: none !important; }

.turn-indicator .ti-timer {
  margin-top: 2px; font-weight: 800; font-size: 17px; letter-spacing: 1px;
  color: var(--ink); line-height: 1;
  padding: 1px 10px; border-radius: 10px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(120,90,50,.45);
}
.turn-indicator.urgent .ti-timer {
  color: #fff;
  background: radial-gradient(circle at 40% 30%, #ff6b58, var(--red) 65%, #6e120b);
  border-color: #2a0705;
  animation: urgentPulse .7s ease-in-out infinite;
}
@keyframes urgentPulse {
  0%,100% { transform: scale(1);   box-shadow: 0 0 4px rgba(255,70,50,.4); }
  50%     { transform: scale(1.14); box-shadow: 0 0 16px rgba(255,70,50,.9); }
}

.et-countdown {
  font-weight: 800; font-size: 18px; letter-spacing: 1px;
  color: var(--ink-dim); text-shadow: 0 1px 2px #000;
  padding: 1px 12px; margin-bottom: 2px; border-radius: 10px;
  background: rgba(0,0,0,.3); border: 1px solid rgba(120,90,50,.4);
}
.et-countdown.urgent {
  color: #fff;
  background: radial-gradient(circle at 40% 30%, #ff6b58, var(--red) 65%, #6e120b);
  border-color: #2a0705;
  animation: urgentPulse .7s ease-in-out infinite;
}
.end-turn.urgent:not(:disabled) {
  box-shadow:
    0 0 0 3px #b5402f,
    inset 0 3px 8px rgba(255,255,255,.3),
    inset 0 -7px 13px rgba(0,0,0,.6),
    0 0 22px rgba(255,70,50,.7), 0 6px 14px rgba(0,0,0,.6);
  animation: none;
}

/* ============================================================
   V0.2 — tactil: el arrastre no debe secuestrar scroll/zoom
   ============================================================ */
.card, .minion { touch-action: none; }
/* Elementos arrastrables / objetivos y sus contenedores de arrastre: el gesto
   tactil es siempre drag, nunca scroll. El log SI conserva su scroll tactil. */
.hero-portrait,
#you-hand, #you-board, #opp-board,
.hero-strip { touch-action: none; }
/* En partida: sin seleccion de texto ni destello azul al tocar. */
#screen-game {
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* El registro de combate SI debe poder desplazarse con el dedo. */
.log { touch-action: pan-y; -webkit-overflow-scrolling: touch; }

/* ============================================================
   V0.2 — version visible (login + badge en partida)
   ============================================================ */
.login-version {
  color: var(--brass-hi); font-size: 12px; letter-spacing: 2px;
  font-weight: 700; opacity: .85; margin: 2px 0 0;
  min-height: 14px;
}
.version-badge {
  position: fixed; left: 8px; bottom: 6px; z-index: 210;
  pointer-events: none; user-select: none;
  font-size: 11px; letter-spacing: 1px; font-weight: 700;
  color: var(--ink-faint); opacity: .55;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.version-badge:empty { display: none; }

/* ============================================================
   V0.3 — boton flotante de musica (abajo-izquierda, junto al badge
   de version). Visible en partida y como espectador (hijo de
   #screen-game). En movil se eleva para no tapar la mano.
   ============================================================ */
.music-btn {
  position: fixed; left: 8px; bottom: 28px; z-index: 245;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: #22160a;
  background: radial-gradient(circle at 38% 30%, var(--brass-hi), var(--brass) 60%, var(--brass-lo));
  border: 2px solid #2a1e08;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 12px rgba(0,0,0,.6);
  opacity: .9; transition: filter .12s, transform .08s, opacity .12s;
}
.music-btn:hover { opacity: 1; filter: brightness(1.08); }
.music-btn:active { transform: scale(.94); filter: brightness(.95); }
.music-btn.muted { filter: grayscale(.5) brightness(.92); }

/* ============================================================
   V0.2 — registro flotante colapsable (movil)
   El boton y el backdrop solo se muestran en pantallas estrechas.
   ============================================================ */
.log-toggle {
  position: fixed; top: 8px; right: 8px; z-index: 270; display: none;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  font-size: 22px; line-height: 1; padding: 0;
  color: #22160a;
  background: radial-gradient(circle at 38% 30%, var(--brass-hi), var(--brass) 60%, var(--brass-lo));
  border: 2px solid #2a1e08;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 12px rgba(0,0,0,.6);
}
.log-toggle:active { filter: brightness(.95); transform: scale(.96); }
.log-backdrop {
  position: fixed; inset: 0; z-index: 255; display: none;
  background: rgba(0,0,0,.5);
}

/* ============================================================
   V2 — reconciliacion: entrada / salida de nodos
   ============================================================ */

.minion.entering { animation: minionIn .38s cubic-bezier(.2,.9,.3,1.3); }
@keyframes minionIn {
  from { opacity: 0; transform: scale(.35) translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.minion.exiting {
  z-index: 6; pointer-events: none;
  animation: minionOut .42s ease forwards;
}
@keyframes minionOut {
  0%   { opacity: 1; transform: scale(1) rotate(0); filter: grayscale(0); }
  30%  { opacity: 1; transform: scale(1.08) rotate(-3deg); filter: brightness(1.5); }
  100% { opacity: 0; transform: scale(.35) rotate(9deg) translateY(14px); filter: grayscale(1); }
}

.card.entering { animation: cardIn .34s ease; }
@keyframes cardIn {
  from { opacity: 0; transform: translateX(140px) translateY(8px) scale(.82); }
  to   { opacity: 1; transform: none; }
}
.card.exiting { z-index: 6; pointer-events: none; animation: cardOut .4s ease forwards; }
@keyframes cardOut {
  to { opacity: 0; transform: translateY(-150px) scale(.6) rotate(-4deg); }
}

/* sacudida del que recibe daño */
.shaking { animation: shakeHit .34s ease; }
@keyframes shakeHit {
  0%,100% { transform: translateX(0); }
  15% { transform: translateX(-7px); }
  30% { transform: translateX(7px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
.hero-portrait.shaking { animation: shakeHit .34s ease; }

/* ============================================================
   V2 — numeros flotantes de combate (capa fx)
   ============================================================ */
#fx-layer {
  position: fixed; inset: 0; z-index: 350;
  pointer-events: none; overflow: hidden;
}
.fx-num {
  position: fixed; transform: translate(-50%, -50%);
  font-weight: 900; font-size: 34px; letter-spacing: 1px;
  text-shadow: 0 2px 4px #000, 0 0 10px rgba(0,0,0,.7);
  will-change: transform, opacity;
  animation: floatUp .95s ease-out forwards;
}
.fx-num.fx-dmg   { color: #ff5647; }
.fx-num.fx-heal  { color: #74e86a; }
.fx-num.fx-shield{ color: var(--gold); font-size: 22px; letter-spacing: 2px; }
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  18%  { opacity: 1; transform: translate(-50%, -60%) scale(1.25); }
  40%  { opacity: 1; transform: translate(-50%, -85%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(.95); }
}

/* ============================================================
   V2 — drag & drop (Pointer Events)
   ============================================================ */
.drag-ghost {
  position: fixed; z-index: 400; pointer-events: none;
  transform: translate(-50%, -55%) rotate(-3deg);
  border-radius: 8px; opacity: .85;
  background-repeat: no-repeat;
  box-shadow: 0 12px 26px rgba(0,0,0,.7), 0 0 0 2px rgba(140,220,90,.6);
  filter: drop-shadow(0 0 8px rgba(120,200,70,.5));
}
.drag-ghost.card   { background-size: cover; background-position: center; }
.drag-ghost.minion { background-size: 172%; background-position: 50% 20%; background-color: #120b04; }
.dragging-hidden { opacity: .28 !important; filter: grayscale(.5); }

/* hueco de insercion activo bajo el cursor */
.you-board.placing .islot.islot-active {
  width: clamp(56px, 6.5vw, 92px);
  background: rgba(160,240,100,.6);
  box-shadow: 0 0 26px rgba(160,240,100,.95), inset 0 0 12px rgba(255,255,255,.55);
  border-color: rgba(190,255,130,1);
  animation: islotPulse .8s ease-in-out infinite;
}
@keyframes islotPulse {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.3); }
}
/* objetivo de ataque bajo el cursor durante el arrastre */
.drop-hot { filter: brightness(1.45) saturate(1.2) !important; }

/* ============================================================
   V2 — vista ampliada (hover)
   ============================================================ */
.card-preview {
  position: fixed; left: 18px; top: 50%; transform: translateY(-50%);
  width: clamp(200px, 24vw, 340px); aspect-ratio: 3 / 4;
  z-index: 320; pointer-events: none;
  border-radius: 14px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  background-color: #0c0803;
  border: 3px solid #1b1a15;
  box-shadow: 0 0 0 2px rgba(184,145,47,.5), 0 18px 40px rgba(0,0,0,.8);
  animation: previewIn .16s ease;
}
@keyframes previewIn {
  from { opacity: 0; transform: translateY(-50%) scale(.9); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* ============================================================
   V0.2 — Modo espectador + invitar
   ============================================================ */

/* Badge fijo "MODO ESPECTADOR" (solo espectadores). */
.spectator-badge {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 260; pointer-events: none; user-select: none;
  padding: 5px 16px; border-radius: 20px;
  font-size: 13px; font-weight: 800; letter-spacing: 2px;
  color: #f0e6ff; text-shadow: 0 1px 2px #000;
  background: linear-gradient(180deg, #4a2d73, #2c1a47);
  border: 2px solid #120a20;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px rgba(0,0,0,.6),
              0 0 14px rgba(150,90,220,.35);
  animation: specBadgePulse 2.4s ease-in-out infinite;
}
@keyframes specBadgePulse {
  0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px rgba(0,0,0,.6), 0 0 10px rgba(150,90,220,.3); }
  50%     { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px rgba(0,0,0,.6), 0 0 20px rgba(170,110,240,.6); }
}

/* En modo espectador no hay boton de fin de turno. */
#screen-game.spectating .endturn-wrap { display: none !important; }

/* Barra de invitar + contador de espectadores (solo jugadores). Centrada
   arriba, sobre la franja rival (su centro esta vacio), sin tapar portraits. */
.invite-bar {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 240;
  display: flex; align-items: center; gap: 8px;
}
.invite-btn {
  cursor: pointer; font-family: inherit;
  padding: 6px 12px; border-radius: 18px;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  color: #22160a; text-shadow: 0 1px 0 rgba(255,255,255,.3);
  background: linear-gradient(180deg, var(--brass-hi), var(--brass) 60%, var(--brass-lo));
  border: 2px solid #2a1e08;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 9px rgba(0,0,0,.55);
  opacity: .85; transition: opacity .12s, filter .12s, transform .08s;
}
.invite-btn:hover { opacity: 1; filter: brightness(1.08); }
.invite-btn:active { transform: translateY(1px); }
.spec-count {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 14px;
  font-size: 13px; font-weight: 800; letter-spacing: 1px;
  color: var(--ink); text-shadow: 0 1px 2px #000;
  background: linear-gradient(180deg, rgba(74,45,115,.85), rgba(44,26,71,.85));
  border: 1px solid #120a20;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* ============================================================
   V0.3 — Banner de rival desconectado (periodo de gracia)
   ============================================================ */
.disconnect-banner {
  position: fixed; top: 44px; left: 50%; transform: translateX(-50%);
  z-index: 250; pointer-events: none; user-select: none; white-space: nowrap;
  max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
  padding: 6px 18px; border-radius: 20px;
  font-size: 13px; font-weight: 800; letter-spacing: .6px;
  color: #241704; text-shadow: 0 1px 0 rgba(255,255,255,.25);
  background: linear-gradient(180deg, #f0c256, #d99422 60%, #b0741a);
  border: 2px solid #4a3208;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(0,0,0,.6),
              0 0 16px rgba(224,161,46,.5);
  animation: dcBannerPulse 1.4s ease-in-out infinite;
}
.disconnect-banner.hidden { display: none; }
@keyframes dcBannerPulse {
  0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(0,0,0,.6), 0 0 10px rgba(224,161,46,.4); }
  50%     { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(0,0,0,.6), 0 0 22px rgba(240,200,90,.75); }
}

/* ============================================================
   Responsive — V0.2: movil / pantalla estrecha o en retrato
   ============================================================ */
@media (max-width: 820px), (orientation: portrait) {
  /* Esbirros mas pequenos: hasta 7 por fila sin desbordar. */
  :root {
    --minion-h: clamp(54px, 15vw, 96px);
    --minion-w: calc(var(--minion-h) * 0.74);
  }

  /* El campo de batalla ocupa todo; registro y END TURN pasan a flotantes. */
  .game-grid { grid-template-columns: 1fr; grid-template-rows: 1fr; gap: 4px; padding: 4px; }
  .battlefield { padding: 4px 6px 0; gap: 4px; }
  .sidebar { display: contents; }

  /* Controles flotantes visibles. */
  .log-toggle { display: flex; align-items: center; justify-content: center; }
  .log-backdrop { display: block; }

  /* Registro: panel deslizante desde la derecha (oculto por defecto). */
  .log-panel {
    position: fixed; top: 0; right: 0; z-index: 260;
    width: min(86vw, 340px); height: 100vh; max-height: none;
    border-radius: 0; padding: 46px 8px 12px;
    transform: translateX(102%); transition: transform .25s ease;
  }
  #screen-game.log-open .log-panel { transform: translateX(0); box-shadow: -10px 0 30px rgba(0,0,0,.65); }

  /* END TURN flotante (bottom-right, encima de la mano). */
  .endturn-wrap {
    position: fixed; right: 8px; z-index: 240; padding: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 124px);
    flex-direction: column; align-items: center; gap: 3px;
  }
  .end-turn { width: 62px; height: 62px; font-size: 13px; border-width: 3px; }
  .et-countdown { margin: 0; font-size: 15px; padding: 1px 9px; }

  /* Franjas de heroe compactas. */
  .hero-strip { min-height: 44px; gap: 8px; padding: 2px 6px; }
  .hero-portrait { width: 50px; height: 50px; font-size: 22px; }
  /* Heroe rival: area clicable ampliada (>=56px) para atacarlo con el dedo. */
  .hero-portrait.opp { width: 56px; height: 56px; }
  .hero-portrait.opp::before {
    content: ""; position: absolute; inset: -8px; border-radius: 50%;
  }
  .hero-name { font-size: 13px; max-width: 92px; }
  .hero-meta { min-width: 0; gap: 2px; }
  .mana-pips { max-width: 108px; gap: 2px; }
  .pip { width: 8px; height: 11px; }
  .mana-num { font-size: 11px; }
  .zones { gap: 5px; }
  .zones .zone { min-width: 30px; padding: 2px 3px; }
  .zone .zicon { font-size: 13px; }
  .zone .zcount { font-size: 13px; }
  .zone .zlbl { font-size: 7px; }

  /* Franja central compacta. */
  .mid-strip { gap: 8px; }
  .turn-indicator { min-width: 116px; padding: 2px 12px; }
  .turn-indicator .ti-label { font-size: 13px; }

  /* Filas de tablero: menos hueco, esbirros con estadisticas mas pequenas. */
  .board-row { gap: 4px; padding: 4px; }
  /* V0.3 — fila abarrotada en movil: esbirros aun mas pequenos para 10 sin
     desbordar en pantallas estrechas (p. ej. 390px). Re-declara ambas variables. */
  .board-row.crowded {
    --minion-h: clamp(40px, 8vw, 70px);
    --minion-w: calc(var(--minion-h) * 0.74);
    gap: 3px;
  }
  .mstat { width: 24px; height: 24px; font-size: 15px; bottom: -4px; }
  .mstat.atk { left: -4px; }
  .mstat.hp { right: -4px; }
  .minion .mname { font-size: 9px; padding: 8px 2px 2px; }

  /* Mano compacta con ligero solape: caben hasta 10 (cartas ~92-112px alto). */
  .hand-row {
    min-height: 116px; gap: 0; padding: 2px 4px 0; margin-bottom: -2px;
  }
  .hand-row .card {
    width: clamp(60px, 15.5vw, 78px);
    height: clamp(92px, 22vw, 112px);
    margin-left: -32px;
  }
  .hand-row .card:first-child { margin-left: 0; }
  .card:hover { transform: none; }        /* sin salto de hover en tactil */
  .card .cost-badge { min-width: 22px; height: 22px; font-size: 14px; top: -5px; left: -5px; }

  /* Huecos de despliegue: minimos comodos para el dedo. */
  .you-board.placing .islot { min-width: 46px; }

  /* Boton de musica: se eleva sobre la mano (alineado con END TURN a la
     izquierda) para no taparla ni el badge de version en movil. */
  .music-btn {
    left: 8px; width: 46px; height: 46px; font-size: 21px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 124px);
  }

  /* Invitar / espectador: compactos y sin estorbar (log-toggle a la derecha,
     barra de invitar y badge centrados arriba, sobre el centro vacio). */
  .invite-bar { top: 6px; gap: 5px; }
  .invite-btn { padding: 5px 9px; font-size: 12px; }
  .spec-count { padding: 3px 8px; font-size: 12px; }
  .spectator-badge { top: 6px; font-size: 11px; padding: 4px 11px; letter-spacing: 1px; }
  .disconnect-banner { top: 40px; font-size: 11.5px; padding: 5px 12px; }

  /* Vista ampliada centrada (long-press), sin animacion de transform. */
  .card-preview {
    left: 50%; right: auto; top: 46%;
    transform: translate(-50%, -50%);
    width: min(74vw, 320px); animation: none;
  }
}