/* =====================================================================
   COMBATE PvE — Rediseño PC V2 (Obsidian Codex cinematográfico)
   2026-06-05 · Solo aplica a viewport ≥ 1100px.
   Mobile/tablet conservan el look V1 intacto (game.css).
   Se mantiene la imagen de fondo de la zona (zoneBg(code)).
   No se toca el HTML de combat.js — todo es override por selector.
   ===================================================================== */

@media (min-width: 1100px) {

  /* ===========================================================
     1) STAGE · marco general
     =========================================================== */
  .combat-stage {
    --cpv2-gold:       #d4af37;
    --cpv2-gold-soft:  #e9b963;
    --cpv2-gold-deep:  #8a6510;
    --cpv2-violet:     #c2a8ff;
    --cpv2-violet-deep:#6b3fb5;
    --cpv2-cream:      #f3e8d5;
    --cpv2-cream-dim:  rgba(243, 232, 213, 0.72);
    --cpv2-blood:      #b91c1c;
    --cpv2-emerald:    #5fd684;

    border-radius: 18px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow:
      0 30px 80px rgba(0,0,0,0.6),
      0 0 0 1px rgba(212, 175, 55, 0.15),
      inset 0 0 80px rgba(0,0,0,0.4);
  }

  /* Bg de zona — bajar un poco el filtro para que se note la imagen */
  .combat-stage .cs-bg { filter: brightness(0.55) contrast(1.05) saturate(1.05); }
  /* Fog overlay más sutil para que la imagen respire */
  .combat-stage .cs-bg-fog {
    background:
      radial-gradient(ellipse 70% 60% at 50% 100%, rgba(10,4,20,0.55), transparent 70%),
      radial-gradient(ellipse 70% 50% at 50% 0%, rgba(10,4,20,0.35), transparent 70%),
      linear-gradient(180deg, rgba(10,4,20,0.20) 0%, rgba(10,4,20,0.55) 100%);
  }

  /* ===========================================================
     2) TOPBAR · Turno + Zona
     =========================================================== */
  .combat-stage .cs-top {
    padding: 18px 32px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
    background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
  }
  .combat-stage .cs-turn-badge,
  .combat-stage .cs-zone-badge {
    padding: 9px 22px;
    background: rgba(8,4,16,0.78);
    border: 1px solid rgba(212, 175, 55, 0.40);
    border-radius: 999px;
    font-family: 'Cinzel', var(--font-title, serif);
    font-size: 12px;
    letter-spacing: 0.22em;
    color: var(--cpv2-gold-soft);
    text-transform: uppercase;
    backdrop-filter: blur(8px);
  }
  .combat-stage .cs-turn-badge i,
  .combat-stage .cs-zone-badge i { font-size: 14px; }
  .combat-stage .cs-turn-badge b {
    color: var(--cpv2-cream);
    font-size: 13px;
    letter-spacing: 0.1em;
  }

  /* ===========================================================
     3) FIELD · 3 columnas (player · VS · enemy)
     El DOM es [enemy, vs-divider, player] — usamos grid-area
     para reordenar sin tocar JS.
     =========================================================== */
  .combat-stage .cs-field {
    padding: 24px 32px 16px;            /* (1) achicar padding side */
    display: grid;
    grid-template-columns: 1fr 280px 1fr;  /* (1) col central más chica */
    grid-template-areas: "player vs enemy";
    gap: 16px;                          /* (1) gap menor */
    align-items: start;
    min-height: 380px;
  }
  .combat-stage .cs-fighter-player { grid-area: player; }
  .combat-stage .cs-vs-divider    { grid-area: vs;     }
  .combat-stage .cs-fighter-enemy { grid-area: enemy;  }

  /* Override widths (V1 los limita a 640px) */
  .combat-stage .cs-fighter-player,
  .combat-stage .cs-fighter-enemy {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* ===========================================================
     4) FIGHTER · Player (portrait izq + info der)
     =========================================================== */
  .combat-stage .cs-fighter-player {
    flex-direction: row;
    gap: 26px;
    align-items: center;
  }
  /* Portrait wrap más grande con sigil ornamentado */
  .combat-stage .cs-fighter-player .cs-portrait-wrap {
    width: 180px; height: 180px;
  }
  .combat-stage .cs-fighter-player .cs-portrait-ring {
    inset: -10px;
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      var(--cpv2-gold-soft) 60deg,
      transparent 120deg,
      transparent 240deg,
      var(--cpv2-gold-soft) 300deg,
      transparent 360deg
    );
    opacity: 0.7;
    animation-duration: 9s;
  }
  /* Anillo dashed estático adicional */
  .combat-stage .cs-fighter-player .cs-portrait-wrap::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px dashed rgba(212, 175, 55, 0.45);
    pointer-events: none;
    z-index: 1;
    animation: cpv2-ring-spin 18s linear infinite;
  }
  @keyframes cpv2-ring-spin { to { transform: rotate(360deg); } }
  .combat-stage .cs-fighter-player .cs-portrait {
    width: 180px; height: 180px;
    border: 4px solid var(--cpv2-gold-soft);
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.6),
      0 0 0 6px var(--cpv2-gold-deep),
      0 0 40px rgba(212, 175, 55, 0.30),
      inset 0 0 28px rgba(0,0,0,0.5);
  }

  /* Player name/level cinematográficos */
  .combat-stage .cs-fighter-player .cs-fighter-name {
    font-family: 'Cinzel', var(--font-title, serif);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 2px 14px rgba(0,0,0,0.8);
    color: var(--cpv2-cream);
    margin-bottom: 2px;
  }
  .combat-stage .cs-fighter-player .cs-fighter-level {
    font-family: 'Cinzel', var(--font-title, serif);
    font-size: 12px;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: var(--cpv2-cream-dim);
    margin-bottom: 14px;
  }

  /* ===========================================================
     5) FIGHTER · Enemy — info IZQUIERDA + portrait DERECHA
     (4) Cambiado de row-reverse a row para que info quede a la izq
     del marco del boss, matcheando el mockup.
     =========================================================== */
  .combat-stage .cs-fighter-enemy {
    flex-direction: row !important;
    gap: 26px;
    align-items: center;
  }
  .combat-stage .cs-fighter-enemy .cs-portrait-wrap {
    width: 200px; height: 200px;
    flex-shrink: 0;            /* nunca colapsar el portrait */
  }
  .combat-stage .cs-fighter-info { min-width: 0; }   /* info shrinks first */
  .combat-stage .cs-fighter-enemy .cs-portrait {
    width: 200px; height: 200px;
    border-radius: 14px; /* cuadrado-suave estilo card de boss */
    border: 2px solid rgba(212, 175, 55, 0.35);
    background: linear-gradient(135deg, rgba(40,10,30,0.85), rgba(20,8,30,0.95));
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.6),
      0 8px 28px rgba(0,0,0,0.6),
      inset 0 0 40px rgba(0,0,0,0.45);
  }
  .combat-stage .cs-fighter-enemy .cs-portrait.is-boss {
    border-color: rgba(255, 170, 80, 0.55);
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.6),
      0 0 40px rgba(255, 170, 80, 0.30),
      0 8px 28px rgba(0,0,0,0.6),
      inset 0 0 40px rgba(0,0,0,0.45);
  }
  /* Anillo conic del enemigo: ocultar (no encaja con frame cuadrado) */
  .combat-stage .cs-fighter-enemy .cs-portrait-ring { display: none; }
  /* Esquinas ornamentadas sobre el portrait del enemigo */
  .combat-stage .cs-fighter-enemy .cs-portrait-wrap::before,
  .combat-stage .cs-fighter-enemy .cs-portrait-wrap::after {
    content: '';
    position: absolute;
    width: 24px; height: 24px;
    border: 2px solid var(--cpv2-gold-soft);
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.4));
  }
  .combat-stage .cs-fighter-enemy .cs-portrait-wrap::before {
    top: -4px; left: -4px;
    border-right: none; border-bottom: none;
  }
  .combat-stage .cs-fighter-enemy .cs-portrait-wrap::after {
    bottom: -4px; right: -4px;
    border-left: none; border-top: none;
  }

  .combat-stage .cs-fighter-enemy .cs-fighter-name {
    font-family: 'Cinzel', var(--font-title, serif);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0,0,0,0.8);
    color: var(--cpv2-cream);
  }
  .combat-stage .cs-fighter-enemy .cs-boss-tag {
    background: rgba(255, 170, 80, 0.12);
    border: 1px solid rgba(255, 170, 80, 0.50);
    color: #ffaa50;
    padding: 3px 10px;
    border-radius: 4px;
    font-family: 'Cinzel', var(--font-title, serif);
    font-size: 10px;
    letter-spacing: 0.25em;
    margin-left: 10px;
  }
  .combat-stage .cs-fighter-enemy .cs-fighter-meta {
    font-family: 'Cinzel', var(--font-title, serif);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--cpv2-cream-dim);
    text-transform: uppercase;
  }
  .combat-stage .cs-fighter-enemy .cs-fighter-evasion { color: var(--cpv2-violet); }

  /* ===========================================================
     6) HP / MP BARS · más cinematográficas + ancho limitado
     =========================================================== */
  .combat-stage .cs-hp-bar-wrap,
  .combat-stage .cs-mp-bar-wrap { margin-top: 8px; }
  /* Player: barras a la izquierda, ancho cap 280px */
  .combat-stage .cs-fighter-player .cs-hp-bar-wrap,
  .combat-stage .cs-fighter-player .cs-mp-bar-wrap {
    max-width: 280px;
  }
  /* Enemy: barra a la derecha (info-right), cap 320px alineado al borde der */
  .combat-stage .cs-fighter-enemy .cs-hp-bar-wrap {
    max-width: 320px;
    margin-left: auto;
  }
  .combat-stage .cs-hp-bar,
  .combat-stage .cs-mp-bar {
    height: 14px;                           /* un poco más finas */
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(212, 175, 55, 0.30);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
  }
  /* Ticks decorativos en la track */
  .combat-stage .cs-hp-bar::after,
  .combat-stage .cs-mp-bar::after {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(
      90deg, transparent 0, transparent 28px,
      rgba(0,0,0,0.45) 28px, rgba(0,0,0,0.45) 29px
    );
    pointer-events: none;
  }
  .combat-stage .cs-hp-fill.is-player {
    background: linear-gradient(180deg, #6fe48b, #2a8d4a);
    box-shadow: 0 0 12px rgba(95, 214, 132, 0.45);
  }
  .combat-stage .cs-hp-fill.is-enemy {
    background: linear-gradient(180deg, #f87171, #b91c1c);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.50);
  }
  .combat-stage .cs-mp-fill {
    background: linear-gradient(180deg, #6fb8ff, #2566c4);
    box-shadow: 0 0 12px rgba(95, 180, 255, 0.45);
  }
  .combat-stage .cs-hp-num,
  .combat-stage .cs-mp-num {
    font-family: 'Cinzel', var(--font-title, serif);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--cpv2-cream);
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
  }

  /* ===========================================================
     7) VS DIVIDER · imagen botonvs.png (1080x720, VS baked-in)
     V1 game.css usa heights/widths chicas + un cs-vs-line con
     gradient gold horizontal — todo eso lo nukeamos con !important.
     =========================================================== */
  .combat-stage .cs-vs-divider {
    align-self: center;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    height: auto !important;        /* V1 cap 36px */
    min-height: 180px !important;   /* (1) era 220 */
    margin: 0 !important;
  }
  /* Nuke la línea horizontal gold de V1 */
  .combat-stage .cs-vs-line {
    display: none !important;
    background: none !important;
  }
  /* Nuke el disco gold 50x50 de V1 + usar la imagen */
  .combat-stage .cs-vs-circle {
    position: relative !important;
    width: 260px !important;             /* (1) era 320 */
    height: 175px !important;            /* (1) era 215 */
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: url('../assets/img/combat/botonvs.png?v=2') center / contain no-repeat !important;
    background-color: transparent !important;
    filter: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2;
  }
  /* Nuke pseudos del disco procedural V1 (si existían) */
  .combat-stage .cs-vs-circle::before,
  .combat-stage .cs-vs-circle::after { display: none !important; content: none !important; }
  /* Ocultar el texto VS (ya viene en la imagen) */
  .combat-stage .cs-vs-circle span {
    display: none !important;
  }

  /* ===========================================================
     8 + 9) STAGE GRID · re-flow completo del bottom
     Orden: [log | atacar] / habilidades / skills / belt / huir / full-log
     Usamos display:contents en .cs-action-bar para que sus hijos
     (atacar, skills, belt, flee) entren al grid de .combat-stage.
     =========================================================== */
  .combat-stage {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;  /* edges = 1fr buffer / log + atacar centrados */
    grid-template-areas:
      "top    top    top    top"
      "field  field  field  field"
      ".      log    atacar ."
      "habsec habsec habsec habsec"
      "skills skills skills skills"
      "belt   belt   belt   belt"
      "flee   flee   flee   flee"
      "flog   flog   flog   flog";
    column-gap: 32px;
    row-gap: 14px;
    align-items: start;
    padding-bottom: 32px;
  }
  /* CRÍTICO: bg/fog/particles eran z-index 0/1/2 y tapaban los grid items.
     Las apagamos para clicks y bajamos su rol a 100% decorativo. */
  .combat-stage .cs-bg,
  .combat-stage .cs-bg-fog,
  .combat-stage .cs-bg-particles {
    pointer-events: none;
  }
  /* Y subimos los grid items por encima de las capas decorativas */
  .combat-stage .cs-quick-log,
  .combat-stage .cs-attack-btn,
  .combat-stage .cs-skills-row,
  .combat-stage .cs-belt-row,
  .combat-stage .cs-flee-btn,
  .combat-stage .cs-full-log,
  .combat-stage .cs-action-bar::before {
    position: relative;
    z-index: 3;
  }
  .combat-stage .cs-top   { grid-area: top; }
  .combat-stage .cs-field { grid-area: field; }

  /* Action bar dissolves — sus hijos (attack/skills/belt/flee) entran al grid */
  .combat-stage .cs-action-bar {
    display: contents;
  }
  /* Label HABILIDADES (pseudo del action-bar) — grid-area habsec */
  .combat-stage .cs-action-bar::before {
    content: 'Habilidades';
    grid-area: habsec;
    text-align: center;
    font-family: 'Cinzel', var(--font-title, serif);
    font-size: 11px;
    letter-spacing: 0.36em;
    color: var(--cpv2-gold-soft);
    text-transform: uppercase;
    margin-top: 14px;
    opacity: 0.9;
  }

  /* Quick log: alineado con ATACAR (col 2 del grid 4-col, centrado) */
  .combat-stage .cs-quick-log {
    grid-area: log;
    margin: 0;
    width: 420px;                           /* (3) más ancho, equipara con ATACAR */
    height: 150px;                          /* (2) más alto vertical (era 88) */
    padding: 14px 18px;
    background: linear-gradient(180deg, rgba(20, 8, 30, 0.92), rgba(12, 4, 22, 0.97));
    border: 1px solid rgba(212, 175, 55, 0.32);
    border-radius: 12px;
    box-shadow: inset 0 0 24px rgba(0,0,0,0.55);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-size: 11.5px;
    line-height: 1.4;
    min-height: auto;
    overflow-y: auto;
  }
  .combat-stage .cs-quick-log::before {
    content: 'Registro de Combate';
    display: block;
    font-family: 'Cinzel', var(--font-title, serif);
    font-size: 10.5px;
    letter-spacing: 0.28em;
    color: var(--cpv2-gold-soft);
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0.9;
  }

  /* Skills row centrado */
  .combat-stage .cs-skills-row {
    grid-area: skills;
    display: flex !important;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 48px;
    grid-template-columns: none !important;
  }

  /* Cinturón de pociones — centrado, fila propia */
  .combat-stage .cs-belt-row {
    grid-area: belt;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 48px;
  }

  /* Skill buttons: VERTICAL — icono arriba, nombre debajo, MP debajo del nombre */
  .combat-stage .cs-skill-btn {
    width: 92px;
    padding: 10px 8px 10px;
    background: linear-gradient(180deg, rgba(40, 20, 60, 0.55), rgba(20, 8, 30, 0.85));
    border: 1px solid rgba(212, 175, 55, 0.32);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    position: relative;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .combat-stage .cs-skill-btn::before,
  .combat-stage .cs-skill-btn::after {
    content: '';
    position: absolute;
    width: 10px; height: 10px;
    border: 1px solid var(--cpv2-gold-soft);
    opacity: 0.7;
    pointer-events: none;
  }
  .combat-stage .cs-skill-btn::before { top: 4px; left: 4px; border-right: none; border-bottom: none; }
  .combat-stage .cs-skill-btn::after  { bottom: 4px; right: 4px; border-left: none; border-top: none; }
  .combat-stage .cs-skill-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    border-color: var(--cpv2-gold-soft);
    box-shadow: 0 8px 22px rgba(212, 175, 55, 0.20);
  }
  .combat-stage .cs-skill-btn .cs-skill-ico-wrap {
    width: 60px; height: 60px;
    margin: 0;
    flex-shrink: 0;
  }
  .combat-stage .cs-skill-btn .cs-skill-img {
    width: 60px; height: 60px;
    border-radius: 8px;
  }
  /* Text block centrado debajo del ícono */
  .combat-stage .cs-skill-btn .cs-skill-text {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
  .combat-stage .cs-skill-btn .cs-skill-name {
    font-family: 'Cinzel', var(--font-title, serif);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cpv2-cream);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  .combat-stage .cs-skill-btn .cs-skill-meta {
    display: flex;
    justify-content: center;
    gap: 6px;
  }
  .combat-stage .cs-skill-btn .cs-skill-mp {
    color: #6fb8ff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .combat-stage .cs-skill-btn .cs-skill-lv {
    color: var(--cpv2-cream-dim);
    font-size: 9.5px;
    letter-spacing: 0.05em;
  }
  .combat-stage .cs-skill-btn.is-ultimate {
    border-color: rgba(255, 170, 80, 0.55);
    box-shadow: 0 4px 14px rgba(255, 170, 80, 0.18);
  }
  .combat-stage .cs-skill-btn.is-ultimate::before,
  .combat-stage .cs-skill-btn.is-ultimate::after {
    border-color: #ffaa50;
    opacity: 0.9;
  }

  /* Slot 1-9 badge */
  .combat-stage .cs-skill-btn .cs-skill-slot {
    font-family: 'Cinzel', var(--font-title, serif);
    font-size: 10px;
    font-weight: 800;
    color: var(--cpv2-gold-soft);
    background: rgba(8, 4, 16, 0.85);
    border: 1px solid rgba(212, 175, 55, 0.45);
  }

  /* ===========================================================
     10) ATACAR · imagen botonatacar.png 598x155
        Col 3 del grid 4-col (centrada junto al log)
     =========================================================== */
  .combat-stage .cs-attack-btn {
    grid-area: atacar;
    justify-self: start;
    align-self: center;
    margin: 0;
    width: 420px;
    height: 108px;       /* 420 / (598/155) ≈ 108 → mantiene aspect */
    padding: 0;
    background:
      url('../assets/img/combat/botonatacar.png?v=1') center / contain no-repeat;
    border: none;
    border-radius: 0;
    box-shadow: none;                 /* sin rectángulo */
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));  /* sigue el alpha del PNG */
    position: relative;
    overflow: visible;
    transition: filter 0.18s, transform 0.12s;
  }
  /* Texto "ATACAR" baked en la imagen — ocultamos icon + label */
  .combat-stage .cs-attack-btn .cs-ab-label,
  .combat-stage .cs-attack-btn i.ph-fill,
  .combat-stage .cs-attack-btn .cs-ab-glow {
    display: none !important;
  }
  .combat-stage .cs-attack-btn:hover:not(:disabled) {
    filter:
      drop-shadow(0 6px 14px rgba(0,0,0,0.55))
      drop-shadow(0 0 18px rgba(212, 175, 55, 0.35))
      brightness(1.10);
    transform: translateY(-2px);
  }
  .combat-stage .cs-attack-btn:active:not(:disabled) {
    transform: translateY(0);
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55)) brightness(0.95);
  }

  /* ===========================================================
     11) HUIR · centrado, fila propia entre belt y full-log
     =========================================================== */
  .combat-stage .cs-flee-btn {
    grid-area: flee;
    justify-self: center;
    border: 1px solid rgba(220, 80, 80, 0.45);
    background: linear-gradient(180deg, rgba(60, 20, 20, 0.55), rgba(30, 10, 10, 0.7));
    border-radius: 10px;
    padding: 12px 26px;
    transition: filter 0.18s, transform 0.12s;
  }
  .combat-stage .cs-flee-btn span {
    font-family: 'Cinzel', var(--font-title, serif);
    font-size: 11px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: #ff9090;
  }
  .combat-stage .cs-flee-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }

  /* ===========================================================
     12) FULL LOG · debajo de HUIR, full width
     =========================================================== */
  .combat-stage .cs-full-log {
    grid-area: flog;
    margin: 0 48px;
  }

}
/* /@media (min-width: 1100px) */

/* =====================================================================
   TIER COMPACT · 1100px - 1400px viewport
   Pantallas PC chicas. Mantiene el rediseño V2 pero achica todo para
   que entre sin overflow ni wraps feos.
   ===================================================================== */
@media (min-width: 1100px) and (max-width: 1700px) {
  /* Evitar scroll horizontal por overflow accidental */
  .combat-stage { overflow-x: hidden; }

  /* FIELD · achicar hero */
  .combat-stage .cs-field {
    padding: 18px 24px 14px !important;
    grid-template-columns: 1fr 220px 1fr !important;
    gap: 12px !important;
    min-height: 320px !important;
  }

  /* VS center · más chico */
  .combat-stage .cs-vs-circle {
    width: 210px !important;
    height: 140px !important;
  }
  .combat-stage .cs-vs-divider {
    min-height: 145px !important;
  }

  /* Player portrait · 140x140 */
  .combat-stage .cs-fighter-player {
    gap: 18px !important;
  }
  .combat-stage .cs-fighter-player .cs-portrait-wrap,
  .combat-stage .cs-fighter-player .cs-portrait {
    width: 140px !important;
    height: 140px !important;
  }
  .combat-stage .cs-fighter-player .cs-fighter-name {
    font-size: 22px !important;
  }
  .combat-stage .cs-fighter-player .cs-fighter-level {
    font-size: 11px !important;
    letter-spacing: 0.24em !important;
    margin-bottom: 10px !important;
  }

  /* Enemy portrait · 160x160 (un poco más grande que player) */
  .combat-stage .cs-fighter-enemy {
    gap: 18px !important;
  }
  .combat-stage .cs-fighter-enemy .cs-portrait-wrap,
  .combat-stage .cs-fighter-enemy .cs-portrait {
    width: 160px !important;
    height: 160px !important;
    flex-shrink: 0 !important;
  }
  /* Info del boss puede shrinkear primero — preserva el portrait */
  .combat-stage .cs-fighter-enemy .cs-fighter-info { min-width: 0 !important; }
  .combat-stage .cs-fighter-enemy .cs-fighter-name {
    font-size: 22px !important;
  }
  .combat-stage .cs-fighter-enemy .cs-fighter-meta {
    font-size: 10px !important;
    gap: 12px !important;
  }

  /* HP/MP bars · más cortas */
  .combat-stage .cs-fighter-player .cs-hp-bar-wrap,
  .combat-stage .cs-fighter-player .cs-mp-bar-wrap {
    max-width: 220px !important;
  }
  .combat-stage .cs-fighter-enemy .cs-hp-bar-wrap {
    max-width: 240px !important;
  }
  .combat-stage .cs-hp-bar,
  .combat-stage .cs-mp-bar { height: 12px !important; }

  /* TOPBAR */
  .combat-stage .cs-top {
    padding: 12px 22px !important;
  }
  .combat-stage .cs-turn-badge,
  .combat-stage .cs-zone-badge {
    padding: 7px 16px !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
  }

  /* LOG + ATACAR · más chicos y juntos */
  .combat-stage .cs-quick-log {
    width: 340px !important;
    height: 130px !important;
    padding: 12px 14px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  .combat-stage .cs-quick-log::before {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
  }
  .combat-stage .cs-attack-btn {
    width: 340px !important;
    height: 88px !important;        /* 340 / (598/155) ≈ 88 */
  }

  /* GRID column-gap más chico */
  .combat-stage {
    column-gap: 24px !important;
  }

  /* SKILLS · más chicos */
  .combat-stage .cs-skill-btn {
    width: 78px !important;
    padding: 6px 5px 5px !important;
  }
  .combat-stage .cs-skill-btn .cs-skill-ico-wrap,
  .combat-stage .cs-skill-btn .cs-skill-img {
    width: 48px !important;
    height: 48px !important;
  }
  .combat-stage .cs-skill-btn .cs-skill-name {
    font-size: 9.5px !important;
  }
  .combat-stage .cs-skills-row { gap: 8px !important; }

  /* ACTION BAR · padding bottom menor + label más chico */
  .combat-stage .cs-action-bar::before {
    font-size: 10px !important;
    letter-spacing: 0.28em !important;
    margin-top: 8px !important;
  }

  /* FULL LOG + HUIR margins */
  .combat-stage .cs-flee-btn {
    padding: 10px 22px !important;
  }
  .combat-stage .cs-full-log {
    margin: 0 32px !important;
  }
}

/* =====================================================================
   TIER ULTRA-COMPACT · 1100-1240px viewport
   Para sidebar + main area muy apretados.
   ===================================================================== */
@media (min-width: 1100px) and (max-width: 1240px) {
  .combat-stage .cs-field {
    grid-template-columns: 1fr 180px 1fr !important;
    padding: 14px 18px 10px !important;
    gap: 10px !important;
  }
  .combat-stage .cs-vs-circle {
    width: 170px !important;
    height: 115px !important;
  }
  .combat-stage .cs-vs-divider {
    min-height: 120px !important;
  }
  .combat-stage .cs-fighter-player .cs-portrait-wrap,
  .combat-stage .cs-fighter-player .cs-portrait,
  .combat-stage .cs-fighter-enemy .cs-portrait-wrap,
  .combat-stage .cs-fighter-enemy .cs-portrait {
    width: 120px !important;
    height: 120px !important;
  }
  .combat-stage .cs-fighter-player .cs-fighter-name,
  .combat-stage .cs-fighter-enemy .cs-fighter-name { font-size: 19px !important; }

  .combat-stage .cs-quick-log {
    width: 290px !important;
    height: 110px !important;
  }
  .combat-stage .cs-attack-btn {
    width: 290px !important;
    height: 75px !important;
  }
  .combat-stage { column-gap: 16px !important; }

  .combat-stage .cs-skill-btn { width: 68px !important; }
  .combat-stage .cs-skill-btn .cs-skill-ico-wrap,
  .combat-stage .cs-skill-btn .cs-skill-img {
    width: 42px !important;
    height: 42px !important;
  }
  .combat-stage .cs-skill-btn .cs-skill-name { font-size: 8.5px !important; }
}

/* =====================================================================
   TIER SUPER-COMPACT · combat-stage < 1100px width (sidebar grande, etc)
   Container query basado en el ancho REAL del stage, no del viewport —
   así se reorganiza cuando el espacio disponible es chico independiente
   del viewport total.
   ===================================================================== */
@media (min-width: 1100px) {
  .combat-stage { container-type: inline-size; container-name: cstage; }
}
@container cstage (max-width: 1100px) {
  /* Cuando el stage real queda <1100px, usar layout 2-row del ultra-narrow */
  .combat-stage .cs-field {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "player vs"
      "enemy  vs" !important;
    gap: 32px 20px !important;        /* row-gap más grande (era 18px) */
    min-height: auto !important;
    padding: 18px 24px 20px !important;
  }
  .combat-stage .cs-vs-divider {
    align-self: center !important;
    grid-row: 1 / 3 !important;
    justify-self: end !important;
  }
  .combat-stage .cs-vs-circle {
    width: 220px !important;
    height: 148px !important;
  }
  .combat-stage .cs-fighter-enemy {
    flex-direction: row-reverse !important;
    gap: 22px !important;
    align-items: center !important;
    padding-top: 18px !important;     /* breathing room arriba */
    border-top: 1px solid rgba(212, 175, 55, 0.18);
    margin-top: 0 !important;
  }
  .combat-stage .cs-fighter-enemy .cs-portrait-wrap,
  .combat-stage .cs-fighter-enemy .cs-portrait {
    width: 140px !important;
    height: 140px !important;
    flex-shrink: 0 !important;
  }
  .combat-stage .cs-fighter-enemy .cs-portrait i {
    font-size: 64px !important;
  }
  .combat-stage .cs-fighter-enemy .cs-portrait-wrap::before,
  .combat-stage .cs-fighter-enemy .cs-portrait-wrap::after {
    width: 22px !important;
    height: 22px !important;
  }
  /* Boss INFO · misma estrategia FLEX COLUMN + ALIGN-ITEMS FLEX-START
     (también aplicada al container query, no solo al viewport @media) */
  .combat-stage .cs-fighter-enemy .cs-fighter-info,
  .combat-stage .cs-fighter-enemy .cs-info-right {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: left !important;
    min-width: 0 !important;
    align-self: center !important;
    max-width: none !important;
  }
  .combat-stage .cs-fighter-enemy .cs-fighter-name,
  .combat-stage .cs-fighter-enemy .cs-info-right .cs-fighter-name {
    display: block !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
  }
  .combat-stage .cs-fighter-enemy .cs-fighter-meta {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: 10px !important;
    align-self: flex-start !important;
  }
  .combat-stage .cs-fighter-enemy .cs-hp-bar-wrap {
    display: block !important;
    width: 320px !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
  }
  .combat-stage .cs-fighter-enemy .cs-hp-bar {
    width: 100% !important;
    margin: 0 !important;
  }
  .combat-stage .cs-fighter-enemy .cs-hp-num {
    display: block !important;
    text-align: left !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
  }
}

/* =====================================================================
   TIER ULTRA-NARROW · 1100-1280px (PC con sidebar + pantalla chica)
   Cuando el cs-field queda muy apretado, reorganizamos:
   - Player en row 1 izquierda
   - Boss INFO en row 2 izquierda (sin portrait)
   - VS a la derecha, spanning 2 rows, vertically centrado
   ===================================================================== */
@media (min-width: 1100px) and (max-width: 1400px) {
  /* Field: 2 rows con VS a la derecha spanning */
  .combat-stage .cs-field {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "player vs"
      "enemy  vs" !important;
    gap: 16px 20px !important;
    min-height: auto !important;
    padding: 18px 24px 16px !important;
  }

  /* VS spans 2 rows, vertically centered, smaller */
  .combat-stage .cs-vs-divider {
    align-self: center !important;
    grid-row: 1 / 3 !important;
    justify-self: end !important;
  }
  .combat-stage .cs-vs-circle {
    width: 180px !important;
    height: 120px !important;
  }

  /* Boss row · simetría con el player (portrait IZQ + info DER, 140x140) */
  .combat-stage .cs-fighter-enemy {
    flex-direction: row-reverse !important;
    gap: 22px !important;
    align-items: center !important;
    padding-top: 18px !important;     /* breathing room arriba */
    border-top: 1px solid rgba(212, 175, 55, 0.18);
    margin-top: 0 !important;
  }
  .combat-stage .cs-fighter-enemy .cs-portrait-wrap,
  .combat-stage .cs-fighter-enemy .cs-portrait {
    width: 140px !important;
    height: 140px !important;
    flex-shrink: 0 !important;
  }
  .combat-stage .cs-fighter-enemy .cs-portrait i {
    font-size: 64px !important;
  }
  .combat-stage .cs-fighter-enemy .cs-portrait-wrap::before,
  .combat-stage .cs-fighter-enemy .cs-portrait-wrap::after {
    width: 22px !important;
    height: 22px !important;
  }

  /* Boss INFO · FLEX COLUMN + ALIGN-ITEMS FLEX-START
     Esto fuerza que TODOS los elementos hijos se shrink-to-content y
     se alineen a la izquierda. text-align solo no alcanzaba porque los
     hijos eran block w/ 100% width y la cs-info-right (V1) los ponía
     text-align:right por dentro. */
  .combat-stage .cs-fighter-enemy .cs-fighter-info,
  .combat-stage .cs-fighter-enemy .cs-info-right {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: left !important;
    min-width: 0 !important;
    align-self: center !important;
    max-width: none !important;
  }
  .combat-stage .cs-fighter-enemy .cs-fighter-name,
  .combat-stage .cs-fighter-enemy .cs-info-right .cs-fighter-name {
    display: block !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
  }
  .combat-stage .cs-fighter-enemy .cs-fighter-meta {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: 10px !important;
    align-self: flex-start !important;
  }
  .combat-stage .cs-fighter-enemy .cs-hp-bar-wrap {
    display: block !important;
    width: 320px !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
  }
  .combat-stage .cs-fighter-enemy .cs-hp-bar {
    width: 100% !important;
    height: 14px !important;
    margin: 0 !important;
  }
  .combat-stage .cs-fighter-enemy .cs-hp-num {
    display: block !important;
    text-align: left !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
  }
  /* VS un poco más prominente */
  .combat-stage .cs-vs-circle {
    width: 220px !important;
    height: 148px !important;
  }
  /* Spacing row player/boss · más breathing room */
  .combat-stage .cs-field {
    row-gap: 32px !important;
  }
  /* Name e info del boss alineadas izquierda */
  .combat-stage .cs-fighter-enemy .cs-fighter-name,
  .combat-stage .cs-fighter-enemy .cs-fighter-meta,
  .combat-stage .cs-fighter-enemy .cs-hp-bar-wrap {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }
  .combat-stage .cs-fighter-enemy .cs-hp-bar-wrap {
    max-width: 320px !important;
  }
}

/* =====================================================================
   MOBILE VS · imagen botonvs.png en vez del círculo gold V1
   Mismo tamaño que V1 (42x42 mobile, 50x50 default). Las líneas
   separadoras (.cs-vs-line) NO se tocan — siguen visibles.
   ===================================================================== */
@media (max-width: 1099px) {
  .combat-stage .cs-vs-circle {
    background: url('../assets/img/combat/botonvs.png?v=2') center / contain no-repeat !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    width: 96px !important;          /* apenitas más grande (era 78) */
    height: 68px !important;         /* mantiene aspect ~1.4 */
  }
  .combat-stage .cs-vs-circle span {
    display: none !important;     /* VS baked en la imagen */
  }
}
/* Body.mobile-mode (V1 toggle por user-agent/JS) */
body.mobile-mode .combat-stage .cs-vs-circle {
  background: url('../assets/img/combat/botonvs.png?v=2') center / contain no-repeat !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  width: 96px !important;
  height: 68px !important;
}
body.mobile-mode .combat-stage .cs-vs-circle span {
  display: none !important;
}
/* En pantallas muy chicas (≤400px) un poco más chico */
@media (max-width: 400px) {
  body.mobile-mode .combat-stage .cs-vs-circle,
  .combat-stage .cs-vs-circle {
    width: 76px !important;
    height: 54px !important;
  }
}

/* ============================================================================
   2026-06-06 — PvP DUEL: override grid PC para estados sin skills/Atacar.
   ============================================================================
   El grid de .combat-stage está pensado para PvE (con skills + atacar + huir).
   En PvP duel hay dos estados donde esas zonas no existen:
   - is-pvp-intermission: descanso entre rondas (countdown a R2)
   - is-pvp-waiting:      tu turno aún no empezó (esperando al oponente)

   Sin override, los slots vacíos del grid (skills, belt, flee, flog) dejan
   filas vacías enormes y el pseudo ::before "Habilidades" del .cs-action-bar
   queda huérfano. Aquí simplificamos el layout a 3 zonas: top / field / panel.
   ========================================================================= */
@media (min-width: 1100px) {
  .combat-stage.cspd-stage.is-pvp-intermission,
  .combat-stage.cspd-stage.is-pvp-waiting {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "field"
      "panel";
    row-gap: 18px;
  }
  /* Suprimir el pseudo "Habilidades" que normalmente decora la fila skills.
     El .cs-action-bar de intermission/waiting NO contiene .cs-skills-row, así
     que mostrar el label es un bug visual. */
  .combat-stage.cspd-stage.is-pvp-intermission .cs-action-bar::before,
  .combat-stage.cspd-stage.is-pvp-waiting .cs-action-bar::before {
    content: none !important;
  }
  /* Asignar grid-area="panel" al action-bar (que ahora es la intermission o
     waiting bar). Como tiene display:contents (heredado del PvE), hay que
     overridearlo para que actúe como un bloque normal con ancho controlado. */
  .combat-stage.cspd-stage.is-pvp-intermission .cs-action-bar.cspd-int-bar,
  .combat-stage.cspd-stage.is-pvp-waiting .cs-action-bar.cspd-waiting-bar {
    display: flex !important;
    flex-direction: column;
    grid-area: panel;
    justify-self: center;
    width: min(620px, 90%);
    background: linear-gradient(180deg, rgba(33, 20, 58, 0.6), rgba(20, 10, 40, 0.7));
    border: 1px solid rgba(157, 108, 255, 0.28);
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  }
  /* Pips de rondas (R1·R2·R3): centrarlos dentro del panel sin grid-area
     propio, los dejamos en flujo normal arriba de la intermission. */
  .combat-stage.cspd-stage .cspd-rounds-row {
    grid-column: 1 / -1;
    justify-content: center;
  }
  /* Log: pasa a ocupar todo el ancho centrado, sin la mitad de "atacar". */
  .combat-stage.cspd-stage.is-pvp-intermission .cs-quick-log,
  .combat-stage.cspd-stage.is-pvp-waiting .cs-quick-log {
    grid-area: panel;
    justify-self: center;
    width: min(620px, 90%);
    max-width: 100%;
  }
  /* Intermission header: ícono + textos en fila. */
  .combat-stage.cspd-stage .cspd-int-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
  }
  .combat-stage.cspd-stage .cspd-int-icon {
    font-size: 32px;
    color: #c79bff;
    display: inline-flex;
    align-items: center;
  }
  .combat-stage.cspd-stage .cspd-int-title {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    color: #e9b963;
    letter-spacing: 0.04em;
  }
  .combat-stage.cspd-stage .cspd-int-sub {
    font-size: 14px;
    color: #a89890;
    margin-top: 2px;
  }
  .combat-stage.cspd-stage .cspd-int-sub b {
    color: #f5d27d;
    font-size: 18px;
    font-weight: 700;
    margin-left: 4px;
  }
  /* Barra de progreso visual del countdown (2026-06-06). */
  .combat-stage.cspd-stage .cspd-int-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(157, 108, 255, 0.22);
    margin-bottom: 12px;
  }
  .combat-stage.cspd-stage .cspd-int-progress-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #c79bff, #9d6cff 50%, #7e4bff);
    border-radius: 3px;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(157, 108, 255, 0.55);
  }

  /* ============================================================================
     2026-06-11 — PvP DUEL · ACTIVE state (mi turno).
     Root cause de "UI se mueve a la izquierda" + "timer sobre el log":
     El grid PvE V2 hace `.cs-action-bar { display: contents }` para disolver
     los hijos (ATACAR/Habilidades/Cinturón/Huir) dentro del grid del stage.
     PvP duel también usa `.cs-action-bar`, pero adentro tiene `.cspd-turn-timer`
     (que no existe en PvE) sin grid-area asignada. El auto-placement la mete
     en celdas vacías arbitrarias — por eso a veces tapa el log y según
     qué hijos haya (timer + attack + skills, o solo waiting bar) la columna
     se ve corrida.

     Fix: para PvP duel en cualquier estado, layout single-column con la
     action-bar como bloque normal (no display:contents). Eso mantiene el
     timer dentro de la barra de acciones, en su orden DOM natural,
     siempre arriba del botón ATACAR y siempre debajo del log.
     ============================================================================ */
  .combat-stage.cspd-stage {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    row-gap: 14px;
  }
  /* Cada bloque toma su propia fila a ancho completo (centrado). */
  .combat-stage.cspd-stage > .cs-top,
  .combat-stage.cspd-stage > .cs-field,
  .combat-stage.cspd-stage > .cs-quick-log,
  .combat-stage.cspd-stage > .cs-action-bar,
  .combat-stage.cspd-stage > .cspd-rounds-row,
  .combat-stage.cspd-stage > .cspd-forfeit-row,
  .combat-stage.cspd-stage > .cs-full-log {
    grid-area: auto !important;
    grid-column: 1 / -1 !important;
  }
  /* Action-bar: contenedor flex propio (NO display:contents). El timer queda
     adentro y nunca se desliga al grid del stage. */
  .combat-stage.cspd-stage > .cs-action-bar {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    justify-self: center;
    /* 2026-06-11: ancho amplio para que las skills entren en UNA fila horizontal
       (antes 620px → 2 filas de 4 con 8+ skills). Cap a 95% del viewport. */
    width: min(1100px, 95%);
    padding: 18px 22px;
    background: linear-gradient(180deg, rgba(33, 20, 58, 0.6), rgba(20, 10, 40, 0.7));
    border: 1px solid rgba(157, 108, 255, 0.28);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  }
  /* Quitar el pseudo "Habilidades" del PvE — no aplica en PvP. */
  .combat-stage.cspd-stage > .cs-action-bar::before { content: none !important; }
  /* Timer del turno dentro de la action-bar: sin margen lateral
     (la action-bar ya tiene su padding). */
  .combat-stage.cspd-stage > .cs-action-bar > .cspd-turn-timer {
    margin: 0 !important;
  }
  /* Log: ancho consistente con la action-bar para que la UI no se vea corrida. */
  .combat-stage.cspd-stage > .cs-quick-log {
    width: min(620px, 90%) !important;
    height: 150px !important;
    justify-self: center;
    margin: 0 !important;
  }
  /* Skills row: flex horizontal con wrap a múltiples filas si no entran.
     2026-06-11 v2: quitamos overflow-x scroll a pedido del usuario — las skills
     que no entran en la primera fila bajan a la segunda en vez de scrollearse. */
  .combat-stage.cspd-stage .cs-action-bar > .cs-skills-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 auto !important;
    max-width: min(1100px, 95%);
    overflow: visible;
    row-gap: 10px;
  }
  .combat-stage.cspd-stage .cs-action-bar > .cs-skills-row .cs-skill-btn {
    flex: 0 0 auto !important;
    width: 90px !important;
  }
  /* Botón "Saltar Turno" cuando el jugador está stunneado */
  .combat-stage.cspd-stage .cs-action-bar .cspd-skip-turn-btn {
    align-self: center;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, rgba(220, 180, 60, 0.85), rgba(180, 140, 30, 0.85));
    border: 2px solid rgba(255, 220, 100, 0.85);
    color: #1a0f00; font-weight: 800; font-size: 15px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(220, 180, 60, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .combat-stage.cspd-stage .cs-action-bar .cspd-skip-turn-btn:hover { transform: translateY(-2px); }
  .combat-stage.cspd-stage .cs-action-bar .cspd-skip-turn-btn i { font-size: 18px; }
  .combat-stage.cspd-stage .cs-action-bar .cspd-stun-note {
    text-align: center;
    color: #ffd54a;
    font-size: 13px;
    margin: 4px 0 0;
    font-weight: 600;
  }

  /* =====================================================================
     2026-06-11 PvP portrait override · El oponente en PvP es un PLAYER, no
     un boss. El CSS PvE base le pone marco cuadrado con corners ornamentados
     (típico de boss) que se ve mal cuando el char tiene avatar circular.
     Override → portrait circular igual que el player. Quitar también los
     ::before/::after corners del wrap del enemy en PvP.
     ===================================================================== */
  .combat-stage.cspd-stage .cs-fighter-enemy .cs-portrait {
    border-radius: 50% !important;
    border: 4px solid var(--cpv2-gold-soft) !important;
    background: linear-gradient(135deg, rgba(20,12,40,0.95), rgba(10,4,20,1)) !important;
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.6),
      0 0 0 6px var(--cpv2-gold-deep),
      0 0 40px rgba(212, 175, 55, 0.30),
      inset 0 0 28px rgba(0,0,0,0.5) !important;
  }
  /* Quitar las esquinas ornamentadas de boss en PvP */
  .combat-stage.cspd-stage .cs-fighter-enemy .cs-portrait-wrap::before,
  .combat-stage.cspd-stage .cs-fighter-enemy .cs-portrait-wrap::after {
    content: none !important;
  }
  /* Restablecer el anillo conic giratorio (sí queremos ese efecto en PvP) */
  .combat-stage.cspd-stage .cs-fighter-enemy .cs-portrait-ring {
    display: block !important;
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      var(--cpv2-gold-soft) 60deg,
      transparent 120deg,
      transparent 240deg,
      var(--cpv2-gold-soft) 300deg,
      transparent 360deg
    );
    opacity: 0.7;
    animation-duration: 9s;
    animation-direction: reverse;
  }
}