/* =====================================================================
   GUILD HALL COMBAT — pantalla de batalla en la cueva (V2 — más copado)
   Mob arriba (imagen real), aliados grandes abajo, HP/MP barras gameish.
   ===================================================================== */

.ghc-frame {
  --ghc-bg-1: #0e0820;
  --ghc-gold: #e9b963;
  --ghc-blood: #ff5566;
  --ghc-cyan: #6cd4ff;
  --ghc-mint: #5fd684;
  --ghc-purple: #b380ff;
  --ghc-text: #f4ecd8;
  --ghc-text-dim: rgba(244,236,216,0.6);
  --ghc-border: rgba(233,185,99,0.35);

  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  position: fixed;
  top: 0; left: 0;
  background: #000;
  overflow: hidden;
  z-index: 100;
}
@media (min-width: 900px) {
  .ghc-frame {
    aspect-ratio: 3 / 4;
    width: auto;
    height: 100vh;
    height: 100dvh;
    left: 50%;
    transform: translateX(-50%);
    border-left: 1px solid var(--ghc-border);
    border-right: 1px solid var(--ghc-border);
  }
}

/* FAB volver y pill flotante: ocultos siempre (los reemplazamos por el header
   normal que ahora se mantiene visible en mobile también). Quedaron en el HTML
   por compatibilidad pero no se renderizan. */
.ghc-back-fab,
.ghc-floor-pill { display: none !important; }

/* Badge flotante: tiempo restante del evento. Esquina superior derecha. */
.ghc-event-timer {
  position: absolute;
  top: 60px;
  right: 12px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(180deg, rgba(184,132,255,0.85), rgba(110,58,204,0.85));
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(110,58,204,0.5);
  pointer-events: none;
}
.ghc-event-timer i { font-size: 14px; }
.ghc-event-timer-value { font-weight: 800; }
.ghc-event-timer.is-imminent {
  background: linear-gradient(180deg, rgba(255,90,90,0.95), rgba(180,40,40,0.95));
  border-color: rgba(255,200,200,0.5);
  animation: ghc-event-timer-pulse 1s ease-in-out infinite;
}
.ghc-event-timer.is-closed {
  background: rgba(0,0,0,0.7);
  border-color: rgba(255,255,255,0.25);
  color: #ccc;
  animation: none;
}
@keyframes ghc-event-timer-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 16px rgba(255,90,90,0.6); }
  50% { transform: scale(1.06); box-shadow: 0 4px 20px rgba(255,90,90,1); }
}
@media (max-width: 600px) {
  .ghc-event-timer { top: 50px; right: 8px; padding: 5px 10px; font-size: 10.5px; }
  .ghc-event-timer-label { display: none; } /* en mobile solo el value */
}

/* HEADER */
.ghc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.55));
  border-bottom: 1px solid var(--ghc-border);
  flex-shrink: 0;
  z-index: 5;
}
.ghc-back-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--ghc-text);
  border-radius: 8px;
  cursor: pointer;
}
.ghc-back-btn i { font-size: 16px; }
.ghc-header-info {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ghc-floor-badge,
.ghc-clan-badge,
.ghc-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--ghc-border);
  border-radius: 99px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--ghc-text);
}
.ghc-floor-badge {
  border-color: rgba(108,212,255,0.4);
  color: var(--ghc-cyan);
}
.ghc-floor-badge b { color: #fff; font-size: 13px; }
.ghc-clan-badge { color: var(--ghc-gold); }
.ghc-header-stats { display: flex; gap: 6px; }
.ghc-stat-pill { font-size: 11px; }
.ghc-stat-pill i { font-size: 12px; color: var(--ghc-blood); }
.ghc-stat-pill b { color: var(--ghc-text); font-weight: 800; }

/* STAGE */
.ghc-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.ghc-stage-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #0a0414;
  z-index: 0;
}
.ghc-stage-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* MOB ZONE — desktop más abajo (al centro vertical) */
.ghc-mob-zone {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 420px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ghc-mob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  position: relative;
}
.ghc-mob.is-empty .ghc-mob-sprite { opacity: 0.2; }

/* HP del mob — barra grande arriba */
.ghc-mob-hp {
  width: 100%;
  background: linear-gradient(180deg, rgba(20,5,10,0.85), rgba(40,10,15,0.85));
  border: 1px solid rgba(255,85,102,0.5);
  border-radius: 10px;
  padding: 7px 12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.ghc-mob-hp-bar {
  height: 14px;
  background: rgba(0,0,0,0.7);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 5px;
  border: 1px solid rgba(255,85,102,0.3);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
}
.ghc-mob-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #cc2a3a, #ff5566 50%, #ff8a98);
  transition: width 0.4s ease;
  box-shadow: 0 0 12px rgba(255,85,102,0.7), inset 0 1px 1px rgba(255,255,255,0.3);
  position: relative;
}
.ghc-mob-hp-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 50%);
  border-radius: 99px;
}
.ghc-mob-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-title, sans-serif);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
}
.ghc-mob.is-boss .ghc-mob-name {
  color: var(--ghc-gold);
  text-shadow: 0 0 12px rgba(233,185,99,0.6);
}
.ghc-mob-hp-text {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--ghc-text-dim);
  font-weight: 600;
}

/* SPRITE del mob — imagen grande */
.ghc-mob-sprite {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.7)) drop-shadow(0 0 22px rgba(255,85,102,0.3));
  animation: ghc-mob-idle 3.4s ease-in-out infinite;
}
.ghc-mob.is-boss .ghc-mob-sprite {
  width: 280px;
  height: 280px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.8)) drop-shadow(0 0 30px rgba(233,185,99,0.5));
  animation: ghc-mob-boss 4s ease-in-out infinite;
}
.ghc-mob-sprite-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ghc-mob-sprite > i {
  font-size: 110px;
  color: #fff;
  text-shadow: 0 4px 14px rgba(0,0,0,0.7);
}
.ghc-mob.is-boss .ghc-mob-sprite > i { font-size: 150px; color: var(--ghc-gold); }
@keyframes ghc-mob-idle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.02); }
}
@keyframes ghc-mob-boss {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.04); }
}

/* DAMAGE POPUPS */
.ghc-dmg-popups {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ghc-dmg-popup {
  position: absolute;
  top: 30%;
  font-family: var(--font-title, sans-serif);
  font-weight: 900;
  font-size: 28px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.95), 0 0 18px rgba(255,255,255,0.5);
  animation: ghc-dmg-rise 1.5s ease-out forwards;
  pointer-events: none;
}
.ghc-dmg-popup.is-crit {
  color: var(--ghc-gold);
  font-size: 38px;
  text-shadow: 0 0 22px rgba(233,185,99,0.9);
}
.ghc-dmg-popup.is-skill { color: var(--ghc-cyan); }
/* 2026-05-17: MISS — el mob esquivó (floor 205+) */
.ghc-dmg-popup.is-miss {
  color: #c0c8d6;
  font-style: italic;
  text-shadow: 0 0 14px rgba(255,255,255,0.4), 0 0 4px rgba(0,0,0,0.8);
  letter-spacing: 0.05em;
}
/* 2026-05-17: MISS de un compañero — un toque más chico y con nombre arriba.
   Sirve para que cuando tu aliado le erra, lo veas también en tu pantalla. */
.ghc-dmg-popup.is-miss.is-partner {
  font-size: 22px;
  color: #aab0bd;
  opacity: 0.92;
}
.ghc-dmg-popup.is-miss.is-partner .ghc-miss-who {
  display: block;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  color: var(--ghc-cyan, #6fd4e6);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2px;
  text-shadow: 0 0 6px rgba(0,0,0,0.85);
}
.ghc-skill-tag {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ghc-text-dim);
  margin-top: 2px;
  letter-spacing: 0.06em;
}

/* 2026-05-09: popup de daño entrante sobre un aliado.
   Self → rojo bien marcado. Otros → blanco tranquilo. */
/* 2026-05-09 v2: layer separado para que los popups sobrevivan los re-renders
   de #ghc-allies (que hace innerHTML='' cada poll y wipe-aría los popups). */
.ghc-ally-dmg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}
.ghc-ally-dmg {
  position: absolute;
  /* left/top setteados via JS desde getBoundingClientRect del ally */
  transform: translateX(-50%);
  font-family: var(--font-title, sans-serif);
  font-weight: 900;
  font-size: 18px;
  color: rgba(240, 240, 245, 0.92);
  text-shadow:
    0 0 6px rgba(0,0,0,0.85),
    0 2px 4px rgba(0,0,0,0.8);
  pointer-events: none;
  animation: ghc-ally-dmg-rise 2.3s ease-out forwards;
  white-space: nowrap;
}
/* 2026-05-09 v2: cuando ME pega a MÍ → más grande, rojo. Duración corta
   (user feedback: 3.2s era demasiado largo, ahora 1s). */
.ghc-ally-dmg.is-self {
  color: #ff5566;
  font-size: 36px;
  font-weight: 900;
  text-shadow:
    0 0 14px rgba(255,55,80,0.85),
    0 3px 8px rgba(0,0,0,0.95),
    0 0 24px rgba(255,55,80,0.55);
  animation: ghc-self-dmg-rise 1s ease-out forwards;
}
/* Animación corta para clanmates (daño tranquilo) */
@keyframes ghc-ally-dmg-rise {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.6); }
  10%  { opacity: 1; transform: translate(-50%, -2px) scale(1.1); }
  60%  { opacity: 1; transform: translate(-50%, -14px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -40px) scale(0.9); }
}
/* Animación larga + más recorrido para self (alarmante) */
@keyframes ghc-self-dmg-rise {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.5); }
  8%   { opacity: 1; transform: translate(-50%, -4px) scale(1.3); }
  20%  { opacity: 1; transform: translate(-50%, -14px) scale(1.15); }
  70%  { opacity: 1; transform: translate(-50%, -34px) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -60px) scale(0.95); }
}
@keyframes ghc-dmg-rise {
  0%   { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
  20%  { transform: translate(-50%, -10px) scale(1.2); opacity: 1; }
  80%  { transform: translate(-50%, -55px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -90px) scale(0.9); opacity: 0; }
}

/* ALIADOS — 2026-05-09: posicionamiento absoluto. El JS calcula left/top en %.
   Container ocupa todo el stage; los aliados se distribuyen "abajo del jefe"
   (~52-95% del alto) con jitter aleatorio determinístico por character_id. */
.ghc-allies {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.ghc-ally {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* 2026-05-09 v4: container width = ally-size + ~30px de margen para nombre/barras.
     Si --ally-size no está set, usa clamp default. */
  width: max(108px, calc(var(--ally-size, 85px) + 24px));
  pointer-events: auto;
  transition: top 0.4s ease, left 0.4s ease, width 0.3s ease;
}
.ghc-ally.is-self .ghc-ally-sprite img {
  filter: drop-shadow(0 0 14px rgba(233,185,99,0.85)) drop-shadow(0 4px 8px rgba(0,0,0,0.7));
}
.ghc-ally.is-self .ghc-ally-name {
  color: var(--ghc-gold);
  border-color: var(--ghc-gold);
}
/* 2026-05-09: barras chiquitas, JUSTO ARRIBA del nombre */
.ghc-ally-bars {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 80%;
  margin-top: 2px;
}
.ghc-bar {
  /* Escala fluida: 3px chica → 5px grande */
  height: clamp(3px, 0.6vmin, 5px);
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.ghc-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}
.ghc-bar-hp .ghc-bar-fill { background: linear-gradient(90deg, #5fd684, #8ce0a3); }
.ghc-bar-hp.is-low .ghc-bar-fill {
  background: linear-gradient(90deg, #d9342f, #ff6378);
  animation: ghcBarLowPulse 1.2s ease-in-out infinite;
}
.ghc-bar-mp .ghc-bar-fill { background: linear-gradient(90deg, #6cd4ff, #aee4ff); }
.ghc-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 7.5px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0,0,0,0.95);
}
@keyframes ghcBarLowPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* 2026-05-09: fila avatar + nombre */
.ghc-ally-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.ghc-ally-avatar {
  flex: 0 0 auto;
  /* Escala fluida 12px → 18px */
  width: clamp(12px, 2vmin, 18px);
  height: clamp(12px, 2vmin, 18px);
  border-radius: 50%;
  border: 1.5px solid rgba(233,185,99,0.7);
  background-color: rgba(20,12,40,0.95);
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ghc-ally-avatar-fallback {
  font-family: var(--font-title, sans-serif);
  font-weight: 800;
  font-size: clamp(7px, 1vmin, 9.5px);
  color: var(--ghc-gold, #e9b963);
  background: linear-gradient(135deg, rgba(60,30,90,0.9), rgba(20,12,40,0.95));
}
.ghc-ally.is-self .ghc-ally-avatar {
  border-color: var(--ghc-gold, #e9b963);
  box-shadow: 0 0 8px rgba(233,185,99,0.7);
}

.ghc-ally-sprite {
  /* 2026-05-09 v4: tamaño viene de --ally-size (set inline desde JS según count).
     Fallback al clamp para compat. */
  width: var(--ally-size, clamp(55px, 8.7vmin, 85px));
  height: var(--ally-size, clamp(55px, 8.7vmin, 85px));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  transition: width 0.3s ease, height 0.3s ease;
}

/* 2026-05-09: MODO BURBUJA (.is-bubble-mode) — reemplaza el sprite del PJ
   por una burbuja circular con su avatar. Tamaño viene de --ally-size
   (set inline desde JS según cantidad de aliados) con fallback a clamp default. */
.ghc-ally-bubble-avatar {
  width: var(--ally-size, clamp(55px, 8.7vmin, 85px));
  height: var(--ally-size, clamp(55px, 8.7vmin, 85px));
  border-radius: 50%;
  background-color: rgba(20,12,40,0.9);
  background-size: cover;
  background-position: center;
  border: 2.5px solid rgba(233,185,99,0.55);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.7),
    inset 0 2px 4px rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: width 0.3s ease, height 0.3s ease;
}
.ghc-ally-bubble-avatar-fallback {
  font-family: var(--font-title, sans-serif);
  font-weight: 800;
  color: var(--ghc-gold, #e9b963);
  background: radial-gradient(circle at 35% 30%, rgba(80,40,140,0.95) 0%, rgba(30,15,60,0.95) 70%);
  text-shadow: 0 2px 4px rgba(0,0,0,0.85);
  /* Tamaño tipográfico responsive — proporcional a la burbuja */
  font-size: clamp(22px, 4vmin, 36px);
  letter-spacing: 0.02em;
}
/* La burbuja del propio PJ (vos) tiene borde dorado más fuerte + glow */
.ghc-ally.is-bubble-mode.is-self .ghc-ally-bubble-avatar {
  border-color: var(--ghc-gold, #e9b963);
  box-shadow:
    0 0 14px rgba(233,185,99,0.65),
    0 4px 14px rgba(0,0,0,0.7),
    inset 0 2px 4px rgba(255,255,255,0.12);
}
/* En modo burbuja, no hace falta el sprite — y los allies tampoco hacen flip
   (las imágenes son retratos circulares que se ven igual a ambos lados). */
.ghc-ally.is-bubble-mode .ghc-ally-sprite { display: none; }

/* 2026-05-09 v5: el overflow inline (.ghc-ally-overflow dentro del stage) es
   SOLO MOBILE. En PC se oculta — usamos #ghc-pc-ally-host (panel separado
   en body, posicionado fuera del frame). */
.ghc-ally-overflow {
  position: absolute;
  top: 36%;
  right: 6px;
  bottom: 14px;
  width: clamp(125px, 14vw, 165px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 4px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(233,185,99,0.4) transparent;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.65));
  border-left: 1px solid rgba(233,185,99,0.2);
  border-radius: 6px 0 0 6px;
  -webkit-overflow-scrolling: touch;
}
/* Ocultar overflow inline en PC — usamos el panel #ghc-pc-ally-host externo */
@media (min-width: 901px) {
  .ghc-ally-overflow { display: none !important; }
}

/* === PANEL PC SEPARADO === Vive en body (fuera del frame), posicionado
   entre el borde derecho del frame de la cueva y el sidebar global del juego.
   El frame es 75vh ancho (aspect 3/4), centrado: borde derecho = 50vw + 37.5vh.
   2026-05-10: ahora tiene 2 secciones stacked: Aliados (top) + Log de Batalla (bottom). */
.ghc-pc-ally-host {
  position: fixed;
  top: 80px;                                         /* debajo del topbar global */
  left: calc(50vw + 37.5vh + 6px);                   /* pegado al borde derecho del frame */
  right: 12px;                                       /* hasta el borde del viewport */
  bottom: 14px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: linear-gradient(180deg, rgba(15,8,28,0.92), rgba(0,0,0,0.95));
  border: 1px solid rgba(233,185,99,0.3);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.7);
  overflow: hidden;
  pointer-events: auto;
}
.ghc-pc-ally-section,
.ghc-pc-battlelog-section {
  display: flex;
  flex-direction: column;
  min-height: 0;       /* permite shrink en flex */
}
/* Aliados ocupa 55% / Log 45% del alto disponible — ajustable */
.ghc-pc-ally-section { flex: 1 1 55%; }
.ghc-pc-battlelog-section {
  flex: 1 1 45%;
  border-top: 1px solid rgba(233,185,99,0.25);
}
/* PC normal: el right sidebar del juego (.side-panel = 320px) está visible,
   empujamos el panel de aliados a su izquierda. */
@media (min-width: 901px) {
  .ghc-pc-ally-host { right: 328px; }
}
.ghc-pc-ally-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-title, sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ghc-gold, #e9b963);
  padding: 8px 10px;
  border-bottom: 1px solid rgba(233,185,99,0.2);
  background: linear-gradient(180deg, rgba(60,30,90,0.4), rgba(15,8,28,0.6));
  flex-shrink: 0;
}
.ghc-pc-ally-header i { font-size: 14px; filter: drop-shadow(0 0 6px rgba(233,185,99,0.5)); }
.ghc-pc-ally-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(233,185,99,0.4) transparent;
}
.ghc-pc-ally-list::-webkit-scrollbar { width: 5px; }
.ghc-pc-ally-list::-webkit-scrollbar-thumb {
  background: rgba(233,185,99,0.4);
  border-radius: 2px;
}
/* 2026-05-10: log de batalla — lista compacta scrolleable */
.ghc-pc-battlelog-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(233,185,99,0.4) transparent;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  color: var(--ghc-text-dim, rgba(244,236,216,0.7));
}
.ghc-pc-battlelog-list::-webkit-scrollbar { width: 5px; }
.ghc-pc-battlelog-list::-webkit-scrollbar-thumb {
  background: rgba(233,185,99,0.4);
  border-radius: 2px;
}
.ghc-pc-battlelog-empty {
  text-align: center;
  padding: 20px 8px;
  color: var(--ghc-text-dim, rgba(244,236,216,0.5));
  font-size: 11.5px;
  font-style: italic;
}
.ghc-pc-bl-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 6px;
  align-items: center;
  padding: 3px 6px;
  border-radius: 4px;
  line-height: 1.3;
  border-left: 2px solid transparent;
}
.ghc-pc-bl-row:hover { background: rgba(255,255,255,0.04); }
.ghc-pc-bl-time {
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  color: rgba(244,236,216,0.4);
  font-weight: 600;
}
.ghc-pc-bl-row i { font-size: 12px; }
.ghc-pc-bl-text { color: var(--ghc-text, #f4ecd8); }
.ghc-pc-bl-actor { color: var(--ghc-gold, #e9b963); font-weight: 700; }
.ghc-pc-bl-action { color: rgba(244,236,216,0.65); font-size: 10.5px; }
.ghc-pc-bl-val {
  font-family: var(--font-mono, monospace);
  color: #fff;
  font-weight: 800;
  margin-left: 2px;
}
.ghc-pc-bl-mob {
  color: var(--ghc-cyan, #6cd4ff);
  font-size: 10.5px;
  font-style: italic;
}
/* 2026-05-10: nombre de skill destacado (violeta, en bold) */
.ghc-pc-bl-skill {
  color: #c5a4ff;
  font-weight: 700;
  font-size: 11px;
}
/* Por tipo de evento — borde y color de icono */
.ghc-pc-bl-row.k-hit    { border-left-color: rgba(95,212,255,0.4); }
.ghc-pc-bl-row.k-hit i  { color: #5fd6ff; }
.ghc-pc-bl-row.k-crit   { border-left-color: rgba(255,140,80,0.7); background: rgba(255,140,80,0.06); }
.ghc-pc-bl-row.k-crit i { color: #ff8c50; }
.ghc-pc-bl-row.k-crit .ghc-pc-bl-val { color: #ffaa50; text-shadow: 0 0 6px rgba(255,140,80,0.5); }
.ghc-pc-bl-row.k-skill  { border-left-color: rgba(179,128,255,0.5); }
.ghc-pc-bl-row.k-skill i { color: #b380ff; }
.ghc-pc-bl-row.k-heal   { border-left-color: rgba(95,214,132,0.5); }
.ghc-pc-bl-row.k-heal i { color: #5fd684; }
.ghc-pc-bl-row.k-heal .ghc-pc-bl-val { color: #5fd684; }
.ghc-pc-bl-row.k-mob    { border-left-color: rgba(255,90,110,0.4); }
.ghc-pc-bl-row.k-mob i  { color: #ff8090; }
.ghc-pc-bl-row.k-mob .ghc-pc-bl-val { color: #ff8090; }
.ghc-pc-bl-row.k-kill   { border-left-color: rgba(233,185,99,0.7); background: rgba(233,185,99,0.06); }
.ghc-pc-bl-row.k-kill i { color: #e9b963; }
.ghc-pc-bl-row.k-floor  { border-left-color: rgba(233,185,99,0.7); background: rgba(233,185,99,0.10); }
.ghc-pc-bl-row.k-floor i { color: #ffc857; }
.ghc-pc-bl-row.k-death  { border-left-color: rgba(255,90,110,0.7); background: rgba(255,90,110,0.06); opacity: 0.85; }
.ghc-pc-bl-row.k-death i { color: #ff5566; }
.ghc-pc-bl-row.k-info   { border-left-color: rgba(244,236,216,0.2); }
.ghc-pc-bl-row.k-info i { color: rgba(244,236,216,0.55); }
/* 2026-05-18: miss/skill_miss — el mob esquivó (floor 205+). Gris desaturado. */
/* 2026-05-17: MISS — más visible, amarillo brillante para llamar la atención.
   El usuario reportó que estaba muy chiquito y discreto. Ahora con background,
   borde marcado y action en bold/uppercase. */
.ghc-pc-bl-row.k-miss   {
  border-left-color: rgba(255,210,74,0.85);
  background: rgba(255,210,74,0.08);
}
.ghc-pc-bl-row.k-miss i { color: #ffd24a; font-size: 14px; }
.ghc-pc-bl-row.k-miss .ghc-pc-bl-action {
  color: #ffd24a;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(255,210,74,0.45);
}
.ghc-pc-bl-row.k-miss .ghc-pc-bl-skill { color: #ffe28a; }

/* Ocultar panel PC en mobile (solo se usa en PC) */
@media (max-width: 900px) {
  .ghc-pc-ally-host { display: none !important; }
}

/* === PANEL DE SKILLS PC === Vive en body, a la IZQUIERDA del frame de la cueva.
   Borde izquierdo del frame = 50vw - 37.5vh, así que su distancia desde el right
   del viewport = 50vw + 37.5vh. Le dejamos un gap de 6px.
   2026-05-09 v2: anclado desde ABAJO (alineado con el botón Atacar). */
.ghc-pc-skills-host {
  position: fixed;
  bottom: 14px;
  left: 12px;                                /* sidebar de nav está a la izquierda */
  /* Right del panel debe quedar a 6px del borde izquierdo del frame.
     borde izq del frame desde la izq del viewport = 50vw - 37.5vh
     → distancia desde la derecha = 100vw - (50vw - 37.5vh) = 50vw + 37.5vh
     + 6px de gap. */
  right: calc(50vw + 37.5vh + 6px);
  top: auto;
  max-height: calc(100vh - 90px);            /* dejar espacio para el topbar global */
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: linear-gradient(180deg, rgba(15,8,28,0.92), rgba(0,0,0,0.95));
  border: 1px solid rgba(108,212,255,0.3);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.7);
  overflow: hidden;
  pointer-events: auto;
}
/* PC normal: el nav sidebar del juego (.nav-sidebar = 240px) está visible,
   empujamos el panel de skills a su derecha. */
@media (min-width: 901px) {
  .ghc-pc-skills-host { left: 248px; }
}
.ghc-pc-skills-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-title, sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ghc-cyan, #6cd4ff);
  padding: 8px 10px;
  border-bottom: 1px solid rgba(108,212,255,0.2);
  background: linear-gradient(180deg, rgba(40,80,160,0.4), rgba(15,8,28,0.6));
  flex-shrink: 0;
}
.ghc-pc-skills-header i { font-size: 14px; filter: drop-shadow(0 0 6px rgba(108,212,255,0.5)); }
.ghc-pc-skills-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(108,212,255,0.4) transparent;
}
.ghc-pc-skills-list::-webkit-scrollbar { width: 5px; }
.ghc-pc-skills-list::-webkit-scrollbar-thumb {
  background: rgba(108,212,255,0.4);
  border-radius: 2px;
}
/* Las skills dentro del panel PC son botones más anchos (no circulares) */
.ghc-pc-skills-list .ghc-skill-btn {
  width: 100%;
  height: auto;
  padding: 8px 10px;
  border-radius: 7px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(108,212,255,0.18), rgba(70,140,200,0.12));
}
.ghc-pc-skills-list .ghc-skill-btn i { font-size: 18px; flex-shrink: 0; }
.ghc-pc-skills-list .ghc-skill-name {
  display: block !important;
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--ghc-cyan, #6cd4ff);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ghc-pc-skills-list .ghc-skill-cost,
.ghc-pc-skills-list .ghc-skill-cd {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  background: transparent !important;
  border: none !important;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}
.ghc-pc-skills-list .ghc-skill-btn.is-cooldown {
  filter: grayscale(0.85) brightness(0.55);
  cursor: not-allowed;
}
.ghc-pc-skills-list .ghc-skill-btn.is-not-in-cave {
  filter: grayscale(0.85) brightness(0.55) saturate(0.4);
  cursor: not-allowed;
}
/* Ocultar panel PC skills en mobile */
@media (max-width: 900px) {
  .ghc-pc-skills-host { display: none !important; }
}
/* En PC, ocultar el .ghc-skills-row inline del action bar (ya está en el panel PC) */
@media (min-width: 901px) {
  .ghc-skills-row { display: none !important; }
}

/* =====================================================================
   PC + UNIFIED — anchor del panel skills cuando el nav-sidebar está oculto.
   En unified mode (siempre ghc-active >=901px), nav-sidebar está hidden,
   así que el skills panel se pega al margen izquierdo (left:12px).
   El ally panel mantiene right:328px (side-panel sigue visible con chat).
   ===================================================================== */
@media (min-width: 901px) {
  body.ghc-active .ghc-pc-skills-host { left: 12px; }
}
.ghc-ally-overflow::-webkit-scrollbar { width: 4px; }
.ghc-ally-overflow::-webkit-scrollbar-thumb {
  background: rgba(233,185,99,0.4);
  border-radius: 2px;
}
/* Desktop default: card horizontal — avatar a la izq, nombre+bars a la derecha,
   ocupa ancho completo del panel. */
.ghc-ally-circle {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;           /* horizontal en desktop */
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(15,8,28,0.55);
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  cursor: default;
  width: 100%;                   /* ocupa todo el ancho del panel */
}
.ghc-ally-circle.is-self {
  background: linear-gradient(90deg, rgba(233,185,99,0.18), rgba(15,8,28,0.55));
  border-color: rgba(233,185,99,0.45);
}

/* Info container — desktop muestra name + bars stacked. Mobile oculta bars. */
.ghc-ally-circle-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ghc-ally-circle-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(20,12,40,0.92);
  background-size: cover;
  background-position: center;
  border: 1.5px solid rgba(233,185,99,0.5);
  box-shadow: 0 2px 5px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ghc-ally-circle-avatar-fallback {
  font-family: var(--font-title, sans-serif);
  font-weight: 800;
  font-size: 13px;
  color: var(--ghc-gold, #e9b963);
  background: radial-gradient(circle at 35% 30%, rgba(80,40,140,0.95) 0%, rgba(30,15,60,0.95) 70%);
}
.ghc-ally-circle.is-self .ghc-ally-circle-avatar {
  border-color: var(--ghc-gold, #e9b963);
  box-shadow: 0 0 8px rgba(233,185,99,0.55);
}
.ghc-ally-circle-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ghc-ally-circle-name {
  font-family: var(--font-body, sans-serif);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ghc-ally-circle.is-self .ghc-ally-circle-name { color: var(--ghc-gold); }
.ghc-ally-circle-bar {
  height: 4px;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
}
.ghc-ally-circle-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.3s ease;
}
.ghc-ally-circle-bar-hp .ghc-ally-circle-bar-fill {
  background: linear-gradient(90deg, #5fd684, #8ce0a3);
}
.ghc-ally-circle-bar-hp.is-low .ghc-ally-circle-bar-fill {
  background: linear-gradient(90deg, #d9342f, #ff6378);
  animation: ghcBarLowPulse 1.2s ease-in-out infinite;
}
.ghc-ally-circle-bar-mp .ghc-ally-circle-bar-fill {
  background: linear-gradient(90deg, #6cd4ff, #aee4ff);
}
.ghc-ally-circle-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 8px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}

/* 2026-05-09 v3: popup flotante (mobile) — vive en #ghc-ally-circle-popup-layer
   posicionado absolute en el stage. No queda recortado por overflow del panel. */
.ghc-ally-circle-popup-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 200;
}
.ghc-circle-popup {
  position: absolute;
  /* right + top setteados via JS según bounding box del card */
  transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(15,8,28,0.97), rgba(0,0,0,0.97));
  border: 1px solid rgba(184,132,255,0.6);
  border-radius: 10px;
  padding: 9px 11px;
  min-width: 138px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.85), 0 0 14px rgba(184,132,255,0.25);
  pointer-events: none;
  animation: ghc-circle-popup-pop 0.22s cubic-bezier(0.4, 1.4, 0.6, 1);
}
.ghc-circle-popup::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left-color: rgba(184,132,255,0.6);
  border-right: 0;
}
.ghc-circle-popup-name {
  font-family: var(--font-title, sans-serif);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ghc-gold, #e9b963);
  margin-bottom: 7px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.04em;
}
.ghc-circle-popup-bar {
  height: 9px;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  margin-bottom: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.ghc-circle-popup-bar:last-child { margin-bottom: 0; }
.ghc-circle-popup-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.3s ease;
}
.ghc-circle-popup-bar-hp .ghc-circle-popup-bar-fill {
  background: linear-gradient(90deg, #5fd684, #8ce0a3);
}
.ghc-circle-popup-bar-hp.is-low .ghc-circle-popup-bar-fill {
  background: linear-gradient(90deg, #d9342f, #ff6378);
  animation: ghcBarLowPulse 1.2s ease-in-out infinite;
}
.ghc-circle-popup-bar-mp .ghc-circle-popup-bar-fill {
  background: linear-gradient(90deg, #6cd4ff, #aee4ff);
}
.ghc-circle-popup-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 8.5px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}
@keyframes ghc-circle-popup-pop {
  from { opacity: 0; transform: translateY(-50%) translateX(12px) scale(0.85); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}
/* En mobile la columna está PEGADA al borde derecho DENTRO del stage.
   Tarjeta vertical (avatar arriba, nombre abajo). HP/MP solo en el popup al tap. */
@media (max-width: 900px) {
  .ghc-ally-overflow {
    position: absolute;          /* override desktop fixed → vuelve a absolute */
    /* 2026-05-09 v2 (user feedback): la barra de aliados puede llegar más
       arriba — antes top:34% (arrancaba al medio), ahora top:14% (justo
       debajo del header de la cueva). El mob está al centro y la columna
       a la derecha pegada al borde — no se solapan visualmente. */
    top: 14%;
    bottom: 100px;
    right: 0;
    left: auto;
    width: auto;
    min-width: 0;
    padding: 3px 0 3px 2px;
    background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7));
    border: none;
    border-radius: 6px 0 0 6px;
    box-shadow: none;
    cursor: pointer;
    gap: 3px;
    z-index: 6;
  }
  /* Header "Aliados" oculto en mobile */
  .ghc-ally-overflow::before { display: none; }
  /* Tarjeta vertical compacta */
  .ghc-ally-circle {
    flex-direction: column;
    align-items: center;
    padding: 2px 3px;
    gap: 1px;
    border-radius: 4px 0 0 4px;
    width: auto;
  }
  .ghc-ally-circle-avatar { width: 26px; height: 26px; }
  .ghc-ally-circle-avatar-fallback { font-size: 11px; }
  .ghc-ally-circle-info {
    flex: 0 0 auto;
    align-items: center;
    gap: 0;
  }
  .ghc-ally-circle-name {
    font-size: 8px;
    max-width: 38px;
    letter-spacing: -0.02em;
    text-align: center;
    line-height: 1.1;
  }
  /* Bars dentro del card ocultas en mobile — solo se ven en el popup flotante */
  .ghc-ally-circle-info .ghc-ally-circle-bar { display: none; }
  /* Estado expanded: highlight del card para mostrar que está activo */
  .ghc-ally-circle.is-expanded {
    background: linear-gradient(135deg, rgba(184,132,255,0.22), rgba(15,8,28,0.7));
    border-color: rgba(184,132,255,0.55);
  }
}
@media (max-width: 600px) {
  .ghc-ally-overflow {
    bottom: 92px;
    padding: 3px 0 3px 2px;
  }
  .ghc-ally-circle { padding: 2px 2px; }
  .ghc-ally-circle-avatar { width: 24px; height: 24px; }
  .ghc-ally-circle-avatar-fallback { font-size: 10px; }
  .ghc-ally-circle-name { font-size: 7.5px; max-width: 36px; }
  .ghc-ally-circle-popup { min-width: 120px; padding: 7px 9px; }
  .ghc-ally-circle-popup-name { font-size: 10px; }
}
.ghc-ally-sprite img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8));
}
/* Compensación por razas con más whitespace en su PNG + FLIP horizontal
   cuando el PJ está en la mitad izquierda (para que mire hacia el centro).
   Combinamos scale(N) × scaleX(-1) en una sola transform.
   IMPORTANTE: ningún scale baja de 1.0 — el usuario quiere PJs grandes. */
/* Elf separado — su PNG es naturalmente más grande, achicar a 0.65 */
.ghc-ally.race-elf .ghc-ally-sprite img {
  transform: scale(0.65);
  transform-origin: bottom center;
}
.ghc-ally.race-undead .ghc-ally-sprite img {
  transform: scale(1.3);
  transform-origin: bottom center;
}
.ghc-ally.race-fae .ghc-ally-sprite img {
  transform: scale(1.5);
  transform-origin: bottom center;
}
.ghc-ally.race-human .ghc-ally-sprite img {
  transform: scale(1.1);
  transform-origin: bottom center;
}
.ghc-ally.race-ogre .ghc-ally-sprite img,
.ghc-ally.race-drakkar .ghc-ally-sprite img {
  transform: scale(1.05);
  transform-origin: bottom center;
}
/* Flip horizontal para los aliados de la mitad izquierda — combinado con su scale */
.ghc-ally.is-left.race-elf .ghc-ally-sprite img { transform: scale(0.65) scaleX(-1); }
.ghc-ally.is-left.race-undead .ghc-ally-sprite img { transform: scale(1.3) scaleX(-1); }
.ghc-ally.is-left.race-fae .ghc-ally-sprite img { transform: scale(1.5) scaleX(-1); }
.ghc-ally.is-left.race-human .ghc-ally-sprite img { transform: scale(1.1) scaleX(-1); }
.ghc-ally.is-left.race-ogre .ghc-ally-sprite img,
.ghc-ally.is-left.race-drakkar .ghc-ally-sprite img { transform: scale(1.05) scaleX(-1); }

.ghc-ally-name {
  font-family: var(--font-title, sans-serif);
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ghc-you {
  color: var(--ghc-cyan);
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 600;
}
.ghc-ally-stats {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--ghc-text-dim);
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}

/* BURBUJAS de chat sobre los PJs aliados */
/* 2026-05-10: ensanchadas — pasaba que mensajes de 4-5 palabras se cortaban en
   muchas líneas. Bumped max-width 200→320 (PC) y min-width 50→90 para que las
   frases cortas no queden apretadas. En mobile lo limitamos al stage. */
.ghc-ally-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #1a0a08;
  padding: 7px 13px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  max-width: 320px;
  min-width: 90px;
  width: max-content;
  box-shadow: 0 6px 16px rgba(0,0,0,0.7);
  animation: ghc-bubble-in 0.22s ease-out;
  white-space: normal;
  word-wrap: break-word;
  pointer-events: none;
  z-index: 20;
}
@media (max-width: 600px) {
  .ghc-ally-bubble { max-width: min(260px, calc(100vw - 32px)); padding: 6px 11px; }
}
.ghc-ally-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}
@keyframes ghc-bubble-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* SELF STATS — barras "RPG" rediseñadas */
.ghc-self-stats {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.92));
  border-top: 1px solid var(--ghc-border);
  flex-shrink: 0;
  z-index: 5;
}

/* 2026-05-09 — En MOBILE: ocultar el topbar global del juego (Lv/HP/MP/oro/gemas)
   y poner las barras HP/MP del PJ FIJAS justo debajo del header del cave.
   Especificidad: necesitamos `body.mobile-mode.ghc-active` para ganarle a la
   regla `body.mobile-mode .mobile-resources-strip { display: flex !important; }`
   que vive en mobile.css (cargado DESPUÉS que este). */
@media (max-width: 1024px) {
  body.mobile-mode.ghc-active .mobile-resources-strip,
  body.ghc-active .mobile-resources-strip {
    display: none !important;
  }
  .ghc-self-stats {
    position: fixed;
    top: 54px; /* debajo del .ghc-header (~50px de alto en mobile) — ajustado */
    left: 0;
    right: 0;
    flex-direction: row;
    gap: 8px;
    padding: 5px 10px;
    background: linear-gradient(180deg, rgba(0,0,0,0.92), rgba(0,0,0,0.75));
    border-top: none;
    border-bottom: 1px solid var(--ghc-border);
    z-index: 12;
    backdrop-filter: blur(6px);
  }
  .ghc-self-stats .ghc-self-bar { flex: 1; gap: 6px; }
  .ghc-self-stats .ghc-self-bar-icon {
    width: 22px; height: 22px;
    border-width: 1.5px;
  }
  .ghc-self-stats .ghc-self-bar-icon i { font-size: 11px; }
  .ghc-self-stats .ghc-self-bar-track { height: 14px; }
  .ghc-self-stats .ghc-self-bar-text { font-size: 10px; }
  /* Mover el event-timer abajo para que no choque con la nueva barra */
  .ghc-event-timer { top: 92px !important; }
}
@media (max-width: 600px) {
  /* Pantallas chicas: el header se compacta menos — mantener offset razonable */
  .ghc-self-stats { top: 50px; }
  .ghc-event-timer { top: 86px !important; }
}
.ghc-self-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono, monospace);
}
.ghc-self-bar-icon {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 2px solid;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.ghc-self-bar-icon i { font-size: 14px; }
.ghc-self-hp .ghc-self-bar-icon {
  border-color: var(--ghc-mint);
  background: radial-gradient(circle, rgba(95,214,132,0.25), rgba(95,214,132,0.05));
}
.ghc-self-hp .ghc-self-bar-icon i { color: var(--ghc-mint); }
.ghc-self-mp .ghc-self-bar-icon {
  border-color: var(--ghc-cyan);
  background: radial-gradient(circle, rgba(108,212,255,0.25), rgba(108,212,255,0.05));
}
.ghc-self-mp .ghc-self-bar-icon i { color: var(--ghc-cyan); }

.ghc-self-bar-track {
  flex: 1;
  height: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.6));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.04);
}
.ghc-self-bar-fill {
  height: 100%;
  transition: width 0.4s ease;
  position: relative;
}
.ghc-self-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 50%);
  border-radius: 99px;
}
/* Línea brillante animada que recorre la barra */
.ghc-self-bar-fill::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: ghc-bar-shine 2.5s linear infinite;
}
@keyframes ghc-bar-shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
.ghc-self-hp .ghc-self-bar-fill {
  background: linear-gradient(180deg, #79e8a0 0%, #5fd684 50%, #2faa57 100%);
  box-shadow: 0 0 12px rgba(95,214,132,0.5);
}
.ghc-self-mp .ghc-self-bar-fill {
  background: linear-gradient(180deg, #98e0ff 0%, #6cd4ff 50%, #2aa1d9 100%);
  box-shadow: 0 0 12px rgba(108,212,255,0.5);
}

.ghc-self-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
  letter-spacing: 0.04em;
}

/* ACTION BAR */
.ghc-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px 14px 14px;
  background: rgba(0,0,0,0.92);
  border-top: 1px solid var(--ghc-border);
  flex-shrink: 0;
  z-index: 5;
}
.ghc-attack-btn {
  width: 100%;
  padding: 13px;
  background: linear-gradient(180deg, #d44a5a, #82242f);
  color: #fff;
  border: 1px solid rgba(255,85,102,0.7);
  border-radius: 10px;
  font-family: var(--font-title, sans-serif);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: filter 0.15s, transform 0.1s;
  box-shadow: 0 4px 16px rgba(255,85,102,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
}
.ghc-attack-btn:hover { filter: brightness(1.15); }
.ghc-attack-btn:active { transform: scale(0.97); }
.ghc-attack-btn:disabled { filter: grayscale(0.6) brightness(0.5); cursor: not-allowed; }
.ghc-attack-btn i { font-size: 19px; }

.ghc-skills-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 7px;
}
.ghc-skill-btn {
  padding: 8px 6px;
  background: linear-gradient(180deg, rgba(108,212,255,0.22), rgba(70,140,200,0.18));
  color: var(--ghc-cyan);
  border: 1px solid rgba(108,212,255,0.55);
  border-radius: 8px;
  font-family: var(--font-body, sans-serif);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: filter 0.15s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(108,212,255,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}
.ghc-skill-btn:hover { filter: brightness(1.2); }
.ghc-skill-btn:active { transform: scale(0.95); }
.ghc-skill-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Skill en cooldown — gris/desaturada con countdown */
.ghc-skill-btn.is-cooldown {
  filter: grayscale(0.95) brightness(0.55);
  cursor: not-allowed;
  position: relative;
}
.ghc-skill-btn.is-cooldown::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0,0,0,0.45);
  pointer-events: none;
}
.ghc-skill-btn.is-cooldown:hover { filter: grayscale(0.95) brightness(0.55); transform: none; }

/* Skill que no aplica en La Cueva (buff/debuff/summon puro) — visualmente disabled. */
.ghc-skill-btn.is-not-in-cave {
  filter: grayscale(0.85) brightness(0.55) saturate(0.4);
  cursor: not-allowed;
  opacity: 0.7;
  border-color: rgba(255,90,90,0.35) !important;
}
.ghc-skill-btn.is-not-in-cave:hover { filter: grayscale(0.85) brightness(0.55) saturate(0.4); transform: none; }
.ghc-skill-btn.is-not-in-cave i { color: #d65; }
.ghc-skill-cd {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: rgba(0,0,0,0.75);
  padding: 1px 6px;
  border-radius: 99px;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 2;
}
.ghc-skill-btn i { font-size: 16px; }
.ghc-skill-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 11.5px;
}
.ghc-skill-cost {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  color: var(--ghc-text-dim);
  letter-spacing: 0.04em;
}
.ghc-skills-empty {
  text-align: center;
  font-size: 11px;
  color: var(--ghc-text-dim);
  font-style: italic;
  padding: 10px;
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 8px;
}

/* LOG (compacto, oculto) */
.ghc-log { display: none; }

/* POCIONES — botones circulares flotantes a la izquierda con contador */
.ghc-potions {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 14;
}
.ghc-potion-btn {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.5);
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.5),
    inset 0 -3px 6px rgba(0,0,0,0.35),
    inset 0 2px 4px rgba(255,255,255,0.25);
}
.ghc-potion-btn i { font-size: 20px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }
.ghc-potion-btn:hover { filter: brightness(1.15); transform: scale(1.06); }
.ghc-potion-btn:active { transform: scale(0.92); }
.ghc-potion-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.ghc-potion-hp {
  background: radial-gradient(circle at 35% 30%, #ff8aa3 0%, #d43c4d 50%, #82242f 100%);
  color: #fff;
}
.ghc-potion-mp {
  background: radial-gradient(circle at 35% 30%, #88e0ff 0%, #4ba4d4 50%, #1f5780 100%);
  color: #fff;
}
.ghc-potion-stamina {
  background: radial-gradient(circle at 35% 30%, #ffe080 0%, #f0b020 50%, #8a6010 100%);
  color: #fff;
}
.ghc-potion-count {
  position: absolute;
  bottom: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: rgba(0,0,0,0.92);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 99px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ghc-potion-btn:disabled .ghc-potion-count {
  background: rgba(0,0,0,0.7);
  color: rgba(255,255,255,0.5);
}

/* En mobile las pociones quedan más chicas y a la izquierda */
@media (max-width: 900px) {
  .ghc-potions {
    left: 8px;
    gap: 8px;
  }
  .ghc-potion-btn {
    width: 44px;
    height: 44px;
  }
  .ghc-potion-btn i { font-size: 18px; }
  .ghc-potion-count {
    min-width: 18px;
    height: 18px;
    font-size: 10px;
  }
}

/* MODAL FLOOR-UP — al matar al mob, ofrece subir piso o volver al lobby */
.ghc-fu-modal { background: linear-gradient(180deg, rgba(20,12,40,0.98), rgba(15,8,30,0.99)); }
.ghc-fu-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(95,214,132,0.4), rgba(50,140,80,0.25));
  border: 2px solid rgba(95,214,132,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px rgba(95,214,132,0.4);
}
.ghc-fu-icon i { font-size: 38px; color: #5fd684; }
.ghc-fu-icon.ghc-fu-warn {
  background: radial-gradient(circle at 35% 30%, rgba(255,180,80,0.4), rgba(180,100,40,0.25));
  border-color: rgba(255,180,80,0.6);
  box-shadow: 0 0 24px rgba(255,180,80,0.4);
}
.ghc-fu-icon.ghc-fu-warn i { color: #ffb450; }
.ghc-fu-title {
  font-family: var(--font-title, sans-serif);
  font-size: 20px;
  font-weight: 800;
  color: var(--ghc-gold, #e9b963);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.ghc-fu-sub {
  font-size: 13.5px;
  color: rgba(244,236,216,0.85);
  margin-bottom: 14px;
  line-height: 1.45;
}
.ghc-fu-cost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(233,185,99,0.35);
  border-radius: 10px;
  padding: 8px 14px;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  color: var(--ghc-text, #f4ecd8);
}
.ghc-fu-cost i { color: var(--ghc-gold, #e9b963); font-size: 16px; }
.ghc-fu-cost b { color: var(--ghc-gold, #e9b963); }
.ghc-fu-stamina {
  font-size: 11.5px;
  color: rgba(244,236,216,0.6);
}
.ghc-fu-potion-offer {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(108,212,255,0.1);
  border: 1px solid rgba(108,212,255,0.35);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ghc-cyan, #6cd4ff);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.ghc-fu-potion-offer i { font-size: 18px; }
.ghc-fu-potion-offer b { color: #fff; }

/* TOOLTIP de skill (long-press / right-click) */
.ghc-skill-tooltip {
  position: fixed;
  z-index: 100000;
  max-width: 260px;
  background: linear-gradient(180deg, rgba(20,12,40,0.98), rgba(15,8,30,0.99));
  border: 2px solid var(--ghc-cyan, #6cd4ff);
  border-radius: 10px;
  padding: 10px 12px;
  color: #f4ecd8;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7), 0 0 18px rgba(108,212,255,0.4);
  backdrop-filter: blur(10px);
  pointer-events: none;
  animation: ghc-skt-in 0.18s ease-out;
}
@keyframes ghc-skt-in {
  from { opacity: 0; transform: translateY(6px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ghc-skt-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-title, sans-serif);
  font-size: 14px;
  font-weight: 800;
  color: var(--ghc-cyan, #6cd4ff);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.ghc-skt-head i { font-size: 16px; }
.ghc-skt-desc {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(244,236,216,0.85);
  margin-bottom: 8px;
}
.ghc-skt-stats {
  display: flex;
  gap: 12px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: rgba(244,236,216,0.8);
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ghc-skt-stats i { font-size: 12px; margin-right: 3px; }
.ghc-skt-stats span:first-child i { color: var(--ghc-cyan, #6cd4ff); }
.ghc-skt-stats span:last-child i { color: var(--ghc-gold, #e9b963); }
.ghc-skt-hint {
  font-size: 9.5px;
  color: rgba(244,236,216,0.4);
  font-style: italic;
  margin-top: 6px;
  text-align: center;
  letter-spacing: 0.06em;
}

/* LOADING / ERROR */
.ghc-loading,
.ghc-error,
.ghc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: 40px 20px;
  color: var(--ghc-text-dim);
  text-align: center;
}
.ghc-loading i { font-size: 36px; color: var(--ghc-gold); }
.ghc-loading-text {
  font-family: var(--font-title, sans-serif);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ghc-text-dim);
  margin-top: 4px;
}
.ghc-loading-tip {
  margin-top: 24px;
  max-width: 320px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(40,22,68,0.55), rgba(15,8,28,0.7));
  border: 1px solid rgba(233,185,99,0.3);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(233,185,99,0.1);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.ghc-loading-tip-label {
  font-family: var(--font-title, sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ghc-gold, #e9b963);
  display: flex;
  align-items: center;
  gap: 7px;
}
.ghc-loading-tip-label i {
  font-size: 14px !important;
  color: var(--ghc-gold, #e9b963) !important;
  filter: drop-shadow(0 0 6px rgba(233,185,99,0.6));
}
.ghc-loading-tip-text {
  font-family: var(--font-body, sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--ghc-text, #f4ecd8);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* =====================================================================
   CHAT OVERLAY (FAB + drawer + backdrop) — fuera del frame, ancho del viewport
   ===================================================================== */
#ghc-chat-overlay-host { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
@media (min-width: 900px) {
  #ghc-chat-overlay-host {
    aspect-ratio: 3 / 4;
    width: auto;
    height: 100vh;
    height: 100dvh;
    inset: auto;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
#ghc-chat-overlay-host .ghc-chat-fab {
  position: absolute;
  bottom: 110px;
  right: 16px;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #f0c674, #b97f2e);
  color: #2a1a00;
  border: 2px solid rgba(0,0,0,0.4);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.6);
  pointer-events: auto;
  z-index: 10000;
}
#ghc-chat-overlay-host .ghc-chat-fab i { font-size: 20px; }
.ghc-chat-fab-badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: #ff5566;
  color: #fff;
  border-radius: 99px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(0,0,0,0.5);
  box-shadow: 0 0 8px rgba(255,85,102,0.7);
  animation: ghc-badge-pulse 2s ease-in-out infinite;
}
@keyframes ghc-badge-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(255,85,102,0.5); }
  50% { box-shadow: 0 0 14px rgba(255,85,102,1); }
}

#ghc-chat-overlay-host .ghc-chat-drawer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  max-height: 480px;
  background: linear-gradient(180deg, rgba(20,12,40,0.97), rgba(15,8,30,0.99));
  border-top: 1px solid rgba(233,185,99,0.4);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  pointer-events: auto;
  z-index: 10001;
  backdrop-filter: blur(10px);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.6);
}
#ghc-chat-overlay-host .ghc-chat-drawer.is-open { transform: translateY(0); }

.ghc-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(233,185,99,0.25);
  flex-shrink: 0;
}
.ghc-chat-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-title, sans-serif);
  font-size: 14px;
  font-weight: 800;
  color: var(--ghc-gold);
  letter-spacing: 0.04em;
}
.ghc-chat-title i { font-size: 17px; }
.ghc-chat-close {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--ghc-text);
  border-radius: 50%;
  cursor: pointer;
}
.ghc-chat-close i { font-size: 14px; }
.ghc-chat-feed {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ghc-chat-empty {
  text-align: center;
  font-style: italic;
  padding: 20px;
  color: var(--ghc-text-dim);
  font-size: 12px;
}
.ghc-chat-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(255,255,255,0.02);
}
.ghc-chat-line.is-self {
  background: rgba(108,212,255,0.08);
  border-left: 2px solid var(--ghc-cyan);
  padding-left: 8px;
}
.ghc-chat-clan {
  color: var(--ghc-cyan);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
}
.ghc-chat-name { color: var(--ghc-gold); font-weight: 800; }
.ghc-chat-msg { color: var(--ghc-text); flex: 1; min-width: 0; }
.ghc-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.45);
  border-top: 1px solid rgba(233,185,99,0.25);
  flex-shrink: 0;
}
.ghc-chat-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--ghc-text);
  font-family: var(--font-body, sans-serif);
  font-size: 13px;
  outline: none;
}
.ghc-chat-input:focus { border-color: var(--ghc-gold); }
.ghc-chat-send {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #f0c674, #b97f2e);
  color: #2a1a00;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.ghc-chat-send i { font-size: 15px; }
.ghc-chat-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.ghc-chat-backdrop.is-active { opacity: 1; pointer-events: auto; }

/* En MOBILE (body.mobile-mode), ocultar el shell del juego para fullscreen combat.
   Usamos `body.mobile-mode.ghc-active` (la clase mobile-mode la maneja el shell del
   juego según el viewport real) en lugar de @media para mayor confiabilidad. */
body.mobile-mode.ghc-active .top-bar,
body.mobile-mode.ghc-active .nav-sidebar,
body.mobile-mode.ghc-active .side-panel,
body.mobile-mode.ghc-active .mobile-bottom-tab,
body.mobile-mode.ghc-active .mobile-tab-bar,
body.mobile-mode.ghc-active .bottom-tabs,
body.mobile-mode.ghc-active .email-verify-banner,
body.mobile-mode.ghc-active .mobile-burger,
body.mobile-mode.ghc-active .player-resources,
body.mobile-mode.ghc-active .top-actions,
body.mobile-mode.ghc-active .brand {
  display: none !important;
}
body.mobile-mode.ghc-active { overflow: hidden; }
/* Backup adicional con @media por si mobile-mode no está aplicado */
@media (max-width: 900px) {
  body.ghc-active .top-bar,
  body.ghc-active .nav-sidebar,
  body.ghc-active .side-panel,
  body.ghc-active .mobile-bottom-tab,
  body.ghc-active .mobile-tab-bar,
  body.ghc-active .bottom-tabs,
  body.ghc-active .email-verify-banner,
  body.ghc-active .mobile-burger {
    display: none !important;
  }
  body.ghc-active { overflow: hidden; }
}

/* =====================================================================
   MOBILE — layout reimaginado: stage full-height, botones flotantes overlay,
   estilo juego de guerra de celular
   ===================================================================== */
@media (max-width: 900px) {
  /* El frame ya no usa flex column para el layout — todo va overlay */
  .ghc-frame { display: block; }
  .ghc-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    background: linear-gradient(180deg, rgba(0,0,0,0.85), transparent 100%);
    border-bottom: none;
    padding: 8px 12px;
  }
  .ghc-stage {
    position: absolute;
    inset: 0;
    flex: none;
  }
  /* Mob un poco más arriba que el ajuste anterior */
  .ghc-mob-zone { top: 19%; }

  /* 2026-05-09: ahora .ghc-self-stats es la barra FIJA con HP/MP arriba en mobile
     (reemplaza al topbar global del juego). NO ocultarla más.
     Antes estaba oculta porque las mini-barras encima del PJ ya mostraban HP/MP,
     pero el user pidió esta barra fija explícitamente. */

  /* Action bar transparente — los hijos son botones flotantes */
  .ghc-actions {
    position: absolute;
    inset: auto 0 0 0;
    background: transparent;
    border-top: none;
    padding: 0;
    z-index: 13;
    pointer-events: none;
  }
  .ghc-actions > * { pointer-events: auto; }

  /* BOTÓN ATAQUE — gigante circular en bottom-right (estilo juego de guerra) */
  .ghc-attack-btn {
    position: absolute;
    right: 14px;
    bottom: 18px;
    width: 78px;
    height: 78px;
    padding: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff6b7a 0%, #d43c4d 50%, #82242f 100%);
    border: 3px solid rgba(0,0,0,0.5);
    box-shadow:
      0 6px 20px rgba(255,85,102,0.5),
      0 0 0 4px rgba(255,85,102,0.15),
      inset 0 -4px 8px rgba(0,0,0,0.4),
      inset 0 3px 6px rgba(255,255,255,0.3);
    flex-direction: column;
    gap: 0;
  }
  .ghc-attack-btn i {
    font-size: 32px;
    margin-bottom: 1px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
  }
  .ghc-attack-btn span {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
  }
  .ghc-attack-btn:active { transform: scale(0.93); box-shadow: 0 3px 10px rgba(255,85,102,0.5); }

  /* SKILLS — botones chicos circulares al lado del atk.
     2026-05-09 v3 (user feedback): UNA SOLA FILA con scroll horizontal.
     Antes era flex-wrap que las hacía subir hacia arriba y se solapaban con
     los sprites de los aliados o el FAB del chat. Ahora siempre una línea,
     swipe horizontal para ver más. */
  .ghc-skills-row {
    position: absolute;
    right: 102px;
    bottom: 22px;
    display: flex;
    flex-direction: row-reverse;
    gap: 6px;
    grid-template-columns: none;
    flex-wrap: nowrap;
    justify-content: flex-end;
    max-width: calc(100vw - 130px);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 2026-05-10: touch-action pan-x — algunos celulares no scrollean horizontalmente
       porque el browser no sabe distinguir entre tap y pan dentro de los botones de
       skill (que tienen sus propios touch listeners). pan-x le dice al browser
       que tome control del scroll horizontal sin pisarse con los taps. */
    touch-action: pan-x;
    /* z-index alto para que las skills nunca queden tapadas por chat bubbles */
    z-index: 50;
  }
  .ghc-skills-row::-webkit-scrollbar { display: none; }
  /* Skills no se encogen en el scroll — mantienen su tamaño */
  .ghc-skills-row .ghc-skill-btn { flex-shrink: 0; }
  /* También subimos el botón de atacar al mismo nivel */
  .ghc-attack-btn { z-index: 50; }
  /* Las burbujas de chat de PJs aliados pasan por ABAJO de las skills */
  .ghc-ally-bubble { z-index: 18; }
  .ghc-skill-btn {
    width: 56px;
    height: 56px;
    padding: 0 !important;            /* centro absoluto: sin padding asimétrico */
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #88e0ff 0%, #4ba4d4 50%, #1f5780 100%);
    border: 2px solid rgba(0,0,0,0.5);
    box-shadow:
      0 4px 12px rgba(108,212,255,0.4),
      inset 0 -3px 6px rgba(0,0,0,0.35),
      inset 0 2px 4px rgba(255,255,255,0.25);
    color: #fff;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    line-height: 1;
  }
  .ghc-skill-btn i {
    font-size: 22px;
    line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
    margin: 0;
    padding: 0;
  }
  .ghc-skill-name { display: none !important; }
  .ghc-skill-cost,
  .ghc-skill-cd {
    font-size: 9px;
    font-weight: 800;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 2px rgba(0,0,0,0.85);
    line-height: 1;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: none !important;
  }
  .ghc-skills-empty { display: none; }

  /* FAB CHAT a la IZQUIERDA en mobile, pero ARRIBA de la fila de skills.
     2026-05-09 v2 (user feedback): antes a bottom:18 chocaba con la última
     skill de la izquierda (las skills ahora son scroll horizontal y pueden
     extenderse al extremo izquierdo). Lo subo a bottom:84 para que esté
     arriba del último botón de skill (bottom 18 + height 56 = 74). */
  #ghc-chat-overlay-host .ghc-chat-fab {
    bottom: 84px;
    left: 14px;
    right: auto;
    width: 52px; height: 52px;
  }

  /* Mob un poquito más chico para no robar tanto espacio */
  .ghc-mob-sprite { width: 170px !important; height: 170px !important; }
  .ghc-mob.is-boss .ghc-mob-sprite { width: 210px !important; height: 210px !important; }
  /* 2026-05-09 v4: en mobile, nombre/barras/stats escalan PROPORCIONALMENTE
     al sprite (--ally-size). Cuando hay muchos PJs y el sprite es chico,
     el nombre y barras también son chicos para no quedar más grandes que el PJ. */
  .ghc-ally-name {
    font-size: clamp(7px, calc(var(--ally-size, 65px) * 0.13), 11px);
    padding: 1px 5px;
  }
  .ghc-ally-stats {
    font-size: clamp(6px, calc(var(--ally-size, 65px) * 0.115), 10px);
  }
  .ghc-ally-bars {
    width: clamp(40px, calc(var(--ally-size, 65px) * 0.95), 95px);
  }
  .ghc-bar {
    height: clamp(2px, calc(var(--ally-size, 65px) * 0.045), 5px);
  }
  .ghc-bar-text {
    font-size: clamp(5px, calc(var(--ally-size, 65px) * 0.09), 8.5px);
  }
  .ghc-ally-avatar {
    width: clamp(10px, calc(var(--ally-size, 65px) * 0.21), 18px);
    height: clamp(10px, calc(var(--ally-size, 65px) * 0.21), 18px);
  }
  .ghc-ally-avatar-fallback {
    font-size: clamp(6px, calc(var(--ally-size, 65px) * 0.12), 9.5px);
  }
}

@media (max-width: 600px) {
  .ghc-mob-sprite { width: 170px; height: 170px; }
  .ghc-mob.is-boss .ghc-mob-sprite { width: 220px; height: 220px; }
  .ghc-attack-btn { width: 70px; height: 70px; }
  .ghc-attack-btn i { font-size: 28px; }
  .ghc-attack-btn span { font-size: 8px; }
  .ghc-skill-btn { width: 50px; height: 50px; }
  .ghc-skill-btn i { font-size: 18px; }
  .ghc-skills-row { right: 92px; bottom: 18px; max-width: calc(100vw - 116px); }
}
@media (max-height: 700px) {
  .ghc-mob-sprite { width: 150px; height: 150px; }
  .ghc-mob.is-boss .ghc-mob-sprite { width: 190px; height: 190px; }
}

/* =====================================================================
   ====  UNIFIED CAVE LAYOUT v1 — 2026-05-09  ===============================
   Reformatea TODA la pantalla al entrar a la cueva. PC only (>=901px).

   - nav-sidebar: oculto
   - side-panel: solo el chat (vitales, producción, ubicación, etc → hidden)
                 el chat se anima/expande hasta ocupar todo el lado derecho,
                 mostrando sólo las pestañas Global y Clan.
   - top-bar: minimalista, logo de Eldoria centrado
   - panel "Lobby + Ranking": NUEVO panel a la izquierda del todo
     (sólo en viewports anchos >=1700px; oculto si no hay espacio)
   - panel skills: a la izq del cave frame (existente)
   - panel allies: a la der del cave frame (existente)
   - cave frame: centrado entre skills y allies
   - botón de atacar: redondo, con HP/MP en pill a la izquierda

   Para revertir: simplemente borrar este bloque (todo lo de abajo hasta
   el final del archivo) o restaurar de guild_hall_combat.css.bak
   ===================================================================== */
@media (min-width: 901px) {
  /* ---- Top-bar minimalista con logo Eldoria centrado ------------------- */
  body.ghc-active .top-bar {
    background: linear-gradient(180deg, rgba(20,10,42,0.96) 0%, rgba(10,5,22,0.95) 100%) !important;
    border-bottom: 1px solid rgba(233,185,99,0.28) !important;
    box-shadow: 0 4px 22px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(233,185,99,0.08) !important;
    position: relative;
  }
  /* Logo Eldoria — parte del flex flow (NO absolute) para evitar overlap con
     el player + label EVENTO en viewports angostos. Toma el espacio entre la
     label y los actions, y se centra dentro de su flex space. */
  body.ghc-active .top-bar .brand {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    order: 3 !important;
    flex: 1 1 auto;
    display: flex !important;
    justify-content: center;
    align-items: center;
    min-width: 0;
    z-index: 6;
  }
  body.ghc-active .top-bar .brand .brand-logo {
    height: 42px !important;
    width: auto !important;
    filter: drop-shadow(0 0 14px rgba(233,185,99,0.55)) drop-shadow(0 2px 6px rgba(0,0,0,0.6));
    transition: filter 0.3s;
  }
  /* Ocultar el divider que está al lado del logo (no encaja con el centrado) */
  body.ghc-active .top-bar .top-divider { display: none !important; }
  /* Ocultar gold/gems/eldor del top-bar (vitales y recursos van en otro lado) */
  body.ghc-active .top-bar .player-resources { display: none !important; }
  /* Mantener visible el avatar del player y los botones de acción.
     2026-05-09: orden flex con player a la IZQ (order:1), label EVENTO al
     lado (order:2), logo absoluto al centro, actions a la derecha (order:99). */
  body.ghc-active .top-bar .top-player {
    order: 1 !important;
    margin-right: 0 !important;
    flex-shrink: 0;
  }
  body.ghc-active .top-bar .ghc-topbar-label {
    order: 2 !important;
  }
  body.ghc-active .top-bar .top-actions {
    order: 99 !important;
    margin-left: auto !important;
  }

  /* ---- Label "EVENTO · La Cueva del Clan" inyectado dinámicamente ---- */
  .ghc-topbar-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: linear-gradient(180deg, rgba(110,50,200,0.55), rgba(60,20,120,0.65));
    border: 1px solid rgba(180,140,255,0.55);
    border-radius: 99px;
    box-shadow:
      0 0 18px rgba(150,80,255,0.4),
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 -1px 0 rgba(0,0,0,0.3);
    color: #fff;
    font-family: var(--font-title, sans-serif);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    pointer-events: none;
  }
  .ghc-topbar-label i {
    font-size: 14px;
    color: #ffd56a;
    filter: drop-shadow(0 0 6px rgba(255,200,100,0.7));
  }
  .ghc-topbar-label-eyebrow {
    font-size: 9.5px;
    color: rgba(255,213,106,0.95);
  }
  .ghc-topbar-label-sep {
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    margin: 0 -2px;
  }
  .ghc-topbar-label-title {
    font-size: 11px;
    color: #fff;
  }
  /* Mobile: ocultar label en topbar (no entra) */
  @media (max-width: 900px) {
    .ghc-topbar-label { display: none !important; }
  }

  /* ---- Game-shell: sacar la columna del nav (nav está oculto) ---------- */
  body.ghc-active .game-shell {
    grid-template-columns: 1fr 320px !important;
    grid-template-areas:
      "top top"
      "main side" !important;
    background: linear-gradient(180deg, #0a0414 0%, #0d0820 60%, #0a0414 100%) !important;
  }

  /* ---- Nav-sidebar: oculto en cueva ----------------------------------- */
  body.ghc-active .nav-sidebar { display: none !important; }

  /* ---- Side-panel: SOLO el chat ---------------------------------------- */
  body.ghc-active .side-panel {
    padding: 0 !important;
    background: linear-gradient(180deg, rgba(15,8,28,0.95), rgba(8,4,18,0.97)) !important;
    border-left: 1px solid rgba(233,185,99,0.22) !important;
    box-shadow: -4px 0 18px rgba(0,0,0,0.5);
  }
  /* Ocultar todos los blocks excepto el último (que es el chat) */
  body.ghc-active .side-panel > .side-block:not(:last-child) {
    display: none !important;
  }
  /* El chat ocupa toda la altura disponible con animación de expansión */
  body.ghc-active .side-panel > .side-block:last-child {
    flex: 1 1 100% !important;
    min-height: 100% !important;
    height: 100% !important;
    border: none !important;
    animation: ghc-chat-expand 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes ghc-chat-expand {
    from {
      opacity: 0;
      transform: translateY(-12px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  /* Ocultar pestañas de zone y updates: solo Global + Clan */
  body.ghc-active .chat-widget-tab[data-ch="zone"],
  body.ghc-active .chat-widget-tab[data-ch="updates"] {
    display: none !important;
  }
  /* Estilos del chat más "gameish" cuando está expandido */
  body.ghc-active .side-panel .side-title {
    background: linear-gradient(180deg, rgba(60,30,90,0.45), rgba(15,8,28,0.6));
    border-bottom: 1px solid rgba(233,185,99,0.22);
    padding: 12px 16px !important;
    margin: 0 !important;
    font-size: 12px !important;
    letter-spacing: 0.16em;
    color: var(--ghc-gold, #e9b963) !important;
  }

  /* ---- PANEL UNIFICADO de la izquierda (lobby + rankings + skills) ----
     2026-05-09: ahora SIEMPRE visible en PC, ocupa toda la columna izquierda
     desde el margen del viewport hasta el borde izquierdo del frame. */
  .ghc-pc-lobby-host {
    position: fixed;
    top: 64px;                                  /* pegado abajo del topbar */
    left: 12px;
    bottom: 0;
    /* Right edge a 6px del borde izq del frame.
       Frame: height = calc(100vh - 64px), aspect 3/4 → half-width = 37.5vh - 24px
       Frame DESPLAZADO 70px a la IZQ del centro (transform: translateX(-50% - 70px))
       Borde izq del frame desde viewport-left = (50vw - 70px) - (37.5vh - 24px) = 50vw - 37.5vh - 46px
       → Lobby right edge = 50vw - 37.5vh - 52px (con 6px gap)
       → distancia desde la derecha del viewport = 50vw + 37.5vh + 52px */
    right: calc(50vw + 37.5vh + 52px);
    width: auto;
    z-index: 95;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: linear-gradient(180deg, rgba(20,12,38,0.92), rgba(10,5,22,0.96));
    overflow: hidden;
    pointer-events: auto;
  }
  .ghc-pc-lobby-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 10px;
    background: linear-gradient(180deg, rgba(233,185,99,0.85), rgba(180,130,60,0.85));
    border: 1px solid rgba(255,235,180,0.5);
    border-radius: 8px;
    color: #1a0e2a;
    font-family: var(--font-title, sans-serif);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
    box-shadow: 0 4px 14px rgba(180,130,60,0.45);
    flex-shrink: 0;
  }
  .ghc-pc-lobby-back:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(233,185,99,0.6);
    filter: brightness(1.08);
  }
  .ghc-pc-lobby-back i { font-size: 16px; }
  .ghc-pc-lobby-rank-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid rgba(233,185,99,0.18);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(233,185,99,0.4) transparent;
  }
  .ghc-pc-lobby-rank-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-title, sans-serif);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ghc-gold, #e9b963);
    padding: 8px 4px 4px;
  }
  .ghc-pc-lobby-rank-title i { font-size: 12px; filter: drop-shadow(0 0 5px rgba(233,185,99,0.5)); }
  .ghc-pc-lobby-rank-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(15,8,28,0.55);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    font-size: 11px;
    color: #f4ecd8;
  }
  .ghc-pc-lobby-rank-row.is-top {
    background: linear-gradient(90deg, rgba(233,185,99,0.18), rgba(15,8,28,0.55));
    border-color: rgba(233,185,99,0.4);
  }
  .ghc-pc-lobby-rank-pos {
    font-family: var(--font-title, sans-serif);
    font-weight: 800;
    font-size: 12px;
    color: var(--ghc-gold, #e9b963);
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
  }
  .ghc-pc-lobby-rank-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
  }
  .ghc-pc-lobby-rank-score {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    color: var(--ghc-cyan, #6cd4ff);
    flex-shrink: 0;
  }
  .ghc-pc-lobby-rank-section::-webkit-scrollbar { width: 5px; }
  .ghc-pc-lobby-rank-section::-webkit-scrollbar-thumb {
    background: rgba(233,185,99,0.4);
    border-radius: 2px;
  }
  .ghc-pc-lobby-rank-empty {
    padding: 8px;
    color: rgba(244,236,216,0.5);
    font-size: 10px;
    font-style: italic;
    text-align: center;
  }

  /* ---- Cuando el panel lobby está visible (viewport >=1700px),
          el panel de skills se corre a su derecha (12+200+8 = 220px) ---- */
  @media (min-width: 1700px) {
    body.ghc-active .ghc-pc-skills-host {
      left: 220px !important;
    }
  }

  /* ---- FRAME: que NO tape el topbar (top:64px) ----
     Antes: .ghc-frame era top:0 height:100vh y cubría TODA la pantalla,
     incluyendo el topbar (que tiene z-index menor). Ahora arrancamos abajo
     del topbar. El aspect-ratio 3/4 sigue funcionando con la nueva height,
     así que el frame queda un poco más chico pero ya no tapa nada. */
  /* Frame: top:64 abajo del topbar + DESPLAZADO 70px a la IZQ del centro
     (-30 antes + -40 más por user feedback "10% más angosta la columna izq").
     La columna izq pierde 40px, la columna de aliados gana 40px. */
  body.ghc-active .ghc-frame {
    top: 64px !important;
    height: calc(100vh - 64px) !important;
    height: calc(100dvh - 64px) !important;
    transform: translateX(calc(-50% - 70px)) !important;
  }

  /* Recalcular inner edges con el shift de 70px a la izq:
     - Frame center @ 50vw - 70px
     - Frame half-width = 37.5vh - 24px
     - Frame right edge from viewport-left = (50vw - 70px) + (37.5vh - 24px) = 50vw + 37.5vh - 94px
     - Frame left edge = (50vw - 70px) - (37.5vh - 24px) = 50vw - 37.5vh - 46px
     - Allies left = frame.right + 6 = 50vw + 37.5vh - 88px
     - Lobby right (from viewport-right) = 100vw - (frame.left - 6) = 50vw + 37.5vh + 52px */
  body.ghc-active .ghc-pc-ally-host {
    left: calc(50vw + 37.5vh - 88px) !important;
    top: 78px !important;
  }
  body.ghc-active .ghc-pc-skills-host {
    right: calc(50vw + 37.5vh + 52px) !important;
  }

  /* ---- ACTION BAR: botón de ATAQUE redondo absolute al bottom-right ---- */
  /* Sacamos .ghc-actions del flex column del frame y lo posicionamos absolute
     en la esquina inferior derecha del frame. Lo mismo con .ghc-self-stats:
     pasa a ser una pill flotante a la izquierda del botón. */
  body.ghc-active .ghc-actions {
    position: absolute !important;
    right: 22px !important;
    bottom: 22px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    gap: 0 !important;
    width: auto !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    z-index: 7;
  }
  body.ghc-active .ghc-attack-btn {
    width: 110px !important;
    height: 110px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: radial-gradient(circle at 30% 25%, rgba(255,90,100,0.98), rgba(160,30,50,0.98)) !important;
    border: 3px solid rgba(255,210,190,0.65) !important;
    box-shadow:
      0 8px 28px rgba(180,30,50,0.6),
      0 0 0 5px rgba(255,90,100,0.18),
      inset 0 2px 8px rgba(255,255,255,0.2) !important;
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  }
  body.ghc-active .ghc-attack-btn:hover:not(:disabled) {
    transform: scale(1.06) translateY(-2px);
    box-shadow:
      0 12px 34px rgba(255,90,100,0.75),
      0 0 0 6px rgba(255,120,140,0.28),
      inset 0 2px 8px rgba(255,255,255,0.28) !important;
    filter: brightness(1.1);
  }
  body.ghc-active .ghc-attack-btn:active:not(:disabled) {
    transform: scale(0.95);
  }
  body.ghc-active .ghc-attack-btn i { font-size: 38px !important; margin: 0 !important; }
  body.ghc-active .ghc-attack-btn span {
    font-size: 10px !important;
    letter-spacing: 0.14em;
    margin-top: 3px;
    font-weight: 800;
  }

  /* ---- HP/MP pill compacta a la IZQUIERDA del botón redondo ---- */
  body.ghc-active .ghc-self-stats {
    position: absolute !important;
    right: 144px !important;       /* botón = 110 + 22 right + 12 gap = 144 */
    bottom: 24px !important;
    width: 240px !important;
    flex-direction: column !important;
    gap: 6px !important;
    background: linear-gradient(180deg, rgba(15,8,28,0.92), rgba(8,4,18,0.96)) !important;
    border: 1px solid rgba(233,185,99,0.35) !important;
    border-radius: 14px !important;
    padding: 9px 12px !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(233,185,99,0.1);
    backdrop-filter: blur(8px);
    z-index: 7;
  }
  /* Las barras dentro de la pill: HP arriba, MP abajo, compactas */
  body.ghc-active .ghc-self-stats .ghc-self-bar {
    gap: 8px !important;
  }
  body.ghc-active .ghc-self-stats .ghc-self-bar-icon {
    width: 22px !important;
    height: 22px !important;
    border-width: 1.5px !important;
  }
  body.ghc-active .ghc-self-stats .ghc-self-bar-icon i {
    font-size: 11px !important;
  }
  body.ghc-active .ghc-self-stats .ghc-self-bar-track {
    height: 14px !important;
    flex: 1 !important;
  }
  body.ghc-active .ghc-self-stats .ghc-self-bar-text {
    font-size: 10px !important;
  }

  /* =====================================================================
     UNIFICACIÓN VISUAL DE LOS 4 PANELES (lobby + skills + ally + chat)
     Todos comparten el mismo background, mismo header, sin border-radius,
     y separadores sutiles 1px (border-left/right) entre paneles.
     Ocupan toda la altura disponible (top:64 → bottom:0) para que parezca
     UNA sola pieza con divisiones internas, no 4 cajas separadas.
     ===================================================================== */

  /* Variable común — el SAME background para todos los paneles */
  body.ghc-active .ghc-pc-lobby-host,
  body.ghc-active .ghc-pc-skills-host,
  body.ghc-active .ghc-pc-ally-host,
  body.ghc-active .side-panel {
    background: linear-gradient(180deg, rgba(20,12,38,0.92) 0%, rgba(10,5,22,0.96) 100%) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-top: none !important;
    border-bottom: none !important;
  }
  /* Bordes laterales 1px sutiles (apenas visibles, solo división) */
  body.ghc-active .ghc-pc-lobby-host {
    border-left: 1px solid rgba(233,185,99,0.12) !important;
    border-right: 1px solid rgba(233,185,99,0.12) !important;
    top: 64px !important;
    bottom: 0 !important;
    /* padding: 0 — los sub-paneles internos manejan su propio padding ahora */
    padding: 0 !important;
  }
  body.ghc-active .ghc-pc-skills-host {
    border-left: 1px solid rgba(233,185,99,0.12) !important;
    border-right: 1px solid rgba(233,185,99,0.12) !important;
    top: 64px !important;
    bottom: 0 !important;
    max-height: none !important;
  }
  body.ghc-active .ghc-pc-ally-host {
    border-left: 1px solid rgba(233,185,99,0.12) !important;
    border-right: 1px solid rgba(233,185,99,0.12) !important;
    top: 64px !important;
    bottom: 0 !important;
  }
  body.ghc-active .side-panel {
    border-left: 1px solid rgba(233,185,99,0.12) !important;
  }

  /* Headers UNIFICADOS — mismo estilo en los 4 paneles (gold uppercase) */
  body.ghc-active .ghc-pc-skills-header,
  body.ghc-active .ghc-pc-ally-header,
  body.ghc-active .side-panel .side-title {
    background: linear-gradient(180deg, rgba(40,22,68,0.5), rgba(15,8,28,0.7)) !important;
    border-bottom: 1px solid rgba(233,185,99,0.18) !important;
    color: var(--ghc-gold, #e9b963) !important;
    font-family: var(--font-title, sans-serif) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    flex-shrink: 0;
  }
  body.ghc-active .ghc-pc-skills-header i,
  body.ghc-active .ghc-pc-ally-header i,
  body.ghc-active .side-panel .side-title i {
    color: var(--ghc-gold, #e9b963) !important;
    filter: drop-shadow(0 0 6px rgba(233,185,99,0.5)) !important;
    font-size: 14px !important;
  }
  /* Skills panel: en vez de cyan, usar gold (unificación) */
  body.ghc-active .ghc-pc-skills-list .ghc-skill-btn {
    background: linear-gradient(180deg, rgba(40,22,68,0.6), rgba(15,8,28,0.6)) !important;
    border: 1px solid rgba(233,185,99,0.18) !important;
  }
  body.ghc-active .ghc-pc-skills-list .ghc-skill-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(60,30,90,0.7), rgba(20,12,40,0.7)) !important;
    border-color: rgba(233,185,99,0.35) !important;
  }
  body.ghc-active .ghc-pc-skills-list .ghc-skill-name {
    color: var(--ghc-text, #f4ecd8) !important;
  }

  /* Lobby panel — ahora coordinado con los demás (sin background pesado) */
  .ghc-pc-lobby-back {
    background: linear-gradient(180deg, rgba(40,22,68,0.7), rgba(15,8,28,0.8)) !important;
    border: 1px solid rgba(233,185,99,0.35) !important;
    color: var(--ghc-gold, #e9b963) !important;
    box-shadow: none !important;
    padding: 11px 10px !important;
    font-size: 11px !important;
  }
  .ghc-pc-lobby-back:hover {
    background: linear-gradient(180deg, rgba(60,30,90,0.85), rgba(25,12,40,0.9)) !important;
    border-color: rgba(233,185,99,0.55) !important;
    box-shadow: 0 0 14px rgba(233,185,99,0.2) !important;
    filter: none !important;
    transform: none !important;
  }
  .ghc-pc-lobby-rank-section {
    gap: 4px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(233,185,99,0.12) !important;
  }
  /* Lobby rank titles — mismo estilo que los headers de los demás paneles */
  body.ghc-active .ghc-pc-lobby-rank-title {
    background: linear-gradient(180deg, rgba(40,22,68,0.5), rgba(15,8,28,0.7)) !important;
    border-bottom: 1px solid rgba(233,185,99,0.18) !important;
    border-top: 1px solid rgba(233,185,99,0.06) !important;
    color: var(--ghc-gold, #e9b963) !important;
    padding: 10px 8px 8px !important;
    font-size: 10.5px !important;
    margin: 6px -12px 4px !important;     /* overshoot al ancho total */
    letter-spacing: 0.18em !important;
  }
  body.ghc-active .ghc-pc-lobby-rank-title:first-of-type {
    margin-top: 0 !important;
  }
  .ghc-pc-lobby-rank-row {
    gap: 9px !important;
    padding: 7px 9px !important;
    font-size: 11.5px !important;
    margin-bottom: 1px;
    transition: transform 0.15s, background 0.15s;
  }
  .ghc-pc-lobby-rank-row:hover {
    transform: translateX(2px);
    background: rgba(40,20,70,0.65);
  }
  .ghc-pc-lobby-rank-row.is-top {
    background: linear-gradient(90deg, rgba(233,185,99,0.22), rgba(15,8,28,0.55));
  }
  .ghc-pc-lobby-rank-row.is-me {
    border-color: rgba(108,212,255,0.55) !important;
    box-shadow: 0 0 12px rgba(108,212,255,0.25);
  }
  .ghc-pc-lobby-rank-pos {
    font-size: 13px !important;
    min-width: 16px !important;
  }
  .ghc-pc-lobby-rank-row.is-top .ghc-pc-lobby-rank-pos {
    text-shadow: 0 0 6px rgba(233,185,99,0.6);
  }
  .ghc-pc-lobby-rank-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(20,12,40,0.92);
    background-size: cover;
    background-position: center;
    border: 1.5px solid rgba(233,185,99,0.4);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }
  .ghc-pc-lobby-rank-row.is-top .ghc-pc-lobby-rank-avatar {
    border-color: rgba(233,185,99,0.7);
    box-shadow: 0 0 8px rgba(233,185,99,0.4);
  }
  .ghc-pc-lobby-rank-avatar-fallback {
    font-family: var(--font-title, sans-serif);
    font-weight: 800;
    font-size: 11px;
    color: var(--ghc-gold, #e9b963);
    background: radial-gradient(circle at 35% 30%, rgba(80,40,140,0.95) 0%, rgba(30,15,60,0.95) 70%);
  }

  /* ---- Ocultar globo de chat (FAB) en PC unified ----
     El chat ya está expandido a la derecha en el side-panel, el FAB sobra. */
  body.ghc-active .ghc-chat-fab,
  body.ghc-active #ghc-chat-overlay-host { display: none !important; }

  /* ---- Ocultar el HEADER del frame en PC ----
     Antes mostraba: < (volver), Piso N, [tag] clan, kills counter.
     Ahora todo eso está en la columna unificada de la izq y el badge del
     piso/kills se muestra en otro lado. */
  body.ghc-active .ghc-frame > .ghc-header { display: none !important; }

  /* ---- Defensivo: ocultar el panel viejo de skills si quedara mounteado
          (ahora skills viven dentro de #ghc-pc-lobby-host) ---- */
  body.ghc-active .ghc-pc-skills-host { display: none !important; }

  /* ---- Layout interno de la columna unificada ----
     Estructura:
       [Volver al Lobby]               (fixed top)
       [Sección rankings]              (flex:1, scroll)
         clanes (con piso)
         top daño
       [Sección skills]                (anchored bottom, max 50vh)
   */
  .ghc-pc-lobby-host > .ghc-pc-lobby-back {
    flex-shrink: 0;
    margin: 12px 12px 8px;
  }
  .ghc-pc-lobby-rank-section {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(233,185,99,0.4) transparent;
  }
  .ghc-pc-lobby-rank-section::-webkit-scrollbar { width: 5px; }
  .ghc-pc-lobby-rank-section::-webkit-scrollbar-thumb {
    background: rgba(233,185,99,0.4);
    border-radius: 2px;
  }
  .ghc-pc-lobby-skills-section {
    flex-shrink: 0;
    border-top: 1px solid rgba(233,185,99,0.18);
    background: linear-gradient(180deg, rgba(15,8,28,0.45), rgba(8,4,18,0.7));
    padding: 0 12px 12px;
    max-height: 50vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .ghc-pc-lobby-skills-section .ghc-pc-skills-list {
    flex: 1;
    overflow-y: auto;
    padding-top: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(233,185,99,0.4) transparent;
  }
  .ghc-pc-lobby-skills-section .ghc-pc-skills-list::-webkit-scrollbar { width: 5px; }
  .ghc-pc-lobby-skills-section .ghc-pc-skills-list::-webkit-scrollbar-thumb {
    background: rgba(233,185,99,0.4);
    border-radius: 2px;
  }

  /* ---- Pill del piso del clan (ranking) ---- */
  .ghc-pc-lobby-rank-floor {
    background: linear-gradient(180deg, rgba(60,30,90,0.7), rgba(40,18,68,0.85));
    border: 1px solid rgba(233,185,99,0.4);
    border-radius: 5px;
    padding: 2px 7px;
    font-family: var(--font-mono, monospace);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ghc-gold, #e9b963);
    letter-spacing: 0.05em;
    flex-shrink: 0;
    min-width: 30px;
    text-align: center;
  }
  body.ghc-active .ghc-pc-lobby-rank-row.is-me .ghc-pc-lobby-rank-floor {
    background: linear-gradient(180deg, rgba(108,212,255,0.4), rgba(40,80,160,0.5));
    border-color: rgba(108,212,255,0.7);
    color: var(--ghc-cyan, #6cd4ff);
  }
  body.ghc-active .ghc-pc-lobby-rank-row.is-top .ghc-pc-lobby-rank-floor {
    background: linear-gradient(180deg, rgba(233,185,99,0.4), rgba(160,110,40,0.5));
    color: #fff;
    text-shadow: 0 0 4px rgba(233,185,99,0.7);
  }

  /* ---- Chat (side-panel): fluir natural, sin bordes redundantes ---- */
  body.ghc-active .side-panel > .side-block:last-child {
    background: transparent !important;
  }
  body.ghc-active .chat-widget {
    background: transparent !important;
    border: none !important;
  }
  body.ghc-active .chat-widget-tabs {
    background: linear-gradient(180deg, rgba(15,8,28,0.6), rgba(8,4,18,0.7)) !important;
    border-bottom: 1px solid rgba(233,185,99,0.12) !important;
  }
  body.ghc-active .chat-widget-tab {
    color: rgba(244,236,216,0.55) !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 10.5px !important;
  }
  body.ghc-active .chat-widget-tab.active {
    color: var(--ghc-gold, #e9b963) !important;
    border-bottom: 2px solid var(--ghc-gold, #e9b963) !important;
  }
}

/* =====================================================================
   FIN UNIFIED CAVE LAYOUT v1
   ===================================================================== */