/* ============================================================
   L2 CARD GAME — PREMIUM DARK FANTASY UI
   Inspired by: Lineage 2, Diablo, Elden Ring, MTG, Hearthstone
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@400;700;900&family=Uncial+Antiqua&display=swap');

/* ─── DESIGN TOKENS ─── */
:root {
  /* Base */
  --bg:          #0B0B0D;
  --bg2:         #111116;
  --bg3:         #16161C;
  --bg4:         #1C1C24;

  /* Gold system */
  --gold:        #D4AF37;
  --gold2:       #F0CC55;
  --gold3:       #B8941E;
  --gold-dim:    #6B5010;
  --gold-glow:   rgba(212,175,55,0.35);

  /* Rarity colors */
  --common-c:    #8A9BB0;
  --common-glow: rgba(138,155,176,0.25);
  --rare-c:      #3A7BFF;
  --rare-glow:   rgba(58,123,255,0.35);
  --epic-c:      #A855F7;
  --epic-glow:   rgba(168,85,247,0.35);
  --legend-c:    #FFD700;
  --legend-glow: rgba(255,215,0,0.45);

  /* UI */
  --red:         #C0392B;
  --green:       #27AE60;
  --text:        #C8D4E0;
  --text-dim:    #4A5A6A;
  --text-bright: #EAEAEAx;

  /* Fonts */
  --font-display: 'Cinzel Decorative', serif;
  --font-title:   'Cinzel', serif;
  --font-body:    'Uncial Antiqua', serif;

  --radius: 4px;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-title);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Atmospheric layered background */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 50% at 50% -5%, rgba(212,175,55,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 0% 100%,  rgba(58,123,255,0.04) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 100% 80%, rgba(168,85,247,0.03) 0%, transparent 50%);
}

/* Subtle noise texture overlay */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.5;
}

#app { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }

/* Header height variable — fullscreens use this to not cover the header */
:root { --header-offset: 0px; }

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold3); }

/* ─── HEADER ─── */
#header {
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(212,175,55,0.15);
  background: linear-gradient(180deg, rgba(212,175,55,0.06) 0%, transparent 100%);
  flex-shrink: 0; flex-wrap: wrap; gap: 12px;
  position: sticky; top: 0; z-index: 200;
  backdrop-filter: blur(12px);
  background-color: rgba(11,11,13,0.95);
}
#header::after {
  content: '';
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 300px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold3), transparent);
}
.header-logo {
  font-family: var(--font-display);
  font-size: clamp(18px, 4vw, 30px);
  color: var(--gold);
  text-shadow: 0 0 30px var(--gold-glow), 0 0 60px rgba(212,175,55,0.1);
  letter-spacing: 4px;
  font-weight: 900;
}
.header-logo span { color: rgba(212,175,55,0.4); font-size: 0.6em; }
.header-user {
  font-family: var(--font-title);
  font-size: 16px; letter-spacing: 2px;
  color: var(--text-dim);
  display: flex; align-items: center; gap: 14px;
}
.header-user .username { color: var(--gold); font-weight: 600; }
.btn-reset {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 2px;
  color: var(--text-dim); background: none;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 4px 10px; cursor: pointer; border-radius: 2px; transition: all 0.2s;
}
.btn-reset:hover { color: var(--red); border-color: rgba(192,57,43,0.4); }

/* ─── NAV ─── */
#nav {
  display: flex; gap: 2px; padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(11,11,13,0.8); flex-wrap: wrap; flex-shrink: 0;
}
.nav-tab {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 3px;
  text-transform: uppercase; padding: 10px 22px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-dim); cursor: pointer; transition: all 0.2s;
  position: relative; clip-path: polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
}
.nav-tab::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 2px; background: var(--gold); transition: width 0.3s;
}
.nav-tab:hover { color: var(--text); border-color: rgba(212,175,55,0.2); }
.nav-tab.active { color: var(--gold); border-color: rgba(212,175,55,0.3); background: rgba(212,175,55,0.06); }
.nav-tab.active::after { width: 60%; }

/* ─── STATS BAR ─── */
#stats-bar {
  display: flex; gap: 0; padding: 0;
  background: var(--bg2); border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap; flex-shrink: 0; overflow: hidden;
}
.sb-item {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 18px;
  border-right: 1px solid rgba(255,255,255,0.05);
  font-family: var(--font-title); font-size: 16px; letter-spacing: 1px;
}
.sb-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sb-dot.common    { background: var(--common-c); }
.sb-dot.rare      { background: var(--rare-c); box-shadow: 0 0 6px var(--rare-glow); }
.sb-dot.epic      { background: var(--epic-c); box-shadow: 0 0 6px var(--epic-glow); }
.sb-dot.legendary { background: var(--legend-c); box-shadow: 0 0 8px var(--legend-glow); }
.sb-label { color: var(--text-dim); }
.sb-value { color: var(--gold); font-weight: 700; min-width: 20px; }
.sb-dc-icon { font-size: 16px; }

/* ─── MAIN / TABS ─── */
#main { flex: 1; overflow-y: auto; }
.tab-content { display: none; padding: 28px 22px; max-width: 1500px; margin: 0 auto; }
.tab-content.active { display: block; }

/* ─── SECTION HEADERS ─── */
.section-hdr {
  font-family: var(--font-title);
  font-size: 16px; letter-spacing: 6px; text-transform: uppercase;
  color: var(--gold3); margin-bottom: 24px;
  display: flex; align-items: center; gap: 16px;
}
.section-hdr::before, .section-hdr::after {
  content: ''; flex: 1; height: 1px;
}
.section-hdr::before { background: linear-gradient(90deg, transparent, rgba(212,175,55,0.3)); }
.section-hdr::after  { background: linear-gradient(90deg, rgba(212,175,55,0.3), transparent); }

/* ─── BUTTONS ─── */
.btn {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 3px;
  text-transform: uppercase; padding: 11px 24px;
  border: 1px solid rgba(212,175,55,0.3); background: transparent;
  color: var(--text); cursor: pointer; transition: all 0.2s;
  clip-path: polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
  position: relative; overflow: hidden;
}
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(212,175,55,0.08), transparent);
  opacity: 0; transition: opacity 0.2s;
}
.btn:hover { border-color: var(--gold3); color: var(--gold); }
.btn:hover::before { opacity: 1; }
.btn.primary {
  color: var(--gold); border-color: var(--gold3);
  background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(212,175,55,0.04));
  box-shadow: 0 0 20px rgba(212,175,55,0.1), inset 0 1px 0 rgba(212,175,55,0.2);
}
.btn.primary:hover { box-shadow: 0 0 30px rgba(212,175,55,0.25), inset 0 1px 0 rgba(212,175,55,0.3); }
.btn.danger { color: var(--red); border-color: rgba(192,57,43,0.4); }
.btn.sm { font-size: 16px; padding: 7px 16px; letter-spacing: 2px; }
.btn.full { width: 100%; text-align: center; display: block; }
.btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ─── PACK SHOP ─── */
.packs-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px; margin-bottom: 40px;
}

.pack-box {
  position: relative; overflow: hidden; cursor: pointer;
  padding: 30px 22px 22px;
  text-align: center;
  transition: transform 0.25s, box-shadow 0.25s;
  clip-path: polygon(14px 0%,100% 0%,calc(100% - 14px) 100%,0% 100%);
  border: 1px solid;
}
.pack-box::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% -10%, var(--pg,rgba(255,255,255,0.05)) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.3s;
}
.pack-box::after {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pt,rgba(255,255,255,0.2)), transparent);
}
.pack-box:hover { transform: translateY(-6px); }
.pack-box:hover::before { opacity: 1; }

.pack-box.novato {
  --pg: rgba(138,155,176,0.15); --pt: rgba(138,155,176,0.3);
  border-color: rgba(138,155,176,0.2);
  background: linear-gradient(160deg, #131318, #0d0d11);
}
.pack-box.novato:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 30px rgba(138,155,176,0.12); }

.pack-box.giran {
  --pg: rgba(58,123,255,0.2); --pt: rgba(58,123,255,0.4);
  border-color: rgba(58,123,255,0.25);
  background: linear-gradient(160deg, #0d1525, #090e1a);
}
.pack-box.giran:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 30px rgba(58,123,255,0.2); }

.pack-box.epico {
  --pg: rgba(168,85,247,0.2); --pt: rgba(168,85,247,0.4);
  border-color: rgba(168,85,247,0.3);
  background: linear-gradient(160deg, #120d1e, #0c0913);
}
.pack-box.epico:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 30px rgba(168,85,247,0.2); }

.pack-box.legendario {
  --pg: rgba(255,215,0,0.2); --pt: rgba(255,215,0,0.5);
  border-color: rgba(212,175,55,0.4);
  background: linear-gradient(160deg, #1a1500, #100d00);
  animation: packLegendBreath 4s ease-in-out infinite;
}
.pack-box.legendario:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 40px rgba(255,215,0,0.25); }
@keyframes packLegendBreath {
  0%,100% { box-shadow: 0 0 15px rgba(212,175,55,0.1); }
  50%      { box-shadow: 0 0 30px rgba(212,175,55,0.2); }
}

.pack-icon { font-size: 60px; display: block; margin-bottom: 14px; position: relative; z-index: 1; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }
.pack-title { font-family: var(--font-display); font-size: 16px; letter-spacing: 2px; font-weight: 700; margin-bottom: 10px; }
.pack-box.novato    .pack-title { color: var(--common-c); }
.pack-box.giran     .pack-title { color: var(--rare-c); text-shadow: 0 0 20px var(--rare-glow); }
.pack-box.epico     .pack-title { color: var(--epic-c); text-shadow: 0 0 20px var(--epic-glow); }
.pack-box.legendario .pack-title { color: var(--legend-c); text-shadow: 0 0 20px var(--legend-glow); }
.pack-desc  { font-size: 16px; color: var(--text-dim); line-height: 1.7; margin-bottom: 10px; }
.pack-odds  { font-family: var(--font-title); font-size: 16px; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 14px; }
.pack-odds span { color: var(--gold2); }
.pack-price { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.pack-box.novato    .pack-price { color: var(--common-c); }
.pack-box.giran     .pack-price { color: var(--rare-c); }
.pack-box.epico     .pack-price { color: var(--epic-c); }
.pack-box.legendario .pack-price { color: var(--legend-c); }

/* ─── FRAME-BASED TRADING CARD ─── */
/*
  PNG frame as background. Content layered on top with absolute positioning.
  Card: 180×270px (0.667 ratio, matching 1024×1536 PNG)
  Frame zones (% of card height):
    Name plate:  6%–16%
    Art area:    18%–82%
    Stats bar:   84%–96%
*/

.tcg-card {
  width: 180px;
  height: 270px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.34,1.2,0.64,1), filter 0.2s;
  user-select: none;
  border-radius: 4px;
}
.tcg-card:hover { transform: translateY(-10px) scale(1.04) rotate(-0.5deg); }
.tcg-card.common:hover   { filter: drop-shadow(0 12px 28px rgba(100,80,40,0.6)); }
.tcg-card.rare:hover     { filter: drop-shadow(0 12px 32px rgba(58,123,255,0.6)); }
.tcg-card.legendary:hover { filter: drop-shadow(0 12px 40px rgba(255,215,0,0.7)); }
.tcg-card.selected { outline: 3px solid var(--gold); outline-offset: 4px; }

/* PNG frame fills card exactly */
.tcg-frame-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  display: block; border-radius: 4px;
  z-index: 0; pointer-events: none;
  user-select: none; -webkit-user-drag: none;
}

/* Rarity color tint over the frame */
.tcg-card.rare::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(135deg, rgba(20,50,130,0.3) 0%, transparent 50%, rgba(20,50,130,0.2) 100%);
  border-radius: 4px; mix-blend-mode: color;
}
.tcg-card.legendary::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(135deg, rgba(130,100,0,0.4) 0%, transparent 50%, rgba(200,160,0,0.3) 100%);
  border-radius: 4px; mix-blend-mode: color;
  animation: legendFrameBreath 3s ease-in-out infinite;
}

/* Count badge */
.ygo-count-badge {
  position: absolute; top: -7px; right: -7px; z-index: 20;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: #000;
  font-family: var(--font-title); font-size: 17px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px var(--gold-glow);
}

/* NAME AREA — top plate 6%–16% */
.tcg-name-area {
  position: absolute;
  top: 5%; left: 26%; right: 26%;
  height: 8%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
}
.tcg-name {
  font-family: var(--font-title); font-size: 17px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.1;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tcg-card.common .tcg-name   { color: #D4B870; text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 8px rgba(180,130,50,0.4); }
.tcg-card.rare .tcg-name     { color: #88BBFF; text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 10px rgba(58,123,255,0.6); }
.tcg-card.legendary .tcg-name { color: var(--gold2); text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 16px rgba(255,215,0,0.7); }
.tcg-stars { font-size: 9px; letter-spacing: 1px; flex-shrink: 0; }
.tcg-stars.common   { color: #8A7040; }
.tcg-stars.rare     { color: #4A90D9; text-shadow: 0 0 6px rgba(58,123,255,0.8); }
.tcg-stars.legendary { color: var(--legend-c); text-shadow: 0 0 8px rgba(255,215,0,0.8); }

/* ART AREA — 18%–82% */
.tcg-art-area {
  position: absolute; top: 13.5%; left: 25%; right: 25%; height: 68%;
  z-index: 2; overflow: hidden;
  border-radius: 70px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.tcg-art-glow {
  position: absolute; inset: 0; pointer-events: none; border-radius: 2px;
}
.tcg-art-glow.common   { background: radial-gradient(ellipse at 50% 40%, rgba(160,120,60,0.10), transparent 65%); }
.tcg-art-glow.rare     { background: radial-gradient(ellipse at 50% 40%, rgba(58,123,255,0.13), transparent 65%); }
.tcg-art-glow.legendary { background: radial-gradient(ellipse at 50% 40%, rgba(255,215,0,0.16), transparent 65%); }

.tcg-mob-icon {
  font-size: 60px; line-height: 1; position: relative; z-index: 2;
  margin-top: 8px; margin-bottom: 4px;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.9));
  transition: transform 0.18s;
  flex-shrink: 0;
}
.tcg-card:hover .tcg-mob-icon { transform: scale(1.1); }

.tcg-element-tag {
  position: absolute; top: 4px; right: 4px; z-index: 3;
  background: rgba(0,0,0,0.75); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px; padding: 2px 4px;
  display: flex; flex-direction: column; align-items: center;
  backdrop-filter: blur(4px);
}
.tcg-element-tag span:first-child { font-size: 16px; line-height: 1; }
.tcg-el-label { font-family: var(--font-title); font-size: 6px; letter-spacing: 1px; color: var(--text-dim); }

.tcg-type-line {
  font-family: var(--font-title);
  font-size: 16px;
  letter-spacing: 1px;
  width: 93%;
  text-align: left;
  padding: 0px 4px;
  position: relative;
  z-index: 2;
  margin-top: auto;
  margin-bottom: 0;
}
.tcg-type-line.common   { color: rgba(200,168,80,0.85); }
.tcg-type-line.rare     { color: rgba(100,163,255,0.85); }
.tcg-type-line.legendary { color: rgba(255,215,0,0.9); }

.tcg-ability-box {
  width: 87%;
  padding: 0px 4px;
  background: rgba(0,0,0,0.6);
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative;
  z-index: 2;
}
.tcg-ability-name {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.tcg-ability-name.common   { color: #C8A850; }
.tcg-ability-name.rare     { color: #6EA3FF; }
.tcg-ability-name.legendary { color: var(--gold2); }
.tcg-ability-text {
  font-size: 9px; color: rgba(200,200,200,0.7); line-height: 1.35; font-family: serif;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* STATS BAR — bottom plate 84%–96% */
.tcg-stats-area {
  position: absolute;
  top: 82%;
  left: 22%;
  right: 22%;
  height: 13%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding-left: 0;
}
.tcg-stat-group { display: flex; align-items: center; gap: 2px; }
.tcg-stat-icon  { font-size: 16px; line-height: 1; color: var(--gold); }
.tcg-stat-val   { font-family: var(--font-title); font-size: 17px; font-weight: 900; line-height: 1; color: var(--gold); text-shadow: 0 0 8px rgba(212,175,55,0.5); }
.tcg-stat-val.common   { color: #D4B870; text-shadow: 0 0 6px rgba(180,130,50,0.5); }
.tcg-stat-val.rare     { color: #88BBFF; text-shadow: 0 0 8px rgba(58,123,255,0.6); }
.tcg-stat-val.legendary { color: var(--gold2); text-shadow: 0 0 12px rgba(255,215,0,0.7); }
.tcg-stat-sep { color: rgba(200,168,80,0.35); font-size: 10px; }
.tcg-stat-lv  { font-family: var(--font-title); font-size: 9px; color: rgba(200,168,80,0.5); letter-spacing: 1px; margin-left: 4px; }


/* === GRID & COLLECTION === */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 22px;
}
.card-grid-wrapper { position: relative; }

/* === PICKER GRID (deck builder) === */
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 16px;
}

.picker-card {
  position: relative; cursor: pointer; border-radius: 4px;
  user-select: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
/* in-deck outline goes on the tcg-card inside */
.picker-card.in-deck .tcg-card { outline: 3px solid rgba(212,175,55,0.7); outline-offset: 3px; }
.picker-card[draggable="true"] { cursor: grab; }
.picker-card[draggable="true"]:active { cursor: grabbing; }

.in-deck-badge {
  position: absolute; top: -8px; right: -8px; z-index: 20;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold); color: #000;
  font-family: var(--font-title); font-size: 17px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 14px var(--gold-glow);
}
.picker-count {
  position: absolute; top: 6px; left: 6px; z-index: 20;
  background: rgba(0,0,0,0.75); color: var(--text-dim);
  font-family: var(--font-title); font-size: 10px;
  padding: 1px 5px; border-radius: 2px; border: 1px solid rgba(255,255,255,0.1);
}

/* The picker card IS a ygo-card — just smaller/same size, works perfectly */
.picker-card .ygo-outer-frame { min-height: 260px; }

/* Empty state */
.empty-state { grid-column:1/-1; text-align:center; padding:80px 20px; color:var(--text-dim); }
.empty-state .big { font-size:56px; margin-bottom:14px; opacity:0.4; }
.empty-state p { font-family:var(--font-title); font-size:12px; letter-spacing:3px; margin-bottom:6px; }


/* ─── COLLECTION GRID ─── */
.filter-row { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.filter-btn {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 2px;
  text-transform: uppercase; padding: 7px 16px;
  border: 1px solid rgba(255,255,255,0.08); background: transparent;
  color: var(--text-dim); cursor: pointer; transition: all 0.2s; border-radius: 2px;
}
.filter-btn:hover, .filter-btn.active {
  color: var(--gold); border-color: rgba(212,175,55,0.4);
  background: rgba(212,175,55,0.07);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 18px;
}
.card-grid-wrapper { position: relative; }
.empty-state {
  grid-column: 1/-1; text-align: center; padding: 80px 20px;
  color: var(--text-dim);
}
.empty-state .big { font-size: 56px; margin-bottom: 14px; opacity: 0.4; }
.empty-state p { font-family: var(--font-title); font-size: 16px; letter-spacing: 3px; margin-bottom: 6px; }

/* ─── DECK BUILDER ─── */
.deck-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
@media (max-width: 900px) { .deck-layout { grid-template-columns: 1fr; } }

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

/* picker-card base styles now in Yu-Gi-Oh card section */

.picker-card-icon   { font-size: 48px; line-height: 1; margin-bottom: 8px; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6)); }
.picker-card-name   {
  font-family: var(--font-title); font-size: 17px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.3; margin-bottom: 4px;
}
.picker-card-meta   { font-family: var(--font-title); font-size: 16px; color: var(--text-dim); margin-bottom: 4px; }
.picker-card-stats  { font-family: var(--font-title); font-size: 16px; color: var(--text-dim); }
.picker-count       {
  position: absolute; top: 4px; left: 4px;
  background: rgba(0,0,0,0.6); color: var(--text-dim);
  font-family: var(--font-title); font-size: 10px;
  padding: 1px 5px; border-radius: 2px; border: 1px solid rgba(255,255,255,0.1);
}
.picker-locked { position: absolute; top: 4px; right: 4px; font-size: 16px; opacity: 0.4; }

.in-deck-badge {
  position: absolute; top: -7px; right: -7px;
  background: var(--gold); color: #000;
  font-family: var(--font-display); font-size: 17px; font-weight: 900;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px var(--gold-glow);
}

/* Deck panel */
.deck-panel {
  background: var(--bg2);
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: var(--radius); padding: 20px;
  position: sticky; top: 0; max-height: 90vh; overflow-y: auto;
}
.deck-panel h3 {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 2px;
  color: var(--gold); margin-bottom: 16px;
  text-shadow: 0 0 20px var(--gold-glow);
}

.deck-drop-zone {
  min-height: 220px;
  border: 2px dashed rgba(212,175,55,0.2);
  border-radius: var(--radius); padding: 6px;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 10px;
}
.deck-drop-zone.drag-over {
  border-color: var(--gold);
  background: rgba(212,175,55,0.05);
  box-shadow: inset 0 0 20px rgba(212,175,55,0.05);
}
.drop-hint {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 2px;
  color: var(--text-dim); text-align: center; padding: 12px;
  opacity: 0.5; pointer-events: none;
}

.deck-slots { display: flex; flex-direction: column; gap: 3px; }
.deck-slot {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 2px;
  font-family: var(--font-title); font-size: 16px;
  transition: background 0.15s;
}
.deck-slot:hover { background: rgba(255,255,255,0.06); }
.slot-icon  { font-size: 16px; flex-shrink: 0; }
.slot-name  { flex: 1; color: var(--text); letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-lv    { color: var(--text-dim); font-size: 16px; flex-shrink: 0; }
.slot-count { color: var(--gold); font-size: 16px; flex-shrink: 0; }
.slot-rarity { font-size: 16px; flex-shrink: 0; }
.slot-rarity.common    { color: var(--common-c); }
.slot-rarity.rare      { color: var(--rare-c); }
.slot-rarity.epic      { color: var(--epic-c); }
.slot-rarity.legendary { color: var(--legend-c); }
.slot-remove {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 16px; padding: 3px 6px;
  border-radius: 2px; flex-shrink: 0; transition: all 0.15s; line-height: 1;
}
.slot-remove:hover { color: #fff; background: var(--red); }

/* Context menu */
#card-context-menu {
  animation: ctxIn 0.15s ease;
  font-family: var(--font-title);
}
@keyframes ctxIn { from{opacity:0;transform:translateY(-6px) scale(0.96);}to{opacity:1;transform:none;} }
.ctx-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 12px;
  border-bottom: 1px solid rgba(212,175,55,0.2); margin-bottom: 8px;
}
.ctx-icon  { font-size: 22px; }
.ctx-name  { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--gold); flex: 1; }
.ctx-lv    { font-size: 16px; color: var(--text-dim); }
.ctx-btn {
  display: block; width: 100%; padding: 9px 12px; margin-bottom: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 2px;
  color: var(--text); font-family: var(--font-title); font-size: 16px; letter-spacing: 1px;
  cursor: pointer; text-align: left; transition: all 0.15s;
}
.ctx-btn:hover      { background: rgba(212,175,55,0.1); color: var(--gold); border-color: rgba(212,175,55,0.3); }
.ctx-btn.ctx-sell   { color: #F0A030; border-color: rgba(240,160,48,0.3); }
.ctx-btn.ctx-sell:hover { background: rgba(240,160,48,0.12); }
.ctx-btn.ctx-cancel { color: var(--text-dim); font-size: 16px; margin-top: 6px; }
.ctx-no-sell { font-size: 16px; color: var(--text-dim); padding: 6px 12px; font-style: italic; }

/* ─── PvE ZONES ─── */
.zones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.zone-card {
  border: 1px solid rgba(255,255,255,0.08);
  padding: 22px 20px; cursor: pointer;
  transition: all 0.2s; position: relative; overflow: hidden;
  clip-path: polygon(12px 0%,100% 0%,calc(100% - 12px) 100%,0% 100%);
}
.zone-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.08), transparent 60%);
  opacity: 0; transition: opacity 0.3s;
}
.zone-card:hover::before { opacity: 1; }
.zone-card:hover { border-color: var(--gold3); transform: translateY(-3px); }
.zone-card.locked { opacity: 0.35; cursor: not-allowed; }
.zone-card.locked:hover { transform: none; }
.zone-icon { font-size: 38px; margin-bottom: 12px; }
.zone-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 4px; letter-spacing: 1px; }
.zone-subtitle { font-size: 16px; color: var(--text-dim); font-style: italic; margin-bottom: 10px; }
.zone-lore { font-size: 16px; color: var(--text-dim); line-height: 1.6; margin-bottom: 14px; font-family: serif; }
.zone-progress-bar-wrap { height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; margin-bottom: 10px; }
.zone-progress-bar { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--gold3), var(--gold2)); transition: width 0.5s; }
.zone-meta { display: flex; justify-content: space-between; font-family: var(--font-title); font-size: 16px; letter-spacing: 1px; color: var(--text-dim); }
.zone-meta .reward { color: var(--gold3); }

/* ─── COMBAT ARENA ─── */

/* ══ SCREEN CONTAINER ══ */
#combat-screen {
  display: none;
  position: fixed;
  top: var(--chrome-h, 0); left: 0; right: 0; bottom: 0;
  z-index: 150;
  flex-direction: column; overflow: hidden;
  font-family: var(--font-title);
  background: #000;
}
#combat-screen.active { display: flex; }

/* ══ LAYER STRUCTURE ══
   Layer 1: arena-bg (background, blurred)
   Layer 2: arena-platforms (battle lanes)
   Layer 3: cards (z-index 10+)
   Layer 4: UI (hud, buttons, log z-index 20+)
   Layer 5: banners (z-index 40)
*/

/* ── LAYER 1: BACKGROUND ── */
.arena-bg {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden;
}
.arena-sky {
  position: absolute; inset: 0;
  transition: background 0.8s;
  filter: blur(0.5px) brightness(0.75) saturate(0.9);
}

/* Dark gradient overlay — bottom 40% near black */
.arena-sky::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.30) 45%,
      rgba(0,0,0,0.78) 72%,
      rgba(0,0,0,0.95) 100%);
}

/* Zone backgrounds */
.arena-bg.zone-0 .arena-sky {
  background-image: url('../img/bg/bg-zone-0.jpg');
  background-size: cover;
  background-position: center top;
  background-color: #1A3020;
}
.arena-bg.zone-1 .arena-sky { background: radial-gradient(ellipse at 50% 30%, #3A2010 0%, #251408 40%, #160A04 70%, #0C0402 100%); }
.arena-bg.zone-2 .arena-sky { background: radial-gradient(ellipse at 50% 30%, #182035 0%, #101828 40%, #080E18 70%, #040810 100%); }
.arena-bg.zone-3 .arena-sky { background: radial-gradient(ellipse at 50% 30%, #142018 0%, #0C1810 40%, #060E08 70%, #020602 100%); }
.arena-bg.zone-4 .arena-sky { background: radial-gradient(ellipse at 50% 30%, #201530 0%, #160E22 40%, #0C0814 70%, #06040A 100%); }
.arena-bg.zone-5 .arena-sky { background: radial-gradient(ellipse at 50% 30%, #3A1800 0%, #281000 40%, #160800 70%, #0A0400 100%); }
.arena-bg.zone-6 .arena-sky { background: radial-gradient(ellipse at 50% 30%, #2A2000 0%, #1C1600 40%, #100C00 70%, #080600 100%); }
.arena-bg.zone-7 .arena-sky { background: radial-gradient(ellipse at 50% 30%, #3A0800 0%, #280400 40%, #180200 70%, #0C0100 100%); }

/* ── RAID BOSS — dungeon/caverna background ── */
.arena-bg.zone-raid .arena-sky {
  background:
    radial-gradient(ellipse at 30% 60%, rgba(80,20,0,0.6) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 40%, rgba(60,0,80,0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(120,40,0,0.4) 0%, transparent 40%),
    linear-gradient(180deg,
      #0A0408 0%,
      #120608 25%,
      #180A06 50%,
      #0E0404 75%,
      #060202 100%);
}
/* Stone texture overlay via repeating pattern */
.arena-bg.zone-raid .arena-sky::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 40px, rgba(0,0,0,0.08) 40px, rgba(0,0,0,0.08) 41px),
    repeating-linear-gradient(90deg,  transparent, transparent 60px, rgba(0,0,0,0.06) 60px, rgba(0,0,0,0.06) 61px);
  pointer-events: none;
}
/* Lava glow at the bottom edge */
.arena-bg.zone-raid .arena-fog {
  background:
    radial-gradient(ellipse 120% 25% at 50% 110%, rgba(180,40,0,0.5) 0%, rgba(100,10,0,0.3) 40%, transparent 70%),
    radial-gradient(ellipse 100% 30% at 50% 100%, rgba(0,0,0,0.8) 0%, transparent 70%);
}
/* Embers — use existing particle system with fire colors */
.arena-bg.zone-raid .particle:nth-child(1) { background: rgba(255,80,0,0.7); --dur:5s; }
.arena-bg.zone-raid .particle:nth-child(2) { background: rgba(255,140,0,0.6); --dur:7s; }
.arena-bg.zone-raid .particle:nth-child(3) { background: rgba(220,60,0,0.7); --dur:4s; }
.arena-bg.zone-raid .particle:nth-child(4) { background: rgba(255,100,0,0.5); --dur:6s; }
.arena-bg.zone-raid .particle:nth-child(5) { background: rgba(255,60,0,0.7);  --dur:8s; }
.arena-bg.zone-raid .particle:nth-child(6) { background: rgba(200,40,0,0.6);  --dur:5s; }
.arena-bg.zone-raid .particle:nth-child(7) { background: rgba(255,120,0,0.5); --dur:7s; }
.arena-bg.zone-raid .particle:nth-child(8) { background: rgba(180,30,0,0.6);  --dur:6s; }

/* Particles */
.arena-fog { position: absolute; inset: 0; background: radial-gradient(ellipse 100% 30% at 50% 100%, rgba(0,0,0,0.7) 0%, transparent 70%); }
.arena-particles { position: absolute; inset: 0; pointer-events: none; }
.particle {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  animation: particleFloat var(--dur, 8s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x, 50%); bottom: var(--y, 20%); opacity: 0;
}
.particle:nth-child(1)  { --x:10%;--y:15%;--dur:7s; --delay:0s;   background:rgba(212,175,55,0.5); }
.particle:nth-child(2)  { --x:25%;--y:25%;--dur:9s; --delay:1.5s; background:rgba(100,150,255,0.4); }
.particle:nth-child(3)  { --x:45%;--y:10%;--dur:6s; --delay:3s;   background:rgba(212,175,55,0.4); }
.particle:nth-child(4)  { --x:65%;--y:30%;--dur:11s;--delay:0.5s; background:rgba(150,100,255,0.4); }
.particle:nth-child(5)  { --x:80%;--y:20%;--dur:8s; --delay:2s;   background:rgba(212,175,55,0.5); }
.particle:nth-child(6)  { --x:35%;--y:40%;--dur:10s;--delay:4s;   background:rgba(100,200,100,0.3); }
.particle:nth-child(7)  { --x:55%;--y:15%;--dur:7s; --delay:1s;   background:rgba(212,175,55,0.4); }
.particle:nth-child(8)  { --x:90%;--y:35%;--dur:9s; --delay:3.5s; background:rgba(200,100,100,0.3); }
@keyframes particleFloat {
  0%   { opacity:0; transform: translateY(0) scale(0.5); }
  20%  { opacity:0.8; }
  80%  { opacity:0.4; }
  100% { opacity:0; transform: translateY(-100px) scale(1.2); }
}

/* ── LAYER 4: HUD TOP ── */
.arena-hud-top {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 100%);
  border-bottom: 1px solid rgba(212,175,55,0.12);
  flex-shrink: 0; flex-wrap: wrap; gap: 6px;
  backdrop-filter: blur(8px);
}
.arena-hud-left  { display: flex; align-items: center; gap: 10px; }
.arena-hud-right { display: flex; align-items: center; }
.arena-btn-surrender {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 2px;
  color: rgba(192,57,43,0.8); background: rgba(192,57,43,0.1);
  border: 1px solid rgba(192,57,43,0.3); padding: 5px 12px; cursor: pointer;
  border-radius: 2px; transition: all 0.2s;
}
.arena-btn-surrender:hover { color: #e74c3c; background: rgba(192,57,43,0.2); }
.arena-zone-name { font-family: var(--font-display); font-size: 16px; letter-spacing: 2px; color: var(--gold); text-shadow: 0 0 16px var(--gold-glow); }
.arena-turn-badge {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 2px; color: var(--text-dim);
  padding: 4px 14px; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
}
.arena-enemy-info { display: flex; align-items: center; gap: 10px; font-family: var(--font-title); font-size: 16px; letter-spacing: 1px; }
.arena-enemy-label { color: var(--text-dim); }
.arena-enemy-cards { color: var(--rare-c); }
.arena-enemy-dead  { color: var(--red); }
.arena-audio-btn {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px; padding: 4px 8px; cursor: pointer; font-size: 16px;
  transition: all 0.2s; line-height: 1;
}
.arena-audio-btn:hover { background: rgba(212,175,55,0.15); border-color: rgba(212,175,55,0.3); }

/* ── LAYER 3+2: MAIN ARENA ── */
/* ══════════════════════════════════════════════
   COMBAT ARENA — TRUE SINGLE ROW HORIZONTAL
   avatar-player | card-player | PVP | card-enemy | avatar-enemy
   ══════════════════════════════════════════════ */

.arena-main {
  flex: 1;
  position: relative; z-index: 5;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  padding: 8px 16px;
}

/* ── AVATARS (left = player, right = enemy) ── */
.arena-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
}
.arena-avatar-player { order: 1; }
.arena-avatar-enemy  { order: 5; }

/* ── FIELD SLOTS (card + HP bar stacked) ── */
.arena-field-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.arena-field-player { order: 2; }
.arena-field-enemy  { order: 4; }

/* ── PVP CENTER ── */
.arena-pvp-center {
  order: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 0 8px;
}
.arena-pvp-divider {
  width: 2px;
  height: 60px;
  background: linear-gradient(180deg,
    transparent,
    rgba(139,47,212,0.5) 30%,
    rgba(139,47,212,0.5) 70%,
    transparent);
}

/* ── PVP ORB ── */
.arena-vs-orb {
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle, #16082a, #0a0412);
  border: 2px solid rgba(139,47,212,0.6);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; flex-shrink: 0;
  box-shadow: 0 0 24px rgba(139,47,212,0.3);
  animation: vsOrbPulse 3s ease-in-out infinite;
}
@keyframes vsOrbPulse {
  0%,100% { box-shadow: 0 0 24px rgba(139,47,212,0.25); }
  50%     { box-shadow: 0 0 40px rgba(139,47,212,0.55), 0 0 80px rgba(139,47,212,0.15); }
}
.vs-glow {
  position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,47,212,0.15), transparent 70%);
}
.vs-text {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 900; letter-spacing: 2px;
  color: #c084fc; position: relative; z-index: 1;
  text-shadow: 0 0 14px rgba(192,132,252,0.9);
  animation: pvpPulse 2s ease-in-out infinite;
}
@keyframes pvpPulse {
  0%,100% { text-shadow: 0 0 14px rgba(192,132,252,0.9); }
  50%     { text-shadow: 0 0 24px rgba(220,180,255,1), 0 0 48px rgba(139,47,212,0.7); }
}

/* ── NPC IMAGES ── */
.arena-npc,
.arena-avatar {
  position: relative;
}
.npc-sprite { font-size:40px; line-height:1; filter:drop-shadow(0 4px 12px rgba(0,0,0,0.9)); animation:npcBreathe 4s ease-in-out infinite; }
@keyframes npcBreathe { 0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);} }
.npc-aura {
  position: absolute; width: 80%; height: 10px; border-radius: 50%;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  animation: auraBreath 4s ease-in-out infinite;
}
.enemy-aura  { background: radial-gradient(ellipse, rgba(192,57,43,0.7), transparent 70%); }
.player-aura { background: radial-gradient(ellipse, rgba(212,175,55,0.6), transparent 70%); }
@keyframes auraBreath { 0%,100%{opacity:0.4;transform:translateX(-50%) scale(1);}50%{opacity:1;transform:translateX(-50%) scale(1.2);} }
.npc-name {
  font-family: var(--font-title); font-size: 10px;
  letter-spacing: 2px; color: rgba(255,255,255,0.3); text-transform: uppercase;
}

/* ── CARD SLOT ── */
.zone-card-slot {
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 10;
  min-width: 180px; min-height: 200px;
}
.zone-card-slot .tcg-card {
  width: 190px; height: 285px;
  cursor: default; position: relative;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.9)) drop-shadow(0 3px 8px rgba(0,0,0,0.8));
  transition: filter 0.2s;
}
.zone-card-slot .tcg-card:hover {
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.9)) drop-shadow(0 2px 6px rgba(0,0,0,0.8));
}
.zone-card-slot .field-empty {
  width: 140px; min-height: 210px;
  border: 2px dashed rgba(212,175,55,0.14); border-radius: 6px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  color: rgba(255,255,255,0.15); font-family: var(--font-title);
  font-size: 16px; letter-spacing: 2px; text-align: center;
  background: rgba(0,0,0,0.2);
  animation: emptySlotBreath 3s ease-in-out infinite;
}
.zone-card-slot .field-empty::before { content: '⚔'; font-size: 22px; opacity: 0.08; }
@keyframes emptySlotBreath {
  0%,100% { border-color: rgba(212,175,55,0.06); }
  50%     { border-color: rgba(212,175,55,0.2); }
}
.zone-card-slot.drop-active {
  outline: 2px solid rgba(212,175,55,0.5); outline-offset: 6px;
  background: rgba(212,175,55,0.04); border-radius: 8px;
}

/* ── HP BARS external ── */
.field-hp-external { width: 100%; max-width: 200px; }

/* ── ZONE LABELS ── */
.zone-slot-label { font-family:var(--font-title); font-size:7px; letter-spacing:3px; text-transform:uppercase; }
.enemy-label  { color:rgba(192,57,43,0.5); }
.player-label { color:rgba(212,175,55,0.45); }

/* ── ENEMY FACE-DOWN HAND (vertical strip beside enemy card) ── */
.enemy-hand-display {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px; flex-shrink: 0;
}

/* ── Legacy classes ── */
.zone-platform { display: contents; }
.zone-rune     { display: none; }
.arena-enemy-side, .arena-player-side,
.arena-center-line, .arena-divider-line { display: none; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .npc-rival-img, .npc-player-img { width: 100px !important; height: 150px !important; }
  .zone-card-slot .tcg-card       { width: 160px !important; height: 240px !important; }
  .arena-main { gap: 8px; padding: 6px 10px; }
}
@media (max-width: 780px) {
  .arena-avatar { display: none; }
  .arena-main   { gap: 10px; }
  .zone-card-slot .tcg-card { width: 130px !important; height: 195px !important; }
}

/* ── LAYER 4: ACTION PANEL ── */
.arena-action-panel {
  position: relative; z-index: 20;
  background: linear-gradient(0deg, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.85) 100%);
  border-top: 1px solid rgba(212,175,55,0.15);
  flex-shrink: 0;
  backdrop-filter: blur(10px);
}

.arena-controls {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* PA orbs */
.arena-pa-section { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.arena-pa-label { font-size: 16px; letter-spacing: 3px; color: var(--text-dim); text-transform: uppercase; }
.arena-pa-orbs  { display: flex; gap: 5px; }
.pa-orb {
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F0CC55, #A07800);
  border: 1px solid rgba(212,175,55,0.4);
  box-shadow: 0 0 8px rgba(212,175,55,0.5);
  transition: all 0.2s;
}
.pa-orb.used { background: radial-gradient(circle at 35% 35%, #222, #111); border-color: rgba(255,255,255,0.08); box-shadow: none; }
.arena-pa-count { font-size: 16px; color: var(--gold); letter-spacing: 1px; min-width: 80px; }

/* Action buttons */
.arena-action-btns { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center; }

.arena-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px; cursor: pointer;
  transition: all 0.2s; font-family: var(--font-title);
}
.arena-action-btn:hover:not(:disabled) { background: rgba(255,255,255,0.08); border-color: rgba(212,175,55,0.3); }
.arena-action-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.arena-btn-icon  { font-size: 16px; line-height: 1; }
.arena-btn-label { font-size: 16px; letter-spacing: 2px; color: var(--text); text-transform: uppercase; }

/* CHAR ATTACK BUTTON (Raid mode) */
.char-attack-btn {
  border-color: rgba(139, 92, 246, 0.5) !important;
  background: rgba(139, 92, 246, 0.08) !important;
}
.char-attack-btn:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.18) !important;
  border-color: rgba(139, 92, 246, 0.7) !important;
}
.char-attack-btn .arena-btn-icon { color: #a78bfa; }
.char-attack-btn .arena-btn-label { color: #c4b5fd; font-size: 11px; letter-spacing: 1px; }
.arena-attack-btn {
  position: relative; overflow: hidden;
  padding: 10px 28px;
  background: linear-gradient(135deg, #1A1000, #0E0A00);
  border: 2px solid rgba(212,175,55,0.4);
  border-radius: 3px; cursor: pointer;
  font-family: var(--font-display);
  clip-path: polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
  transition: all 0.2s;
  animation: attackBtnPulse 3s ease-in-out infinite;
}
.arena-attack-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #2A1C00, #1A1000);
  border-color: var(--gold); transform: scale(1.05);
  box-shadow: 0 0 40px rgba(212,175,55,0.5) !important; animation: none;
}
.arena-attack-btn:disabled { opacity: 0.25; cursor: not-allowed; animation: none; }
@keyframes attackBtnPulse { 0%,100%{box-shadow:0 0 15px rgba(212,175,55,0.15);}50%{box-shadow:0 0 30px rgba(212,175,55,0.35);} }
.attack-btn-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(212,175,55,0.1), transparent 65%); animation: attackGlowPulse 3s ease-in-out infinite; pointer-events: none; }
@keyframes attackGlowPulse { 0%,100%{opacity:0.4;}50%{opacity:1;} }
.attack-btn-icon { font-size: 20px; display: block; position: relative; z-index: 1; line-height: 1; margin-bottom: 2px; }
.attack-btn-text { display: block; font-size: 16px; letter-spacing: 4px; color: var(--gold); text-shadow: 0 0 14px rgba(212,175,55,0.7); position: relative; z-index: 1; }
.attack-btn-cost { display: block; font-size: 9px; color: var(--gold-dim); letter-spacing: 1px; position: relative; z-index: 1; font-family: var(--font-title); }

/* Hand */
.arena-hand-section { padding: 6px 12px 8px; }
.arena-hand-label { font-size: 16px; letter-spacing: 3px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px; }
.arena-hand-cards { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.arena-hand-cards::-webkit-scrollbar { height: 3px; }

/* ── LAYER 4: LOG ── */
.arena-log-panel {
  position: absolute; right: 0; top: 40px; bottom: 0; width: 190px; z-index: 20;
  background: rgba(0,0,0,0.88); border-left: 1px solid rgba(255,255,255,0.05);
  display: flex; flex-direction: column; backdrop-filter: blur(8px);
}
.arena-log-title { font-family: var(--font-title); font-size: 16px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); padding: 8px 10px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; }
.arena-log-entries { flex: 1; overflow-y: auto; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.arena-log-entries .log-entry { font-size: 9.5px; line-height: 1.4; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.03); font-family: serif; }

/* ── FIELD CARD WITH PNG FRAME ── */
/* The tcg-card in the battle zone is the same PNG frame card */
/* Override only the hover/cursor behavior */
.zone-card-slot .tcg-card {
  cursor: default !important;
  will-change: transform, filter;
  transition: none !important; /* disable normal transition so animation takes over */
}
/* Disable hover transform but NOT during animation */
.zone-card-slot .tcg-card:hover:not(.card-anim-attack-player):not(.card-anim-attack-enemy):not(.card-anim-hit) {
  transform: none;
}

/* ── ATTACK/HIT ANIMATIONS ── */
@keyframes attackMovePlayer {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(-50px) scale(1.06); filter: brightness(1.4) drop-shadow(0 0 20px rgba(212,175,55,0.8)); }
  55%  { transform: translateY(-50px) scale(1.06); }
  80%  { transform: translateY(-10px) scale(1.02); }
  100% { transform: translateY(0) scale(1); filter: none; }
}
@keyframes attackMoveEnemy {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(50px) scale(1.06); filter: brightness(1.4) drop-shadow(0 0 20px rgba(192,57,43,0.8)); }
  55%  { transform: translateY(50px) scale(1.06); }
  80%  { transform: translateY(10px) scale(1.02); }
  100% { transform: translateY(0) scale(1); filter: none; }
}
@keyframes hitShake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-10px); filter: brightness(2) sepia(1) hue-rotate(-20deg) saturate(3); }
  30%  { transform: translateX(9px); filter: brightness(1.5); }
  45%  { transform: translateX(-7px); }
  60%  { transform: translateX(5px); }
  75%  { transform: translateX(-3px); }
  90%  { transform: translateX(2px); }
  100% { transform: translateX(0); filter: none; }
}
.card-anim-attack-player,
.tcg-card.card-anim-attack-player {
  animation: attackMovePlayer 0.6s ease-in-out forwards !important;
  position: relative; z-index: 15 !important;
}
.card-anim-attack-enemy,
.tcg-card.card-anim-attack-enemy  {
  animation: attackMoveEnemy  0.6s ease-in-out forwards !important;
  position: relative; z-index: 15 !important;
}
.card-anim-hit,
.tcg-card.card-anim-hit           {
  animation: hitShake 0.5s ease forwards !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .arena-log-panel { display: none; }
  .arena-npc { display: none; }
  .arena-main { padding: 0; }
  .zone-card-slot .tcg-card { width: 130px; height: 195px; }
}


/* ─── PACK OPENING OVERLAY ─── */

#pack-overlay {
  position: fixed;
  top: var(--chrome-h, 0); left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: rgba(6,6,8,0.96);
  backdrop-filter: blur(12px);
  display: none; flex-direction: column; align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#pack-overlay.active { display: flex; }
#pack-overlay::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(212,175,55,0.06), transparent 65%);
}
.pack-overlay-title {
  font-family: var(--font-display);
  font-size: clamp(18px,4vw,34px); color: var(--gold);
  text-align: center; margin-bottom: 6px;
  text-shadow: 0 0 40px var(--gold-glow);
  letter-spacing: 4px; position: relative; z-index: 1;
}
.pack-overlay-hint { font-size: 16px; color: var(--text-dim); text-align: center; margin-bottom: 28px; font-style: italic; position: relative; z-index: 1; }
.pack-cards-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; max-width: 1100px; position: relative; z-index: 1; }

/* Overlay actions — centered between card rows, elegant separator */
.overlay-actions {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  padding: 10px 0;
}
.overlay-actions::before,
.overlay-actions::after {
  content: '';
  flex: 1; height: 1px; max-width: 80px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.25));
}
.overlay-actions::after {
  background: linear-gradient(270deg, transparent, rgba(212,175,55,0.25));
}

/* ── MOBILE PACK OPENING — scroll only, keep original card size ── */
@media (max-width: 600px) {
  #pack-overlay {
    justify-content: flex-start;
    padding: 16px 12px;
  }
}

/* ── PACK CARD FLIP (completely separate from ygo-card) ── */
.pack-card-wrap {
  width: 180px; height: 270px;
  cursor: pointer; perspective: 900px;
  animation: packReveal 0.4s ease both;
  flex-shrink: 0;
}
@keyframes packReveal { from{opacity:0;transform:translateY(40px) scale(0.8);}to{opacity:1;transform:none;} }

.pack-card-inner {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.pack-card-wrap.flipped .pack-card-inner { transform: rotateY(180deg); }

.pack-card-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 8px;
  /* Dark card back — replace with real back image later via background-image */
  background: linear-gradient(160deg, #0C0A06 0%, #060402 40%, #0A0806 100%);
  border: 3px solid #3A2A10;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.8), inset 0 1px 0 rgba(212,175,55,0.1);
}
.pack-back-inner {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative;
}
/* Ornamental border inside back */
.pack-card-back::before {
  content: '';
  position: absolute; inset: 8px;
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: 4px;
}
.pack-card-back::after {
  content: '';
  position: absolute; inset: 12px;
  border: 1px solid rgba(212,175,55,0.08);
  border-radius: 3px;
}
.pack-back-symbol {
  font-size: 40px; opacity: 0.25;
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.3));
}
.pack-back-title {
  font-family: var(--font-display); font-size: 16px;
  color: rgba(212,175,55,0.5); letter-spacing: 4px; text-align: center;
}
.pack-back-subtitle {
  font-family: var(--font-title); font-size: 10px;
  color: rgba(212,175,55,0.25); letter-spacing: 3px; text-align: center;
}
.pack-back-deco {
  font-size: 16px; color: rgba(212,175,55,0.2); letter-spacing: 6px;
  margin-top: 4px;
}

/* Front - physical card (also applies to new tcg-card front-frame) */
.pack-card-front,
.pack-card-front-frame {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(180deg);
  border-radius: 8px;
  overflow: hidden;
}
.pack-card-front { border: 3px solid; display: flex; flex-direction: column; }
.pack-card-front-frame .tcg-card { width: 100%; height: 100%; pointer-events: none; border-radius: 6px; }
.pack-card-front.common   {
  border-color: #5A4520;
  background: linear-gradient(160deg, #1A1408, #0C0A04);
  box-shadow: inset 0 1px 0 rgba(160,120,60,0.2);
}
.pack-card-front.rare     {
  border-color: #1A4A8A;
  background: linear-gradient(160deg, #0A1830, #060E1E);
  box-shadow: 0 0 20px rgba(58,123,255,0.15), inset 0 1px 0 rgba(58,123,255,0.3);
}
.pack-card-front.legendary {
  border-color: #8A6A00;
  background: linear-gradient(160deg, #201500, #150E00);
  box-shadow: 0 0 35px rgba(255,215,0,0.2), inset 0 1px 0 rgba(255,215,0,0.4);
  animation: legendFrameBreath 3s ease-in-out infinite;
}

/* Name bar */
.pc-name-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pc-name {
  font-family: var(--font-title); font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; flex: 1;
}
.pc-name.common   { color: #C8A850; text-shadow: 0 1px 2px rgba(0,0,0,0.9); }
.pc-name.rare     { color: #88BBFF; text-shadow: 0 0 10px rgba(58,123,255,0.5); }
.pc-name.legendary { color: var(--gold2); text-shadow: 0 0 14px rgba(255,215,0,0.6); }
.pc-stars { font-size: 9px; letter-spacing: 0.5px; flex-shrink: 0; }
.pc-stars.common   { color: #8A7A50; }
.pc-stars.rare     { color: var(--rare-c); }
.pc-stars.legendary { color: var(--legend-c); }

/* Art */
.pc-art {
  flex: 1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin: 4px; border: 1px solid rgba(255,255,255,0.08); border-radius: 3px;
}
.pc-art-glow {
  position: absolute; inset: 0;
}
.pc-art-glow.common   { background: radial-gradient(ellipse at 50% 60%, rgba(160,120,60,0.2), transparent 65%); }
.pc-art-glow.rare     { background: radial-gradient(ellipse at 50% 60%, rgba(58,123,255,0.25), transparent 65%); }
.pc-art-glow.legendary { background: radial-gradient(ellipse at 50% 60%, rgba(255,215,0,0.3), transparent 65%); }
.pc-icon { font-size: 46px; position: relative; z-index: 2; line-height: 1; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.8)); }
.pc-el-badge {
  position: absolute; bottom: 4px; right: 5px; z-index: 3;
  background: rgba(0,0,0,0.75); border-radius: 3px; padding: 2px 4px;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column; align-items: center;
  font-size: 16px; line-height: 1;
}
.pc-el-label { font-family: var(--font-title); font-size: 6px; color: var(--text-dim); letter-spacing: 1px; }

/* Type line */
.pc-type-line {
  font-family: var(--font-title); font-size: 9px; letter-spacing: 1px;
  padding: 3px 8px; flex-shrink: 0;
}
.pc-type-line.common   { color: rgba(160,130,70,0.8); }
.pc-type-line.rare     { color: rgba(88,150,255,0.8); }
.pc-type-line.legendary { color: rgba(212,175,55,0.9); }

/* Desc */
.pc-desc {
  margin: 0 4px; padding: 4px 6px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.06); border-radius: 2px; min-height: 28px;
}
.pc-desc.common   { background: rgba(20,14,6,0.9); }
.pc-desc.rare     { background: rgba(6,10,22,0.9); }
.pc-desc.legendary { background: rgba(16,10,0,0.9); }
.pc-ability-name { font-family: var(--font-title); font-size: 9px; font-weight: 700; }
.pc-ability-name.common   { color: #C8A850; }
.pc-ability-name.rare     { color: #6EA3FF; }
.pc-ability-name.legendary { color: var(--gold2); }

/* Stats */
.pc-stats-bar {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 4px 8px; flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.pc-desc.common + .pc-type-line,
.pc-stats-bar.common { background: rgba(20,14,6,0.7); }
.pc-stats-bar.rare   { background: rgba(4,8,18,0.7); }
.pc-stats-bar.legendary { background: rgba(12,8,0,0.7); }
.pc-stat-icon { font-size: 16px; }
.pc-stat-num  { font-family: var(--font-title); font-size: 17px; font-weight: 900; }
.pc-stat-num.common   { color: #D4B870; }
.pc-stat-num.rare     { color: #88BBFF; }
.pc-stat-num.legendary { color: var(--gold2); }
.pc-stat-div  { color: rgba(255,255,255,0.2); font-size: 10px; }

/* Footer */
.pc-footer {
  display: flex; justify-content: space-between;
  padding: 3px 8px 4px; flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.pc-id, .pc-lv { font-family: var(--font-title); font-size: 6px; color: rgba(255,255,255,0.2); letter-spacing: 0.5px; }

.overlay-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 26px; position: relative; z-index: 1; }


/* ─── GAME END OVERLAY ─── */
#game-end-overlay {
  position: fixed;
  top: var(--chrome-h, 0); left: 0; right: 0; bottom: 0;
  z-index: 180;
  background: rgba(6,6,8,0.97);
  display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  padding: 20px; text-align: center;
}
#game-end-overlay.active { display: flex; }
.game-end-icon  { font-size: 90px; animation: bounceIn 0.5s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes bounceIn { from{opacity:0;transform:scale(0.3);}to{opacity:1;transform:scale(1);} }
.game-end-title { font-family: var(--font-display); font-size: clamp(24px,5vw,44px); color: var(--gold); text-shadow: 0 0 40px var(--gold-glow); letter-spacing: 4px; }
.game-end-sub   { font-family: var(--font-title); font-size: 16px; letter-spacing: 3px; color: var(--text-dim); }
.game-end-reward {
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.3);
  padding: 12px 28px; border-radius: var(--radius);
  font-family: var(--font-display); font-size: 16px; color: var(--gold); letter-spacing: 2px;
}

/* ─── LOGIN SCREEN ─── */
#login-screen {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px; padding: 24px;
}
#login-screen.hidden { display: none; }
#login-screen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(212,175,55,0.08), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(58,123,255,0.04), transparent 50%);
}
.login-logo { font-family: var(--font-display); font-size: clamp(26px,6vw,52px); color: var(--gold); text-shadow: 0 0 50px var(--gold-glow); letter-spacing: 5px; text-align: center; position: relative; z-index: 1; }
.login-sub { font-family: var(--font-title); font-size: 16px; letter-spacing: 5px; color: var(--text-dim); text-align: center; position: relative; z-index: 1; }
.login-welcome { font-size: 16px; color: rgba(200,212,224,0.6); text-align: center; line-height: 1.8; max-width: 380px; position: relative; z-index: 1; font-family: serif; }
.login-form { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 340px; position: relative; z-index: 1; }
.login-input {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 3px;
  padding: 15px 20px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,175,55,0.2); color: var(--text);
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
  clip-path: polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
}
.login-input:focus { border-color: var(--gold3); box-shadow: 0 0 20px rgba(212,175,55,0.1); }
.login-input::placeholder { color: rgba(255,255,255,0.2); }
.login-starter-info {
  background: rgba(212,175,55,0.05);
  border: 1px solid rgba(212,175,55,0.15);
  padding: 16px 20px; border-radius: var(--radius);
  font-size: 16px; color: var(--text-dim); line-height: 1.7;
  max-width: 340px; text-align: center; position: relative; z-index: 1; font-family: serif;
}
.login-starter-info strong { color: var(--gold); }

/* ─── TOAST ─── */
#toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(90px);
  background: var(--bg2);
  border: 1px solid rgba(212,175,55,0.3);
  color: var(--gold); font-family: var(--font-title);
  font-size: 16px; letter-spacing: 2px;
  padding: 13px 30px; z-index: 200;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  clip-path: polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
  white-space: nowrap;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(212,175,55,0.1);
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* ─── DC SYSTEM ─── */
.dc-shake { animation: dcShake 0.4s ease; }
@keyframes dcShake { 0%,100%{transform:none;} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }

/* ─── RULES SECTION ─── */
.rules-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 16px; }
.rule-card {
  background: var(--bg2); border: 1px solid rgba(255,255,255,0.07);
  padding: 20px; border-radius: var(--radius);
  border-top: 2px solid rgba(212,175,55,0.2);
}
.rule-card-title { font-family: var(--font-display); font-size: 16px; letter-spacing: 2px; color: var(--gold3); margin-bottom: 12px; }
.rule-card p { font-size: 16px; color: var(--text-dim); line-height: 1.85; font-family: serif; }
.rule-card strong { color: var(--text); }

/* ─── RESPONSIVE ─── */
@media (max-width:768px) {
  .combat-log-panel { display: none; }
  .combat-battlefield { gap: 16px; }
  .field-card { width: 135px; }
  .card-grid { grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); }
  .picker-grid { grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 10px; }
  .deck-layout { grid-template-columns: 1fr; }
  .deck-panel { position: static; max-height: none; }
  .packs-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width:500px) {
  .packs-row { grid-template-columns: 1fr; }
  .zones-grid { grid-template-columns: 1fr; }
  .hand-card { min-width: 70px; max-width: 70px; }
}

/* ─── MINI HAND CARD (combat) — YGO style ─── */
.arena-hand-cards { display:flex; gap:8px; overflow-x:auto; padding:4px 2px 8px; align-items:flex-end; }

.hand-card-mini {
  flex-shrink: 0;
  width: 88px;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s, filter 0.15s;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.7));
}
.hand-card-mini:hover { transform: translateY(-12px) scale(1.06); }
.hand-card-mini[draggable="true"] { cursor: grab; }
.hand-card-mini[draggable="true"]:active { cursor: grabbing; transform: translateY(-8px) scale(1.04) rotate(3deg); }

/* The frame */
.hcm-frame {
  border-radius: 5px;
  border: 2px solid;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: #0a0a0c;
}
.hcm-frame.common   { border-color: #5A4520; background: linear-gradient(160deg,#18130a,#0d0a05); box-shadow: inset 0 1px 0 rgba(160,120,60,0.2); }
.hcm-frame.rare     { border-color: #1A4A8A; background: linear-gradient(160deg,#080e1c,#040810); box-shadow: 0 0 12px rgba(58,123,255,0.15), inset 0 1px 0 rgba(58,123,255,0.25); }
.hcm-frame.legendary { border-color: #7A5A00; background: linear-gradient(160deg,#181000,#0c0800); box-shadow: 0 0 18px rgba(255,215,0,0.2), inset 0 1px 0 rgba(255,215,0,0.35); animation: legendFrameBreath 3s ease-in-out infinite; }

/* Name bar */
.hcm-name-bar {
  padding: 4px 5px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.5);
}
.hcm-name {
  font-family: var(--font-title);
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hcm-name.common   { color: #C8A850; text-shadow: 0 1px 2px rgba(0,0,0,0.9); }
.hcm-name.rare     { color: #88BBFF; text-shadow: 0 0 8px rgba(58,123,255,0.5); }
.hcm-name.legendary { color: var(--gold2); text-shadow: 0 0 10px rgba(255,215,0,0.6); }

/* Art area */
.hcm-art {
  height: 60px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* Mob image inside mini hand card — tighter mask for small area */
.hcm-art .tcg-mob-img {
  object-fit: contain;
  object-position: center 40%;
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%,
    black 40%,
    rgba(0,0,0,0.85) 60%,
    rgba(0,0,0,0.4) 78%,
    transparent 95%);
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%,
    black 40%,
    rgba(0,0,0,0.85) 60%,
    rgba(0,0,0,0.4) 78%,
    transparent 95%);
}
/* Emoji icon fallback inside mini card */
.hcm-art .tcg-mob-icon {
  font-size: 28px;
  margin: 0;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.hcm-art-glow {
  position: absolute; inset: 0;
}
.hcm-art-glow.common   { background: radial-gradient(ellipse at 50% 60%, rgba(160,120,60,0.2), transparent 65%); }
.hcm-art-glow.rare     { background: radial-gradient(ellipse at 50% 60%, rgba(58,123,255,0.25), transparent 65%); }
.hcm-art-glow.legendary { background: radial-gradient(ellipse at 50% 60%, rgba(255,215,0,0.3), transparent 65%); }

.hcm-icon { font-size: 32px; line-height: 1; position: relative; z-index: 2; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.8)); }
.hcm-el   { position: absolute; bottom: 3px; right: 4px; font-size: 16px; z-index: 3; }

/* Stats */
.hcm-stats {
  display: flex; justify-content: space-around;
  padding: 3px 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.4);
  font-family: var(--font-title); font-size: 7.5px; font-weight: 700;
}
.hcm-stats.common   { color: #D4B870; }
.hcm-stats.rare     { color: #88BBFF; }
.hcm-stats.legendary { color: var(--gold2); }

/* Level */
.hcm-lv {
  font-family: var(--font-title); font-size: 9px; letter-spacing: 1px;
  text-align: center; padding: 2px;
  border-top: 1px solid rgba(255,255,255,0.04);
  background: rgba(0,0,0,0.5);
}
.hcm-lv.common   { color: rgba(200,168,80,0.6); }
.hcm-lv.rare     { color: rgba(136,187,255,0.6); }
.hcm-lv.legendary { color: rgba(255,215,0,0.6); }

/* Field drop target */
.zone-card-slot.drop-active {
  background: rgba(212,175,55,0.1);
  border-radius: 6px;
  box-shadow: inset 0 0 30px rgba(212,175,55,0.15);
}
.zone-card-slot.drop-active .field-empty {
  border-color: rgba(212,175,55,0.5);
  color: rgba(212,175,55,0.6);
}

/* Old hand-card classes kept for compat */
.hand-card, .hand-card-el { display: none; }

/* ─── COMBAT HAND CARDS (mini physical cards) ─── */

.arena-hand-cards {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 6px 2px 8px; align-items: flex-end;
}
.arena-hand-cards::-webkit-scrollbar { height: 3px; }

.combat-hand-card {
  min-width: 100px; max-width: 100px;
  position: relative; flex-shrink: 0;
  border-radius: 6px; border: 2px solid;
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 6px 8px;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.18s, filter 0.18s;
  user-select: none;
  overflow: hidden;
}

/* Rarity frames */
.combat-hand-card.common {
  border-color: #5A4520;
  background: linear-gradient(170deg, #1A1408, #0C0A04);
  box-shadow: 0 3px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(160,120,60,0.15);
}
.combat-hand-card.rare {
  border-color: #1A4A8A;
  background: linear-gradient(170deg, #0A1830, #060E1E);
  box-shadow: 0 3px 14px rgba(0,0,0,0.6), 0 0 10px rgba(58,123,255,0.1), inset 0 1px 0 rgba(58,123,255,0.2);
}
.combat-hand-card.legendary {
  border-color: #8A6A00;
  background: linear-gradient(170deg, #201500, #150E00);
  box-shadow: 0 3px 16px rgba(0,0,0,0.6), 0 0 14px rgba(255,215,0,0.15), inset 0 1px 0 rgba(255,215,0,0.25);
  animation: legendFrameBreath 3s ease-in-out infinite;
}

/* Hover — lift */
.combat-hand-card.playable:hover {
  transform: translateY(-14px) scale(1.05);
  z-index: 10;
}
.combat-hand-card.common.playable:hover   { box-shadow: 0 12px 28px rgba(0,0,0,0.7), 0 0 16px rgba(160,120,60,0.3); }
.combat-hand-card.rare.playable:hover     { box-shadow: 0 12px 28px rgba(0,0,0,0.7), 0 0 20px rgba(58,123,255,0.4); }
.combat-hand-card.legendary.playable:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.7), 0 0 28px rgba(255,215,0,0.5); }

.combat-hand-card.locked { opacity: 0.4; cursor: not-allowed; }
.combat-hand-card[draggable="true"] { cursor: grab; }
.combat-hand-card[draggable="true"]:active { cursor: grabbing; transform: scale(0.95); }

/* Rarity top bar */
.chc-rarity-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.chc-rarity-bar.common   { background: linear-gradient(90deg, #5A4520, #A07030, #5A4520); }
.chc-rarity-bar.rare     { background: linear-gradient(90deg, #1A4A8A, #3A7BFF, #1A4A8A); }
.chc-rarity-bar.legendary { background: linear-gradient(90deg, #8A6A00, #FFD700, #8A6A00); animation: goldSweep 3s ease-in-out infinite; }

/* Card content */
.chc-icon {
  font-size: 30px; line-height: 1; margin: 4px 0 5px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
  transition: transform 0.15s;
}
.combat-hand-card.playable:hover .chc-icon { transform: scale(1.15); }

.chc-name {
  font-family: var(--font-title); font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; text-align: center;
  line-height: 1.2; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 100%;
}
.chc-name.common   { color: #C8A850; text-shadow: 0 1px 2px rgba(0,0,0,0.9); }
.chc-name.rare     { color: #6EA3FF; text-shadow: 0 0 8px rgba(58,123,255,0.4); }
.chc-name.legendary { color: var(--gold2); text-shadow: 0 0 12px rgba(255,215,0,0.5); }

.chc-level {
  font-family: var(--font-title); font-size: 9px; color: var(--text-dim);
  letter-spacing: 1px; margin-bottom: 4px;
}

.chc-stats {
  display: flex; gap: 4px; justify-content: center;
  font-family: var(--font-title); font-size: 7.5px; font-weight: 700;
  margin-bottom: 3px; flex-wrap: wrap;
}
.combat-hand-card.common .chc-stats   { color: #D4B870; }
.combat-hand-card.rare .chc-stats     { color: #88BBFF; }
.combat-hand-card.legendary .chc-stats { color: var(--gold2); }

.chc-ability {
  font-family: var(--font-title); font-size: 6.5px; color: var(--text-dim);
  text-align: center; letter-spacing: 0.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
}

.chc-action-hint {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(212,175,55,0.15);
  font-family: var(--font-title); font-size: 9px; letter-spacing: 2px;
  color: var(--gold); text-align: center; padding: 2px 0;
  opacity: 0; transition: opacity 0.15s;
}
.combat-hand-card.playable:hover .chc-action-hint { opacity: 1; }

/* Field drop zone highlight */
.zone-card-slot.drop-active {
  outline: 3px solid rgba(212,175,55,0.6);
  outline-offset: 4px;
  background: rgba(212,175,55,0.05);
  border-radius: 6px;
}

/* ─── AUDIO CONTROLS ─── */
.arena-audio-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px; padding: 5px 9px;
  cursor: pointer; font-size: 16px;
  transition: all 0.2s; line-height: 1;
}
.arena-audio-btn:hover { background: rgba(212,175,55,0.15); border-color: rgba(212,175,55,0.3); }

/* ─── COMBAT FIELD CARD — full visual card in the battle zone ─── */
/* Override field-card to look like the real trading card */

.zone-card-slot .field-card {
  width: 155px;
  min-height: 220px;
  border-radius: 8px;
  border: 3px solid;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  cursor: default;
  transition: transform 0.18s, filter 0.18s, box-shadow 0.18s;
}

/* Rarity frames in field */
.zone-card-slot .field-card.common {
  border-color: #5A4520;
  background: linear-gradient(170deg, #1A1408, #0C0A04);
  box-shadow: 0 4px 20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(160,120,60,0.2);
}
.zone-card-slot .field-card.rare {
  border-color: #1A4A8A;
  background: linear-gradient(170deg, #0A1830, #060E1E);
  box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 20px rgba(58,123,255,0.15), inset 0 1px 0 rgba(58,123,255,0.25);
}
.zone-card-slot .field-card.legendary {
  border-color: #8A6A00;
  background: linear-gradient(170deg, #201500, #150E00);
  box-shadow: 0 4px 24px rgba(0,0,0,0.7), 0 0 28px rgba(255,215,0,0.2), inset 0 1px 0 rgba(255,215,0,0.3);
  animation: legendFrameBreath 3s ease-in-out infinite;
}
.zone-card-slot .field-card.boss {
  border-color: #8A0000;
  box-shadow: 0 4px 24px rgba(0,0,0,0.7), 0 0 28px rgba(192,57,43,0.3);
}

/* Field card name bar */
.field-name-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px 4px;
  background: rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.field-name {
  font-family: var(--font-title); font-size: 17px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; flex: 1;
}
.zone-card-slot .field-card.common .field-name   { color: #C8A850; }
.zone-card-slot .field-card.rare .field-name     { color: #88BBFF; }
.zone-card-slot .field-card.legendary .field-name { color: var(--gold2); text-shadow: 0 0 10px rgba(255,215,0,0.5); }
.field-el { font-size: 16px; flex-shrink: 0; }

/* Icon area */
.field-mob-icon {
  display: flex; align-items: center; justify-content: center;
  font-size: 52px; padding: 10px 0 6px;
  position: relative;
  flex-shrink: 0;
}
.field-mob-icon::before {
  content: '';
  position: absolute; inset: 0;
}
.zone-card-slot .field-card.common .field-mob-icon::before   { background: radial-gradient(ellipse at 50% 60%, rgba(160,120,60,0.15), transparent 65%); }
.zone-card-slot .field-card.rare .field-mob-icon::before     { background: radial-gradient(ellipse at 50% 60%, rgba(58,123,255,0.18), transparent 65%); }
.zone-card-slot .field-card.legendary .field-mob-icon::before { background: radial-gradient(ellipse at 50% 60%, rgba(255,215,0,0.22), transparent 65%); }

/* HP bar */
.field-hp-bar-wrap {
  margin: 0 8px 5px;
  height: 10px; background: rgba(0,0,0,0.5); border-radius: 3px;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.field-hp-bar { height: 100%; transition: width 0.4s, background 0.4s; border-radius: 3px; }
.field-hp-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title); font-size: 7.5px; color: rgba(255,255,255,0.85);
  letter-spacing: 0.5px;
}

/* Stats row */
.field-stats-row {
  display: flex; gap: 8px; justify-content: center;
  font-family: var(--font-title); font-size: 17px; font-weight: 700;
  padding: 0 8px 4px; flex-shrink: 0;
}
.zone-card-slot .field-card.common .field-stats-row   { color: #D4B870; }
.zone-card-slot .field-card.rare .field-stats-row     { color: #88BBFF; }
.zone-card-slot .field-card.legendary .field-stats-row { color: var(--gold2); }

/* Status icons */
.field-status { display: flex; gap: 3px; justify-content: center; padding: 0 8px 3px; flex-shrink: 0; }
.status-icon  { font-size: 16px; }

/* Ability name */
.field-ability-name {
  font-family: var(--font-title); font-size: 7.5px; color: var(--gold-dim);
  letter-spacing: 1px; text-align: center;
  padding: 3px 8px 6px; flex-shrink: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ─── ATTACK & HIT ANIMATIONS ─── */

/* Player card lunges UP toward enemy */
@keyframes attackMovePlayer {
  0%   { transform: translateY(0) scale(1); filter: brightness(1); }
  30%  { transform: translateY(-45px) scale(1.08); filter: brightness(1.4) drop-shadow(0 0 16px rgba(212,175,55,0.8)); }
  55%  { transform: translateY(-45px) scale(1.08); }
  80%  { transform: translateY(-10px) scale(1.03); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}
/* Enemy card lunges DOWN toward player */
@keyframes attackMoveEnemy {
  0%   { transform: translateY(0) scale(1); filter: brightness(1); }
  30%  { transform: translateY(45px) scale(1.08); filter: brightness(1.4) drop-shadow(0 0 16px rgba(192,57,43,0.8)); }
  55%  { transform: translateY(45px) scale(1.08); }
  80%  { transform: translateY(10px) scale(1.03); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}
/* Hit shake + red flash */
@keyframes hitShake {
  0%        { transform: translateX(0); filter: brightness(1); }
  10%       { transform: translateX(-8px); filter: brightness(2) saturate(0) sepia(1) hue-rotate(-30deg); }
  25%       { transform: translateX(8px); filter: brightness(1.8) saturate(2) hue-rotate(-20deg); }
  40%       { transform: translateX(-6px); filter: brightness(1.5); }
  55%       { transform: translateX(5px); }
  70%       { transform: translateX(-3px); }
  85%       { transform: translateX(2px); }
  100%      { transform: translateX(0); filter: brightness(1); }
}

.card-anim-attack-player { animation: attackMovePlayer 0.5s ease-in-out forwards; z-index: 20; }
.card-anim-attack-enemy  { animation: attackMoveEnemy  0.5s ease-in-out forwards; z-index: 20; }
.card-anim-hit           { animation: hitShake 0.45s ease forwards; z-index: 15; }

/* ─── EMPTY FIELD (nicer look) ─── */
.zone-card-slot .field-empty {
  width: 155px; min-height: 220px;
  border: 2px dashed rgba(212,175,55,0.15);
  border-radius: 8px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  color: rgba(255,255,255,0.2);
  font-family: var(--font-title); font-size: 16px; letter-spacing: 2px;
  text-align: center; line-height: 1.6;
  animation: emptySlotBreath 3s ease-in-out infinite;
  background: rgba(0,0,0,0.2);
}
.zone-card-slot .field-empty::before {
  content: '⚔';
  font-size: 32px; opacity: 0.15;
}

/* ─── TURN BANNERS ─── */
.turn-banner {
  position: fixed;
  inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  background: rgba(0,0,0,0);
  --banner-color: #D4AF37;
}
.turn-banner.hidden { display: none; }

.turn-banner-inner {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 24px 56px;
  background: linear-gradient(135deg, rgba(0,0,0,0.92) 0%, rgba(10,8,4,0.96) 100%);
  border-top: 3px solid var(--banner-color);
  border-bottom: 3px solid var(--banner-color);
  position: relative; overflow: hidden;
  min-width: 340px;
  box-shadow:
    0 0 60px rgba(0,0,0,0.8),
    0 0 30px var(--banner-color, rgba(212,175,55,0.3));
}

/* Left/right decorative lines */
.turn-banner-inner::before,
.turn-banner-inner::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, transparent, var(--banner-color), transparent);
}
.turn-banner-inner::before { left: 0; }
.turn-banner-inner::after  { right: 0; }

/* Sweep shine */
.turn-banner-inner > *::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: bannerShine 0.8s ease forwards;
}
@keyframes bannerShine {
  0%   { left: -100%; }
  100% { left: 150%; }
}

.turn-banner-icon {
  font-size: 36px; line-height: 1;
  filter: drop-shadow(0 0 12px var(--banner-color));
}

.turn-banner-text {
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 34px);
  font-weight: 900;
  letter-spacing: 8px;
  color: var(--banner-color);
  text-shadow:
    0 0 20px var(--banner-color),
    0 0 40px rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.9);
  white-space: nowrap;
}

.turn-banner-sub {
  font-family: var(--font-title);
  font-size: 16px; letter-spacing: 3px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
}

/* Enter animation — slides in from center + scale */
.turn-banner.banner-enter .turn-banner-inner {
  animation: bannerEnter 0.35s cubic-bezier(0.34,1.4,0.64,1) forwards;
}
@keyframes bannerEnter {
  from { transform: scaleX(0.2) scaleY(0.6); opacity: 0; }
  to   { transform: scale(1);                opacity: 1; }
}

/* Exit animation — shrinks out */
.turn-banner.banner-exit .turn-banner-inner {
  animation: bannerExit 0.35s ease-in forwards;
}
@keyframes bannerExit {
  from { transform: scale(1);   opacity: 1; }
  to   { transform: scaleY(0);  opacity: 0; }
}

/* ─── HAND CARD HP BAR ─── */
.chc-hp-bar-wrap {
  width: 100%; height: 4px; background: rgba(0,0,0,0.4);
  border-radius: 2px; overflow: hidden; margin-top: 3px; flex-shrink: 0;
}
.chc-hp-bar { height: 100%; border-radius: 2px; transition: width 0.3s, background 0.3s; }

/* ─── FIELD CARD HP OVERLAY (inside tcg-art-area) ─── */
.field-hp-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: 0 4px 3px;
}
.field-hp-bar-wrap {
  width: 100%; height: 9px;
  background: rgba(0,0,0,0.6);
  border-radius: 3px; position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 3px;
}
.field-hp-bar { height: 100%; transition: width 0.35s ease, background 0.35s; border-radius: 2px; }
.field-hp-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title); font-size: 9px;
  color: rgba(255,255,255,0.9); letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.field-status { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; margin-bottom: 2px; }
.status-icon  { font-size: 16px; line-height: 1; }

/* Boss card extra glow */
.tcg-card.boss-card { filter: drop-shadow(0 0 20px rgba(192,57,43,0.5)) drop-shadow(0 8px 24px rgba(0,0,0,0.9)); }

/* Field card (in battle zone) ability box - needs space for HP bar below */
.zone-card-slot .tcg-card .tcg-ability-box {
  margin-bottom: 0;  /* hp bar is absolute, no margin needed */
}
/* Collection card ability text - max 2 lines */
.card-grid .tcg-card .tcg-ability-text,
.picker-grid .tcg-card .tcg-ability-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── MOB ART IMAGE (real creature images inside card) ─── */
.tcg-mob-img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* show full creature, no cropping */
  object-position: center 40%;  /* center vertically at 40% — shows the body */
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-user-drag: none;
  display: block;
  /* Soft vignette — gentle fade at edges, strong center visibility */
  -webkit-mask-image:
    radial-gradient(ellipse 95% 90% at 50% 50%,
      black 45%,
      rgba(0,0,0,0.9) 60%,
      rgba(0,0,0,0.5) 75%,
      transparent 92%);
  mask-image:
    radial-gradient(ellipse 95% 90% at 50% 50%,
      black 45%,
      rgba(0,0,0,0.9) 60%,
      rgba(0,0,0,0.5) 75%,
      transparent 92%);
}

/* Art area — position:absolute on the card, overflow hidden for img */
.tcg-art-area {
  position: absolute;
  top: 14%; left: 6%; right: 6%; height: 66%;
  z-index: 2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Emoji icon (fallback) stays on top of any glow */
.tcg-mob-icon {
  font-size: 52px; line-height: 1;
  position: relative; z-index: 2;
  margin-top: 6px; margin-bottom: 2px;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.9));
  transition: transform 0.18s;
  flex-shrink: 0;
}
.tcg-card:hover .tcg-mob-icon { transform: scale(1.1); }

/* When image art is present, push text content to bottom */
/* When real mob image present, all text layers go above the img (z-index 1) */
.tcg-art-area .tcg-art-glow   { z-index: 0; }
.tcg-art-area .tcg-mob-img    { z-index: 1; }
.tcg-art-area .tcg-mob-icon   { z-index: 2; }
.tcg-art-area .tcg-element-tag { z-index: 3; }
.tcg-art-area .tcg-type-line  { z-index: 3; }
.tcg-art-area .tcg-ability-box { z-index: 3; }
.tcg-art-area .field-hp-overlay { z-index: 4; }

/* Rare frame tint - blue glow effect over the frame */
.tcg-card.rare .tcg-frame-img {
  filter: brightness(1.0) saturate(1.2);
}

/* Hand card also gets mob image */
.combat-hand-card .chc-icon { 
  position: relative; z-index: 2;
}

/* ─── ENEMY FACE-DOWN HAND ─── */
.enemy-hand-display {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 4px 6px 0;
}

.enemy-card-back {
  width: 48px;
  height: 72px;   /* 0.667 ratio */
  border-radius: 4px;
  border: 2px solid #4A3020;
  background: linear-gradient(160deg, #0C0A06 0%, #060402 50%, #0A0806 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.8), inset 0 1px 0 rgba(212,175,55,0.08);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.enemy-card-back::before {
  content: '';
  position: absolute; inset: 4px;
  border: 1px solid rgba(212,175,55,0.1);
  border-radius: 2px;
}
.ecb-inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.ecb-symbol {
  font-size: 16px; opacity: 0.15;
}

/* Staggered entrance animation */
.enemy-card-back:nth-child(1) { animation: ecbIn 0.3s 0.1s ease both; }
.enemy-card-back:nth-child(2) { animation: ecbIn 0.3s 0.2s ease both; }
.enemy-card-back:nth-child(3) { animation: ecbIn 0.3s 0.3s ease both; }
.enemy-card-back:nth-child(4) { animation: ecbIn 0.3s 0.4s ease both; }
@keyframes ecbIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.8); }
  to   { opacity: 1; transform: none; }
}

/* When a card is removed (goes to field) it should look depleted */
.enemy-card-back.used { opacity: 0.3; transform: scale(0.85); }

/* Draw button hidden in 5-card mode */
.draw-btn { display: none !important; }

/* ─── RIVAL NPC IMAGE ─── */
.npc-rival-img {
  width: 170px;   /* 130 × 1.3 = 169 → 170 */
  height: 255px;  /* 195 × 1.3 = 253 → 255 */
  object-fit: contain;
  object-position: center 30%;
  /* Transparent PNG — no background treatment needed */
  filter:
    drop-shadow(0 4px 24px rgba(192,57,43,0.5))
    drop-shadow(0 8px 32px rgba(0,0,0,0.7));
  animation: npcBreathe 4s ease-in-out infinite;
  flex-shrink: 0;
  position: relative; z-index: 2;
}

/* Player NPC image */
.npc-player-img {
  width: 170px;
  height: 255px;
  object-fit: contain;
  object-position: center 20%;
  /* Transparent PNG */
  filter:
    drop-shadow(0 4px 24px rgba(212,175,55,0.45))
    drop-shadow(0 8px 32px rgba(0,0,0,0.7));
  animation: npcBreathe 4s ease-in-out infinite;
  animation-delay: 0.5s;
  flex-shrink: 0;
  position: relative; z-index: 2;
}

/* Hide old emoji sprites */
.enemy-npc .npc-sprite  { display: none; }
.player-npc .npc-sprite { display: none; }

/* ─── EXTERNAL HP BARS ─── */
.field-hp-external {
  width: 100%;
  max-width: 190px;
  min-height: 30px;
  display: block;
}
/* Ensure external HP bars are always visible */
#enemy-hp-external,
#player-hp-external {
  width: 100%;
  min-height: 28px;
}

.ext-hp-wrap {
  width: 100%;
  padding: 0 4px;
}

.ext-hp-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.ext-hp-name {
  font-family: var(--font-title);
  font-size: 17px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
}
.ext-hp-nums {
  font-family: var(--font-title);
  font-size: 16px; color: var(--text-dim); letter-spacing: 0.5px;
  white-space: nowrap;
}
.ext-hp-bar-bg {
  width: 100%; height: 11px;
  background: rgba(0,0,0,0.5);
  border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.ext-hp-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.35s ease, background-color 0.35s;
  box-shadow: 0 0 6px currentColor;
}

/* Enemy HP bar (above card) */
#enemy-hp-external {
  margin-bottom: 6px;
}
#enemy-hp-external .ext-hp-bar-fill {
  box-shadow: 0 0 8px rgba(192,57,43,0.5);
}

/* Player HP bar (below card) */
#player-hp-external {
  margin-top: 6px;
}
#player-hp-external .ext-hp-bar-fill {
  box-shadow: 0 0 8px rgba(39,174,96,0.5);
}

/* ─── CRITICAL HIT BANNER VARIANT ─── */
/* Big = larger dramatic display */
.turn-banner.banner-enter .turn-banner-inner.crit-banner {
  animation: critBannerIn 0.25s cubic-bezier(0.34,1.6,0.64,1) forwards !important;
}
@keyframes critBannerIn {
  from { transform: scaleX(0.1) scaleY(0.3); opacity: 0; }
  to   { transform: scale(1.05); opacity: 1; }
}

/* Critical banner gets a red shake */
#turn-banner.crit-active .turn-banner-inner {
  animation: critShake 0.4s ease !important;
  border-color: #FF2200 !important;
}
@keyframes critShake {
  0%,100% { transform: translateX(0) scale(1.05); }
  20%  { transform: translateX(-8px) scale(1.05); }
  40%  { transform: translateX(8px) scale(1.06); }
  60%  { transform: translateX(-5px) scale(1.05); }
  80%  { transform: translateX(4px) scale(1.05); }
}

/* ─── LOADING SCREEN ─── */
#loading-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.loading-inner {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 340px; text-align: center;
}
.loading-logo {
  font-family: var(--font-display);
  font-size: 42px; letter-spacing: 6px;
  color: var(--gold);
  text-shadow: 0 0 40px var(--gold-glow);
}
.loading-sub {
  font-family: var(--font-title);
  font-size: 16px; letter-spacing: 6px;
  color: var(--text-dim); margin-top: -12px;
}
.loading-msg {
  font-family: var(--font-title);
  font-size: 16px; letter-spacing: 1px;
  color: var(--text-dim); line-height: 1.6;
  max-width: 280px;
}
.loading-bar-wrap {
  width: 280px; height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px; overflow: hidden;
  border: 1px solid rgba(212,175,55,0.15);
}
.loading-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold3), var(--gold2));
  border-radius: 3px;
  transition: width 0.3s ease;
  box-shadow: 0 0 10px rgba(212,175,55,0.5);
}
.loading-pct {
  font-family: var(--font-display);
  font-size: 16px; color: var(--gold);
  letter-spacing: 2px;
}

/* ─── PvE SCENARIO LOADER ─── */
.arena-loading-overlay {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(0,0,0,0.85);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  backdrop-filter: blur(4px);
}
.arena-loading-text {
  font-family: var(--font-display);
  font-size: 16px; letter-spacing: 4px; color: var(--gold);
  text-shadow: 0 0 20px var(--gold-glow);
}
.arena-loading-sub {
  font-family: var(--font-title);
  font-size: 16px; letter-spacing: 2px; color: var(--text-dim);
}
.arena-loading-spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(212,175,55,0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── CARD LEVEL BADGE (below card) ─── */
.card-grid-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
}
.card-level-badge {
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 0 0 4px 4px;
  padding: 3px 10px;
  font-family: var(--font-title);
  font-size: 17px; font-weight: 700; letter-spacing: 2px;
  color: var(--gold); text-shadow: 0 0 8px var(--gold-glow);
  margin-top: -2px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
/* Hand mini card level badge */
.hcm-lv {
  font-family: var(--font-title);
  font-size: 10px; letter-spacing: 1px;
  padding: 2px 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.hcm-lv.common   { color: #C8A850; }
.hcm-lv.rare     { color: #6EA3FF; }
.hcm-lv.legendary { color: var(--gold2); }
/* Field card external level display */
.ext-hp-info .ext-hp-lv {
  font-family: var(--font-title);
  font-size: 16px; color: var(--gold-dim);
  letter-spacing: 1px; margin-left: 4px;
}

/* ─── LEVEL ARROWS ─── */
.lvl-arrow { font-weight: 900; }
.arr-low   { color: #E74C3C; }
.arr-mid   { color: #27AE60; }
.arr-high  { color: #D4AF37; }

/* ─── DECK PICKER LEVEL BADGE ─── */
.deck-lv-badge {
  margin-top: -2px;
  border-radius: 0 0 4px 4px;
  font-size: 16px;
}

/* ─── CARD LEVEL BADGE (shared) ─── */
.card-level-badge {
  background: rgba(0,0,0,0.82);
  border: 1px solid rgba(212,175,55,0.25);
  border-top: none;
  border-radius: 0 0 5px 5px;
  padding: 3px 10px;
  font-family: var(--font-title);
  font-size: 17px; font-weight: 700; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.8);
  text-align: center;
  white-space: nowrap;
}

/* ─── GACHAPONG UI ─── */
.gacha-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}
@media(max-width:900px) { .gacha-layout { grid-template-columns: 1fr; } }

.gacha-intro {
  font-family: var(--font-title); font-size: 16px; color: var(--text-dim);
  line-height: 1.7; margin-bottom: 16px;
}
.gacha-intro strong { color: var(--gold); }

/* Fusion slots */
.gacha-slots {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 14px;
}

.gacha-slot {
  min-height: 100px; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 2px dashed rgba(212,175,55,0.25);
  background: rgba(0,0,0,0.3);
  transition: all 0.2s; cursor: pointer; position: relative;
  padding: 8px;
}
.gacha-slot.empty:hover { border-color: rgba(212,175,55,0.5); background: rgba(212,175,55,0.05); }
.gs-plus { font-size: 28px; color: rgba(212,175,55,0.3); line-height: 1; }
.gs-lbl  { font-family: var(--font-title); font-size: 16px; letter-spacing: 2px; color: var(--text-dim); }

.gacha-slot.filled { border-style: solid; border-color: rgba(212,175,55,0.4); background: rgba(212,175,55,0.05); }
.gacha-slot.filled.common   { border-color: rgba(160,120,60,0.5); }
.gacha-slot.filled.rare     { border-color: rgba(58,123,255,0.5); box-shadow: 0 0 12px rgba(58,123,255,0.12); }
.gacha-slot.filled.legendary { border-color: rgba(255,215,0,0.6); box-shadow: 0 0 16px rgba(255,215,0,0.15); }

.gs-mob-icon { font-size: 32px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8)); }
.gs-name { font-family: var(--font-title); font-size: 10px; font-weight: 700; text-align: center; line-height: 1.2; letter-spacing: 0.5px; }
.gs-name.common   { color: #C8A850; }
.gs-name.rare     { color: #6EA3FF; }
.gs-name.legendary { color: var(--gold2); }
.gs-lv  { font-family: var(--font-title); font-size: 10px; color: var(--text-dim); }
.gs-remove {
  position: absolute; top: 4px; right: 4px;
  background: rgba(192,57,43,0.8); color: #fff; border: none; border-radius: 50%;
  width: 18px; height: 18px; font-size: 16px; cursor: pointer; line-height: 18px; text-align: center;
  padding: 0;
}
.gs-remove:hover { background: var(--red); }

/* Probability panel */
.gacha-prob-panel {
  background: var(--bg2); border: 1px solid rgba(212,175,55,0.15);
  border-radius: 6px; padding: 16px; margin-bottom: 16px;
}
.gacha-prob-title {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 2px;
  color: var(--gold); margin-bottom: 12px;
}
.gacha-prob-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.gpr-label {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 1px;
  min-width: 100px; color: var(--text);
}
.gpr-bar-wrap {
  flex: 1; height: 8px; background: rgba(255,255,255,0.06);
  border-radius: 4px; overflow: hidden;
}
.gpr-bar { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.gpr-bar.low  { background: linear-gradient(90deg, #E74C3C, #C0392B); }
.gpr-bar.mid  { background: linear-gradient(90deg, #27AE60, #1E8449); }
.gpr-bar.high { background: linear-gradient(90deg, #D4AF37, #F0CC55); }
.gpr-bar.rare { background: linear-gradient(90deg, #3A7BFF, #6EA3FF); }
.gpr-bar.epic { background: linear-gradient(90deg, #A855F7, #CC88FF); }
.gpr-pct {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  color: var(--text); min-width: 36px; text-align: right;
}
.gacha-prob-note {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 1px;
  color: var(--text-dim); margin-top: 10px; font-style: italic;
}

/* Pick grid */
.gacha-pick-title {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px;
}
.gacha-pick-sub { color: rgba(255,255,255,0.2); font-size: 16px; }
.gacha-pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px; max-height: 500px; overflow-y: auto;
}

.gacha-pick-card {
  background: var(--bg3); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px; padding: 8px 6px; cursor: pointer;
  transition: transform 0.15s, border-color 0.15s; text-align: center;
  position: relative; user-select: none;
}
.gacha-pick-card:hover { transform: translateY(-3px); }
.gacha-pick-card.common   { border-color: rgba(160,120,60,0.3); }
.gacha-pick-card.rare     { border-color: rgba(58,123,255,0.35); background: linear-gradient(160deg,#0a1525,var(--bg3)); }
.gacha-pick-card.legendary{ border-color: rgba(255,215,0,0.35); background: linear-gradient(160deg,#1a1200,var(--bg3)); }
.gacha-pick-card.in-gacha { opacity: 0.4; pointer-events: none; outline: 2px solid rgba(212,175,55,0.5); }
.gacha-pick-card:hover.common   { border-color: rgba(160,120,60,0.6); }
.gacha-pick-card:hover.rare     { border-color: rgba(58,123,255,0.6); box-shadow: 0 4px 16px rgba(58,123,255,0.2); }
.gacha-pick-card:hover.legendary { border-color: rgba(255,215,0,0.6); box-shadow: 0 4px 16px rgba(255,215,0,0.2); }

.gpc-frame { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 5px 5px 0 0; }
.gpc-frame.common   { background: linear-gradient(90deg,#5A4520,#A07030,#5A4520); }
.gpc-frame.rare     { background: linear-gradient(90deg,#1A4A8A,#3A7BFF,#1A4A8A); }
.gpc-frame.legendary{ background: linear-gradient(90deg,#8A6A00,#FFD700,#8A6A00); }
.gpc-icon { font-size: 28px; margin: 6px 0 4px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8)); }
.gpc-name { font-family: var(--font-title); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.2; margin-bottom: 4px; }
.gpc-name.common   { color: #C8A850; }
.gpc-name.rare     { color: #6EA3FF; }
.gpc-name.legendary{ color: var(--gold2); }
.gpc-badge { font-family: var(--font-title); font-size: 10px; color: var(--text-dim); }

/* ─── COLLECTION ZOOM MODE ─── */
.card-grid.zoom-mode {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 40px 28px;
}
.card-grid.zoom-mode .tcg-card {
  width: 340px !important;
  height: 510px !important;
}
.card-grid.zoom-mode .card-level-badge {
  font-size: 16px;
  padding: 5px 16px;
}
.card-grid.zoom-mode .lvl-arrow { font-size: 16px; }

/* ─── PvE FIELD CARD — larger (+50%) ─── */
/* was 210×315, now 240×360 */
.zone-card-slot .tcg-card {
  width: 240px !important;
  height: 360px !important;
}
.zone-card-slot { min-height: 280px; }

/* ─── EXT HP BAR — larger for 240px card ─── */
.field-hp-external { max-width: 240px; }
.ext-hp-bar-bg { height: 13px; }
.ext-hp-name { font-size: 16px; max-width: 160px; }
.ext-hp-nums { font-size: 16px; }

/* ─── DC GLOW (cuando DC >= 100) ─── */
@keyframes dcGlow {
  0%,100% { text-shadow: 0 0 0 transparent; color: var(--gold); }
  50%      { text-shadow: 0 0 12px rgba(212,175,55,0.9), 0 0 24px rgba(212,175,55,0.5); color: #FFE066; }
}
#sb-dc.dc-glow {
  animation: dcGlow 1s ease-in-out infinite;
}
.nav-tab.dc-glow {
  animation: dcGlow 1s ease-in-out infinite;
  border-color: rgba(212,175,55,0.5) !important;
}

/* ─── TALKING ISLAND CAMPAIGN OVERLAY ─── */
.ti-header {
  text-align: center; margin-bottom: 32px; position: relative; width: 100%;
}
.ti-back {
  position: absolute; top: 0; left: 0;
}
.ti-title {
  font-family: var(--font-display);
  font-size: 28px; letter-spacing: 6px; color: var(--gold);
  text-shadow: 0 0 30px rgba(212,175,55,0.5);
  margin-bottom: 6px; margin-top: 8px;
}
.ti-subtitle {
  font-family: var(--font-title); font-size: 16px;
  letter-spacing: 4px; color: var(--text-dim); margin-bottom: 14px;
}
.ti-progress-text {
  font-family: var(--font-title); font-size: 16px; color: var(--gold);
  letter-spacing: 2px;
}

/* Path */
.ti-path {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; width: 100%; max-width: 700px;
}

/* Node */
.ti-node { width: 100%; position: relative; }

.ti-connector {
  width: 3px; height: 28px;
  background: linear-gradient(180deg, rgba(212,175,55,0.15), rgba(212,175,55,0.4));
  margin: 0 auto;
}
.ti-first { display: none; }

.ti-node-inner {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg2); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 16px 20px;
  transition: all 0.2s;
}

/* States */
.ti-current .ti-node-inner {
  border-color: rgba(212,175,55,0.45);
  background: linear-gradient(135deg, rgba(212,175,55,0.07), var(--bg2));
  box-shadow: 0 0 20px rgba(212,175,55,0.12);
}
.ti-current .ti-connector {
  background: linear-gradient(180deg, rgba(212,175,55,0.4), rgba(212,175,55,0.6));
}
.ti-done .ti-node-inner {
  border-color: rgba(39,174,96,0.3);
  opacity: 0.75;
}
.ti-done .ti-connector { background: rgba(39,174,96,0.4); }
.ti-locked .ti-node-inner { opacity: 0.35; }

/* NPC icon */
.ti-npc-icon {
  font-size: 40px; flex-shrink: 0; width: 52px; text-align: center;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
}

/* NPC info */
.ti-npc-info { flex: 1; }
.ti-npc-name {
  font-family: var(--font-title); font-size: 17px; font-weight: 700;
  letter-spacing: 2px; color: var(--text); margin-bottom: 4px;
}
.ti-npc-role {
  font-family: var(--font-title); font-size: 16px;
  letter-spacing: 2px; color: var(--gold); margin-bottom: 6px;
}
.ti-npc-desc {
  font-family: var(--font-title); font-size: 16px;
  color: var(--text-dim); line-height: 1.5;
}

/* Actions */
.ti-node-action { flex-shrink: 0; min-width: 130px; text-align: center; }
.ti-badge-done {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 2px;
  color: #27AE60; background: rgba(39,174,96,0.12);
  border: 1px solid rgba(39,174,96,0.3); border-radius: 4px;
  padding: 6px 12px; display: inline-block;
}
.ti-badge-locked {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 1px;
  color: var(--text-dim); padding: 6px 12px; display: inline-block;
}

/* Mobile */
@media(max-width:600px) {
  .ti-npc-info .ti-npc-desc { display: none; }
  .ti-npc-icon { font-size: 30px; width: 38px; }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM SHOP REDESIGN
   ═══════════════════════════════════════════════════════════ */

/* ─── WELCOME BANNER ─── */
.welcome-banner {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}
.welcome-banner-inner {
  text-align: center;
  background: linear-gradient(160deg, #0d1a0d, #080f08);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 12px;
  padding: 48px 56px;
  box-shadow: 0 0 80px rgba(212,175,55,0.15), 0 0 0 1px rgba(212,175,55,0.08);
  max-width: 500px;
}
.welcome-banner-title {
  font-family: var(--font-display);
  font-size: 28px; letter-spacing: 4px;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(212,175,55,0.6);
  margin-bottom: 14px;
}
.welcome-banner-sub {
  font-family: var(--font-title);
  font-size: 16px; letter-spacing: 4px;
  color: var(--text-dim);
  margin-bottom: 32px;
}

/* ─── SHOP HEADER ─── */
.shop-header {
  text-align: center;
  padding: 24px 20px 32px;
}
.shop-header-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: 8px; color: var(--gold);
  text-shadow: 0 0 40px rgba(212,175,55,0.4);
  margin-bottom: 12px;
}
.shop-header-sub {
  font-family: var(--font-title);
  font-size: 16px; letter-spacing: 2px;
  color: var(--text-dim); line-height: 1.8;
}

/* ─── PACK ALTAR (4 pedestals) ─── */
.pack-altar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 auto 48px;
  max-width: 900px;
  padding: 0 16px;
}
@media(max-width:700px) { .pack-altar { grid-template-columns: 1fr; } }

/* ─── PEDESTAL BASE ─── */
.pack-pedestal {
  position: relative;
  background: linear-gradient(160deg, #0c0e0c, #080a08);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 28px 20px 20px;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34,1.2,0.64,1),
              border-color 0.22s, box-shadow 0.22s;
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
}
.pack-pedestal:hover {
  transform: translateY(-6px) scale(1.012);
}

/* ─── PACK AURA (background glow layer) ─── */
.pack-aura {
  position: absolute; inset: 0;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.pack-pedestal:hover .pack-aura { opacity: 1; }

/* Pack-specific aura colors */
.novato-aura    { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(160,120,60,0.12), transparent 70%); }
.giran-aura     { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(58,123,255,0.15), transparent 70%); }
.epico-aura     { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,175,55,0.18), transparent 70%); }
.legendario-aura{ background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(192,160,255,0.2), transparent 70%); }

/* Pedestal border colors per pack */
.novato-pedestal     { border-color: rgba(160,120,60,0.25); }
.giran-pedestal      { border-color: rgba(58,123,255,0.3); }
.epico-pedestal      { border-color: rgba(212,175,55,0.35); }
.legendario-pedestal { border-color: rgba(160,120,220,0.35); }

.novato-pedestal:hover     { border-color: rgba(160,120,60,0.6); box-shadow: 0 12px 40px rgba(160,120,60,0.2), 0 0 0 1px rgba(160,120,60,0.15); }
.giran-pedestal:hover      { border-color: rgba(58,123,255,0.6); box-shadow: 0 12px 40px rgba(58,123,255,0.2), 0 0 0 1px rgba(58,123,255,0.15); }
.epico-pedestal:hover      { border-color: rgba(212,175,55,0.7); box-shadow: 0 12px 40px rgba(212,175,55,0.22), 0 0 0 1px rgba(212,175,55,0.2); }
.legendario-pedestal:hover { border-color: rgba(160,120,220,0.7); box-shadow: 0 12px 40px rgba(160,120,220,0.25), 0 0 0 1px rgba(160,120,220,0.2); }

/* ─── AFFORDABLE GLOW (dynamic, added by JS) ─── */
.pack-affordable {
  animation: packGlow 1.8s ease-in-out infinite;
}
.novato-pedestal.pack-affordable     { animation-name: packGlowNovato; }
.giran-pedestal.pack-affordable      { animation-name: packGlowGiran; }
.epico-pedestal.pack-affordable      { animation-name: packGlowEpico; }
.legendario-pedestal.pack-affordable { animation-name: packGlowLegend; }

@keyframes packGlowNovato {
  0%,100% { box-shadow: 0 0 0 1px rgba(160,120,60,0.2); }
  50%     { box-shadow: 0 0 20px rgba(160,120,60,0.5), 0 0 40px rgba(160,120,60,0.2), 0 0 0 1px rgba(160,120,60,0.4); }
}
@keyframes packGlowGiran {
  0%,100% { box-shadow: 0 0 0 1px rgba(58,123,255,0.25); }
  50%     { box-shadow: 0 0 20px rgba(58,123,255,0.55), 0 0 40px rgba(58,123,255,0.25), 0 0 0 1px rgba(58,123,255,0.5); }
}
@keyframes packGlowEpico {
  0%,100% { box-shadow: 0 0 0 1px rgba(212,175,55,0.3); }
  50%     { box-shadow: 0 0 24px rgba(212,175,55,0.6), 0 0 48px rgba(212,175,55,0.25), 0 0 0 1px rgba(212,175,55,0.5); }
}
@keyframes packGlowLegend {
  0%,100% { box-shadow: 0 0 0 1px rgba(160,120,220,0.3); }
  50%     { box-shadow: 0 0 24px rgba(160,120,220,0.65), 0 0 50px rgba(160,120,220,0.3), 0 0 0 1px rgba(160,120,220,0.55); }
}

/* ─── MOST POPULAR RIBBON ─── */
.pack-ribbon {
  position: absolute; top: 12px; right: -8px;
  background: var(--gold);
  color: #000; font-family: var(--font-title);
  font-size: 17px; font-weight: 900; letter-spacing: 2px;
  padding: 4px 14px 4px 10px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 6px 50%);
  z-index: 2;
}

/* ─── GEM ICON ─── */
.pack-gem-icon { text-align: center; }
.gem {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 16px;
  position: relative; transition: transform 0.3s;
}
.pack-pedestal:hover .gem { transform: scale(1.1) rotate(3deg); }
.gem-inner { font-size: 36px; position: relative; z-index: 2; }
.gem-shine {
  position: absolute; top: 6px; left: 10px;
  width: 20px; height: 10px;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  transform: rotate(-20deg);
}

/* Gem backgrounds */
.novato-gem     { background: linear-gradient(145deg, #2a1f0a, #1a1206); border: 1px solid rgba(160,120,60,0.4); box-shadow: 0 4px 20px rgba(160,120,60,0.2); }
.giran-gem      { background: linear-gradient(145deg, #0a1528, #060d1a); border: 1px solid rgba(58,123,255,0.4); box-shadow: 0 4px 20px rgba(58,123,255,0.25); }
.epico-gem      { background: linear-gradient(145deg, #1a1400, #0d0a00); border: 1px solid rgba(212,175,55,0.5); box-shadow: 0 4px 24px rgba(212,175,55,0.3); }
.legendario-gem { background: linear-gradient(145deg, #120a22, #080512); border: 1px solid rgba(160,120,220,0.5); box-shadow: 0 4px 24px rgba(160,120,220,0.3); }

/* ─── PACK INFO ─── */
.pack-info { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.pack-name {
  font-family: var(--font-title);
  font-size: 17px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text);
}
.pack-flavor {
  font-family: var(--font-title);
  font-size: 16px; color: var(--text-dim);
  line-height: 1.6; letter-spacing: 0.5px;
}
.pack-odds-row {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px;
}
.odds-badge {
  font-family: var(--font-title);
  font-size: 10px; letter-spacing: 1px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px;
}
.common-badge  { background: rgba(160,120,60,0.15); color: #C8A850; border: 1px solid rgba(160,120,60,0.25); }
.rare-badge    { background: rgba(58,123,255,0.12); color: #6EA3FF; border: 1px solid rgba(58,123,255,0.25); }
.legend-badge  { background: rgba(212,175,55,0.1); color: var(--gold); border: 1px solid rgba(212,175,55,0.25); }

.pack-tier-row { display: flex; flex-wrap: wrap; gap: 4px; }
.tier-tag {
  font-family: var(--font-title);
  font-size: 10px; letter-spacing: 1px;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.tier-low  { color: #E74C3C; border-color: rgba(231,76,60,0.2); }
.tier-mid  { color: #27AE60; border-color: rgba(39,174,96,0.2); }
.tier-high { color: var(--gold); border-color: rgba(212,175,55,0.2); }

/* ─── PACK FOOTER ─── */
.pack-footer {
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 14px;
}
.pack-cost {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pack-cost-icon { font-size: 16px; }
.pack-cost-val  {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700; letter-spacing: 2px;
  color: var(--gold);
}

/* ─── PACK BUTTONS ─── */
.pack-btn {
  width: 100%; padding: 11px 0;
  border-radius: 6px; border: 1px solid;
  font-family: var(--font-title); font-size: 16px;
  font-weight: 700; letter-spacing: 2px;
  cursor: pointer; transition: all 0.18s; text-transform: uppercase;
}
.novato-btn     { background: rgba(160,120,60,0.12); color: #C8A850; border-color: rgba(160,120,60,0.35); }
.novato-btn:hover { background: rgba(160,120,60,0.25); }
.giran-btn      { background: rgba(58,123,255,0.12); color: #6EA3FF; border-color: rgba(58,123,255,0.4); }
.giran-btn:hover { background: rgba(58,123,255,0.25); }
.epico-btn      {
  background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(160,120,0,0.15));
  color: var(--gold); border-color: rgba(212,175,55,0.5);
  animation: epicoBtnPulse 2.5s ease-in-out infinite;
}
.epico-btn:hover { background: linear-gradient(135deg, rgba(212,175,55,0.35), rgba(160,120,0,0.3)); }
@keyframes epicoBtnPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
  50%     { box-shadow: 0 0 12px 2px rgba(212,175,55,0.3); }
}
.legendario-btn {
  background: linear-gradient(135deg, rgba(160,120,220,0.18), rgba(80,40,140,0.12));
  color: #b388ff; border-color: rgba(160,120,220,0.45);
}
.legendario-btn:hover { background: linear-gradient(135deg, rgba(160,120,220,0.3), rgba(80,40,140,0.25)); }

/* ─── RARITY SHOWCASE ─── */
.rarity-showcase { margin: 8px 0 32px; }
.rarity-showcase-title {
  font-family: var(--font-title);
  font-size: 16px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--text-dim); text-align: center;
  margin-bottom: 20px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.rarity-showcase-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media(max-width:760px) { .rarity-showcase-grid { grid-template-columns: 1fr; } }

.rarity-card {
  border-radius: 8px; padding: 18px 16px;
  border: 1px solid; background: var(--bg2);
}
.common-rarity    { border-color: rgba(160,120,60,0.25); }
.rare-rarity      { border-color: rgba(58,123,255,0.25); }
.legendary-rarity { border-color: rgba(212,175,55,0.3); background: linear-gradient(160deg, rgba(212,175,55,0.04), var(--bg2)); }

.rarity-card-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.rarity-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.common-dot    { background: #C8A850; box-shadow: 0 0 8px rgba(200,168,80,0.6); }
.rare-dot      { background: #6EA3FF; box-shadow: 0 0 8px rgba(110,163,255,0.6); }
.legendary-dot { background: var(--gold); box-shadow: 0 0 10px rgba(212,175,55,0.8); }

.rarity-card-name {
  font-family: var(--font-title); font-size: 16px;
  font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
}
.common-rarity .rarity-card-name    { color: #C8A850; }
.rare-rarity .rarity-card-name      { color: #6EA3FF; }
.legendary-rarity .rarity-card-name { color: var(--gold); }

.rarity-tiers { display: flex; flex-direction: column; gap: 10px; }
.rarity-tier  { display: flex; align-items: flex-start; gap: 10px; }
.tier-arrow   { font-weight: 900; font-size: 18px; flex-shrink: 0; width: 22px; }
.tier-label   { font-family: var(--font-title); font-size: 17px; font-weight: 700; letter-spacing: 1px; color: var(--text); margin-bottom: 2px; }
.tier-desc    { font-family: var(--font-title); font-size: 16px; color: var(--text-dim); line-height: 1.5; }

/* ─── ENEMY HAND ROW (horizontal, above arena) ─── */
.arena-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative; z-index: 5;
}

.enemy-hand-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 4px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(192,57,43,0.06), transparent);
  border-bottom: 1px solid rgba(192,57,43,0.1);
}

/* Now arena-main fills the remaining space */
.arena-wrapper .arena-main {
  flex: 1;
}

/* Enemy hand display — HORIZONTAL row like player hand */
.enemy-hand-display {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── ENEMY CARD BACK — redesigned, same size as player hand cards ─── */
.enemy-card-back {
  width: 52px;
  height: 78px;
  border-radius: 5px;
  border: 1px solid rgba(192,57,43,0.35);
  background: linear-gradient(160deg, #0f0505, #070202);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.7);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

/* Cross pattern on back */
.enemy-card-back::before {
  content: '';
  position: absolute; inset: 4px;
  border: 1px solid rgba(192,57,43,0.12);
  border-radius: 3px;
}

.ecb-inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; position: relative; z-index: 1;
}
.ecb-symbol { font-size: 18px; opacity: 0.12; }

/* ── WAITING (normal face-down) ── */
.ecb-waiting {
  border-color: rgba(192,57,43,0.3);
  opacity: 0.9;
}

/* ── ACTIVE (currently in field — gold highlight) ── */
.ecb-active {
  border-color: rgba(212,175,55,0.7);
  background: linear-gradient(160deg, #1a1200, #0d0900);
  box-shadow: 0 0 12px rgba(212,175,55,0.4), 0 3px 10px rgba(0,0,0,0.7);
  animation: ecbActivePulse 1.5s ease-in-out infinite;
}
.ecb-active-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(212,175,55,0.15), transparent 70%);
  border-radius: 5px;
}
@keyframes ecbActivePulse {
  0%,100% { box-shadow: 0 0 12px rgba(212,175,55,0.3); }
  50%     { box-shadow: 0 0 22px rgba(212,175,55,0.6), 0 0 40px rgba(212,175,55,0.2); }
}

/* ── DEAD (crossed out) ── */
.ecb-dead {
  border-color: rgba(80,80,80,0.3);
  background: linear-gradient(160deg, #050505, #030303);
  opacity: 0.45;
  filter: grayscale(0.8);
}
.ecb-dead .ecb-symbol { opacity: 0.04; }

/* Red X overlay */
.ecb-dead-x {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900;
  color: rgba(192,57,43,0.85);
  text-shadow: 0 0 6px rgba(192,57,43,0.5);
  z-index: 3;
  line-height: 1;
}

/* Entrance animation (staggered) */
.enemy-card-back:nth-child(1) { animation: ecbIn 0.3s 0.05s ease both; }
.enemy-card-back:nth-child(2) { animation: ecbIn 0.3s 0.12s ease both; }
.enemy-card-back:nth-child(3) { animation: ecbIn 0.3s 0.19s ease both; }
.enemy-card-back:nth-child(4) { animation: ecbIn 0.3s 0.26s ease both; }
.enemy-card-back:nth-child(5) { animation: ecbIn 0.3s 0.33s ease both; }
@keyframes ecbIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.85); }
  to   { opacity: 1; transform: none; }
}
/* Dead cards skip the animation once marked */
.ecb-dead { animation: none !important; }

/* ── Label above enemy hand ── */
.enemy-hand-row .arena-hand-label {
  color: rgba(192,57,43,0.55);
  letter-spacing: 3px;
  font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════
   CHARACTER CREATION SCREEN
   ═══════════════════════════════════════════════════════════ */

#login-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 100% 80% at 50% 20%, rgba(80,40,120,0.15), transparent 60%),
              linear-gradient(180deg, #04060a 0%, #070410 100%);
  overflow-y: auto; padding: 20px;
}

.cc-bg-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cc-panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 860px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  padding: 32px 24px;
}
.cc-panel.hidden { display: none !important; }

.cc-logo {
  font-family: var(--font-display);
  font-size: 32px; letter-spacing: 8px; color: var(--gold);
  text-shadow: 0 0 40px rgba(212,175,55,0.5);
}
.cc-sub {
  font-family: var(--font-title);
  font-size: 16px; letter-spacing: 5px; color: var(--text-dim);
  margin-top: -16px;
}
.cc-title {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: 5px; color: var(--text);
  margin-bottom: 4px;
}

/* ── RACE CARDS ── */
.cc-races {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px; width: 100%;
}
@media(max-width:780px) { .cc-races { grid-template-columns: repeat(3, 1fr); } }
@media(max-width:480px) { .cc-races { grid-template-columns: repeat(2, 1fr); } }

.cc-race-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px; padding: 16px 12px; cursor: pointer;
  transition: all 0.2s; text-align: center;
  display: flex; flex-direction: column; gap: 6px;
}
.cc-race-card:hover {
  border-color: rgba(212,175,55,0.3);
  background: rgba(212,175,55,0.04);
  transform: translateY(-3px);
}
.cc-race-card.selected {
  border-color: rgba(212,175,55,0.6);
  background: rgba(212,175,55,0.08);
  box-shadow: 0 0 20px rgba(212,175,55,0.15);
}
.cc-race-icon { font-size: 32px; line-height: 1.2; }
.cc-race-name {
  font-family: var(--font-title); font-size: 17px; font-weight: 700;
  letter-spacing: 2px; color: var(--text);
}
.cc-race-desc {
  font-family: var(--font-title); font-size: 16px; color: var(--text-dim);
  line-height: 1.5;
}
.cc-race-buff {
  font-family: var(--font-title); font-size: 10px;
  color: rgba(192,132,252,0.7); line-height: 1.4;
  background: rgba(139,47,212,0.06); border-radius: 3px; padding: 4px 6px;
}
.cc-buff-tag { color: var(--text-dim); }

/* ── SEX SELECTION ── */
.cc-sexes { display: flex; gap: 20px; justify-content: center; }
.cc-sex-card {
  width: 120px; height: 120px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; cursor: pointer; transition: all 0.2s;
}
.cc-sex-card:hover { border-color: rgba(212,175,55,0.3); transform: translateY(-3px); }
.cc-sex-card.selected {
  border-color: rgba(212,175,55,0.6); background: rgba(212,175,55,0.08);
  box-shadow: 0 0 20px rgba(212,175,55,0.12);
}
.cc-sex-icon { font-size: 40px; line-height: 1; }
.cc-sex-label { font-family: var(--font-title); font-size: 16px; letter-spacing: 3px; color: var(--text); }

/* ── RACE PREVIEW ── */
.cc-race-preview {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 24px;
  background: rgba(255,255,255,0.03); border-radius: 8px;
  border: 1px solid rgba(212,175,55,0.15);
}
.cc-preview-icon { font-size: 40px; }
.cc-preview-name { font-family: var(--font-title); font-size: 16px; letter-spacing: 3px; color: var(--gold); }

/* ── NAME STEP ── */
.cc-name-input { width: 100%; max-width: 360px; }
.cc-char-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; border-radius: 6px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
}
.cc-summary-icon { font-size: 24px; }
.cc-summary-text { font-family: var(--font-title); font-size: 16px; letter-spacing: 2px; color: var(--text); }

.cc-starter-note {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 1px;
  color: var(--text-dim); text-align: center; line-height: 1.8;
}
.cc-starter-note strong { color: var(--gold); }

/* ── NAV BUTTONS ── */
.cc-nav-row { display: flex; gap: 12px; align-items: center; justify-content: center; }
.cc-back-btn { opacity: 0.7; }
.cc-next-btn { min-width: 180px; }

/* ═══════════════════════════════════════════════════════════
   HEADER — CHARACTER INFO
   ═══════════════════════════════════════════════════════════ */

.header-char {
  display: flex; align-items: center; gap: 10px;
}
.header-char-avatar {
  font-size: 22px; line-height: 1; flex-shrink: 0;
}
.header-char-info { display: flex; flex-direction: column; gap: 3px; }
.header-char-name {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-title); font-size: 16px; color: var(--text);
}
.username { font-weight: 700; letter-spacing: 1px; }
.header-char-level {
  font-family: var(--font-display); font-size: 16px;
  color: #c084fc; font-weight: 700; letter-spacing: 1px;
  background: rgba(139,47,212,0.15); border-radius: 3px; padding: 1px 5px;
  border: 1px solid rgba(139,47,212,0.25);
}
.header-char-race {
  font-family: var(--font-title); font-size: 16px; color: var(--text-dim);
}

/* Header XP bar */
.header-xp-bar-wrap {
  width: 120px; height: 4px;
  background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden;
}
.header-xp-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #7c3aed, #c084fc);
  border-radius: 2px;
  transition: width 0.6s ease;
  box-shadow: 0 0 6px rgba(192,132,252,0.5);
}

.header-right {
  display: flex; align-items: center;
}

/* ═══════════════════════════════════════════════════════════
   ARENA — CHARACTER XP + INFO
   ═══════════════════════════════════════════════════════════ */

.arena-char-info {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 100%; padding: 0 4px;
}
.arena-char-level {
  font-family: var(--font-display); font-size: 17px; font-weight: 900;
  color: #c084fc; letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(192,132,252,0.7);
}
.arena-xp-bar-wrap {
  width: 100%; height: 6px;
  background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden;
  border: 1px solid rgba(139,47,212,0.15);
}
.arena-xp-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #5b21b6, #c084fc);
  border-radius: 3px;
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(192,132,252,0.6);
}
.arena-char-race {
  font-family: var(--font-title); font-size: 10px; letter-spacing: 2px;
}
.arena-char-buff {
  font-family: var(--font-title); font-size: 10px; letter-spacing: 1px;
  background: rgba(139,47,212,0.1); border-radius: 3px; padding: 2px 6px;
  border: 1px solid rgba(139,47,212,0.2); margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════
   LEVEL-UP BANNER
   ═══════════════════════════════════════════════════════════ */

.levelup-banner {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 999; opacity: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
  text-align: center; pointer-events: none;
  background: linear-gradient(160deg, #1a0d2e, #0d0618);
  border: 1px solid rgba(192,132,252,0.5);
  border-radius: 12px; padding: 32px 48px;
  box-shadow: 0 0 60px rgba(139,47,212,0.4), 0 0 120px rgba(139,47,212,0.15);
  min-width: 280px;
}
.levelup-banner.lu-visible {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
.lu-glow {
  position: absolute; inset: -20px; border-radius: 20px;
  background: radial-gradient(ellipse, rgba(139,47,212,0.2), transparent 70%);
  animation: luGlowPulse 1s ease-in-out infinite;
}
@keyframes luGlowPulse {
  0%,100% { opacity: 0.5; }
  50%     { opacity: 1; }
}
.lu-icon { font-size: 48px; margin-bottom: 8px; animation: luSpin 1s ease; }
@keyframes luSpin { from { transform: rotate(-10deg) scale(0.5); } to { transform: none; } }
.lu-title {
  font-family: var(--font-display); font-size: 28px; font-weight: 900;
  letter-spacing: 6px; color: #c084fc;
  text-shadow: 0 0 20px rgba(192,132,252,0.8);
  margin-bottom: 6px;
}
.lu-sub {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 3px;
  color: var(--text-dim); margin-bottom: 10px;
}
.lu-buff {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 1px;
  color: #c084fc; background: rgba(139,47,212,0.12);
  border: 1px solid rgba(139,47,212,0.3); border-radius: 4px; padding: 6px 12px;
}

/* ═══════════════════════════════════════════════════════════
   GACHAPONG REDESIGN — Real cards + color-coded prob bars
   ═══════════════════════════════════════════════════════════ */

/* ── GACHA SLOTS: real cards ── */
.gacha-slots {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 14px;
}

.gacha-slot {
  border-radius: 8px; border: 2px dashed rgba(212,175,55,0.2);
  background: rgba(0,0,0,0.25);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 140px; position: relative;
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer; padding: 8px;
}
.gacha-slot.empty:hover {
  border-color: rgba(212,175,55,0.45);
  background: rgba(212,175,55,0.04);
}
.gacha-slot.filled {
  border-style: solid; min-height: unset;
  padding: 6px 6px 28px;
}
.gacha-slot.filled.common    { border-color: rgba(160,120,60,0.4); }
.gacha-slot.filled.rare      { border-color: rgba(58,123,255,0.5); box-shadow: 0 0 14px rgba(58,123,255,0.12); }
.gacha-slot.filled.legendary { border-color: rgba(212,175,55,0.5); box-shadow: 0 0 18px rgba(212,175,55,0.15); }

/* Empty state */
.gs-empty-icon {
  font-size: 28px; color: rgba(212,175,55,0.2); line-height: 1; margin-bottom: 4px;
}
.gs-empty-label {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 2px;
  color: var(--text-dim); text-transform: uppercase;
}

/* Real card inside slot */
.gs-real-card {
  width: 110px; height: 165px; position: relative; pointer-events: none;
}
.gs-real-card .tcg-card {
  width: 110px !important; height: 165px !important;
  pointer-events: none;
}

/* Level badge below the card */
.gs-card-badge {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-title); font-size: 16px; letter-spacing: 1px;
  color: var(--text); background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 3px;
  padding: 2px 8px; white-space: nowrap; z-index: 5;
}

/* Remove button */
.gs-remove {
  position: absolute; top: 4px; right: 4px; z-index: 10;
  background: rgba(192,57,43,0.85); color: #fff; border: none;
  border-radius: 50%; width: 20px; height: 20px; font-size: 16px;
  cursor: pointer; line-height: 20px; text-align: center; padding: 0;
  transition: background 0.15s;
}
.gs-remove:hover { background: var(--red); }

/* ── PICK GRID: real mini cards ── */
.gacha-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px; max-height: 460px; overflow-y: auto;
  padding: 4px 2px;
}

.gacha-pick-card {
  position: relative; cursor: pointer;
  border-radius: 6px; overflow: visible;
  transition: transform 0.18s cubic-bezier(0.34,1.2,0.64,1);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.gacha-pick-card:hover { transform: translateY(-4px) scale(1.04); }
.gacha-pick-card.in-gacha { opacity: 0.35; pointer-events: none; }

/* Real card inside pick grid */
.gpc-real-card {
  width: 100px; height: 150px; position: relative;
}
.gpc-real-card .tcg-card {
  width: 100px !important; height: 150px !important;
  pointer-events: none;
}

/* Footer below pick card */
.gpc-footer {
  font-family: var(--font-title); font-size: 10px; letter-spacing: 1px;
  color: var(--text-dim); text-align: center;
}

/* "✓ EN USO" overlay badge */
.gpc-in-slot-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(39,174,96,0.9); color: #fff;
  font-family: var(--font-title); font-size: 17px; font-weight: 700;
  letter-spacing: 2px; padding: 4px 10px; border-radius: 4px;
  white-space: nowrap; pointer-events: none; z-index: 5;
}

/* ── PROBABILITY PANEL — redesigned ── */
.gacha-prob-panel {
  background: var(--bg2);
  border: 1px solid rgba(212,175,55,0.12);
  border-radius: 8px; padding: 16px 18px; margin-bottom: 16px;
}
.gacha-prob-title {
  font-family: var(--font-title); font-size: 16px;
  letter-spacing: 3px; color: var(--gold);
  margin-bottom: 14px; text-transform: uppercase;
  border-bottom: 1px solid rgba(212,175,55,0.1); padding-bottom: 8px;
}

/* Empty state inside prob panel */
.gpr2-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 0;
}
.gpr2-empty-icon { font-size: 28px; opacity: 0.4; }
.gpr2-empty-txt {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 1px;
  color: var(--text-dim); text-align: center; line-height: 1.6;
}

/* Partial: slot dots */
.gpr2-partial-msg {
  font-family: var(--font-title); font-size: 16px; color: var(--gold);
  letter-spacing: 1px; margin-bottom: 10px; text-align: center;
}
.gpr2-progress-slots {
  display: flex; gap: 6px; justify-content: center; margin-bottom: 8px;
}
.gpr2-slot-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  transition: all 0.3s;
}
.gpr2-slot-dot.filled {
  background: var(--gold); border-color: rgba(212,175,55,0.5);
  box-shadow: 0 0 6px rgba(212,175,55,0.4);
}
.gpr2-hint {
  font-family: var(--font-title); font-size: 16px; color: var(--text-dim);
  text-align: center; letter-spacing: 1px;
}

/* Full prob rows */
.gpr2-rows { display: flex; flex-direction: column; gap: 10px; }

.gacha-prob-row2 {
  display: flex; flex-direction: column; gap: 5px;
}
.gpr2-header {
  display: flex; justify-content: space-between; align-items: center;
}
.gpr2-label {
  font-family: var(--font-title); font-size: 16px;
  letter-spacing: 1px; color: var(--text);
}
.gpr2-pct {
  font-family: var(--font-display); font-size: 16px;
  font-weight: 700; letter-spacing: 1px; min-width: 38px; text-align: right;
}

/* ── BAR ── */
.gpr2-bar-bg {
  width: 100%; height: 10px;
  background: rgba(0,0,0,0.4);
  border-radius: 5px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
}
.gpr2-bar-fill {
  height: 100%; border-radius: 5px;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
  position: relative;
}
/* Subtle inner shine on bar */
.gpr2-bar-fill::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: rgba(255,255,255,0.15); border-radius: 5px 5px 0 0;
}

/* ── COLOR CLASSES (auto-applied by gprColor()) ── */
.gpr2-pct.gpr-green    { color: #2ecc71; }
.gpr2-pct.gpr-yellow   { color: #f1c40f; }
.gpr2-pct.gpr-red      { color: #e74c3c; }

.gpr2-bar-fill.gpr-green {
  background: linear-gradient(90deg, #1a6b35, #2ecc71);
  box-shadow: 0 0 8px rgba(46,204,113,0.4);
}
.gpr2-bar-fill.gpr-yellow {
  background: linear-gradient(90deg, #7a6000, #f1c40f);
  box-shadow: 0 0 8px rgba(241,196,15,0.4);
}
.gpr2-bar-fill.gpr-red {
  background: linear-gradient(90deg, #7a1a1a, #e74c3c);
  box-shadow: 0 0 8px rgba(231,76,60,0.4);
}

/* Footnote */
.gpr2-footnote {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-family: var(--font-title); font-size: 16px;
  color: var(--text-dim); letter-spacing: 1px; font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   DC STORE — Donation Coins Purchase Section
   ═══════════════════════════════════════════════════════════ */

/* ── NAV BUTTON ── */
.dc-tab-btn {
  color: var(--gold) !important;
  border-color: rgba(212,175,55,0.3) !important;
}
.dc-tab-btn.active,
.dc-tab-btn:hover {
  background: rgba(212,175,55,0.1) !important;
}

/* ── STORE HEADER ── */
.dc-store-header {
  text-align: center;
  padding: 20px 0 28px;
}
.dc-store-icon { font-size: 40px; margin-bottom: 8px; }
.dc-store-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 38px); letter-spacing: 8px;
  color: var(--gold); text-shadow: 0 0 40px rgba(212,175,55,0.4);
  margin-bottom: 6px;
}
.dc-store-sub {
  font-family: var(--font-title); font-size: 16px;
  letter-spacing: 4px; color: var(--text-dim); margin-bottom: 12px;
}
.dc-store-rate {
  display: inline-block;
  font-family: var(--font-title); font-size: 16px; letter-spacing: 2px;
  color: var(--text); background: rgba(212,175,55,0.07);
  border: 1px solid rgba(212,175,55,0.2); border-radius: 20px;
  padding: 6px 18px;
}

/* ── EXPLAIN ROW ── */
.dc-explain-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-bottom: 28px;
}
@media(max-width:760px) { .dc-explain-row { grid-template-columns: 1fr; } }

.dc-explain-card {
  background: var(--bg2); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px; padding: 16px 14px;
  display: flex; gap: 12px; align-items: flex-start;
}
.dc-explain-icon { font-size: 22px; flex-shrink: 0; }
.dc-explain-text {
  font-family: var(--font-title); font-size: 16px;
  color: var(--text-dim); line-height: 1.7; letter-spacing: 0.5px;
}
.dc-explain-text strong { color: var(--text); }

/* ── PAYMENT SELECTOR ── */
.dc-payment-selector {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 24px;
}
.dc-payment-label {
  font-family: var(--font-title); font-size: 16px;
  letter-spacing: 3px; color: var(--text-dim); text-transform: uppercase;
  flex-shrink: 0;
}
.dc-payment-options { display: flex; gap: 8px; }
.dc-pay-btn {
  padding: 8px 18px; border-radius: 6px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim); font-family: var(--font-title);
  font-size: 16px; letter-spacing: 1px; cursor: pointer;
  transition: all 0.18s; display: flex; align-items: center; gap: 6px;
}
.dc-pay-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.dc-pay-btn.active {
  background: rgba(212,175,55,0.12); border-color: rgba(212,175,55,0.4);
  color: var(--gold);
}
.dc-pay-icon { font-size: 16px; }

/* ── PLANS GRID ── */
.dc-plans-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px; margin-bottom: 32px;
}
@media(max-width:1200px) { .dc-plans-grid { grid-template-columns: repeat(3, 1fr); } }
@media(max-width:760px)  { .dc-plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:500px)  { .dc-plans-grid { grid-template-columns: 1fr; } }

/* ── PLAN CARD ── */
.dc-plan-card {
  background: linear-gradient(160deg, #0d0f0d, #080a08);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px; padding: 20px 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.34,1.2,0.64,1),
              border-color 0.2s, box-shadow 0.2s;
  cursor: default;
}
.dc-plan-card:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: rgba(212,175,55,0.25);
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
}

/* Featured */
.dc-featured {
  border-color: rgba(58,123,255,0.35) !important;
  background: linear-gradient(160deg, #0a1020, #060b14) !important;
  box-shadow: 0 0 30px rgba(58,123,255,0.08) !important;
}
.dc-featured:hover {
  border-color: rgba(58,123,255,0.6) !important;
  box-shadow: 0 12px 40px rgba(58,123,255,0.2) !important;
}

/* Mega pack */
.dc-mega {
  border-color: rgba(212,175,55,0.4) !important;
  background: linear-gradient(160deg, #120e00, #0a0800) !important;
  box-shadow: 0 0 40px rgba(212,175,55,0.1) !important;
  grid-column: span 1;
}
.dc-mega:hover {
  border-color: rgba(212,175,55,0.7) !important;
  box-shadow: 0 14px 50px rgba(212,175,55,0.22) !important;
}

/* Tag/badge */
.dc-plan-tag {
  position: absolute; top: 12px; right: -2px;
  font-family: var(--font-title); font-size: 10px;
  font-weight: 700; letter-spacing: 1px;
  color: #fff; padding: 4px 12px 4px 8px;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%);
  text-transform: uppercase;
}

/* Plan name */
.dc-plan-name {
  font-family: var(--font-title); font-size: 16px;
  font-weight: 700; letter-spacing: 3px;
  color: var(--text); text-transform: uppercase;
}

/* DC block */
.dc-plan-dc-block {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 0 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dc-plan-base-dc {
  display: flex; align-items: baseline; gap: 5px;
}
.dc-plan-dc-icon { font-size: 16px; }
.dc-plan-dc-num {
  font-family: var(--font-display); font-size: 26px;
  font-weight: 900; color: var(--gold); letter-spacing: 1px;
  line-height: 1;
}
.dc-plan-dc-label {
  font-family: var(--font-title); font-size: 16px;
  color: var(--text-dim); letter-spacing: 2px;
}

/* Bonus row */
.dc-plan-bonus-row {
  display: flex; align-items: center;
}
.dc-plan-bonus-tag {
  font-family: var(--font-title); font-size: 17px; font-weight: 700;
  letter-spacing: 1px; color: #2ecc71;
  background: rgba(46,204,113,0.1); border: 1px solid rgba(46,204,113,0.25);
  border-radius: 4px; padding: 3px 8px;
  display: flex; align-items: center; gap: 3px;
}
.dc-bonus-plus { font-size: 17px; font-weight: 900; }
.dc-bonus-pct  { color: rgba(46,204,113,0.7); font-size: 16px; margin-left: 2px; }

/* Total row */
.dc-plan-total-row {
  display: flex; align-items: center; gap: 6px;
}
.dc-plan-total-row.no-bonus { opacity: 0.55; }
.dc-plan-total-label {
  font-family: var(--font-title); font-size: 16px;
  letter-spacing: 1px; color: var(--text-dim);
}
.dc-plan-total-val {
  font-family: var(--font-display); font-size: 16px;
  font-weight: 700; color: var(--gold2); letter-spacing: 1px;
}

/* Pricing */
.dc-plan-pricing { display: flex; flex-direction: column; gap: 3px; }
.dc-plan-ars {
  font-family: var(--font-display); font-size: 18px;
  font-weight: 900; color: var(--text); letter-spacing: 1px;
}
.dc-plan-usd {
  font-family: var(--font-title); font-size: 16px;
  color: var(--text-dim); letter-spacing: 1px;
}

/* Buy button */
.dc-buy-btn {
  width: 100%; padding: 12px 0; border-radius: 6px;
  font-family: var(--font-title); font-size: 16px;
  font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; border: 1px solid;
  transition: all 0.18s;
  background: rgba(212,175,55,0.08);
  color: var(--gold); border-color: rgba(212,175,55,0.3);
}
.dc-buy-btn:hover {
  background: rgba(212,175,55,0.18);
  box-shadow: 0 0 14px rgba(212,175,55,0.25);
}
.dc-buy-featured {
  background: rgba(58,123,255,0.14); color: #6EA3FF;
  border-color: rgba(58,123,255,0.4);
  animation: dcBtnPulse 2.5s ease-in-out infinite;
}
.dc-buy-featured:hover { background: rgba(58,123,255,0.28); }
@keyframes dcBtnPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(58,123,255,0); }
  50%     { box-shadow: 0 0 14px 2px rgba(58,123,255,0.3); }
}
.dc-buy-mega {
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(180,140,0,0.12));
  color: var(--gold); border-color: rgba(212,175,55,0.5);
  animation: dcBtnMega 2s ease-in-out infinite;
}
.dc-buy-mega:hover { background: rgba(212,175,55,0.3); }
@keyframes dcBtnMega {
  0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
  50%     { box-shadow: 0 0 18px 3px rgba(212,175,55,0.35); }
}

/* ── DISCLAIMER ── */
.dc-disclaimer {
  border-top: 1px solid rgba(255,255,255,0.05); padding-top: 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.dc-disclaimer-row {
  font-family: var(--font-title); font-size: 16px;
  letter-spacing: 1px; color: rgba(255,255,255,0.2); line-height: 1.6;
}

/* ─── GACHAPONG: mode label + epic row ─── */
.gpr2-mode-label {
  font-family: var(--font-title);
  font-size: 16px; letter-spacing: 2px;
  color: var(--gold); margin-bottom: 10px;
  padding: 6px 10px;
  background: rgba(212,175,55,0.06);
  border: 1px solid rgba(212,175,55,0.12);
  border-radius: 4px; text-align: center;
}
.gpr2-mode-label strong { color: #6EA3FF; }

/* Epic row gets a special glow effect */
.gacha-prob-row2:has(.gpr-red.gpr2-pct[data-epic]) .gpr2-bar-fill {
  box-shadow: 0 0 10px rgba(192,132,252,0.5) !important;
}

/* ═══════════════════════════════════════════════════════════
   CHARACTER CREATION — VARIANT STEP REDESIGN
   ═══════════════════════════════════════════════════════════ */

/* ── STEP 2: VARIANT SELECTION LAYOUT ── */
.cc-variant-layout {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 28px; width: 100%; align-items: start;
  max-width: 820px;
}
@media(max-width: 700px) {
  .cc-variant-layout { grid-template-columns: 1fr; }
  .cc-char-preview-panel { display: none; }
}

/* ── VARIANT CARDS (2 per row, 180×225 portrait) ── */
.cc-variants {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}

.cc-variant-card {
  border-radius: 10px; overflow: hidden;
  border: 2px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.35);
  cursor: pointer; position: relative;
  transition: transform 0.22s cubic-bezier(0.34,1.2,0.64,1),
              border-color 0.2s, box-shadow 0.2s;
  display: flex; flex-direction: column;
}
.cc-variant-card:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: rgba(212,175,55,0.4);
  box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,175,55,0.2);
}
.cc-variant-card.selected {
  border-color: rgba(212,175,55,0.75) !important;
  box-shadow: 0 0 30px rgba(212,175,55,0.3), 0 0 0 1px rgba(212,175,55,0.4) !important;
}
.cc-variant-card.selected .cc-variant-select-badge { opacity: 1; }

/* ── IMAGE WRAPPER — 180×225px ── */
.cc-variant-img-wrap {
  width: 100%; height: 225px;
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #0a0c0a, #060806);
}
.cc-variant-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}
.cc-variant-card:hover .cc-variant-img { transform: scale(1.04); }

/* Vignette overlay on image */
.cc-variant-img-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    transparent 55%,
    rgba(0,0,0,0.3) 75%,
    rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}

/* Emoji fallback (no image) */
.cc-variant-emoji-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 72px;
}

/* "✓ Seleccionado" badge on image */
.cc-variant-select-badge {
  position: absolute; top: 10px; right: 10px;
  background: rgba(212,175,55,0.9); color: #000;
  font-family: var(--font-title); font-size: 10px;
  font-weight: 900; letter-spacing: 2px;
  padding: 4px 10px; border-radius: 20px; z-index: 3;
  opacity: 0; transition: opacity 0.2s;
}

/* ── CARD FOOTER ── */
.cc-variant-footer {
  padding: 12px 14px;
  border-top: 1px solid;
  display: flex; flex-direction: column; gap: 3px;
}
.cc-variant-label {
  font-family: var(--font-display);
  font-size: 16px; letter-spacing: 3px; font-weight: 700;
  color: var(--text);
}
.cc-variant-race-tag {
  font-family: var(--font-title);
  font-size: 16px; letter-spacing: 2px;
}

/* ── PREVIEW PANEL ── */
.cc-char-preview-panel {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 16px 12px; position: sticky; top: 20px;
}

/* Preview portrait — matches full card proportion */
.cc-preview-portrait {
  width: 160px; height: 200px;
  border-radius: 8px; overflow: hidden;
  background: rgba(0,0,0,0.5); border: 2px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s;
}
.cc-portrait-real-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.cc-portrait-placeholder-inner {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.cc-portrait-race-icon { font-size: 48px; }
.cc-portrait-race-hint {
  font-family: var(--font-title); font-size: 10px;
  letter-spacing: 2px; color: var(--text-dim);
}

.cc-preview-info { text-align: center; width: 100%; }
.cc-preview-race-name {
  font-family: var(--font-display);
  font-size: 16px; letter-spacing: 3px; font-weight: 700; margin-bottom: 6px;
}
.cc-preview-buff {
  font-family: var(--font-title); font-size: 10px;
  letter-spacing: 0.5px; color: rgba(192,132,252,0.7); line-height: 1.6;
}
.cc-preview-buff strong { color: #c084fc; display: block; letter-spacing: 1px; margin-bottom: 2px; }

/* Step 3 summary redesign */
.cc-char-summary {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 8px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  width: 100%; max-width: 380px;
}
.cc-summary-avatar-img {
  width: 52px; height: 64px; border-radius: 5px; object-fit: cover;
}
.cc-summary-details { display: flex; flex-direction: column; gap: 3px; }
.cc-summary-name {
  font-family: var(--font-display); font-size: 16px;
  letter-spacing: 3px; color: var(--gold);
}
.cc-summary-race {
  font-family: var(--font-title); font-size: 16px;
  letter-spacing: 2px; font-weight: 700;
}
.cc-summary-buff {
  font-family: var(--font-title); font-size: 16px;
  color: var(--text-dim); letter-spacing: 1px;
}

/* ═══════════════════════════════════════════════════════════
   AUTO-BATTLE BUTTON
   ═══════════════════════════════════════════════════════════ */

.arena-auto-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; padding: 8px 14px; border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim); cursor: pointer;
  font-family: var(--font-title);
  transition: all 0.2s; flex-shrink: 0;
}
.arena-auto-btn:hover {
  border-color: rgba(139,47,212,0.4);
  background: rgba(139,47,212,0.08); color: #c084fc;
}

/* ON state — vivid glow */
.arena-auto-btn.auto-on {
  background: rgba(139,47,212,0.18);
  border-color: rgba(192,132,252,0.6);
  color: #c084fc;
  box-shadow: 0 0 16px rgba(139,47,212,0.4);
  animation: autoBtnPulse 1.2s ease-in-out infinite;
}
@keyframes autoBtnPulse {
  0%,100% { box-shadow: 0 0 12px rgba(139,47,212,0.35); }
  50%     { box-shadow: 0 0 24px rgba(192,132,252,0.6), 0 0 40px rgba(139,47,212,0.2); }
}

.auto-icon  { font-size: 16px; }
.auto-label { font-size: 10px; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; }
.auto-timer { font-size: 9px; letter-spacing: 1px; font-family: var(--font-title); opacity: 0.9; margin-top: -1px; }

/* ═══════════════════════════════════════════════════════════
   HEADER PROFILE PANEL — clickable
   ═══════════════════════════════════════════════════════════ */

.header-profile {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 6px;
  background: rgba(212,175,55,0.05);
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: 8px; cursor: pointer;
  transition: all 0.2s; position: relative;
}
.header-profile:hover {
  background: rgba(212,175,55,0.1);
  border-color: rgba(212,175,55,0.35);
  box-shadow: 0 0 16px rgba(212,175,55,0.12);
}

/* Avatar circle */
.hp-avatar-wrap { position: relative; flex-shrink: 0; }
.hp-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  overflow: hidden; border: 2px solid rgba(212,175,55,0.3);
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
.header-avatar-img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.hp-level-badge {
  position: absolute; bottom: -4px; right: -4px;
  background: #7c3aed; color: #fff;
  font-family: var(--font-display); font-size: 17px; font-weight: 900;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 8px rgba(139,47,212,0.5);
}

/* Info column */
.hp-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.hp-name-row { display:flex; align-items:center; gap:6px; }
.hp-name {
  font-family: var(--font-title); font-size: 17px; font-weight:700;
  letter-spacing:1px; color:var(--text); white-space:nowrap;
}
.hp-race {
  font-family: var(--font-title); font-size: 16px; color:var(--text-dim);
  white-space: nowrap;
}
.hp-xp-wrap {
  width: 110px; height: 4px; background: rgba(255,255,255,0.07);
  border-radius: 2px; overflow: hidden;
}
.hp-xp-fill {
  height:100%; background: linear-gradient(90deg, #5b21b6, #c084fc);
  border-radius:2px; transition: width 0.6s ease;
  box-shadow: 0 0 6px rgba(192,132,252,0.5);
}
.hp-xp-label {
  font-family: var(--font-title); font-size:8px; color:var(--text-dim);
  letter-spacing:1px;
}

/* Arrow hint */
.hp-arrow {
  font-size: 18px; color: rgba(212,175,55,0.4);
  margin-left: 2px; transition: transform 0.2s;
}
.header-profile:hover .hp-arrow { transform: translateX(3px); color: rgba(212,175,55,0.7); }

/* ═══════════════════════════════════════════════════════════
   COMBAT PROFILE PANEL — left side of arena
   ═══════════════════════════════════════════════════════════ */

.combat-profile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 170px; flex-shrink: 0;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: 10px; padding: 12px 10px;
  cursor: pointer; position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.combat-profile:hover {
  border-color: rgba(212,175,55,0.35);
  box-shadow: 0 0 20px rgba(212,175,55,0.1);
}

/* Portrait */
.cp-portrait { position: relative; width: 100px; height: 120px; flex-shrink: 0; }
.cp-portrait-img {
  width: 100%; height: 100%; border-radius: 8px; overflow: hidden;
  border: 2px solid rgba(212,175,55,0.2);
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
.combat-portrait-img { width:100%; height:100%; object-fit:cover; object-position:center top; border-radius:6px; }
.cp-level-orb {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  background: #5b21b6; color: #fff;
  font-family: var(--font-display); font-size: 17px; font-weight: 900;
  padding: 2px 10px; border-radius: 20px;
  border: 1px solid rgba(192,132,252,0.4);
  box-shadow: 0 0 10px rgba(139,47,212,0.5);
  white-space: nowrap;
}
.cp-level-orb::before { content: 'Lv.'; font-size: 10px; opacity: 0.8; }

/* Info */
.cp-info { width:100%; display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:6px; }
.cp-name { font-family:var(--font-title); font-size:11px; font-weight:700; letter-spacing:2px; color:var(--text); text-align:center; }
.cp-race { font-family:var(--font-title); font-size:8px; letter-spacing:1px; text-align:center; }
.cp-xp-wrap { width:100%; height:6px; background:rgba(255,255,255,0.07); border-radius:3px; overflow:hidden; border:1px solid rgba(139,47,212,0.15); }
.cp-xp-fill { height:100%; background:linear-gradient(90deg,#5b21b6,#c084fc); border-radius:3px; transition:width 0.7s ease; box-shadow:0 0 8px rgba(192,132,252,0.5); }
.cp-xp-txt { font-family:var(--font-title); font-size:8px; color:var(--text-dim); letter-spacing:1px; }
.cp-buff {
  font-family:var(--font-title); font-size:8px; letter-spacing:1px;
  background:rgba(139,47,212,0.1); border:1px solid rgba(139,47,212,0.2);
  border-radius:3px; padding:2px 6px; text-align:center;
}
.cp-hint {
  font-family:var(--font-title); font-size:7px; letter-spacing:1px;
  color:rgba(212,175,55,0.3); margin-top:2px;
  transition: color 0.2s;
}
.combat-profile:hover .cp-hint { color:rgba(212,175,55,0.6); }

/* ═══════════════════════════════════════════════════════════
   CHARACTER PROFILE MODAL
   ═══════════════════════════════════════════════════════════ */

.cpm-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.82); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s;
}
.cpm-overlay.hidden { display: none !important; }
.cpm-overlay.cpm-visible { opacity: 1; }

.cpm-panel {
  background: linear-gradient(160deg, #0d1008, #070b05);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 12px; padding: 28px 24px;
  width: 100%; max-width: 520px;
  max-height: 88vh; overflow-y: auto;
  position: relative;
  box-shadow: 0 0 60px rgba(212,175,55,0.08);
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.34,1.2,0.64,1);
}
.cpm-visible .cpm-panel { transform: translateY(0); }

.cpm-close {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim); width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.cpm-close:hover { background: rgba(192,57,43,0.3); color: #fff; border-color: rgba(192,57,43,0.5); }

/* Top section: portrait + identity */
.cpm-top {
  display: flex; gap: 20px; align-items: flex-start; margin-bottom: 24px;
}
.cpm-portrait-wrap { position: relative; flex-shrink: 0; }
.cpm-portrait {
  width: 120px; height: 150px; border-radius: 8px; overflow: hidden;
  border: 2px solid rgba(212,175,55,0.25);
  background: rgba(0,0,0,0.5);
}
.cpm-portrait-img { width:100%; height:100%; object-fit:cover; object-position:center top; border-radius:6px; }
.cpm-portrait-emoji { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:56px; }

.cpm-level-badge {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #5b21b6, #7c3aed);
  color: #fff; font-family: var(--font-display); font-size: 16px;
  font-weight: 900; padding: 3px 14px; border-radius: 20px;
  border: 1px solid rgba(192,132,252,0.3);
  box-shadow: 0 0 14px rgba(139,47,212,0.5);
  white-space: nowrap;
}

/* Identity */
.cpm-identity { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.cpm-char-name { font-family: var(--font-display); font-size: 22px; letter-spacing:4px; color:var(--gold); }
.cpm-char-race { font-family: var(--font-title); font-size: 16px; letter-spacing:3px; font-weight:700; }

.cpm-xp-section { display: flex; flex-direction: column; gap: 5px; }
.cpm-xp-header { display: flex; justify-content: space-between; }
.cpm-xp-label { font-family:var(--font-title); font-size:9px; letter-spacing:2px; color:var(--text-dim); }
.cpm-xp-nums  { font-family:var(--font-title); font-size:9px; letter-spacing:1px; color:#c084fc; }
.cpm-xp-bar-bg { width:100%; height:10px; background:rgba(255,255,255,0.07); border-radius:5px; overflow:hidden; border:1px solid rgba(139,47,212,0.15); }
.cpm-xp-bar-fill { height:100%; background:linear-gradient(90deg,#5b21b6,#c084fc); border-radius:5px; transition:width 0.6s ease; box-shadow:0 0 10px rgba(192,132,252,0.5); }
.cpm-xp-hint { font-family:var(--font-title); font-size:9px; color:var(--text-dim); letter-spacing:1px; }

/* Section titles */
.cpm-section-title {
  font-family: var(--font-title); font-size: 16px; letter-spacing: 4px;
  text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid rgba(212,175,55,0.1); padding-bottom: 8px;
  margin: 20px 0 12px;
}

/* Powers */
.cpm-powers { display: flex; flex-direction: column; gap: 10px; }
.cpm-power {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; border-radius: 8px; border: 1px solid;
  transition: all 0.2s;
}
.cpm-power.unlocked {
  border-color: rgba(212,175,55,0.3); background: rgba(212,175,55,0.05);
}
.cpm-power.locked {
  border-color: rgba(255,255,255,0.06); background: rgba(0,0,0,0.2);
  opacity: 0.55;
}
.cpm-power-icon { font-size: 22px; flex-shrink: 0; width: 28px; text-align: center; }
.cpm-power-body { flex: 1; }
.cpm-power-name {
  font-family: var(--font-title); font-size: 17px; font-weight: 700;
  letter-spacing: 1px; color: var(--text); margin-bottom: 3px;
}
.cpm-power-desc { font-family: var(--font-title); font-size: 16px; color: var(--text-dim); line-height: 1.5; }
.cpm-power-req {
  margin-top: 5px; font-family: var(--font-title); font-size: 10px;
  letter-spacing: 2px; color: rgba(255,255,255,0.25);
}
.cpm-power-active {
  margin-top: 5px; display: inline-block;
  font-family: var(--font-title); font-size: 10px; font-weight: 700;
  letter-spacing: 2px; color: #27AE60;
  background: rgba(39,174,96,0.1); border-radius: 3px; padding: 2px 7px;
}

/* Stats grid */
.cpm-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.cpm-stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; background: rgba(255,255,255,0.03);
  border-radius: 5px; border: 1px solid rgba(255,255,255,0.05);
}
.cpm-stat-label { font-family:var(--font-title); font-size:9px; color:var(--text-dim); letter-spacing:1px; }
.cpm-stat-val   { font-family:var(--font-title); font-size:10px; font-weight:700; color:var(--text); letter-spacing:1px; }

/* ── EQUIPMENT GRID ── */
.cpm-equip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 4px;
}
.cpm-equip-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 4px;
  border-radius: 8px; cursor: pointer;
  min-height: 72px;
  border: 1px solid rgba(255,255,255,0.10);
  transition: border-color 0.2s, background 0.2s;
  text-align: center;
}
.cpm-slot-empty  { background: rgba(255,255,255,0.03); }
.cpm-slot-filled { background: rgba(200,168,80,0.10); border-color: rgba(200,168,80,0.4); }
.cpm-slot-filled:hover { background: rgba(200,168,80,0.18); }
.cpm-slot-empty:hover  { background: rgba(255,255,255,0.07); }
.cpm-slot-icon  { font-size: 22px; line-height: 1; }
.cpm-slot-name  { font-size: 9px; color: var(--gold); font-family: var(--font-title); letter-spacing: 0.5px; display:none; }
.cpm-slot-filled .cpm-slot-name { display: block; }
.cpm-slot-stats { font-size: 8px; color: #4ade80; font-family: var(--font-title); }
.cpm-slot-label { font-size: 8px; color: var(--text-dim); font-family: var(--font-title); letter-spacing: 0.5px; }

/* ── INVENTORY GRID ── */
.cpm-inv-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.cpm-inv-slot {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px;
  text-align: center;
  min-height: 56px;
}
.cpm-inv-empty  { background: rgba(255,255,255,0.02); }
.cpm-inv-filled {
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  transition: background 0.15s;
}
.cpm-inv-filled:hover { background: rgba(255,255,255,0.12); }
.cpm-inv-icon  { font-size: 18px; line-height: 1; }
.cpm-inv-name  { font-size: 7px; font-family: var(--font-title); letter-spacing: 0.3px;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cpm-inv-stats { font-size: 7px; color: #4ade80; font-family: var(--font-title); }

/* Shared portrait image classes */
.char-portrait-img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.char-portrait-emoji { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:42px; }

/* ═══════════════════════════════════════════════════════════
   LEVEL-TIER GLOW SYSTEM
   Applied to every card via .lvl-low / .lvl-mid / .lvl-high
   Convive con rareza (common / rare / legendary)
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Level glow colors — edit here to adjust globally */
  --glow-low:  rgba(210, 220, 235, 0.55);   /* blanco plateado suave */
  --glow-mid:  rgba(58,  140, 255, 0.55);   /* azul mágico eléctrico */
  --glow-high: rgba(212, 175,  55, 0.65);   /* dorado premium */

  /* Hover intensity multiplier (more vivid on hover) */
  --glow-low-hover:  rgba(225, 235, 255, 0.85);
  --glow-mid-hover:  rgba(58,  160, 255, 0.90);
  --glow-high-hover: rgba(255, 210,  60, 0.95);

  /* Glow spread values */
  --glow-spread:       8px;
  --glow-blur:        18px;
  --glow-blur-hover:  28px;
}

/* ── BASE GLOW (always visible, subtle) ── */
.tcg-card.lvl-low {
  box-shadow:
    0 0 var(--glow-spread) var(--glow-low),
    0 0 var(--glow-blur)   rgba(210, 220, 235, 0.2);
}
.tcg-card.lvl-mid {
  box-shadow:
    0 0 var(--glow-spread) var(--glow-mid),
    0 0 var(--glow-blur)   rgba(58, 140, 255, 0.25);
}
.tcg-card.lvl-high {
  box-shadow:
    0 0 var(--glow-spread) var(--glow-high),
    0 0 var(--glow-blur)   rgba(212, 175, 55, 0.3),
    0 0 40px               rgba(212, 175, 55, 0.08);
}

/* ── HOVER: glow intensificado ── */
.tcg-card.lvl-low:hover {
  box-shadow:
    0 0 var(--glow-spread)      var(--glow-low-hover),
    0 0 var(--glow-blur-hover)  rgba(210, 220, 235, 0.4),
    0 0 50px                    rgba(200, 215, 255, 0.12);
}
.tcg-card.lvl-mid:hover {
  box-shadow:
    0 0 var(--glow-spread)      var(--glow-mid-hover),
    0 0 var(--glow-blur-hover)  rgba(58, 140, 255, 0.45),
    0 0 60px                    rgba(58, 140, 255, 0.15);
}
.tcg-card.lvl-high:hover {
  box-shadow:
    0 0 var(--glow-spread)      var(--glow-high-hover),
    0 0 var(--glow-blur-hover)  rgba(212, 175, 55, 0.55),
    0 0 70px                    rgba(212, 175, 55, 0.2);
}

/* ── MINI HAND CARDS — same system, adjusted spread ── */
.hand-card-mini.lvl-low  { box-shadow: 0 0 5px var(--glow-low),  0 0 12px rgba(210,220,235,0.15); }
.hand-card-mini.lvl-mid  { box-shadow: 0 0 5px var(--glow-mid),  0 0 12px rgba(58,140,255,0.2); }
.hand-card-mini.lvl-high { box-shadow: 0 0 6px var(--glow-high), 0 0 16px rgba(212,175,55,0.25); }

.hand-card-mini.lvl-low:hover  { box-shadow: 0 0 8px var(--glow-low-hover),  0 0 20px rgba(210,220,235,0.3); }
.hand-card-mini.lvl-mid:hover  { box-shadow: 0 0 8px var(--glow-mid-hover),  0 0 20px rgba(58,140,255,0.35); }
.hand-card-mini.lvl-high:hover { box-shadow: 0 0 10px var(--glow-high-hover),0 0 24px rgba(212,175,55,0.4); }

/* ── PACK CARDS — glow on the outer wrap ── */
.pack-card-wrap.lvl-low  { filter: drop-shadow(0 0 6px var(--glow-low)); }
.pack-card-wrap.lvl-mid  { filter: drop-shadow(0 0 6px var(--glow-mid)); }
.pack-card-wrap.lvl-high { filter: drop-shadow(0 0 8px var(--glow-high)); }

/* ── PICK GRID CARDS (Gachapong + Deck picker) ── */
.gacha-pick-card.lvl-low,
.picker-card.lvl-low  { box-shadow: 0 0 6px var(--glow-low); }
.gacha-pick-card.lvl-mid,
.picker-card.lvl-mid  { box-shadow: 0 0 6px var(--glow-mid); }
.gacha-pick-card.lvl-high,
.picker-card.lvl-high { box-shadow: 0 0 8px var(--glow-high); }

.gacha-pick-card.lvl-high:hover,
.picker-card.lvl-high:hover { box-shadow: 0 0 14px var(--glow-high-hover), 0 0 30px rgba(212,175,55,0.2); }
.gacha-pick-card.lvl-mid:hover,
.picker-card.lvl-mid:hover  { box-shadow: 0 0 12px var(--glow-mid-hover),  0 0 24px rgba(58,140,255,0.2); }
.gacha-pick-card.lvl-low:hover,
.picker-card.lvl-low:hover  { box-shadow: 0 0 10px var(--glow-low-hover),  0 0 20px rgba(210,220,235,0.15); }

/* ── ZONE CARDS (campo de batalla) — glow extra fuerte para más impacto ── */
.zone-card-slot .tcg-card.lvl-low {
  box-shadow:
    0 0 12px var(--glow-low),
    0 0 28px rgba(210,220,235,0.2),
    0 10px 30px rgba(0,0,0,0.9);
}
.zone-card-slot .tcg-card.lvl-mid {
  box-shadow:
    0 0 14px var(--glow-mid),
    0 0 32px rgba(58,140,255,0.25),
    0 10px 30px rgba(0,0,0,0.9);
}
.zone-card-slot .tcg-card.lvl-high {
  box-shadow:
    0 0 16px var(--glow-high),
    0 0 40px rgba(212,175,55,0.35),
    0 0 70px rgba(212,175,55,0.1),
    0 10px 30px rgba(0,0,0,0.9);
  animation: fieldGoldPulse 3s ease-in-out infinite;
}
@keyframes fieldGoldPulse {
  0%,100% { box-shadow: 0 0 16px var(--glow-high), 0 0 40px rgba(212,175,55,0.3),  0 10px 30px rgba(0,0,0,0.9); }
  50%     { box-shadow: 0 0 24px var(--glow-high), 0 0 60px rgba(212,175,55,0.45), 0 10px 30px rgba(0,0,0,0.9); }
}

/* ── ZOOM MODAL — full card view ── */
#card-zoom-modal .tcg-card.lvl-low  { box-shadow: 0 0 24px var(--glow-low),  0 0 60px rgba(210,220,235,0.2); }
#card-zoom-modal .tcg-card.lvl-mid  { box-shadow: 0 0 28px var(--glow-mid),  0 0 70px rgba(58,140,255,0.25); }
#card-zoom-modal .tcg-card.lvl-high { box-shadow: 0 0 32px var(--glow-high), 0 0 80px rgba(212,175,55,0.35); }

/* ═══════════════════════════════════════════════════════════
   MOB INTERIOR ART — assigned art images from MOB_ART_MAP
   ═══════════════════════════════════════════════════════════ */

/* Interior art fills the card art area, cropped to center */
.tcg-interior-art {
  position: absolute;
  inset: 6px 18px;         /* 6px top/bottom, 18px left/right to clear frame borders */
  width: calc(100% - 36px);
  height: calc(100% - 12px);
  object-fit: cover;
  object-position: center 20%;
  border-radius: 70px;     /* all 4 corners rounded */
  z-index: 0;
}

/* Subtle overlay so text elements stay readable over the art */
.tcg-art-area:has(.tcg-interior-art)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.05)  0%,    /* top: barely any tint */
    rgba(0,0,0,0.10)  55%,   /* mid: very light */
    rgba(0,0,0,0.55)  85%,   /* bottom: darken for text */
    rgba(0,0,0,0.70) 100%
  );
  z-index: 1;
  border-radius: 2px;
  pointer-events: none;
}

/* Make existing art overlay elements sit on top of interior art */
.tcg-art-glow,
.tcg-element-tag,
.tcg-ability-box {
  position: relative;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════
   PvE MENU — 3 MODOS
   ═══════════════════════════════════════════════════════════ */

/* ── MAIN MENU ── */
#pve-main-menu { padding: 8px 0; }
.pve-menu-header { text-align: center; margin-bottom: 24px; }
.pve-menu-title {
  font-family: var(--font-display); font-size: 28px;
  letter-spacing: 6px; color: var(--gold);
  text-shadow: 0 0 30px rgba(212,175,55,0.3);
}
.pve-menu-sub {
  font-family: var(--font-title); font-size: 11px;
  letter-spacing: 3px; color: var(--text-dim); margin-top: 4px;
}

.pve-mode-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; max-width: 900px; margin: 0 auto;
}
@media(max-width: 700px) { .pve-mode-grid { grid-template-columns: 1fr; } }

.pve-mode-card {
  background: linear-gradient(160deg, #0d1008, #080b06);
  border: 1px solid rgba(212,175,55,0.12);
  border-radius: 12px; padding: 24px 18px;
  cursor: pointer; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.22s cubic-bezier(0.34,1.2,0.64,1),
              border-color 0.2s, box-shadow 0.2s;
}
.pve-mode-card:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: rgba(212,175,55,0.35);
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
}
.pve-mode-raid {
  border-color: rgba(192,57,43,0.25) !important;
  background: linear-gradient(160deg, #150808, #090505) !important;
}
.pve-mode-raid:hover { border-color: rgba(192,57,43,0.5) !important; box-shadow: 0 12px 40px rgba(192,57,43,0.15) !important; }
.pve-mode-aventura {
  border-color: rgba(58,123,255,0.2) !important;
  background: linear-gradient(160deg, #080d18, #050810) !important;
}
.pve-mode-aventura:hover { border-color: rgba(58,123,255,0.4) !important; }

.pve-mode-badge {
  position: absolute; top: 12px; right: -2px;
  font-family: var(--font-title); font-size: 8px; font-weight: 700;
  letter-spacing: 1px; color: #fff; padding: 3px 12px 3px 8px;
  background: rgba(192,57,43,0.85);
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%);
}
.pve-mode-icon { font-size: 36px; }
.pve-mode-name {
  font-family: var(--font-display); font-size: 18px;
  letter-spacing: 3px; color: var(--text);
}
.pve-mode-desc {
  font-family: var(--font-title); font-size: 11px;
  color: var(--text-dim); line-height: 1.6; flex: 1;
}
.pve-mode-progress {
  font-family: var(--font-title); font-size: 10px;
  color: var(--gold); letter-spacing: 1px;
  background: rgba(212,175,55,0.07); border-radius: 4px;
  padding: 4px 8px; display: inline-block;
}
.pve-mode-btn {
  font-family: var(--font-title); font-size: 11px;
  font-weight: 700; letter-spacing: 2px; color: var(--gold);
  margin-top: 4px;
}

/* ── SUBSCREEN ── */
.pve-subscreen { padding: 4px 0; }
.pve-subscreen.hidden { display: none !important; }

.pve-sub-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(212,175,55,0.1);
}
.pve-back-btn {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim); font-family: var(--font-title);
  font-size: 11px; letter-spacing: 1px; padding: 6px 12px;
  border-radius: 6px; cursor: pointer; transition: all 0.15s;
  flex-shrink: 0;
}
.pve-back-btn:hover { background: rgba(212,175,55,0.1); color: var(--gold); }
.pve-sub-title {
  font-family: var(--font-display); font-size: 18px;
  letter-spacing: 4px; color: var(--gold); flex: 1;
}
.pve-sub-info {
  font-family: var(--font-title); font-size: 10px;
  color: var(--text-dim); letter-spacing: 2px;
}
.pve-edit-deck {
  font-family: var(--font-title); font-size: 10px; letter-spacing: 1px;
  color: var(--gold); text-decoration: none; flex-shrink: 0;
}

/* ── RAID BOSS PATH ── */
.raid-path {
  display: flex; flex-direction: column; gap: 0;
  max-width: 600px; margin: 0 auto;
  max-height: 65vh; overflow-y: auto;
  padding: 4px 8px;
}

.raid-node {
  display: flex; align-items: center; gap: 14px;
  position: relative; padding: 10px 0;
}

.rb-connector {
  position: absolute; left: 19px; top: -10px;
  width: 2px; height: 20px;
  background: rgba(255,255,255,0.07);
}
.rb-no-line { display: none; }

.rb-bubble {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 900;
  border: 2px solid; cursor: pointer; transition: all 0.2s; z-index: 1;
}
.rb-done   .rb-bubble { background: rgba(39,174,96,0.2);  border-color: rgba(39,174,96,0.6);  color: #27AE60; }
.rb-active .rb-bubble { background: rgba(212,175,55,0.15); border-color: rgba(212,175,55,0.7); color: var(--gold); animation: rbPulse 1.5s ease-in-out infinite; }
.rb-locked .rb-bubble { background: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.2); cursor: default; }
@keyframes rbPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
  50%     { box-shadow: 0 0 12px 3px rgba(212,175,55,0.35); }
}

.rb-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.rb-name { font-family: var(--font-title); font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: 1px; }
.rb-level { font-family: var(--font-title); font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
.rb-fight-btn { margin-top: 6px; padding: 6px 14px; font-size: 10px; align-self: flex-start; }

/* Level tier colors on raid nodes */
.rb-low  .rb-connector { background: rgba(210,220,235,0.15); }
.rb-mid  .rb-connector { background: rgba(58,140,255,0.2); }
.rb-high .rb-connector { background: rgba(212,175,55,0.25); }
.rb-mid  .rb-active .rb-bubble { border-color: rgba(58,140,255,0.7) !important; animation-name: rbPulseMid; }
.rb-high .rb-active .rb-bubble { border-color: rgba(212,175,55,0.9) !important; }
@keyframes rbPulseMid {
  0%,100% { box-shadow: 0 0 0 0 rgba(58,140,255,0); }
  50%     { box-shadow: 0 0 12px 3px rgba(58,140,255,0.35); }
}

/* ── AVENTURA PANEL ── */
/* ═══════════════════════════════════════════════════════════
   MODO AVENTURA — MAPA POR ZONAS
   ═══════════════════════════════════════════════════════════ */

.av-map-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  overflow: hidden;
  height: 100%;
}
@media (max-width: 620px) {
  .av-map-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
}

/* ── Zone map (left column) ── */
.av-zone-map {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 10px;
  background: rgba(0,0,0,0.35);
  border-right: 1px solid rgba(255,255,255,0.06);
  overflow-y: auto;
  gap: 0;
}
.av-zone-node {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; width: 100%;
  border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  transition: background 0.15s, border-color 0.15s;
  box-sizing: border-box;
}
.av-zone-node:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
.av-zone-selected   { background: rgba(var(--zone-color, 200,168,80), 0.12) !important;
                      border-color: var(--zone-color, #c8a850) !important; }
.av-zone-icon  { font-size: 22px; flex-shrink: 0; }
.av-zone-info  { display: flex; flex-direction: column; gap: 2px; }
.av-zone-name  { font-family: var(--font-title); font-size: 11px; color: var(--text); letter-spacing: 1px; }
.av-zone-range { font-family: var(--font-title); font-size: 9px;  color: var(--text-dim); letter-spacing: 0.5px; }
.av-zone-connector {
  font-size: 16px; color: rgba(255,255,255,0.15); line-height: 1;
  padding: 2px 0; align-self: center;
}

/* ── Zone detail panel (right column) ── */
.av-zone-panel {
  display: flex; flex-direction: column;
  padding: 20px 18px;
  overflow-y: auto;
}
.av-zone-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 12px; opacity: 0.4;
}
.av-zone-detail { display: flex; flex-direction: column; gap: 14px; }
.av-zone-detail-header {
  display: flex; align-items: center; gap: 12px;
}
.av-zone-detail-icon { font-size: 32px; }
.av-zone-detail-name {
  font-family: var(--font-display); font-size: 18px; letter-spacing: 3px;
}
.av-zone-detail-range {
  font-family: var(--font-title); font-size: 10px; color: var(--text-dim); letter-spacing: 1px;
}
.av-zone-detail-desc {
  font-family: var(--font-title); font-size: 11px; color: var(--text-dim);
  letter-spacing: 0.5px; line-height: 1.6;
  border-left: 2px solid rgba(255,255,255,0.1); padding-left: 10px;
}
.av-zone-char-row {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  font-family: var(--font-title); font-size: 10px; letter-spacing: 1px;
  padding: 8px 10px; background: rgba(255,255,255,0.04); border-radius: 6px;
}
.av-zone-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.av-play-btn  { flex: 1; min-width: 140px; padding: 14px; font-size: 13px; }
.av-fight-btn { flex: 1; min-width: 110px; padding: 12px; }
.av-zone-detail .av-enemy-preview {
  min-height: 200px; max-height: 320px;
  background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 16px;
}

/* ═══════════════════════════════════════════════════════════
   PvE FULLSCREEN OVERLAYS
   ═══════════════════════════════════════════════════════════ */

.pve-fullscreen {
  position: fixed;
  top: var(--chrome-h, 0); left: 0; right: 0; bottom: 0;
  z-index: 150;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pve-fullscreen.hidden { display: none !important; }

.pve-screen-header {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  background: rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(212,175,55,0.12);
  flex-shrink: 0; z-index: 2;
}
.pve-screen-title {
  font-family: var(--font-display); font-size: 18px;
  letter-spacing: 4px; color: var(--gold); flex: 1;
}
.pve-screen-info {
  font-family: var(--font-title); font-size: 11px;
  letter-spacing: 2px; color: var(--text-dim);
}
.pve-screen-body {
  flex: 1; overflow-y: auto; padding: 20px;
}
.pve-edit-deck {
  font-family: var(--font-title); font-size: 11px;
  letter-spacing: 1px; color: var(--gold); text-decoration: none;
}

/* ── RAID PATH inside fullscreen ── */
.pve-fullscreen .raid-path {
  max-width: 640px; margin: 0 auto;
  max-height: none; /* no scroll limit, screen scrolls */
}

/* ── CHAR ATTACK BUTTON in card combat ── */
.arena-char-attack-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; padding: 8px 14px; border-radius: 6px;
  background: rgba(139,47,212,0.18);
  border: 1px solid rgba(192,132,252,0.45);
  color: #c084fc; cursor: pointer;
  font-family: var(--font-title);
  transition: all 0.2s; flex-shrink: 0;
}
.arena-char-attack-btn:hover {
  background: rgba(139,47,212,0.30);
  box-shadow: 0 0 14px rgba(192,132,252,0.35);
}
.arena-char-attack-btn .arena-btn-label {
  font-size: 8px; letter-spacing: 2px; font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   AVENTURA SCREEN — personaje panel
   ═══════════════════════════════════════════════════════════ */

.aventura-panel {
  display: grid; grid-template-columns: 220px 1fr 220px;
  gap: 20px; align-items: start;
  max-width: 900px; margin: 0 auto;
}
@media(max-width: 700px) {
  .aventura-panel { grid-template-columns: 1fr; }
}

.av-char-panel {
  background: rgba(0,0,0,0.25); border: 1px solid rgba(212,175,55,0.12);
  border-radius: 10px; padding: 16px; display: flex;
  flex-direction: column; align-items: center; gap: 12px;
}
.av-char-portrait {
  width: 130px; height: 160px; border-radius: 8px; overflow: hidden;
  border: 2px solid rgba(212,175,55,0.2); background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
.av-portrait-img { width:100%; height:100%; object-fit:cover; object-position:center top; }

.av-char-stats { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.av-stat-name {
  font-family: var(--font-display); font-size: 14px;
  letter-spacing: 2px; color: var(--gold); text-align: center;
}
.av-stat-race {
  font-family: var(--font-title); font-size: 10px;
  letter-spacing: 2px; text-align: center; margin-bottom: 4px;
}
.av-stat-row {
  display: flex; justify-content: space-between;
  font-family: var(--font-title); font-size: 11px;
  color: var(--text); padding: 4px 8px;
  background: rgba(255,255,255,0.03); border-radius: 4px;
}

.av-center-col {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.av-vs-label {
  font-family: var(--font-display); font-size: 28px;
  color: rgba(212,175,55,0.3); letter-spacing: 6px;
}
.av-enemy-preview {
  min-height: 260px; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px;
  background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 16px;
}
.av-card-wrap .tcg-card { width: 150px !important; height: 225px !important; }
.av-mob-level { font-family:var(--font-display); font-size:14px; color:var(--gold); font-weight:700; }

.av-controls {
  background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 20px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.av-level-range { font-family:var(--font-title); font-size:11px; color:var(--text-dim); letter-spacing:1px; }
.av-play-btn, .av-fight-btn { width: 100%; padding: 13px; }

/* ═══════════════════════════════════════════════════════════
   AVENTURA COMBAT SCREEN — personaje vs carta
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   AVENTURA COMBAT — Reworked visual matching Raid Boss quality
   ═══════════════════════════════════════════════════════════ */

/* Arena background */
.av-arena-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, #0a0208 0%, #0d0a0e 100%);
}
.av-arena-sky {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 60% at 50% 10%, rgba(100,20,120,0.15) 0%, transparent 60%);
}
.av-arena-fog {
  position: absolute; bottom: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 100%);
}

/* Main chrome container */
.av-combat-chrome {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; height: 100%;
}

/* Header bar */
.av-combat-header {
  display: flex; align-items: center;
  padding: 10px 16px; gap: 12px;
  background: rgba(0,0,0,0.6);
  border-bottom: 1px solid rgba(212,175,55,0.15);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.av-flee-btn {
  font-family: var(--font-title); font-size: 12px; letter-spacing: 1px;
  color: var(--text-dim); background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 4px;
  padding: 7px 14px; cursor: pointer; transition: all 0.2s; white-space: nowrap;
  min-height: 36px;
}
.av-flee-btn:hover { color: var(--red); border-color: rgba(192,57,43,0.4); }
.av-combat-title-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.av-combat-title {
  font-family: var(--font-display); font-size: 15px; letter-spacing: 3px; color: var(--gold);
  text-shadow: 0 0 20px rgba(212,175,55,0.4);
}
.av-turn-pill {
  font-family: var(--font-title); font-size: 10px; letter-spacing: 2px;
  padding: 3px 12px; border-radius: 20px;
  background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.3);
  color: #86efac; transition: all 0.3s;
}
.av-turn-pill.enemy-turn {
  background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); color: #fca5a5;
}
.av-combat-spacer { flex: 0 0 60px; }

/* Arena grid */
.av-combat-arena {
  flex: 1; display: grid;
  grid-template-columns: 1fr 120px 1fr;
  gap: 6px; padding: 12px 10px;
  align-items: center; overflow: hidden;
}
@media(max-width: 600px) {
  .av-combat-arena { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 10px; gap: 8px; }
  .av-combat-spacer { flex: 0 0 40px; }
}

/* Player side */
.av-combat-player {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.av-combat-portrait {
  width: 254px; height: 322px; border-radius: 10px; overflow: hidden;
  border: 2px solid rgba(212,175,55,0.45);
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 30px rgba(212,175,55,0.18), 0 4px 20px rgba(0,0,0,0.7);
}
.av-combat-portrait-img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.av-combat-name {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 2px; color: var(--gold);
  text-shadow: 0 0 16px rgba(212,175,55,0.4);
}

/* HP bars — shared by player and enemy */
.av-ext-hp-wrap { width: 100%; max-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.av-ext-hp-bar-bg {
  width: 100%; height: 12px; background: rgba(255,255,255,0.08);
  border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.av-ext-hp-bar-fill {
  height: 100%; border-radius: 6px; transition: width 0.45s ease;
  background: linear-gradient(90deg, #15803d, #4ade80);
  box-shadow: 0 0 8px rgba(74,222,128,0.4);
}
.enemy-hp-fill {
  background: linear-gradient(90deg, #991b1b, #f87171);
  box-shadow: 0 0 8px rgba(248,113,113,0.4);
}
.av-ext-hp-nums {
  font-family: var(--font-title); font-size: 11px; letter-spacing: 1px;
  color: var(--text-dim); text-align: center;
}

/* Center */
.av-combat-center {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.av-combat-vs-badge {
  font-family: var(--font-display); font-size: 22px; letter-spacing: 3px;
  color: #ef4444;
  border: 2px solid rgba(239,68,68,0.5); border-radius: 50%;
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  text-shadow: 0 0 16px rgba(239,68,68,0.7);
  box-shadow: 0 0 20px rgba(239,68,68,0.25);
  animation: vsPulse 1.8s ease-in-out infinite;
}
@keyframes vsPulse {
  0%,100% { box-shadow: 0 0 16px rgba(239,68,68,0.2); }
  50%      { box-shadow: 0 0 32px rgba(239,68,68,0.5), 0 0 60px rgba(239,68,68,0.15); }
}
.av-combat-log {
  width: 100%; display: flex; flex-direction: column; gap: 4px;
  max-height: 200px; overflow: hidden;
}
.av-log-entry {
  font-family: var(--font-title); font-size: 10px; letter-spacing: 0.5px;
  padding: 4px 10px; border-radius: 4px; line-height: 1.4;
  animation: logSlideIn 0.2s ease;
}
@keyframes logSlideIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.av-log-entry.player { color: #86efac; background: rgba(34,197,94,0.08); border-left: 2px solid #4ade80; }
.av-log-entry.enemy  { color: #fca5a5; background: rgba(239,68,68,0.08); border-left: 2px solid #f87171; }
.av-log-entry.info   { color: var(--text-dim); }

/* Enemy side */
.av-combat-enemy {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.av-enemy-card-wrap .tcg-card { width: 293px !important; height: 440px !important; }
.av-enemy-card-wrap { display: flex; justify-content: center; align-items: center; }

/* Action bar */
.av-combat-actions {
  display: flex; gap: 12px; justify-content: center; align-items: center;
  padding: 14px 20px;
  background: linear-gradient(0deg, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.85) 100%);
  border-top: 1px solid rgba(212,175,55,0.15);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}
.av-action-attack {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 32px; min-width: 160px; min-height: 60px;
  background: linear-gradient(135deg, #1a0a00, #0e0500);
  border: 2px solid rgba(212,175,55,0.5); border-radius: 4px;
  cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden;
  clip-path: polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
}
.av-action-attack::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(212,175,55,0.15), transparent);
  opacity: 0; transition: opacity 0.2s;
}
.av-action-attack:hover:not(:disabled)::before { opacity: 1; }
.av-action-attack:hover:not(:disabled) { border-color: var(--gold); box-shadow: 0 0 20px rgba(212,175,55,0.2); }
.av-action-attack:disabled { opacity: 0.3; cursor: not-allowed; }
.av-action-icon { font-size: 20px; }
.av-action-label {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 3px; color: var(--gold);
}
.av-action-pass {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 20px; min-width: 100px; min-height: 60px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 4px;
  cursor: pointer; transition: all 0.2s; color: var(--text-dim);
}
.av-action-pass:hover:not(:disabled) { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); }
.av-action-pass:disabled { opacity: 0.25; cursor: not-allowed; }
.av-action-pass .av-action-label { font-size: 11px; letter-spacing: 2px; color: var(--text-dim); }

/* ── AVENTURA REWARD POPUP ── */
.av-reward-popup {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.82);
  z-index: 20;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.av-reward-popup.av-reward-show {
  opacity: 1;
  pointer-events: auto;
}
.av-reward-popup.hidden { display: none; }
.av-reward-inner {
  background: linear-gradient(160deg, #0e0a00, #1a0e04);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 16px;
  padding: 32px 40px;
  text-align: center;
  box-shadow: 0 0 60px rgba(212,175,55,0.15), 0 8px 32px rgba(0,0,0,0.6);
  max-width: 320px; width: 90%;
  display: flex; flex-direction: column; gap: 14px;
}
.av-reward-title {
  font-family: var(--font-display);
  font-size: 28px; letter-spacing: 4px;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(212,175,55,0.6);
}
.av-reward-xp {
  font-family: var(--font-title);
  font-size: 18px; letter-spacing: 2px;
  color: #a8ff78;
  text-shadow: 0 0 16px rgba(100,255,60,0.4);
}
.av-reward-drop-header {
  font-family: var(--font-title);
  font-size: 11px; letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.av-reward-drop {
  font-family: var(--font-title);
  font-size: 15px; letter-spacing: 1px;
  color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.av-reward-item-name { color: #fbbf24; }
.av-reward-item-stats { font-size: 12px; color: #4ade80; }
.av-reward-nodrop {
  font-family: var(--font-title);
  font-size: 11px; letter-spacing: 1px;
  color: var(--text-dim);
}

/* Placeholder */
.av-preview-placeholder { text-align: center; }
.av-placeholder-icon { font-size: 48px; opacity: 0.2; margin-bottom: 10px; }
.av-placeholder-txt { font-family:var(--font-title); font-size:11px; color:var(--text-dim); letter-spacing:1px; line-height:1.6; }

/* ═══════════════════════════════════════════════════════════
   RAID BOSS — GROUP SYSTEM
   ═══════════════════════════════════════════════════════════ */

.raid-path { display: flex; flex-direction: column; gap: 20px; }

.raid-group {
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.2);
}
.raid-group-locked { opacity: 0.5; }

.raid-group-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid;
  background: rgba(0,0,0,0.3);
}
.raid-group-icon { font-size: 16px; flex-shrink: 0; }
.raid-group-label {
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: 2px; font-weight: 700; flex: 1;
}
.raid-group-prog {
  font-family: var(--font-title); font-size: 10px;
  color: var(--text-dim); letter-spacing: 1px;
}
.raid-group-locked-msg {
  font-family: var(--font-title); font-size: 11px;
  color: var(--text-dim); padding: 16px; text-align: center;
  letter-spacing: 1px;
}

/* Raid nodes inside groups */
.raid-group .raid-node {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.raid-group .raid-node:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════
   CHARACTER PROFILE — STATS SECTION
   ═══════════════════════════════════════════════════════════ */

.cpm-stat-section-title {
  font-family: var(--font-title); font-size: 9px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-dim); padding: 8px 0 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 4px; grid-column: 1 / -1;
}
.cpm-stat-atk .cpm-atk { color: #f87171; font-weight: 900; }
.cpm-stat-def .cpm-def { color: #60a5fa; font-weight: 900; }
.cpm-stat-hp  .cpm-hp  { color: #4ade80; font-weight: 900; }

/* ═══════════════════════════════════════════════════════════
   AVENTURA COMBAT — scale fixes
   ═══════════════════════════════════════════════════════════ */

/* Player portrait 3× larger */
.av-combat-portrait {
  width: 254px !important;
  height: 322px !important;
}
.av-combat-portrait-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  border-radius: 6px;
}

/* Enemy card — 50% bigger than original 150x225 */
.av-enemy-card-wrap .tcg-card {
  width: 293px !important;
  height: 440px !important;
}

/* ── Collection: zoom mode by default ── */
/* The btn label when zoom is ON */
#btn-coll-zoom.active { color: var(--gold); border-color: rgba(212,175,55,0.4); }

/* ═══════════════════════════════════════════════════════════
   MODO AVENTURA — PANTALLA DE CIUDAD (overlay)
   ═══════════════════════════════════════════════════════════ */

.av-city-overlay {
  position: absolute; inset: 0; z-index: 10;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.av-city-panel {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px 20px 28px;
  max-width: 640px; width: 100%; margin: 0 auto;
}

.av-city-back {
  align-self: flex-start;
}

.av-city-header {
  display: flex; align-items: center; gap: 16px;
}
.av-city-big-icon {
  font-size: 52px; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6));
}
.av-city-title {
  font-family: var(--font-display);
  font-size: 28px; letter-spacing: 4px;
  text-shadow: 0 0 30px currentColor;
}
.av-city-level-badge {
  font-family: var(--font-title);
  font-size: 22px; letter-spacing: 3px; font-weight: 700;
  color: var(--gold);
  margin-top: 4px;
}

.av-city-desc {
  font-family: var(--font-title); font-size: 12px;
  color: var(--text-dim); letter-spacing: 0.5px; line-height: 1.7;
  border-left: 2px solid rgba(255,255,255,0.1); padding-left: 12px;
}

.av-city-stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.av-city-stat-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 12px 10px; text-align: center;
}
.av-city-stat-val {
  font-family: var(--font-display); font-size: 24px;
  font-weight: 900; letter-spacing: 1px;
}
.av-city-stat-lbl {
  font-family: var(--font-title); font-size: 9px;
  color: var(--text-dim); letter-spacing: 1px; margin-top: 4px;
}

.av-city-char-row {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  font-family: var(--font-title); font-size: 11px; letter-spacing: 1px;
  padding: 8px 12px; background: rgba(255,255,255,0.04); border-radius: 6px;
}

.av-city-drops-title {
  font-family: var(--font-title); font-size: 11px; letter-spacing: 2px;
  color: var(--gold3); text-transform: uppercase;
}
.av-city-drops {
  display: flex; flex-direction: column; gap: 6px;
}
.av-city-drop-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-title); font-size: 11px;
}
.av-city-drop-icon  { font-size: 18px; flex-shrink: 0; }
.av-city-drop-name  { flex: 1; color: var(--text); letter-spacing: 0.5px; }
.av-city-drop-stats { color: #4ade80; font-size: 10px; letter-spacing: 0.5px; }
.av-city-drop-chance{
  font-family: var(--font-display); font-size: 11px;
  color: var(--gold); min-width: 34px; text-align: right;
}
.av-city-drop-empty {
  font-family: var(--font-title); font-size: 11px;
  color: var(--text-dim); letter-spacing: 1px; padding: 8px 12px;
  font-style: italic;
}

.av-city-enemy-wrap {
  min-height: 140px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 14px;
}
.av-city-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.av-city-actions .btn { flex: 1; min-width: 130px; min-height: 48px; }

/* Zone map XP badge */
.av-zone-xp {
  font-family: var(--font-title); font-size: 8px; letter-spacing: 0.5px;
  color: #a8ff78; margin-top: 2px;
}

/* Mobile adjustments for city overlay */
@media screen and (max-width: 480px) {
  .av-city-panel { padding: 14px 12px 20px; gap: 12px; }
  .av-city-big-icon { font-size: 38px; }
  .av-city-title    { font-size: 20px !important; letter-spacing: 2px !important; }
  .av-city-level-badge { font-size: 17px !important; }
  .av-city-stat-val { font-size: 20px !important; }
  .av-city-stat-lbl { font-size: 8px !important; }
  .av-city-stats-row { gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════
   BLACKSMITH
   ═══════════════════════════════════════════════════════════ */

.bs-layout {
  display: flex; flex-direction: column; gap: 20px;
  max-width: 800px; margin: 0 auto;
}

.bs-intro {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(212,175,55,0.06), rgba(212,175,55,0.02));
  border: 1px solid rgba(212,175,55,0.2); border-radius: 10px;
}
.bs-intro-icon  { font-size: 42px; filter: drop-shadow(0 2px 8px rgba(212,175,55,0.3)); }
.bs-intro-title { font-family: var(--font-display); font-size: 18px; color: var(--gold); letter-spacing: 3px; margin-bottom: 4px; }
.bs-intro-desc  { font-family: var(--font-title); font-size: 11px; color: var(--text-dim); letter-spacing: 0.5px; line-height: 1.6; }
.bs-intro-rule  { font-family: var(--font-title); font-size: 11px; color: var(--text); margin-top: 6px; letter-spacing: 0.5px; }
.bs-intro-rule em { color: var(--gold); font-style: normal; }

.bs-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.bs-empty {
  grid-column: 1 / -1;
  font-family: var(--font-title); font-size: 12px; color: var(--text-dim);
  text-align: center; padding: 40px 20px; letter-spacing: 1px; line-height: 1.8;
}

.bs-item-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  transition: border-color 0.2s;
}
.bs-item-card.bs-ready {
  border-color: rgba(212,175,55,0.4);
  background: rgba(212,175,55,0.05);
  box-shadow: 0 0 20px rgba(212,175,55,0.08);
}

.bs-item-header {
  display: flex; align-items: center; gap: 10px;
}
.bs-item-icon  { font-size: 26px; flex-shrink: 0; }
.bs-item-info  { flex: 1; min-width: 0; }
.bs-item-name  { font-family: var(--font-title); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; }
.bs-item-stats { font-family: var(--font-title); font-size: 10px; color: #4ade80; margin-top: 2px; }
.bs-item-count {
  font-family: var(--font-display); font-size: 20px; font-weight: 900;
  color: var(--text-dim); white-space: nowrap;
}
.bs-item-count span { font-size: 12px; opacity: 0.6; }
.bs-count-ready { color: var(--gold); text-shadow: 0 0 12px rgba(212,175,55,0.5); }

.bs-progress-bg {
  height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden;
}
.bs-progress-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #3a7bff, #6aa3ff);
  transition: width 0.4s ease;
}
.bs-fill-ready {
  background: linear-gradient(90deg, var(--gold3), var(--gold2));
  box-shadow: 0 0 8px rgba(212,175,55,0.4);
}

.bs-item-footer { display: flex; align-items: center; }
.bs-upgrade-btn { width: 100%; font-size: 11px !important; letter-spacing: 1px !important; min-height: 40px; }
.bs-missing {
  font-family: var(--font-title); font-size: 10px; color: var(--text-dim);
  letter-spacing: 0.5px; text-align: center; width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   INVENTORY ITEM ACTION MENU
   ═══════════════════════════════════════════════════════════ */

.inv-item-menu {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(0deg, #0a0a0e 0%, rgba(10,10,14,0.98) 100%);
  border-top: 1px solid rgba(212,175,55,0.25);
  border-radius: 0 0 12px 12px;
  padding: 16px 18px 20px;
  z-index: 10;
  display: flex; flex-direction: column; gap: 12px;
  animation: slideUpMenu 0.2s ease;
}
@keyframes slideUpMenu {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.inv-menu-header {
  display: flex; align-items: center; gap: 10px;
}
.inv-menu-icon { font-size: 22px; }
.inv-menu-name {
  flex: 1; font-family: var(--font-title); font-size: 13px;
  font-weight: 700; color: var(--text);
}
.inv-menu-close {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim); width: 26px; height: 26px; border-radius: 50%;
  cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.inv-menu-stats {
  font-family: var(--font-title); font-size: 11px; color: #4ade80;
  letter-spacing: 0.5px;
}
.inv-menu-actions { display: flex; flex-direction: column; gap: 8px; }
.inv-menu-btn { width: 100%; min-height: 44px; font-size: 12px !important; text-align: left; padding-left: 18px !important; }

/* Mobile Blacksmith */
@media screen and (max-width: 480px) {
  .bs-items-grid { grid-template-columns: 1fr; }
  .bs-intro { flex-direction: column; text-align: center; gap: 12px; }
  .bs-intro-icon { font-size: 32px; }
}

/* ── Collection level filter dropdown ── */
.filter-lvl-wrap { position: relative; display: inline-block; }
.filter-lvl-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 100;
  background: var(--bg3); border: 1px solid rgba(212,175,55,0.25);
  border-radius: 6px; overflow: hidden; min-width: 130px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.filter-lvl-dropdown.hidden { display: none; }
.filter-drop-opt {
  display: block; width: 100%;
  padding: 9px 14px; text-align: left;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-title); font-size: 11px;
  color: var(--text-dim); letter-spacing: 1px;
  transition: background 0.15s, color 0.15s;
}
.filter-drop-opt:hover { background: rgba(212,175,55,0.1); color: var(--gold); }

/* ── Aventura city overlay: persistent HP bar ── */
.av-city-hp-bar-wrap {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.25); border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
}
.av-city-hp-label {
  display: flex; justify-content: space-between;
  font-family: var(--font-title); font-size: 11px; color: var(--text-dim);
  letter-spacing: 0.5px;
}
.av-city-hp-bg  { height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.av-city-hp-fill{ height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.av-city-dead-msg {
  font-family: var(--font-title); font-size: 11px; color: #ef4444;
  letter-spacing: 0.5px; text-align: center; margin-top: 2px;
}

/* ── Item rarity colors in inventory ── */
.cpm-inv-name.rarity-verde   { color: #4ade80 !important; }
.cpm-inv-name.rarity-violeta { color: #a855f7 !important; }
.cpm-inv-name.rarity-common  { color: #aaa; }

/* ── Potion button in city overlay ── */
.av-city-potion-btn {
  width: 100%; min-height: 38px;
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.4) !important;
  color: #fca5a5 !important;
  font-size: 11px !important; letter-spacing: 1px !important;
  transition: background 0.2s, border-color 0.2s;
}
.av-city-potion-btn:hover:not(:disabled) {
  background: rgba(239,68,68,0.22) !important;
  border-color: rgba(239,68,68,0.7) !important;
  color: #fff !important;
}
.av-city-potion-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════
   CHAR PROFILE — HP bar, stats, nav buttons
   ════════════════════════════════════════════════════════════ */

/* HP bar in char profile */
.cpm-hp-section { margin-top: 8px; }
.cpm-hp-header  { display:flex; justify-content:space-between; margin-bottom:4px; }
.cpm-hp-label   { font-family:var(--font-title); font-size:10px; color:var(--text-dim); letter-spacing:1px; }
.cpm-hp-nums    { font-family:var(--font-title); font-size:10px; color:#86efac; letter-spacing:0.5px; }
.cpm-hp-bar-bg  { height:8px; background:rgba(255,255,255,0.07); border-radius:4px; overflow:hidden;
                  border:1px solid rgba(255,255,255,0.05); }
.cpm-hp-bar-fill{ height:100%; border-radius:4px; transition:width 0.4s ease, background 0.4s ease; background:#22c55e; }

/* Stats rows — compact 2-col */
.cpm-stats { margin:10px 0 4px; display:flex; flex-direction:column; gap:4px; }
.cpm-stat-row2 { display:flex; justify-content:space-between; align-items:center;
  padding:6px 10px; background:rgba(255,255,255,0.03); border-radius:5px;
  border:1px solid rgba(255,255,255,0.04); }
.cpm-stat-lbl2  { font-family:var(--font-title); font-size:11px; color:var(--text-dim); letter-spacing:0.5px; }
.cpm-stat-val2  { font-family:var(--font-display); font-size:13px; color:#fff; letter-spacing:1px; }
.cpm-stat-val2.cpm-atk { color:#f87171; }
.cpm-stat-val2.cpm-def { color:#60a5fa; }
.cpm-stat-val2.cpm-hp  { color:#4ade80; }
.cpm-eq-bonus   { font-size:11px; color:#fbbf24; }

/* Nav buttons — 3 across */
.cpm-nav-btns { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:14px; }
.cpm-nav-btn  {
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
  border-radius:8px; cursor:pointer; color:var(--text-dim);
  font-family:var(--font-title); font-size:10px; letter-spacing:1px;
  transition:all 0.2s; text-align:center;
}
.cpm-nav-btn:hover { background:rgba(212,175,55,0.1); border-color:rgba(212,175,55,0.4); color:var(--gold); }
.cpm-nav-icon { font-size:22px; }
.cpm-nav-equip { border-color:rgba(212,175,55,0.25); color:rgba(212,175,55,0.7); }
.cpm-nav-equip:hover { background:rgba(212,175,55,0.15); border-color:var(--gold); color:var(--gold); }

/* ════════════════════════════════════════════════════════════
   SUB-MODALS — Habilidades Pasivas / Activas
   ════════════════════════════════════════════════════════════ */
.sub-modal-overlay {
  position:fixed; inset:0; z-index:230;
  background:rgba(0,0,0,0.88); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.25s;
}
.sub-modal-overlay.hidden   { display:none !important; }
.sub-modal-overlay.cpm-visible { opacity:1; }
.sub-modal-panel {
  background:linear-gradient(160deg,#0d0c08,#080810);
  border:1px solid rgba(212,175,55,0.3);
  border-radius:12px; width:100%; max-width:420px; max-height:80vh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 0 60px rgba(212,175,55,0.1), 0 20px 60px rgba(0,0,0,0.8);
  transform:translateY(16px); transition:transform 0.3s cubic-bezier(0.34,1.2,0.64,1);
}
.sub-modal-overlay.cpm-visible .sub-modal-panel { transform:translateY(0); }
.sub-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid rgba(212,175,55,0.15);
  flex-shrink:0;
}
.sub-modal-title { font-family:var(--font-display); font-size:16px; letter-spacing:3px; color:var(--gold); }
.sub-modal-body  { padding:16px 20px; overflow-y:auto; flex:1; }
.skills-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:160px; text-align:center; }

/* ════════════════════════════════════════════════════════════
   EQUIPMENT SCREEN — full-screen L2-style inventory
   ════════════════════════════════════════════════════════════ */
.equip-screen-overlay {
  position:fixed;
  top:var(--chrome-h,0); left:0; right:0; bottom:0;
  z-index:220;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(80,50,20,0.35) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(30,20,50,0.3) 0%, transparent 60%),
    linear-gradient(180deg,#1a1208 0%,#0d0c0a 100%);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.3s;
  padding:20px;
}
.equip-screen-overlay.hidden    { display:none !important; }
.equip-screen-overlay.cpm-visible { opacity:1; }

.equip-screen-panel {
  width:100%; max-width:800px; max-height:90vh;
  display:flex; flex-direction:column;
  background:
    linear-gradient(160deg,rgba(30,22,10,0.95),rgba(10,8,6,0.98));
  border:2px solid rgba(180,140,60,0.5);
  border-radius:6px;
  box-shadow:0 0 0 1px rgba(180,140,60,0.15),
             0 0 40px rgba(180,140,60,0.12),
             inset 0 1px 0 rgba(255,215,100,0.08),
             0 30px 80px rgba(0,0,0,0.9);
  overflow:hidden;
  transform:scale(0.96); transition:transform 0.3s cubic-bezier(0.34,1.2,0.64,1);
}
.equip-screen-overlay.cpm-visible .equip-screen-panel { transform:scale(1); }

.equip-screen-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  background:linear-gradient(90deg,rgba(180,140,60,0.12),rgba(180,140,60,0.06),rgba(180,140,60,0.12));
  border-bottom:1px solid rgba(180,140,60,0.3);
  flex-shrink:0;
}
.equip-screen-title {
  font-family:var(--font-display); font-size:16px; letter-spacing:4px; color:var(--gold);
  text-shadow:0 0 20px rgba(212,175,55,0.4);
}

.equip-screen-body {
  display:grid; grid-template-columns:220px 1fr; flex:1; overflow:hidden;
  gap:0;
}
@media(max-width:560px){
  .equip-screen-body { grid-template-columns:1fr; grid-template-rows:auto 1fr; overflow-y:auto; }
}

/* -- LEFT: equipment slots ---------------------------------- */
.equip-slots-col {
  border-right:1px solid rgba(180,140,60,0.2);
  padding:16px 14px;
  background:rgba(0,0,0,0.3);
  overflow-y:auto;
  display:flex; flex-direction:column; gap:10px;
}
.equip-slots-title {
  font-family:var(--font-display); font-size:11px; letter-spacing:4px;
  color:rgba(212,175,55,0.6); margin-bottom:4px; text-align:center;
}
.equip-slots-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.es-equip-slot {
  aspect-ratio: 1; border-radius: 4px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 3px; gap: 0;
  border: 2px solid rgba(180,140,60,0.25);
  background: rgba(0,0,0,0.5);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  position: relative; overflow: hidden;
}
.es-slot-empty:hover { border-color: rgba(180,140,60,0.5); background: rgba(180,140,60,0.06); }
.es-slot-filled { box-shadow: 0 0 8px rgba(0,0,0,0.6); }
.es-slot-filled:hover { box-shadow: 0 0 14px rgba(212,175,55,0.25); filter: brightness(1.1); }

/* Image container — fills all available space above label */
.es-slot-img-wrap {
  flex: 1; width: 100%; display: flex; align-items: center; justify-content: center;
  padding: 3px; min-height: 0;
}
.es-slot-img-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.es-slot-ph { font-size: clamp(16px, 2.5vw, 32px); opacity: 0.2; }

.es-slot-label {
  font-family: var(--font-title); font-size: 7px; letter-spacing: 1px;
  color: rgba(212,175,55,0.45); text-align: center; text-transform: uppercase;
  padding: 1px 2px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 100%; flex-shrink: 0;
}

/* -- RIGHT: inventory bag ----------------------------------- */
.equip-bag-col {
  padding:16px; display:flex; flex-direction:column; gap:10px; overflow-y:auto;
}
.equip-bag-title {
  font-family:var(--font-display); font-size:11px; letter-spacing:4px;
  color:rgba(212,175,55,0.6); display:flex; align-items:center; justify-content:space-between;
}
.equip-bag-count {
  font-family:var(--font-title); font-size:10px; color:var(--text-dim); letter-spacing:1px;
}
.equip-bag-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px; flex:1;
  /* Gold outer frame */
  padding:10px;
  background:rgba(0,0,0,0.35);
  border:2px solid rgba(180,140,60,0.4);
  border-radius:4px;
  box-shadow:inset 0 0 20px rgba(0,0,0,0.5),
             0 0 0 1px rgba(180,140,60,0.1);
}
.es-bag-slot {
  aspect-ratio: 1; border-radius: 3px;
  border: 2px solid rgba(180,140,60,0.2);
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  overflow: hidden; padding: 4px; position: relative;
}
.es-bag-empty  { cursor: default; }
.es-bag-empty:hover { border-color: rgba(180,140,60,0.35); }
.es-bag-filled:hover { filter: brightness(1.15); box-shadow: 0 0 10px rgba(0,0,0,0.5); }

/* Image container fills the whole bag cell */
.es-bag-img-wrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.es-bag-img-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* -- Item action menu inside equip screen ------------------- */
.equip-item-menu {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(0deg,rgba(15,12,6,0.99),rgba(20,16,8,0.97));
  border-top:1px solid rgba(180,140,60,0.35);
  padding:16px 20px;
  animation:slideUp 0.2s ease;
  z-index:5;
}
.equip-item-menu.hidden { display:none; }
@keyframes slideUp { from{transform:translateY(100%);opacity:0} to{transform:none;opacity:1} }
.equip-menu-inner { max-width:500px; margin:0 auto; }
.equip-menu-header {
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
.equip-menu-big-icon { font-size:32px; flex-shrink:0; }
.equip-menu-info { flex:1; }
.equip-menu-name  { font-family:var(--font-display); font-size:14px; letter-spacing:2px; color:var(--gold); }
.equip-menu-stats { font-family:var(--font-title); font-size:11px; color:#4ade80; letter-spacing:1px; margin-top:2px; }
.equip-menu-btns  { display:flex; gap:8px; flex-wrap:wrap; }
.equip-menu-btn   { min-height:42px; flex:1; min-width:80px; font-size:12px !important; letter-spacing:1px !important; }

/* ═══ ITEM TOOLTIP ══════════════════════════════════════════ */
.item-tooltip {
  position: fixed; z-index: 9999; pointer-events: none;
  min-width: 190px; max-width: 260px;
  background: linear-gradient(160deg, #0e0b06, #090806);
  border: 1px solid rgba(180,140,60,0.4);
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.8), 0 0 0 1px rgba(180,140,60,0.1);
  opacity: 0; transition: opacity 0.12s;
}
.item-tooltip.visible { opacity: 1; }
.itt-header {
  padding: 10px 12px 8px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.itt-name {
  font-family: var(--font-display); font-size: 14px; letter-spacing: 2px;
  text-shadow: 0 0 12px currentColor;
}
.itt-type {
  font-family: var(--font-title); font-size: 10px; letter-spacing: 1px;
  color: var(--text-dim); margin-top: 3px;
}
.itt-stats {
  padding: 8px 12px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.itt-stat {
  font-family: var(--font-title); font-size: 11px; letter-spacing: 0.5px;
  color: #ccc;
}

/* ══ AVENTURA COMBAT ANIMATIONS ══════════════════════════════ */
/* Portrait attacks rightward, card attacks leftward */
@keyframes avAttackPlayer {
  0%   { transform: translateX(0) scale(1); }
  20%  { transform: translateX(30px) scale(1.07); filter: brightness(1.5) drop-shadow(0 0 18px rgba(212,175,55,0.9)); }
  50%  { transform: translateX(30px) scale(1.07); }
  80%  { transform: translateX(6px) scale(1.02); }
  100% { transform: translateX(0) scale(1); filter: none; }
}
@keyframes avAttackEnemy {
  0%   { transform: translateX(0) scale(1); }
  20%  { transform: translateX(-30px) scale(1.07); filter: brightness(1.5) drop-shadow(0 0 18px rgba(192,57,43,0.9)); }
  50%  { transform: translateX(-30px) scale(1.07); }
  80%  { transform: translateX(-6px) scale(1.02); }
  100% { transform: translateX(0) scale(1); filter: none; }
}
@keyframes avHitPlayer {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(14px); filter: brightness(2) saturate(2) hue-rotate(-20deg); }
  40%  { transform: translateX(-10px); }
  60%  { transform: translateX(7px); }
  80%  { transform: translateX(-4px); }
  100% { transform: translateX(0); filter: none; }
}
@keyframes avHitEnemy {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-14px); filter: brightness(2) saturate(2) hue-rotate(-20deg); }
  40%  { transform: translateX(10px); }
  60%  { transform: translateX(-7px); }
  80%  { transform: translateX(4px); }
  100% { transform: translateX(0); filter: none; }
}
@keyframes avCritHit {
  0%   { transform: translate(0,0) rotate(0deg); }
  10%  { transform: translate(-12px,-8px) rotate(-4deg); filter: brightness(3) saturate(3); }
  20%  { transform: translate(14px,6px)  rotate(5deg); }
  30%  { transform: translate(-10px,10px) rotate(-3deg); }
  40%  { transform: translate(8px,-6px)  rotate(3deg); }
  55%  { transform: translate(-5px,4px)  rotate(-2deg); }
  70%  { transform: translate(3px,-2px)  rotate(1deg); }
  85%  { transform: translate(-1px,1px)  rotate(0deg); }
  100% { transform: translate(0,0) rotate(0deg); filter: none; }
}
.av-anim-attack-player { animation: avAttackPlayer 0.55s ease-in-out forwards !important; z-index: 20; position: relative; }
.av-anim-attack-enemy  { animation: avAttackEnemy  0.55s ease-in-out forwards !important; z-index: 20; position: relative; }
.av-anim-hit-player    { animation: avHitPlayer 0.45s ease forwards !important; }
.av-anim-hit-enemy     { animation: avHitEnemy  0.45s ease forwards !important; }
.av-anim-crit-player   { animation: avCritHit   0.65s ease forwards !important; }
.av-anim-crit-enemy    { animation: avCritHit   0.65s ease forwards !important; }

/* ══ CONSUMABLE STACK COUNT BADGE ════════════════════════════ */
.es-bag-slot { position: relative; }  /* ensure relative for badge */
.es-bag-stack-count {
  position: absolute;
  top: 4px; right: 5px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 6px rgba(212,175,55,0.9), 0 1px 3px rgba(0,0,0,0.9);
  line-height: 1;
  z-index: 5;
  pointer-events: none;
  letter-spacing: 0.5px;
}

/* ══ ENHANCEMENT LEVEL BADGE (+N) — blue, top-left ═══════════ */
.es-bag-enh-badge {
  position: absolute;
  top: 4px; left: 5px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: #60a5fa;
  text-shadow: 0 0 6px rgba(96,165,250,0.9), 0 1px 3px rgba(0,0,0,0.9);
  line-height: 1;
  z-index: 5;
  pointer-events: none;
  letter-spacing: 0.5px;
}

/* ══ VOLUME CONTROL ═══════════════════════════════════════════ */
.vol-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 20px;
  padding: 4px 10px 4px 6px;
  backdrop-filter: blur(4px);
}
.vol-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.vol-btn:hover { transform: scale(1.15); }

.vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 72px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(212,175,55,0.8) 30%, rgba(255,255,255,0.15) 30%);
  outline: none;
  cursor: pointer;
  transition: background 0.1s;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(212,175,55,0.6);
  cursor: pointer;
  border: none;
  transition: transform 0.15s;
}
.vol-slider::-webkit-slider-thumb:hover { transform: scale(1.3); }
.vol-slider::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  cursor: pointer;
}

/* ══ PLAYER STATS UNDER PORTRAIT (Camino al Poder) ═══════════ */
.av-player-stats {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 4px 0 6px;
}
.av-pstat {
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: 0.8px;
  color: #ccc;
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 3px 8px;
  white-space: nowrap;
}
.av-pstat span {
  color: #fff;
  font-weight: 700;
}

/* ══ RACE SKILLS MODAL ════════════════════════════════════════ */
.race-skill-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s;
}
.race-skill-row.skill-learned {
  background: rgba(212,175,55,0.06);
  border-color: rgba(212,175,55,0.18);
}
.race-skill-row.skill-soon {
  opacity: 0.45;
}
.rsk-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
  margin-top: 2px;
}
.rsk-body { flex: 1; min-width: 0; }
.rsk-name {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rsk-badge-learned {
  font-family: var(--font-title);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #4ade80;
  background: rgba(74,222,128,0.12);
  border: 1px solid rgba(74,222,128,0.3);
  border-radius: 10px;
  padding: 1px 7px;
}
.rsk-desc {
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1.5;
  margin-bottom: 2px;
}
.rsk-cd {
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 0.5px;
  margin-top: 3px;
}
.rsk-req {
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 0.5px;
  margin-top: 3px;
}

/* ══ SKILL BAR — Camino al Poder ══════════════════════════════ */
.av-skill-bar {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
  max-width: 260px;
}
.av-skill-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 60px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid;
  padding: 4px 3px 2px;
  gap: 2px;
  transition: all 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.av-skill-ready {
  background: rgba(212,175,55,0.12);
  border-color: rgba(212,175,55,0.6);
  box-shadow: 0 0 10px rgba(212,175,55,0.2);
}
.av-skill-ready:hover {
  background: rgba(212,175,55,0.25);
  border-color: var(--gold);
  transform: scale(1.08);
  box-shadow: 0 0 18px rgba(212,175,55,0.4);
}
.av-skill-ready:active { transform: scale(0.96); }

.av-skill-cd {
  background: rgba(30,30,30,0.7);
  border-color: rgba(255,255,255,0.1);
  cursor: not-allowed;
  opacity: 0.65;
}
.av-skill-icon {
  font-size: 22px;
  line-height: 1;
}
.av-skill-name {
  font-family: var(--font-title);
  font-size: 8px;
  letter-spacing: 0.8px;
  text-align: center;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Cooldown counter — top right corner */
.av-skill-cd-num {
  position: absolute;
  top: 2px; right: 4px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: #f87171;
  text-shadow: 0 0 6px rgba(248,113,113,0.8);
  line-height: 1;
}
/* Ready dot — green indicator */
.av-skill-ready-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,0.8);
}

/* ══ COMBAT SPEED BUTTON ══════════════════════════════════════ */
.arena-speed-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 52px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 1px;
  gap: 3px;
  transition: all 0.15s;
  padding: 6px 10px;
}
.arena-speed-btn:hover {
  background: rgba(212,175,55,0.1);
  border-color: rgba(212,175,55,0.4);
  color: var(--gold);
}
.arena-speed-btn .arena-btn-icon {
  font-size: 12px;
  letter-spacing: -1px;
}

/* ══ VIP SECTION (DC tab) ══════════════════════════════════════ */
.vip-section {
  margin: 20px 16px 0;
  background: linear-gradient(135deg, rgba(168,85,247,0.06), rgba(0,0,0,0.3));
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vip-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vip-crown { font-size: 22px; }
.vip-title {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 4px;
  color: #d8b4fe;
}
.vip-badge {
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: #666;
  margin-left: auto;
}
.vip-desc {
  font-family: var(--font-title);
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.5px;
  line-height: 1.6;
}
.vip-desc strong { color: #d8b4fe; }
.vip-toggle-btn {
  margin-top: 4px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid rgba(212,175,55,0.3);
  background: rgba(212,175,55,0.1);
  color: var(--gold);
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.15s;
  align-self: flex-start;
}
.vip-toggle-btn:hover {
  background: rgba(168,85,247,0.2);
  border-color: rgba(168,85,247,0.5);
  color: #d8b4fe;
}

/* ══ DAILY REWARDS TAB ════════════════════════════════════════ */
#tab-daily { padding: 0 0 80px; }

.daily-header {
  background: linear-gradient(160deg, rgba(212,175,55,0.08), rgba(0,0,0,0.4));
  border-bottom: 1px solid rgba(212,175,55,0.15);
  padding: 20px 16px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.daily-header-icon { font-size: 36px; }
.daily-header-title {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 4px;
  color: var(--gold);
}
.daily-header-sub {
  font-family: var(--font-title);
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 1px;
}
.daily-info-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.daily-day-counter {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 2px;
}
.daily-next-timer {
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.45);
}

.daily-claim-wrap {
  padding: 12px 16px 8px;
  display: flex;
  justify-content: center;
}
.daily-claim-btn {
  padding: 13px 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.08));
  border: 2px solid rgba(212,175,55,0.5);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 0 20px rgba(212,175,55,0.1);
}
.daily-claim-btn:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(212,175,55,0.28), rgba(212,175,55,0.14));
  box-shadow: 0 0 30px rgba(212,175,55,0.25);
  transform: scale(1.02);
}

/* Grid */
.daily-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 8px 10px 24px;
}
@media (max-width: 480px) {
  .daily-grid { grid-template-columns: repeat(3, 1fr); }
}

.daily-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px 4px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 88px;
  cursor: default;
  transition: all 0.15s;
}
.daily-card-day {
  font-family: var(--font-title);
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.35);
}
.daily-card-icon { font-size: 24px; line-height: 1.2; }
.daily-card-label {
  font-family: var(--font-title);
  font-size: 8px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.5);
  line-height: 1.3;
  max-height: 26px;
  overflow: hidden;
}

/* States */
.daily-claimed {
  background: rgba(74,222,128,0.05);
  border-color: rgba(74,222,128,0.2);
  opacity: 0.65;
}
.daily-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: rgba(74,222,128,0.5);
  pointer-events: none;
}
.daily-available {
  background: rgba(212,175,55,0.1);
  border-color: rgba(212,175,55,0.5);
  box-shadow: 0 0 12px rgba(212,175,55,0.15);
  cursor: pointer;
  animation: dailyPulse 2s ease-in-out infinite;
}
.daily-available:hover {
  background: rgba(212,175,55,0.2);
  transform: scale(1.05);
}
.daily-current {
  border-color: rgba(212,175,55,0.3);
}
.daily-future {
  opacity: 0.45;
}
.daily-vip {
  border-color: rgba(168,85,247,0.3);
  background: rgba(168,85,247,0.04);
}
.daily-vip.daily-available {
  border-color: rgba(168,85,247,0.6);
  box-shadow: 0 0 12px rgba(168,85,247,0.2);
  animation: dailyPulseVip 2s ease-in-out infinite;
}
.daily-vip-badge {
  position: absolute;
  top: 3px; right: 4px;
  font-size: 9px;
  line-height: 1;
}

@keyframes dailyPulse {
  0%,100% { box-shadow: 0 0 10px rgba(212,175,55,0.15); }
  50%      { box-shadow: 0 0 22px rgba(212,175,55,0.4); }
}
@keyframes dailyPulseVip {
  0%,100% { box-shadow: 0 0 10px rgba(168,85,247,0.15); }
  50%      { box-shadow: 0 0 22px rgba(168,85,247,0.45); }
}

/* ══ COMBAT SPEED CSS ANIMATION ACCELERATION ══════════════════ */
/* x2 speed: halve animation durations */
body.combat-speed-2 .card-anim-attack-player { animation-duration: 0.28s !important; }
body.combat-speed-2 .card-anim-attack-enemy  { animation-duration: 0.28s !important; }
body.combat-speed-2 .card-anim-hit           { animation-duration: 0.20s !important; }
body.combat-speed-2 .tcg-card.card-anim-attack-player { animation-duration: 0.28s !important; }
body.combat-speed-2 .tcg-card.card-anim-attack-enemy  { animation-duration: 0.28s !important; }
body.combat-speed-2 .tcg-card.card-anim-hit           { animation-duration: 0.20s !important; }

/* x4 speed: quarter animation durations */
body.combat-speed-4 .card-anim-attack-player { animation-duration: 0.12s !important; }
body.combat-speed-4 .card-anim-attack-enemy  { animation-duration: 0.12s !important; }
body.combat-speed-4 .card-anim-hit           { animation-duration: 0.08s !important; }
body.combat-speed-4 .tcg-card.card-anim-attack-player { animation-duration: 0.12s !important; }
body.combat-speed-4 .tcg-card.card-anim-attack-enemy  { animation-duration: 0.12s !important; }
body.combat-speed-4 .tcg-card.card-anim-hit           { animation-duration: 0.08s !important; }

/* ══ VIP BANNER (Shop tab) ════════════════════════════════════ */
.shop-vip-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 auto 18px;
  max-width: 900px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(109,40,217,0.08), rgba(0,0,0,0.3));
  border: 1px solid rgba(168,85,247,0.4);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 0 24px rgba(168,85,247,0.1);
  position: relative;
  overflow: hidden;
}
.shop-vip-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,0.06), transparent);
  animation: vipShimmer 3s ease-in-out infinite;
}
@keyframes vipShimmer {
  0%,100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}
.shop-vip-banner:hover {
  border-color: rgba(168,85,247,0.7);
  box-shadow: 0 0 36px rgba(168,85,247,0.22);
  transform: translateY(-1px);
}
.svb-crown { font-size: 32px; flex-shrink: 0; }
.svb-content { flex: 1; min-width: 0; }
.svb-title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 3px;
  color: #d8b4fe;
  margin-bottom: 6px;
}
.svb-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.svb-benefit {
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.65);
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.2);
  border-radius: 20px;
  padding: 3px 9px;
  white-space: nowrap;
}
.svb-sep { color: rgba(255,255,255,0.2); font-size: 10px; }
.svb-cta {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2px;
  color: #d8b4fe;
  flex-shrink: 0;
  opacity: 0.8;
}
@media(max-width: 600px) {
  .svb-sep { display: none; }
  .shop-vip-banner { flex-wrap: wrap; }
  .svb-cta { width: 100%; text-align: right; }
}

/* ══ HEADER QUICK BUTTONS (Diario + Comprar DC) ══════════════ */
.header-quick-btns {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.hq-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 9px;
  letter-spacing: 0.8px;
  transition: all 0.15s;
  min-width: 52px;
  white-space: nowrap;
}
.hq-btn:hover {
  background: rgba(212,175,55,0.1);
  border-color: rgba(212,175,55,0.35);
  color: var(--gold);
}
.hq-icon { font-size: 16px; line-height: 1; }
.hq-daily { border-color: rgba(74,222,128,0.2); }
.hq-daily:hover { border-color: rgba(74,222,128,0.5); color: #4ade80; background: rgba(74,222,128,0.08); }
.hq-dc    { border-color: rgba(212,175,55,0.2); }
.hq-dc:hover { border-color: rgba(212,175,55,0.5); color: var(--gold); }

@media(max-width: 500px) {
  .hq-label { display: none; }
  .hq-btn { min-width: 36px; padding: 5px 7px; }
}

/* ══ HEADER DC BUTTON GLOW ═════════════════════════════════════ */
.hq-dc {
  animation: dcGlow 2s ease-in-out infinite;
  border-color: rgba(212,175,55,0.5) !important;
}
@keyframes dcGlow {
  0%,100% {
    box-shadow: 0 0 6px rgba(212,175,55,0.3), 0 0 0 0 rgba(212,175,55,0);
    border-color: rgba(212,175,55,0.4) !important;
  }
  50% {
    box-shadow: 0 0 16px rgba(212,175,55,0.7), 0 0 30px rgba(212,175,55,0.2);
    border-color: rgba(212,175,55,0.9) !important;
    color: var(--gold) !important;
  }
}

/* ══ AVENTURA: BIG CITY CARDS ═════════════════════════════════ */
.av-city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}
.av-city-bigcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 12px 18px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(0,0,0,0.3));
  border: 2px solid rgba(var(--zone-color, 200,200,200), 0.25);
  cursor: pointer;
  transition: all 0.18s;
  text-align: center;
  min-height: 160px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.av-city-bigcard:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: var(--zone-color, #888);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(0,0,0,0.2));
}
.av-city-bigcard-locked {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.av-city-bigcard-locked:hover { transform: none; }
.av-city-bigcard-icon { font-size: 44px; line-height: 1; }
.av-city-bigcard-name {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 2px;
  color: #fff;
}
.av-city-bigcard-range {
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.5);
}
.av-city-bigcard-xp {
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #a8ff78;
  background: rgba(168,255,120,0.1);
  border-radius: 10px;
  padding: 2px 10px;
}

/* ══ AVENTURA: SPOTS GRID ════════════════════════════════════= */
.av-spots-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.av-spot-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 2px 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: all 0.15s;
  align-items: start;
}
.av-spot-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(212,175,55,0.35);
  transform: translateX(3px);
}
.av-spot-icon {
  font-size: 28px;
  grid-row: 1 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
}
.av-spot-name {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 2px;
  color: #fff;
  grid-column: 2;
  grid-row: 1;
}
.av-spot-range {
  font-family: var(--font-title);
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.5px;
  grid-column: 2;
  grid-row: 2;
}
.av-spot-desc {
  font-family: var(--font-title);
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.3px;
  grid-column: 2;
  grid-row: 3;
  line-height: 1.4;
}
.av-spot-xp {
  font-family: var(--font-title);
  font-size: 11px;
  color: #a8ff78;
  background: rgba(168,255,120,0.1);
  border-radius: 8px;
  padding: 3px 10px;
  white-space: nowrap;
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}

/* ══ CAMINO AL PODER — BUFF AURA ON PORTRAIT ════════════════ */
.av-combat-portrait.av-portrait-buffed {
  box-shadow:
    0 0 0 3px rgba(74,222,128,0.7),
    0 0 20px rgba(74,222,128,0.5),
    0 0 50px rgba(74,222,128,0.25);
  animation: buffAuraPulse 1.2s ease-in-out infinite;
}
@keyframes buffAuraPulse {
  0%,100% {
    box-shadow:
      0 0 0 3px rgba(74,222,128,0.6),
      0 0 18px rgba(74,222,128,0.4),
      0 0 45px rgba(74,222,128,0.15);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(74,222,128,0.9),
      0 0 35px rgba(74,222,128,0.7),
      0 0 80px rgba(74,222,128,0.35),
      0 0 0 12px rgba(74,222,128,0.12);
  }
}
/* Green particle shimmer overlay on portrait */
.av-combat-portrait.av-portrait-buffed::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  background: linear-gradient(135deg,
    rgba(74,222,128,0.15) 0%,
    transparent 40%,
    rgba(74,222,128,0.1) 70%,
    transparent 100%);
  animation: buffShimmer 2s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes buffShimmer {
  0%   { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(200%)  translateY(200%)  rotate(45deg); }
}

/* ══ BUFF INDICATOR — top-left of portrait ════════════════════ */
.av-combat-portrait { position: relative; overflow: visible !important; }
.av-buff-indicator {
  position: absolute;
  top: -10px; left: -10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.75);
  border: 2px solid rgba(74,222,128,0.9);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  z-index: 10;
  box-shadow: 0 0 10px rgba(74,222,128,0.6);
  animation: buffIconPulse 1.4s ease-in-out infinite;
}
.av-buff-indicator.hidden { display: none; }
@keyframes buffIconPulse {
  0%,100% { box-shadow: 0 0 8px rgba(74,222,128,0.5); transform: scale(1); }
  50%      { box-shadow: 0 0 18px rgba(74,222,128,0.9); transform: scale(1.12); }
}

/* ══ SKILL BAR TOOLTIP — bigger font on hover ════════════════= */
.av-skill-btn:hover::after {
  font-size: 12px !important;
}
/* Larger title attr tooltips via a custom overlay — handled by title attr natively */
.av-skill-btn { position: relative; }
.av-skill-btn[title]:hover::before {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.92);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--font-title);
  font-size: 12px;
  color: #fff;
  white-space: pre-wrap;
  max-width: 220px;
  z-index: 100;
  pointer-events: none;
  line-height: 1.5;
  letter-spacing: 0.5px;
  text-align: center;
}

/* ══ COMBAT LAYOUT — enemy cards right, btns inline with hand ═ */
.enemy-hand-right {
  justify-content: flex-end !important;
  flex-direction: row-reverse !important;
}
.enemy-deck-label {
  color: #f87171 !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 4px 0;
  opacity: 0.8;
}
.enemy-hand-display .hand-card-back:hover::after {
  content: 'MAZO ENEMIGO';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%; transform: translateX(-50%);
  background: rgba(200,0,0,0.88);
  border: 1px solid rgba(248,113,113,0.5);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: var(--font-display);
  font-size: 11px;
  color: #fca5a5;
  letter-spacing: 2px;
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
}
.enemy-hand-display .hand-card-back { position: relative; }

/* Bottom row: buttons + hand side by side */
.arena-bottom-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,0.97), rgba(0,0,0,0.85));
  border-top: 1px solid rgba(212,175,55,0.12);
}
.arena-bottom-row .arena-action-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.arena-bottom-row .arena-hand-section {
  flex: 1;
  border-top: none;
  padding: 0;
  background: none;
}

/* ══ LAYOUT FIXES v108 ════════════════════════════════════════ */

/* Enemy hand — top RIGHT corner */
.enemy-hand-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  padding: 6px 10px !important;
}

/* "Mazo Enemigo" label only on hover via CSS tooltip */
.enemy-hand-display {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 4px;
  cursor: default;
}
.enemy-hand-display::after {
  content: 'MAZO ENEMIGO';
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: rgba(180,0,0,0.88);
  border: 1px solid rgba(248,113,113,0.5);
  border-radius: 6px;
  padding: 5px 12px;
  font-family: var(--font-display);
  font-size: 11px;
  color: #fca5a5;
  letter-spacing: 2px;
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.enemy-hand-display:hover::after {
  opacity: 1;
}

/* Bottom row — hand LEFT, buttons RIGHT in a horizontal row */
.arena-bottom-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  gap: 12px;
  padding: 8px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,0.97), rgba(0,0,0,0.85));
  border-top: 1px solid rgba(212,175,55,0.12);
}
.arena-bottom-row .arena-hand-section {
  flex: 1;
  border-top: none;
  padding: 0;
  background: none;
}
.arena-bottom-row .arena-action-btns {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 8px;
  flex-shrink: 0;
}

/* ══ AVENTURA: CITY ROWS (vertical centered) ══════════════════ */
.av-map-body-full {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100%;
  padding: 0;
}
.av-zone-map-full {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 40px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  box-sizing: border-box;
}
.av-city-row {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 18px 20px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.1);
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(0,0,0,0.4));
  cursor: pointer;
  transition: all 0.18s;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.av-city-row:hover {
  transform: translateX(4px);
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.25));
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  border-color: var(--zone-color, rgba(212,175,55,0.4));
}
.av-city-row-locked {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.av-city-row-locked:hover { transform: none; }
.av-city-row-icon {
  font-size: 42px;
  flex-shrink: 0;
  width: 56px;
  text-align: center;
}
.av-city-row-body { flex: 1; min-width: 0; }
.av-city-row-name {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 3px;
  margin-bottom: 5px;
}
.av-city-row-desc {
  font-family: var(--font-title);
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.5px;
  line-height: 1.5;
  margin-bottom: 6px;
}
.av-city-row-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.av-city-row-lvl {
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 2px 8px;
}
.av-city-row-xp {
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #a8ff78;
  background: rgba(168,255,120,0.1);
  border-radius: 8px;
  padding: 2px 8px;
}
.av-city-row-spots {
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--gold);
  background: rgba(212,175,55,0.08);
  border-radius: 8px;
  padding: 2px 8px;
}
.av-city-row-arrow {
  font-size: 24px;
  color: rgba(255,255,255,0.25);
  flex-shrink: 0;
}

/* ══ COMBAT LOG TOGGLE ════════════════════════════════════════ */
.log-toggle-btn {
  position: fixed;
  bottom: 14px;
  right: 14px;
  z-index: 120;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(0,0,0,0.8);
  border: 1px solid rgba(212,175,55,0.3);
  color: rgba(255,255,255,0.6);
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.15s;
  backdrop-filter: blur(4px);
}
.log-toggle-btn:hover {
  border-color: rgba(212,175,55,0.6);
  color: var(--gold);
}
.log-close-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
  float: right;
}

/* ══ CARD: ABILITY HOVER ONLY ═════════════════════════════════ */
.tcg-ability-hover {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.94);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  white-space: normal;
  max-width: 180px;
  z-index: 200;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}
.tcg-ability-box { position: relative; }
.tcg-card:hover .tcg-ability-hover { display: block; }

/* ══ CARD STATS — colored ═════════════════════════════════════ */
/* stat colors removed — all white */

/* ══ CARD RESPONSIVE FONT ═════════════════════════════════════ */
.tcg-card { container-type: inline-size; }
@container (max-width: 130px) {
  .tcg-name     { font-size: 9px !important; }
  .tcg-stat-val { font-size: 9px !important; }
  .tcg-stat-icon { font-size: 9px !important; }
  .tcg-stat-lv  { font-size: 8px !important; }
  .tcg-ability-name { font-size: 8px !important; }
}
@container (max-width: 100px) {
  .tcg-name     { font-size: 7px !important; }
  .tcg-stat-val { font-size: 7px !important; }
  .tcg-stat-icon { font-size: 7px !important; }
  .tcg-stat-lv  { font-size: 6px !important; }
  .tcg-ability-name { display: none; }
}

/* ══ VIP SECTION GLOW ════════════════════════════════════════= */
.vip-section {
  margin: 0 0 18px !important;
  background: linear-gradient(135deg, rgba(168,85,247,0.12), rgba(109,40,217,0.06)) !important;
  border: 1px solid rgba(168,85,247,0.5) !important;
  animation: vipSectionGlow 2.5s ease-in-out infinite;
  box-shadow: 0 0 24px rgba(168,85,247,0.15);
}
@keyframes vipSectionGlow {
  0%,100% { box-shadow: 0 0 16px rgba(168,85,247,0.12); border-color: rgba(168,85,247,0.4); }
  50%      { box-shadow: 0 0 40px rgba(168,85,247,0.35); border-color: rgba(168,85,247,0.8); }
}

/* ══ CARD ABILITY — hidden, tooltip on hover ══════════════════ */
.tcg-ability-hover-wrap {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.96);
  border: 1px solid rgba(212,175,55,0.45);
  border-radius: 10px;
  padding: 10px 14px;
  z-index: 9999;
  pointer-events: none;
  min-width: 160px;
  max-width: 200px;
  text-align: center;
  white-space: normal;
  box-shadow: 0 6px 24px rgba(0,0,0,0.85);
}
.tcg-card { overflow: visible !important; }
.tcg-art-area { overflow: hidden !important; }
.tcg-card:hover .tcg-ability-hover-wrap { display: block; }
.tcg-ability-hover-wrap .tcg-ability-name {
  font-size: 10px;
  letter-spacing: 1px;
  margin-bottom: 4px;
  display: block;
}
.tcg-ability-hover-wrap .tcg-ability-text {
  font-size: 10px;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
  display: block;
}

/* ══ CHARACTER HUB ════════════════════════════════════════════ */
#char-hub {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050300;
}
#char-hub.hidden { display: none; }
.chub-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(212,175,55,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.chub-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 24px 30px;
  width: 100%;
  max-width: 600px;
}
.chub-logo {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 8px;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(212,175,55,0.5);
}
.chub-logo span { color: rgba(212,175,55,0.4); }
.chub-sub {
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 4px;
  color: rgba(212,175,55,0.35);
  margin-top: -8px;
  margin-bottom: 4px;
}
.chub-title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}
.chub-slots {
  display: flex;
  gap: 14px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}
/* Common slot */
.chub-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 160px;
  min-height: 220px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
  overflow: hidden;
  padding: 16px 12px;
  box-sizing: border-box;
  gap: 8px;
}
/* Filled slot */
.chub-slot-filled {
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(0,0,0,0.5));
  border: 2px solid rgba(212,175,55,0.25);
}
.chub-slot-filled:hover {
  border-color: rgba(212,175,55,0.6);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 20px rgba(212,175,55,0.15);
}
.chub-slot-portrait {
  width: 80px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(212,175,55,0.3);
  flex-shrink: 0;
}
.chub-portrait-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.chub-portrait-emoji {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
}
.chub-slot-info { text-align: center; }
.chub-slot-name {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 3px;
}
.chub-slot-race {
  font-family: var(--font-title);
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.5px;
}
.chub-slot-level {
  font-family: var(--font-title);
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
}
.chub-slot-play {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.15s;
  margin-top: 4px;
}
.chub-slot-filled:hover .chub-slot-play { opacity: 1; }
/* Empty slot */
.chub-slot-empty {
  background: rgba(255,255,255,0.02);
  border: 2px dashed rgba(255,255,255,0.12);
}
.chub-slot-empty:hover {
  border-color: rgba(212,175,55,0.4);
  background: rgba(212,175,55,0.04);
  transform: translateY(-2px);
}
.chub-slot-plus {
  font-size: 40px;
  color: rgba(255,255,255,0.2);
  line-height: 1;
}
.chub-slot-empty-txt {
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.3);
}
/* Locked slot */
.chub-slot-locked {
  background: rgba(212,175,55,0.03);
  border: 2px solid rgba(212,175,55,0.3);
  animation: chubLockPulse 2.5s ease-in-out infinite;
}
.chub-slot-locked:hover { transform: translateY(-2px); }
@keyframes chubLockPulse {
  0%,100% { box-shadow: 0 0 10px rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.25); }
  50%      { box-shadow: 0 0 24px rgba(212,175,55,0.3); border-color: rgba(212,175,55,0.6); }
}
.chub-slot-lock { font-size: 32px; }
.chub-slot-lock-txt {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold);
}
.chub-slot-lock-price {
  font-family: var(--font-title);
  font-size: 10px;
  color: rgba(212,175,55,0.6);
  letter-spacing: 0.5px;
}
.chub-slot-lock-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(212,175,55,0.06), transparent 70%);
  pointer-events: none;
}
.chub-footer { margin-top: 6px; }
.chub-delete-btn {
  background: none;
  border: 1px solid rgba(220,38,38,0.3);
  color: rgba(220,38,38,0.5);
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 6px 16px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.chub-delete-btn:hover {
  border-color: rgba(220,38,38,0.6);
  color: #f87171;
}

/* Inicio button replacing Reset */
.btn-inicio {
  font-size: 12px;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-inicio:hover {
  border-color: rgba(212,175,55,0.4);
  color: var(--gold);
}

/* ══ CHAMPION CARD — usa marco champion.jpg, sin borde verde ═ */
.tcg-card.champion::after { content: none !important; }
.tcg-card.champion { outline: none !important; box-shadow: none !important; animation: none !important; }

/* Champion filter button */
.filter-champion-btn {
  color: #4ade80 !important;
  border-color: rgba(74,222,128,0.4) !important;
}
.filter-champion-btn.active {
  background: rgba(74,222,128,0.15) !important;
  border-color: #4ade80 !important;
}

/* ══ CHAMPION ODDS BADGE ══════════════════════════════════════ */
.odds-badge.champion-badge {
  background: rgba(74,222,128,0.12);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,0.35);
  font-weight: 700;
}

/* ══ CHAR HUB — per-slot delete button ═══════════════════════ */
.chub-slot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.chub-delete-char-btn {
  background: none;
  border: 1px solid rgba(220,38,38,0.3);
  color: rgba(220,38,38,0.5);
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
}
.chub-delete-char-btn:hover {
  border-color: rgba(220,38,38,0.7);
  color: #f87171;
  background: rgba(220,38,38,0.06);
}

/* ══ COMBAT BOTTOM ROW — transparencia y fondos ══════════════ */
.arena-bottom-row {
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(212,175,55,0.08) !important;
}

/* ══ BOTONES COMBATE — misma altura, distintos colores ════════ */
/* Base unificada para los 3 botones */
.arena-attack-btn,
.arena-auto-btn,
.arena-speed-btn {
  min-height: 64px !important;
  height: 64px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  clip-path: none !important;
  font-family: var(--font-title) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  min-width: 80px !important;
}

/* ATACAR CON CARTA — rojo/dorado */
.arena-attack-btn {
  background: linear-gradient(160deg, rgba(180,30,30,0.25), rgba(80,10,10,0.4)) !important;
  border: 1px solid rgba(220,60,60,0.5) !important;
  color: #ff8080 !important;
  animation: attackBtnPulse 3s ease-in-out infinite !important;
}
.arena-attack-btn:not(:disabled):hover {
  background: linear-gradient(160deg, rgba(220,50,50,0.4), rgba(120,20,20,0.5)) !important;
  border-color: #ff4444 !important;
  box-shadow: 0 0 20px rgba(220,60,60,0.4) !important;
}
.attack-btn-text {
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: #ff8080 !important;
  text-shadow: 0 0 10px rgba(220,60,60,0.6) !important;
}
.attack-btn-icon { font-size: 18px !important; }

/* AUTO — violeta */
.arena-auto-btn {
  background: rgba(100,30,180,0.18) !important;
  border: 1px solid rgba(160,80,255,0.35) !important;
  color: #c084fc !important;
  min-height: 64px !important;
  height: 64px !important;
}

/* VELOCIDAD — azul/cyan */
.arena-speed-btn {
  background: rgba(20,80,160,0.18) !important;
  border: 1px solid rgba(80,160,255,0.35) !important;
  color: #60a5fa !important;
  min-height: 64px !important;
  height: 64px !important;
}
.arena-speed-btn:hover {
  background: rgba(30,100,200,0.28) !important;
  border-color: rgba(100,180,255,0.6) !important;
  color: #93c5fd !important;
}

/* ══ RAID BOSS — borde dorado parpadeante ════════════════════ */
.tcg-card.rare {
  outline: 2px solid rgba(212,175,55,0.8) !important;
  outline-offset: 2px;
  animation: raidBossGlow 1.8s ease-in-out infinite !important;
}
@keyframes raidBossGlow {
  0%,100% {
    box-shadow: 0 0 10px rgba(212,175,55,0.4), 0 0 25px rgba(212,175,55,0.15);
    outline-color: rgba(212,175,55,0.6);
  }
  50% {
    box-shadow: 0 0 22px rgba(212,175,55,0.8), 0 0 50px rgba(212,175,55,0.35), 0 0 80px rgba(212,175,55,0.12);
    outline-color: rgba(255,215,0,1);
  }
}
/* Override rare::after (rarity tint) with nothing — frame handles it */
.tcg-card.rare::after { content: none !important; }

/* ══ CARD NAME AT BOTTOM (replacing type-line) ═══════════════ */
.tcg-name-bottom {
  position: absolute;
  bottom: 4px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-title);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 3;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.8);
}
.tcg-name-bottom.common    { color: #D4B870; }
.tcg-name-bottom.rare      { color: #FFD700; text-shadow: 0 0 8px rgba(255,215,0,0.6), 0 1px 3px rgba(0,0,0,0.9); }
.tcg-name-bottom.legendary { color: var(--gold2); text-shadow: 0 0 12px rgba(255,215,0,0.8), 0 1px 3px rgba(0,0,0,0.9); }

/* Hide old type-line everywhere */
.tcg-type-line { display: none !important; }
/* Hide old tcg-name (now empty div but keep for spacing) */
.tcg-name-area { pointer-events: none; }

/* ══════════════════════════════════════════════════════════════
   v116 — HAMBURGER + DRAWER + INFO MODAL + HEADER REORG
   ══════════════════════════════════════════════════════════════ */

/* ── HAMBURGER BUTTON (hidden on desktop, visible on mobile) ── */
.header-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  transition: all 0.2s;
}
.header-hamburger:hover,
.header-hamburger:active {
  background: rgba(212,175,55,0.1);
  border-color: rgba(212,175,55,0.5);
}
.header-hamburger .hm-line {
  width: 22px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transition: all 0.2s;
}

/* ── DRAWER OVERLAY ── */
.menu-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
  z-index: 399;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.menu-drawer-overlay.open { opacity: 1; }
.menu-drawer-overlay.hidden { display: none; }

/* ── DRAWER PANEL ── */
.menu-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(78vw, 320px);
  background: linear-gradient(180deg, #12100A 0%, #0B0B0D 100%);
  border-right: 1px solid rgba(212,175,55,0.25);
  box-shadow: 8px 0 40px rgba(0,0,0,0.7);
  z-index: 400;
  transform: translateX(-100%);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
}
.menu-drawer.open { transform: translateX(0); }
.menu-drawer.hidden { display: none; }

.md-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(212,175,55,0.15);
  background: linear-gradient(180deg, rgba(212,175,55,0.08), transparent);
}
.md-title {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 4px;
  color: var(--gold);
  text-shadow: 0 0 18px var(--gold-glow);
}
.md-close {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.md-close:hover { color: var(--red); border-color: rgba(192,57,43,0.4); }

.md-links {
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
}
.md-link {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  min-height: 52px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-title);
  font-size: 13px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}
.md-link:hover,
.md-link:active {
  background: rgba(212,175,55,0.1);
  border-color: rgba(212,175,55,0.4);
  color: var(--gold);
}
.md-link .md-ico {
  font-size: 22px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.md-link .md-lbl { flex: 1; }

/* ── INFO MODAL ── */
.info-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(6px);
  z-index: 450;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.info-modal-overlay.open { opacity: 1; }
.info-modal-overlay.hidden { display: none; }

.info-modal-panel {
  background: linear-gradient(180deg, #141210 0%, #0B0B0D 100%);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 14px;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.85), 0 0 40px rgba(212,175,55,0.08);
  overflow: hidden;
}
.info-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(212,175,55,0.15);
  background: linear-gradient(180deg, rgba(212,175,55,0.08), transparent);
  flex-shrink: 0;
}
.info-modal-title {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--gold);
  text-shadow: 0 0 16px var(--gold-glow);
}
.info-modal-close {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
}
.info-modal-close:hover { color: var(--red); border-color: rgba(192,57,43,0.4); }
.info-modal-body {
  padding: 18px 20px 22px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.info-section-title {
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212,175,55,0.15);
}
.info-rarity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.info-rarity-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 12px 14px;
}
.info-rare-common    { border-color: rgba(200,168,80,0.25); }
.info-rare-rare      { border-color: rgba(110,163,255,0.3); }
.info-rare-legendary { border-color: rgba(255,215,0,0.35); }
.info-rar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.info-rar-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
.info-rar-dot.common-dot    { background: #C8A850; }
.info-rar-dot.rare-dot      { background: #6EA3FF; box-shadow: 0 0 8px rgba(110,163,255,0.6); }
.info-rar-dot.legendary-dot { background: #FFD700; box-shadow: 0 0 10px rgba(255,215,0,0.7); }
.info-rar-name {
  font-family: var(--font-title);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--text);
  text-transform: uppercase;
}
.info-rar-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.info-rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.info-rule-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 12px 14px;
}
.info-rule-title {
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 6px;
}
.info-rule-text {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ── NEW HEADER QUICK BUTTONS: hq-shop, hq-info ── */
.hq-shop {
  border-color: rgba(255,140,40,0.3) !important;
}
.hq-shop:hover,
.hq-shop:active {
  border-color: rgba(255,140,40,0.7) !important;
  color: #ffb070 !important;
  background: rgba(255,140,40,0.1) !important;
}
.hq-info {
  border-color: rgba(110,163,255,0.25) !important;
}
.hq-info:hover,
.hq-info:active {
  border-color: rgba(110,163,255,0.6) !important;
  color: #9fc5ff !important;
  background: rgba(110,163,255,0.08) !important;
}

/* ── VOLUME CONTROL: bigger tap target (helps desktop too) ── */
.vol-btn {
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE: 500px — desktop nav hides on mobile
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .header-hamburger { display: flex; }
  #nav { display: none !important; }
}

/* ── Keep header-right compact on small screens ── */
@media (max-width: 500px) {
  .info-rules-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   v118 — AUTH SCREEN (registro / login)
   ══════════════════════════════════════════════════════════════ */
#auth-screen {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: linear-gradient(160deg, #0A0A0C 0%, #100C06 50%, #0A0A0C 100%);
}
#auth-screen.hidden { display: none; }

.auth-bg-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 30% 20%, rgba(212,175,55,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 70% 80%, rgba(139,47,212,0.05) 0%, transparent 70%);
}

.auth-panel {
  position: relative;
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, #141210 0%, #0D0B09 100%);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 16px;
  padding: 32px 28px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.8), 0 0 40px rgba(212,175,55,0.06);
  max-height: 95vh;
  overflow-y: auto;
}

.auth-logo {
  font-family: var(--font-display);
  font-size: 26px; letter-spacing: 5px;
  color: var(--gold); text-align: center;
  text-shadow: 0 0 30px var(--gold-glow);
  margin-bottom: 4px;
}
.auth-logo span { color: rgba(212,175,55,0.4); font-size: 0.6em; }
.auth-sub {
  font-family: var(--font-title); font-size: 10px; letter-spacing: 3px;
  color: var(--text-dim); text-align: center; margin-bottom: 24px;
}

/* Tabs */
.auth-tabs {
  display: flex; gap: 0; margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.auth-tab {
  flex: 1; padding: 10px; text-align: center;
  font-family: var(--font-title); font-size: 11px; letter-spacing: 2px;
  color: var(--text-dim); background: none; border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer; transition: all 0.2s;
  text-transform: uppercase;
}
.auth-tab:hover { color: var(--text); }
.auth-tab.active { color: var(--gold); border-bottom-color: var(--gold); }

/* Fields */
.auth-field { margin-bottom: 14px; }
.auth-label {
  display: block; font-family: var(--font-title);
  font-size: 9px; letter-spacing: 2px; color: var(--text-dim);
  margin-bottom: 6px; text-transform: uppercase;
}
.auth-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; padding: 12px 14px;
  color: var(--text); font-family: var(--font-title);
  font-size: 13px; letter-spacing: 1px;
  outline: none; transition: border-color 0.2s;
}
.auth-input:focus { border-color: rgba(212,175,55,0.5); }
.auth-input::placeholder { color: rgba(255,255,255,0.2); }

/* Error */
.auth-error {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 6px; padding: 8px 12px;
  font-family: var(--font-title); font-size: 11px; letter-spacing: 0.5px;
  color: #fca5a5; margin-bottom: 12px;
}
.auth-error.hidden { display: none; }

/* Submit button */
.auth-submit-btn {
  width: 100%; margin-top: 6px;
  min-height: 48px; font-size: 13px !important;
  letter-spacing: 3px !important;
}

/* Success */
.auth-success-box {
  text-align: center; padding: 8px 0;
}
.auth-success-icon {
  font-size: 48px; margin-bottom: 12px;
}
.auth-success-title {
  font-family: var(--font-display); font-size: 20px;
  letter-spacing: 3px; color: #4ade80; margin-bottom: 8px;
}
.auth-success-msg {
  font-family: var(--font-title); font-size: 12px; letter-spacing: 0.5px;
  color: var(--text-dim); line-height: 1.6; margin-bottom: 4px;
}

/* Char hub server slots */
.chub-slot.occupied { cursor: pointer; }
.chub-slot.occupied:hover { border-color: rgba(212,175,55,0.5); }
.chub-slot-btn {
  margin-top: 8px;
  font-family: var(--font-title); font-size: 10px; letter-spacing: 2px;
  color: var(--gold); opacity: 0.7;
}
.chub-slot.occupied:hover .chub-slot-btn { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   v119 — PvP RANKED
   ══════════════════════════════════════════════════════════════ */

#tab-pvp { padding: 16px; }

.pvp-offline {
  text-align:center; padding:60px 20px; color:var(--text-dim);
}
.pvp-offline-icon  { font-size:48px; margin-bottom:12px; opacity:0.4; }
.pvp-offline-title { font-family:var(--font-display); font-size:20px; letter-spacing:3px; color:var(--text); margin-bottom:8px; }
.pvp-offline-msg   { font-family:var(--font-title); font-size:13px; letter-spacing:0.5px; }

/* Header */
.pvp-header {
  text-align:center; margin-bottom:18px;
  padding-bottom:14px; border-bottom:1px solid rgba(212,175,55,0.15);
}
.pvp-title {
  font-family:var(--font-display); font-size:26px; letter-spacing:5px;
  color:var(--gold); text-shadow:0 0 20px var(--gold-glow);
}
.pvp-sub {
  font-family:var(--font-title); font-size:10px; letter-spacing:3px;
  color:var(--text-dim); margin-top:4px;
}

/* Mi Ranking */
.pvp-my-rank { margin-bottom:18px; }
.pvp-my-rank-loading {
  text-align:center; padding:14px; color:var(--text-dim);
  font-family:var(--font-title); font-size:11px; letter-spacing:1px;
}
.pvp-my-rank-box {
  background:linear-gradient(135deg, rgba(212,175,55,0.08) 0%, rgba(0,0,0,0.3) 100%);
  border:1px solid rgba(212,175,55,0.3);
  border-radius:12px; padding:16px;
}
.pvp-my-rank-label {
  font-family:var(--font-title); font-size:9px; letter-spacing:3px;
  color:var(--gold); margin-bottom:8px; text-transform:uppercase;
}
.pvp-my-rank-row {
  display:flex; align-items:center; gap:18px;
}
.pvp-my-rank-points {
  font-family:var(--font-display); font-size:42px; letter-spacing:2px;
  color:var(--gold); text-shadow:0 0 16px var(--gold-glow);
  line-height:1;
}
.pvp-my-rank-stats {
  font-family:var(--font-title); font-size:12px; letter-spacing:0.5px;
  color:var(--text-dim); line-height:1.7;
}
.pvp-my-rank-stats strong { color:var(--text); }

/* Acciones */
.pvp-actions {
  display:flex; flex-direction:column; gap:10px; margin-bottom:18px;
}
.pvp-search-btn  { min-height:54px !important; font-size:14px !important; letter-spacing:3px !important; }
.pvp-ranking-btn,
.pvp-history-btn { min-height:44px; }

/* Info */
.pvp-info {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px; padding:12px 14px;
}
.pvp-info-row {
  display:flex; justify-content:space-between;
  font-family:var(--font-title); font-size:11px; letter-spacing:0.5px;
  color:var(--text-dim); padding:4px 0;
}
.pvp-info-row span:last-child { color:var(--text); }

/* ── Overlays ──────────────────────────────────────────────── */
.pvp-overlay {
  position:fixed; inset:0; z-index:600;
  background:rgba(0,0,0,0.85);
  display:flex; align-items:center; justify-content:center; padding:20px;
}

.pvp-rival-modal,
.pvp-result-modal,
.pvp-ranking-modal {
  position:relative;
  background:linear-gradient(180deg, #141210 0%, #0a0908 100%);
  border:1px solid rgba(212,175,55,0.4);
  border-radius:14px; padding:26px 22px;
  max-width:420px; width:100%;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.8);
}

.pvp-close-btn {
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.15);
  color:var(--text); font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s;
}
.pvp-close-btn:hover { background:rgba(239,68,68,0.4); }

/* ── Rival preview ─────────────────────────────────────────── */
.pvp-rival-title {
  font-family:var(--font-display); font-size:14px; letter-spacing:3px;
  color:var(--gold); text-align:center; margin-bottom:18px;
}
.pvp-rival-card {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px; padding:18px; text-align:center; margin-bottom:18px;
}
.pvp-rival-avatar { font-size:54px; margin-bottom:8px; }
.pvp-rival-name {
  font-family:var(--font-display); font-size:18px; letter-spacing:2px;
  color:var(--text); margin-bottom:4px;
}
.pvp-rival-sub {
  font-family:var(--font-title); font-size:11px; letter-spacing:1.5px;
  color:var(--text-dim); margin-bottom:14px;
}
.pvp-rival-stats {
  display:flex; justify-content:space-around; gap:12px;
  padding-top:12px; border-top:1px solid rgba(255,255,255,0.08);
}
.pvp-rival-stat-val {
  font-family:var(--font-display); font-size:20px; letter-spacing:1px;
  color:var(--gold);
}
.pvp-rival-stat-lbl {
  font-family:var(--font-title); font-size:8px; letter-spacing:1.5px;
  color:var(--text-dim); margin-top:2px;
}
.pvp-rival-actions {
  display:flex; gap:10px;
}
.pvp-rival-actions .btn { flex:1; min-height:46px; }

/* ── Resultado ─────────────────────────────────────────────── */
.pvp-result-modal { text-align:center; }
.pvp-result-icon { font-size:64px; margin-bottom:10px; }
.pvp-result-title {
  font-family:var(--font-display); font-size:30px; letter-spacing:5px;
  margin-bottom:8px;
}
.pvp-result-title.win  { color:#4ade80; text-shadow:0 0 20px rgba(74,222,128,0.5); }
.pvp-result-title.lose { color:#f87171; text-shadow:0 0 20px rgba(248,113,113,0.5); }
.pvp-result-rival {
  font-family:var(--font-title); font-size:13px; letter-spacing:1px;
  color:var(--text-dim); margin-bottom:16px;
}
.pvp-result-delta {
  font-family:var(--font-display); font-size:32px; letter-spacing:2px;
  margin-bottom:6px;
}
.pvp-result-delta.pos { color:#4ade80; }
.pvp-result-delta.neg { color:#f87171; }
.pvp-result-total {
  font-family:var(--font-title); font-size:13px; color:var(--text); margin-bottom:6px;
}
.pvp-result-record {
  font-family:var(--font-title); font-size:11px; color:var(--text-dim);
  letter-spacing:1px; margin-bottom:18px;
}

/* ── Ranking table ─────────────────────────────────────────── */
.pvp-ranking-modal { max-width:520px; }
.pvp-ranking-title {
  font-family:var(--font-display); font-size:18px; letter-spacing:3px;
  color:var(--gold); text-align:center; margin-bottom:16px;
}
.pvp-ranking-table-wrap {
  max-height:60vh; overflow-y:auto;
  border:1px solid rgba(255,255,255,0.08); border-radius:8px;
}
.pvp-ranking-table {
  width:100%; border-collapse:collapse;
  font-family:var(--font-title); font-size:12px;
}
.pvp-ranking-table th {
  background:rgba(212,175,55,0.1);
  color:var(--gold); padding:10px 8px;
  font-size:10px; letter-spacing:2px;
  text-align:left; position:sticky; top:0;
}
.pvp-ranking-table td {
  padding:9px 8px; border-bottom:1px solid rgba(255,255,255,0.04);
  color:var(--text);
}
.pvp-ranking-table tr.is-me {
  background:rgba(212,175,55,0.08);
}
.pvp-ranking-table tr.is-me td { color:var(--gold); }
.rk-pos { font-weight:bold; width:50px; }
.rk-name { color:var(--text); }
.rk-name strong { font-weight:normal; }
.rk-lvl { color:var(--text-dim); font-size:10px; margin-left:6px; }
.rk-pts { text-align:right; color:var(--gold); width:60px; font-weight:bold; }
.rk-pts.pos { color:#4ade80; }
.rk-pts.neg { color:#f87171; }
.rk-wl  { text-align:right; color:var(--text-dim); width:80px; font-size:11px; }

/* Mobile tweaks */
@media (max-width: 768px) {
  .pvp-rival-modal, .pvp-result-modal { max-width:95vw; padding:20px 16px; }
  .pvp-result-title { font-size:24px; letter-spacing:3px; }
  .pvp-result-delta { font-size:26px; }
  .pvp-rival-name { font-size:16px; }
  .pvp-ranking-table { font-size:11px; }
  .pvp-ranking-table td, .pvp-ranking-table th { padding:7px 5px; }
}

/* ══════════════════════════════════════════════════════════════
   v120 — ENCHANT SYSTEM (estilo Lineage 2 Interlude)
   ══════════════════════════════════════════════════════════════ */

.enchant-overlay {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(0,0,0,0.88);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px;
  animation: enchFadeIn 0.18s ease-out;
}
@keyframes enchFadeIn { from { opacity: 0; } to { opacity: 1; } }

.enchant-modal {
  position: relative;
  background: linear-gradient(180deg, #141210 0%, #0a0908 100%);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 14px;
  padding: 28px 24px;
  max-width: 460px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(212,175,55,0.06);
}
.enchant-modal-small { max-width: 380px; }

.enchant-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.enchant-close:hover { background: rgba(239,68,68,0.4); }

.enchant-title {
  font-family: var(--font-display);
  font-size: 18px; letter-spacing: 3px;
  color: var(--gold);
  text-align: center; margin-bottom: 6px;
  text-shadow: 0 0 18px var(--gold-glow);
}
.enchant-sub {
  font-family: var(--font-title);
  font-size: 11px; letter-spacing: 1.5px;
  color: var(--text-dim);
  text-align: center; margin-bottom: 18px;
}

/* Lista de items a encantar */
.enchant-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 55vh; overflow-y: auto;
}
.ep-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.ep-row:hover:not(.ep-disabled) {
  background: rgba(212,175,55,0.1);
  border-color: rgba(212,175,55,0.4);
  transform: translateX(3px);
}
.ep-row.ep-disabled {
  opacity: 0.45; cursor: not-allowed;
}
.ep-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.3); border-radius: 6px;
}
.ep-info { flex: 1; min-width: 0; }
.ep-name {
  font-family: var(--font-title); font-size: 13px;
  color: var(--text); margin-bottom: 3px;
  letter-spacing: 0.3px;
}
.ep-sub {
  font-family: var(--font-title); font-size: 11px;
  letter-spacing: 0.5px;
}
.ep-lvl {
  color: var(--gold); font-weight: bold; margin-left: 4px;
}
.ep-max {
  background: #f87171; color: #fff;
  font-size: 9px; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 3px;
  margin-left: 6px;
}
.ep-eq {
  background: rgba(74,222,128,0.2); color: #4ade80;
  font-size: 9px; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 3px;
  margin-left: 6px;
}
.ep-arrow {
  color: var(--gold); font-size: 18px; font-weight: bold;
}
.ep-empty {
  text-align: center; padding: 30px 20px;
  font-family: var(--font-title); font-size: 12px;
  color: var(--text-dim); letter-spacing: 0.5px;
}

/* Confirmación */
.ec-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; margin-bottom: 16px;
  padding: 16px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.ec-item-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
}
.ec-item-name {
  font-family: var(--font-display); font-size: 15px;
  letter-spacing: 1.5px; color: var(--text);
}
.ec-message {
  background: rgba(255,255,255,0.03);
  border-radius: 8px; padding: 12px 14px; margin-bottom: 16px;
}
.ec-line {
  font-family: var(--font-title); font-size: 12px;
  color: var(--text); letter-spacing: 0.3px;
  line-height: 1.6; margin-bottom: 6px;
}
.ec-line:last-child { margin-bottom: 0; }
.ec-line.ec-safe {
  color: #4ade80;
  font-size: 11px; letter-spacing: 2px; font-weight: bold;
  text-transform: uppercase;
}
.ec-line.ec-risky {
  color: #f5c518;
  font-size: 11px; letter-spacing: 2px; font-weight: bold;
  text-transform: uppercase;
}
.ec-chance-ok   { color: #4ade80; font-weight: bold; }
.ec-chance-fail { color: #f87171; font-weight: bold; }
.ec-actions {
  display: flex; gap: 10px;
}
.ec-actions .btn { flex: 1; min-height: 44px; }

/* Resultado */
.enchant-success, .enchant-fail {
  text-align: center; overflow: hidden;
}
.er-flash {
  position: absolute; inset: 0;
  pointer-events: none; opacity: 0.3;
  animation: erFlash 0.8s ease-out;
}
.er-flash-success {
  background: radial-gradient(ellipse at center, rgba(74,222,128,0.5) 0%, transparent 70%);
}
.er-flash-fail {
  background: radial-gradient(ellipse at center, rgba(248,113,113,0.5) 0%, transparent 70%);
}
@keyframes erFlash {
  0%   { opacity: 0.8; transform: scale(0.5); }
  50%  { opacity: 0.5; }
  100% { opacity: 0; transform: scale(1.5); }
}
.er-icon {
  font-size: 58px; margin-bottom: 8px;
  position: relative; z-index: 1;
  animation: erIconPop 0.5s ease-out;
}
@keyframes erIconPop {
  0% { transform: scale(0.3); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.er-title {
  font-family: var(--font-display); font-size: 26px;
  letter-spacing: 5px; margin-bottom: 14px;
  position: relative; z-index: 1;
}
.er-title-success { color: #4ade80; text-shadow: 0 0 24px rgba(74,222,128,0.6); }
.er-title-fail    { color: #f87171; text-shadow: 0 0 24px rgba(248,113,113,0.6); }
.er-item {
  margin-bottom: 10px; position: relative; z-index: 1;
}
.er-name {
  font-family: var(--font-title); font-size: 13px;
  letter-spacing: 0.5px; color: var(--text);
  margin-bottom: 18px; position: relative; z-index: 1;
}
.er-name strong {
  font-family: var(--font-display); font-size: 17px;
  color: var(--gold); margin-left: 4px;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .enchant-modal { padding: 22px 16px; max-width: 95vw; }
  .enchant-title { font-size: 15px; letter-spacing: 2px; }
  .ep-row { padding: 9px 10px; gap: 10px; }
  .ep-icon { width: 38px; height: 38px; }
  .ep-name { font-size: 12px; }
  .er-title { font-size: 22px; letter-spacing: 3px; }
  .er-icon { font-size: 48px; }
}

/* ══════════════════════════════════════════════════════════════
   v121 — ANIMACIÓN DE ENCHANT (fusión + explosión)
   ══════════════════════════════════════════════════════════════ */

.enchant-anim-box {
    text-align: center;
    padding: 20px;
}

.ea-stage {
    position: relative;
    width: 200px; height: 200px;
    margin: 0 auto 24px;
    display: flex; align-items: center; justify-content: center;
}

/* Item que se está encantando — en el centro */
.ea-item {
    position: absolute;
    z-index: 3;
    width: 90px; height: 90px;
    display: flex; align-items: center; justify-content: center;
    animation: eaItemPulse 2s ease-in-out;
    filter: drop-shadow(0 0 12px rgba(212,175,55,0.5));
}
@keyframes eaItemPulse {
    0%   { transform: scale(1);    filter: drop-shadow(0 0 8px rgba(212,175,55,0.3));  }
    40%  { transform: scale(1.15); filter: drop-shadow(0 0 20px rgba(212,175,55,0.8)); }
    80%  { transform: scale(1.25); filter: drop-shadow(0 0 32px rgba(255,215,80,1));   }
    90%  { transform: scale(0.8);  filter: brightness(3);                               }
    100% { transform: scale(1);    filter: brightness(1);                               }
}

/* Scroll que se fusiona con el item — entra desde arriba y desaparece */
.ea-scroll {
    position: absolute;
    z-index: 2;
    width: 70px; height: 70px;
    display: flex; align-items: center; justify-content: center;
    animation: eaScrollMerge 1.2s ease-in forwards;
    filter: drop-shadow(0 0 12px rgba(212,175,55,0.8));
}
@keyframes eaScrollMerge {
    0%   { top: -120px; opacity: 0;   transform: scale(1.2) rotate(0deg);   }
    30%  { top: -60px;  opacity: 1;   transform: scale(1) rotate(180deg);   }
    75%  { top: 50%;    opacity: 1;   transform: translate(-50%,-50%) scale(0.7) rotate(540deg); left: 50%; }
    100% { top: 50%;    opacity: 0;   transform: translate(-50%,-50%) scale(0.2) rotate(720deg); left: 50%; }
}

/* Runas que giran alrededor */
.ea-runes {
    position: absolute;
    inset: 0;
    z-index: 1;
    animation: eaRunesSpin 2s linear;
}
.ea-rune {
    position: absolute;
    color: #D4AF37;
    font-size: 24px;
    text-shadow: 0 0 12px rgba(212,175,55,0.8);
    animation: eaRunePulse 1s ease-in-out infinite alternate;
}
.ea-rune:nth-child(1) { top: 0;    left: 50%; transform: translateX(-50%); }
.ea-rune:nth-child(2) { top: 25%;  right: 0;                               }
.ea-rune:nth-child(3) { bottom: 25%; right: 0;                             }
.ea-rune:nth-child(4) { bottom: 0; left: 50%; transform: translateX(-50%); }
.ea-rune:nth-child(5) { bottom: 25%; left: 0;                              }
.ea-rune:nth-child(6) { top: 25%;  left: 0;                                }

@keyframes eaRunesSpin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}
@keyframes eaRunePulse {
    from { opacity: 0.4; transform: scale(0.8); }
    to   { opacity: 1;   transform: scale(1.3); }
}

/* Flash del momento de impacto */
.ea-flash {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255,215,80,0.9) 0%, transparent 60%);
    opacity: 0;
    animation: eaFlash 2s ease-out;
    pointer-events: none;
    z-index: 4;
}
@keyframes eaFlash {
    0%, 75% { opacity: 0;   transform: scale(0.5); }
    85%     { opacity: 1;   transform: scale(1.5); }
    100%    { opacity: 0;   transform: scale(2);   }
}

/* Explosión al final */
.ea-explosion {
    position: absolute;
    font-size: 100px;
    opacity: 0;
    z-index: 5;
    animation: eaExplode 2s ease-out;
    pointer-events: none;
    filter: drop-shadow(0 0 20px rgba(255,215,80,1));
}
@keyframes eaExplode {
    0%, 80% { opacity: 0; transform: scale(0.3); }
    88%     { opacity: 1; transform: scale(1.4); }
    95%     { opacity: 0.7; transform: scale(1.8); }
    100%    { opacity: 0; transform: scale(2.5); }
}

.ea-label {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 4px;
    color: var(--gold);
    text-shadow: 0 0 16px var(--gold-glow);
    animation: eaLabelPulse 0.8s ease-in-out infinite alternate;
}
@keyframes eaLabelPulse {
    from { opacity: 0.7; }
    to   { opacity: 1;   }
}

@media (max-width: 768px) {
    .ea-stage { width: 160px; height: 160px; }
    .ea-item { width: 70px; height: 70px; }
    .ea-scroll { width: 55px; height: 55px; }
    .ea-rune { font-size: 18px; }
    .ea-explosion { font-size: 78px; }
}

/* ══════════════════════════════════════════════════════════════
   v121 — CHAR HUB: top bar, locked slots, logout, inventory
   ══════════════════════════════════════════════════════════════ */

/* Top bar con botones logout + inventory */
.chub-topbar {
    position: absolute;
    top: 20px; left: 0; right: 0;
    display: flex; justify-content: space-between;
    padding: 0 24px;
    z-index: 10;
    pointer-events: none; /* Los botones sí son clickables */
}
.chub-top-btn {
    pointer-events: auto;
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(180deg, rgba(30,25,20,0.95) 0%, rgba(20,15,10,0.95) 100%);
    border: 1px solid rgba(212,175,55,0.3);
    color: var(--text);
    font-family: var(--font-title);
    font-size: 12px; letter-spacing: 1.5px;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 44px;
    backdrop-filter: blur(6px);
}
.chub-top-btn:hover {
    border-color: rgba(212,175,55,0.7);
    background: linear-gradient(180deg, rgba(40,30,20,1) 0%, rgba(30,20,10,1) 100%);
    transform: translateY(-1px);
}
.chub-top-ico { font-size: 18px; }
.chub-logout-btn { color: #f87171; }
.chub-logout-btn:hover { border-color: rgba(248,113,113,0.6); color: #fca5a5; }
.chub-inventory-btn { color: var(--gold); }

/* Slot bloqueado */
.chub-slot.locked {
    background: linear-gradient(135deg, rgba(60,40,40,0.3) 0%, rgba(40,20,20,0.3) 100%);
    border: 2px dashed rgba(248,113,113,0.3);
    cursor: pointer;
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 16px;
    min-height: 220px;
    transition: all 0.2s;
}
.chub-slot.locked:hover {
    border-color: rgba(248,113,113,0.6);
    background: linear-gradient(135deg, rgba(80,50,50,0.4) 0%, rgba(60,30,30,0.4) 100%);
}
.chub-slot-lock {
    font-size: 48px; margin-bottom: 12px;
    filter: grayscale(0.4) opacity(0.7);
}
.chub-slot-price {
    font-family: var(--font-display);
    font-size: 16px; letter-spacing: 2px;
    color: #4ade80;
    margin-top: 8px;
    padding: 4px 12px;
    background: rgba(74,222,128,0.1);
    border-radius: 6px;
}

/* Modal de compra de slot */
.chub-slot-modal {
    position: fixed; inset: 0; z-index: 800;
    display: flex; align-items: center; justify-content: center;
}
.chub-slot-modal.hidden { display: none; }
.csm-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.88);
}
.csm-panel {
    position: relative;
    background: linear-gradient(180deg, #141210 0%, #0a0908 100%);
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 14px;
    padding: 32px 28px;
    max-width: 420px;
    width: calc(100% - 32px);
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.csm-close {
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text); font-size: 20px; cursor: pointer;
}
.csm-icon { font-size: 56px; margin-bottom: 12px; }
.csm-title {
    font-family: var(--font-display);
    font-size: 20px; letter-spacing: 3px;
    color: var(--gold);
    margin-bottom: 12px;
}
.csm-desc {
    font-family: var(--font-title);
    font-size: 13px; letter-spacing: 0.5px;
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 18px;
}
.csm-price {
    display: inline-flex; align-items: baseline; gap: 6px;
    background: rgba(74,222,128,0.1);
    border: 1px solid rgba(74,222,128,0.3);
    border-radius: 10px;
    padding: 14px 24px;
}
.csm-price-val {
    font-family: var(--font-display);
    font-size: 32px; letter-spacing: 2px;
    color: #4ade80;
}
.csm-price-cur {
    font-family: var(--font-title);
    font-size: 12px; letter-spacing: 2px;
    color: #4ade80;
}
.csm-note {
    font-family: var(--font-title);
    font-size: 10px; letter-spacing: 1px;
    color: var(--text-dim);
    margin-top: 12px;
}

/* Modal de inventario del hub */
.chub-inventory-modal {
    position: fixed; inset: 0; z-index: 800;
}
.chub-inventory-modal.hidden { display: none; }
.cim-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.85);
}
.cim-panel {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    background: linear-gradient(180deg, #141210 0%, #0a0908 100%);
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 14px;
    padding: 24px 20px;
    max-width: 640px;
    width: calc(100% - 32px);
    max-height: 90vh;
    overflow-y: auto;
}
.cim-close {
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text); font-size: 20px; cursor: pointer;
}
.cim-title {
    font-family: var(--font-display);
    font-size: 18px; letter-spacing: 3px;
    color: var(--gold);
    text-align: center;
    margin-bottom: 16px;
}
.cim-char-select {
    display: flex; gap: 8px; flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 18px;
}
.cim-char-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-dim);
    font-family: var(--font-title);
    font-size: 12px; letter-spacing: 1px;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.cim-char-btn:hover {
    border-color: rgba(212,175,55,0.4);
    color: var(--text);
}
.cim-char-btn.active {
    background: rgba(212,175,55,0.15);
    border-color: rgba(212,175,55,0.6);
    color: var(--gold);
}
.cim-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}
.cim-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    font-family: var(--font-title);
    font-size: 13px; letter-spacing: 0.5px;
    color: var(--text-dim);
}
.cim-item {
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
    overflow: hidden;
}
.cim-item.rarity-verde   { border-color: rgba(74,222,128,0.5); background: rgba(74,222,128,0.05); }
.cim-item.rarity-violeta { border-color: rgba(168,85,247,0.5); background: rgba(168,85,247,0.05); }
.cim-item-icon {
    width: 56px; height: 56px;
    margin: 0 auto 8px;
    display: flex; align-items: center; justify-content: center;
}
.cim-item-name {
    font-family: var(--font-title);
    font-size: 11px; letter-spacing: 0.3px;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 4px;
    word-break: break-word;
}
.cim-item-slot {
    font-family: var(--font-title);
    font-size: 9px; letter-spacing: 1.5px;
    color: var(--text-dim);
    text-transform: uppercase;
}
.cim-eq-badge {
    position: absolute; top: 4px; right: 4px;
    background: rgba(74,222,128,0.9);
    color: #000;
    font-family: var(--font-title);
    font-size: 8px; letter-spacing: 1px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
}

/* Botón "Volver" en pantalla de creación */
.cc-back-btn {
    position: absolute;
    top: 20px; left: 20px;
    z-index: 20;
    display: flex; align-items: center; gap: 6px;
    background: linear-gradient(180deg, rgba(30,25,20,0.95) 0%, rgba(20,15,10,0.95) 100%);
    border: 1px solid rgba(212,175,55,0.3);
    color: var(--text);
    font-family: var(--font-title);
    font-size: 12px; letter-spacing: 1.5px;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 42px;
    backdrop-filter: blur(6px);
}
.cc-back-btn:hover {
    border-color: rgba(212,175,55,0.7);
    transform: translateX(-2px);
}
.cc-back-btn.hidden { display: none; }
.cc-back-ico { font-size: 18px; }

/* ══════════════════════════════════════════════════════════════
   v121 — Mobile: char hub responsive
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .chub-topbar {
        top: 12px;
        padding: 0 10px;
    }
    .chub-top-btn {
        padding: 8px 12px;
        font-size: 10px;
        letter-spacing: 1px;
        min-height: 40px;
    }
    .chub-top-lbl {
        /* Mostrar solo icono en pantallas muy chicas */
        display: none;
    }
    @media (min-width: 380px) {
        .chub-top-lbl { display: inline; }
    }
    .chub-top-ico { font-size: 16px; }

    .chub-slot-lock { font-size: 36px; }
    .chub-slot-price { font-size: 14px; }

    .csm-panel { padding: 24px 18px; }
    .csm-icon { font-size: 44px; }
    .csm-title { font-size: 16px; letter-spacing: 2px; }
    .csm-price-val { font-size: 26px; }

    .cim-panel { padding: 18px 14px; }
    .cim-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
    .cim-item-icon { width: 44px; height: 44px; }
    .cim-item-name { font-size: 10px; }

    .cc-back-btn {
        top: 12px; left: 10px;
        padding: 8px 12px;
        font-size: 10px;
        min-height: 38px;
    }
}

/* ══════════════════════════════════════════════════════════════
   v121 — FIX: z-index del menú en combate PvE celular
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Hamburger drawer y sus overlays SIEMPRE por encima del combate */
    #menu-drawer, #menu-drawer-overlay {
        z-index: 9999 !important;
    }
    #info-modal-overlay {
        z-index: 9998 !important;
    }
    /* Combate PvE y sus elementos deben estar por debajo de los modales del menú */
    #aventura-combat-screen {
        z-index: 150 !important;
    }
    #aventura-zone-screen, #aventura-spot-screen {
        z-index: 100 !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF3 — MERCHANT / MARKETPLACE
   ══════════════════════════════════════════════════════════════ */

/* Botón Bolso y Merchant en header */
.hq-btn.hq-bag {
    background: linear-gradient(180deg, rgba(60,45,20,0.95) 0%, rgba(40,30,12,0.95) 100%);
    border: 1px solid rgba(212,175,55,0.5);
    color: var(--gold);
}
.hq-btn.hq-bag:hover {
    border-color: rgba(212,175,55,0.9);
    background: linear-gradient(180deg, rgba(80,60,30,1) 0%, rgba(60,45,20,1) 100%);
}
.hq-btn.hq-merchant {
    background: linear-gradient(180deg, rgba(50,35,60,0.95) 0%, rgba(30,20,40,0.95) 100%);
    border: 1px solid rgba(168,85,247,0.5);
    color: #c79fff;
}
.hq-btn.hq-merchant:hover {
    border-color: rgba(168,85,247,0.9);
}

/* Container principal */
.merchant-container {
    padding: 20px 16px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.merchant-header {
    margin-bottom: 20px;
}
.merchant-title-row {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    margin-bottom: 14px;
}
.merchant-title {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 4px;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(212,175,55,0.3);
    margin: 0;
}
.merchant-info {
    font-family: var(--font-title);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    background: rgba(168,85,247,0.15);
    border: 1px solid rgba(168,85,247,0.4);
    padding: 4px 10px;
    border-radius: 6px;
}

/* Tabs Comprar / Mis Ventas */
.merchant-tabs {
    display: flex; gap: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.m-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-family: var(--font-title);
    font-size: 12px;
    letter-spacing: 1.5px;
    padding: 12px 14px;
    cursor: pointer;
    position: relative;
    transition: color 0.15s;
    min-height: 44px;
}
.m-tab:hover { color: var(--text); }
.m-tab.active {
    color: var(--gold);
}
.m-tab.active::after {
    content: '';
    position: absolute; bottom: -1px; left: 0; right: 0;
    height: 2px; background: var(--gold);
}

/* Filtros */
.m-filters {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.m-filter-select {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text);
    font-family: var(--font-title);
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    min-height: 40px;
}
.m-filter-select:focus {
    border-color: rgba(212,175,55,0.5);
    outline: none;
}

/* Grid de listings */
.m-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}

/* Card de cada listing */
.m-listing-card {
    display: flex; gap: 12px;
    background: linear-gradient(180deg, rgba(30,25,20,0.8) 0%, rgba(20,16,12,0.8) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px;
    transition: all 0.15s;
}
.m-listing-card:hover {
    border-color: rgba(212,175,55,0.4);
    transform: translateY(-1px);
}
.m-listing-card.rarity-verde   { border-color: rgba(74,222,128,0.5); }
.m-listing-card.rarity-violeta { border-color: rgba(168,85,247,0.5); }

.m-listing-icon {
    width: 60px; height: 60px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
}
.m-listing-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
}
.m-listing-name {
    font-family: var(--font-title);
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--text);
    font-weight: 600;
}
.m-listing-stats {
    font-family: var(--font-title);
    font-size: 11px;
    color: var(--gold);
    letter-spacing: 0.5px;
}
.m-listing-seller {
    font-family: var(--font-title);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.3px;
}
.m-listing-time {
    font-family: var(--font-title);
    font-size: 10px;
    color: #f5c518;
    letter-spacing: 0.5px;
}
.m-listing-status {
    font-family: var(--font-title);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}
.m-status-sold      { color: #4ade80; }
.m-status-cancelled { color: #94a3b8; }
.m-status-expired   { color: #f87171; }

.m-listing-actions {
    display: flex; flex-direction: column; justify-content: center;
    min-width: 100px;
}
.m-listing-btn {
    width: 100%;
    min-height: 40px;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    padding: 8px 10px !important;
}

/* Empty states */
.m-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-dim);
}
.m-empty-ico {
    font-size: 56px;
    margin-bottom: 12px;
    opacity: 0.5;
}
.m-empty-msg {
    font-family: var(--font-title);
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.m-empty-sub {
    font-family: var(--font-title);
    font-size: 11px;
    color: var(--text-dim);
    opacity: 0.7;
}
.m-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    font-family: var(--font-title);
    font-size: 13px;
    color: var(--text-dim);
    letter-spacing: 1px;
}

/* ── MODAL PONER EN VENTA ── */
.merchant-overlay {
    position: fixed; inset: 0; z-index: 750;
    background: rgba(0,0,0,0.88);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px;
    animation: enchFadeIn 0.18s ease-out;
}

.merchant-modal {
    position: relative;
    background: linear-gradient(180deg, #141210 0%, #0a0908 100%);
    border: 1px solid rgba(168,85,247,0.4);
    border-radius: 14px;
    padding: 28px 22px;
    max-width: 440px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.m-close {
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text); font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.m-modal-title {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 3px;
    color: var(--gold);
    text-align: center;
    margin-bottom: 18px;
}

.m-sell-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px;
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    margin-bottom: 18px;
}
.m-sell-icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
}
.m-sell-name {
    font-family: var(--font-title);
    font-size: 14px;
    letter-spacing: 0.5px;
    color: var(--text);
    text-align: center;
}

.m-sell-field { margin-bottom: 14px; }
.m-sell-label {
    display: block;
    font-family: var(--font-title);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--text-dim);
    margin-bottom: 6px;
    text-transform: uppercase;
}
.m-sell-input {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text);
    font-family: var(--font-title);
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 6px;
    min-height: 44px;
    box-sizing: border-box;
}
.m-sell-input:focus {
    border-color: rgba(168,85,247,0.6);
    outline: none;
}
.m-sell-hint {
    font-family: var(--font-title);
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 4px;
    letter-spacing: 0.5px;
}

.m-sell-durations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.m-dur-btn {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text);
    padding: 10px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 52px;
    font-family: inherit;
}
.m-dur-btn:hover {
    border-color: rgba(168,85,247,0.3);
}
.m-dur-btn.active {
    background: rgba(168,85,247,0.15);
    border-color: rgba(168,85,247,0.6);
}
.m-dur-h {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--text);
    margin-bottom: 2px;
}
.m-dur-btn.active .m-dur-h { color: #c79fff; }
.m-dur-d {
    font-family: var(--font-title);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text-dim);
}

.m-sell-summary {
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 16px 0;
}
.m-sum-row {
    display: flex; justify-content: space-between;
    font-family: var(--font-title);
    font-size: 12px;
    color: var(--text-dim);
    padding: 4px 0;
    letter-spacing: 0.3px;
}
.m-sum-total {
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 6px;
    padding-top: 8px !important;
    font-weight: bold;
    color: #4ade80;
    font-size: 14px !important;
}

.m-sell-actions {
    display: flex; gap: 8px;
}
.m-sell-actions .btn { flex: 1; min-height: 44px; }

/* Mobile */
@media (max-width: 768px) {
    .merchant-title { font-size: 20px; letter-spacing: 3px; }
    .merchant-info { font-size: 10px; }
    .m-listings-grid { grid-template-columns: 1fr; }
    .m-listing-card { padding: 10px; }
    .m-listing-icon { width: 50px; height: 50px; }
    .m-listing-name { font-size: 12px; }
    .m-listing-btn { font-size: 11px !important; }

    .merchant-modal { padding: 20px 16px; }
    .m-modal-title { font-size: 16px; letter-spacing: 2px; }
}

/* ── v121 HF4: Avatar real en char hub ── */
.chub-slot-img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(212,175,55,0.5);
    display: block;
    margin: 0 auto 8px;
    background: #1a1614;
}
.chub-slot.occupied:hover .chub-slot-img {
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(212,175,55,0.4);
}
.chub-slot-emoji {
    font-size: 52px;
    display: block;
    text-align: center;
    margin-bottom: 8px;
}
@media (max-width: 768px) {
    .chub-slot-img { width: 72px; height: 72px; }
    .chub-slot-emoji { font-size: 42px; }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF5 — DAILY REWARD MODAL
   ══════════════════════════════════════════════════════════════ */
.daily-reward-overlay {
    position: fixed; inset: 0;
    z-index: 900;
    background: rgba(0,0,0,0.92);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
.daily-reward-overlay.drm-visible {
    opacity: 1;
}

.drm-panel {
    position: relative;
    background: linear-gradient(180deg, #1a1410 0%, #0a0806 100%);
    border: 2px solid rgba(212,175,55,0.6);
    border-radius: 18px;
    padding: 36px 28px 28px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow:
        0 0 60px rgba(212,175,55,0.3),
        0 20px 60px rgba(0,0,0,0.9);
    transform: scale(0.8);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}
.drm-visible .drm-panel {
    transform: scale(1);
}

/* Sparkles decorativas */
.drm-sparkles {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.drm-sp {
    position: absolute;
    color: var(--gold);
    font-size: 20px;
    opacity: 0.8;
    animation: drmSparkle 2s ease-in-out infinite alternate;
    text-shadow: 0 0 12px rgba(212,175,55,0.8);
}
.drm-sp:nth-child(1) { top: 10%; left: 8%;  animation-delay: 0s;   }
.drm-sp:nth-child(2) { top: 15%; right: 10%; animation-delay: 0.5s; }
.drm-sp:nth-child(3) { bottom: 20%; left: 10%; animation-delay: 1s;   }
.drm-sp:nth-child(4) { bottom: 15%; right: 8%; animation-delay: 1.5s; }
@keyframes drmSparkle {
    0%   { opacity: 0.3; transform: scale(0.7); }
    100% { opacity: 1;   transform: scale(1.2); }
}

.drm-badge {
    display: inline-block;
    background: rgba(212,175,55,0.15);
    border: 1px solid rgba(212,175,55,0.4);
    color: var(--gold);
    font-family: var(--font-title);
    font-size: 11px;
    letter-spacing: 3px;
    padding: 5px 14px;
    border-radius: 12px;
    margin-bottom: 14px;
    font-weight: bold;
}

.drm-title {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 4px;
    color: var(--gold);
    text-shadow: 0 0 24px rgba(212,175,55,0.5);
    margin-bottom: 8px;
}

.drm-sub {
    font-family: var(--font-title);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--text-dim);
    margin-bottom: 22px;
}

/* El premio en el centro */
.drm-prize {
    background:
        radial-gradient(ellipse at center top, rgba(212,175,55,0.18) 0%, transparent 70%),
        rgba(255,255,255,0.03);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 14px;
    padding: 24px 16px;
    margin-bottom: 18px;
    animation: drmPrizeFloat 2.5s ease-in-out infinite alternate;
}
@keyframes drmPrizeFloat {
    from { transform: translateY(-2px); }
    to   { transform: translateY(2px);  }
}

.drm-prize-icon {
    font-size: 72px;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 20px rgba(212,175,55,0.6));
    animation: drmIconPulse 1.4s ease-in-out infinite alternate;
}
@keyframes drmIconPulse {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

.drm-prize-label {
    font-family: var(--font-title);
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--text);
    line-height: 1.3;
    font-weight: 600;
}

.drm-prize-vip {
    display: inline-block;
    margin-top: 10px;
    background: linear-gradient(135deg, #d4af37 0%, #ffcc00 100%);
    color: #1a1410;
    font-family: var(--font-title);
    font-size: 10px;
    letter-spacing: 2px;
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: bold;
}

.drm-vip-warning {
    background: rgba(212,175,55,0.08);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: var(--font-title);
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--gold);
    line-height: 1.5;
    margin-bottom: 16px;
}

.drm-actions {
    display: flex;
    gap: 10px;
}
.drm-btn-later, .drm-btn-claim {
    flex: 1;
    min-height: 48px;
    font-size: 13px !important;
    letter-spacing: 1px !important;
}
.drm-btn-claim {
    background: linear-gradient(180deg, #d4af37 0%, #b38f2e 100%) !important;
    color: #1a1410 !important;
    font-weight: bold !important;
    box-shadow: 0 4px 16px rgba(212,175,55,0.4);
    animation: drmBtnGlow 1.5s ease-in-out infinite alternate;
}
@keyframes drmBtnGlow {
    from { box-shadow: 0 4px 16px rgba(212,175,55,0.3); }
    to   { box-shadow: 0 4px 24px rgba(212,175,55,0.7); }
}
.drm-btn-claim:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .drm-panel { padding: 28px 20px 22px; }
    .drm-title { font-size: 22px; letter-spacing: 3px; }
    .drm-prize-icon { font-size: 58px; }
    .drm-prize-label { font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF6 — FRIENDS + CHAT SYSTEM
   ══════════════════════════════════════════════════════════════ */

/* Botón header */
.hq-btn.hq-friends {
    background: linear-gradient(180deg, rgba(30,60,45,0.95) 0%, rgba(15,40,25,0.95) 100%);
    border: 1px solid rgba(74,222,128,0.5);
    color: #86efac;
}
.hq-btn.hq-friends:hover {
    border-color: rgba(74,222,128,0.9);
}

/* Container principal */
.friends-container {
    padding: 20px 16px 40px;
    max-width: 900px;
    margin: 0 auto;
}

.friends-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.friends-title {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 4px;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(212,175,55,0.3);
    margin: 0;
}

.friends-add-btn {
    min-height: 40px;
    font-size: 12px !important;
    letter-spacing: 1px !important;
}

/* Secciones */
.f-section {
    margin-bottom: 24px;
}
.f-section-title {
    font-family: var(--font-title);
    font-size: 12px;
    letter-spacing: 2.5px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(212,175,55,0.2);
}

.f-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Card de amigo / solicitud */
.f-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, rgba(30,25,20,0.8) 0%, rgba(20,16,12,0.8) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 14px;
    transition: all 0.15s;
}
.f-card:hover {
    border-color: rgba(212,175,55,0.4);
    transform: translateY(-1px);
}

.f-card-avatar {
    width: 48px; height: 48px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 24px;
}

.f-race-icon { font-size: 24px; }

.f-card-info {
    flex: 1;
    min-width: 0;
}
.f-card-name {
    font-family: var(--font-title);
    font-size: 14px;
    letter-spacing: 0.5px;
    color: var(--text);
    font-weight: 600;
    margin-bottom: 2px;
}
.f-card-meta {
    font-family: var(--font-title);
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.3px;
}

.f-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.f-card-btn {
    min-height: 36px;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    padding: 6px 12px !important;
}
.f-card-btn-small {
    min-height: 36px;
    min-width: 36px;
    font-size: 14px !important;
    padding: 6px 10px !important;
}

.f-unread-badge {
    position: absolute;
    top: 8px; right: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 10px rgba(239,68,68,0.6);
    animation: fUnreadPulse 1.5s ease-in-out infinite;
}
@keyframes fUnreadPulse {
    0%, 100% { transform: scale(1);   }
    50%      { transform: scale(1.1); }
}

/* Status tags (en search results) */
.f-status-tag {
    display: inline-block;
    font-family: var(--font-title);
    font-size: 10px;
    letter-spacing: 1.5px;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: bold;
}
.f-tag-friend  { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.4); }
.f-tag-pending { background: rgba(245,197,24,0.15); color: #f5c518; border: 1px solid rgba(245,197,24,0.4); }

/* Empty states */
.f-empty {
    text-align: center;
    padding: 32px 20px;
    color: var(--text-dim);
    background: rgba(255,255,255,0.02);
    border: 1px dashed rgba(255,255,255,0.08);
    border-radius: 10px;
}
.f-empty-ico {
    font-size: 48px;
    margin-bottom: 10px;
    opacity: 0.5;
}
.f-empty-msg {
    font-family: var(--font-title);
    font-size: 13px;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.f-empty-sub {
    font-family: var(--font-title);
    font-size: 11px;
    color: var(--text-dim);
    opacity: 0.7;
}
.f-loading {
    text-align: center;
    padding: 30px 20px;
    font-family: var(--font-title);
    font-size: 13px;
    color: var(--text-dim);
    letter-spacing: 1px;
}

/* Search */
.f-search-wrap { display: flex; flex-direction: column; gap: 14px; }
.f-back-btn {
    align-self: flex-start;
    min-height: 36px;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    padding: 6px 14px !important;
}
.f-search-row {
    display: flex;
    gap: 8px;
}
.f-search-input {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text);
    font-family: var(--font-title);
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 6px;
    min-height: 44px;
}
.f-search-input:focus {
    border-color: rgba(212,175,55,0.5);
    outline: none;
}
.f-search-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
}

/* ══════════════════════════════════════════════════════════════
   CHAT INTERFACE
   ══════════════════════════════════════════════════════════════ */
.f-chat-wrap {
    display: flex;
    flex-direction: column;
    height: 72vh;
    max-height: 600px;
    background: rgba(12,10,8,0.6);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
}

.f-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(30,25,20,0.95) 0%, rgba(20,16,12,0.95) 100%);
    border-bottom: 1px solid rgba(212,175,55,0.2);
    flex-shrink: 0;
}
.f-chat-back {
    width: 36px; height: 36px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text);
    font-size: 18px;
    border-radius: 6px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.f-chat-back:hover { background: rgba(212,175,55,0.2); }
.f-chat-title {
    flex: 1;
    font-family: var(--font-title);
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--gold);
    font-weight: 600;
}

.f-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background:
        radial-gradient(ellipse at top, rgba(212,175,55,0.03) 0%, transparent 60%),
        #0a0806;
}

.f-msg {
    display: flex;
    flex-direction: column;
    max-width: 75%;
}
.f-msg-me {
    align-self: flex-end;
    align-items: flex-end;
}
.f-msg-them {
    align-self: flex-start;
    align-items: flex-start;
}

.f-msg-bubble {
    padding: 8px 12px;
    border-radius: 14px;
    font-family: var(--font-title);
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
    letter-spacing: 0.3px;
}
.f-msg-me .f-msg-bubble {
    background: linear-gradient(135deg, #b38f2e 0%, #d4af37 100%);
    color: #1a1410;
    border-bottom-right-radius: 4px;
    font-weight: 500;
}
.f-msg-them .f-msg-bubble {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.08);
    border-bottom-left-radius: 4px;
}

.f-msg-time {
    font-family: var(--font-title);
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 3px;
    padding: 0 4px;
    letter-spacing: 0.5px;
}

.f-chat-input-row {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(30,25,20,0.9);
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.f-chat-input {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text);
    font-family: var(--font-title);
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 20px;
    min-height: 40px;
}
.f-chat-input:focus {
    border-color: rgba(212,175,55,0.5);
    outline: none;
}
.f-chat-send {
    min-height: 40px !important;
    min-width: 48px;
    font-size: 16px !important;
    border-radius: 20px !important;
}

/* Mobile */
@media (max-width: 768px) {
    .friends-title { font-size: 20px; letter-spacing: 3px; }
    .f-card { padding: 10px; gap: 10px; }
    .f-card-avatar { width: 40px; height: 40px; font-size: 20px; }
    .f-card-name { font-size: 13px; }
    .f-card-btn { font-size: 10px !important; padding: 5px 8px !important; }
    .f-chat-wrap { height: 70vh; }
    .f-msg { max-width: 85%; }
    .f-msg-bubble { font-size: 12px; padding: 7px 10px; }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF10 — BADGE GLOBAL DE AMIGOS (header)
   ══════════════════════════════════════════════════════════════ */
.hq-btn.hq-friends {
    position: relative;
}
.friends-global-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
    color: #ffffff;
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.8),
                0 2px 4px rgba(0, 0, 0, 0.5);
    border: 2px solid #1a1410;
    z-index: 5;
    animation: friendsBadgePulse 2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes friendsBadgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.8), 0 2px 4px rgba(0,0,0,0.5);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 18px rgba(239, 68, 68, 1), 0 2px 4px rgba(0,0,0,0.5);
    }
}
/* Badge en el drawer menu (más chico) */
.md-link { position: relative; }
.md-link .friends-global-badge {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    animation: none;
}
.md-link .friends-global-badge ~ * {}

/* ══════════════════════════════════════════════════════════════
   v121 HF10 — PvP ANTI-FARM BADGE
   ══════════════════════════════════════════════════════════════ */
.pvp-antifarm {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg,
        rgba(74, 222, 128, 0.08) 0%,
        rgba(30, 30, 30, 0.6) 100%);
    border: 1px solid rgba(74, 222, 128, 0.4);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.1);
}
.pvp-antifarm-icon {
    font-size: 28px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.6));
    animation: pvpShieldPulse 2.5s ease-in-out infinite;
}
@keyframes pvpShieldPulse {
    0%, 100% { transform: scale(1);   opacity: 1;   }
    50%      { transform: scale(1.1); opacity: 0.8; }
}
.pvp-antifarm-title {
    font-family: var(--font-title);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #4ade80;
    margin-bottom: 3px;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.3);
}
.pvp-antifarm-sub {
    font-family: var(--font-title);
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.3px;
    line-height: 1.4;
}
@media (max-width: 768px) {
    .pvp-antifarm { padding: 10px 12px; gap: 10px; }
    .pvp-antifarm-icon { font-size: 22px; }
    .pvp-antifarm-title { font-size: 11px; letter-spacing: 1.5px; }
    .pvp-antifarm-sub { font-size: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF10.1 — PvP COOLDOWN MODAL
   ══════════════════════════════════════════════════════════════ */

/* Modal en estado cooldown */
.pvp-rival-modal-cooldown {
    border-color: rgba(245, 197, 24, 0.5) !important;
    box-shadow: 0 0 40px rgba(245, 197, 24, 0.15) !important;
}

/* Ribbon diagonal que indica cooldown */
.pvp-cooldown-ribbon {
    margin: 12px 0 14px;
    padding: 10px 16px;
    background: linear-gradient(135deg,
        rgba(245, 197, 24, 0.2) 0%,
        rgba(245, 197, 24, 0.08) 100%);
    border: 1px solid rgba(245, 197, 24, 0.5);
    border-radius: 6px;
    color: #fde047;
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    text-shadow: 0 0 10px rgba(245, 197, 24, 0.4);
}

/* Caja grande con info del cooldown */
.pvp-cooldown-box {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
    padding: 18px 20px;
    background: linear-gradient(135deg,
        rgba(245, 197, 24, 0.08) 0%,
        rgba(20, 16, 12, 0.8) 100%);
    border: 1px solid rgba(245, 197, 24, 0.3);
    border-radius: 10px;
}
.pvp-cooldown-icon {
    font-size: 42px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 12px rgba(245, 197, 24, 0.6));
    animation: pvpCdIconPulse 2s ease-in-out infinite;
}
@keyframes pvpCdIconPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
.pvp-cooldown-info { flex: 1; min-width: 0; }
.pvp-cooldown-title {
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fde047;
    margin-bottom: 6px;
    text-shadow: 0 0 8px rgba(245, 197, 24, 0.3);
}
.pvp-cooldown-text {
    font-family: var(--font-title);
    font-size: 12px;
    color: var(--text);
    letter-spacing: 0.3px;
    margin-bottom: 10px;
    line-height: 1.4;
}
.pvp-cooldown-countdown {
    font-family: var(--font-display, var(--font-title));
    font-size: 32px;
    font-weight: bold;
    color: #fde047;
    letter-spacing: 4px;
    text-align: center;
    padding: 8px 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    text-shadow: 0 0 20px rgba(245, 197, 24, 0.6),
                 0 0 40px rgba(245, 197, 24, 0.3);
    margin-bottom: 8px;
    letter-spacing: 3px;
}
.pvp-cooldown-hint {
    font-family: var(--font-title);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    font-style: italic;
    text-align: center;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .pvp-cooldown-box { padding: 14px; gap: 12px; }
    .pvp-cooldown-icon { font-size: 32px; }
    .pvp-cooldown-countdown { font-size: 26px; letter-spacing: 2px; }
    .pvp-cooldown-title { font-size: 10px; letter-spacing: 1.5px; }
    .pvp-cooldown-text { font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF11 — PvP MODE SELECTOR + PLAYER PvP
   ══════════════════════════════════════════════════════════════ */

/* Selector de modo */
.pvp-mode-select {
    padding: 20px 16px;
    max-width: 1100px;
    margin: 0 auto;
}
.pvp-mode-header {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(212,175,55,0.15);
}
.pvp-mode-title {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 5px;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(212,175,55,0.3);
    margin-bottom: 4px;
}
.pvp-mode-sub {
    font-family: var(--font-title);
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Grid de cards */
.pvp-mode-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.pvp-mode-card {
    background: linear-gradient(180deg, rgba(30,25,20,0.9) 0%, rgba(15,12,10,0.9) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 28px 22px;
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.pvp-mode-card:hover {
    border-color: rgba(212,175,55,0.6);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 30px rgba(212,175,55,0.15);
}

/* Variante: Batalla de Mazos (dorado/clásico) */
.pvp-mode-cards-deck::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
}

/* Variante: Player PvP (rojo llamativo) */
.pvp-mode-player {
    border-color: rgba(239, 68, 68, 0.4) !important;
    background: linear-gradient(180deg, rgba(55, 20, 15, 0.9) 0%, rgba(25, 10, 8, 0.9) 100%) !important;
}
.pvp-mode-player::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, #ef4444, transparent);
}
.pvp-mode-player:hover {
    border-color: rgba(239, 68, 68, 0.9) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 40px rgba(239, 68, 68, 0.25) !important;
}

.pvp-mode-icon {
    font-size: 56px;
    margin-bottom: 14px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.pvp-mode-player .pvp-mode-icon {
    filter: drop-shadow(0 4px 12px rgba(239, 68, 68, 0.5));
}

.pvp-mode-name {
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 3px;
    color: var(--gold);
    margin-bottom: 10px;
}
.pvp-mode-player .pvp-mode-name {
    color: #ef4444;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.pvp-mode-tag {
    display: inline-block;
    font-family: var(--font-title);
    font-size: 10px;
    letter-spacing: 2px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 14px;
    font-weight: bold;
}
.pvp-tag-classic {
    background: rgba(212,175,55,0.15);
    color: var(--gold);
    border: 1px solid rgba(212,175,55,0.3);
}
.pvp-tag-hot {
    background: linear-gradient(135deg, rgba(239,68,68,0.25) 0%, rgba(220,38,38,0.25) 100%);
    color: #fecaca;
    border: 1px solid rgba(239,68,68,0.5);
    animation: pvpTagHotPulse 2s ease-in-out infinite;
}
@keyframes pvpTagHotPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(239,68,68,0.3); }
    50%      { box-shadow: 0 0 18px rgba(239,68,68,0.7); }
}

.pvp-mode-desc {
    font-family: var(--font-title);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 16px;
    opacity: 0.85;
    letter-spacing: 0.3px;
}

.pvp-mode-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    text-align: left;
}
.pvp-mode-features li {
    font-family: var(--font-title);
    font-size: 11px;
    color: var(--text-dim);
    padding: 5px 0;
    letter-spacing: 0.3px;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.pvp-mode-features li:last-child { border-bottom: none; }

.pvp-mode-btn {
    width: 100%;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    padding: 12px !important;
}
.pvp-mode-btn-red {
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.pvp-mode-btn-red:hover {
    filter: brightness(1.15) !important;
    box-shadow: 0 0 20px rgba(239,68,68,0.5) !important;
}

/* Botón de volver en modo in */
.pvp-mode-in {
    padding: 20px 16px;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}
.pvp-back-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text);
    font-family: var(--font-title);
    font-size: 11px;
    letter-spacing: 1.5px;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 14px;
    transition: all 0.15s;
}
.pvp-back-btn:hover {
    background: rgba(212,175,55,0.15);
    border-color: rgba(212,175,55,0.4);
}

/* Tint rojo para modo player activo */
.pvp-mode-player-active .pvp-title {
    color: #ef4444;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}
.pvp-search-btn-red {
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%) !important;
    color: #fff !important;
    border: none !important;
}

/* Modal de rival en modo player */
.pvp-rival-modal-player {
    border-color: rgba(239, 68, 68, 0.4) !important;
    box-shadow: 0 0 30px rgba(239,68,68,0.15) !important;
}
.pvp-rival-modal-player .pvp-rival-title {
    color: #ef4444 !important;
}

/* Comparación de poder */
.pvp-power-compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    padding: 14px 16px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 8px;
}
.pvp-power-row { text-align: center; }
.pvp-power-lbl {
    display: block;
    font-family: var(--font-title);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.pvp-power-val {
    display: block;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: bold;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(212,175,55,0.3);
}
.pvp-power-divider {
    font-family: var(--font-display);
    font-size: 20px;
    color: #ef4444;
    letter-spacing: 2px;
    padding: 0 4px;
    text-shadow: 0 0 10px rgba(239,68,68,0.6);
}
.pvp-power-hint {
    grid-column: 1 / -1;
    font-family: var(--font-title);
    font-size: 10px;
    color: var(--text-dim);
    text-align: center;
    font-style: italic;
    margin-top: 6px;
    opacity: 0.8;
}

/* Animación de combate (instantáneo) */
.pvp-fight-anim-box {
    background: linear-gradient(180deg, rgba(40,15,15,0.95) 0%, rgba(20,8,8,0.95) 100%);
    border: 1px solid rgba(239,68,68,0.5);
    border-radius: 14px;
    padding: 40px 32px;
    text-align: center;
    min-width: 360px;
    max-width: 90%;
    box-shadow: 0 0 60px rgba(239,68,68,0.25);
}
.pvp-fight-anim-title {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 4px;
    color: #ef4444;
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(239,68,68,0.6);
    animation: pvpFightTitleFlash 0.8s ease-in-out infinite;
}
@keyframes pvpFightTitleFlash {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}
.pvp-fight-anim-names {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 2px;
}
.pvp-fight-anim-me, .pvp-fight-anim-rival {
    color: var(--text);
    padding: 8px 14px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
}
.pvp-fight-anim-vs {
    font-size: 20px;
    color: #ef4444;
    text-shadow: 0 0 15px rgba(239,68,68,0.7);
    animation: pvpFightVsRotate 0.6s linear infinite;
    display: inline-block;
}
@keyframes pvpFightVsRotate {
    0%   { transform: rotate(0deg)   scale(1); }
    50%  { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}
.pvp-fight-anim-spinner {
    margin: 20px 0;
}
.pvp-fight-anim-sword {
    font-size: 64px;
    display: inline-block;
    animation: pvpFightSwordClash 0.4s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(239,68,68,0.8));
}
@keyframes pvpFightSwordClash {
    0%, 100% { transform: translateY(0) rotate(-15deg);  }
    50%      { transform: translateY(-8px) rotate(15deg); }
}
.pvp-fight-anim-status {
    font-family: var(--font-title);
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-top: 10px;
}

/* Modal de resultado Player PvP */
.pvp-result-player {
    border-color: rgba(239,68,68,0.4) !important;
    max-width: 540px;
}
.pvp-result-player.win {
    border-color: rgba(74,222,128,0.6) !important;
}
.pvp-result-player.lose {
    border-color: rgba(239,68,68,0.6) !important;
}

.pvp-result-scores {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    padding: 16px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
}
.pvp-result-score-box {
    text-align: center;
    padding: 12px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}
.pvp-result-score-box.winner {
    background: rgba(74,222,128,0.1);
    border-color: rgba(74,222,128,0.5);
    box-shadow: 0 0 15px rgba(74,222,128,0.2);
}
.pvp-result-score-box.loser {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.3);
    opacity: 0.7;
}
.pvp-result-score-lbl {
    font-family: var(--font-title);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.pvp-result-score-val {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: bold;
    color: var(--gold);
}
.pvp-result-score-roll {
    font-family: var(--font-title);
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
    letter-spacing: 0.5px;
}
.pvp-result-score-divider {
    font-family: var(--font-display);
    font-size: 22px;
    color: #ef4444;
    padding: 0 4px;
}

.pvp-result-breakdown {
    margin: 16px 0;
    padding: 12px 14px;
    background: rgba(0,0,0,0.25);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.05);
}
.pvp-result-breakdown-title {
    font-family: var(--font-title);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 8px;
    text-align: center;
}
.pvp-result-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    font-family: var(--font-title);
    font-size: 11px;
}
.pvp-result-breakdown-grid > div {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
}
.pvp-result-breakdown-grid span {
    color: var(--text-dim);
    letter-spacing: 0.3px;
}
.pvp-result-breakdown-grid strong {
    color: var(--text);
    font-weight: 600;
}

/* Ranking modal variant player */
.pvp-ranking-modal-player {
    border-color: rgba(239,68,68,0.4) !important;
}
.pvp-ranking-modal-player .pvp-ranking-title {
    color: #ef4444 !important;
    text-shadow: 0 0 20px rgba(239,68,68,0.3) !important;
}

/* Mobile */
@media (max-width: 768px) {
    .pvp-mode-cards { grid-template-columns: 1fr; gap: 14px; }
    .pvp-mode-card  { padding: 22px 18px; }
    .pvp-mode-icon  { font-size: 44px; }
    .pvp-mode-name  { font-size: 16px; letter-spacing: 2px; }
    .pvp-mode-desc  { font-size: 11px; }
    .pvp-mode-features li { font-size: 10px; }
    .pvp-power-val  { font-size: 22px; }
    .pvp-fight-anim-box { padding: 28px 18px; min-width: 0; }
    .pvp-fight-anim-title { font-size: 14px; letter-spacing: 2px; }
    .pvp-fight-anim-names { font-size: 14px; gap: 8px; flex-wrap: wrap; }
    .pvp-fight-anim-sword { font-size: 48px; }
    .pvp-result-breakdown-grid { grid-template-columns: repeat(2, 1fr); }
    .pvp-result-score-val { font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF12 — TUTORIAL (Actos 1-2): Welcome + Valkanas + Meteoro
   ══════════════════════════════════════════════════════════════ */

/* ─── ACTO 1: PANTALLA DE BIENVENIDA ─── */
.tut-welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background:
        radial-gradient(ellipse at center, rgba(40,15,10,0.95) 0%, rgba(0,0,0,1) 70%),
        #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: opacity 0.8s ease;
}
.tut-welcome-overlay.tut-flash-out {
    background: #ffffff !important;
    opacity: 0;
}
.tut-welcome-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(239,68,68,0.15), transparent 50%),
        radial-gradient(circle at 50% 70%, rgba(212,175,55,0.1), transparent 50%);
    animation: tutVignettePulse 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes tutVignettePulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1;   }
}

.tut-welcome-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 700px;
    width: 100%;
}

.tut-welcome-intro {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease;
    margin-bottom: 40px;
}
.tut-welcome-intro.visible {
    opacity: 1;
    transform: translateY(0);
}
.tut-welcome-subtitle {
    font-family: var(--font-title);
    font-size: 12px;
    letter-spacing: 4px;
    color: #ef4444;
    text-transform: uppercase;
    margin-bottom: 8px;
    text-shadow: 0 0 20px rgba(239,68,68,0.5);
}
.tut-welcome-subtitle2 {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 3px;
    color: #fde047;
    text-shadow: 0 0 25px rgba(245,197,24,0.4);
}

/* Banner verde grande */
.tut-welcome-banner {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 50%, #16a34a 100%);
    border: 3px solid #86efac;
    border-radius: 16px;
    padding: 32px 40px;
    margin: 0 auto 36px;
    box-shadow:
        0 0 60px rgba(34,197,94,0.4),
        inset 0 1px 0 rgba(255,255,255,0.3);
    opacity: 0;
    transform: scale(0.7) rotate(-3deg);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 500px;
}
.tut-welcome-banner.visible {
    opacity: 1;
    transform: scale(1) rotate(0);
    animation: tutBannerWobble 4s ease-in-out infinite 1s;
}
@keyframes tutBannerWobble {
    0%, 100% { transform: rotate(0) translateY(0);  }
    25%      { transform: rotate(-1deg) translateY(-3px); }
    75%      { transform: rotate(1deg)  translateY(-3px); }
}
.tut-welcome-banner-label {
    font-family: var(--font-title);
    font-size: 14px;
    letter-spacing: 6px;
    color: #f0fdf4;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 10px;
}
.tut-welcome-banner-title {
    font-family: var(--font-display);
    font-size: 34px;
    letter-spacing: 3px;
    color: #ffffff;
    text-shadow: 0 4px 12px rgba(0,0,0,0.6);
    line-height: 1.2;
    font-weight: bold;
}

.tut-welcome-cta {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}
.tut-welcome-cta.visible {
    opacity: 1;
    transform: translateY(0);
}
.tut-welcome-question {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 2px;
    color: #fde047;
    margin-bottom: 24px;
    text-shadow: 0 0 20px rgba(245,197,24,0.3);
    line-height: 1.4;
}
.tut-welcome-yes {
    background: linear-gradient(180deg, #d4af37 0%, #b38f2e 100%);
    color: #1a1410;
    border: 3px solid #fde047;
    border-radius: 14px;
    padding: 22px 60px;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 8px;
    cursor: pointer;
    box-shadow:
        0 10px 30px rgba(212,175,55,0.4),
        inset 0 2px 0 rgba(255,255,255,0.3);
    animation: tutYesPulse 1.8s ease-in-out infinite;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.15s;
}
.tut-welcome-yes:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}
.tut-welcome-yes:active {
    transform: scale(0.98);
}
@keyframes tutYesPulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(212,175,55,0.4), inset 0 2px 0 rgba(255,255,255,0.3); }
    50%      { box-shadow: 0 10px 50px rgba(212,175,55,0.8), inset 0 2px 0 rgba(255,255,255,0.3); }
}
.tut-btn-icon {
    font-size: 30px;
}
.tut-welcome-hint {
    font-family: var(--font-title);
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 2px;
    margin-top: 16px;
    text-transform: uppercase;
    animation: tutHintBlink 2s ease-in-out infinite;
}
@keyframes tutHintBlink {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1;   }
}

/* ─── ACTO 2 INTRO: CINEMÁTICA ─── */
.tut-cinematic-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #000;
    overflow: hidden;
}
.tut-cine-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(239,68,68,0.3) 0%, transparent 50%),
        linear-gradient(180deg, #1a0505 0%, #000 100%);
    animation: tutCineBgPulse 3s ease-in-out infinite;
}
@keyframes tutCineBgPulse {
    0%, 100% { opacity: 1;   }
    50%      { opacity: 0.7; }
}
.tut-cine-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}
.tut-cine-line {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 4px;
    color: #fde047;
    margin: 8px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1.2s ease;
    text-shadow: 0 0 30px rgba(245,197,24,0.4);
}
.tut-cine-line.visible {
    opacity: 1;
    transform: translateY(0);
}

.tut-cine-villain {
    margin: 40px 0;
    opacity: 0;
    transform: scale(0.5);
    transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tut-cine-villain.visible {
    opacity: 1;
    transform: scale(1);
}
.tut-cine-villain-icon {
    font-size: 110px;
    filter: drop-shadow(0 0 40px rgba(239,68,68,0.8));
    animation: tutDragonFloat 3s ease-in-out infinite;
}
@keyframes tutDragonFloat {
    0%, 100% { transform: translateY(0)    rotate(-2deg); }
    50%      { transform: translateY(-8px) rotate(2deg);  }
}
.tut-cine-villain-name {
    font-family: var(--font-display);
    font-size: 54px;
    letter-spacing: 8px;
    color: #ef4444;
    text-shadow: 0 0 40px rgba(239,68,68,0.8);
    font-weight: bold;
    margin-top: 10px;
}
.tut-cine-villain-title {
    font-family: var(--font-title);
    font-size: 13px;
    letter-spacing: 4px;
    color: #fca5a5;
    text-transform: uppercase;
    margin-top: 4px;
}

.tut-cine-quote {
    max-width: 600px;
    margin: 30px auto 20px;
    font-family: var(--font-title);
    font-size: 18px;
    letter-spacing: 1px;
    color: #fef2f2;
    font-style: italic;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(15px);
    transition: all 1s ease;
}
.tut-cine-quote.visible {
    opacity: 1;
    transform: translateY(0);
}
.tut-cine-quote-mark {
    font-size: 32px;
    color: #ef4444;
    font-weight: bold;
}

.tut-cine-skip {
    opacity: 0;
    transition: opacity 0.6s ease;
    background: rgba(239,68,68,0.2);
    border: 2px solid #ef4444;
    color: #fef2f2;
    padding: 14px 36px;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 3px;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 24px;
    font-weight: bold;
}
.tut-cine-skip.visible {
    opacity: 1;
    animation: tutSkipPulse 1.5s ease-in-out infinite;
}
.tut-cine-skip:hover {
    background: #ef4444;
    color: #fff;
}
@keyframes tutSkipPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(239,68,68,0.4); }
    50%      { box-shadow: 0 0 40px rgba(239,68,68,0.9); }
}

/* ─── ACTO 2: PELEA SCRIPTEADA ─── */
.tut-battle-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background:
        radial-gradient(ellipse at top, rgba(80,20,10,0.8) 0%, transparent 60%),
        linear-gradient(180deg, #1a0a0a 0%, #000 100%);
    overflow-y: auto;
    padding: 20px 16px;
}
.tut-battle-scene {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100%;
}

.tut-battle-enemy {
    position: relative;
    background: linear-gradient(135deg, rgba(60,15,10,0.85) 0%, rgba(30,5,5,0.85) 100%);
    border: 2px solid rgba(239,68,68,0.5);
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    box-shadow: 0 0 30px rgba(239,68,68,0.2);
}
.tut-battle-enemy-name {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 3px;
    color: #ef4444;
    margin-bottom: 2px;
    text-shadow: 0 0 15px rgba(239,68,68,0.5);
}
.tut-battle-enemy-title {
    font-family: var(--font-title);
    font-size: 10px;
    letter-spacing: 2px;
    color: #fca5a5;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.tut-battle-enemy-icon {
    font-size: 60px;
    filter: drop-shadow(0 0 20px rgba(239,68,68,0.7));
    margin: 4px 0 10px;
    animation: tutDragonIdle 2.5s ease-in-out infinite;
}
@keyframes tutDragonIdle {
    0%, 100% { transform: translateY(0);   }
    50%      { transform: translateY(-5px); }
}

.tut-battle-hp-bar {
    position: relative;
    height: 22px;
    background: #1a0505;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 11px;
    overflow: hidden;
    margin: 8px 0;
}
.tut-battle-hp-fill {
    height: 100%;
    transition: width 0.6s ease;
    background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%);
}
.tut-battle-hp-fill.tut-my-hp {
    background: linear-gradient(180deg, #22c55e 0%, #14532d 100%);
}
.tut-battle-hp-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    letter-spacing: 0.5px;
}
.tut-battle-stats {
    display: flex;
    justify-content: center;
    gap: 18px;
    font-family: var(--font-title);
    font-size: 12px;
    color: #fca5a5;
    margin-top: 6px;
    letter-spacing: 1px;
}

.tut-battle-turn-display {
    text-align: center;
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 4px;
    color: #fde047;
    padding: 8px;
    background: rgba(0,0,0,0.5);
    border-radius: 6px;
    border-top: 1px solid rgba(245,197,24,0.2);
    border-bottom: 1px solid rgba(245,197,24,0.2);
}

.tut-battle-me {
    background: linear-gradient(135deg, rgba(15,40,20,0.85) 0%, rgba(5,20,10,0.85) 100%);
    border: 2px solid rgba(74,222,128,0.5);
    border-radius: 12px;
    padding: 14px 18px;
    text-align: center;
    box-shadow: 0 0 20px rgba(74,222,128,0.15);
}
.tut-battle-me-name {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 3px;
    color: #86efac;
    margin-top: 6px;
}

.tut-battle-hand {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.tut-battle-card {
    background: linear-gradient(180deg, rgba(50,40,20,0.9) 0%, rgba(25,20,10,0.95) 100%);
    border: 2px solid rgba(212,175,55,0.5);
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
    box-shadow: 0 0 15px rgba(212,175,55,0.15);
    transition: transform 0.2s;
}
.tut-battle-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212,175,55,0.9);
}
.tut-battle-card-icon { font-size: 32px; margin-bottom: 4px; }
.tut-battle-card-name {
    font-family: var(--font-title);
    font-size: 10px;
    letter-spacing: 0.5px;
    color: #fde047;
    font-weight: 600;
    margin-bottom: 6px;
    min-height: 26px;
    line-height: 1.2;
}
.tut-battle-card-stats {
    display: flex;
    justify-content: space-around;
    font-family: var(--font-title);
    font-size: 10px;
    color: #fca5a5;
}

.tut-battle-actions {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}
.tut-battle-btn {
    padding: 14px;
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 2px;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid;
    font-weight: bold;
    transition: all 0.15s;
}
.tut-battle-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.tut-btn-attack {
    background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
    border-color: #fca5a5;
    color: #fff;
    box-shadow: 0 0 20px rgba(239,68,68,0.4);
}
.tut-btn-attack:hover:not(:disabled) {
    filter: brightness(1.15);
    transform: translateY(-1px);
}
.tut-btn-auto {
    background: linear-gradient(180deg, #4f46e5 0%, #312e81 100%);
    border-color: #a5b4fc;
    color: #fff;
}
.tut-btn-auto:hover:not(:disabled) { filter: brightness(1.15); }

.tut-battle-log {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 10px 14px;
    max-height: 120px;
    overflow-y: auto;
    font-family: var(--font-title);
}
.tut-log-line {
    font-size: 11px;
    color: var(--text);
    padding: 2px 0;
    letter-spacing: 0.3px;
    animation: tutLogFadeIn 0.4s ease;
}
@keyframes tutLogFadeIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0);    }
}

/* Hit shake + dmg float */
.tut-hit-shake {
    animation: tutHitShake 0.5s ease;
}
@keyframes tutHitShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px) rotate(-1deg); }
    40% { transform: translateX(6px)  rotate(1deg);  }
    60% { transform: translateX(-4px) rotate(-0.5deg);}
    80% { transform: translateX(4px)  rotate(0.5deg); }
}
.tut-dmg-float {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: bold;
    color: #fde047;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(245,197,24,0.8);
    pointer-events: none;
    animation: tutDmgFloat 1.5s ease-out forwards;
    z-index: 10;
}
@keyframes tutDmgFloat {
    0%   { opacity: 0; transform: translate(-50%, 20px) scale(0.5); }
    20%  { opacity: 1; transform: translate(-50%, 0)    scale(1.3); }
    40%  {              transform: translate(-50%, -10px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -60px) scale(0.9); }
}

/* ─── VALKANAS HABLA ─── */
.tut-valakas-speech {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 10000;
    background: linear-gradient(135deg, #1a0505 0%, #3d0a0a 100%);
    border: 3px solid #ef4444;
    border-radius: 14px;
    padding: 28px 36px;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 0 60px rgba(239,68,68,0.7);
    animation: tutSpeechAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes tutSpeechAppear {
    0%   { transform: translate(-50%, -50%) scale(0)   rotate(-10deg); }
    100% { transform: translate(-50%, -50%) scale(1)   rotate(0);      }
}
.tut-valakas-speech-icon {
    font-size: 56px;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 20px rgba(239,68,68,0.8));
    animation: tutDragonRage 0.4s ease-in-out infinite;
}
@keyframes tutDragonRage {
    0%, 100% { transform: scale(1)    rotate(-3deg); }
    50%      { transform: scale(1.08) rotate(3deg);  }
}
.tut-valakas-speech-text {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 2px;
    color: #fef2f2;
    line-height: 1.5;
}
.tut-valakas-speech-emphasis {
    display: inline-block;
    color: #ef4444;
    font-size: 28px;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(239,68,68,0.8);
    margin-top: 10px;
    animation: tutEmphShake 0.3s ease-in-out infinite;
}
@keyframes tutEmphShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px);  }
}

/* ─── METEORO ─── */
.tut-meteor-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    pointer-events: none;
    overflow: hidden;
}
.tut-meteor-sky {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 100%, rgba(239,68,68,0.6) 0%, transparent 40%);
    animation: tutMeteorSky 2.5s ease forwards;
}
@keyframes tutMeteorSky {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 1; background: radial-gradient(circle at 50% 100%, rgba(255,200,100,1) 0%, transparent 70%); }
}
.tut-meteor-ball {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 120px;
    filter: drop-shadow(0 0 40px #fb923c) drop-shadow(0 0 80px #ef4444);
    animation: tutMeteorFall 1.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}
@keyframes tutMeteorFall {
    0%   { top: -200px; transform: translateX(-50%) rotate(0deg)   scale(0.5); }
    100% { top: 60%;    transform: translateX(-50%) rotate(720deg) scale(2);   }
}
.tut-meteor-impact {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    background: #fde047;
    border-radius: 50%;
    opacity: 0;
}
.tut-meteor-impact.boom {
    animation: tutMeteorBoom 1.3s ease-out forwards;
}
@keyframes tutMeteorBoom {
    0%   { opacity: 1; width: 10px;   height: 10px;   box-shadow: 0 0 40px #fde047; }
    40%  { opacity: 1; width: 600px;  height: 600px;  box-shadow: 0 0 200px #ef4444, 0 0 400px #fb923c; }
    100% { opacity: 0; width: 1200px; height: 1200px; box-shadow: 0 0 100px rgba(239,68,68,0.3); }
}
.tut-meteor-label {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 38px;
    letter-spacing: 8px;
    font-weight: bold;
    color: #fde047;
    text-shadow:
        0 0 20px #ef4444,
        0 0 40px #fb923c,
        0 2px 4px rgba(0,0,0,0.9);
    animation: tutMeteorLabel 2s ease-out forwards;
    opacity: 0;
    white-space: nowrap;
}
@keyframes tutMeteorLabel {
    0%   { opacity: 0; transform: translateX(-50%) scale(0.3); }
    30%  { opacity: 1; transform: translateX(-50%) scale(1.1); }
    80%  { opacity: 1; transform: translateX(-50%) scale(1);   }
    100% { opacity: 0; transform: translateX(-50%) scale(1.5); }
}

.tut-screen-shake {
    animation: tutScreenShake 0.3s ease-in-out 8;
}
@keyframes tutScreenShake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-6px, 4px); }
    50% { transform: translate(6px, -4px); }
    75% { transform: translate(-4px, -4px); }
}

/* Cartas esparcidas al perder */
.tut-cards-scatter .tut-battle-card {
    animation: tutCardScatter 1.5s ease forwards;
}
.tut-cards-scatter .tut-battle-card:nth-child(1) { animation-delay: 0.1s; }
.tut-cards-scatter .tut-battle-card:nth-child(2) { animation-delay: 0.2s; }
.tut-cards-scatter .tut-battle-card:nth-child(3) { animation-delay: 0.3s; }
.tut-cards-scatter .tut-battle-card:nth-child(4) { animation-delay: 0.4s; }
@keyframes tutCardScatter {
    0%   { opacity: 1; transform: translate(0, 0)     rotate(0);    }
    100% { opacity: 0; transform: translate(var(--dx, 100px), 400px) rotate(720deg); }
}

/* ─── DIÁLOGO DE DERROTA ─── */
.tut-defeat-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: linear-gradient(180deg, #0a0000 0%, #1a0505 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
}
.tut-defeat-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(239,68,68,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.tut-defeat-title {
    font-family: var(--font-display);
    font-size: 72px;
    letter-spacing: 10px;
    color: #ef4444;
    text-shadow: 0 0 40px rgba(239,68,68,0.8);
    margin-bottom: 40px;
    font-weight: bold;
    opacity: 0;
    transform: scale(1.5);
    transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tut-defeat-title.visible {
    opacity: 1;
    transform: scale(1);
}

.tut-defeat-valakas {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.5s ease;
    max-width: 600px;
}
.tut-defeat-valakas.visible {
    opacity: 1;
    transform: translateY(0);
}
.tut-defeat-valakas-icon {
    font-size: 80px;
    filter: drop-shadow(0 0 40px rgba(239,68,68,0.8));
    margin-bottom: 14px;
}
.tut-defeat-valakas-speech {
    font-family: var(--font-title);
    font-size: 17px;
    letter-spacing: 1px;
    color: #fef2f2;
    line-height: 1.8;
    font-style: italic;
    padding: 22px 30px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 12px;
}
.tut-defeat-quote {
    color: #ef4444;
    font-size: 26px;
    font-weight: bold;
}
.tut-defeat-emphasis {
    color: #fde047;
    font-weight: bold;
    text-shadow: 0 0 15px rgba(245,197,24,0.4);
    font-size: 19px;
}

.tut-defeat-continue {
    opacity: 0;
    transition: opacity 0.8s ease;
    background: linear-gradient(180deg, #d4af37 0%, #b38f2e 100%);
    color: #1a1410;
    border: 2px solid #fde047;
    padding: 16px 40px;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 3px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 36px;
}
.tut-defeat-continue.visible {
    opacity: 1;
    animation: tutYesPulse 2s ease-in-out infinite;
}
.tut-defeat-continue:hover { filter: brightness(1.1); }

/* ─── TOOLTIP (GUÍAS DE KAIN) ─── */
.tut-tt-overlay {
    position: fixed;
    inset: 0;
    z-index: 10010;
    background: rgba(0,0,0,0.75);
    pointer-events: none;
}
.tut-tt-spotlight {
    position: absolute;
    border: 3px solid #fde047;
    border-radius: 12px;
    box-shadow:
        0 0 0 9999px rgba(0,0,0,0.75),
        0 0 20px rgba(245,197,24,0.8),
        inset 0 0 20px rgba(245,197,24,0.3);
    animation: tutSpotlightPulse 1.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes tutSpotlightPulse {
    0%, 100% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.75), 0 0 20px rgba(245,197,24,0.8), inset 0 0 20px rgba(245,197,24,0.3); }
    50%      { box-shadow: 0 0 0 9999px rgba(0,0,0,0.75), 0 0 40px rgba(245,197,24,1),   inset 0 0 30px rgba(245,197,24,0.5); }
}

.tut-tt-bubble {
    position: fixed;
    z-index: 10011;
    max-width: 300px;
    width: 90vw;
    background: linear-gradient(180deg, #1a2540 0%, #0a1328 100%);
    border: 2px solid #fde047;
    border-radius: 14px;
    padding: 18px 18px 14px;
    box-shadow:
        0 10px 40px rgba(0,0,0,0.6),
        0 0 30px rgba(245,197,24,0.2);
    animation: tutBubbleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tutBubbleIn {
    0%   { opacity: 0; transform: translateY(10px) scale(0.85); }
    100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

.tut-tt-kain {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tut-tt-kain-avatar {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #3b3b6e 0%, #1e1e3f 100%);
    border: 2px solid #fde047;
    border-radius: 50%;
    font-size: 22px;
    box-shadow: 0 0 12px rgba(245,197,24,0.4);
}
.tut-tt-kain-name {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 2px;
    color: #fde047;
}

.tut-tt-finger {
    position: absolute;
    font-size: 36px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.tut-tt-finger-up {
    top: -24px; left: 50%; transform: translateX(-50%);
    animation: tutFingerBounceUp 1.2s ease-in-out infinite;
}
.tut-tt-finger-down {
    bottom: -28px; left: 50%; transform: translateX(-50%);
    animation: tutFingerBounceDown 1.2s ease-in-out infinite;
}
@keyframes tutFingerBounceUp {
    0%, 100% { transform: translate(-50%, 0);    }
    50%      { transform: translate(-50%, -8px); }
}
@keyframes tutFingerBounceDown {
    0%, 100% { transform: translate(-50%, 0);   }
    50%      { transform: translate(-50%, 8px); }
}

.tut-tt-title {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 1.5px;
    color: #fde047;
    margin-bottom: 6px;
    font-weight: bold;
}
.tut-tt-text {
    font-family: var(--font-title);
    font-size: 13px;
    color: #e5e7eb;
    line-height: 1.5;
    margin-bottom: 12px;
    letter-spacing: 0.2px;
}
.tut-tt-btn {
    width: 100%;
    background: linear-gradient(180deg, #d4af37 0%, #b38f2e 100%);
    color: #1a1410;
    border: none;
    padding: 10px;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 2px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: filter 0.15s;
}
.tut-tt-btn:hover { filter: brightness(1.15); }
.tut-tt-hint {
    font-family: var(--font-title);
    font-size: 11px;
    color: #fde047;
    text-align: center;
    letter-spacing: 0.5px;
    margin-top: 4px;
    animation: tutHintBlink 1.5s ease-in-out infinite;
}

/* ─── PLACEHOLDER FIN DE TANDA 1 ─── */
.tut-placeholder-overlay {
    position: fixed;
    inset: 0;
    z-index: 10020;
    background: rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}
.tut-placeholder-box {
    background: linear-gradient(180deg, #1a2540 0%, #0a1328 100%);
    border: 2px solid #fde047;
    border-radius: 14px;
    padding: 36px 30px;
    max-width: 440px;
    text-align: center;
    box-shadow: 0 0 60px rgba(245,197,24,0.2);
}
.tut-placeholder-icon { font-size: 56px; margin-bottom: 14px; }
.tut-placeholder-title {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 2px;
    color: #fde047;
    margin-bottom: 12px;
}
.tut-placeholder-text {
    font-family: var(--font-title);
    font-size: 13px;
    color: #e5e7eb;
    line-height: 1.5;
    margin-bottom: 22px;
}
.tut-placeholder-btn {
    background: linear-gradient(180deg, #d4af37 0%, #b38f2e 100%);
    color: #1a1410;
    border: none;
    padding: 12px 30px;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 2px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

/* Mobile */
@media (max-width: 768px) {
    .tut-welcome-banner-title { font-size: 26px; letter-spacing: 2px; }
    .tut-welcome-yes { font-size: 32px; letter-spacing: 6px; padding: 18px 40px; }
    .tut-welcome-question { font-size: 16px; }
    .tut-cine-line { font-size: 18px; letter-spacing: 2px; }
    .tut-cine-villain-icon { font-size: 80px; }
    .tut-cine-villain-name { font-size: 36px; letter-spacing: 5px; }
    .tut-cine-quote { font-size: 14px; }
    .tut-battle-enemy-name { font-size: 18px; }
    .tut-battle-enemy-icon { font-size: 48px; }
    .tut-battle-card-name { font-size: 9px; min-height: 20px; }
    .tut-battle-card-icon { font-size: 24px; }
    .tut-battle-card-stats { font-size: 8px; }
    .tut-battle-btn { font-size: 12px; letter-spacing: 1px; padding: 12px; }
    .tut-defeat-title { font-size: 44px; letter-spacing: 5px; }
    .tut-defeat-valakas-speech { font-size: 14px; padding: 16px 18px; }
    .tut-meteor-label { font-size: 24px; letter-spacing: 4px; }
    .tut-valakas-speech-text { font-size: 15px; }
    .tut-valakas-speech-emphasis { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF13 — Tutorial fixes: desktop visibility + cartas reales
   ══════════════════════════════════════════════════════════════ */

/* FIX CRÍTICO: asegurar que el tutorial overlay esté ARRIBA de todo
   y use viewport units fijas. El bug en desktop venía de que algún
   contenedor padre tenía transform/filter que rompe position:fixed */
.tut-welcome-overlay,
.tut-cinematic-overlay,
.tut-battle-overlay,
.tut-defeat-overlay,
.tut-meteor-overlay,
.tut-placeholder-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100dvh;
    z-index: 99999 !important;
    display: flex !important;
}

.tut-tt-overlay,
.tut-tt-bubble {
    position: fixed !important;
}

/* El welcome y cinematic se centran como flex */
.tut-welcome-overlay,
.tut-cinematic-overlay,
.tut-defeat-overlay {
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
}

/* La batalla usa overflow-y auto (no flex center) */
.tut-battle-overlay {
    display: block !important;
    overflow-y: auto !important;
}

/* Placeholder también centrado */
.tut-placeholder-overlay {
    align-items: center !important;
    justify-content: center !important;
}

/* ─── CARTAS REALES DENTRO DEL TUTORIAL ─── */

/* Holder del boss: limita el tamaño de la carta de Valkanas */
.tut-battle-enemy-wrap {
    position: relative;
    background: linear-gradient(135deg, rgba(60,15,10,0.85) 0%, rgba(30,5,5,0.85) 100%);
    border: 2px solid rgba(239,68,68,0.5);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    box-shadow: 0 0 40px rgba(239,68,68,0.3);
}

.tut-battle-enemy-banner {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: bold;
    color: #fef2f2;
    padding: 4px 14px;
    background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%);
    border-radius: 6px;
    margin-bottom: 8px;
    animation: tutBannerPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(239,68,68,0.6);
}
@keyframes tutBannerPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(239,68,68,0.6); }
    50%      { box-shadow: 0 0 30px rgba(239,68,68,1);   }
}

.tut-battle-enemy-card-holder {
    display: flex;
    justify-content: center;
    margin: 0 auto 10px;
    max-width: 180px;
}
.tut-battle-enemy-card-holder .tcg-card {
    /* Escalar la carta real al tamaño del tutorial */
    transform: scale(0.95);
    transform-origin: center center;
    pointer-events: none;
}

.tut-battle-enemy-name-big {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 3px;
    color: #ef4444;
    text-shadow: 0 0 15px rgba(239,68,68,0.5);
    margin-bottom: 2px;
    font-weight: bold;
}

/* Las cartas del mazo: usar la carta real escalada a un tamaño tipo mano */
.tut-battle-hand {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    justify-items: center;
}
.tut-battle-card-slot {
    width: 100%;
    max-width: 140px;
    display: flex;
    justify-content: center;
    transition: transform 0.2s;
}
.tut-battle-card-slot:hover {
    transform: translateY(-4px);
}
.tut-battle-card-slot .tcg-card {
    transform: scale(0.55);
    transform-origin: top center;
    margin-bottom: -45%;  /* compensar el espacio que deja la scale */
    pointer-events: none;
}

@media (max-width: 768px) {
    .tut-battle-hand {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
    }
    .tut-battle-card-slot .tcg-card {
        transform: scale(0.45);
        margin-bottom: -55%;
    }
    .tut-battle-enemy-card-holder .tcg-card {
        transform: scale(0.8);
    }
}

/* Desktop: cartas un poco más grandes */
@media (min-width: 769px) {
    .tut-battle-scene {
        max-width: 800px;
    }
    .tut-battle-card-slot .tcg-card {
        transform: scale(0.65);
        margin-bottom: -35%;
    }
    .tut-battle-enemy-card-holder {
        max-width: 220px;
    }
    .tut-battle-enemy-card-holder .tcg-card {
        transform: scale(1);
    }
}

/* v121 HF14 — Botón Tutorial en header quick-btns (visible en desktop también) */
.hq-btn.hq-tutorial {
    background: linear-gradient(180deg, rgba(25,45,60,0.95) 0%, rgba(12,28,40,0.95) 100%);
    border: 1px solid rgba(96,165,250,0.5);
    color: #93c5fd;
}
.hq-btn.hq-tutorial:hover {
    border-color: rgba(96,165,250,0.9);
    box-shadow: 0 0 15px rgba(96,165,250,0.3);
}

/* ══════════════════════════════════════════════════════════════
   v121 HF15 — COMBAT MOBILE REDESIGN (TANDA 1)
   • Portrait del jugador mejorado
   • Boss Presence (rugido, respiración, fondo pulsante)
   • Turn Banner dramático
   ══════════════════════════════════════════════════════════════ */

/* ━━━ MOBILE FIRST: rediseño completo del combate ━━━ */
@media (max-width: 1024px) {

  /* Full screen combat con layout vertical premium */
  #aventura-combat-screen {
    background:
      radial-gradient(ellipse at top,    rgba(60,20,15,0.6) 0%, transparent 50%),
      radial-gradient(ellipse at bottom, rgba(15,30,20,0.4) 0%, transparent 50%),
      linear-gradient(180deg, #0a0504 0%, #000 100%);
  }

  /* Fondo de arena con parallax sutil y ambiente vivo */
  .av-arena-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .av-arena-sky {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 30% 10%, rgba(245,197,24,0.08) 0%, transparent 40%),
      radial-gradient(circle at 70% 80%, rgba(239,68,68,0.12) 0%, transparent 45%);
    animation: avBgBreathe 8s ease-in-out infinite;
  }
  @keyframes avBgBreathe {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%      { opacity: 0.7; transform: scale(1.05); }
  }
  .av-arena-fog {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(40,20,10,0.3) 0%, transparent 100%);
    pointer-events: none;
  }

  /* Boss Presence: cuando hay raid, el fondo late en rojo */
  #aventura-combat-screen.boss-fight .av-arena-sky {
    background:
      radial-gradient(circle at 50% 20%, rgba(239,68,68,0.25) 0%, transparent 55%),
      radial-gradient(circle at 20% 70%, rgba(220,38,38,0.15) 0%, transparent 45%);
    animation: avBossPresence 2.5s ease-in-out infinite;
  }
  @keyframes avBossPresence {
    0%, 100% { opacity: 0.8; filter: brightness(1);    }
    50%      { opacity: 1;   filter: brightness(1.15); }
  }

  /* ─── CHROME: layout vertical limpio ─── */
  .av-combat-chrome {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    position: relative;
  }

  /* Header minimalista */
  .av-combat-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0;
    padding-bottom: 4px;
  }
  .av-flee-btn {
    background: rgba(0,0,0,0.6) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #e5e7eb !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important;
    min-height: 38px !important;
  }
  .av-combat-title-wrap {
    flex: 1;
    text-align: center;
    min-width: 0;
  }
  .av-combat-title {
    font-family: var(--font-display);
    font-size: 13px !important;
    letter-spacing: 2px !important;
    color: var(--gold) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .av-turn-pill {
    display: inline-block;
    font-family: var(--font-title);
    font-size: 10px;
    letter-spacing: 1.5px;
    padding: 2px 10px;
    background: rgba(74,222,128,0.15);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.3);
    border-radius: 10px;
    margin-top: 2px;
  }
  .av-turn-pill.enemy-turn {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
    border-color: rgba(239,68,68,0.3);
  }

  /* ─── ARENA: el enemigo arriba, yo abajo, log en el medio ─── */
  .av-combat-arena {
    display: grid !important;
    grid-template-rows: auto minmax(50px, 1fr) auto !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    flex: 1 !important;
    overflow: hidden;
  }

  /* ━━━ ENEMIGO: presencia dramática ━━━ */
  .av-combat-enemy {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px 8px !important;
    background: linear-gradient(180deg,
        rgba(40,15,10,0.6) 0%,
        rgba(20,8,6,0.4) 100%);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 12px;
    grid-row: 1;
  }

  /* Modo boss: marco rojo llameante + respiración */
  #aventura-combat-screen.boss-fight .av-combat-enemy {
    border: 2px solid rgba(239,68,68,0.7) !important;
    box-shadow:
      0 0 30px rgba(239,68,68,0.4),
      inset 0 0 20px rgba(239,68,68,0.1) !important;
    animation: avBossBreathe 3s ease-in-out infinite;
  }
  @keyframes avBossBreathe {
    0%, 100% {
      border-color: rgba(239,68,68,0.6);
      box-shadow: 0 0 25px rgba(239,68,68,0.3), inset 0 0 15px rgba(239,68,68,0.08);
    }
    50% {
      border-color: rgba(239,68,68,1);
      box-shadow: 0 0 50px rgba(239,68,68,0.7), inset 0 0 25px rgba(239,68,68,0.2);
    }
  }

  /* Badge "BOSS RAID" arriba del enemigo cuando es boss */
  #aventura-combat-screen.boss-fight .av-combat-enemy::before {
    content: '⚠ BOSS RAID ⚠';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%);
    color: #fff;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 3px;
    padding: 4px 14px;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(239,68,68,0.8);
    white-space: nowrap;
    animation: avBossBadgePulse 1.5s ease-in-out infinite;
    z-index: 3;
  }
  @keyframes avBossBadgePulse {
    0%, 100% { box-shadow: 0 0 15px rgba(239,68,68,0.8); transform: translateX(-50%) scale(1);    }
    50%      { box-shadow: 0 0 30px rgba(239,68,68,1);   transform: translateX(-50%) scale(1.05); }
  }

  .av-enemy-card-wrap {
    margin: 4px auto !important;
    max-width: 200px !important;
  }
  .av-enemy-card-wrap .tcg-card {
    transform: scale(0.75);
    transform-origin: top center;
    margin-bottom: -25%;
  }

  /* Boss card: respiración sutil infinita */
  #aventura-combat-screen.boss-fight .av-enemy-card-wrap .tcg-card {
    animation: avBossCardBreathe 3.5s ease-in-out infinite;
  }
  @keyframes avBossCardBreathe {
    0%, 100% { transform: scale(0.75)  translateY(0);    }
    50%      { transform: scale(0.775) translateY(-2px); }
  }

  /* Screen shake cuando el boss ataca */
  #aventura-combat-screen.boss-attacking {
    animation: avBossAttackShake 0.5s ease;
  }
  @keyframes avBossAttackShake {
    0%, 100% { transform: translate(0, 0); }
    15%      { transform: translate(-4px, 3px); }
    30%      { transform: translate(5px, -3px); }
    45%      { transform: translate(-3px, -3px); }
    60%      { transform: translate(4px, 3px); }
    75%      { transform: translate(-2px, -1px); }
    90%      { transform: translate(2px, 1px); }
  }

  /* Flash rojo cuando el boss ataca */
  .av-boss-flash-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(239,68,68,0.25) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    animation: avBossFlash 0.5s ease;
    z-index: 2;
  }
  @keyframes avBossFlash {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    100% { opacity: 0; }
  }

  /* HP bar del enemigo — más prominente */
  .av-combat-enemy .av-ext-hp-wrap {
    width: 100%;
    max-width: 260px;
    margin-top: 6px;
  }
  .av-combat-enemy .av-ext-hp-bar-bg {
    height: 16px !important;
    background: rgba(0,0,0,0.7) !important;
    border: 1px solid rgba(239,68,68,0.4) !important;
    border-radius: 8px !important;
    overflow: hidden;
    position: relative;
  }
  .av-combat-enemy .enemy-hp-fill {
    background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%) !important;
    transition: width 0.6s ease !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  }
  .av-combat-enemy .av-ext-hp-nums {
    font-family: var(--font-title) !important;
    font-size: 11px !important;
    font-weight: bold;
    color: #fef2f2 !important;
    text-align: center;
    margin-top: 3px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  }

  /* ━━━ CENTER: log compacto + VS ━━━ */
  .av-combat-center {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 4px 6px !important;
    grid-row: 2;
    overflow: hidden;
  }
  .av-combat-vs-badge {
    display: none !important;  /* ocupamos el espacio mejor */
  }
  .av-combat-log {
    flex: 1 !important;
    background: rgba(0,0,0,0.55) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    font-family: var(--font-title);
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: var(--text);
    overflow-y: auto;
    max-height: 100%;
    letter-spacing: 0.2px;
  }
  .av-combat-log > * {
    padding: 2px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.04);
  }
  .av-combat-log > *:last-child { border-bottom: none; }

  /* ━━━ PLAYER PORTRAIT: estilo Hearthstone ━━━ */
  .av-combat-player {
    position: relative;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 8px 12px !important;
    padding: 10px !important;
    background: linear-gradient(180deg,
        rgba(15,40,20,0.6) 0%,
        rgba(8,22,12,0.5) 100%);
    border: 2px solid rgba(74,222,128,0.3);
    border-radius: 12px;
    grid-row: 3;
  }

  /* Avatar circular grande dorado */
  .av-combat-portrait {
    grid-row: 1 / span 2;
    grid-column: 1;
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(40,30,15,0.9) 0%, rgba(25,20,10,0.9) 100%) !important;
    border: 3px solid var(--gold) !important;
    box-shadow:
      0 0 20px rgba(212,175,55,0.4),
      inset 0 0 12px rgba(0,0,0,0.5) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 36px !important;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  .av-combat-portrait::after {
    /* Shine effect giratorio sutil */
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(212,175,55,0.2) 60deg,
      transparent 120deg,
      transparent 360deg
    );
    animation: avPortraitShine 4s linear infinite;
    pointer-events: none;
  }
  @keyframes avPortraitShine {
    to { transform: rotate(360deg); }
  }

  .av-combat-portrait img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50%;
    position: relative;
    z-index: 1;
  }

  .av-combat-name {
    grid-row: 1;
    grid-column: 2;
    font-family: var(--font-display) !important;
    font-size: 16px !important;
    letter-spacing: 2px !important;
    color: var(--gold) !important;
    text-shadow: 0 0 10px rgba(212,175,55,0.3);
    align-self: end;
    margin-bottom: 2px;
  }

  .av-player-stats {
    grid-row: 2;
    grid-column: 2;
    display: flex !important;
    gap: 10px !important;
    font-family: var(--font-title);
    font-size: 11px !important;
    color: var(--text-dim);
    letter-spacing: 0.5px;
  }
  .av-pstat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
  }
  .av-pstat span {
    color: #fde047;
    font-weight: bold;
  }

  /* HP bar del jugador span-2 */
  .av-combat-player .av-ext-hp-wrap {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    margin-top: 4px;
  }
  .av-combat-player .av-ext-hp-bar-bg {
    height: 18px !important;
    background: rgba(0,0,0,0.7) !important;
    border: 1px solid rgba(74,222,128,0.4) !important;
    border-radius: 9px !important;
    overflow: hidden;
    position: relative;
  }
  .av-combat-player .player-hp-fill {
    background: linear-gradient(180deg, #22c55e 0%, #14532d 100%) !important;
    transition: width 0.6s ease !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    position: relative;
  }
  /* Shimmer en la HP bar */
  .av-combat-player .player-hp-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0.25) 50%,
      transparent 100%
    );
    animation: avHpShimmer 3s ease-in-out infinite;
  }
  @keyframes avHpShimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%);  }
  }

  .av-combat-player .av-ext-hp-nums {
    font-family: var(--font-title) !important;
    font-size: 11px !important;
    font-weight: bold;
    color: #f0fdf4 !important;
    text-align: center;
    margin-top: 3px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  }

  /* HP crítica: latido rojo */
  .av-combat-player.hp-critical {
    animation: avHpCritical 0.8s ease-in-out infinite;
  }
  @keyframes avHpCritical {
    0%, 100% {
      border-color: rgba(74,222,128,0.3);
      box-shadow: 0 0 0 rgba(239,68,68,0);
    }
    50% {
      border-color: rgba(239,68,68,0.6);
      box-shadow: 0 0 25px rgba(239,68,68,0.4);
    }
  }

  /* Skill bar — compact en mobile */
  .av-skill-bar {
    grid-column: 1 / -1;
    grid-row: 4;
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
    min-height: 28px;
  }

  /* ━━━ BOTONES DE ACCIÓN enormes ━━━ */
  .av-combat-actions {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 8px !important;
    flex-shrink: 0;
    padding-top: 4px;
  }

  .av-combat-actions button {
    min-height: 56px !important;
    font-family: var(--font-display) !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    font-weight: bold;
    border-radius: 12px !important;
    cursor: pointer;
    transition: all 0.15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    padding: 10px !important;
  }

  .av-action-attack {
    background: linear-gradient(180deg, #dc2626 0%, #7f1d1d 100%) !important;
    color: #fff !important;
    border: 2px solid #fca5a5 !important;
    box-shadow:
      0 4px 12px rgba(239,68,68,0.3),
      inset 0 1px 0 rgba(255,255,255,0.2) !important;
  }
  .av-action-attack:active {
    transform: translateY(2px) scale(0.98) !important;
    filter: brightness(1.15) !important;
  }
  .av-action-icon { font-size: 22px; }

  .av-action-auto {
    background: linear-gradient(180deg, #4f46e5 0%, #1e1b4b 100%) !important;
    color: #fff !important;
    border: 2px solid #a5b4fc !important;
  }
  .av-action-auto.active {
    background: linear-gradient(180deg, #f59e0b 0%, #78350f 100%) !important;
    border-color: #fbbf24 !important;
    animation: avAutoActive 1.5s ease-in-out infinite;
  }
  @keyframes avAutoActive {
    0%, 100% { box-shadow: 0 0 12px rgba(245,158,11,0.5); }
    50%      { box-shadow: 0 0 25px rgba(245,158,11,0.9); }
  }

  /* ━━━ TURN BANNER DRAMÁTICO ━━━ */
  .av-turn-banner {
    position: fixed;
    top: 25%;
    left: 0;
    right: 0;
    z-index: 500;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .av-turn-banner-inner {
    padding: 14px 40px;
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 6px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 4px 12px rgba(0,0,0,0.8);
    animation: avTurnBannerSwipe 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    white-space: nowrap;
    border-top: 3px solid;
    border-bottom: 3px solid;
    min-width: 70%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .av-turn-banner-inner.player {
    background: linear-gradient(90deg, transparent 0%, rgba(34,197,94,0.85) 50%, transparent 100%);
    color: #f0fdf4;
    border-color: #86efac;
  }
  .av-turn-banner-inner.enemy {
    background: linear-gradient(90deg, transparent 0%, rgba(220,38,38,0.85) 50%, transparent 100%);
    color: #fef2f2;
    border-color: #fca5a5;
  }
  .av-turn-banner-inner.boss-turn {
    background: linear-gradient(90deg, transparent 0%, rgba(127,29,29,0.95) 50%, transparent 100%);
    color: #fde047;
    border-color: #ef4444;
    font-size: 28px;
    letter-spacing: 8px;
    text-shadow:
      0 0 20px rgba(239,68,68,0.8),
      0 4px 12px rgba(0,0,0,0.9);
  }
  @keyframes avTurnBannerSwipe {
    0%   { opacity: 0; transform: translateX(-100%) skewX(-15deg); }
    15%  { opacity: 1; transform: translateX(0)     skewX(-8deg);  }
    70%  { opacity: 1; transform: translateX(0)     skewX(0);      }
    100% { opacity: 0; transform: translateX(100%)  skewX(15deg);  }
  }

  /* Reward popup — más épico */
  .av-reward-popup {
    z-index: 700 !important;
  }

  /* Ocultar o mostrar según el tamaño del viewport:
     Si hay mucha altura, mostrar el skill bar. Si muy poco, ocultar */
  @media (max-height: 600px) {
    .av-combat-portrait {
      width: 56px !important;
      height: 56px !important;
      font-size: 28px !important;
    }
    .av-enemy-card-wrap .tcg-card {
      transform: scale(0.6);
      margin-bottom: -35%;
    }
  }
}

/* Desktop queda como estaba — ignoramos los cambios mobile */
@media (min-width: 1025px) {
  /* Turn banner también en desktop (se ve copado) */
  .av-turn-banner {
    position: fixed;
    top: 20%;
    left: 0;
    right: 0;
    z-index: 500;
    pointer-events: none;
    display: flex;
    justify-content: center;
  }
  .av-turn-banner-inner {
    padding: 18px 60px;
    font-family: var(--font-display);
    font-size: 34px;
    letter-spacing: 8px;
    font-weight: bold;
    text-shadow: 0 4px 12px rgba(0,0,0,0.8);
    animation: avTurnBannerSwipe 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    white-space: nowrap;
    border-top: 3px solid;
    border-bottom: 3px solid;
  }
  .av-turn-banner-inner.player {
    background: linear-gradient(90deg, transparent 0%, rgba(34,197,94,0.9) 50%, transparent 100%);
    color: #f0fdf4;
    border-color: #86efac;
  }
  .av-turn-banner-inner.enemy,
  .av-turn-banner-inner.boss-turn {
    background: linear-gradient(90deg, transparent 0%, rgba(220,38,38,0.9) 50%, transparent 100%);
    color: #fef2f2;
    border-color: #fca5a5;
  }
}


/* ══════════════════════════════════════════════════════════════
   v121 HF19 — Disable ALL turn banners (user feedback)
   ══════════════════════════════════════════════════════════════ */
.av-turn-banner,
.duel-turn-banner,
#av-turn-banner-el,
#duel-turn-banner-el {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   v121 HF19 — DUELO DE CARTAS: Face-to-Face Mobile Layout
   Cartas lado a lado con VS en el medio, HP debajo de cada carta
   Profile minimalista, mano compacta con overlay "Ver mano"
   ══════════════════════════════════════════════════════════════ */

/* ───────── BOSS FX globales (funcionan en desktop + mobile) ───────── */
#combat-screen.duel-boss-attacking {
  animation: duelBossAttackShake 0.5s ease !important;
}
@keyframes duelBossAttackShake {
  0%, 100% { transform: translate(0, 0); }
  15%      { transform: translate(-5px, 4px); }
  30%      { transform: translate(6px, -4px); }
  45%      { transform: translate(-3px, -3px); }
  60%      { transform: translate(5px, 3px); }
  75%      { transform: translate(-2px, -1px); }
  90%      { transform: translate(2px, 1px); }
}

.duel-boss-flash-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(239,68,68,0.3) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  animation: duelBossFlash 0.5s ease;
  z-index: 50;
}
@keyframes duelBossFlash {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ───────── MOBILE (≤ 1024px, incluye DevTools mobile view) ───────── */
@media (max-width: 1024px) {

  /* ═══ HUD SUPERIOR ═══ */
  .arena-hud-top {
    padding: 8px 10px !important;
    gap: 6px !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, transparent 100%) !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
  }
  .arena-hud-left {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
  }
  .arena-btn-surrender {
    padding: 6px 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
    min-height: 32px !important;
  }
  .arena-audio-btn {
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 13px !important;
  }
  .arena-zone-name {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    color: var(--gold) !important;
    text-align: center;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
  }
  /* Turn pill: lo ocultamos porque ya no usamos banners */
  .arena-turn-badge {
    display: none !important;
  }
  .arena-enemy-info {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    align-items: center !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
    background: rgba(0,0,0,0.5) !important;
    border-radius: 6px !important;
    border: 1px solid rgba(239,68,68,0.25) !important;
  }
  .arena-enemy-label {
    color: #ef4444 !important;
    font-weight: bold;
  }

  /* ═══ RESERVA ENEMIGA (cartas de fondo) ═══ */
  .enemy-hand-row {
    padding: 4px 10px 0 !important;
    justify-content: center !important;
    min-height: 44px;
  }
  .enemy-hand-display {
    gap: 3px !important;
    transform: scale(0.65);
    transform-origin: center center;
  }

  /* ═══ ARENA MAIN: layout Face-to-Face ═══ */
  .arena-wrapper {
    padding: 0 !important;
    flex: 1 !important;
    display: flex;
    flex-direction: column;
  }

  .arena-main {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 6px !important;
  }

  /* 1. Mi carta (izquierda) */
  .arena-field-player {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 4px !important;
    background: linear-gradient(180deg, rgba(15,40,20,0.4) 0%, rgba(8,22,12,0.3) 100%);
    border: 1px solid rgba(74,222,128,0.25);
    border-radius: 10px;
    min-height: 0;
  }

  /* 2. VS center */
  .arena-pvp-center {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 4px !important;
    align-self: center;
  }
  .arena-vs-orb {
    padding: 6px 10px !important;
    background: radial-gradient(circle, rgba(79,70,229,0.8) 0%, rgba(30,27,75,0.9) 100%) !important;
    border: 2px solid #a5b4fc !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 15px rgba(79,70,229,0.5) !important;
    animation: duelVsPulse 2s ease-in-out infinite;
  }
  .arena-vs-orb .vs-text {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    font-weight: bold;
    color: #fff !important;
  }
  .arena-vs-orb .vs-glow { display: none !important; }
  .arena-pvp-divider { display: none !important; }
  @keyframes duelVsPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(79,70,229,0.5); }
    50%      { box-shadow: 0 0 25px rgba(79,70,229,0.9); }
  }

  /* 3. Carta enemiga (derecha) */
  .arena-field-enemy {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 4px !important;
    background: linear-gradient(180deg, rgba(40,15,10,0.4) 0%, rgba(20,8,6,0.3) 100%);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 10px;
    position: relative;
    min-height: 0;
  }

  /* Ocultamos el avatar enemigo genérico */
  .arena-avatar-enemy { display: none !important; }

  /* Ocultamos el combat-profile que se ponía al lado, lo movemos abajo */
  .combat-profile {
    /* NO mostrar en la arena, se muestra en su propio lugar abajo */
    display: none !important;
  }

  /* Cartas activas: escalar renderCard original al tamaño del slot */
  .zone-card-slot {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-height: 160px;
  }
  .zone-card-slot .tcg-card {
    transform: scale(0.55) !important;
    transform-origin: top center !important;
    margin-bottom: -45% !important;
  }
  .field-empty {
    font-size: 10px !important;
    color: var(--text-dim);
    text-align: center;
    padding: 30px 8px !important;
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 8px;
    min-width: 130px;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* HP externa debajo de cada carta */
  .field-hp-external {
    width: 100% !important;
    max-width: 150px !important;
    margin: 0 auto !important;
  }
  .field-hp-bar {
    height: 14px !important;
    border-radius: 7px !important;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.75) !important;
    position: relative;
    overflow: hidden;
  }
  .field-hp-fill {
    height: 100%;
    transition: width 0.6s ease;
  }
  .field-hp-label {
    font-size: 9px !important;
    font-weight: bold !important;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    letter-spacing: 0.5px;
    margin-top: 2px;
  }

  /* ═══ BOSS FIGHT: marco rojo + badge + respiración ═══ */
  #combat-screen.boss-fight .arena-field-enemy {
    border: 2px solid rgba(239,68,68,0.6) !important;
    box-shadow: 0 0 20px rgba(239,68,68,0.3) !important;
    animation: duelBossBreathe 3s ease-in-out infinite;
  }
  @keyframes duelBossBreathe {
    0%, 100% {
      border-color: rgba(239,68,68,0.5);
      box-shadow: 0 0 18px rgba(239,68,68,0.3);
    }
    50% {
      border-color: rgba(239,68,68,1);
      box-shadow: 0 0 40px rgba(239,68,68,0.7);
    }
  }

  #combat-screen.boss-fight .arena-field-enemy::before {
    content: '⚠ BOSS RAID ⚠';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%);
    color: #fff;
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 3px 10px;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(239,68,68,0.8);
    white-space: nowrap;
    animation: duelBossBadgePulse 1.5s ease-in-out infinite;
    z-index: 3;
  }
  @keyframes duelBossBadgePulse {
    0%, 100% { box-shadow: 0 0 10px rgba(239,68,68,0.7); }
    50%      { box-shadow: 0 0 22px rgba(239,68,68,1);   }
  }

  #combat-screen.boss-fight .arena-field-enemy .zone-card-slot .tcg-card {
    animation: duelBossCardBreathe 3.5s ease-in-out infinite;
  }
  @keyframes duelBossCardBreathe {
    0%, 100% { transform: scale(0.55)  translateY(0) !important;    }
    50%      { transform: scale(0.57)  translateY(-2px) !important; }
  }

  /* Fondo de la arena pulsando rojo en boss fight */
  #combat-screen.boss-fight .arena-sky {
    background:
      radial-gradient(circle at 50% 20%, rgba(239,68,68,0.2) 0%, transparent 55%),
      radial-gradient(circle at 20% 70%, rgba(220,38,38,0.12) 0%, transparent 45%) !important;
    animation: duelBossSkyPulse 2.5s ease-in-out infinite;
  }
  @keyframes duelBossSkyPulse {
    0%, 100% { opacity: 0.8; }
    50%      { opacity: 1;   filter: brightness(1.15); }
  }
  #combat-screen.boss-fight .arena-pvp-center .arena-vs-orb {
    background: radial-gradient(circle, rgba(220,38,38,0.9) 0%, rgba(69,10,10,0.95) 100%) !important;
    border-color: #fca5a5 !important;
  }

  /* ═══ LOG COMPACTO ═══ */
  .arena-log-panel {
    display: flex !important;
    position: relative !important;
    background: rgba(0,0,0,0.7) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 6px 12px !important;
    max-height: 50px !important;
    overflow: hidden !important;
    width: 100% !important;
    flex-direction: column !important;
    inset: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .arena-log-title {
    display: none !important;
  }
  .arena-log-entries {
    font-size: 10px !important;
    line-height: 1.35 !important;
    color: #d4d4d8 !important;
    overflow-y: auto !important;
    max-height: 40px;
  }
  .arena-log-entries > * {
    padding: 1px 0 !important;
    letter-spacing: 0.2px;
  }
  .log-toggle-btn { display: none !important; }

  /* ═══ PROFILE MINIMALISTA DEL JUGADOR ═══ */
  /* Creamos un pseudo-elemento: lo inyectamos via el combat-profile real
     pero reestilizado como barra horizontal slim */
  .arena-action-panel .combat-profile-slim {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 12px !important;
    background: linear-gradient(90deg, rgba(15,40,20,0.7) 0%, rgba(8,22,12,0.4) 100%);
    border-top: 1px solid rgba(212,175,55,0.25);
    border-bottom: 1px solid rgba(212,175,55,0.15);
    cursor: pointer;
    width: 100%;
  }

  /* ═══ PANEL DE ACCIÓN INFERIOR ═══ */
  .arena-action-panel {
    padding: 0 !important;
    background: rgba(0,0,0,0.9) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .arena-bottom-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .arena-action-btns {
    order: 1;
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    width: 100% !important;
  }

  .arena-attack-btn {
    min-height: 54px !important;
    padding: 8px !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    background: linear-gradient(180deg, #dc2626 0%, #7f1d1d 100%) !important;
    color: #fff !important;
    border: 2px solid #fca5a5 !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    box-shadow: 0 4px 10px rgba(239,68,68,0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    font-weight: bold;
    position: relative;
    overflow: hidden;
  }
  .attack-btn-glow { display: none !important; }
  .attack-btn-text {
    font-size: 11px !important;
    line-height: 1.15;
  }
  .attack-btn-icon {
    font-size: 18px !important;
  }
  .arena-attack-btn:active {
    transform: translateY(2px) scale(0.98) !important;
    filter: brightness(1.15) !important;
  }

  .arena-auto-btn {
    min-height: 54px !important;
    padding: 6px !important;
    background: linear-gradient(180deg, #4f46e5 0%, #1e1b4b 100%) !important;
    color: #fff !important;
    border: 2px solid #a5b4fc !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    font-weight: bold;
  }
  .arena-auto-btn.active {
    background: linear-gradient(180deg, #f59e0b 0%, #78350f 100%) !important;
    border-color: #fbbf24 !important;
    animation: duelAutoActive 1.5s ease-in-out infinite;
  }
  @keyframes duelAutoActive {
    0%, 100% { box-shadow: 0 0 8px rgba(245,158,11,0.5);  }
    50%      { box-shadow: 0 0 20px rgba(245,158,11,0.9); }
  }
  .arena-auto-btn .auto-icon {
    font-size: 16px !important;
  }
  .arena-auto-btn .auto-label {
    font-size: 10px !important;
    line-height: 1.15;
  }

  .arena-speed-btn {
    min-height: 54px !important;
    padding: 6px !important;
    background: linear-gradient(180deg, rgba(40,40,60,0.9) 0%, rgba(20,20,35,0.9) 100%) !important;
    color: #e5e7eb !important;
    border: 2px solid rgba(255,255,255,0.15) !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
  }
  .arena-speed-btn > span {
    font-size: 11px !important;
  }

  /* ═══ MANO: reducida a vista compacta + botón VER MANO ═══ */
  .arena-hand-section {
    order: 2;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px 10px !important;
    background: rgba(0,0,0,0.95) !important;
  }
  .arena-hand-label {
    /* Lo convertimos en el contador de VER MANO */
    display: none !important;
  }
  .arena-hand-cards {
    flex: 1 !important;
    display: flex !important;
    gap: 4px !important;
    overflow: hidden !important;
    justify-content: flex-start !important;
    min-height: 56px !important;
    align-items: center;
  }
  /* Las cartas de la mano: super compactas, solo icono+nivel */
  .arena-hand-cards .tcg-card {
    transform: scale(0.28) !important;
    transform-origin: top left !important;
    margin: 0 -130px -75% 0 !important;
    pointer-events: auto;
  }

  /* Botón VER MANO */
  .btn-see-full-hand {
    padding: 8px 10px !important;
    background: linear-gradient(180deg, #d4af37 0%, #b38f2e 100%) !important;
    color: #1a1208 !important;
    border: 2px solid #fde047 !important;
    border-radius: 10px !important;
    font-weight: bold !important;
    font-size: 9px !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    min-height: 54px !important;
    min-width: 64px !important;
  }
  .btn-see-full-hand .hand-count-big {
    font-size: 16px !important;
    font-weight: bold;
  }
}

/* ═══ OVERLAY DE MANO COMPLETA ═══ */
#full-hand-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(0,0,0,0.92);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 16px;
  animation: fhoFadeIn 0.25s ease;
}
#full-hand-overlay.open { display: flex; }
@keyframes fhoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fho-title {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 3px;
  color: #fde047;
  font-weight: bold;
}
.fho-cards {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
  justify-content: center;
  max-width: 100%;
}
.fho-cards .tcg-card {
  transform: scale(0.75);
  transform-origin: top center;
  margin-bottom: -25%;
  cursor: pointer;
}
.fho-close-btn {
  padding: 10px 24px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 1px;
  min-height: 40px;
}
.fho-hint {
  font-size: 10px;
  color: #9ca3af;
  text-align: center;
  letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════════════════════
   v121 HF21 — DUELO: Feedback Táctil + Card Animations (Tanda 2)
   ══════════════════════════════════════════════════════════════ */

/* ─── FEEDBACK TÁCTIL EN CARTAS DE LA MANO ─── */

/* Cartas de la mano en la arena - hover (desktop) */
.arena-hand-cards .tcg-card {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease,
              filter 0.2s ease !important;
  cursor: grab;
  position: relative;
  z-index: 1;
}
@media (min-width: 1025px) {
  .arena-hand-cards .tcg-card:hover {
    transform: translateY(-12px) scale(1.08) !important;
    box-shadow: 0 16px 32px rgba(0,0,0,0.6), 0 0 25px rgba(245,197,24,0.5);
    z-index: 10;
    filter: brightness(1.1);
  }
}

/* Tap mobile en cartas de la mano (el overlay VER MANO las maneja) */
.fho-cards .tcg-card {
  transition: transform 0.15s !important;
  cursor: pointer;
}
.fho-cards .tcg-card:active {
  transform: scale(0.96) !important;
}

/* Carta seleccionada (borde dorado pulsante) */
.tcg-card.card-selected {
  animation: cardSelectedPulse 1s ease-in-out infinite;
  z-index: 20 !important;
}
@keyframes cardSelectedPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(245,197,24,0.6), 0 12px 28px rgba(0,0,0,0.5); }
  50%      { box-shadow: 0 0 40px rgba(245,197,24,1), 0 12px 28px rgba(0,0,0,0.5); }
}

/* Mientras arrastras una carta */
.tcg-card.card-dragging {
  opacity: 0.5;
  transform: scale(0.9) !important;
  cursor: grabbing;
}

/* Drop target activo (zona del campo del jugador) */
#player-field-wrap.drop-active {
  background: radial-gradient(circle, rgba(245,197,24,0.2) 0%, transparent 70%) !important;
  box-shadow: inset 0 0 40px rgba(245,197,24,0.3) !important;
  border: 2px dashed rgba(245,197,24,0.8) !important;
  border-radius: 12px;
  animation: dropZonePulse 0.8s ease-in-out infinite;
}
@keyframes dropZonePulse {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.02); }
}

/* Carta no jugable (cuando no hay PA, etc) - shake rojo */
.tcg-card.card-shake-reject {
  animation: cardShakeReject 0.5s ease;
}
@keyframes cardShakeReject {
  0%, 100% { transform: translateX(0); box-shadow: 0 0 0 rgba(239,68,68,0); }
  15%      { transform: translateX(-8px) rotate(-2deg); box-shadow: 0 0 20px rgba(239,68,68,0.7); }
  30%      { transform: translateX(8px)  rotate(2deg);  }
  45%      { transform: translateX(-6px) rotate(-1deg); }
  60%      { transform: translateX(6px)  rotate(1deg);  }
  80%      { transform: translateX(-2px); }
}

/* Mensaje flotante (aparece cuando no podés atacar, etc) */
.floating-msg {
  position: fixed;
  z-index: 600;
  padding: 10px 18px;
  background: linear-gradient(180deg, rgba(50,15,10,0.95) 0%, rgba(25,5,5,0.95) 100%);
  border: 2px solid #ef4444;
  border-radius: 10px;
  color: #fef2f2;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: bold;
  box-shadow: 0 0 25px rgba(239,68,68,0.5);
  pointer-events: none;
  animation: floatingMsgUp 1.5s ease-out forwards;
  white-space: nowrap;
}
@keyframes floatingMsgUp {
  0%   { opacity: 0; transform: translate(-50%, 20px) scale(0.8); }
  15%  { opacity: 1; transform: translate(-50%, 0)    scale(1.05); }
  25%  {              transform: translate(-50%, -5px) scale(1);   }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -40px) scale(0.95); }
}

/* ─── RIPPLE EFFECT en botones (Material Design) ─── */
.arena-attack-btn,
.arena-auto-btn,
.arena-speed-btn,
.btn-see-full-hand {
  position: relative;
  overflow: hidden;
}
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  pointer-events: none;
  transform: scale(0);
  animation: rippleSpread 0.6s ease-out forwards;
}
@keyframes rippleSpread {
  to { transform: scale(4); opacity: 0; }
}

/* Botón ATACAR cuando está deshabilitado intenta atacar */
.arena-attack-btn.btn-reject {
  animation: btnReject 0.5s ease;
}
@keyframes btnReject {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-5px); filter: brightness(0.7); }
  30%      { transform: translateX(5px);  }
  45%      { transform: translateX(-3px); }
  60%      { transform: translateX(3px);  }
}

/* ─── CARD ANIMATIONS ─── */

/* Vuelo de carta desde la mano al campo */
.card-fly-summon {
  position: fixed !important;
  z-index: 800 !important;
  pointer-events: none;
  animation: cardFlySummon 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes cardFlySummon {
  0%   { transform: scale(0.5)  rotate(0);    }
  30%  { transform: scale(1.2)  rotate(180deg); }
  70%  { transform: scale(1.15) rotate(340deg); }
  100% { transform: scale(1)    rotate(360deg); opacity: 0; }
}

/* Flash dorado en la zona del campo al aterrizar */
.summon-flash-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(245,197,24,0.8) 0%, rgba(245,197,24,0) 60%);
  border-radius: 12px;
  animation: summonFlash 0.6s ease-out;
  z-index: 20;
}
@keyframes summonFlash {
  0%   { opacity: 0; transform: scale(0.3); }
  30%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.8); }
}

/* Sparks alrededor de la carta al invocar (según rareza) */
.summon-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 25;
}
.summon-sparks .spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  animation: sparkFly 0.9s ease-out forwards;
}
.summon-sparks.legendary .spark { background: radial-gradient(circle, #fde047 0%, #f59e0b 100%); box-shadow: 0 0 12px #fde047; }
.summon-sparks.rare      .spark { background: radial-gradient(circle, #a5b4fc 0%, #4f46e5 100%); box-shadow: 0 0 10px #a5b4fc; }
.summon-sparks.common    .spark { background: radial-gradient(circle, #f3f4f6 0%, #9ca3af 100%); box-shadow: 0 0 6px #f3f4f6;  }

/* 8 direcciones para las chispas */
.summon-sparks .spark:nth-child(1) { --dx: 60px;  --dy: 0;    }
.summon-sparks .spark:nth-child(2) { --dx: 42px;  --dy: 42px; }
.summon-sparks .spark:nth-child(3) { --dx: 0;     --dy: 60px; }
.summon-sparks .spark:nth-child(4) { --dx: -42px; --dy: 42px; }
.summon-sparks .spark:nth-child(5) { --dx: -60px; --dy: 0;    }
.summon-sparks .spark:nth-child(6) { --dx: -42px; --dy: -42px;}
.summon-sparks .spark:nth-child(7) { --dx: 0;     --dy: -60px;}
.summon-sparks .spark:nth-child(8) { --dx: 42px;  --dy: -42px;}

@keyframes sparkFly {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
  50%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2);
  }
}

/* Animación de ataque — la carta se inclina hacia el enemigo */
.tcg-card.card-attacking-right {
  animation: cardAttackRight 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) !important;
}
.tcg-card.card-attacking-left {
  animation: cardAttackLeft 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) !important;
}
@keyframes cardAttackRight {
  0%   { transform: scale(0.55) translateY(0) rotate(0);     }
  30%  { transform: scale(0.55) translateY(-12px) rotate(-8deg); }
  60%  { transform: scale(0.6)  translateX(40px) rotate(12deg); filter: brightness(1.3); }
  100% { transform: scale(0.55) translateY(0) rotate(0);     }
}
@keyframes cardAttackLeft {
  0%   { transform: scale(0.55) translateY(0) rotate(0);     }
  30%  { transform: scale(0.55) translateY(-12px) rotate(8deg);  }
  60%  { transform: scale(0.6)  translateX(-40px) rotate(-12deg); filter: brightness(1.3); }
  100% { transform: scale(0.55) translateY(0) rotate(0);     }
}

/* Carta recibiendo daño (shake + flash rojo) */
.tcg-card.card-hurt {
  animation: cardHurt 0.5s ease !important;
}
@keyframes cardHurt {
  0%, 100% { transform: scale(0.55) translateX(0); filter: brightness(1); }
  15%      { transform: scale(0.55) translateX(-6px); filter: brightness(1.3) hue-rotate(-20deg); }
  30%      { transform: scale(0.55) translateX(6px);  filter: brightness(1.3) hue-rotate(-20deg); }
  45%      { transform: scale(0.55) translateX(-4px); filter: brightness(1.2); }
  60%      { transform: scale(0.55) translateX(4px);  }
  80%      { transform: scale(0.55) translateX(-2px); }
}

/* Números flotantes de daño */
.damage-float {
  position: fixed;
  z-index: 700;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: bold;
  color: #fde047;
  text-shadow:
    0 0 16px rgba(245,197,24,0.9),
    0 2px 6px rgba(0,0,0,0.9),
    0 0 4px #fff;
  pointer-events: none;
  animation: damageFloatUp 1.4s ease-out forwards;
  white-space: nowrap;
  letter-spacing: 1px;
}
.damage-float.critical {
  color: #ef4444;
  font-size: 52px;
  text-shadow:
    0 0 25px rgba(239,68,68,1),
    0 3px 8px rgba(0,0,0,0.9),
    0 0 4px #fff;
  animation: damageFloatUpCrit 1.6s ease-out forwards;
}
.damage-float.heal {
  color: #4ade80;
  text-shadow:
    0 0 16px rgba(74,222,128,0.9),
    0 2px 6px rgba(0,0,0,0.9);
}
@keyframes damageFloatUp {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.5);  }
  15%  { opacity: 1; transform: translate(-50%, -5px) scale(1.3);  }
  30%  {              transform: translate(-50%, -15px) scale(1);   }
  100% { opacity: 0; transform: translate(-50%, -60px) scale(0.9); }
}
@keyframes damageFloatUpCrit {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.3) rotate(-15deg); }
  10%  { opacity: 1; transform: translate(-50%, -5px) scale(1.6) rotate(5deg);   }
  25%  {              transform: translate(-50%, -15px) scale(1.3) rotate(0);     }
  40%  {              transform: translate(-50%, -20px) scale(1.3);                }
  100% { opacity: 0; transform: translate(-50%, -80px) scale(1.1);                }
}

/* Carta muriendo - rotación + fade */
.tcg-card.card-dying {
  animation: cardDying 0.8s ease-in forwards !important;
}
@keyframes cardDying {
  0%   { opacity: 1; transform: scale(0.55) rotate(0);       filter: brightness(1);   }
  50%  { opacity: 0.6; transform: scale(0.5) rotate(180deg); filter: brightness(0.5) grayscale(0.5); }
  100% { opacity: 0; transform: scale(0.2) rotate(720deg);   filter: brightness(0) grayscale(1);     }
}

/* Partículas de muerte (humo gris) */
.death-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 25;
}
.death-particles .particle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  background: radial-gradient(circle, rgba(100,100,100,0.9) 0%, rgba(30,30,30,0.6) 100%);
  animation: deathParticleFly 1.2s ease-out forwards;
}
.death-particles .particle:nth-child(1) { --dx: 50px;  --dy: -60px; animation-delay: 0s;    }
.death-particles .particle:nth-child(2) { --dx: -45px; --dy: -55px; animation-delay: 0.05s; }
.death-particles .particle:nth-child(3) { --dx: 30px;  --dy: -70px; animation-delay: 0.1s;  }
.death-particles .particle:nth-child(4) { --dx: -30px; --dy: -45px; animation-delay: 0.15s; }
.death-particles .particle:nth-child(5) { --dx: 10px;  --dy: -80px; animation-delay: 0.08s; }
.death-particles .particle:nth-child(6) { --dx: -10px; --dy: -50px; animation-delay: 0.12s; }
@keyframes deathParticleFly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.5); }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF22 — Backgrounds de combate: Talking Island
   Usuario pidió imágenes específicas para zona 0 (Duelo + Camino)
   ══════════════════════════════════════════════════════════════ */

/* Duelo de Cartas: Talking Island → elven ruins */
.arena-bg.zone-0 .arena-sky {
  background-image: url('../img/bg/elvenrions.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #1A3020;
}
/* Opacidad/tinte sobre la imagen para que combata no compita visualmente con las cartas */
.arena-bg.zone-0::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   v121 HF23 — Audio Hub Popup
   ══════════════════════════════════════════════════════════════ */

.audio-hub-popup {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 80px 16px 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.audio-hub-popup.open {
  opacity: 1;
  pointer-events: auto;
}

.ahub-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
}

.ahub-panel {
  position: relative;
  z-index: 2;
  width: 340px;
  max-width: 100%;
  background: linear-gradient(180deg, #1a1208 0%, #0f0a06 100%);
  border: 2px solid rgba(212,175,55,0.5);
  border-radius: 14px;
  padding: 18px 18px 14px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.7),
    0 0 40px rgba(212,175,55,0.15);
  transform: translateY(-10px) scale(0.95);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.audio-hub-popup.open .ahub-panel {
  transform: translateY(0) scale(1);
}

.ahub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(212,175,55,0.2);
}
.ahub-title {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--gold);
  font-weight: bold;
}
.ahub-close {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.ahub-close:hover {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.4);
}

/* Filas de control */
.ahub-row {
  display: grid;
  grid-template-columns: 42px 1fr 52px;
  gap: 10px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.ahub-row:nth-last-child(2) {
  /* última row antes del footer */
  border-bottom: none;
}
.ahub-row.muted .ahub-row-label {
  color: rgba(255,255,255,0.3);
  text-decoration: line-through;
}
.ahub-row.muted .ahub-row-val {
  color: #ef4444;
  font-weight: bold;
}

.ahub-mute-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(40,30,15,0.9) 0%, rgba(20,15,8,0.9) 100%);
  border: 2px solid var(--gold);
  color: var(--gold);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.ahub-mute-btn:hover {
  background: rgba(212,175,55,0.2);
  transform: scale(1.05);
}
.ahub-row.muted .ahub-mute-btn {
  border-color: rgba(239,68,68,0.7);
  color: #ef4444;
  background: rgba(40,10,10,0.7);
}

.ahub-row-info {
  min-width: 0;
}
.ahub-row-label {
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 4px;
  font-weight: 600;
}

.ahub-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold) 30%, rgba(255,255,255,0.12) 30%);
  outline: none;
  cursor: pointer;
}
.ahub-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--gold);
  border: 2px solid #1a1208;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.ahub-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--gold);
  border: 2px solid #1a1208;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.ahub-row-val {
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--gold);
  text-align: right;
  font-weight: bold;
  min-width: 52px;
}

/* Footer con botones "silenciar todo" / "todo on" */
.ahub-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(212,175,55,0.15);
}
.ahub-mute-all,
.ahub-unmute-all {
  padding: 10px 6px;
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
}
.ahub-mute-all {
  background: linear-gradient(180deg, rgba(40,15,15,0.9) 0%, rgba(20,8,8,0.9) 100%);
  border: 1px solid rgba(239,68,68,0.4);
  color: #fca5a5;
}
.ahub-mute-all:hover {
  background: rgba(239,68,68,0.25);
  border-color: rgba(239,68,68,0.7);
}
.ahub-unmute-all {
  background: linear-gradient(180deg, rgba(15,40,20,0.9) 0%, rgba(8,22,12,0.9) 100%);
  border: 1px solid rgba(74,222,128,0.4);
  color: #86efac;
}
.ahub-unmute-all:hover {
  background: rgba(74,222,128,0.2);
  border-color: rgba(74,222,128,0.7);
}

/* Botón de audio en el header (antes tenía slider inline) */
.header-right .vol-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(40,30,15,0.8) 0%, rgba(20,15,8,0.8) 100%);
  border: 1px solid rgba(212,175,55,0.4);
  color: var(--gold);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
}
.header-right .vol-btn:hover {
  background: rgba(212,175,55,0.2);
  border-color: rgba(212,175,55,0.8);
  transform: scale(1.05);
}

/* Ocultar el slider viejo si aún existe en algún lado */
.vol-ctrl .vol-slider,
#vol-slider {
  display: none !important;
}

/* Mobile: popup más compacto y centrado */
@media (max-width: 480px) {
  .audio-hub-popup {
    align-items: flex-end;
    padding: 0;
  }
  .ahub-panel {
    width: 100%;
    border-radius: 14px 14px 0 0;
    border-bottom: none;
    padding: 14px 14px 24px;
  }
  .audio-hub-popup.open .ahub-panel {
    animation: ahubSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes ahubSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0);    }
  }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF24 — Gachapong: Lock + Filtros + Orden por nivel
   ══════════════════════════════════════════════════════════════ */

/* Barra de filtros arriba de la grilla */
.gacha-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 8px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: 8px;
  margin-bottom: 10px;
}
.gf-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.gf-btn {
  padding: 6px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-dim);
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: 0.5px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 30px;
}
.gf-btn:hover {
  background: rgba(212,175,55,0.12);
  border-color: rgba(212,175,55,0.35);
  color: var(--text);
}
.gf-btn.active {
  background: linear-gradient(180deg, #d4af37 0%, #b38f2e 100%);
  color: #1a1208;
  border-color: #fde047;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(212,175,55,0.4);
}

/* Lock state — cuando tenés pocas cartas */
.gacha-locked-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(40,20,10,0.4) 0%, rgba(20,10,5,0.2) 100%);
  border: 2px dashed rgba(239,68,68,0.35);
  border-radius: 14px;
  min-height: 280px;
}
.gl-icon {
  font-size: 56px;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 20px rgba(239,68,68,0.5));
  animation: glIconPulse 2s ease-in-out infinite;
}
@keyframes glIconPulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 20px rgba(239,68,68,0.5)); }
  50%      { transform: scale(1.08); filter: drop-shadow(0 0 35px rgba(239,68,68,0.9)); }
}
.gl-title {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 3px;
  color: #ef4444;
  margin-bottom: 10px;
  font-weight: bold;
  text-shadow: 0 0 20px rgba(239,68,68,0.4);
}
.gl-msg {
  font-family: var(--font-title);
  font-size: 12px;
  color: var(--text);
  line-height: 1.6;
  max-width: 360px;
  margin-bottom: 18px;
  letter-spacing: 0.3px;
}
.gl-msg strong {
  color: #fde047;
}
.gl-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 16px;
  padding: 10px 18px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 10px;
}
.gl-count-current {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: bold;
  color: #ef4444;
  text-shadow: 0 0 15px rgba(239,68,68,0.4);
}
.gl-count-divider {
  font-size: 22px;
  color: var(--text-dim);
  margin: 0 4px;
}
.gl-count-target {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: bold;
  color: #fde047;
}
.gl-count-label {
  font-family: var(--font-title);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1.5px;
  margin-left: 6px;
  text-transform: uppercase;
}
.gl-hint {
  font-family: var(--font-title);
  font-size: 11px;
  color: var(--text-dim);
  max-width: 320px;
  line-height: 1.5;
  padding: 8px 14px;
  background: rgba(212,175,55,0.08);
  border-left: 2px solid rgba(212,175,55,0.4);
  border-radius: 0 6px 6px 0;
  text-align: left;
}

/* Mobile */
@media (max-width: 600px) {
  .gacha-filter-bar { padding: 8px 6px; gap: 4px; }
  .gf-btn { font-size: 10px; padding: 5px 9px; min-height: 28px; letter-spacing: 0.3px; }
  .gl-icon { font-size: 44px; }
  .gl-title { font-size: 16px; letter-spacing: 2px; }
  .gl-msg { font-size: 11px; }
  .gl-count-current { font-size: 26px; }
  .gl-count-target { font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF25 — Camino al Poder: reorden del panel de spot
   ══════════════════════════════════════════════════════════════ */

/* Panel v2 con el nuevo orden */
.av-city-panel-v2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Botones principales arriba: fila grande */
.av-city-actions-main {
  display: flex;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}
.av-city-main-btn {
  flex: 1;
  min-width: 160px;
  min-height: 54px;
  font-size: 14px !important;
  letter-spacing: 1.5px !important;
  font-weight: bold;
  padding: 14px 18px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.av-city-main-btn.btn.primary {
  background: linear-gradient(180deg, #d4af37 0%, #b38f2e 100%) !important;
  color: #1a1208 !important;
  border: 2px solid #fde047 !important;
  box-shadow: 0 4px 12px rgba(212,175,55,0.35);
}
.av-city-main-btn.btn.primary:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
.av-city-main-btn.av-fight-btn {
  background: linear-gradient(180deg, #dc2626 0%, #7f1d1d 100%) !important;
  color: #fff !important;
  border: 2px solid #fca5a5 !important;
  box-shadow: 0 4px 12px rgba(220,38,38,0.35);
  animation: avFightBtnPulse 1.4s ease-in-out infinite;
}
@keyframes avFightBtnPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(220,38,38,0.35); }
  50%      { box-shadow: 0 4px 24px rgba(220,38,38,0.8);  }
}

/* Automático debajo, ancho completo */
.av-city-actions-auto {
  width: 100%;
}
.av-city-auto-full {
  width: 100% !important;
  min-height: 48px !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  padding: 12px !important;
  background: linear-gradient(180deg, #4f46e5 0%, #1e1b4b 100%) !important;
  color: #fff !important;
  border: 2px solid #a5b4fc !important;
  border-radius: 10px !important;
}
.av-city-auto-full.active {
  background: linear-gradient(180deg, #f59e0b 0%, #78350f 100%) !important;
  border-color: #fbbf24 !important;
  animation: avAutoFullActive 1.5s ease-in-out infinite;
}
@keyframes avAutoFullActive {
  0%, 100% { box-shadow: 0 0 12px rgba(245,158,11,0.5); }
  50%      { box-shadow: 0 0 30px rgba(245,158,11,0.9); }
}
.av-city-auto-full .auto-icon {
  font-size: 20px !important;
}

/* Enemy wrap: darle más presencia */
.av-city-panel-v2 .av-city-enemy-wrap {
  min-height: 120px;
  background: rgba(0,0,0,0.3);
  border: 1px dashed rgba(212,175,55,0.25);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Drops abajo de todo: más compacto (ya no es lo principal) */
.av-city-panel-v2 .av-city-drops-title {
  font-size: 12px !important;
  letter-spacing: 1.5px;
  margin-top: 6px !important;
  color: var(--text-dim);
  font-weight: normal !important;
}
.av-city-panel-v2 .av-city-drops {
  opacity: 0.85;
}

/* Stats row más pequeña (no es el foco) */
.av-city-panel-v2 .av-city-stats-row {
  gap: 8px;
  margin-bottom: 0;
}
.av-city-panel-v2 .av-city-stat-box {
  padding: 8px 10px;
}
.av-city-panel-v2 .av-city-stat-val {
  font-size: 14px;
}
.av-city-panel-v2 .av-city-stat-lbl {
  font-size: 10px;
}

@media (max-width: 600px) {
  .av-city-main-btn { min-width: 100%; }
  .av-city-actions-main { flex-direction: column; }
  .av-city-main-btn { font-size: 13px !important; }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF26 — Tutorial Tanda 2 (Actos 3-6)
   ══════════════════════════════════════════════════════════════ */

/* Overlay genérico de Actos 3/4/6 */
.tut-act3-overlay {
  position: fixed;
  inset: 0;
  z-index: 9800;
  background: radial-gradient(ellipse at center, rgba(10,5,2,0.92) 0%, rgba(0,0,0,0.98) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.5s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.tut-act3-overlay.visible {
  opacity: 1;
}

.tut-act3-box {
  max-width: 520px;
  width: 100%;
  background: linear-gradient(180deg, #1a1208 0%, #0f0a06 100%);
  border: 2px solid var(--gold);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow:
    0 0 60px rgba(212,175,55,0.3),
    0 20px 80px rgba(0,0,0,0.8);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: tutAct3BoxEntrance 0.7s ease forwards;
}
.tut-act3-overlay.visible .tut-act3-box {
  transform: translateY(0) scale(1);
}
@keyframes tutAct3BoxEntrance {
  0%   { filter: brightness(0.5); }
  100% { filter: brightness(1);   }
}

/* Mentor header */
.tut-act3-mentor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px dashed rgba(212,175,55,0.3);
}
.tut-mentor-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, #d4af37 0%, #6b4f1c 100%);
  border: 2px solid #fde047;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 0 18px rgba(245,197,24,0.5);
  animation: tutMentorGlow 2.5s ease-in-out infinite;
}
@keyframes tutMentorGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(245,197,24,0.5); }
  50%      { box-shadow: 0 0 30px rgba(245,197,24,0.9); }
}
.tut-mentor-name {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--gold);
  font-weight: bold;
  text-shadow: 0 0 14px rgba(245,197,24,0.4);
}

.tut-act3-msg {
  font-family: var(--font-title);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 20px;
}
.tut-act3-msg p {
  margin: 0 0 12px;
}
.tut-act3-msg p:last-child {
  margin-bottom: 0;
}
.tut-act3-msg strong {
  color: #fde047;
}
.tut-act3-highlight {
  padding: 12px 14px;
  background: rgba(212,175,55,0.1);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  margin: 14px 0 !important;
  text-align: left;
  color: #fde047;
  font-size: 13px;
}

.tut-act3-continue-btn {
  padding: 14px 28px;
  background: linear-gradient(180deg, #d4af37 0%, #b38f2e 100%);
  color: #1a1208;
  border: 2px solid #fde047;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 2.5px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 240px;
  box-shadow: 0 4px 18px rgba(212,175,55,0.5);
  animation: tutAct3BtnPulse 2s ease-in-out infinite;
}
.tut-act3-continue-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
  box-shadow: 0 6px 24px rgba(245,197,24,0.8);
}
@keyframes tutAct3BtnPulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(212,175,55,0.5); }
  50%      { box-shadow: 0 4px 30px rgba(245,197,24,0.9); }
}

/* Acto 6: panel final */
.tut-act6-final {
  max-width: 560px;
}
.tut-victory-line {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 3px;
  color: #4ade80;
  text-shadow: 0 0 20px rgba(74,222,128,0.6);
  margin-bottom: 14px !important;
  animation: tutVictoryPulse 1.5s ease-in-out infinite;
}
@keyframes tutVictoryPulse {
  0%, 100% { filter: brightness(1);    }
  50%      { filter: brightness(1.25); }
}

.tut-quest-panel {
  margin: 18px 0;
  padding: 16px 14px;
  background: linear-gradient(180deg, rgba(40,25,10,0.6) 0%, rgba(20,12,5,0.4) 100%);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 10px;
}
.tut-quest-title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--gold);
  margin-bottom: 8px;
  text-align: center;
}
.tut-quest-goal {
  font-family: var(--font-title);
  font-size: 18px;
  color: #fde047;
  font-weight: bold;
  text-align: center;
  padding: 8px 0 14px;
  border-bottom: 1px dashed rgba(212,175,55,0.2);
  margin-bottom: 12px;
}
.tut-quest-rewards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tut-quest-reward {
  display: grid;
  grid-template-columns: 52px 28px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 12px;
  transition: all 0.2s;
}
.tut-quest-reward.legendary {
  background: linear-gradient(90deg, rgba(245,197,24,0.18) 0%, rgba(212,175,55,0.08) 100%);
  border-color: rgba(245,197,24,0.4);
  box-shadow: 0 0 14px rgba(245,197,24,0.15);
}
.tqr-lvl {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1px;
  color: #a5b4fc;
  padding: 3px 6px;
  background: rgba(79,70,229,0.2);
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
}
.legendary .tqr-lvl {
  color: #fde047;
  background: rgba(245,197,24,0.25);
}
.tqr-arrow {
  color: var(--text-dim);
  font-size: 14px;
  text-align: center;
}
.tqr-prize {
  text-align: left;
  color: var(--text);
  font-size: 11px;
}
.legendary .tqr-prize {
  color: #fde047;
  font-weight: bold;
}

.tut-outro-hint {
  padding: 10px 12px;
  background: rgba(79,70,229,0.1);
  border-left: 3px solid #a5b4fc;
  border-radius: 0 8px 8px 0;
  font-size: 12px !important;
  color: #c7d2fe !important;
  text-align: left;
  margin-top: 14px !important;
}

.tut-final-btn {
  background: linear-gradient(180deg, #dc2626 0%, #7f1d1d 100%) !important;
  color: #fff !important;
  border-color: #fca5a5 !important;
  animation: tutFinalBtnPulse 1.8s ease-in-out infinite;
}
@keyframes tutFinalBtnPulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(239,68,68,0.5); }
  50%      { box-shadow: 0 4px 32px rgba(239,68,68,1);   }
}

/* Quest reward popup (level-up packs) */
.tut-quest-reward-box {
  max-width: 420px;
}
.tut-quest-reward-banner {
  padding: 14px;
  background: linear-gradient(90deg, rgba(245,197,24,0.2) 0%, rgba(212,175,55,0.1) 100%);
  border: 1px solid rgba(245,197,24,0.4);
  border-radius: 10px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.tqb-emoji {
  font-size: 32px;
  animation: tutQbEmojiSpin 1.5s ease-in-out infinite;
}
@keyframes tutQbEmojiSpin {
  0%, 100% { transform: rotate(-5deg) scale(1);    }
  50%      { transform: rotate(5deg)  scale(1.1);  }
}
.tqb-text {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 2.5px;
  color: var(--gold);
  font-weight: bold;
}
.final-quest-reward .tqb-text {
  color: #fde047;
  font-size: 16px;
}
.tut-quest-reward-body {
  padding: 18px 0;
  text-align: center;
}
.tut-quest-reward-count {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: bold;
  color: var(--gold);
  text-shadow: 0 0 22px rgba(245,197,24,0.6);
  margin-bottom: 4px;
}
.tut-quest-reward-label {
  font-family: var(--font-title);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--text);
  text-transform: uppercase;
}

/* ─── SPOTLIGHT TOOLTIP (overlay con hueco) ─── */
.tut-spotlight-overlay {
  position: fixed;
  inset: 0;
  z-index: 9700;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.tut-spotlight-overlay.visible {
  opacity: 1;
}
/* v121 HF29: UNA sola capa oscura (el box-shadow del hueco).
   Antes había dos capas sumando 75% oscuridad. */
.tut-spotlight-dark {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
.tut-spotlight-hole {
  position: absolute;
  border-radius: 12px;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,0.5),
    0 0 35px 5px rgba(245,197,24,0.7),
    inset 0 0 0 3px rgba(245,197,24,0.9);
  pointer-events: none;
  animation: tutSpotHolePulse 1.4s ease-in-out infinite;
}
@keyframes tutSpotHolePulse {
  0%, 100% {
    box-shadow:
      0 0 0 9999px rgba(0,0,0,0.5),
      0 0 32px 4px rgba(245,197,24,0.65),
      inset 0 0 0 3px rgba(245,197,24,0.9);
  }
  50% {
    box-shadow:
      0 0 0 9999px rgba(0,0,0,0.55),
      0 0 48px 10px rgba(245,197,24,1),
      inset 0 0 0 3px rgba(253,224,71,1);
  }
}
.tut-spotlight-tooltip {
  position: absolute;
  width: 280px;
  background: linear-gradient(180deg, #1a1208 0%, #0f0a06 100%);
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: 12px 14px;
  /* el tooltip sí recibe clicks (para que se pueda ver/leer bien) */
  pointer-events: auto;
  box-shadow:
    0 0 28px rgba(245,197,24,0.4),
    0 12px 30px rgba(0,0,0,0.75);
  animation: tutSpotTooltipIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tutSpotTooltipIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)     scale(1);    }
}
.tut-sp-title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 4px;
  font-weight: bold;
}
.tut-sp-body {
  font-family: var(--font-title);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}
.tut-sp-arrow-bottom,
.tut-sp-arrow-top {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}
.tut-sp-arrow-bottom {
  top: -10px;
  border-bottom: 10px solid var(--gold);
}
.tut-sp-arrow-top {
  bottom: -10px;
  border-top: 10px solid var(--gold);
}

/* Mobile: achicar tooltips y paneles */
@media (max-width: 600px) {
  .tut-act3-box {
    padding: 20px 16px;
  }
  .tut-mentor-avatar { width: 46px; height: 46px; font-size: 22px; }
  .tut-mentor-name { font-size: 13px; letter-spacing: 2px; }
  .tut-act3-msg { font-size: 12px; }
  .tut-act3-continue-btn { font-size: 11px; padding: 12px 20px; min-width: 200px; letter-spacing: 2px; }
  .tut-quest-reward { font-size: 10px; grid-template-columns: 46px 20px 1fr; }
  .tqr-prize { font-size: 10px; }
  .tut-spotlight-tooltip { width: calc(100vw - 28px); max-width: 280px; }
  .tut-victory-line { font-size: 16px; }
  .tut-quest-goal { font-size: 15px; }
  .tut-quest-reward-count { font-size: 36px; }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF32 — PvP Player: Combate animado + Anti-farm overlay
   ══════════════════════════════════════════════════════════════ */

/* ─── CARTEL DE COOLDOWN (anti-farm) ─── */
.pvp-cooldown-box {
  max-width: 480px;
  width: 100%;
  background: linear-gradient(180deg, #1a0f08 0%, #0a0604 100%);
  border: 2px solid #f59e0b;
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
  box-shadow:
    0 0 50px rgba(245,158,11,0.35),
    0 20px 60px rgba(0,0,0,0.8);
  animation: pvpCooldownBoxIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pvpCooldownBoxIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)     scale(1);    }
}

.pvp-cooldown-icon {
  font-size: 64px;
  margin-bottom: 14px;
  animation: pvpCooldownIconPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 16px rgba(245,158,11,0.5));
}
@keyframes pvpCooldownIconPulse {
  0%, 100% { transform: rotate(-3deg) scale(1);   }
  50%      { transform: rotate(3deg)  scale(1.08); }
}

.pvp-cooldown-title {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 3px;
  color: #f59e0b;
  font-weight: bold;
  margin-bottom: 10px;
  text-shadow: 0 0 18px rgba(245,158,11,0.4);
  line-height: 1.3;
}
.pvp-cooldown-rival {
  font-family: var(--font-title);
  font-size: 15px;
  color: #fde047;
  font-weight: bold;
  margin-bottom: 14px;
  padding: 6px 14px;
  background: rgba(212,175,55,0.15);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 8px;
  display: inline-block;
}
.pvp-cooldown-msg {
  font-family: var(--font-title);
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 18px;
}
.pvp-cooldown-hint {
  font-family: var(--font-title);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  padding: 10px 14px;
  background: rgba(79,70,229,0.1);
  border-left: 3px solid #a5b4fc;
  border-radius: 0 8px 8px 0;
  text-align: left;
  margin-bottom: 20px;
}
.pvp-cooldown-close-btn {
  padding: 12px 32px !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  min-width: 200px;
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%) !important;
  border-color: #fbbf24 !important;
  color: #1a1208 !important;
  font-weight: bold;
}

/* ─── COMBATE ANIMADO PvP ─── */
.pvp-anim-combat-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pvp-anim-combat-box {
  max-width: 640px;
  width: 100%;
  background: linear-gradient(180deg, #1a1208 0%, #0a0604 100%);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 20px;
  box-shadow:
    0 0 60px rgba(212,175,55,0.3),
    0 20px 80px rgba(0,0,0,0.8);
}

.pvp-anim-title {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--gold);
  text-align: center;
  margin-bottom: 20px;
  text-shadow: 0 0 14px rgba(245,197,24,0.5);
  animation: pvpAnimTitleGlow 1.5s ease-in-out infinite;
}
@keyframes pvpAnimTitleGlow {
  0%, 100% { filter: brightness(1);    }
  50%      { filter: brightness(1.25); }
}

.pvp-anim-arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}

.pvp-anim-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  background: linear-gradient(180deg, rgba(15,40,20,0.35) 0%, rgba(8,22,12,0.2) 100%);
  border: 1px solid rgba(74,222,128,0.25);
  border-radius: 10px;
  transition: transform 0.3s ease;
}
.pvp-anim-rival {
  background: linear-gradient(180deg, rgba(40,15,10,0.35) 0%, rgba(20,8,6,0.2) 100%);
  border-color: rgba(239,68,68,0.25);
}

.pvp-anim-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, #d4af37 0%, #6b4f1c 100%);
  border: 3px solid #fde047;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 0 16px rgba(245,197,24,0.4);
}
.pvp-anim-rival .pvp-anim-avatar {
  background: radial-gradient(circle, #dc2626 0%, #7f1d1d 100%);
  border-color: #fca5a5;
  box-shadow: 0 0 16px rgba(239,68,68,0.4);
}

.pvp-anim-name {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--text);
  font-weight: bold;
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pvp-anim-me .pvp-anim-name    { color: #86efac; }
.pvp-anim-rival .pvp-anim-name { color: #fca5a5; }

.pvp-anim-hp-wrap {
  width: 100%;
}
.pvp-anim-hp-bar {
  height: 14px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 7px;
  overflow: hidden;
}
.pvp-anim-hp-fill {
  height: 100%;
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(180deg, #22c55e 0%, #14532d 100%);
}
.pvp-anim-hp-fill.rival {
  background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%);
}
.pvp-anim-hp-text {
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text);
  text-align: center;
  margin-top: 4px;
  font-weight: bold;
}

.pvp-anim-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.pvp-anim-vs-orb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #4f46e5 0%, #1e1b4b 100%);
  border: 2px solid #a5b4fc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1.5px;
  color: #fff;
  box-shadow: 0 0 14px rgba(79,70,229,0.5);
  animation: pvpAnimVsPulse 1.5s ease-in-out infinite;
}
@keyframes pvpAnimVsPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(79,70,229,0.5); transform: scale(1);    }
  50%      { box-shadow: 0 0 26px rgba(79,70,229,0.9); transform: scale(1.08); }
}

/* Animaciones de ataque */
.pvp-anim-side.pvp-anim-attacking.pvp-anim-me {
  animation: pvpAnimAttackMe 0.4s ease;
}
.pvp-anim-side.pvp-anim-attacking.pvp-anim-rival {
  animation: pvpAnimAttackRival 0.4s ease;
}
@keyframes pvpAnimAttackMe {
  0%   { transform: translateX(0);    }
  40%  { transform: translateX(20px); filter: brightness(1.3); }
  100% { transform: translateX(0);    }
}
@keyframes pvpAnimAttackRival {
  0%   { transform: translateX(0);     }
  40%  { transform: translateX(-20px); filter: brightness(1.3); }
  100% { transform: translateX(0);     }
}

.pvp-anim-side.pvp-anim-hurt {
  animation: pvpAnimHurtShake 0.35s ease;
}
@keyframes pvpAnimHurtShake {
  0%, 100% { transform: translateX(0);    filter: brightness(1); }
  20%      { transform: translateX(-4px); filter: brightness(1.5) hue-rotate(-20deg); }
  40%      { transform: translateX(4px);  filter: brightness(1.4) hue-rotate(-15deg); }
  60%      { transform: translateX(-3px); filter: brightness(1.2); }
  80%      { transform: translateX(3px);  }
}

/* Número flotante de daño */
.pvp-anim-dmg-float {
  position: fixed;
  z-index: 9999;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: bold;
  color: #fde047;
  text-shadow:
    0 0 14px rgba(245,197,24,0.9),
    0 2px 6px rgba(0,0,0,0.9);
  pointer-events: none;
  animation: pvpAnimDmgFloatUp 1.2s ease-out forwards;
  transform: translate(-50%, 0);
  letter-spacing: 1px;
}
@keyframes pvpAnimDmgFloatUp {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.5);  }
  15%  { opacity: 1; transform: translate(-50%, -5px) scale(1.3);  }
  100% { opacity: 0; transform: translate(-50%, -50px) scale(0.9); }
}

/* Log de combate */
.pvp-anim-log {
  max-height: 100px;
  overflow-y: auto;
  padding: 10px 12px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  margin-bottom: 12px;
}
.pvp-anim-log-line {
  font-family: var(--font-title);
  font-size: 11px;
  color: var(--text);
  line-height: 1.5;
  padding: 2px 0;
  animation: pvpAnimLogLineIn 0.3s ease;
}
@keyframes pvpAnimLogLineIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0);    }
}
.pvp-log-attacker-me    { color: #86efac; font-weight: bold; }
.pvp-log-attacker-rival { color: #fca5a5; font-weight: bold; }

.pvp-anim-round-indicator {
  text-align: center;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 2.5px;
  color: var(--gold);
  padding: 6px 0;
  font-weight: bold;
}

/* Mobile */
@media (max-width: 600px) {
  .pvp-anim-combat-box { padding: 14px; }
  .pvp-anim-title { font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; }
  .pvp-anim-arena { gap: 8px; }
  .pvp-anim-side  { padding: 10px 6px; }
  .pvp-anim-avatar { width: 48px; height: 48px; font-size: 22px; }
  .pvp-anim-name { font-size: 11px; letter-spacing: 1px; }
  .pvp-anim-vs-orb { width: 34px; height: 34px; font-size: 10px; letter-spacing: 1px; }
  .pvp-anim-hp-bar { height: 12px; }
  .pvp-anim-hp-text { font-size: 9px; }
  .pvp-anim-dmg-float { font-size: 22px; }
  .pvp-anim-log { max-height: 80px; }
  .pvp-anim-log-line { font-size: 10px; }
  .pvp-cooldown-box { padding: 22px 16px; }
  .pvp-cooldown-title { font-size: 15px; letter-spacing: 2px; }
  .pvp-cooldown-msg { font-size: 12px; }
  .pvp-cooldown-hint { font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF33 — Carta Premium: Valkanas
   La imagen ya trae su marco dorado propio, ocupamos toda la carta.
   ══════════════════════════════════════════════════════════════ */
.tcg-card-premium {
  background: transparent !important;
  border: none !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 30px rgba(245,197,24,0.25);
  overflow: visible;
  position: relative;
}
.tcg-card-premium .tcg-premium-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  pointer-events: none;
  user-select: none;
}
/* Legendary glow propio para Valkanas */
.tcg-card-valkanas {
  filter: drop-shadow(0 0 18px rgba(239,68,68,0.35));
  animation: valkanasGlow 3s ease-in-out infinite;
}
@keyframes valkanasGlow {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(239,68,68,0.35)); }
  50%      { filter: drop-shadow(0 0 32px rgba(245,197,24,0.6));  }
}
/* Tooltip de ability posicionado igual que las demás */
.tcg-card-valkanas .tcg-ability-hover-wrap {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 100;
}
.tcg-card-valkanas:hover .tcg-ability-hover-wrap {
  opacity: 1;
  transform: translateX(-50%) translateY(20px);
}

/* ══════════════════════════════════════════════════════════════
   v121 HF35 — Cinemática del tutorial: carta premium de Valkanas
   (reemplaza el emoji 🐉 anterior)
   ══════════════════════════════════════════════════════════════ */

.tut-cine-villain-card {
  width: 220px;
  height: 320px;
  margin: 0 auto 18px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 60px rgba(239,68,68,0.6),
    0 0 30px rgba(245,197,24,0.4),
    0 25px 50px rgba(0,0,0,0.9);
  animation: cineValkanasFloat 3.5s ease-in-out infinite,
             cineValkanasGlow  2.5s ease-in-out infinite;
  transform-origin: center center;
}

.tut-cine-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}

@keyframes cineValkanasFloat {
  0%, 100% { transform: translateY(0)     rotate(-1deg) scale(1);    }
  50%      { transform: translateY(-12px) rotate(1deg)  scale(1.02); }
}

@keyframes cineValkanasGlow {
  0%, 100% {
    box-shadow:
      0 0 50px rgba(239,68,68,0.5),
      0 0 25px rgba(245,197,24,0.3),
      0 25px 50px rgba(0,0,0,0.9);
  }
  50% {
    box-shadow:
      0 0 90px rgba(239,68,68,0.9),
      0 0 50px rgba(245,197,24,0.7),
      0 25px 50px rgba(0,0,0,0.9);
  }
}

/* Entrada dramática cuando la villain aparece */
.tut-cine-villain.visible .tut-cine-villain-card {
  animation: cineValkanasEntrance 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             cineValkanasFloat 3.5s ease-in-out 1s infinite,
             cineValkanasGlow  2.5s ease-in-out 1s infinite;
}

@keyframes cineValkanasEntrance {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-20deg);
    filter: brightness(3);
  }
  50% {
    opacity: 1;
    transform: scale(1.15) rotate(5deg);
    filter: brightness(1.5);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(-1deg);
    filter: brightness(1);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .tut-cine-villain-card {
    width: 170px;
    height: 250px;
    margin-bottom: 14px;
  }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF36 — PvP Player: Avatares reales (raza+sexo)
   ══════════════════════════════════════════════════════════════ */

/* Avatar con imagen real (en vez del emoji) */
.pvp-anim-avatar-img {
  width: 72px;
  height: 72px;
  padding: 0;
  overflow: hidden;
  background: radial-gradient(circle, #1a1208 0%, #0a0604 100%);
  border: 3px solid #d4af37;
  box-shadow: 0 0 18px rgba(212,175,55,0.5);
  position: relative;
}
.pvp-anim-avatar-me.pvp-anim-avatar-img {
  border-color: #86efac;
  box-shadow: 0 0 18px rgba(74,222,128,0.5);
}
.pvp-anim-avatar-rival.pvp-anim-avatar-img {
  border-color: #fca5a5;
  box-shadow: 0 0 18px rgba(239,68,68,0.5);
}

.pvp-anim-avatar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  /* El foco está en la cara del personaje, un poco arriba del centro */
  object-position: center 20%;
}

/* v121 HF37: fallback emoji cuando la imagen no carga */
.pvp-anim-avatar-emoji-fallback {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

/* Label de raza debajo del nombre */
.pvp-anim-race {
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  margin-top: -2px;
  margin-bottom: 4px;
  opacity: 0.85;
}

/* Responsive mobile: avatares más chicos */
@media (max-width: 600px) {
  .pvp-anim-avatar-img {
    width: 54px;
    height: 54px;
  }
  .pvp-anim-race {
    font-size: 9px;
    letter-spacing: 1px;
  }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF40 — Sistema de Clases: popup de elección + badge + botón combate
   ══════════════════════════════════════════════════════════════ */

/* ─── OVERLAY DE ELECCIÓN ─── */
.class-choice-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(20,10,30,0.95) 0%, rgba(0,0,0,0.97) 100%);
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.class-choice-overlay.visible {
  opacity: 1;
}

.class-choice-box {
  max-width: 900px;
  width: 100%;
  background: linear-gradient(180deg, #1a1008 0%, #0a0604 100%);
  border: 3px solid var(--gold);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 0 80px rgba(212,175,55,0.45), 0 30px 90px rgba(0,0,0,0.9);
  position: relative;
  animation: classBoxIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes classBoxIn {
  from { transform: scale(0.8) translateY(30px); opacity: 0; }
  to   { transform: scale(1) translateY(0);     opacity: 1; }
}

.class-choice-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 18px;
}
.class-choice-sparkles .cc-sp {
  position: absolute;
  font-size: 22px;
  color: #fde047;
  opacity: 0.6;
  animation: classSparkle 4s ease-in-out infinite;
}
.class-choice-sparkles .cc-sp:nth-child(1) { top: 12%; left: 8%;  animation-delay: 0s; }
.class-choice-sparkles .cc-sp:nth-child(2) { top: 22%; right: 12%; animation-delay: 1s; }
.class-choice-sparkles .cc-sp:nth-child(3) { bottom: 18%; left: 14%; animation-delay: 2s; }
.class-choice-sparkles .cc-sp:nth-child(4) { bottom: 12%; right: 8%;  animation-delay: 3s; }
@keyframes classSparkle {
  0%, 100% { opacity: 0.2; transform: scale(0.9) rotate(0deg);    }
  50%      { opacity: 0.9; transform: scale(1.3) rotate(180deg);  }
}

.class-choice-title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 3px;
  color: var(--gold);
  text-align: center;
  margin-bottom: 8px;
  text-shadow: 0 0 20px rgba(245,197,24,0.6);
  font-weight: bold;
}
.class-choice-sub {
  font-family: var(--font-title);
  font-size: 14px;
  color: var(--text);
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 14px;
  opacity: 0.9;
}
.class-choice-warning {
  font-family: var(--font-title);
  font-size: 12px;
  color: #fbbf24;
  text-align: center;
  padding: 8px 14px;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 8px;
  margin-bottom: 22px;
}

.class-choice-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.class-choice-card {
  background: linear-gradient(180deg, rgba(30,20,12,0.9) 0%, rgba(15,10,6,0.9) 100%);
  border: 2px solid rgba(212,175,55,0.3);
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.class-choice-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--gold);
  box-shadow: 0 14px 30px rgba(0,0,0,0.6), 0 0 30px rgba(245,197,24,0.3);
}

.cc-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  border: 3px solid rgba(255,255,255,0.2);
  box-shadow: inset 0 -4px 10px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.5);
}

.cc-name {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 3px;
  color: var(--text);
  font-weight: bold;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.cc-desc {
  font-family: var(--font-title);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 14px;
  min-height: 48px;
}

.cc-stats {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cc-stat {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 1px;
}
.cc-stat.pos {
  background: rgba(34,197,94,0.2);
  color: #86efac;
  border: 1px solid rgba(74,222,128,0.4);
}
.cc-stat.neg {
  background: rgba(239,68,68,0.2);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.4);
}

.cc-ability {
  background: rgba(79,70,229,0.15);
  border: 1px solid rgba(165,180,252,0.3);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  text-align: left;
}
.cc-ability-title {
  font-family: var(--font-display);
  font-size: 13px;
  color: #fde047;
  letter-spacing: 1.5px;
  font-weight: bold;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cc-ability-icon {
  font-size: 16px;
}
.cc-ability-desc {
  font-family: var(--font-title);
  font-size: 11px;
  color: var(--text);
  line-height: 1.5;
  opacity: 0.9;
}

.cc-select-btn {
  width: 100%;
  padding: 12px 18px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 2.5px;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.15s, box-shadow 0.15s;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.cc-select-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.3);
}
.cc-select-btn:active {
  transform: scale(0.98);
}

/* Mobile — columnas en 1 */
@media (max-width: 700px) {
  .class-choice-box { padding: 22px 16px; }
  .class-choice-title { font-size: 20px; letter-spacing: 2px; }
  .class-choice-sub { font-size: 12px; }
  .class-choice-cards { grid-template-columns: 1fr; gap: 12px; }
  .cc-name { font-size: 18px; }
  .cc-icon { width: 64px; height: 64px; font-size: 32px; }
  .cc-desc { font-size: 11px; min-height: 0; }
}

/* ─── BOTÓN DE HABILIDAD DE CLASE EN COMBATE ─── */
.arena-class-ability-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  min-width: 70px;
  color: #fff;
  border: 2px solid #7c3aed;
  border-radius: 10px;
  background: linear-gradient(180deg, #8b5cf6 0%, #6d28d9 100%);
  cursor: pointer;
  font-family: var(--font-display);
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  position: relative;
  transition: transform 0.15s, opacity 0.2s;
  animation: classAbReady 2s ease-in-out infinite;
}
@keyframes classAbReady {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2), 0 0 10px currentColor; }
  50%      { box-shadow: 0 4px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2), 0 0 22px currentColor; }
}
.arena-class-ability-btn.hidden {
  display: none !important;
}
.arena-class-ability-btn:hover {
  transform: scale(1.08);
}
.arena-class-ability-btn:active {
  transform: scale(0.96);
}
.arena-class-ability-btn.spent {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(1);
  animation: none;
}
.class-ab-icon {
  font-size: 22px;
}
.class-ab-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: bold;
}
.class-ab-uses {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fde047;
  color: #000;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #1a1008;
  font-family: var(--font-title);
}
.arena-class-ability-btn.spent .class-ab-uses {
  background: #555;
  color: #888;
}

@media (max-width: 600px) {
  .arena-class-ability-btn {
    padding: 8px 10px;
    min-width: 56px;
  }
  .class-ab-icon { font-size: 18px; }
  .class-ab-label { font-size: 8px; }
  .class-ab-uses { width: 16px; height: 16px; font-size: 9px; }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF41 — Merchant reorganizado + Shop + Skins
   ══════════════════════════════════════════════════════════════ */

/* ─── SECCIONES PRINCIPALES DEL MERCHANT ─── */
.merchant-sections-wrap {
  width: 100%;
  max-width: 100%;
}
.merchant-sections-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px 4px;
  background: linear-gradient(180deg, rgba(10,6,4,0.9) 0%, rgba(5,3,2,0.7) 100%);
  border-bottom: 2px solid rgba(212,175,55,0.35);
  overflow-x: auto;
  scrollbar-width: none;
}
.merchant-sections-bar::-webkit-scrollbar { display: none; }

.m-section-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 10px 10px 0 0;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.m-section-btn:hover {
  background: rgba(212,175,55,0.1);
  color: var(--text);
}
.m-section-btn.active {
  background: linear-gradient(180deg, #3a2608 0%, #1a0f04 100%);
  color: var(--gold);
  border-color: var(--gold);
  border-bottom-color: transparent;
  box-shadow: inset 0 0 14px rgba(245,197,24,0.25);
}

/* ─── GRID DE ITEMS DEL SHOP ─── */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 16px;
}

.shop-item-card {
  background: linear-gradient(180deg, rgba(30,20,12,0.9) 0%, rgba(15,10,6,0.95) 100%);
  border: 2px solid rgba(212,175,55,0.3);
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shop-item-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 10px 24px rgba(0,0,0,0.5), 0 0 20px rgba(245,197,24,0.2);
}
.shop-item-card.unaffordable {
  opacity: 0.55;
  filter: grayscale(0.3);
}

.shop-item-icon {
  font-size: 48px;
  margin: 8px auto 4px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}

.shop-item-name {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 1.5px;
  color: var(--text);
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.2;
}

.shop-item-desc {
  font-family: var(--font-title);
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
  min-height: 34px;
}

.shop-item-stats {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.shop-stat {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: bold;
  border-radius: 10px;
  letter-spacing: 0.5px;
}
.shop-stat.atk { background: rgba(239,68,68,0.2); color: #fca5a5; border: 1px solid rgba(239,68,68,0.4); }
.shop-stat.def { background: rgba(59,130,246,0.2); color: #93c5fd; border: 1px solid rgba(59,130,246,0.4); }
.shop-stat.hp  { background: rgba(34,197,94,0.2); color: #86efac; border: 1px solid rgba(74,222,128,0.4); }

.shop-item-price {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: bold;
  color: var(--gold);
  letter-spacing: 1.5px;
  text-shadow: 0 0 8px rgba(245,197,24,0.4);
}

.shop-buy-btn {
  width: 100%;
  padding: 10px 14px;
  background: linear-gradient(180deg, #d4af37 0%, #8b6a19 100%);
  color: #000;
  border: 2px solid #fde047;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  margin-top: auto;
}
.shop-buy-btn:hover:not(:disabled) {
  transform: scale(1.04);
  box-shadow: 0 4px 14px rgba(245,197,24,0.4);
}
.shop-buy-btn:active:not(:disabled) { transform: scale(0.98); }
.shop-buy-btn:disabled {
  background: #444;
  color: #888;
  border-color: #666;
  cursor: not-allowed;
}
.shop-buy-btn.owned-btn {
  background: linear-gradient(180deg, #22c55e 0%, #14532d 100%);
  color: #fff;
  border-color: #86efac;
}

/* ─── SHOP CONSUMABLES (visual distintivo) ─── */
.shop-item-card.shop-consumable {
  border-color: rgba(34,197,94,0.4);
}
.shop-item-card.shop-consumable:hover {
  border-color: #86efac;
  box-shadow: 0 10px 24px rgba(0,0,0,0.5), 0 0 20px rgba(34,197,94,0.25);
}

/* ─── SHOP EMPTY STATE ─── */
.shop-empty {
  padding: 60px 20px;
  text-align: center;
}
.shop-empty-icon {
  font-size: 64px;
  margin-bottom: 14px;
  opacity: 0.5;
}
.shop-empty-title {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 6px;
}
.shop-empty-sub {
  font-family: var(--font-title);
  font-size: 12px;
  color: var(--text-dim);
}

/* ─── SKINS CARDS (variante del shop-item) ─── */
.skin-card {
  padding: 14px 12px;
}
.skin-card.owned {
  border-color: rgba(74,222,128,0.5);
  box-shadow: inset 0 0 16px rgba(34,197,94,0.1);
}
.skin-preview {
  width: 100%;
  aspect-ratio: 3/4;
  background: radial-gradient(ellipse at center, #2a1a0c 0%, #0a0604 100%);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212,175,55,0.3);
}
.skin-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.skin-owned-badge {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #86efac;
  background: rgba(34,197,94,0.15);
  border: 1px solid rgba(74,222,128,0.4);
  padding: 6px;
  border-radius: 8px;
  font-weight: bold;
}
.rarity-premium {
  border-color: #a855f7 !important;
  box-shadow: 0 0 22px rgba(168,85,247,0.35) !important;
}
.rarity-rare {
  border-color: #60a5fa !important;
}

/* ─── MODAL "MIS SKINS" ─── */
.my-skins-panel {
  max-width: 720px;
}
.my-skins-body {
  padding: 16px;
  max-height: 65vh;
  overflow-y: auto;
}
.my-skins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.my-skin-card {
  background: linear-gradient(180deg, rgba(30,20,12,0.9) 0%, rgba(15,10,6,0.95) 100%);
  border: 2px solid rgba(212,175,55,0.3);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.my-skin-card.active {
  border-color: #86efac;
  box-shadow: 0 0 22px rgba(74,222,128,0.3);
}
.ms-preview {
  width: 100%;
  aspect-ratio: 1;
  background: radial-gradient(ellipse at center, #2a1a0c 0%, #0a0604 100%);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.ms-default-preview {
  background: linear-gradient(135deg, #4a3a24 0%, #1a1008 100%);
  flex-direction: column;
  gap: 4px;
}
.ms-default-text {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--gold);
  font-weight: bold;
}
.ms-default-sub {
  font-family: var(--font-title);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
}
.ms-name {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text);
  font-weight: bold;
  text-transform: uppercase;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-active-badge {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #86efac;
  background: rgba(34,197,94,0.15);
  border: 1px solid rgba(74,222,128,0.4);
  padding: 5px;
  border-radius: 6px;
  font-weight: bold;
}
.ms-use-btn {
  padding: 6px 10px;
  background: linear-gradient(180deg, #d4af37 0%, #8b6a19 100%);
  color: #000;
  border: 1px solid #fde047;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1.5px;
  cursor: pointer;
}
.ms-use-btn:hover { transform: scale(1.04); }
.my-skins-empty {
  padding: 40px 20px;
  text-align: center;
}
.ms-empty-icon {
  font-size: 56px;
  margin-bottom: 12px;
  opacity: 0.5;
}
.ms-empty-title {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text);
  margin-bottom: 6px;
}
.ms-empty-sub {
  font-family: var(--font-title);
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Mobile */
@media (max-width: 600px) {
  .shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    padding: 10px;
  }
  .shop-item-card { padding: 12px 10px; }
  .shop-item-icon { font-size: 36px; }
  .shop-item-name { font-size: 13px; }
  .shop-item-desc { font-size: 10px; min-height: 28px; }
  .shop-item-price { font-size: 14px; }
  .m-section-btn { padding: 8px 12px; font-size: 11px; }
  .my-skins-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF42 — Top PvP: avatares reales 2x más grandes + skins visibles
   ══════════════════════════════════════════════════════════════ */

.pvp-ranking-table td.rk-name {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px !important;
  min-height: 70px;
}

.rk-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(212,175,55,0.6);
  background: radial-gradient(circle at center, #2a1a0c 0%, #0a0604 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 0 10px rgba(0,0,0,0.6), inset 0 0 6px rgba(245,197,24,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rk-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.rk-avatar-emoji {
  font-size: 32px;
}

/* Filas del ranking "me" con aura dorada */
.pvp-ranking-table tr.is-me .rk-avatar {
  border-color: #fde047;
  box-shadow: 0 0 16px rgba(245,197,24,0.6), inset 0 0 8px rgba(245,197,24,0.35);
  animation: rkMeGlow 2s ease-in-out infinite;
}
@keyframes rkMeGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(245,197,24,0.6), inset 0 0 8px rgba(245,197,24,0.35); }
  50%      { box-shadow: 0 0 28px rgba(245,197,24,0.95), inset 0 0 12px rgba(245,197,24,0.5); }
}

.rk-name-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.rk-name-text strong {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--text);
}
.rk-name-text .rk-lvl {
  font-family: var(--font-title);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

/* Hover: zoom sutil del avatar para destacar la skin */
.pvp-ranking-table tr:hover .rk-avatar {
  transform: scale(1.08);
  box-shadow: 0 0 18px rgba(245,197,24,0.5), inset 0 0 8px rgba(245,197,24,0.4);
}

/* Mobile — avatares un poco más chicos pero igual el doble que antes */
@media (max-width: 600px) {
  .rk-avatar { width: 44px; height: 44px; font-size: 22px; }
  .rk-avatar-emoji { font-size: 26px; }
  .pvp-ranking-table td.rk-name { gap: 8px; min-height: 56px; padding: 8px 8px !important; }
  .rk-name-text strong { font-size: 13px; }
  .rk-name-text .rk-lvl { font-size: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF43 — Pantalla de Perfil (Diablo Immortal style)
   Avatar gigante centrado + stats en arco + aura girando
   ══════════════════════════════════════════════════════════════ */

/* El hero ocupa todo el espacio disponible del tab */
.profile-hero {
  position: relative;
  min-height: calc(100vh - 180px);
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: -14px;
  border-radius: 8px;
}
@media (max-width: 600px) {
  .profile-hero { min-height: calc(100vh - 140px); margin: -10px; }
}

/* Fondo épico */
.pf-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/bg/elvenrions.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.35) saturate(0.85);
  z-index: 0;
}
.pf-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(10,6,4,0.3) 0%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Contenedor de contenido encima del fondo */
.pf-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 32px;
  min-height: inherit;
  gap: 8px;
}

.pf-loading {
  color: var(--text-dim);
  text-align: center;
  padding: 60px 20px;
  font-family: var(--font-title);
}

/* ─── HEADER: nombre + raza/clase + VIP ─── */
.pf-header {
  position: relative;
  text-align: center;
  animation: pfFadeIn 0.6s ease-out;
}
@keyframes pfFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pf-name {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 4px;
  color: var(--gold);
  font-weight: bold;
  text-transform: uppercase;
  text-shadow:
    0 0 20px rgba(245,197,24,0.6),
    0 2px 8px rgba(0,0,0,0.9),
    0 0 40px rgba(245,197,24,0.2);
  margin-bottom: 4px;
}
@media (max-width: 600px) {
  .pf-name { font-size: 22px; letter-spacing: 3px; }
}

.pf-sub {
  font-family: var(--font-title);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--text);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
}
.pf-race { font-weight: bold; }
.pf-sep { color: var(--gold); opacity: 0.7; }
.pf-class { color: #fde047; font-weight: bold; }

.pf-vip-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 16px;
  background: linear-gradient(90deg, #d4af37 0%, #fde047 50%, #d4af37 100%);
  background-size: 200% 100%;
  color: #1a0f04;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 2.5px;
  font-weight: bold;
  border-radius: 20px;
  border: 1px solid #fff3a0;
  box-shadow: 0 0 18px rgba(245,197,24,0.7), inset 0 1px 0 rgba(255,255,255,0.3);
  animation: pfVipShimmer 3s linear infinite;
}
@keyframes pfVipShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── ESCENA DEL AVATAR + STATS EN ARCO ─── */
.pf-avatar-stage {
  position: relative;
  width: min(420px, 95vw);
  aspect-ratio: 1;
  max-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
}

/* Arco SVG de fondo conectando los stats */
.pf-arc-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Aura dorada girando */
.pf-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 82%;
  height: 82%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(245,197,24,0.7);
  border-right-color: rgba(245,197,24,0.35);
  animation: pfAuraRotate 8s linear infinite;
  z-index: 2;
  pointer-events: none;
}
.pf-aura-2 {
  width: 88%;
  height: 88%;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: rgba(245,197,24,0.4);
  border-left-color: rgba(245,197,24,0.2);
  animation: pfAuraRotate 12s linear infinite reverse;
}
@keyframes pfAuraRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* El avatar gigante */
.pf-avatar-wrap {
  position: relative;
  width: 68%;
  height: 68%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 3;
  box-shadow:
    0 0 40px rgba(0,0,0,0.9),
    0 0 60px rgba(245,197,24,0.3),
    inset 0 0 30px rgba(0,0,0,0.5);
  border: 3px solid var(--gold);
  background: radial-gradient(circle at center, #2a1a0c 0%, #0a0604 100%);
  animation: pfAvatarBreath 4s ease-in-out infinite, pfAvatarEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pfAvatarBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}
@keyframes pfAvatarEntry {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.pf-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.pf-avatar-emoji {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 120px;
  text-shadow: 0 0 40px rgba(245,197,24,0.4);
}

/* ─── STATS EN ARCO ─── */
.pf-stat {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(20,12,6,0.85) 0%, rgba(10,6,3,0.9) 100%);
  border: 1.5px solid rgba(212,175,55,0.5);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  min-width: 64px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.6), 0 0 16px rgba(245,197,24,0.15);
}
.pf-stat.pf-stat-visible {
  opacity: 1;
  transform: scale(1);
}

/* Posición HP: arriba-izquierda */
.pf-stat-hp {
  top: 4%;
  left: 2%;
  border-color: rgba(239,68,68,0.6);
  box-shadow: 0 4px 14px rgba(0,0,0,0.6), 0 0 20px rgba(239,68,68,0.3);
}
/* Posición DEF: arriba-centro */
.pf-stat-def {
  top: -4%;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  border-color: rgba(59,130,246,0.6);
  box-shadow: 0 4px 14px rgba(0,0,0,0.6), 0 0 20px rgba(59,130,246,0.3);
}
.pf-stat-def.pf-stat-visible {
  transform: translateX(-50%) scale(1);
}
/* Posición ATK: arriba-derecha */
.pf-stat-atk {
  top: 4%;
  right: 2%;
  border-color: rgba(245,197,24,0.6);
  box-shadow: 0 4px 14px rgba(0,0,0,0.6), 0 0 20px rgba(245,197,24,0.3);
}

.pf-stat-icon {
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.pf-stat-label {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text-dim);
  font-weight: bold;
  text-transform: uppercase;
}
.pf-stat-val {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text);
  font-weight: bold;
  text-shadow: 0 0 8px rgba(245,197,24,0.3);
}

/* Responsive del stat arco */
@media (max-width: 600px) {
  .pf-avatar-stage {
    width: min(340px, 95vw);
    max-height: 42vh;
  }
  .pf-stat { padding: 7px 10px; min-width: 52px; }
  .pf-stat-icon { font-size: 15px; }
  .pf-stat-label { font-size: 8px; letter-spacing: 1.5px; }
  .pf-stat-val { font-size: 15px; }
  .pf-avatar-emoji { font-size: 80px; }
}

/* ─── NIVEL + XP ─── */
.pf-level-section {
  width: min(420px, 90vw);
  margin-top: 8px;
  padding: 10px 18px;
  background: linear-gradient(180deg, rgba(15,10,5,0.85) 0%, rgba(8,5,3,0.9) 100%);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  animation: pfFadeIn 0.8s ease-out 0.4s both;
}
.pf-level-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}
.pf-level-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--text-dim);
  font-weight: bold;
}
.pf-level-num {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--gold);
  font-weight: bold;
  text-shadow: 0 0 18px rgba(245,197,24,0.6);
}

.pf-xp-wrap {
  position: relative;
}
.pf-xp-bar {
  width: 100%;
  height: 10px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 5px;
  overflow: hidden;
}
.pf-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #c9a84c 0%, #fde047 50%, #c9a84c 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  transition: width 0.9s ease-out;
  animation: pfXpShimmer 3s linear infinite;
  box-shadow: 0 0 10px rgba(245,197,24,0.5);
}
@keyframes pfXpShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.pf-xp-text {
  font-family: var(--font-title);
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 4px;
  letter-spacing: 1px;
}

/* ─── MINI CARDS (stats rápidos) ─── */
.pf-mini-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: min(420px, 95vw);
  margin-top: 14px;
  animation: pfFadeIn 0.8s ease-out 0.6s both;
}
.pf-mini-card {
  padding: 12px 8px;
  background: linear-gradient(180deg, rgba(20,12,6,0.85) 0%, rgba(10,6,3,0.9) 100%);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  backdrop-filter: blur(4px);
}
.pf-mini-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 8px 18px rgba(0,0,0,0.6), 0 0 18px rgba(245,197,24,0.25);
}
.pf-mini-card:active {
  transform: scale(0.97);
}
.pf-mini-icon {
  font-size: 22px;
  margin-bottom: 2px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.pf-mini-val {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text);
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.pf-mini-lbl {
  font-family: var(--font-title);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  font-weight: bold;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .pf-mini-icon { font-size: 18px; }
  .pf-mini-val  { font-size: 13px; }
  .pf-mini-lbl  { font-size: 8px; letter-spacing: 1px; }
  .pf-mini-card { padding: 10px 6px; }
}

/* ─── CTA BUTTON "VER EQUIPAMIENTO" ─── */
.pf-cta-btn {
  width: min(420px, 95vw);
  margin-top: 16px;
  padding: 16px 22px;
  background: linear-gradient(180deg, #d4af37 0%, #8b6a19 100%);
  color: #1a0f04;
  border: 2px solid #fde047;
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow:
    0 6px 20px rgba(0,0,0,0.7),
    0 0 28px rgba(245,197,24,0.35),
    inset 0 1px 0 rgba(255,255,255,0.4);
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  animation: pfFadeIn 0.8s ease-out 0.8s both, pfCtaPulse 2.5s ease-in-out infinite;
}
@keyframes pfCtaPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.7), 0 0 28px rgba(245,197,24,0.35), inset 0 1px 0 rgba(255,255,255,0.4); }
  50%      { box-shadow: 0 6px 20px rgba(0,0,0,0.7), 0 0 40px rgba(245,197,24,0.65), inset 0 1px 0 rgba(255,255,255,0.4); }
}
.pf-cta-btn:hover {
  transform: translateY(-2px);
}
.pf-cta-btn:active {
  transform: scale(0.97);
}
.pf-cta-icon {
  font-size: 22px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.pf-cta-arrow {
  font-size: 22px;
  font-weight: bold;
  margin-left: auto;
}

/* ══════════════════════════════════════════════════════════════
   v121 HF43 — Tab Mazo: resaltar cartas del mazo activo
   ══════════════════════════════════════════════════════════════ */

.card-grid-wrapper.in-active-deck {
  position: relative;
}
.card-grid-wrapper.in-active-deck > .tcg-card,
.card-grid-wrapper.in-active-deck > div > .tcg-card {
  outline: 3px solid #22c55e;
  outline-offset: -3px;
  box-shadow: 0 0 18px rgba(34,197,94,0.6), 0 0 30px rgba(34,197,94,0.35);
  border-radius: 8px;
}
.card-in-deck-marker {
  position: absolute;
  top: 6px;
  right: 6px;
  background: linear-gradient(180deg, #22c55e 0%, #14532d 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: bold;
  border: 1px solid #86efac;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 5;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Sección de colección dentro del tab-deck */
.deck-coll-grid {
  margin-bottom: 20px;
}

/* ══════════════════════════════════════════════════════════════
   v121 HF44 — DC display en header + deck builder v2 + skins btn
   ══════════════════════════════════════════════════════════════ */

/* ─── DC DISPLAY EN HEADER (reemplaza stats bar) ─── */
.hq-dc-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: linear-gradient(180deg, rgba(245,197,24,0.15) 0%, rgba(139,106,25,0.1) 100%);
  border: 1.5px solid var(--gold);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  min-width: 70px;
  justify-content: center;
  box-shadow: 0 0 12px rgba(245,197,24,0.15);
}
.hq-dc-display:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(245,197,24,0.25) 0%, rgba(139,106,25,0.15) 100%);
  box-shadow: 0 0 22px rgba(245,197,24,0.35);
}
.hq-dc-display:active { transform: scale(0.97); }
.hq-dc-icon {
  font-size: 18px;
  filter: drop-shadow(0 0 4px rgba(245,197,24,0.6));
}
.hq-dc-value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: bold;
  color: var(--gold);
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(245,197,24,0.4);
}
@media (max-width: 600px) {
  .hq-dc-display {
    padding: 6px 10px;
    min-width: 56px;
    gap: 4px;
  }
  .hq-dc-icon { font-size: 15px; }
  .hq-dc-value { font-size: 13px; }
}

/* ─── DECK BUILDER V2 (rediseño TCG moderno) ─── */
.deck-builder-v2 {
  background: linear-gradient(180deg, rgba(20,12,6,0.95) 0%, rgba(10,6,3,0.98) 100%);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(245,197,24,0.1);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}

.dbv2-deck-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.dbv2-deck-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 2.5px;
  color: var(--gold);
  font-weight: bold;
  text-shadow: 0 0 12px rgba(245,197,24,0.3);
}
.dbv2-deck-count {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--gold);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text);
  font-weight: bold;
  letter-spacing: 1px;
}
.dbv2-deck-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dbv2-deck-actions .btn {
  padding: 7px 12px;
  font-size: 11px;
  letter-spacing: 1.5px;
}

.dbv2-deck-slots {
  min-height: 90px;
  padding: 10px;
  background: rgba(0,0,0,0.4);
  border: 2px dashed rgba(212,175,55,0.3);
  border-radius: 10px;
  transition: border-color 0.2s, background 0.2s;
}
.dbv2-deck-slots.drag-over {
  border-color: var(--gold);
  background: rgba(245,197,24,0.08);
}
.dbv2-deck-slots .deck-slots {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
@media (max-width: 700px) {
  .dbv2-deck-slots .deck-slots {
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
  }
}
@media (max-width: 420px) {
  .dbv2-deck-slots .deck-slots {
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
  }
}

.dbv2-deck-power {
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 10px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
}
.dbv2-deck-power:empty { display: none; }

.dbv2-coll-section {
  margin-top: 6px;
}
.dbv2-coll-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

/* Botón "+ AGREGAR" debajo de cada carta en la colección */
.card-add-to-deck-btn {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #d4af37 0%, #8b6a19 100%);
  color: #1a0f04;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: bold;
  border: 1px solid #fde047;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 10px rgba(245,197,24,0.3);
  pointer-events: none;
  z-index: 5;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.card-grid-wrapper:hover .card-add-to-deck-btn {
  opacity: 1;
}
/* En mobile (sin hover), el botón siempre se ve */
@media (hover: none) {
  .card-add-to-deck-btn {
    opacity: 0.9;
  }
}

/* ─── BOTÓN "SKINS" EN EL BOLSO/EQUIPMENT ─── */
.equip-skins-btn {
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #d4af37 0%, #8b6a19 100%);
  color: #1a0f04;
  border: 2px solid #fde047;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.6),
    0 0 20px rgba(245,197,24,0.3),
    inset 0 1px 0 rgba(255,255,255,0.3);
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.15s, box-shadow 0.2s;
  animation: skinsBtnPulse 2.8s ease-in-out infinite;
}
@keyframes skinsBtnPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.6), 0 0 20px rgba(245,197,24,0.3), inset 0 1px 0 rgba(255,255,255,0.3); }
  50%      { box-shadow: 0 4px 14px rgba(0,0,0,0.6), 0 0 32px rgba(245,197,24,0.55), inset 0 1px 0 rgba(255,255,255,0.3); }
}
.equip-skins-btn:hover {
  transform: translateY(-2px);
}
.equip-skins-btn:active { transform: scale(0.97); }
.esb-icon { font-size: 18px; }
.esb-arrow {
  margin-left: auto;
  font-size: 18px;
  font-weight: bold;
}

/* ══════════════════════════════════════════════════════════════
   v121 HF45 — PvP: skins en avatar, botón salir, fecha historial
   ══════════════════════════════════════════════════════════════ */

/* Avatar del rival en preview — ahora imagen real grande */
.pvp-rival-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--gold);
  background: radial-gradient(circle at center, #2a1a0c 0%, #0a0604 100%);
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  box-shadow: 0 0 20px rgba(245,197,24,0.4), inset 0 0 14px rgba(0,0,0,0.6);
}
.pvp-rival-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

/* Botón SALIR del resultado PvP (estilo rojo sutil) */
.pvp-result-exit-btn {
  background: linear-gradient(180deg, #4a1717 0%, #2a0a0a 100%) !important;
  border-color: #7f1d1d !important;
  color: #fca5a5 !important;
}
.pvp-result-exit-btn:hover {
  background: linear-gradient(180deg, #5a2020 0%, #3a1212 100%) !important;
  border-color: #991b1b !important;
  color: #fecaca !important;
}

/* Columna FECHA en el historial */
.pvp-hist-date {
  font-family: var(--font-title);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Avatar del rival grande en la animación de combate PvP también con skin */
/* (el CSS existente `.pvp-anim-avatar-img` ya cubre este caso) */

/* ══════════════════════════════════════════════════════════════
   v121 HF46 — VIP card en perfil (verde activo / gris apagado)
   ══════════════════════════════════════════════════════════════ */
.pf-vip-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  margin-top: 10px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  min-width: 280px;
  max-width: 420px;
  width: 90%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: pfFadeIn 0.6s ease-out 0.3s both;
}

/* ACTIVO: verde brillante, animado, sin cursor click */
.pf-vip-card.pf-vip-active {
  background: linear-gradient(135deg, rgba(34,197,94,0.25) 0%, rgba(20,83,45,0.35) 100%);
  border: 2px solid #86efac;
  box-shadow:
    0 0 24px rgba(34,197,94,0.5),
    inset 0 0 18px rgba(134,239,172,0.15),
    0 6px 20px rgba(0,0,0,0.4);
}
.pf-vip-card.pf-vip-active .pf-vip-card-icon {
  color: #86efac;
  text-shadow: 0 0 14px rgba(134,239,172,0.8);
  font-size: 32px;
  animation: pfVipCrownFloat 3s ease-in-out infinite;
}
.pf-vip-card.pf-vip-active .pf-vip-card-title {
  color: #86efac;
  text-shadow: 0 0 10px rgba(134,239,172,0.6);
}
.pf-vip-card.pf-vip-active .pf-vip-card-sub {
  color: #bbf7d0;
}
.pf-vip-card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(134,239,172,0.2) 0%, transparent 60%);
  pointer-events: none;
  animation: pfVipCardGlow 4s ease-in-out infinite;
}
@keyframes pfVipCrownFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-3px) rotate(3deg); }
}
@keyframes pfVipCardGlow {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

/* INACTIVO: gris apagado, ícono sin color, CTA "ACTIVAR" */
.pf-vip-card.pf-vip-inactive {
  background: linear-gradient(135deg, rgba(55,55,55,0.3) 0%, rgba(30,30,30,0.5) 100%);
  border: 2px solid rgba(80,80,80,0.5);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  cursor: pointer;
  filter: grayscale(0.9);
  opacity: 0.75;
  transition: filter 0.3s, opacity 0.3s, transform 0.2s;
}
.pf-vip-card.pf-vip-inactive:hover {
  filter: grayscale(0.4);
  opacity: 0.95;
  transform: translateY(-2px);
}
.pf-vip-card.pf-vip-inactive .pf-vip-card-icon {
  color: #666;
  font-size: 30px;
  filter: grayscale(1);
  opacity: 0.5;
}
.pf-vip-card.pf-vip-inactive .pf-vip-card-title {
  color: #888;
  text-shadow: none;
  letter-spacing: 3px;
}
.pf-vip-card.pf-vip-inactive .pf-vip-card-sub {
  color: #666;
}

.pf-vip-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1;
}
.pf-vip-card-title {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 2.5px;
  font-weight: bold;
}
.pf-vip-card-sub {
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.85;
}
.pf-vip-card-cta {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: bold;
  color: var(--gold);
  padding: 6px 12px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: rgba(245,197,24,0.1);
  animation: pfVipCtaPulse 2.5s ease-in-out infinite;
  z-index: 1;
}
@keyframes pfVipCtaPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(245,197,24,0.3); }
  50%      { box-shadow: 0 0 22px rgba(245,197,24,0.7); }
}

@media (max-width: 600px) {
  .pf-vip-card { padding: 10px 14px; gap: 10px; min-width: 240px; }
  .pf-vip-card-title { font-size: 13px; letter-spacing: 2px; }
  .pf-vip-card-sub { font-size: 9px; }
  .pf-vip-card-icon { font-size: 24px !important; }
  .pf-vip-card-cta { font-size: 9px; padding: 5px 9px; letter-spacing: 1.5px; }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF47 — Deck slots rediseñados + menú de acciones de carta
   ══════════════════════════════════════════════════════════════ */

/* Slot del mazo (grid de 10, compacto pero clickeable entero) */
.deck-slot-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 8px 6px 10px;
  background: linear-gradient(180deg, rgba(30,20,12,0.85) 0%, rgba(15,10,6,0.95) 100%);
  border: 1.5px solid rgba(212,175,55,0.4);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 72px;
  overflow: hidden;
}
.deck-slot-v2:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 6px 14px rgba(0,0,0,0.5), 0 0 16px rgba(245,197,24,0.3);
}
.deck-slot-v2:active {
  transform: scale(0.97);
}

.ds-icon {
  font-size: 22px;
  line-height: 1;
  margin-top: 4px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.ds-info {
  text-align: center;
  width: 100%;
  overflow: hidden;
}
.ds-name {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--text);
  font-weight: bold;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  text-transform: uppercase;
}
.ds-meta {
  font-family: var(--font-title);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  margin-top: 1px;
}

/* Botón X de remover — grande, clickeable, siempre visible */
.ds-remove-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 100%);
  color: #fff;
  border: 1.5px solid #fca5a5;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  z-index: 5;
  transition: transform 0.15s, background 0.15s;
}
.ds-remove-btn:hover {
  transform: scale(1.15);
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  box-shadow: 0 0 12px rgba(239,68,68,0.6);
}
.ds-remove-btn:active {
  transform: scale(0.9);
}

/* ─── MENÚ DE ACCIONES SOBRE CARTA ─── */
.card-action-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9800;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.card-action-menu-overlay.visible {
  opacity: 1;
}

.card-action-menu-box {
  max-width: 360px;
  width: 100%;
  background: linear-gradient(180deg, #1a1008 0%, #0a0604 100%);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 22px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.9), 0 0 40px rgba(245,197,24,0.25);
  animation: camBoxIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes camBoxIn {
  from { transform: scale(0.85) translateY(10px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.cam-title {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--gold);
  letter-spacing: 2px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 4px;
  text-shadow: 0 0 12px rgba(245,197,24,0.4);
}
.cam-sub {
  font-family: var(--font-title);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1.5px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.cam-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cam-btn {
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(60,45,25,0.6) 0%, rgba(30,20,10,0.7) 100%);
  color: var(--text);
  border: 1.5px solid rgba(212,175,55,0.4);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1.5px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  text-align: center;
}
.cam-btn:hover {
  transform: translateY(-1px);
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(80,60,30,0.7) 0%, rgba(40,30,15,0.8) 100%);
}
.cam-btn:active { transform: scale(0.97); }

.cam-btn-primary {
  background: linear-gradient(180deg, #d4af37 0%, #8b6a19 100%);
  color: #1a0f04;
  border-color: #fde047;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}
.cam-btn-primary:hover {
  background: linear-gradient(180deg, #e4bf47 0%, #a17a1e 100%);
}

.cam-btn-danger {
  background: linear-gradient(180deg, #991b1b 0%, #5a0f0f 100%);
  color: #fca5a5;
  border-color: #ef4444;
}
.cam-btn-danger:hover {
  background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 100%);
  border-color: #f87171;
}

.cam-btn-sell {
  background: linear-gradient(180deg, #14532d 0%, #052e16 100%);
  color: #86efac;
  border-color: #22c55e;
}
.cam-btn-sell:hover {
  background: linear-gradient(180deg, #166534 0%, #14532d 100%);
  border-color: #4ade80;
}

.cam-btn-cancel {
  background: transparent;
  color: var(--text-dim);
  border-color: rgba(100,100,100,0.4);
  font-size: 11px;
}
.cam-btn-cancel:hover {
  color: var(--text);
  border-color: rgba(150,150,150,0.6);
  background: rgba(255,255,255,0.05);
}

@media (max-width: 420px) {
  .deck-slot-v2 { padding: 6px 4px 8px; min-height: 64px; }
  .ds-icon { font-size: 18px; }
  .ds-name { font-size: 8px; }
  .ds-meta { font-size: 7px; }
  .ds-remove-btn { width: 18px; height: 18px; font-size: 10px; }
  .cam-title { font-size: 15px; }
  .cam-btn { padding: 10px 14px; font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════
   v121 HF48 — Avatares PvP más grandes en combate animado
   ══════════════════════════════════════════════════════════════ */
.pvp-anim-avatar {
  width: 110px !important;
  height: 110px !important;
  font-size: 54px !important;
}
.pvp-anim-avatar-img {
  width: 110px !important;
  height: 110px !important;
}
.pvp-anim-avatar-photo {
  object-position: center 15% !important;
}
@media (max-width: 600px) {
  .pvp-anim-avatar     { width: 80px !important; height: 80px !important; font-size: 40px !important; }
  .pvp-anim-avatar-img { width: 80px !important; height: 80px !important; }
}
/* Rival preview avatar también más grande */
.pvp-rival-avatar {
  width: 120px !important;
  height: 120px !important;
  font-size: 60px !important;
}
.pvp-rival-avatar-img {
  width: 100% !important;
  height: 100% !important;
}

/* ══════════════════════════════════════════════════════════════
   v121 HF50 — Botones Equipar (verde) / Desequipar (rojo) en shop
   ══════════════════════════════════════════════════════════════ */

/* Botón EQUIPAR — verde brillante */
.shop-buy-btn.equip-btn {
  background: linear-gradient(180deg, #16a34a 0%, #14532d 100%) !important;
  border: 2px solid #22c55e !important;
  color: #dcfce7 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 0 16px rgba(34,197,94,0.35);
  transition: all 0.18s ease;
}
.shop-buy-btn.equip-btn:hover {
  background: linear-gradient(180deg, #22c55e 0%, #166534 100%) !important;
  border-color: #4ade80 !important;
  box-shadow: 0 0 24px rgba(74,222,128,0.6);
  transform: translateY(-1px);
}

/* Botón DESEQUIPAR — rojo brillante */
.shop-buy-btn.unequip-btn {
  background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 100%) !important;
  border: 2px solid #ef4444 !important;
  color: #fecaca !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 0 16px rgba(239,68,68,0.4);
  transition: all 0.18s ease;
}
.shop-buy-btn.unequip-btn:hover {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%) !important;
  border-color: #f87171 !important;
  box-shadow: 0 0 24px rgba(248,113,113,0.7);
  transform: translateY(-1px);
}

/* Badge "EQUIPADA" - amarillo brillante con animación */
.equipped-badge {
  background: linear-gradient(135deg, #fde047 0%, #ca8a04 100%) !important;
  color: #422006 !important;
  border: 1.5px solid #fde047 !important;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  box-shadow: 0 0 14px rgba(253,224,71,0.5);
  animation: equippedPulse 2s ease-in-out infinite;
}
@keyframes equippedPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(253,224,71,0.5); }
  50%      { box-shadow: 0 0 22px rgba(253,224,71,0.9); }
}

/* Card equipada - borde dorado destacado */
.skin-card.equipped {
  border: 2px solid #fde047 !important;
  box-shadow:
    0 0 20px rgba(253,224,71,0.35),
    inset 0 0 8px rgba(253,224,71,0.1) !important;
}

/* ══════════════════════════════════════════════════════════════
   v121 HF53 — Boton ampliar bolso + UI scrolleable
   ══════════════════════════════════════════════════════════════ */

.bag-expand-container {
  margin-top: 10px;
  padding: 0 8px;
}
.bag-expand-btn {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(212,175,55,0.18) 0%, rgba(139,107,28,0.30) 100%);
  border: 2px solid var(--gold, #D4AF37);
  border-radius: 10px;
  color: var(--gold, #D4AF37);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.18s, background 0.18s;
  box-shadow: 0 0 12px rgba(212,175,55,0.18);
}
.bag-expand-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(212,175,55,0.55);
  background: linear-gradient(135deg, rgba(212,175,55,0.30) 0%, rgba(178,142,38,0.45) 100%);
}
.bag-expand-btn:active { transform: scale(0.98); }
.be-icon { font-size: 20px; line-height: 1; }
.be-text {
  text-align: left;
  font-size: 13px;
  letter-spacing: 1.5px;
}
.be-cost {
  background: rgba(0,0,0,0.4);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.5px;
}
.be-progress {
  font-size: 9px;
  color: var(--text-dim, #999);
  font-family: var(--font-title);
}
.bag-expand-maxed {
  text-align: center;
  padding: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--text-dim, #999);
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(212,175,55,0.4);
  border-radius: 8px;
}

/* HF53: hacer que el bag con muchos slots sea scrolleable */
.equip-bag-grid {
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.equip-bag-grid::-webkit-scrollbar { width: 6px; }
.equip-bag-grid::-webkit-scrollbar-thumb {
  background: rgba(212,175,55,0.4);
  border-radius: 3px;
}

@media (max-width: 600px) {
  .bag-expand-btn {
    grid-template-columns: auto 1fr auto;
    font-size: 11px;
    padding: 8px 10px;
  }
  .be-progress { display: none; }
  .be-text { font-size: 12px; }
}