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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* =====================================================================
   8.1 MOBILE LAYOUT — Reorganización pedida 2026-06-07:
   - Chat FAB encima del botón Ataque (ambos a la derecha, apilados).
   - Skills en grilla 2-3 filas a la IZQUIERDA del bloque chat+atk
     (en vez de scroll horizontal de 1 fila que causaba overlap en
     pantallas chicas).
   ===================================================================== */
@media (max-width: 900px) {
  /* CHAT FAB: arriba del botón Ataque (mismo eje vertical, a la derecha).
     Sobreescribe la regla de guild_hall_combat.css que lo ponía a la izq. */
  body.ghc-active #ghc-chat-overlay-host .ghc-chat-fab {
    right: 14px !important;
    left: auto !important;
    bottom: 110px !important;
    width: 52px !important;
    height: 52px !important;
  }

  /* SKILLS ROW: grilla con wrap, alineadas a la derecha (pegadas al atk),
     filas adicionales crecen HACIA ARRIBA (wrap-reverse). */
  .ghc-frame.ghcv2 .ghc-skills-row {
    flex-direction: row !important;
    flex-wrap: wrap-reverse !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    gap: 6px !important;
    /* 3 filas máx: 3*56 + 2*6 = 180 + holgura */
    max-height: 184px !important;
    /* Sin scroll horizontal — todo cabe en la grilla */
    overflow-x: visible !important;
    overflow-y: visible !important;
    touch-action: auto !important;
    overscroll-behavior-x: auto !important;
    padding: 0 !important;
  }
  .ghc-frame.ghcv2 .ghc-skills-row::-webkit-scrollbar { display: none; }
  .ghc-frame.ghcv2 .ghc-skills-row .ghc-skill-btn {
    touch-action: auto !important;
    flex-shrink: 0 !important;
  }
  .ghc-frame.ghcv2 .ghc-skills-row .ghcv2-skill-img,
  .ghc-frame.ghcv2 .ghc-skills-row .ghc-skill-cost,
  .ghc-frame.ghcv2 .ghc-skills-row .ghc-skill-cd,
  .ghc-frame.ghcv2 .ghc-skills-row .ghc-skill-name {
    touch-action: auto !important;
    pointer-events: none;
  }
}

/* Sub-600: el atk pasa a 70x70 (regla V1), reajustar chat FAB acorde
   (70 + 18 bottom + ~14 gap ≈ 102). Skills 50x50 → max-height menor. */
@media (max-width: 600px) {
  body.ghc-active #ghc-chat-overlay-host .ghc-chat-fab {
    bottom: 102px !important;
  }
  .ghc-frame.ghcv2 .ghc-skills-row {
    /* 3 filas de 50 + 2*6 = 162 + holgura */
    max-height: 168px !important;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Override del inline `top` que V1 _renderAllies setea en cada .ghc-ally.
     transform: translate(-50%, -100%) ancla el bottom del sprite al top:%,
     entonces 78% deja al sprite en el tercio inferior, arriba del HUD/skills/ATQ. */
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-allies > .ghc-ally.ghcv2-ally,
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-allies > .ghc-ally {
    top: 78% !important;
  }

  /* 2026-06-14d: Ally sprite escala con el ancho del viewport (vw) — pisos más bajos
     para que en PCs angostas (1100-1300) se achiquen y no se superpongan. */
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-ally .ghc-ally-sprite {
    width: clamp(65px, 8vw, 140px) !important;
    height: clamp(85px, 10.5vw, 180px) !important;
  }

  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-ally {
    width: clamp(75px, 9vw, 160px) !important;
  }

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

  /* 2026-06-14h: Mob escala más agresivo en pantallas chicas (piso bajo + vw chico),
     pero mantiene tope para pantallas grandes. */
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob-zone .ghc-mob-sprite,
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob-zone .ghc-mob-sprite img,
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob-zone img {
    width: clamp(90px, 16vw, 320px) !important;
    height: auto !important;
    max-height: clamp(120px, 21vw, 400px) !important;
    object-fit: contain !important;
  }

  /* 2026-06-14g: Reorganizar mob → [badge] [nombre] ARRIBA del sprite,
     [bar HP] superpuesta a los pies del sprite, [debuffs] debajo.
     Truco: display:contents en .ghc-mob-hp desarma su box para que sus hijos
     (badge, nombre, bar, debuffs) actúen como hermanos del sprite en el flex. */
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob > .ghc-mob-hp {
    display: contents !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob > .ghc-mob-hp > .ghcv2-mob-tier {
    order: 1 !important;
    align-self: center !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob > .ghc-mob-hp > .ghc-mob-name {
    order: 2 !important;
    align-self: center !important;
    width: auto !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob > .ghc-mob-sprite {
    order: 3 !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob > .ghc-mob-hp > .ghc-mob-hp-bar {
    order: 4 !important;
    margin-top: -38px !important;
    position: relative !important;
    z-index: 5 !important;
    width: 88% !important;
    max-width: 360px !important;
    align-self: center !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob > .ghc-mob-hp > .ghc-mob-debuffs {
    order: 5 !important;
    align-self: center !important;
  }
}

/* 2026-06-14e: Allies suben gradualmente en viewports angostos para no chocar
   con el cluster HUD/skills/ATQ (que toma altura ~fija en px). El mob queda en 25%. */
@media (min-width: 901px) and (max-width: 1500px) {
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-allies > .ghc-ally.ghcv2-ally,
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-allies > .ghc-ally {
    top: 73% !important;
  }
}

@media (min-width: 901px) and (max-width: 1250px) {
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-allies > .ghc-ally.ghcv2-ally,
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-allies > .ghc-ally {
    top: 68% !important;
  }
}

@media (min-width: 901px) and (max-width: 1050px) {
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-allies > .ghc-ally.ghcv2-ally,
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-allies > .ghc-ally {
    top: 63% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   2026-06-14: VIDEO LOOP DE FONDO (tier lava 1-5) + FLASH MASK
   El video se superpone al PNG (que queda de fallback en case de slow load).
   El flash dispara al loop point (cubre el seam) + 1 random suave en el medio.
═══════════════════════════════════════════════════════════════════ */
body.ghcv2-active .ghc-frame.ghcv2 .ghc-stage-bg {
  /* NO tocar position aquí — V1 ya lo pone position:absolute; inset:0
     que es lo que le da dimensiones. Solo añadir overflow para que el
     video clipee bien dentro del frame. */
  overflow: hidden;
}

/* Damage popups por arriba del sprite del mob (z-index 2 en V2) */
body.ghcv2-active .ghc-frame.ghcv2 .ghc-dmg-popups {
  z-index: 50 !important;
}
body.ghcv2-active .ghc-frame.ghcv2 .ghc-dmg-popup {
  z-index: 51 !important;
}

body.ghcv2-active .ghc-frame.ghcv2 .ghc-stage-bg .ghcv2-bg-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 10 !important;  /* arriba del bg image y del ::after overlay */
  pointer-events: none !important;
  display: block !important;
  /* Suavizar bordes en caso de aspect ratio mismatch */
  filter: saturate(1.05) contrast(1.02);
  /* Transición para el crossfade entre videoA / videoB */
  transition: opacity 1s ease;
}

body.ghcv2-active .ghc-frame.ghcv2 .ghc-stage-bg .ghcv2-bg-flash {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at center,
      rgba(255, 240, 200, 0.85) 0%,
      rgba(255, 160, 80, 0.55) 25%,
      rgba(255, 100, 40, 0.25) 50%,
      transparent 75%);
  mix-blend-mode: screen;
}

body.ghcv2-active .ghc-frame.ghcv2 .ghc-stage-bg .ghcv2-bg-flash.is-flashing-strong {
  animation: ghcv2-bg-flash-strong 500ms ease-out;
}
body.ghcv2-active .ghc-frame.ghcv2 .ghc-stage-bg .ghcv2-bg-flash.is-flashing-soft {
  animation: ghcv2-bg-flash-soft 650ms ease-out;
}

@keyframes ghcv2-bg-flash-strong {
  0%   { opacity: 0; transform: scale(0.95); }
  10%  { opacity: 1; transform: scale(1.05); }
  30%  { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes ghcv2-bg-flash-soft {
  0%   { opacity: 0; }
  25%  { opacity: 0.5; }
  100% { opacity: 0; }
}

/* 2026-06-14: Mobile — ocultar los 3 drawer cards V2 (comunicación, ranking,
   aliados). Son layout PC; en mobile el chat y demás se acceden por la UI
   nativa mobile. */
@media (max-width: 900px) {
  body.ghcv2-active .ghcv2-drawer,
  body.ghcv2-active .ghcv2-rank-drawer,
  body.ghcv2-active .ghcv2-allies-drawer {
    display: none !important;
  }

  /* Mob sprite mobile: un poco más chico (user feedback "achicale un poquito") */
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob-zone .ghc-mob-sprite,
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob-zone .ghc-mob-sprite img,
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob-zone img {
    width: clamp(110px, 32vw, 200px) !important;
    height: auto !important;
    max-height: clamp(140px, 42vw, 250px) !important;
    object-fit: contain !important;
  }

  /* Mobile log FAB — burbuja arriba del chat FAB (chat está en bottom:110) */
  #ghc-chat-overlay-host .ghcv2-mlog-fab {
    position: absolute;
    bottom: 168px;
    right: 16px;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #5b8db4, #2c5273);
    color: #e8f3ff;
    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 .ghcv2-mlog-fab i { font-size: 20px; }

  /* Panel del log: se desliza desde la derecha. Mucho más corto vertical —
     empieza más abajo del header y termina bien arriba de las skills. */
  #ghc-chat-overlay-host .ghcv2-mlog-panel {
    position: absolute;
    right: 0;
    top: 180px;
    bottom: 200px;
    width: 88vw;
    max-width: 360px;
    background: linear-gradient(180deg, rgba(8,3,16,0.96), rgba(12,5,22,0.94));
    border-left: 1px solid rgba(255,200,120,0.22);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    box-shadow: -10px 0 24px rgba(0,0,0,0.65);
    transform: translateX(105%);
    transition: transform 280ms ease;
    pointer-events: auto;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #ghc-chat-overlay-host .ghcv2-mlog-panel.is-open {
    transform: translateX(0);
  }
  #ghc-chat-overlay-host .ghcv2-mlog-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(255,200,120,0.10), transparent);
    border-bottom: 1px solid rgba(255,200,120,0.22);
  }
  #ghc-chat-overlay-host .ghcv2-mlog-title {
    font-family: var(--font-title, sans-serif);
    font-size: 12px;
    color: #f0c674;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 700;
  }
  #ghc-chat-overlay-host .ghcv2-mlog-close {
    background: transparent;
    border: 1px solid rgba(255,200,120,0.3);
    color: #f0c674;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    padding: 0; cursor: pointer;
    font-size: 14px;
  }
  #ghc-chat-overlay-host .ghcv2-mlog-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
    -webkit-overflow-scrolling: touch;
  }
  /* Battle log cuando vive dentro del panel: cancelar estilos PC heredados */
  #ghc-chat-overlay-host .ghcv2-mlog-body #ghc-pc-battlelog-list {
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    height: auto !important;
    width: 100% !important;
  }
}