/* =====================================================================
   CLAN CAVE COMBAT V2 — Rediseño mobile-first cinematográfico
   2026-05-31 v3 — Fixes según mockup definitivo:
   · Skills CIRCULARES con la imagen como el círculo (no cuadrado dentro)
   · Header sin sobreponer (HP/MP bajan del topbar)
   · Self OCULTO del row de siluetas (HP/MP del PJ ya va arriba)
   · Mob card minimal: texto elegante + HP bar + status pills (sin marco)
   ===================================================================== */

body.ghcv2-active {
  --ghcv2-gold:        #dab760;
  --ghcv2-gold-soft:   rgba(218, 183, 96, 0.65);
  --ghcv2-ink:         #0a0a0f;
  --ghcv2-ink-soft:    rgba(10, 10, 15, 0.78);
  --ghcv2-blood:       #b73c3c;
  --ghcv2-mp:          #5da6ff;
  --ghcv2-hp:          #59c97a;
  --ghcv2-violet:      #8a5fcc;
  --ghcv2-line:        rgba(218, 183, 96, 0.28);
}

/* =====================================================================
   1. STAGE BACKGROUND — overlay sutil para integrar la nueva imagen
   ===================================================================== */
.ghc-frame.ghcv2 .ghc-stage-bg {
  background-size: cover;
  background-position: center bottom;
  filter: contrast(1.08) saturate(1.05);
}

.ghc-frame.ghcv2 .ghc-stage-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center top, transparent 40%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 40%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}

/* =====================================================================
   2. HEADER — pills + FAB en su lugar, sin sobreponer HP/MP
   ===================================================================== */
.ghc-frame.ghcv2 .ghc-floor-pill {
  background: linear-gradient(135deg, rgba(10, 10, 15, 0.94), rgba(25, 22, 30, 0.94));
  border: 1px solid var(--ghcv2-line);
  color: var(--ghcv2-gold);
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 8px rgba(218, 183, 96, 0.18);
  backdrop-filter: blur(6px);
  z-index: 5;
}

.ghc-frame.ghcv2 .ghc-floor-pill b {
  color: #fff1b0;
  text-shadow: 0 0 8px rgba(255, 220, 120, 0.6);
}

.ghc-frame.ghcv2 .ghc-back-fab {
  background: linear-gradient(135deg, rgba(10, 10, 15, 0.92), rgba(25, 22, 30, 0.92));
  border: 1px solid var(--ghcv2-line);
  color: var(--ghcv2-gold);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
  z-index: 5;
}

.ghc-frame.ghcv2 .ghc-clan-badge {
  background: linear-gradient(135deg, rgba(10, 10, 15, 0.9), rgba(40, 30, 50, 0.9));
  border: 1px solid var(--ghcv2-line);
  color: var(--ghcv2-gold);
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
}

/* =====================================================================
   3. SELF STATS BAR — HP/MP del PJ ARRIBA (push abajo del topbar)
   ===================================================================== */
.ghc-frame.ghcv2 .ghc-self-stats {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 100%);
  border-top: 1px solid var(--ghcv2-line);
  border-bottom: 1px solid var(--ghcv2-line);
  backdrop-filter: blur(10px);
  padding: 8px 12px;
  gap: 8px;
  z-index: 3;
}

/* Barra pill SIN borde (el outline lo hace el icon-circle a la izquierda) */
.ghc-frame.ghcv2 .ghc-self-bar {
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  height: 22px;
  position: relative;
}

/* Track interno donde corre el fill — sí con bordes redondeados */
.ghc-frame.ghcv2 .ghc-self-bar-track {
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.55);
}

/* Icon circle a la IZQUIERDA, único outline visible */
.ghc-frame.ghcv2 .ghc-self-bar-icon {
  background: rgba(15, 15, 20, 0.95);
  border: 2px solid;
  border-radius: 50% !important;
  width: 26px !important;
  height: 26px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  /* Quitar border-right que daba doble línea */
  border-right-width: 2px;
}

.ghc-frame.ghcv2 .ghc-self-hp .ghc-self-bar-icon {
  border-color: var(--ghcv2-hp);
  box-shadow: 0 0 8px rgba(95, 208, 127, 0.45);
}
.ghc-frame.ghcv2 .ghc-self-mp .ghc-self-bar-icon {
  border-color: var(--ghcv2-mp);
  box-shadow: 0 0 8px rgba(111, 183, 255, 0.45);
}

.ghc-frame.ghcv2 .ghc-self-hp .ghc-self-bar-icon i {
  color: var(--ghcv2-hp);
  text-shadow: 0 0 6px rgba(95, 208, 127, 0.6);
}
.ghc-frame.ghcv2 .ghc-self-mp .ghc-self-bar-icon i {
  color: var(--ghcv2-mp);
  text-shadow: 0 0 6px rgba(111, 183, 255, 0.6);
}

.ghc-frame.ghcv2 .ghc-self-hp .ghc-self-bar-fill {
  background: linear-gradient(90deg, #5fd07f 0%, #2a8444 100%);
  box-shadow: 0 0 10px rgba(95, 208, 127, 0.55), inset 0 1px 0 rgba(180, 255, 200, 0.3);
}

.ghc-frame.ghcv2 .ghc-self-mp .ghc-self-bar-fill {
  background: linear-gradient(90deg, #6fb7ff 0%, #2c69c4 100%);
  box-shadow: 0 0 10px rgba(111, 183, 255, 0.55), inset 0 1px 0 rgba(180, 220, 255, 0.3);
}

.ghc-frame.ghcv2 .ghc-self-bar-text {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  color: #fff;
}

/* =====================================================================
   4. MOB CARD — limpio sin marco, solo texto elegante
   ===================================================================== */
.ghc-frame.ghcv2 .ghc-mob-zone {
  z-index: 2;
}

.ghc-frame.ghcv2 .ghc-mob {
  position: relative;
}

/* SIN background card, SIN border, SIN corner brackets */
.ghc-frame.ghcv2 .ghc-mob-hp {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-align: center;
}

.ghc-frame.ghcv2 .ghc-mob-hp::before,
.ghc-frame.ghcv2 .ghc-mob-hp::after {
  display: none !important;
}

/* Nombre del mob: serif grande, glow, centrado */
.ghc-frame.ghcv2 .ghc-mob-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.ghc-frame.ghcv2 #ghc-mob-name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: #f5e9c8;
  text-shadow:
    0 0 14px rgba(255, 220, 140, 0.45),
    0 0 30px rgba(255, 200, 100, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.95);
  text-align: center;
  line-height: 1.1;
}

/* HP bar más delgada, full-width del area de texto */
.ghc-frame.ghcv2 .ghc-mob-hp-bar {
  background: rgba(0, 0, 0, 0.78);
  border: 1.5px solid rgba(220, 70, 70, 0.55);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 14px rgba(190, 50, 50, 0.35);
  border-radius: 999px;
  height: 14px;
  width: min(360px, 80vw);
  margin: 4px auto 6px;
  position: relative;
  overflow: hidden;
}

.ghc-frame.ghcv2 .ghc-mob-hp-fill {
  background: linear-gradient(90deg, #ff5d4a 0%, #d4302a 50%, #9b1f1f 100%);
  box-shadow:
    0 0 12px rgba(212, 48, 42, 0.6),
    inset 0 1px 0 rgba(255, 200, 180, 0.4);
  border-radius: inherit;
  height: 100%;
}

/* HP text overlay DENTRO de la barra (JS lo mueve via appendChild) */
.ghc-frame.ghcv2 .ghc-mob-hp-bar {
  position: relative;
}

.ghc-frame.ghcv2 .ghc-mob-hp-bar .ghc-mob-hp-text {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.06em !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.8) !important;
  pointer-events: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2 !important;
  background: transparent !important;
  border: none !important;
}

/* =====================================================================
   5. JEFE ÉLITE / ENEMIGO — texto elegante con ornamental dots
   ===================================================================== */
.ghcv2-mob-tier {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 11px/1 'Cinzel', serif;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ghcv2-gold);
  text-shadow: 0 0 10px rgba(218, 183, 96, 0.5), 0 1px 2px rgba(0, 0, 0, 0.95);
}

.ghcv2-mob-tier::before,
.ghcv2-mob-tier::after {
  content: '✦';
  font-size: 9px;
  color: var(--ghcv2-gold);
  opacity: 0.7;
}

.ghcv2-mob-tier.is-boss {
  color: #ffd07a;
  text-shadow: 0 0 14px rgba(255, 200, 120, 0.7), 0 1px 2px rgba(0, 0, 0, 0.95);
  animation: ghcv2-boss-glow 2.4s ease-in-out infinite;
}

@keyframes ghcv2-boss-glow {
  0%, 100% { text-shadow: 0 0 14px rgba(255, 200, 120, 0.7), 0 1px 2px rgba(0, 0, 0, 0.95); }
  50%      { text-shadow: 0 0 22px rgba(255, 220, 140, 1), 0 0 6px rgba(255, 180, 100, 0.8), 0 1px 2px rgba(0, 0, 0, 0.95); }
}

/* =====================================================================
   6. ALLY ROW — silueta limpia, OCULTAR SELF (HP/MP del PJ ya está arriba)
   ===================================================================== */

/* La silueta es ahora un <img> dentro del sprite de V1 (no background).
   Layout natural (flex column de V1): sprite → bars → name-row.
   Todo pegado sin gaps. */

.ghc-frame.ghcv2 .ghcv2-ally {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  /* 2026-05-31: position MUST be absolute (V1 default). Antes tenía `relative`
     y eso rompía el posicionamiento de V1 — los allies pasaban al flow normal
     y se apilaban uno encima del otro (staggering vertical). */
  position: absolute !important;
  gap: 4px !important;
}

/* Sprite con la silueta: hacer más grande que el default de V1 (--ally-size)
   y forzar el img a fill the box bien */
.ghc-frame.ghcv2 .ghcv2-ally .ghc-ally-sprite {
  display: flex !important;
  width: clamp(110px, 16vmin, 160px) !important;
  height: clamp(140px, 22vmin, 200px) !important;
  align-items: flex-end;
  justify-content: center;
  margin: 0 auto;
  position: relative;
}

.ghc-frame.ghcv2 .ghcv2-ally .ghc-ally-sprite img {
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
}

.ghc-frame.ghcv2 .ghcv2-ally-self .ghc-ally-sprite img {
  filter: drop-shadow(0 0 12px rgba(218, 183, 96, 0.45)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
}

/* Barras HP/MP — flujo natural debajo del sprite, mismo ancho */
.ghc-frame.ghcv2 .ghcv2-ally .ghc-ally-bars {
  position: static !important;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: clamp(105px, 15vmin, 150px) !important;
  margin: 0 auto !important;
}

.ghc-frame.ghcv2 .ghcv2-ally .ghc-bar {
  height: 9px !important;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(218, 183, 96, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.ghc-frame.ghcv2 .ghcv2-ally .ghc-bar-hp .ghc-bar-fill {
  background: linear-gradient(90deg, #5fd07f 0%, #2a8444 100%);
  box-shadow: 0 0 4px rgba(95, 208, 127, 0.6);
  border-radius: inherit;
}

.ghc-frame.ghcv2 .ghcv2-ally .ghc-bar-mp .ghc-bar-fill {
  background: linear-gradient(90deg, #6fb7ff 0%, #2c69c4 100%);
  box-shadow: 0 0 4px rgba(111, 183, 255, 0.6);
  border-radius: inherit;
}

.ghc-frame.ghcv2 .ghcv2-ally .ghc-bar-text {
  font-size: 8px !important;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  letter-spacing: 0.03em;
}

/* Nombre — pill del MISMO ancho y look que las barras */
.ghc-frame.ghcv2 .ghcv2-ally .ghc-ally-name-row {
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(105px, 15vmin, 150px) !important;
}

/* Avatar mini oculto */
.ghc-frame.ghcv2 .ghcv2-ally .ghc-ally-avatar {
  display: none !important;
}

/* Nombre como pill de mismo ancho que HP/MP bars */
.ghc-frame.ghcv2 .ghcv2-ally .ghc-ally-name {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  color: #f5e9c8 !important;
  background: rgba(0, 0, 0, 0.82) !important;
  border: 1px solid rgba(218, 183, 96, 0.4) !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
}

.ghc-frame.ghcv2 .ghcv2-ally-self .ghc-ally-name {
  color: var(--ghcv2-gold) !important;
  border-color: var(--ghcv2-gold-soft) !important;
}

.ghc-frame.ghcv2 .ghcv2-ally .ghc-you {
  color: var(--ghcv2-gold);
  font-size: 9px;
  margin-left: 3px;
}

/* =====================================================================
   7. TURN INDICATOR — REMOVIDO por feedback (no se posicionaba bien)
   ===================================================================== */
.ghcv2-turn-indicator { display: none !important; }

/* =====================================================================
   8. SKILL BUTTONS — CÍRCULOS con la imagen como el círculo entero
   ===================================================================== */
.ghc-frame.ghcv2 .ghc-skills-row {
  gap: 10px;
  align-items: flex-end;
  padding: 8px 12px;
}

/* =====================================================================
   8.1 SCROLL HORIZONTAL FIX para mobile — algunos celulares no scrollean
   porque los botones interceptan el touch. Las reglas debajo fuerzan
   el pan-x en TODOS los elementos de la fila + scroll robusto.
   2026-05-31: fix reportado por usuarios.
   ===================================================================== */
@media (max-width: 900px) {
  .ghc-frame.ghcv2 .ghc-skills-row {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .ghc-frame.ghcv2 .ghc-skills-row::-webkit-scrollbar { display: none; }
  /* Los botones permiten pan horizontal del padre — NO interceptan el touch
     hasta que el usuario hace tap claro (no swipe). */
  .ghc-frame.ghcv2 .ghc-skills-row .ghc-skill-btn {
    touch-action: pan-x !important;
    flex-shrink: 0 !important;
  }
  /* También aplicar a la imagen interna del botón para que no robe el touch */
  .ghc-frame.ghcv2 .ghc-skills-row .ghcv2-skill-img,
  .ghc-frame.ghcv2 .ghc-skills-row .ghc-skill-cost,
  .ghc-frame.ghcv2 .ghc-skills-row .ghc-skill-cd,
  .ghc-frame.ghcv2 .ghc-skills-row .ghc-skill-name {
    touch-action: pan-x !important;
    pointer-events: none;
  }
}

.ghc-frame.ghcv2 .ghc-skill-btn.ghcv2-skill-enhanced {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50% !important;
  padding: 0 !important;
  background: transparent;
  border: 2px solid var(--ghcv2-gold-soft);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.65),
    0 0 8px rgba(218, 183, 96, 0.25),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}

.ghc-frame.ghcv2 .ghc-skill-btn.ghcv2-skill-enhanced:not(.is-cooldown):not(.is-not-in-cave):hover {
  transform: translateY(-2px) scale(1.05);
  border-color: #fff1b0;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.7),
    0 0 16px rgba(255, 220, 120, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* La IMAGEN ocupa el círculo entero (no un cuadrado dentro) */
.ghc-frame.ghcv2 .ghcv2-skill-img {
  position: absolute;
  inset: 2px;
  width: auto;
  height: auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  filter: none;
}

.ghc-frame.ghcv2 .ghc-skill-btn.is-cooldown .ghcv2-skill-img {
  filter: grayscale(0.7) brightness(0.55);
}

.ghc-frame.ghcv2 .ghc-skill-btn.ghcv2-skill-enhanced.is-cooldown {
  opacity: 0.65;
  border-color: rgba(218, 183, 96, 0.3);
}

/* OCULTAR el nombre dentro del botón (queda fuera por simplicidad) */
.ghc-frame.ghcv2 .ghc-skill-btn.ghcv2-skill-enhanced .ghc-skill-name {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  color: #f4e7c5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  pointer-events: none;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* MP cost arriba del círculo */
.ghc-frame.ghcv2 .ghc-skill-btn.ghcv2-skill-enhanced .ghc-skill-cost {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(30, 50, 90, 0.95), rgba(15, 25, 50, 0.95));
  border: 1px solid var(--ghcv2-mp);
  color: #c8ddff;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 6px rgba(93, 166, 255, 0.4);
  z-index: 2;
}

/* CD arriba del círculo (reemplaza al cost cuando está en cooldown) */
.ghc-frame.ghcv2 .ghc-skill-btn.ghcv2-skill-enhanced .ghc-skill-cd {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(120, 50, 30, 0.95), rgba(70, 25, 15, 0.95));
  border: 1px solid #ff9a6a;
  color: #ffd0b0;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 6px rgba(255, 154, 106, 0.4);
  z-index: 2;
}

/* =====================================================================
   9. ATTACK BUTTON — círculo rojo grande
   ===================================================================== */
.ghc-frame.ghcv2 .ghc-attack-btn {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, #e96868 0%, #8d2828 60%, #5a1414 100%);
  border: 3px solid rgba(255, 200, 180, 0.55);
  box-shadow:
    0 0 18px rgba(220, 50, 50, 0.6),
    inset 0 2px 0 rgba(255, 200, 180, 0.4),
    inset 0 -3px 6px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  gap: 2px;
}

.ghc-frame.ghcv2 .ghc-attack-btn:hover:not(:disabled) {
  background: radial-gradient(circle at 35% 30%, #ff7a7a 0%, #a83232 60%, #6a1818 100%);
  box-shadow:
    0 0 24px rgba(240, 70, 70, 0.8),
    inset 0 2px 0 rgba(255, 200, 180, 0.55),
    inset 0 -3px 6px rgba(0, 0, 0, 0.5);
}

.ghc-frame.ghcv2 .ghc-attack-btn i {
  font-size: 22px;
}

.ghc-frame.ghcv2 .ghc-attack-btn span {
  font-size: 9px;
  text-transform: uppercase;
}

/* =====================================================================
   10. POTIONS — círculos coherentes
   ===================================================================== */
.ghc-frame.ghcv2 .ghc-potion-btn {
  background: radial-gradient(circle at 35% 30%, rgba(50, 30, 30, 0.95) 0%, rgba(15, 10, 12, 0.95) 100%);
  border: 2px solid var(--ghcv2-gold-soft);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(218, 183, 96, 0.2);
}

.ghc-frame.ghcv2 .ghc-potion-hp {
  background: radial-gradient(circle at 35% 30%, rgba(140, 40, 50, 0.95) 0%, rgba(70, 20, 25, 0.95) 100%);
  border-color: rgba(255, 130, 130, 0.6);
}

.ghc-frame.ghcv2 .ghc-potion-mp {
  background: radial-gradient(circle at 35% 30%, rgba(40, 70, 130, 0.95) 0%, rgba(20, 35, 65, 0.95) 100%);
  border-color: rgba(130, 170, 255, 0.6);
}

.ghc-frame.ghcv2 .ghc-potion-stamina {
  background: radial-gradient(circle at 35% 30%, rgba(140, 100, 30, 0.95) 0%, rgba(70, 50, 15, 0.95) 100%);
  border-color: rgba(255, 200, 100, 0.6);
}

.ghc-frame.ghcv2 .ghc-potion-hp i { color: #ffd0d0; }
.ghc-frame.ghcv2 .ghc-potion-mp i { color: #d0e0ff; }
.ghc-frame.ghcv2 .ghc-potion-stamina i { color: #ffe0a0; }

.ghc-frame.ghcv2 .ghc-potion-count {
  background: rgba(10, 10, 15, 0.95);
  border: 1px solid var(--ghcv2-gold-soft);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* =====================================================================
   11. EVENT TIMER — pill violeta cristal
   ===================================================================== */
.ghc-frame.ghcv2 .ghc-event-timer {
  background: linear-gradient(135deg, rgba(85, 55, 130, 0.94), rgba(50, 30, 90, 0.94));
  border: 1px solid rgba(170, 130, 220, 0.5);
  color: #f0e0ff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 12px rgba(150, 100, 220, 0.3);
  backdrop-filter: blur(6px);
}

/* =====================================================================
   12. ACTIONS BAR — scrim para legibilidad
   ===================================================================== */
.ghc-frame.ghcv2 .ghc-actions {
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0.92) 100%);
  padding-top: 18px;
  padding-bottom: 14px;
  gap: 10px;
}

/* =====================================================================
   12b. MOBILE — ajustes para que TODO entre en pantalla
   ===================================================================== */
@media (max-width: 720px) {
  /* Mob un poco más arriba (user feedback "sube un poquito nomas") */
  .ghc-frame.ghcv2 .ghc-mob-zone {
    top: 12% !important;
  }

  /* Nombre del mob más chico en mobile */
  .ghc-frame.ghcv2 #ghc-mob-name {
    font-size: 17px;
    letter-spacing: 0.04em;
  }

  /* JEFE ÉLITE pill más chico */
  .ghcv2-mob-tier {
    font-size: 9px;
    letter-spacing: 0.26em;
  }

  /* HP bar mob un poco más chica */
  .ghc-frame.ghcv2 .ghc-mob-hp-bar {
    height: 13px;
    width: min(300px, 78vw);
  }

  .ghc-frame.ghcv2 .ghc-mob-hp-bar .ghc-mob-hp-text {
    font-size: 10px !important;
  }

  /* CRÍTICO: el container .ghc-allies tiene inset:0 (toma TODA la stage)
     pero la action bar le tapa el bottom. Acortar para que los aliados
     queden ARRIBA de la action bar (~150px en mobile entre skills + potions).
     Sin esto la silueta extendía hacia abajo y desaparecía debajo. */
  .ghc-frame.ghcv2 .ghc-allies {
    bottom: 150px !important;
  }

  /* Ally sprite más chico */
  .ghc-frame.ghcv2 .ghcv2-ally .ghc-ally-sprite {
    width: clamp(75px, 13vmin, 105px) !important;
    height: clamp(95px, 16vmin, 135px) !important;
  }

  /* Container del ally más angosto */
  .ghc-frame.ghcv2 .ghcv2-ally {
    width: clamp(90px, 15vmin, 125px) !important;
  }

  /* Bars + nombre con el mismo ancho que el sprite */
  .ghc-frame.ghcv2 .ghcv2-ally .ghc-ally-bars,
  .ghc-frame.ghcv2 .ghcv2-ally .ghc-ally-name-row {
    width: clamp(72px, 12vmin, 100px) !important;
  }

  .ghc-frame.ghcv2 .ghcv2-ally .ghc-ally-name {
    font-size: 9px !important;
    padding: 1px 6px !important;
  }

  .ghc-frame.ghcv2 .ghcv2-ally .ghc-bar {
    height: 7px !important;
  }
}

/* Pantallas muy chicas (≤420px) — aún más chico */
@media (max-width: 420px) {
  .ghc-frame.ghcv2 .ghc-mob-zone {
    top: 14% !important;
  }

  .ghc-frame.ghcv2 #ghc-mob-name {
    font-size: 15px;
  }

  .ghc-frame.ghcv2 .ghc-mob-hp-bar {
    height: 12px;
    width: min(260px, 75vw);
  }

  .ghc-frame.ghcv2 .ghc-allies {
    bottom: 140px !important;
  }

  .ghc-frame.ghcv2 .ghcv2-ally .ghc-ally-sprite {
    width: clamp(65px, 11vmin, 88px) !important;
    height: clamp(82px, 14vmin, 115px) !important;
  }
}

/* =====================================================================
   13. PC — Skills list panel lateral
   ===================================================================== */
@media (min-width: 1025px) {
  .ghc-frame.ghcv2 #ghc-pc-skills-list .ghc-skill-btn.ghcv2-skill-enhanced {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }

  .ghc-frame.ghcv2 #ghc-pc-skills-list .ghc-skill-btn.ghcv2-skill-enhanced .ghc-skill-name,
  .ghc-frame.ghcv2 #ghc-pc-skills-list .ghc-skill-btn.ghcv2-skill-enhanced .ghc-skill-cost,
  .ghc-frame.ghcv2 #ghc-pc-skills-list .ghc-skill-btn.ghcv2-skill-enhanced .ghc-skill-cd {
    font-size: 9px;
    padding: 1px 6px;
  }
}

/* =====================================================================
   14. SIDEBAR V3 + Cueva — ocultar el rail V3 en cueva (V1 ya oculta el
   .nav-sidebar viejo pero V3 usa .nav-sidebar-v3 que no estaba cubierto).
   Sin esto el rail V3 (76px) se solapaba con el panel lobby de la izquierda.

   También dejamos que las formulas V1 originales del .ghc-pc-ally-host y
   .ghc-pc-lobby-host se apliquen sin override (esas formulas funcionan
   correctamente con el frame V1 transform: translateX(calc(-50% - 70px))).
   ===================================================================== */
body.ghcv2-active .nav-sidebar-v3 {
  display: none !important;
}

/* Forzar el grid de la cueva (ignora sv3-active) — V1 lo hace para .nav-sidebar
   con body.ghc-active. Replicamos para asegurar que el rail V3 oculto no
   reserve espacio en el grid. */
@media (min-width: 901px) {
  body.ghcv2-active .game-shell,
  .game-shell.ghcv2-active {
    grid-template-columns: 1fr 320px !important;
    grid-template-areas:
      "top top"
      "main side" !important;
  }
}

/* =====================================================================
   15. TOPBAR tbv2 + Cueva — POSITION ABSOLUTE en ancestros confiables
   (selector dual: body + .game-shell para máxima cobertura)

   ⚠️ BUG ENCONTRADO: la regla `.game-shell.sv3-active .top-bar.tbv2
   { grid-column: 2 / -1 }` se combinaba con el grid V1 cueva
   (`1fr 320px`), haciendo que el topbar quedara confinado a la columna
   side-panel (~320px). El fix es forzar grid-column: 1 / -1 cuando
   ghcv2-active está activo, para que el topbar ocupe ambas columnas.
   ===================================================================== */
@media (min-width: 901px) {
  /* CRÍTICO: override del sv3-active grid-column que rompía el topbar */
  body.ghcv2-active .game-shell .top-bar.tbv2,
  .game-shell.ghcv2-active .top-bar.tbv2,
  .game-shell.sv3-active.ghcv2-active .top-bar.tbv2 {
    grid-column: 1 / -1 !important;
  }

  body.ghcv2-active .top-bar.tbv2,
  .game-shell.ghcv2-active .top-bar.tbv2 {
    position: relative !important;
    display: block !important;
    height: 64px !important;
    padding: 0 !important;
    background: linear-gradient(180deg, rgba(20, 10, 42, 0.96) 0%, rgba(10, 5, 22, 0.95) 100%) !important;
    border-bottom: 1px solid rgba(218, 183, 96, 0.28) !important;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(218, 183, 96, 0.08) !important;
    width: auto !important;
  }

  /* Ocultar brand, resources, spacer en cueva */
  body.ghcv2-active .top-bar.tbv2 .tbv2-brand,
  body.ghcv2-active .top-bar.tbv2 #brand-logo,
  body.ghcv2-active .top-bar.tbv2 .tbv2-resources,
  body.ghcv2-active .top-bar.tbv2 .tbv2-spacer,
  .game-shell.ghcv2-active .top-bar.tbv2 .tbv2-brand,
  .game-shell.ghcv2-active .top-bar.tbv2 #brand-logo,
  .game-shell.ghcv2-active .top-bar.tbv2 .tbv2-resources,
  .game-shell.ghcv2-active .top-bar.tbv2 .tbv2-spacer {
    display: none !important;
  }

  /* Player box ABSOLUTE a la IZQUIERDA */
  body.ghcv2-active .top-bar.tbv2 #top-player-box,
  body.ghcv2-active .top-bar.tbv2 .tbv2-player,
  .game-shell.ghcv2-active .top-bar.tbv2 #top-player-box,
  .game-shell.ghcv2-active .top-bar.tbv2 .tbv2-player {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 5 !important;
    display: inline-flex !important;
    visibility: visible !important;
  }

  /* Label EVENTO ABSOLUTE al lado del player */
  body.ghcv2-active .top-bar.tbv2 .ghc-topbar-label,
  .game-shell.ghcv2-active .top-bar.tbv2 .ghc-topbar-label {
    position: absolute !important;
    left: 240px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 5 !important;
    display: inline-flex !important;
    visibility: visible !important;
  }

  /* tbv2-actions ABSOLUTE a la DERECHA */
  body.ghcv2-active .top-bar.tbv2 .tbv2-actions,
  .game-shell.ghcv2-active .top-bar.tbv2 .tbv2-actions {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 5 !important;
    display: inline-flex !important;
  }
}

/* =====================================================================
   16. ALLY POSITION FIX (PC) — !important override del inline `top: 85.5%`
   que V1 setea. Subimos al 70% para que el jugador quede a la altura del
   mob, sobre el área visible del stage (NO en la zona oscura del bottom).
   ===================================================================== */
@media (min-width: 901px) {
  /* Mob un poco más arriba en PC (V1 default era 20%, user feedback "un poquitito") */
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob-zone {
    top: 15% !important;
  }

  /* Override del inline `top` que V1 _renderAllies setea en cada .ghc-ally */
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-allies > .ghc-ally.ghcv2-ally {
    top: 75% !important;
  }

  /* Ally sprite size razonable en PC */
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-ally .ghc-ally-sprite {
    width: clamp(100px, 14vmin, 140px) !important;
    height: clamp(130px, 18vmin, 180px) !important;
  }

  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-ally {
    width: clamp(115px, 16vmin, 160px) !important;
  }

  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-ally .ghc-ally-bars,
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-ally .ghc-ally-name-row {
    width: clamp(95px, 13vmin, 130px) !important;
  }
}