/* ════════════════════════════════════════════════════════════════
   duel-premium.css — Skin Premium del Duelo de Cartas (L2 Card Game)
   Capa 100% ADITIVA sobre main.css/mobile.css. No cambia layout ni
   markup: eleva lo existente. Cargar DESPUÉS de mobile.css.

   Paleta:  NEGRO Y DORADO (identidad de marca L2CG)
            obsidiana #0A0805 · áureo #D4AF37 · oro vivo #F0C75E (jugador)
            bronce viejo #8A6420 (rival) · forja #FF9A2F · hueso #E4D7B8
   Firma:   círculos de invocación rúnicos por facción bajo cada carta,
            que se encienden cuando ese lado ataca.
   ════════════════════════════════════════════════════════════════ */

#combat-screen {
  --dp-aureo: #D4AF37;
  --dp-oro-vivo: #F0C75E;   /* jugador: oro brillante */
  --dp-bronce: #8A6420;      /* rival: bronce viejo, ahumado */
  --dp-forja: #FF9A2F;
  --dp-hueso: #E4D7B8;
  --dp-vidrio: rgba(10, 8, 5, 0.62);
  --dp-filete: rgba(212, 175, 55, 0.28);
}

/* ── ENCUADRE: viñeta + filete dorado superior ─────────────────── */
#combat-screen::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 3;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.55) 100%);
}
#combat-screen .arena-hud-top {
  background: linear-gradient(180deg, rgba(8,6,3,0.85), rgba(8,6,3,0.35) 80%, transparent);
  border-bottom: 1px solid var(--dp-filete);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ── HUD: chips de vidrio con grabado ──────────────────────────── */
#combat-screen .arena-zone-name,
#combat-screen .arena-turn-badge,
#combat-screen .arena-enemy-info {
  background: var(--dp-vidrio);
  border: 1px solid var(--dp-filete);
  border-radius: 4px;
  padding: 5px 14px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 8px rgba(0,0,0,0.5);
}
#combat-screen .arena-zone-name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dp-hueso);
  text-shadow: 0 1px 0 #000, 0 0 18px rgba(212,175,55,0.25);
}
#combat-screen .arena-turn-badge {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--dp-aureo);
}
#combat-screen .arena-enemy-info { color: var(--dp-hueso); }

/* ── FIRMA: círculos de invocación por facción ─────────────────── */
#combat-screen .arena-field-slot { position: relative; }
#combat-screen .arena-field-slot .zone-card-slot { position: relative; z-index: 2; }

/* halo elíptico en el piso */
#combat-screen .arena-field-slot::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 26px;
  width: 210px; height: 64px;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none; z-index: 0;
  filter: blur(10px);
  animation: dpHaloPulse 4.5s ease-in-out infinite;
}
#combat-screen .arena-field-player::before {
  background: radial-gradient(ellipse at center, rgba(240,199,94,0.36) 0%, rgba(240,199,94,0.10) 55%, transparent 75%);
}
#combat-screen .arena-field-enemy::before {
  background: radial-gradient(ellipse at center, rgba(138,100,32,0.34) 0%, rgba(138,100,32,0.10) 55%, transparent 75%);
}

/* anillo rúnico giratorio (aplanado al piso con scaleY) */
#combat-screen .arena-field-slot::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -32px;
  width: 190px; height: 190px;
  pointer-events: none; z-index: 1;
  border-radius: 50%;
  border: 2px dashed rgba(212,175,55,0.0); /* color por facción abajo */
  transform: translateX(-50%) scaleY(0.30) rotate(0deg);
  animation: dpRingSpin 46s linear infinite;
}
#combat-screen .arena-field-player::after {
  border-color: rgba(240,199,94,0.60);
  box-shadow: 0 0 22px rgba(240,199,94,0.20), inset 0 0 26px rgba(240,199,94,0.12);
}
#combat-screen .arena-field-enemy::after {
  border-color: rgba(138,100,32,0.60);
  box-shadow: 0 0 22px rgba(138,100,32,0.20), inset 0 0 26px rgba(138,100,32,0.12);
  animation-direction: reverse;
}
@keyframes dpRingSpin {
  from { transform: translateX(-50%) scaleY(0.30) rotate(0deg); }
  to   { transform: translateX(-50%) scaleY(0.30) rotate(360deg); }
}
@keyframes dpHaloPulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

/* el círculo SE ENCIENDE cuando ese lado ataca… */
#combat-screen .arena-field-slot:has(.card-attacking-right)::after,
#combat-screen .arena-field-slot:has(.card-attacking-left)::after {
  border-style: solid;
  animation-duration: 2.5s;
  filter: brightness(1.9);
}
#combat-screen .arena-field-slot:has(.card-attacking-right)::before,
#combat-screen .arena-field-slot:has(.card-attacking-left)::before {
  filter: blur(10px) brightness(2);
}
/* …y destella rojo cuando ese lado recibe daño */
#combat-screen .arena-field-slot:has(.card-hurt)::before {
  background: radial-gradient(ellipse at center, rgba(255,60,40,0.5) 0%, rgba(255,60,40,0.15) 55%, transparent 75%);
  filter: blur(8px) brightness(1.6);
}

/* ── CARTAS EN CAMPO: levitación + presencia ───────────────────── */
@keyframes dpCardIdle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
/* La levitación va sobre el WRAPPER (no sobre .tcg-card): la carta
   descansa en scale(0.55) y animarle transform la haría saltar de
   tamaño — el conflicto que ya eliminamos. El wrapper no tiene
   transform propio, así que es seguro. */
#combat-screen .arena-field-slot .zone-card-slot {
  animation: dpCardIdle 5s ease-in-out infinite;
}
#combat-screen .arena-field-enemy .zone-card-slot {
  animation-delay: 2.5s;
}
/* pausa la levitación mientras la carta ataca / recibe / muere */
#combat-screen .arena-field-slot .zone-card-slot:has(.card-attacking-right),
#combat-screen .arena-field-slot .zone-card-slot:has(.card-attacking-left),
#combat-screen .arena-field-slot .zone-card-slot:has(.card-hurt),
#combat-screen .arena-field-slot .zone-card-slot:has(.card-dying) {
  animation: none;
}

/* slot vacío: invitación grabada por facción */
#combat-screen .zone-card-slot .field-empty {
  border: 1px dashed rgba(212,175,55,0.28);
  background:
    radial-gradient(ellipse at 50% 85%, rgba(212,175,55,0.06), transparent 60%),
    rgba(8,6,3,0.35);
  color: rgba(228,215,184,0.4);
  font-family: 'Cinzel', serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.55);
}
#combat-screen .arena-field-player .field-empty { border-color: rgba(240,199,94,0.40); }

/* ── BARRAS DE HP: bisel + brillo ──────────────────────────────── */
#combat-screen .ext-hp-wrap {
  background: var(--dp-vidrio);
  border: 1px solid var(--dp-filete);
  border-radius: 5px;
  padding: 6px 10px 8px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.55);
}
#combat-screen .ext-hp-name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--dp-hueso);
}
#combat-screen .ext-hp-lv { color: var(--dp-aureo); }
#combat-screen .ext-hp-bar-bg {
  position: relative;
  height: 13px;
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(180deg, #050403, #14100a);
  border: 1px solid rgba(212,175,55,0.35);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}
#combat-screen .ext-hp-bar-fill {
  height: 100%;
  border-radius: 6px;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.32), transparent 45%, rgba(0,0,0,0.25));
  background-blend-mode: overlay;
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
  box-shadow: 0 0 10px rgba(255, 200, 80, 0.15);
}
/* barrido de brillo sutil sobre la barra */
#combat-screen .ext-hp-bar-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.14) 48%, transparent 60%);
  background-size: 260% 100%;
  animation: dpHpSheen 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes dpHpSheen {
  0%, 55% { background-position: 130% 0; }
  100%    { background-position: -130% 0; }
}

/* ── BOTÓN ATACAR: calor de forja ──────────────────────────────── */
#combat-screen .arena-attack-btn {
  background: linear-gradient(160deg, #241100 0%, #120800 55%, #0a0400 100%);
  border: 1px solid rgba(255,122,47,0.5);
  box-shadow: inset 0 1px 0 rgba(255,180,90,0.15), 0 0 18px rgba(255,122,47,0.12);
}
#combat-screen .arena-attack-btn .attack-btn-text {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #FFD9A8;
  text-shadow: 0 1px 0 #000;
}
#combat-screen .arena-attack-btn .attack-btn-icon {
  filter: drop-shadow(0 0 6px rgba(255,122,47,0.7));
}
#combat-screen .arena-attack-btn:not(:disabled):hover {
  border-color: var(--dp-forja);
  box-shadow: inset 0 1px 0 rgba(255,200,120,0.25), 0 0 34px rgba(255,122,47,0.4) !important;
}
#combat-screen .arena-attack-btn:disabled {
  filter: grayscale(0.7) brightness(0.6);
}

/* botones secundarios: sobrios, mismo vidrio */
#combat-screen .arena-auto-btn,
#combat-screen .arena-speed-btn,
#combat-screen .arena-class-ability-btn,
#combat-screen .btn-see-full-hand {
  background: var(--dp-vidrio);
  border: 1px solid var(--dp-filete);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#combat-screen .arena-auto-btn .arena-btn-label,
#combat-screen .arena-speed-btn .arena-btn-label {
  font-family: 'Cinzel', serif;
  letter-spacing: 1.5px;
}

/* ── PANEL INFERIOR + MANO ─────────────────────────────────────── */
#combat-screen .arena-action-panel {
  background: linear-gradient(0deg, rgba(8,6,3,0.92), rgba(8,6,3,0.55) 75%, transparent);
  border-top: 1px solid var(--dp-filete);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#combat-screen .arena-hand-label {
  font-family: 'Cinzel', serif;
  letter-spacing: 2.5px;
  color: rgba(228,215,184,0.55);
}
#combat-screen .arena-hand-cards .tcg-card {
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1), filter 0.22s;
}
@media (hover: hover) {
  #combat-screen .arena-hand-cards .tcg-card:hover {
    transform: translateY(-10px);
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.85)) drop-shadow(0 0 14px rgba(212,175,55,0.3));
    z-index: 5;
  }
}

/* ── PERFIL / ORBE PVP: filete premium ─────────────────────────── */
#combat-screen .combat-profile {
  background: var(--dp-vidrio);
  border: 1px solid var(--dp-filete);
  border-radius: 6px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
#combat-screen .cp-name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 1px;
}
#combat-screen .arena-vs-orb .vs-text {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  letter-spacing: 2px;
}

/* ── MOBILE (≤768px): mismo lenguaje, más liviano ──────────────── */
@media (max-width: 768px) {
  #combat-screen .arena-field-slot::before { width: 128px; height: 40px; bottom: 18px; filter: blur(7px); }
  #combat-screen .arena-field-slot::after  { width: 118px; height: 118px; bottom: -20px; border-width: 1.5px; }
  #combat-screen .arena-hud-top { backdrop-filter: none; -webkit-backdrop-filter: none; }
  #combat-screen .ext-hp-wrap,
  #combat-screen .arena-action-panel,
  #combat-screen .combat-profile { backdrop-filter: none; -webkit-backdrop-filter: none; }
  #combat-screen .arena-zone-name { letter-spacing: 1.5px; padding: 4px 8px; }
  #combat-screen .arena-turn-badge { padding: 4px 8px; }
  #combat-screen .ext-hp-bar-bg { height: 11px; }
}

/* ── ACCESIBILIDAD: sin movimiento si el sistema lo pide ───────── */
@media (prefers-reduced-motion: reduce) {
  #combat-screen .arena-field-slot::before,
  #combat-screen .arena-field-slot::after,
  #combat-screen .arena-field-slot .zone-card-slot,
  #combat-screen .ext-hp-bar-bg::after {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   v7 — CANCHA DE LUCHA + ANIMACIONES DE BATALLA AGNÓSTICAS DE ESCALA
   Las animaciones usan `translate`/`rotate` (propiedades independientes
   que NO tocan `transform`), así la carta conserva su escala natural:
   1 en desktop, 0.55 en mobile. Se acabó el agrande/achique.
   ════════════════════════════════════════════════════════════════ */

/* ── ANIMACIONES DE BATALLA (reemplazan a las que horneaban scale) ── */
#combat-screen .tcg-card.card-attacking-right {
  animation: dpAtkR 0.6s cubic-bezier(0.36, 0, 0.66, -0.2) !important;
}
#combat-screen .tcg-card.card-attacking-left {
  animation: dpAtkL 0.6s cubic-bezier(0.36, 0, 0.66, -0.2) !important;
}
@keyframes dpAtkR {
  0%   { translate: 0 0;        rotate: 0deg;   filter: none; }
  28%  { translate: -18px 4px;  rotate: -7deg;  filter: brightness(1.05); } /* anticipación */
  60%  { translate: 64px -8px;  rotate: 10deg;  filter: brightness(1.4); }  /* CONTACTO */
  74%  { translate: 48px -4px;  rotate: 7deg;   filter: brightness(1.15); }
  100% { translate: 0 0;        rotate: 0deg;   filter: none; }
}
@keyframes dpAtkL {
  0%   { translate: 0 0;        rotate: 0deg;   filter: none; }
  28%  { translate: 18px 4px;   rotate: 7deg;   filter: brightness(1.05); }
  60%  { translate: -64px -8px; rotate: -10deg; filter: brightness(1.4); }
  74%  { translate: -48px -4px; rotate: -7deg;  filter: brightness(1.15); }
  100% { translate: 0 0;        rotate: 0deg;   filter: none; }
}
#combat-screen .tcg-card.card-hurt {
  animation: dpHurt 0.5s ease !important;
}
@keyframes dpHurt {
  0%, 100% { translate: 0 0;   filter: none; }
  15%      { translate: -8px 0; filter: brightness(1.7) saturate(2) hue-rotate(-30deg); }
  35%      { translate: 6px 0;  filter: brightness(1.35) saturate(1.6) hue-rotate(-20deg); }
  55%      { translate: -4px 0; filter: brightness(1.15); }
  75%      { translate: 2px 0;  filter: none; }
}
#combat-screen .tcg-card.card-dying {
  animation: dpDying 0.85s ease-in forwards !important;
}
@keyframes dpDying {
  0%   { opacity: 1; translate: 0 0;      rotate: 0deg;  filter: none; }
  45%  { opacity: 0.7; translate: 0 8px;  rotate: 8deg;  filter: grayscale(0.6) brightness(0.7); }
  100% { opacity: 0; translate: 0 34px;   rotate: 16deg; filter: grayscale(1) brightness(0.3); }
}

/* ── CANCHA DE LUCHA (playmat con perspectiva, estilo arena TCG) ── */
#combat-screen .arena-main { position: relative; }
#combat-screen .arena-main > * { position: relative; z-index: 1; }
#combat-screen .arena-main::before {
  content: '';
  position: absolute;
  left: 50%; top: 52%;
  width: min(980px, 96%);
  height: 340px;
  translate: -50% -50%;
  transform: perspective(700px) rotateX(52deg);
  pointer-events: none; z-index: 0;
  border-radius: 22px;
  background:
    /* línea central */
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(212,175,55,0.5) calc(50% - 1px), rgba(212,175,55,0.5) calc(50% + 1px), transparent calc(50% + 1px)),
    /* mitad jugador (izq): oro vivo | mitad rival (der): bronce */
    linear-gradient(90deg, rgba(240,199,94,0.07) 0%, rgba(240,199,94,0.02) 48%, rgba(138,100,32,0.02) 52%, rgba(138,100,32,0.07) 100%),
    /* piso de obsidiana */
    radial-gradient(ellipse at 50% 40%, rgba(26,20,9,0.9), rgba(10,8,5,0.95) 75%);
  border: 1.5px solid rgba(212,175,55,0.35);
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.75),
    inset 0 0 22px rgba(212,175,55,0.06),
    0 20px 50px rgba(0,0,0,0.6);
}
/* emblema central de la cancha */
#combat-screen .arena-main::after {
  content: '';
  position: absolute;
  left: 50%; top: 52%;
  width: 150px; height: 150px;
  translate: -50% -50%;
  transform: perspective(700px) rotateX(52deg);
  pointer-events: none; z-index: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(212,175,55,0.4);
  outline: 1px dashed rgba(212,175,55,0.22);
  outline-offset: 9px;
  box-shadow: inset 0 0 26px rgba(212,175,55,0.10), 0 0 20px rgba(212,175,55,0.08);
  animation: dpEmblemPulse 6s ease-in-out infinite;
}
@keyframes dpEmblemPulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}

/* ── ENTRADA DE INVOCACIÓN con más presencia ── */
#combat-screen .summon-flash-overlay,
.summon-flash-overlay {
  background: radial-gradient(circle at 50% 60%, rgba(255,240,190,0.85), rgba(240,199,94,0.35) 45%, transparent 70%) !important;
}
.card-fly-summon {
  filter: drop-shadow(0 0 22px rgba(240,199,94,0.65)) drop-shadow(0 14px 24px rgba(0,0,0,0.8)) !important;
}

/* ── mobile: cancha más chica y liviana ── */
@media (max-width: 768px) {
  #combat-screen .arena-main::before { height: 210px; border-radius: 14px; box-shadow: inset 0 0 34px rgba(0,0,0,0.7); }
  #combat-screen .arena-main::after  { width: 92px; height: 92px; outline-offset: 6px; }
  @keyframes dpAtkR {
    0%   { translate: 0 0;        rotate: 0deg; }
    28%  { translate: -10px 2px;  rotate: -6deg; }
    60%  { translate: 34px -5px;  rotate: 8deg; filter: brightness(1.4); }
    100% { translate: 0 0;        rotate: 0deg; }
  }
  @keyframes dpAtkL {
    0%   { translate: 0 0;        rotate: 0deg; }
    28%  { translate: 10px 2px;   rotate: 6deg; }
    60%  { translate: -34px -5px; rotate: -8deg; filter: brightness(1.4); }
    100% { translate: 0 0;        rotate: 0deg; }
  }
}

/* ── reduced motion: también apaga la cancha animada ── */
@media (prefers-reduced-motion: reduce) {
  #combat-screen .arena-main::after { animation: none !important; }
}