/* =====================================================================
 * GUILD HALL COMBAT — PC HORIZONTAL OVERRIDE (V2)
 * 2026-06-14
 * Carga DESPUÉS de guild_hall_combat.css para pisar la layout PC actual.
 * Solo aplica @media (min-width: 901px) — mobile intacto.
 * Rollback: borrar este archivo + quitar <link> del index.html.
 * ===================================================================== */

@media (min-width: 901px) {
  /* ─── Ocultar elementos del shell global mientras estamos en combate ─── */
  body.ghcv2-active .ghc-pc-ally-host,
  body.ghcv2-active .ghc-pc-ally-section,
  body.ghcv2-active .ghc-pc-battlelog-section {
    display: none !important;
  }

  /* Sidebar global (V3 + V2 mobile) ya se oculta por reglas existentes en
     guild_hall_combat.css (fase 3n). Reforzamos por las dudas. */
  body.ghcv2-active .nav-sidebar-v3,
  body.ghcv2-active .side-panel,
  body.ghcv2-active .nav-sidebar {
    display: none !important;
  }
  body.ghcv2-active .game-shell {
    grid-template-columns: 1fr !important;
  }

  /* ─── Frame fullscreen edge-to-edge ─── */
  body.ghcv2-active .ghc-frame.ghcv2 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;           /* mata translateX(-50%) del base */
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    border-left: none !important;         /* mata bordes laterales del base */
    border-right: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    display: grid;
    grid-template-rows: 56px 1fr;          /* header · stage; actions overlay absolute */
    background: #0a0414;
    z-index: 100;
  }

  /* ─── HEADER: 1 fila slim arriba ─── */
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-header {
    position: relative !important;
    z-index: 50;
    height: 56px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 22px;
    background: linear-gradient(180deg, rgba(20,8,32,0.92), rgba(8,3,16,0.82));
    border-bottom: 1px solid rgba(233,185,99,0.28);
    box-shadow: 0 2px 12px rgba(0,0,0,0.6);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-header-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 0 1 auto;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-header-info > * {
    font-family: var(--font-title, 'Cinzel', serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #f5b342;
    white-space: nowrap;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-header-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-stat-pill {
    background: rgba(233,185,99,0.12);
    border: 1px solid rgba(233,185,99,0.35);
    color: #f5b342;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
  }

  /* Badge "Evento cierra en…" → reubicado DENTRO del header band */
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-event-timer {
    position: absolute !important;
    top: 14px !important;
    right: 220px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    height: 28px;
    padding: 0 14px !important;
    font-size: 11px !important;
    letter-spacing: 0.03em;
    display: flex !important;
    align-items: center !important;
    gap: 6px;
    border-radius: 999px;
    z-index: 55 !important;
    box-shadow: 0 3px 10px rgba(110,58,204,0.45) !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-event-timer i { font-size: 13px !important; }

  /* ─── STAGE: zona principal con bg, mob, aliados, player ─── */
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-stage {
    position: relative;
    grid-row: 2;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-stage-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
  }
  /* Viñeta para integrar con el header/skills */
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at center, transparent 50%, rgba(8,3,16,0.55) 100%),
      linear-gradient(180deg, rgba(8,3,16,0.45) 0%, transparent 18%, transparent 70%, rgba(8,3,16,0.55) 100%);
    z-index: 2;
    pointer-events: none;
  }

  /* ─── MOB: centrado en el stage ─── */
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob-zone {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob-sprite {
    width: 280px !important;
    height: 280px !important;
    margin: 0 !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob-sprite-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob-hp {
    width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob-hp-bar {
    position: relative;
    width: 100%;
    height: 18px;
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(233,185,99,0.4);
    border-radius: 10px;
    overflow: hidden;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #d8475d 0%, #b83344 100%);
    transition: width .3s ease;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob-hp-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    z-index: 2;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-title, 'Cinzel', serif);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-mob-tier {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 2px 7px;
    border-radius: 4px;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-mob-tier.is-boss {
    background: linear-gradient(180deg, #ffd968, #cf7c1c);
    color: #1c0a02;
    border: 1px solid #ffd968;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-mob-tier.is-normal {
    background: rgba(184,51,68,0.85);
    color: #fff;
    border: 1px solid rgba(255,180,180,0.5);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-mob-debuffs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
  }

  /* ─── ALIADOS: 2 filas de 4 a los lados del mob (top stage) ─── */
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-allies {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 8% !important;
    height: auto !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 12px 24px;
    padding: 0 6vw;
    z-index: 4;
    pointer-events: none;
  }
  /* 2026-06-14: NO override del positioning de .ghc-ally — usa el absolute de V1
     y dejá que clan_cave_combat_v2.css setee top:% para acomodarlos en el stage.
     Antes este bloque forzaba position:relative que rompía el layout. */
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-ally-sprite,
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-ally-sprite,
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-ally img,
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-ally img {
    width: 84px !important;
    height: 84px !important;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-ally-name,
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-ally-name {
    font-family: var(--font-title, 'Cinzel', serif);
    font-size: 11px;
    font-weight: 700;
    color: #f5b342;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-ally-hp,
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-ally-hp {
    width: 90%;
    max-width: 110px;
    height: 6px;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(233,185,99,0.4);
    border-radius: 4px;
    overflow: hidden;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-ally-hp-fill,
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-ally-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #67d877, #2a9e3a);
  }

  /* ─── PLAYER SELF: centro-abajo del stage, sprite GRANDE ─── */
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-self,
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-self {
    position: absolute !important;
    left: 50% !important;
    bottom: 250px !important;            /* deja espacio para ATQ btn (110px) + skills row (110px) + margen */
    transform: translateX(-50%) !important;
    top: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 6;
    width: auto !important;
    height: auto !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-self img,
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-self img {
    width: 220px !important;
    height: 300px !important;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.8));
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-self-name,
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-self-name {
    font-family: var(--font-title, 'Cinzel', serif);
    font-size: 14px;
    font-weight: 700;
    color: #f5b342;
    background: rgba(0,0,0,0.55);
    padding: 3px 12px;
    border-radius: 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  }
  /* Las barras propias del .ghcv2-self las ocultamos — usamos el card HUD */
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-self-bars,
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-self-bars { display: none !important; }

  /* ─── HUD player: relocalizar #ghc-self-stats junto al action bar ─── */
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats {
    position: absolute !important;
    top: auto !important;
    bottom: 32px !important;              /* alineado con la parte baja del action bar */
    left: 32px !important;
    right: auto !important;
    z-index: 55 !important;
    width: 320px !important;
    max-width: none !important;
    padding: 12px 14px !important;
    background: linear-gradient(180deg, rgba(28,12,42,0.94), rgba(8,3,16,0.88)) !important;
    border: 1.5px solid rgba(233,185,99,0.5) !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.65) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats .ghc-self-bar {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats .ghc-self-bar-icon {
    flex: 0 0 auto !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats .ghc-self-hp .ghc-self-bar-icon { color: #67d877 !important; }
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats .ghc-self-mp .ghc-self-bar-icon { color: #4aa8ff !important; }
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats .ghc-self-bar-track {
    flex: 1 1 auto !important;
    position: relative !important;
    height: 16px !important;
    background: rgba(0,0,0,0.65) !important;
    border: 1px solid rgba(233,185,99,0.35) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats .ghc-self-bar-fill {
    height: 100% !important;
    transition: width .25s ease !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats .ghc-self-hp .ghc-self-bar-fill {
    background: linear-gradient(90deg, #67d877, #2a9e3a) !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats .ghc-self-mp .ghc-self-bar-fill {
    background: linear-gradient(90deg, #4aa8ff, #2c6db8) !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats .ghc-self-bar-text {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
    z-index: 2 !important;
    letter-spacing: 0.03em !important;
  }

  /* ─── ACTIONS WRAPPER: contenedor ATQ + skills, full-width centrado ─── */
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-actions,
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-actions {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 0 18px 0 !important;
    display: flex !important;
    flex-direction: column !important;     /* ATQ arriba, skills abajo */
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    background: linear-gradient(0deg, rgba(8,3,16,0.85), transparent) !important;
    border-top: none !important;
    z-index: 50 !important;
    pointer-events: none;                  /* el wrapper no captura clicks */
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-actions > *,
  body.ghcv2-active .ghc-frame.ghcv2 #ghc-actions > * {
    pointer-events: auto;                  /* los hijos sí */
  }

  /* ─── SKILLS ROW: skills libres, sin marco, wrap a 2 filas si no entran ─── */
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-skills-row {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    max-width: min(1200px, 92vw) !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;             /* 2+ filas en pantallas chicas */
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    overflow: visible !important;
    z-index: 51 !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-skills-row::-webkit-scrollbar { height: 6px; }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-skills-row::-webkit-scrollbar-thumb {
    background: rgba(233,185,99,0.4);
    border-radius: 4px;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-skill,
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-skills-row .ghc-skill {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    border: 1.5px solid rgba(233,185,99,0.45);
    background: linear-gradient(180deg, rgba(28,12,42,0.92), rgba(8,3,16,0.92));
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    position: relative;
    cursor: pointer;
    transition: transform .12s, border-color .12s, box-shadow .12s;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-skill:hover {
    transform: translateY(-2px);
    border-color: #f5b342;
    box-shadow: 0 6px 16px rgba(233,185,99,0.35);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-skill img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-skill .ghc-skill-mp,
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-skill .skill-mp {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #4aa8ff;
    background: rgba(0,0,0,0.75);
    padding: 1px 4px;
    border-radius: 3px;
  }

  /* ATAQUE: imagen botonatacar.png — vive DENTRO de .ghc-actions, centrado */
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-attack-btn {
    position: relative !important;        /* dentro del wrapper flex-column */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 260px !important;
    height: 80px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: url('../assets/img/combat/botonatacar.png?v=1') center / contain no-repeat !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    cursor: pointer;
    z-index: 52;
    transition: transform .15s, filter .15s;
    overflow: hidden;
    align-self: center !important;
  }
  /* Ocultar el ícono espadita + texto "Ataque" dentro del botón */
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-attack-btn > i,
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-attack-btn > span,
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-attack-btn .ph,
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-attack-btn .ph-fill,
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-attack-btn .ph-sword {
    display: none !important;
    visibility: hidden !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-attack-btn:hover:not(:disabled) {
    transform: translateY(-3px) !important;
    filter: brightness(1.12) drop-shadow(0 8px 22px rgba(255,90,90,0.5));
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-attack-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(.4);
  }

  /* ─── Esconder paneles secundarios que el V1 mete en el stage ─── */
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-log-host,
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-clans-panel,
  body.ghcv2-active .ghc-frame.ghcv2 .ghc-topdmg {
    display: none !important;
  }
  /* El .ghc-log ahora vive dentro del drawer — no lo escondemos, lo reseteamos */
  body.ghcv2-active .ghc-frame.ghcv2 #ghcv2-drawer-pane-log #ghc-log {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: visible !important;
  }
  /* El log real PC #ghc-pc-battlelog-list también vive en el drawer */
  body.ghcv2-active .ghc-frame.ghcv2 #ghcv2-drawer-pane-log #ghc-pc-battlelog-list {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px;
  }
  body.ghcv2-active .ghc-frame.ghcv2 #ghcv2-drawer-pane-log .ghc-pc-battlelog-empty {
    color: rgba(244,236,216,0.4) !important;
    font-style: italic;
    font-size: 12px;
    padding: 8px 4px;
    text-align: center;
  }
  /* Cada entry del log: que se vea legible en dark */
  body.ghcv2-active .ghc-frame.ghcv2 #ghcv2-drawer-pane-log #ghc-pc-battlelog-list > *,
  body.ghcv2-active .ghc-frame.ghcv2 #ghcv2-drawer-pane-log #ghc-log > * {
    color: #d4c8a8;
    font-size: 12px;
    line-height: 1.45;
  }

  /* ═════════════════════════════════════════════════════════════════
   * SOCIAL DRAWER — esquina inferior derecha → se expande hacia arriba
   * ═════════════════════════════════════════════════════════════════ */
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer {
    position: absolute !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 70 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer > * { pointer-events: auto; }

  /* Card colapsada (toggle button) */
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-toggle {
    width: 240px;
    height: 56px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(180deg, rgba(28,12,42,0.96), rgba(8,3,16,0.94));
    border: 1.5px solid rgba(233,185,99,0.55);
    border-radius: 12px;
    color: #f5b342;
    font-family: var(--font-title, 'Cinzel', serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,0.6);
    transition: transform .15s, box-shadow .15s, border-color .15s;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-toggle:hover {
    transform: translateY(-2px);
    border-color: #f5b342;
    box-shadow: 0 12px 28px rgba(233,185,99,0.35);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-toggle-icon {
    font-size: 18px;
    line-height: 1;
    color: #f5b342;
  }

  /* Panel expandido */
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-panel {
    position: absolute;
    right: 0;
    bottom: 72px;                                       /* arriba del toggle (56px + 16px gap) */
    width: 420px;
    height: 0;
    max-height: 0;
    background: linear-gradient(180deg, rgba(20,8,32,0.97), rgba(8,3,16,0.96));
    border: 1.5px solid rgba(233,185,99,0.45);
    border-radius: 14px;
    box-shadow: 0 12px 38px rgba(0,0,0,0.7);
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: max-height .35s ease, opacity .25s ease, transform .3s ease;
    display: flex;
    flex-direction: column;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer.is-open .ghcv2-drawer-panel {
    /* 2026-06-14: parar debajo del toggle de Aliados (top:72px, h:48px → 120px + gap 20) */
    height: calc(100vh - 240px);
    max-height: calc(100vh - 240px);
    opacity: 1;
    transform: translateY(0);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer.is-open .ghcv2-drawer-toggle {
    border-color: #f5b342;
    background: linear-gradient(180deg, rgba(44,20,68,0.96), rgba(20,8,32,0.94));
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer.is-open .ghcv2-drawer-toggle-icon {
    transform: rotate(180deg);
    transition: transform .25s;
  }

  /* Header del panel (tabs + close) */
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-header {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 12px 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.35);
    border-bottom: 1px solid rgba(233,185,99,0.3);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-tabs {
    flex: 1 1 auto;
    display: flex;
    gap: 4px;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-tab {
    flex: 1 1 0;
    height: 36px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(244,236,216,0.65);
    font-family: var(--font-title, 'Cinzel', serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-tab:hover {
    color: #f4ecd8;
    background: rgba(233,185,99,0.08);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-tab.is-active {
    color: #f5b342;
    background: rgba(233,185,99,0.15);
    border-color: rgba(233,185,99,0.45);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid rgba(233,185,99,0.3);
    border-radius: 6px;
    color: #f5b342;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-close:hover {
    background: rgba(255,90,90,0.2);
    border-color: #ff5a5a;
    color: #ff9090;
  }

  /* Body del panel: contiene los 3 panes */
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-pane {
    display: none;
    position: absolute;
    inset: 0;
    padding: 12px 14px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-pane.is-active {
    display: block;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-pane::-webkit-scrollbar { width: 6px; }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-pane::-webkit-scrollbar-thumb {
    background: rgba(233,185,99,0.35);
    border-radius: 4px;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-soon {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(244,236,216,0.4);
    font-style: italic;
    font-size: 13px;
    text-align: center;
    padding: 24px;
  }

  /* Chat-widget embebido en el drawer: ocupar todo el pane */
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-pane #chat-widget,
  body.ghcv2-active .ghc-frame.ghcv2 #chat-widget.ghcv2-chat-embedded {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Ocultar las tabs internas del chat-widget — el drawer ya las maneja */
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-pane .chat-widget-tabs {
    display: none !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-pane .chat-widget-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-pane .chat-widget-input {
    flex: 0 0 auto !important;
  }
  /* Cuando el pane "Log" está activo, el chat-widget vive en otro pane (oculto).
     Aseguramos que no se vea fugazmente si el browser hace flicker. */
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-pane:not(.is-active) #chat-widget {
    display: none !important;
  }

  /* ═════════════════════════════════════════════════════════════════
   * RANKING DRAWER — esquina superior izquierda → expande hacia abajo
   * Muestra Top 5 Clanes + Top 10 Daño del evento activo
   * ═════════════════════════════════════════════════════════════════ */
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-drawer {
    position: absolute !important;
    left: 24px !important;
    top: 72px !important;                              /* debajo del header (56px) + gap */
    z-index: 70 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    pointer-events: none;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-drawer > * { pointer-events: auto; }

  /* Card colapsada (toggle button) */
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-toggle {
    width: 220px;
    height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, rgba(28,12,42,0.96), rgba(8,3,16,0.94));
    border: 1.5px solid rgba(233,185,99,0.55);
    border-radius: 12px;
    color: #f5b342;
    font-family: var(--font-title, 'Cinzel', serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,0.6);
    transition: transform .15s, box-shadow .15s, border-color .15s;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-toggle:hover {
    transform: translateY(-1px);
    border-color: #f5b342;
    box-shadow: 0 10px 26px rgba(233,185,99,0.3);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-toggle-label {
    flex: 1 1 auto;
    text-align: left;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-toggle-icon {
    font-size: 14px;
    color: #f5b342;
  }

  /* Panel expandido (hacia abajo) */
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-panel {
    position: absolute;
    left: 0;
    top: 56px;                                          /* debajo del toggle (48px) + 8px gap */
    width: 360px;
    height: 0;
    max-height: 0;
    background: linear-gradient(180deg, rgba(20,8,32,0.97), rgba(8,3,16,0.96));
    border: 1.5px solid rgba(233,185,99,0.45);
    border-radius: 14px;
    box-shadow: 0 12px 38px rgba(0,0,0,0.7);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition: max-height .35s ease, opacity .25s ease, transform .3s ease;
    display: flex;
    flex-direction: column;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-drawer.is-open .ghcv2-rank-panel {
    height: min(640px, calc(100vh - 200px));
    max-height: min(640px, calc(100vh - 200px));
    opacity: 1;
    transform: translateY(0);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-drawer.is-open .ghcv2-rank-toggle-icon {
    transform: rotate(180deg);
    transition: transform .25s;
  }

  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-header {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 12px 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,0,0,0.35);
    border-bottom: 1px solid rgba(233,185,99,0.3);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-title {
    color: #f5b342;
    font-family: var(--font-title, 'Cinzel', serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-close {
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid rgba(233,185,99,0.3);
    border-radius: 6px;
    color: #f5b342;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-close:hover {
    background: rgba(255,90,90,0.2);
    border-color: #ff5a5a;
  }

  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px 12px;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-body::-webkit-scrollbar { width: 6px; }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-body::-webkit-scrollbar-thumb {
    background: rgba(233,185,99,0.35);
    border-radius: 4px;
  }

  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-section {
    margin-bottom: 12px;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-section:last-child { margin-bottom: 0; }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-section-title {
    color: rgba(244,236,216,0.55);
    font-family: var(--font-title, 'Cinzel', serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 8px 6px 6px;
    border-bottom: 1px solid rgba(233,185,99,0.18);
    margin-bottom: 4px;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-empty {
    color: rgba(244,236,216,0.4);
    font-style: italic;
    font-size: 12px;
    padding: 12px;
    text-align: center;
  }

  /* Fila de ranking */
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 7px;
    transition: background .12s;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-row:hover {
    background: rgba(233,185,99,0.07);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-row.is-me {
    background: linear-gradient(90deg, rgba(76,175,80,0.18), rgba(76,175,80,0.06));
    border: 1px solid rgba(76,175,80,0.35);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-row.is-top.is-me {
    border-color: rgba(245,179,66,0.5);
  }

  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-pos {
    flex: 0 0 22px;
    text-align: center;
    color: rgba(244,236,216,0.55);
    font-family: var(--font-title, 'Cinzel', serif);
    font-size: 12px;
    font-weight: 700;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-row.is-top .ghcv2-rank-pos {
    color: #f5b342;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-avatar {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: rgba(0,0,0,0.55);
    border: 1px solid rgba(233,185,99,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f5b342;
    font-family: var(--font-title, 'Cinzel', serif);
    font-size: 11px;
    font-weight: 700;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-name {
    flex: 1 1 auto;
    color: #f4ecd8;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-row.is-me .ghcv2-rank-name {
    color: #b6e7a0;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-rank-meta {
    flex: 0 0 auto;
    color: #f5b342;
    font-family: var(--font-title, 'Cinzel', serif);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    background: rgba(233,185,99,0.12);
    border: 1px solid rgba(233,185,99,0.3);
    border-radius: 4px;
    letter-spacing: 0.04em;
  }

  /* ═════════════════════════════════════════════════════════════════
   * ALLIES DRAWER — esquina superior derecha → expande hacia abajo
   * Mutex con social drawer (misma columna derecha).
   * ═════════════════════════════════════════════════════════════════ */
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-drawer {
    position: absolute !important;
    right: 24px !important;
    top: 72px !important;
    z-index: 70 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-drawer > * { pointer-events: auto; }

  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-toggle {
    width: 220px;
    height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, rgba(28,12,42,0.96), rgba(8,3,16,0.94));
    border: 1.5px solid rgba(233,185,99,0.55);
    border-radius: 12px;
    color: #f5b342;
    font-family: var(--font-title, 'Cinzel', serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,0.6);
    transition: transform .15s, box-shadow .15s, border-color .15s;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-toggle:hover {
    transform: translateY(-1px);
    border-color: #f5b342;
    box-shadow: 0 10px 26px rgba(233,185,99,0.3);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-toggle-label {
    flex: 1 1 auto;
    text-align: left;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-toggle-icon {
    font-size: 14px;
    color: #f5b342;
  }

  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-panel {
    position: absolute;
    right: 0;
    top: 56px;
    width: 340px;
    height: 0;
    max-height: 0;
    background: linear-gradient(180deg, rgba(20,8,32,0.97), rgba(8,3,16,0.96));
    border: 1.5px solid rgba(233,185,99,0.45);
    border-radius: 14px;
    box-shadow: 0 12px 38px rgba(0,0,0,0.7);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition: max-height .35s ease, opacity .25s ease, transform .3s ease;
    display: flex;
    flex-direction: column;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-drawer.is-open .ghcv2-allies-panel {
    /* 2026-06-14: parar arriba del toggle de Comunicación (bottom:24px, h:56px → 80 + gap 20) */
    height: min(640px, calc(100vh - 240px));
    max-height: min(640px, calc(100vh - 240px));
    opacity: 1;
    transform: translateY(0);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-drawer.is-open .ghcv2-allies-toggle-icon {
    transform: rotate(180deg);
    transition: transform .25s;
  }

  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-header {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 12px 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,0,0,0.35);
    border-bottom: 1px solid rgba(233,185,99,0.3);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-title {
    color: #f5b342;
    font-family: var(--font-title, 'Cinzel', serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-close {
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid rgba(233,185,99,0.3);
    border-radius: 6px;
    color: #f5b342;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-close:hover {
    background: rgba(255,90,90,0.2);
    border-color: #ff5a5a;
  }

  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-body::-webkit-scrollbar { width: 6px; }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-body::-webkit-scrollbar-thumb {
    background: rgba(233,185,99,0.35);
    border-radius: 4px;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-empty {
    color: var(--ghc-text-dim, #b8a98a);
    font-size: 12px;
    text-align: center;
    padding: 16px 8px;
    font-style: italic;
  }

  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(233,185,99,0.18);
    border-radius: 8px;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-row.is-me {
    border-color: rgba(233,185,99,0.55);
    background: rgba(233,185,99,0.08);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-row.is-dead {
    opacity: 0.45;
    filter: grayscale(0.7);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: rgba(0,0,0,0.55);
    border: 1px solid rgba(233,185,99,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f5b342;
    font-family: var(--font-title, 'Cinzel', serif);
    font-size: 14px;
    font-weight: 700;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-name {
    color: #f4ecd8;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.03em;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-row.is-me .ghcv2-allies-name {
    color: var(--ghc-gold, #f5b342);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-bar {
    position: relative;
    height: 11px;
    background: rgba(0,0,0,0.6);
    border-radius: 99px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.3s ease;
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-bar-hp .ghcv2-allies-bar-fill {
    background: linear-gradient(90deg, #4cae5b, #67d877);
    box-shadow: 0 0 6px rgba(103,216,119,0.4);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-bar-hp.is-low .ghcv2-allies-bar-fill {
    background: linear-gradient(90deg, #b73838, #ff5a5a);
    box-shadow: 0 0 6px rgba(255,90,90,0.5);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-bar-mp .ghcv2-allies-bar-fill {
    background: linear-gradient(90deg, #3a6fa8, #5fa8e8);
    box-shadow: 0 0 6px rgba(95,168,232,0.4);
  }
  body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-allies-bar-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.95);
    pointer-events: none;
  }

  /* ═════════════════════════════════════════════════════════════════
   * 2026-06-14: Tier moderado 1300-1550px → compactar HP/MP + Comunicación
   * (no overlapean con skills pero mantienen forma horizontal).
   * ═════════════════════════════════════════════════════════════════ */
  @media (min-width: 1301px) and (max-width: 1550px) {
    body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats {
      width: 200px !important;
      padding: 10px 12px !important;
    }
    body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats .ghc-self-bar-text {
      font-size: 10px !important;
    }
    body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-toggle {
      width: 170px !important;
      font-size: 11px !important;
      padding: 0 14px !important;
    }
  }

  /* ═════════════════════════════════════════════════════════════════
   * Tier agresivo ≤1300px → cards verticales / icon-only para liberar
   * el centro a las skills.
   * ═════════════════════════════════════════════════════════════════ */
  @media (min-width: 901px) and (max-width: 1300px) {
    /* HP/MP card: vertical compacto.
       Flip flex-direction a row para que las 2 bars queden lado a lado,
       cada una en columna con icon arriba + bar vertical + número abajo. */
    body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats {
      width: 110px !important;
      padding: 10px 8px !important;
      flex-direction: row !important;
      gap: 12px !important;
      align-items: center !important;
      justify-content: center !important;
    }
    body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats .ghc-self-bar {
      flex-direction: column !important;
      width: auto !important;
      flex: 0 0 auto !important;
      align-items: center !important;
      gap: 4px !important;
    }
    body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats .ghc-self-bar-icon {
      width: 18px !important;
      height: 18px !important;
      font-size: 13px !important;
    }
    /* Bar vertical: contenedor tall+thin, fill anclado bottom→top usando
       una variable derivada del width % que JS ya pone. */
    body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats .ghc-self-bar-track {
      width: 14px !important;
      height: 64px !important;
      position: relative !important;
      border-radius: 4px !important;
      overflow: hidden !important;
      display: flex !important;
      align-items: flex-end !important;
    }
    /* JS setea width:X% en el fill. En modo compacto, usamos transform
       para convertir width visual a height visual. */
    body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats .ghc-self-bar-fill {
      position: absolute !important;
      left: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      height: var(--vfill, 100%) !important;
      /* Truco: el atributo style.width:X% se aplica al fill, y nosotros lo
         leemos como variable vía un wrapper. Pero como no podemos leer el
         style inline desde CSS, usamos transform-origin para escalar Y según
         el width que ya está siendo seteado. */
      transform-origin: bottom center !important;
    }
    /* Número debajo de la bar */
    body.ghcv2-active .ghc-frame.ghcv2 #ghc-self-stats .ghc-self-bar-text {
      position: relative !important;
      inset: auto !important;
      font-size: 9px !important;
      letter-spacing: 0 !important;
      white-space: nowrap !important;
      order: 99 !important;
    }

    /* Comunicación: solo icono (vertical) */
    body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-toggle {
      width: 60px !important;
      padding: 0 !important;
      justify-content: center !important;
      gap: 4px !important;
      flex-direction: column !important;
    }
    body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-toggle-label {
      display: none !important;
    }
    body.ghcv2-active .ghc-frame.ghcv2 .ghcv2-drawer-toggle-icon {
      font-size: 22px !important;
    }
  }

  /* ─── Topbar global del juego: se mantiene visible pero compactado.
       El topbar del game shell tiene altura ~60-70px. No lo tocamos —
       el frame se posiciona DEBAJO con `inset:0` + el shell mete su propio
       offset. Si el topbar tapa el header, descomentar:
  body.ghcv2-active .ghc-frame.ghcv2 { top: 56px !important; height: calc(100vh - 56px) !important; }
  ─── */
}