@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Bebas+Neue&family=M+PLUS+Rounded+1c:wght@400;700;800&family=Permanent+Marker&display=swap');

/* ── PART COLOR PALETTES ──────────────────────────────────────────────────── */
:root {
  /* Phantom Blood */
  --pb1: #3055A1; --pb2: #ADACBC; --pb3: #111B2F; --pb4: #49485E;
  /* Battle Tendency */
  --bt1: #952F58; --bt2: #DF9330; --bt3: #711E3F; --bt4: #915D19;
  /* Stardust Crusaders */
  --sc1: #57508F; --sc2: #B7A972; --sc3: #2D2854; --sc4: #5C5330;
  /* Diamond is Unbreakable */
  --du1: #5E8CB8; --du2: #F599A3; --du3: #31577A; --du4: #AD5862;
  /* Vento Aureo */
  --va1: #E15FB6; --va2: #D4BA50; --va3: #801B5F; --va4: #8E7C32;
  /* Stone Ocean */
  --so1: #2F93AD; --so2: #8FAC84; --so3: #1A5A6B; --so4: #3B5432;
  /* Steel Ball Run */
  --sbr1: #B1844A; --sbr2: #7A8B54; --sbr3: #75451E; --sbr4: #2B4A32;
  /* JoJolion */
  --jjl1: #53A599; --jjl2: #F8A1E8; --jjl3: #297469; --jjl4: #914E85;
  /* The JoJoLands */
  --tjl1: #19236D; --tjl2: #C787AB; --tjl3: #0E1234; --tjl4: #851957;

  /* ── Global UI tokens ── */
  --bg:          #0C0A14;
  --bg2:         #12101E;
  --bg3:         #1A1728;
  --accent:      #E15FB6;
  --accent2:     #57508F;
  --gold:        #D4BA50;
  --gold-light:  #F5E080;
  --gold-dark:   #8E7C32;
  --pink:        #F599A3;
  --teal:        #53A599;
  --text:        #EDE8F5;
  --text-dim:    #7A6E90;
  --border:      rgba(225,95,182,0.18);
  --border2:     rgba(87,80,143,0.3);

  --stat-a: #FF4466;
  --stat-b: #FF8C42;
  --stat-c: #FFD166;
  --stat-d: #06D6A0;
  --stat-e: #118AB2;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'M PLUS Rounded 1c', sans-serif;
  overflow-x: hidden;
}

/* Halftone dot texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(225,95,182,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* Diagonal speed lines in corners */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(
      -55deg,
      transparent,
      transparent 18px,
      rgba(87,80,143,0.025) 18px,
      rgba(87,80,143,0.025) 19px
    );
  pointer-events: none;
  z-index: 0;
}

/* ── HEADER ── */
header {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 60px 20px 50px;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(87,80,143,0.25) 0%, rgba(225,95,182,0.12) 40%, transparent 70%);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--accent2), var(--accent), var(--gold), var(--teal)) 1;
}

/* Big ghost kanji behind title */
.header-bg-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(100px, 20vw, 260px);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(225,95,182,0.07);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0.05em;
}

.header-eyebrow {
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(11px, 2vw, 14px);
  letter-spacing: 0.6em;
  color: var(--teal);
  text-transform: uppercase;
  margin-bottom: 12px;
  animation: fadeInDown 0.5s ease;
}

.header-title {
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(52px, 10vw, 120px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, var(--gold) 0%, var(--accent) 45%, var(--accent2) 80%, var(--teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
  animation: fadeInDown 0.5s ease 0.1s both;
  text-shadow: none;
  /* outline glow */
  filter: drop-shadow(0 0 24px rgba(225,95,182,0.35));
}

.header-sub {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: clamp(12px, 2vw, 15px);
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  animation: fadeInDown 0.5s ease 0.2s both;
}

.header-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
  animation: fadeInDown 0.5s ease 0.3s both;
}
.header-ornament::before,
.header-ornament::after {
  content: '';
  flex: 1;
  max-width: 180px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.ornament-diamond {
  width: 12px; height: 12px;
  background: var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 24px var(--accent), 0 0 48px rgba(225,95,182,0.3);
  animation: pulseDiamond 2s ease infinite;
}
@keyframes pulseDiamond {
  0%,100% { box-shadow: 0 0 16px var(--accent), 0 0 40px rgba(225,95,182,0.25); }
  50%      { box-shadow: 0 0 32px var(--accent), 0 0 60px rgba(225,95,182,0.5); }
}

/* ── APP ── */
.app {
  position: relative;
  z-index: 1;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── NAV ── */
.nav-section {
  display: flex;
  border-bottom: 2px solid var(--border2);
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12,10,20,0.96);
  backdrop-filter: blur(16px);
  gap: 4px;
}

.nav-tab {
  font-family: 'Bebas Neue', cursive;
  font-size: 18px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  padding: 16px 36px;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  position: relative;
  transition: color 0.2s;
}
.nav-tab::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: left;
}
.nav-tab:hover { color: var(--text); }
.nav-tab.active { color: var(--accent); }
.nav-tab.active::after { transform: scaleX(1); }

/* ── SECTIONS ── */
.section { display: none; padding: 40px 0; }
.section.active { display: block; }

/* ── SEARCH ── */
.search-bar-wrapper {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 200px;
  background: var(--bg2);
  border: 2px solid var(--border2);
  color: var(--text);
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 20px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  border-radius: 2px;
}
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225,95,182,0.12), inset 0 0 20px rgba(225,95,182,0.04);
}
.search-input::placeholder { color: var(--text-dim); font-weight: 400; }

.filter-toggle-btn {
  background: var(--bg2);
  border: 2px solid var(--border2);
  color: var(--text-dim);
  font-family: 'Bebas Neue', cursive;
  font-size: 16px;
  letter-spacing: 0.2em;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  border-radius: 2px;
}
.filter-toggle-btn:hover,
.filter-toggle-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(225,95,182,0.08);
  box-shadow: 0 0 16px rgba(225,95,182,0.15);
}

.filter-active-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-size: 11px;
  font-weight: 900;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  letter-spacing: 0;
}

/* ── FILTER PANEL ── */
.filter-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 0;
}
.filter-panel.open {
  max-height: 600px;
  margin-bottom: 24px;
}

.filter-panel-inner {
  background: var(--bg2);
  border: 2px solid var(--border2);
  border-top: 3px solid var(--accent);
  padding: 28px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 160px;
}
.filter-group-stats {
  flex: 1;
  min-width: 320px;
}

.filter-group-label {
  font-family: 'Bebas Neue', cursive;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Parties */
.filter-parties {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-partie-btn {
  background: var(--bg3);
  border: 2px solid var(--border2);
  color: var(--text-dim);
  font-family: 'Bebas Neue', cursive;
  font-size: 13px;
  letter-spacing: 0.15em;
  padding: 7px 16px;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 2px;
}
.filter-partie-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-partie-btn.active {
  background: rgba(225,95,182,0.18);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(225,95,182,0.2);
}

/* Score slider */
.filter-range-val {
  color: var(--accent);
  font-family: 'Bebas Neue', cursive;
  font-size: 16px;
  margin-left: 8px;
}
.filter-slider-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.slider-bound {
  font-size: 11px;
  color: var(--text-dim);
  font-family: 'Bebas Neue', cursive;
  letter-spacing: 0.1em;
  min-width: 14px;
  text-align: center;
}
.filter-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) calc(var(--pct, 0%)), rgba(255,255,255,0.08) calc(var(--pct, 0%)));
  outline: none;
  cursor: pointer;
  border-radius: 2px;
}
.filter-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
  transform: rotate(45deg);
  border-radius: 0;
  box-shadow: 0 0 8px rgba(225,95,182,0.6);
}
.filter-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
  border-radius: 0;
}

/* Stats grid */
.fsg-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(87,80,143,0.12);
}
.fsg-row:last-child { border-bottom: none; }
.fsg-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
  width: 80px;
  flex-shrink: 0;
}
.fsg-btns {
  display: flex;
  gap: 5px;
}
.fsg-btn {
  width: 32px; height: 32px;
  font-family: 'Bebas Neue', cursive;
  font-size: 14px;
  border: 2px solid currentColor;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
  opacity: 0.28;
  border-radius: 2px;
}
.fsg-btn:hover { opacity: 0.65; transform: scale(1.1) rotate(-2deg); }
.fsg-btn.active {
  opacity: 1;
  background: rgba(255,255,255,0.1);
  transform: scale(1.1) rotate(-2deg);
  box-shadow: 0 0 12px currentColor;
}
.fsg-btn.stat-A { color: var(--stat-a); }
.fsg-btn.stat-B { color: var(--stat-b); }
.fsg-btn.stat-C { color: var(--stat-c); }
.fsg-btn.stat-D { color: var(--stat-d); }
.fsg-btn.stat-E { color: var(--stat-e); }

/* Reset */
.filter-reset-btn {
  align-self: flex-end;
  background: none;
  border: 2px solid rgba(255,68,102,0.3);
  color: rgba(255,68,102,0.7);
  font-family: 'Bebas Neue', cursive;
  font-size: 14px;
  letter-spacing: 0.2em;
  padding: 9px 18px;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: auto;
  border-radius: 2px;
}
.filter-reset-btn:hover {
  border-color: var(--stat-a);
  color: var(--stat-a);
  background: rgba(255,68,102,0.08);
  box-shadow: 0 0 16px rgba(255,68,102,0.2);
}

.results-count {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.results-count span { color: var(--accent); }

/* ── STANDS GRID ── */
.stands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

/* ── STAND CARD ── */
.stand-card {
  background: var(--bg2);
  border: 2px solid var(--border2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s, border-color 0.25s;
  animation: cardIn 0.5s ease both;
  display: flex;
  flex-direction: column;
  border-radius: 3px;
}

/* Colored top border per part — uses CSS custom property set by JS on the element */
.stand-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--part-accent, linear-gradient(90deg, var(--accent2), var(--accent)));
  opacity: 1;
  z-index: 3;
}

/* Manga speed-line corner burst */
.stand-card::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(225,95,182,0.04) 0deg 8deg,
      transparent 8deg 16deg
    );
  pointer-events: none;
  transition: opacity 0.3s;
  opacity: 0.5;
  border-radius: 50%;
}

.stand-card:hover {
  transform: translateY(-4px) rotate(-0.3deg);
  border-color: var(--accent);
  box-shadow:
    0 16px 40px rgba(0,0,0,0.6),
    0 0 0 1px rgba(225,95,182,0.25),
    0 0 30px rgba(225,95,182,0.1);
  z-index: 2;
}
.stand-card:hover::after { opacity: 1; }

/* ── Card header ── */
.card-header {
  padding: 18px 20px 14px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid rgba(87,80,143,0.18);
  position: relative;
}

.card-number {
  font-family: 'Bebas Neue', cursive;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.3em;
  line-height: 1;
  margin-bottom: 5px;
}

.card-emoji {
  font-size: 34px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  filter: drop-shadow(0 2px 8px rgba(225,95,182,0.4));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stand-card:hover .card-emoji { transform: scale(1.15) rotate(-5deg); }

.card-title-block { flex: 1; min-width: 0; }

.card-name {
  font-family: 'Bebas Neue', cursive;
  font-size: 20px;
  letter-spacing: 0.05em;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 6px;
  transition: color 0.2s;
}
.stand-card:hover .card-name { color: var(--accent); }

.card-desc {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ── Battle cry ── */
.card-cry {
  font-family: 'Permanent Marker', cursive;
  font-size: 10px;
  color: var(--pink);
  text-shadow: 0 0 16px rgba(245,153,163,0.5);
  padding: 9px 20px;
  border-bottom: 1px solid rgba(87,80,143,0.12);
  min-height: 36px;
  display: flex;
  align-items: center;
  letter-spacing: 0.05em;
}

/* ── Bottom: stats + radar ── */
.card-bottom {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}

.card-stats {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.mini-stat {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-stat-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
  white-space: nowrap;
  width: 32px;
  flex-shrink: 0;
}

.mini-stat-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.mini-stat-bar-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  border-radius: 2px;
}

.stat-badge {
  font-family: 'Bebas Neue', cursive;
  font-size: 13px;
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  flex-shrink: 0;
  border-radius: 2px;
}

.stat-A { color: var(--stat-a); border-color: rgba(255,68,102,0.4); background: rgba(255,68,102,0.1); }
.stat-B { color: var(--stat-b); border-color: rgba(255,140,66,0.4); background: rgba(255,140,66,0.1); }
.stat-C { color: var(--stat-c); border-color: rgba(255,209,102,0.4); background: rgba(255,209,102,0.1); }
.stat-D { color: var(--stat-d); border-color: rgba(6,214,160,0.4); background: rgba(6,214,160,0.1); }
.stat-E { color: var(--stat-e); border-color: rgba(17,138,178,0.4); background: rgba(17,138,178,0.1); }

/* Radar */
.card-radar-wrap {
  flex-shrink: 0;
  width: 130px; height: 130px;
  padding: 8px;
  opacity: 0.75;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-radar-wrap svg { width: 100%; height: 100%; }
.stand-card:hover .card-radar-wrap { opacity: 1; }

/* Footer */
.card-footer {
  padding: 8px 20px;
  border-top: 1px solid rgba(87,80,143,0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-capacites-count {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.card-view-more {
  font-family: 'Bebas Neue', cursive;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-transform: uppercase;
  transition: color 0.2s;
}
.stand-card:hover .card-view-more { color: var(--accent); }

/* ── MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,6,16,0.9);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(12px);
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--bg2);
  border: 2px solid rgba(87,80,143,0.5);
  width: 100%;
  max-width: 960px;
  height: calc(100vh - 48px);
  max-height: 780px;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(225,95,182,0.15),
    0 0 80px rgba(225,95,182,0.12),
    0 24px 80px rgba(0,0,0,0.85);
  animation: modalIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 4px;
}

/* colored top accent bar on modal */
.modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent2), var(--accent), var(--gold));
  z-index: 10;
}
.modal::after { display: none; }

.modal-header {
  padding: 28px 32px 22px;
  border-bottom: 1px solid rgba(87,80,143,0.25);
  position: relative;
  background: linear-gradient(160deg, rgba(87,80,143,0.12) 0%, transparent 50%);
  flex-shrink: 0;
}

.modal-number {
  font-family: 'Bebas Neue', cursive;
  font-size: 12px;
  letter-spacing: 0.45em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-name {
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 400;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 60%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 8px;
  padding-right: 48px;
}

.modal-desc {
  font-size: 13.5px;
  color: var(--text-dim);
  max-width: 580px;
  line-height: 1.65;
}

.modal-cry {
  font-family: 'Permanent Marker', cursive;
  font-size: 12px;
  color: var(--pink);
  text-shadow: 0 0 20px rgba(245,153,163,0.6);
  margin-top: 10px;
  animation: pulse 2s ease infinite;
}

.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  background: none;
  border: 2px solid rgba(87,80,143,0.4);
  color: var(--text-dim);
  font-size: 16px;
  width: 36px; height: 36px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  z-index: 5;
  border-radius: 50%;
}
.modal-close:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(225,95,182,0.12);
  transform: rotate(90deg);
}

.modal-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.modal-capacites {
  padding: 24px 32px;
  border-right: 1px solid rgba(87,80,143,0.2);
  overflow-y: auto;
  scroll-behavior: smooth;
}

.modal-capacites::-webkit-scrollbar { width: 4px; }
.modal-capacites::-webkit-scrollbar-track { background: transparent; }
.modal-capacites::-webkit-scrollbar-thumb { background: rgba(225,95,182,0.4); border-radius: 2px; }

.modal-stats {
  padding: 20px 22px;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.modal-stats::-webkit-scrollbar { width: 4px; }
.modal-stats::-webkit-scrollbar-track { background: transparent; }
.modal-stats::-webkit-scrollbar-thumb { background: rgba(225,95,182,0.4); border-radius: 2px; }

.section-title {
  font-family: 'Bebas Neue', cursive;
  font-size: 14px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(225,95,182,0.4), transparent);
}

.capacite-item {
  padding: 16px 0;
  border-bottom: 1px solid rgba(87,80,143,0.15);
}
.capacite-item:last-child { border-bottom: none; }

.capacite-name {
  font-family: 'Bebas Neue', cursive;
  font-size: 17px;
  letter-spacing: 0.05em;
  color: var(--text);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}
.capacite-name::before {
  content: '◆';
  color: var(--accent);
  font-size: 8px;
  flex-shrink: 0;
}
.capacite-item:hover .capacite-name { color: var(--accent); }

.capacite-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.65;
  padding-left: 16px;
}

.capacite-gif {
  margin: 10px 0 0 16px;
  border: 2px solid var(--border2);
  max-width: 220px;
  height: auto;
  display: block;
  border-radius: 3px;
}

.modal-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.modal-stat-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
  width: 60px;
  flex-shrink: 0;
}

.stat-bar-wrap {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
}

.stat-bar-fill { height: 100%; transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 2px; }
.stat-bar-A { background: linear-gradient(90deg, #FF2244, #FF4466); width: 95%; }
.stat-bar-B { background: linear-gradient(90deg, #FF6B1A, #FF8C42); width: 75%; }
.stat-bar-C { background: linear-gradient(90deg, #FFBB00, #FFD166); width: 55%; }
.stat-bar-D { background: linear-gradient(90deg, #00C080, #06D6A0); width: 35%; }
.stat-bar-E { background: linear-gradient(90deg, #0880AA, #118AB2); width: 15%; }

.modal-stat-badge {
  font-family: 'Bebas Neue', cursive;
  font-size: 14px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid currentColor;
  flex-shrink: 0;
  border-radius: 2px;
}

.score-block {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(87,80,143,0.25);
  text-align: center;
}
.score-value {
  font-family: 'Bebas Neue', cursive;
  font-size: 64px;
  line-height: 1;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, var(--accent2), var(--accent), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.score-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 0.25em;
  margin-top: 2px;
  text-transform: uppercase;
}
.score-pts-max {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.15em;
}

/* ── RADAR in modal ── */
.modal-radar-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 20px;
  background: radial-gradient(ellipse at center, rgba(87,80,143,0.12) 0%, rgba(0,0,0,0.3) 70%);
  border: 1px solid rgba(87,80,143,0.25);
  padding: 0;
  position: relative;
  overflow: visible;
  border-radius: 3px;
}
.modal-radar-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* ── COMPARE ── */
.compare-intro {
  text-align: center;
  padding: 20px 0 40px;
  color: var(--text-dim);
  font-size: 15px;
  letter-spacing: 0.08em;
}

.compare-selectors {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: end;
  margin-bottom: 40px;
}

.compare-select-label {
  font-family: 'Bebas Neue', cursive;
  font-size: 13px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  display: block;
}

select.compare-select {
  width: 100%;
  background: var(--bg2);
  border: 2px solid var(--border2);
  color: var(--text);
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 16px;
  cursor: pointer;
  outline: none;
  appearance: none;
  transition: border-color 0.2s;
  border-radius: 2px;
}
select.compare-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225,95,182,0.12);
}

.vs-badge {
  font-family: 'Bebas Neue', cursive;
  font-size: 40px;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  padding-bottom: 4px;
  filter: drop-shadow(0 0 16px rgba(225,95,182,0.5));
  animation: pulse 2s ease infinite;
}

.compare-result { display: none; animation: fadeInDown 0.4s ease; }
.compare-result.show { display: block; }

.compare-overall {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-bottom: 2px;
}
.overall-card {
  padding: 20px 24px;
  background: var(--bg2);
  border: 2px solid var(--border2);
  text-align: center;
  border-radius: 3px;
}
.overall-card-name {
  font-family: 'Bebas Neue', cursive;
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: .2em;
  margin-bottom: 6px;
}
.overall-score {
  font-family: 'Bebas Neue', cursive;
  font-size: 52px;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent2), var(--accent), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.overall-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: 6px;
}
.overall-winner-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  font-family: 'Bebas Neue', cursive;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 2px solid;
  border-radius: 2px;
}
.winner-gold { background: rgba(212,186,80,0.15); color: var(--gold-light); border-color: rgba(212,186,80,0.4); }
.winner-red  { background: rgba(255,68,102,0.12); color: var(--stat-a);    border-color: rgba(255,68,102,0.3); }
.winner-draw { background: transparent; color: var(--text-dim); border-color: var(--border2); }

/* stat table */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  border: 2px solid var(--border2);
  border-radius: 3px;
  overflow: hidden;
}

.compare-col { padding: 24px 20px; }

.compare-col-title {
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(14px,2vw,20px);
  letter-spacing: 0.05em;
  color: var(--text);
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.2;
}

.compare-middle {
  background: var(--bg3);
  border-left: 1px solid rgba(87,80,143,0.2);
  border-right: 1px solid rgba(87,80,143,0.2);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 24px 0;
}

.compare-stat-label-center {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
  text-align: center;
  padding: 12px 4px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(87,80,143,0.1);
  width: 100%;
}

.compare-stat-row {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(87,80,143,0.1);
  padding: 0 14px;
  gap: 8px;
}
.compare-stat-row.left  { justify-content: flex-end; }
.compare-stat-row.right { justify-content: flex-start; }
.compare-stat-row.winner-row { background: rgba(225,95,182,0.06); }

.compare-stat-badge-lg {
  font-family: 'Bebas Neue', cursive;
  font-size: 22px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid currentColor;
  flex-shrink: 0;
  border-radius: 2px;
}

.compare-bar {
  height: 3px;
  flex: 1;
  background: rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.compare-bar .fill {
  position: absolute;
  top: 0; height: 100%;
  transition: width 0.8s cubic-bezier(0.16,1,0.3,1);
  border-radius: 2px;
}
.compare-bar.left  .fill { right: 0; }
.compare-bar.right .fill { left: 0; }

.compare-caps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 2px;
}
.compare-cap-col {
  padding: 24px;
  background: var(--bg2);
  border: 2px solid var(--border2);
  border-radius: 3px;
}
.cap-tag {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  border: 1px solid var(--border2);
  margin: 4px 4px 4px 0;
  transition: all 0.2s;
  cursor: default;
  border-radius: 2px;
}
.cap-tag:hover { border-color: var(--accent); color: var(--accent); }

/* ── COMPARE RADAR ── */
.compare-radar-block {
  background: var(--bg2);
  border: 2px solid var(--border2);
  margin-bottom: 2px;
  padding: 28px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 3px;
}

.compare-radar-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.legend-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-name {
  font-family: 'Bebas Neue', cursive;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.compare-radar-svg {
  display: flex;
  justify-content: center;
  max-width: 500px;
  width: 100%;
}
.compare-radar-svg svg {
  width: 100%;
  height: auto;
}

/* ── LOADING ── */
.loading {
  text-align: center;
  padding: 80px 20px;
  font-family: 'Bebas Neue', cursive;
  font-size: 16px;
  letter-spacing: 0.4em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.loading::after {
  content: '...';
  animation: dots 1.5s steps(3, end) infinite;
}
@keyframes dots {
  0%   { content: '.'; }
  33%  { content: '..'; }
  66%  { content: '...'; }
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-dim);
  grid-column: 1/-1;
}
.empty-state-icon { font-size: 48px; margin-bottom: 16px; }
.empty-state-text {
  font-family: 'Bebas Neue', cursive;
  font-size: 18px;
  letter-spacing: 0.3em;
}

/* ── ANIMATIONS ── */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.94) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(87,80,143,0.6); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  .modal {
    height: calc(100vh - 32px);
    max-height: none;
  }
  .modal-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .modal-capacites { padding: 20px; border-right: none; border-bottom: 1px solid rgba(87,80,143,0.2); }
  .modal-stats { padding: 16px 20px; max-height: none; }
  .modal-header { padding: 20px 20px 16px; }
  .compare-selectors { grid-template-columns: 1fr; }
  .vs-badge { display: none; }
  .compare-caps { grid-template-columns: 1fr; }
  .compare-overall { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
  .card-radar { display: none; }
}

/* ── PART ACCENT CLASSES (used by JS) ── */
/* Part 1 — Phantom Blood */
.part-1 { --part-accent: linear-gradient(90deg, var(--pb1), var(--pb2)); border-color: rgba(48,85,161,0.5) !important; }
.part-1:hover { border-color: var(--pb1) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 24px rgba(48,85,161,0.25) !important; }
.part-1 .card-name { color: var(--pb2); }
.part-1:hover .card-name { color: #d0d0e8 !important; }

/* Part 2 — Battle Tendency */
.part-2 { --part-accent: linear-gradient(90deg, var(--bt1), var(--bt2)); border-color: rgba(149,47,88,0.5) !important; }
.part-2:hover { border-color: var(--bt1) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 24px rgba(223,147,48,0.2) !important; }
.part-2 .card-name { color: var(--bt2); }

/* Part 3 — Stardust Crusaders */
.part-3 { --part-accent: linear-gradient(90deg, var(--sc1), var(--sc2)); border-color: rgba(87,80,143,0.5) !important; }
.part-3:hover { border-color: var(--sc1) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 24px rgba(87,80,143,0.3) !important; }
.part-3 .card-name { color: var(--sc2); }

/* Part 4 — Diamond is Unbreakable */
.part-4 { --part-accent: linear-gradient(90deg, var(--du1), var(--du2)); border-color: rgba(94,140,184,0.5) !important; }
.part-4:hover { border-color: var(--du2) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 24px rgba(245,153,163,0.25) !important; }
.part-4 .card-name { color: var(--du2); }

/* Part 5 — Vento Aureo */
.part-5 { --part-accent: linear-gradient(90deg, var(--va1), var(--va2)); border-color: rgba(225,95,182,0.45) !important; }
.part-5:hover { border-color: var(--va1) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 24px rgba(225,95,182,0.3) !important; }
.part-5 .card-name { color: var(--va2); }

/* Part 6 — Stone Ocean */
.part-6 { --part-accent: linear-gradient(90deg, var(--so1), var(--so2)); border-color: rgba(47,147,173,0.45) !important; }
.part-6:hover { border-color: var(--so1) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 24px rgba(47,147,173,0.3) !important; }
.part-6 .card-name { color: var(--so2); }

/* Part 7 — Steel Ball Run */
.part-7 { --part-accent: linear-gradient(90deg, var(--sbr1), var(--sbr2)); border-color: rgba(177,132,74,0.45) !important; }
.part-7:hover { border-color: var(--sbr1) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 24px rgba(177,132,74,0.3) !important; }
.part-7 .card-name { color: var(--sbr1); }

/* Part 8 — JoJolion */
.part-8 { --part-accent: linear-gradient(90deg, var(--jjl1), var(--jjl2)); border-color: rgba(83,165,153,0.45) !important; }
.part-8:hover { border-color: var(--jjl2) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 24px rgba(248,161,232,0.3) !important; }
.part-8 .card-name { color: var(--jjl2); }

/* Part 9 — The JoJoLands */
.part-9 { --part-accent: linear-gradient(90deg, var(--tjl1), var(--tjl2)); border-color: rgba(25,35,109,0.7) !important; }
.part-9:hover { border-color: var(--tjl2) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 24px rgba(199,135,171,0.3) !important; }
.part-9 .card-name { color: var(--tjl2); }
/* ════════════════════════════════════════════════════════════════════════════
   DUEL MODE — V3 ANIMATIONS ÉPIQUES
   ════════════════════════════════════════════════════════════════════════════ */

/* ── KEYFRAMES GLOBAUX ───────────────────────────────────────────────────────*/
@keyframes particleBurst {
  0%   { transform: translate(0,0) scale(1); opacity:1; }
  100% { transform: translate(var(--dx,0px), var(--dy,-60px)) scale(0); opacity:0; }
}
@keyframes duelTabPulse {
  0%,100% { box-shadow:0 0 8px rgba(255,60,60,0.3); }
  50%     { box-shadow:0 0 22px rgba(255,60,60,0.65); }
}
@keyframes standFloat {
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-5px) rotate(1deg); }
}
@keyframes critFloat {
  0%  { opacity:0; transform:translateY(0) scale(0.3) rotate(-8deg); }
  15% { opacity:1; transform:translateY(-12px) scale(1.6) rotate(3deg); }
  55% { opacity:1; transform:translateY(-40px) scale(1.2); }
  100%{ opacity:0; transform:translateY(-65px) scale(0.9); }
}
@keyframes dmgFloat {
  0%  { opacity:0; transform:translateY(0) scale(0.6); }
  15% { opacity:1; transform:translateY(-10px) scale(1.15); }
  75% { opacity:1; transform:translateY(-32px); }
  100%{ opacity:0; transform:translateY(-52px) scale(0.85); }
}
@keyframes hpPulse {
  0%,100%{ box-shadow:0 0 8px rgba(211,47,47,0.4); }
  50%    { box-shadow:0 0 22px rgba(211,47,47,1); }
}
@keyframes screenShake {
  0%,100%{ transform:none; }
  10%{ transform:translateX(-7px) rotate(-0.6deg); }
  20%{ transform:translateX(7px) rotate(0.6deg); }
  30%{ transform:translateX(-5px); }
  40%{ transform:translateX(5px); }
  55%{ transform:translateX(-3px); }
  70%{ transform:translateX(3px); }
  85%{ transform:translateX(-1px); }
}
@keyframes attackLungeA {
  0%  { transform:none; filter:brightness(1); }
  30% { transform:translateX(18px) scale(1.18); filter:brightness(1.8) drop-shadow(0 0 12px rgba(255,215,0,0.9)); }
  65% { transform:translateX(8px) scale(1.06); }
  100%{ transform:none; filter:brightness(1); }
}
@keyframes attackLungeB {
  0%  { transform:none; filter:brightness(1); }
  30% { transform:translateX(-18px) scale(1.18); filter:brightness(1.8) drop-shadow(0 0 12px rgba(255,80,80,0.9)); }
  65% { transform:translateX(-8px) scale(1.06); }
  100%{ transform:none; filter:brightness(1); }
}
@keyframes fighterHit {
  0%  { filter:brightness(1); transform:none; }
  8%  { filter:brightness(3) invert(0.4) saturate(2); transform:translateX(5px) scale(0.96); }
  22% { filter:brightness(0.4) saturate(0); transform:translateX(-4px); }
  45% { filter:brightness(1.6); transform:translateX(3px); }
  70% { filter:brightness(1.2); transform:translateX(-1px); }
  100%{ filter:brightness(1); transform:none; }
}
@keyframes introBurst {
  0%  { filter:brightness(1); }
  20% { filter:brightness(4) saturate(3); }
  45% { filter:brightness(2) saturate(1.5); }
  100%{ filter:brightness(1); }
}
@keyframes victoryPulse {
  0%  { filter:brightness(1); }
  25% { filter:brightness(2.5) hue-rotate(25deg) saturate(2); }
  100%{ filter:brightness(1.3) saturate(1.4); }
}
@keyframes defeatPulse {
  0%  { filter:brightness(1); }
  25% { filter:brightness(0.2) saturate(0); }
  100%{ filter:brightness(0.6) saturate(0.2); }
}
@keyframes spReadyPulse {
  0%,100%{ box-shadow:0 0 4px rgba(255,215,0,0.3); }
  50%    { box-shadow:0 0 16px rgba(255,215,0,0.9), 0 0 30px rgba(255,150,0,0.5); }
}
@keyframes ultimateGlow {
  0%,100%{ box-shadow:0 0 10px rgba(255,215,0,0.25); }
  50%    { box-shadow:0 0 28px rgba(255,215,0,0.65), 0 0 50px rgba(255,100,0,0.3); }
}
@keyframes narrativeIn {
  from{ opacity:0.2; transform:translateX(-6px); }
  to  { opacity:1; transform:none; }
}
@keyframes dramaticPulse {
  0%,100%{ text-shadow:0 0 10px rgba(255,215,0,0.3); }
  50%    { text-shadow:0 0 25px rgba(255,215,0,0.8); }
}
@keyframes blockSlide {
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
@keyframes correctPop {
  0% { transform:scale(1); }
  50%{ transform:scale(1.06); box-shadow:0 0 15px rgba(76,175,80,0.6); }
  100%{ transform:scale(1); }
}
@keyframes wrongShake {
  0%,100%{ transform:none; }
  20%{ transform:translateX(-6px); }
  60%{ transform:translateX(6px); }
}
@keyframes comboPop {
  0%  { opacity:0; transform:translate(-50%,-50%) scale(0.4); }
  15% { opacity:1; transform:translate(-50%,-58%) scale(1.25); }
  55% { opacity:1; transform:translate(-50%,-65%) scale(1); }
  85% { opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-78%) scale(0.85); }
}
@keyframes logEntry {
  from{ opacity:0; transform:translateX(-5px); }
  to  { opacity:1; transform:none; }
}
@keyframes resultReveal {
  from{ opacity:0; transform:scale(0.82) translateY(20px); }
  to  { opacity:1; transform:none; }
}
@keyframes victoryGlow {
  from{ text-shadow:0 0 20px rgba(255,215,0,0.5); }
  to  { text-shadow:0 0 55px rgba(255,215,0,1), 0 0 90px rgba(255,140,0,0.5); }
}
@keyframes gifReveal {
  from{ opacity:0; transform:scale(0.88); }
  to  { opacity:1; transform:scale(1); }
}
@keyframes cryPop {
  from{ transform:scale(0) rotate(-8deg); opacity:0; }
  to  { transform:scale(1) rotate(0); opacity:1; }
}
@keyframes hintBlink {
  0%,100%{ opacity:0.25; }
  50%    { opacity:0.6; }
}
@keyframes gifBarIn {
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}
@keyframes cryBubbleIn {
  from{ opacity:0; transform:scale(0.7) translateY(5px); }
  to  { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes momentumShift {
  0% { filter:brightness(1); }
  50%{ filter:brightness(1.4); }
  100%{ filter:brightness(1); }
}
@keyframes thinkDot {
  0%,100%{ opacity:0.3; transform:scale(0.8); }
  50%    { opacity:1; transform:scale(1.3); }
}
@keyframes lightningFlicker {
  from{ opacity:1; text-shadow:0 0 6px #ff0; }
  to  { opacity:0.5; text-shadow:0 0 22px #ffcc00; }
}
@keyframes vsPulse {
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.18); }
}
@keyframes btnShimmer {
  0%  { background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}
@keyframes statusIn {
  from{ opacity:0; transform:scale(0.7); }
  to  { opacity:1; transform:scale(1); }
}

/* ── DUEL TAB ─────────────────────────────────────────────────────────────── */
.duel-tab {
  background: linear-gradient(135deg,#1a0808,#2d0f0f) !important;
  border-color: rgba(255,60,60,0.4) !important;
  color: #ff6b6b !important;
  animation: duelTabPulse 2.5s ease-in-out infinite;
}
.duel-tab.active,.duel-tab:hover {
  background: linear-gradient(135deg,#3d0f0f,#5a1515) !important;
  border-color: rgba(255,80,80,0.8) !important;
  color: #ff9999 !important;
  box-shadow: 0 0 22px rgba(255,60,60,0.45), inset 0 0 12px rgba(255,60,60,0.1) !important;
}

/* ── SCREENS ─────────────────────────────────────────────────────────────── */
#duel-container { width:100%; }
.duel-screen { display:none; }
.duel-screen.active { display:block; }

/* ── SETUP ────────────────────────────────────────────────────────────────── */
.duel-setup-title {
  text-align:center;
  font-family:'Cinzel Decorative','Cinzel',serif;
  font-size:clamp(0.95rem,2.8vw,1.5rem);
  color:var(--accent);
  letter-spacing:3px;
  padding:20px 10px 16px;
  text-shadow:0 0 22px rgba(201,168,76,0.5);
}
.duel-lightning { display:inline-block; animation:lightningFlicker 1.2s ease-in-out infinite alternate; }
.duel-setup-selectors {
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:16px; align-items:start; padding:0 8px 24px;
}
@media(max-width:600px){
  .duel-setup-selectors{ grid-template-columns:1fr; }
  .duel-vs-mega{ margin:8px auto; }
}
.duel-setup-slot {
  background:rgba(0,0,0,0.3); border:1px solid rgba(201,168,76,0.15);
  border-radius:10px; padding:16px;
  display:flex; flex-direction:column; gap:10px;
}
.duel-setup-slot-label {
  font-family:'Cinzel',serif; font-size:0.7rem;
  color:var(--accent); letter-spacing:3px; text-align:center;
}
.duel-setup-select {
  background:rgba(0,0,0,0.5); border:1px solid rgba(201,168,76,0.3);
  border-radius:6px; color:var(--text); padding:8px 10px;
  font-family:'Cinzel',serif; font-size:0.78rem; width:100%; cursor:pointer;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.duel-setup-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 12px rgba(201,168,76,0.3); }
.duel-vs-mega {
  display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel Decorative','Cinzel',serif; font-size:2rem;
  color:#ff6b6b; text-shadow:0 0 22px rgba(255,60,60,0.7);
  padding-top:40px; animation:vsPulse 1.5s ease-in-out infinite;
}
.duel-setup-preview { min-height:80px; opacity:0; transform:translateY(6px); transition:opacity 0.4s,transform 0.4s; }
.duel-setup-preview.loaded { opacity:1; transform:none; }
.duel-prev-name { font-family:'Cinzel',serif; font-size:0.9rem; color:var(--accent); font-weight:700; margin-bottom:6px; }
.duel-prev-stats { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:5px; }
.duel-prev-score { font-size:0.72rem; color:var(--text-dim); margin-bottom:5px; }
.duel-prev-abilities { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
.duel-prev-ab {
  font-size:0.62rem; padding:2px 7px; border-radius:10px;
  background:rgba(201,168,76,0.1); border:1px solid rgba(201,168,76,0.25);
  color:var(--accent);
}
.duel-prev-desc { font-size:0.73rem; color:var(--text-dim); line-height:1.4; }
.duel-prev-cry  { font-style:italic; color:#ff9999; font-size:0.8rem; margin-top:4px; }

.duel-start-btn {
  display:block; width:calc(100% - 16px); margin:0 8px 24px;
  padding:16px 32px; cursor:pointer;
  background:linear-gradient(135deg,#7b0000,#c62828,#d32f2f,#c62828,#7b0000);
  background-size:250% 100%;
  border:2px solid rgba(255,100,100,0.5); border-radius:8px;
  color:#fff; font-family:'Cinzel Decorative','Cinzel',serif;
  font-size:clamp(0.85rem,2.4vw,1.05rem); letter-spacing:3px;
  text-shadow:0 0 12px rgba(255,200,200,0.5);
  box-shadow:0 4px 24px rgba(180,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.1);
  animation:btnShimmer 2.5s linear infinite;
  transition:transform 0.2s, box-shadow 0.2s;
}
.duel-start-btn:hover:not(:disabled) { transform:translateY(-2px) scale(1.01); box-shadow:0 8px 32px rgba(200,0,0,0.65); }
.duel-start-btn:active:not(:disabled){ transform:scale(0.98); }
.duel-start-btn:disabled { opacity:0.35; cursor:not-allowed; animation:none; }

/* ── ARENA ────────────────────────────────────────────────────────────────── */
.duel-arena {
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:10px; align-items:start; padding:16px 12px;
  position:relative; overflow:hidden;
  min-height:200px; border-radius:14px;
  border:1px solid rgba(201,168,76,0.12);
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(120,20,20,0.1) 0%, transparent 65%),
    repeating-linear-gradient(90deg,transparent,transparent 38px,rgba(201,168,76,0.018) 38px,rgba(201,168,76,0.018) 39px),
    repeating-linear-gradient(0deg,transparent,transparent 38px,rgba(201,168,76,0.018) 38px,rgba(201,168,76,0.018) 39px);
}
/* Ambient glow */
.duel-arena::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 18% 50%, rgba(201,168,76,0.07) 0%, transparent 45%),
    radial-gradient(circle at 82% 50%, rgba(200,40,40,0.07) 0%, transparent 45%);
  animation:arenaBreath 5s ease-in-out infinite;
}
@keyframes arenaBreath {
  0%,100%{ opacity:0.4; } 50%{ opacity:1; }
}
.duel-arena::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,0.18) 0%,transparent 28%,transparent 72%,rgba(0,0,0,0.28) 100%);
}
.duel-arena.duel-intro-flash { animation:introBurst 0.9s ease; }
.duel-arena.victory-flash    { animation:victoryPulse 1.1s ease forwards; }
.duel-arena.defeat-flash     { animation:defeatPulse 1.1s ease forwards; }
.duel-arena.screen-shake     { animation:screenShake 0.6s ease; }

/* ── FIGHTERS ────────────────────────────────────────────────────────────── */
.duel-fighter { display:flex; flex-direction:column; gap:7px; position:relative; z-index:1; padding:8px; }
.duel-fighter-a { align-items:flex-start; }
.duel-fighter-b { align-items:flex-end; }

.duel-fighter-name {
  font-family:'Cinzel',serif; font-size:clamp(0.6rem,1.7vw,0.82rem);
  color:var(--accent); font-weight:700; letter-spacing:1px;
  text-shadow:0 0 10px rgba(201,168,76,0.4);
}
.duel-fighter-b .duel-fighter-name { text-align:right; }

/* HP BAR */
.duel-hp-bar-wrap { display:flex; align-items:center; gap:5px; width:100%; }
.duel-fighter-b .duel-hp-bar-wrap { flex-direction:row-reverse; }
.duel-hp-label { font-family:'Cinzel',serif; font-size:0.58rem; color:var(--text-dim); letter-spacing:1px; flex-shrink:0; }
.duel-hp-track {
  flex:1; height:11px; background:rgba(0,0,0,0.45); border-radius:6px;
  overflow:hidden; border:1px solid rgba(255,255,255,0.05); position:relative;
}
.duel-hp-fill {
  height:100%; border-radius:6px; position:relative;
  transition:width 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
}
.duel-hp-fill::after {
  content:''; position:absolute; top:0; left:0; right:0; height:40%;
  background:rgba(255,255,255,0.18); border-radius:6px 6px 0 0;
}
.hp-fill-a { background:linear-gradient(90deg,#1b5e20,#43a047,#81c784); box-shadow:0 0 10px rgba(67,160,71,0.55); }
.hp-fill-b { background:linear-gradient(90deg,#b71c1c,#e53935,#ef9a9a); box-shadow:0 0 10px rgba(229,57,53,0.55); float:right; }
.duel-hp-fill.hp-warning { background:linear-gradient(90deg,#e65100,#fb8c00,#ffb74d) !important; box-shadow:0 0 10px rgba(251,140,0,0.65) !important; }
.duel-hp-fill.hp-critical {
  background:linear-gradient(90deg,#7b0000,#c62828,#f44336) !important;
  box-shadow:0 0 14px rgba(198,40,40,0.85) !important;
  animation:hpPulse 0.55s ease-in-out infinite !important;
}
.duel-hp-val { font-size:0.62rem; color:var(--text-dim); min-width:44px; text-align:right; flex-shrink:0; }
.duel-fighter-b .duel-hp-val { text-align:left; }

/* SP BAR */
.duel-sp-bar-wrap { display:flex; align-items:center; gap:5px; width:100%; }
.duel-fighter-b .duel-sp-bar-wrap { flex-direction:row-reverse; }
.duel-sp-label { font-family:'Cinzel',serif; font-size:0.52rem; color:#80cbc4; letter-spacing:1px; flex-shrink:0; }
.duel-sp-track {
  flex:1; height:7px; background:rgba(0,0,0,0.4); border-radius:4px;
  overflow:visible; border:1px solid rgba(128,203,196,0.18); position:relative;
}
.duel-sp-track.sp-ready { animation:spReadyPulse 1s ease-in-out infinite; border-color:rgba(255,215,0,0.5); }
.duel-sp-fill {
  height:100%; border-radius:4px;
  transition:width 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.sp-fill-a { background:linear-gradient(90deg,#00695c,#26a69a,#80cbc4); box-shadow:0 0 8px rgba(38,166,154,0.5); }
.sp-fill-b { background:linear-gradient(90deg,#880e4f,#c2185b,#f48fb1); box-shadow:0 0 8px rgba(194,24,91,0.5); float:right; }
.duel-sp-val { font-size:0.52rem; color:#80cbc4; min-width:36px; text-align:right; flex-shrink:0; }
.duel-fighter-b .duel-sp-val { text-align:left; }

/* STATUS BADGES */
.duel-status-row { display:flex; flex-wrap:wrap; gap:4px; min-height:18px; }
.duel-fighter-b .duel-status-row { justify-content:flex-end; }
.duel-status-badge {
  font-size:0.58rem; padding:2px 6px; border-radius:10px;
  border:1px solid; display:inline-flex; align-items:center; gap:3px;
  animation:statusIn 0.3s ease; cursor:help; white-space:nowrap;
}

/* STAND EMOJI */
.duel-fighter-stand {
  width:70px; height:70px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle,rgba(201,168,76,0.12) 0%,transparent 70%);
  border:1px solid rgba(201,168,76,0.18); position:relative; overflow:hidden;
}
.duel-fighter-stand::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 34% 34%,rgba(255,255,255,0.1) 0%,transparent 55%);
}
.duel-emoji-stand { font-size:2.2rem; filter:drop-shadow(0 0 8px rgba(201,168,76,0.5)); animation:standFloat 3.5s ease-in-out infinite; }

/* Fighter animations */
.duel-fighter-a.fighter-attack-anim .duel-fighter-stand { animation:attackLungeA 0.45s ease; }
.duel-fighter-b.fighter-attack-anim .duel-fighter-stand { animation:attackLungeB 0.45s ease; }
.duel-fighter.fighter-hit { animation:fighterHit 0.55s ease; }

/* Cry bubble */
.duel-cry-bubble {
  font-family:'Permanent Marker',cursive,serif;
  font-size:clamp(0.65rem,2vw,0.82rem);
  color:#ffee58; text-shadow:0 0 12px rgba(255,238,88,0.8),1px 1px 0 rgba(0,0,0,0.9);
  opacity:0; transform:scale(0.8) translateY(4px);
  transition:opacity 0.2s,transform 0.2s;
  pointer-events:none; max-width:130px;
  word-break:break-word; text-align:center; padding:4px; letter-spacing:1px;
}
.duel-cry-bubble.visible { opacity:1; transform:scale(1) translateY(0); animation:cryBubbleIn 0.3s ease; }

/* ── MOMENTUM BAR ────────────────────────────────────────────────────────── */
.duel-momentum-wrap {
  display:flex; flex-direction:column; gap:4px;
  padding:8px 12px 6px; border-bottom:1px solid rgba(201,168,76,0.08);
  position:relative; z-index:1;
}
.duel-momentum-label {
  font-family:'Cinzel',serif; font-size:0.58rem;
  color:var(--text-dim); letter-spacing:2px; text-align:center;
}
#momentumLabel { color:var(--accent); font-size:0.62rem; letter-spacing:2px; transition:color 0.4s; }
.duel-momentum-track {
  height:8px; background:rgba(0,0,0,0.4); border-radius:4px;
  overflow:hidden; border:1px solid rgba(201,168,76,0.12); position:relative;
}
#momentumBar {
  height:100%; width:100%; position:relative;
  background:linear-gradient(90deg,#ef5350 0%,#ef9a9a 40%,rgba(200,200,200,0.15) 50%,#81c784 60%,#2e7d32 100%);
  transition:none;
}
#momentumBar::after {
  content:''; position:absolute; top:0; bottom:0; width:3px;
  background:rgba(255,255,255,0.9); border-radius:2px;
  left:calc(var(--momentum,50%) - 1.5px);
  box-shadow:0 0 6px rgba(255,255,255,0.8);
  transition:left 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

/* ── ARENA CENTER ────────────────────────────────────────────────────────── */
.duel-arena-center {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; padding:8px 4px; position:relative; z-index:2;
}
.duel-round-badge {
  font-family:'Cinzel Decorative','Cinzel',serif; font-size:0.68rem;
  color:var(--accent); letter-spacing:2px; padding:4px 10px;
  border:1px solid rgba(201,168,76,0.3); border-radius:20px;
  background:rgba(0,0,0,0.45); text-align:center; white-space:nowrap;
}
.duel-turn-indicator { font-size:0.62rem; letter-spacing:1px; text-align:center; white-space:nowrap; }
.turn-player { color:#81c784; font-weight:700; text-shadow:0 0 9px rgba(129,199,132,0.7); }
.turn-enemy  { color:#ef9a9a; font-weight:700; text-shadow:0 0 9px rgba(239,154,154,0.7); }

/* Attack flash */
.duel-attack-flash { position:absolute; inset:0; pointer-events:none; border-radius:14px; opacity:0; transition:opacity 0.1s; }
.duel-attack-flash.player-flash {
  background:radial-gradient(ellipse at 15% 50%,rgba(255,215,0,0.3) 0%,transparent 55%);
  opacity:1; animation:flashOut 0.75s ease forwards;
}
.duel-attack-flash.enemy-flash {
  background:radial-gradient(ellipse at 85% 50%,rgba(255,50,50,0.3) 0%,transparent 55%);
  opacity:1; animation:flashOut 0.75s ease forwards;
}
@keyframes flashOut { 0%{opacity:1;} 100%{opacity:0;} }

/* ── DAMAGE NUMBERS ──────────────────────────────────────────────────────── */
.duel-damage-number {
  font-family:'Cinzel Decorative','Cinzel',serif;
  font-size:1.35rem; font-weight:900; pointer-events:none; z-index:99;
  animation:dmgFloat 1.8s ease forwards;
  text-shadow:0 2px 5px rgba(0,0,0,0.9),0 0 12px currentColor; letter-spacing:1px;
}
.dmg-player { color:#ffd700; }
.dmg-enemy  { color:#ff5252; }
.dmg-self   { color:#69f0ae; }
.crit-number { font-size:2rem !important; animation:critFloat 1.8s ease forwards !important; color:#ff9800 !important; }

/* ── COMBO POP ────────────────────────────────────────────────────────────── */
.duel-combo-pop {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); z-index:100;
  text-align:center; pointer-events:none;
  animation:comboPop 2s ease forwards;
}
.combo-title { font-family:'Cinzel Decorative','Cinzel',serif; font-size:1.1rem; font-weight:900; letter-spacing:3px; text-shadow:0 0 22px currentColor; }
.combo-sub   { font-size:0.75rem; opacity:0.8; margin-top:2px; font-style:italic; }
.combo-level-2 .combo-title { color:#aed581; }
.combo-level-3 .combo-title { color:#fff176; }
.combo-level-4 .combo-title { color:#ffb74d; }
.combo-level-5 .combo-title { color:#ff8a65; }
.combo-level-6 .combo-title { color:#ff5252; }
.combo-level-7 .combo-title { color:#ffd700; font-size:1.5rem; text-shadow:0 0 30px #ffd700,0 0 60px #ff9800; }

/* ── ARENA PARTICLES ─────────────────────────────────────────────────────── */
.arena-particle { border-radius:50%; pointer-events:none; }

/* ── NARRATIVE ────────────────────────────────────────────────────────────── */
.duel-narrative-zone {
  margin:8px 0; padding:12px 16px;
  background:rgba(0,0,0,0.38);
  border-left:3px solid rgba(201,168,76,0.55);
  border-radius:0 8px 8px 0; position:relative;
}
.duel-narrative-zone::before {
  content:'◆'; position:absolute; left:-9px; top:50%;
  transform:translateY(-50%); color:var(--accent); font-size:0.78rem;
  background:var(--bg); padding:2px 0;
}
.duel-narrative-text { font-size:clamp(0.78rem,2vw,0.88rem); color:var(--text); line-height:1.55; min-height:20px; }
.duel-narrative-text.typing { animation:narrativeIn 0.35s ease; }
.duel-narrative-text.dramatic {
  color:#ffd700 !important; font-size:clamp(0.88rem,2.2vw,1rem);
  animation:narrativeIn 0.35s ease, dramaticPulse 1.5s ease-in-out infinite !important;
}

/* ── ACTION ZONE ─────────────────────────────────────────────────────────── */
.duel-action-zone { margin:8px 0; }
.duel-action-header {
  display:flex; align-items:center; justify-content:space-between;
  font-family:'Cinzel',serif; font-size:0.62rem; color:var(--accent);
  letter-spacing:2px; padding:8px 0 8px;
  border-bottom:1px solid rgba(201,168,76,0.14); margin-bottom:10px;
}
.sp-display {
  color:#80cbc4; font-size:0.72rem; background:rgba(38,166,154,0.1);
  padding:2px 8px; border-radius:10px; border:1px solid rgba(38,166,154,0.28);
}

/* ── QUESTION BLOCK ──────────────────────────────────────────────────────── */
.duel-question-block {
  background:rgba(0,0,0,0.28); border:1px solid rgba(201,168,76,0.15);
  border-radius:10px; padding:14px; animation:blockSlide 0.3s ease;
}
.duel-question-label { font-family:'Cinzel',serif; font-size:0.6rem; color:var(--accent); letter-spacing:3px; margin-bottom:7px; }
.duel-question-flavor { font-size:0.7rem; color:var(--text-dim); font-style:italic; margin-bottom:7px; padding:3px 8px; border-left:2px solid rgba(201,168,76,0.3); }
.duel-question-text   { font-size:clamp(0.8rem,2vw,0.9rem); color:var(--text); line-height:1.5; margin-bottom:9px; }
.duel-question-reward { font-size:0.7rem; color:#ffd700; background:rgba(255,215,0,0.07); border:1px solid rgba(255,215,0,0.2); border-radius:4px; padding:4px 8px; margin-bottom:9px; }
.duel-answers { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media(max-width:480px){ .duel-answers { grid-template-columns:1fr; } }
.duel-answer-btn {
  background:rgba(0,0,0,0.38); border:1px solid rgba(201,168,76,0.22);
  border-radius:7px; color:var(--text); padding:10px 12px;
  font-size:0.82rem; font-family:inherit; cursor:pointer;
  transition:all 0.2s; text-align:left;
}
.duel-answer-btn:hover:not(:disabled) { background:rgba(201,168,76,0.1); border-color:rgba(201,168,76,0.5); transform:translateX(3px); }
.duel-answer-btn:disabled { cursor:default; }
.duel-answer-btn.correct { background:rgba(27,94,32,0.35) !important; border-color:#43a047 !important; color:#a5d6a7 !important; animation:correctPop 0.4s ease; }
.duel-answer-btn.wrong   { background:rgba(183,28,28,0.35) !important; border-color:#e53935 !important; color:#ef9a9a !important; animation:wrongShake 0.4s ease; }

/* ── ABILITY GRID ────────────────────────────────────────────────────────── */
.duel-ability-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(135px,1fr)); gap:8px; }
@media(max-width:500px){ .duel-ability-grid { grid-template-columns:1fr 1fr; } }

.duel-ability-btn {
  display:flex; flex-direction:column; gap:3px;
  background:rgba(0,0,0,0.32); border:1px solid rgba(201,168,76,0.18);
  border-radius:9px; color:var(--text); padding:10px 10px 8px;
  font-family:inherit; cursor:pointer; text-align:left;
  transition:all 0.2s; position:relative; overflow:hidden;
}
/* Shimmer effect on hover */
.duel-ability-btn::before {
  content:''; position:absolute; top:0; left:-100%; width:55%;
  height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.05),transparent);
  transition:left 0.45s ease;
}
.duel-ability-btn:hover:not(:disabled)::before { left:155%; }
.duel-ability-btn:hover:not(:disabled) {
  background:rgba(201,168,76,0.09); border-color:rgba(201,168,76,0.48);
  transform:translateY(-3px); box-shadow:0 5px 18px rgba(0,0,0,0.35);
}
.duel-ability-btn:active:not(:disabled) { transform:translateY(0); }
.duel-ability-btn.ability-locked { opacity:0.35; cursor:not-allowed; filter:grayscale(0.5); }
.duel-ability-btn.ability-ultimate {
  border-color:rgba(255,215,0,0.42) !important;
  background:linear-gradient(135deg,rgba(255,140,0,0.09),rgba(255,215,0,0.05)) !important;
  animation:ultimateGlow 2.2s ease-in-out infinite;
}
.duel-ability-btn.ability-ultimate:hover:not(:disabled) { box-shadow:0 0 32px rgba(255,215,0,0.55) !important; border-color:#ffd700 !important; }

.ability-icon { font-size:1.25rem; }
.ability-name { font-family:'Cinzel',serif; font-size:0.66rem; color:var(--accent); font-weight:700; letter-spacing:0.5px; line-height:1.2; }
.ability-dmg  { font-size:0.68rem; color:var(--text-dim); line-height:1.3; }
.ability-footer { margin-top:3px; display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.ability-sp-cost { font-size:0.58rem; color:#80cbc4; background:rgba(38,166,154,0.14); border:1px solid rgba(38,166,154,0.28); padding:1px 5px; border-radius:8px; }
.ability-sp-cost.insufficient { color:#ef9a9a; background:rgba(244,67,54,0.14); border-color:rgba(244,67,54,0.28); }
.ability-sp-gain { font-size:0.58rem; color:#a5d6a7; background:rgba(76,175,80,0.1); border:1px solid rgba(76,175,80,0.24); padding:1px 5px; border-radius:8px; }
.ability-cooldown { font-size:0.55rem; color:#ffb74d; background:rgba(255,183,77,0.12); border:1px solid rgba(255,183,77,0.28); padding:1px 5px; border-radius:8px; }

.bonus-label {
  font-size:0.6rem; color:#ffd700; background:rgba(255,215,0,0.12);
  border:1px solid rgba(255,215,0,0.3); padding:2px 6px; border-radius:8px;
  animation:blinkBonus 0.8s ease-in-out infinite;
}
@keyframes blinkBonus { 0%,100%{opacity:1;} 50%{opacity:0.55;} }

/* Enemy thinking */
.duel-enemy-thinking {
  display:flex; align-items:center; gap:10px; padding:14px;
  color:var(--text-dim); font-style:italic; font-size:0.85rem;
}
.thinking-dots { display:flex; gap:5px; }
.thinking-dots span {
  width:7px; height:7px; background:rgba(239,154,154,0.75); border-radius:50%;
  animation:thinkDot 1.2s ease-in-out infinite;
}
.thinking-dots span:nth-child(2){ animation-delay:0.22s; }
.thinking-dots span:nth-child(3){ animation-delay:0.44s; }

/* ── GIF OVERLAY — FULL CINEMATIC ────────────────────────────────────────── */
.duel-gif-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.94);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  opacity:0; transition:opacity 0.35s ease; overflow:hidden;
}
.duel-gif-overlay.visible { opacity:1; }
.duel-gif-overlay.fade-out { opacity:0; pointer-events:none; }

/* Cinematic bars */
.gif-bar {
  position:absolute; left:0; right:0; height:clamp(40px,7vh,80px);
  background:#000; z-index:2; transform-origin:center;
}
.gif-bar-top { top:0; animation:gifBarIn 0.35s ease; }
.gif-bar-bot { bottom:0; animation:gifBarIn 0.35s ease; }

/* Particles */
.gif-particles { position:absolute; inset:0; pointer-events:none; z-index:1; }
.gif-particle {
  position:absolute; border-radius:50%; pointer-events:none;
  animation:particleBurst 1.5s ease-out forwards;
  --dx: calc((var(--rand, 0.5) - 0.5) * 160px);
  --dy: calc(-40px - var(--rand2, 0.5) * 80px);
}

.duel-gif-standname {
  font-family:'Cinzel Decorative','Cinzel',serif;
  font-size:clamp(0.9rem,3.5vw,1.5rem); color:var(--accent);
  letter-spacing:5px; text-align:center;
  text-shadow:0 0 25px rgba(201,168,76,0.8);
  z-index:3; position:relative;
  animation:titleReveal 0.5s ease;
}
@keyframes titleReveal {
  from{ opacity:0; transform:translateY(-14px) scale(0.88); letter-spacing:10px; }
  to  { opacity:1; transform:none; letter-spacing:5px; }
}

.duel-gif-img-wrap {
  z-index:3; position:relative;
  width:min(700px,92vw);
  display:flex; align-items:center; justify-content:center;
}
.duel-gif-main {
  width:100%; height:auto; max-height:72vh;
  object-fit:contain; border-radius:10px; display:block;
  box-shadow:0 0 60px rgba(201,168,76,0.4),0 0 120px rgba(0,0,0,0.9);
  animation:gifReveal 0.4s ease;
  border:2px solid rgba(201,168,76,0.3);
}
@keyframes gifReveal { from{opacity:0;transform:scale(0.88);} to{opacity:1;transform:scale(1);} }

.duel-gif-cry {
  font-family:'Permanent Marker',cursive,serif;
  font-size:clamp(1.4rem,5vw,2.4rem); color:#ffd700;
  text-shadow:0 0 25px rgba(255,215,0,0.9),2px 2px 0 rgba(0,0,0,0.95);
  text-align:center; letter-spacing:3px; z-index:3; position:relative;
  animation:cryPop 0.45s cubic-bezier(0.34,1.56,0.64,1);
}

.duel-gif-hint {
  font-size:0.68rem; color:rgba(255,255,255,0.22); letter-spacing:2px;
  z-index:3; position:relative; animation:hintBlink 2s ease-in-out infinite;
}

/* ── LOG ─────────────────────────────────────────────────────────────────── */
.duel-log-wrap {
  margin-top:12px; background:rgba(0,0,0,0.22);
  border:1px solid rgba(201,168,76,0.08); border-radius:8px; overflow:hidden;
}
.duel-log-title {
  font-family:'Cinzel',serif; font-size:0.58rem; color:var(--text-dim);
  letter-spacing:3px; padding:6px 10px; border-bottom:1px solid rgba(201,168,76,0.08);
}
.duel-log {
  max-height:130px; overflow-y:auto; padding:6px;
  display:flex; flex-direction:column; gap:2px;
  scrollbar-width:thin; scrollbar-color:rgba(201,168,76,0.2) transparent;
}
.duel-log-entry {
  font-size:0.7rem; padding:3px 7px; border-radius:3px;
  border-left:2px solid transparent; animation:logEntry 0.22s ease; line-height:1.4;
}
.duel-log-entry.player   { color:#a5d6a7; border-left-color:#43a047; background:rgba(67,160,71,0.06); }
.duel-log-entry.enemy    { color:#ef9a9a; border-left-color:#e53935; background:rgba(229,57,53,0.06); }
.duel-log-entry.system   { color:var(--text-dim); border-left-color:rgba(201,168,76,0.28); }
.duel-log-entry.critical { color:#ffb74d; border-left-color:#ff9800; background:rgba(255,152,0,0.09); font-weight:700; }

/* ── RESULT SCREEN ───────────────────────────────────────────────────────── */
.duel-result-inner { padding:12px; }
.duel-result-cinematic {
  background:rgba(0,0,0,0.32); border-radius:12px; padding:24px 16px;
  border:1px solid rgba(201,168,76,0.16); text-align:center;
  animation:resultReveal 0.65s cubic-bezier(0.34,1.56,0.64,1);
}
.duel-result-cinematic.victory { border-color:rgba(255,215,0,0.3); background:radial-gradient(ellipse at 50% 0%,rgba(255,215,0,0.09) 0%,rgba(0,0,0,0.32) 70%); }
.duel-result-cinematic.defeat  { border-color:rgba(244,67,54,0.22); background:radial-gradient(ellipse at 50% 0%,rgba(183,28,28,0.07) 0%,rgba(0,0,0,0.32) 70%); }

.duel-result-title { font-family:'Cinzel Decorative','Cinzel',serif; font-size:clamp(1.5rem,6vw,2.6rem); letter-spacing:6px; margin-bottom:8px; }
.duel-result-title.victory { color:#ffd700; animation:victoryGlow 1s ease-in-out infinite alternate; }
.duel-result-title.defeat  { color:#b71c1c; filter:saturate(0.7); }
.duel-result-subtitle { font-size:0.85rem; color:var(--text-dim); font-style:italic; margin-bottom:14px; line-height:1.5; }
.duel-result-winner-stand { font-family:'Cinzel',serif; font-size:1.1rem; color:var(--accent); margin-bottom:5px; }
.duel-result-cry { font-family:'Permanent Marker',cursive,serif; font-size:1.4rem; color:#ffd700; text-shadow:0 0 12px rgba(255,215,0,0.55); margin:10px 0; }

.duel-result-rank { display:inline-block; font-family:'Cinzel Decorative','Cinzel',serif; font-size:0.72rem; letter-spacing:2px; margin:12px 0; padding:6px 16px; border-radius:20px; }
.duel-result-rank span { font-size:1.45rem; margin-left:5px; }
.duel-result-rank.rank-s { background:rgba(255,215,0,0.09); border:1px solid rgba(255,215,0,0.45); color:#ffd700; }
.duel-result-rank.rank-a { background:rgba(156,39,176,0.09); border:1px solid rgba(156,39,176,0.45); color:#ce93d8; }
.duel-result-rank.rank-b { background:rgba(25,118,210,0.09); border:1px solid rgba(25,118,210,0.45); color:#90caf9; }
.duel-result-rank.rank-c { background:rgba(46,125,50,0.09); border:1px solid rgba(46,125,50,0.45); color:#a5d6a7; }
.duel-result-rank.rank-d { background:rgba(249,168,37,0.09); border:1px solid rgba(249,168,37,0.45); color:#ffe082; }
.duel-result-rank.rank-f { background:rgba(100,100,100,0.08); border:1px solid rgba(150,150,150,0.3); color:var(--text-dim); }

.duel-result-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0; }
@media(max-width:400px){ .duel-result-stats-grid { grid-template-columns:repeat(2,1fr); } }
.duel-result-stat { background:rgba(0,0,0,0.26); border:1px solid rgba(201,168,76,0.1); border-radius:7px; padding:10px 6px; text-align:center; }
.duel-result-stat-val { font-family:'Cinzel',serif; font-size:1.1rem; color:var(--accent); font-weight:700; }
.duel-result-stat-label { font-size:0.52rem; color:var(--text-dim); letter-spacing:1px; margin-top:4px; }

.duel-result-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.duel-result-replay-btn {
  padding:12px 24px; border-radius:7px; font-family:'Cinzel',serif;
  font-size:0.78rem; letter-spacing:2px; cursor:pointer; transition:all 0.2s; border:1px solid;
}
.duel-result-replay-btn.primary  { background:linear-gradient(135deg,#7b0000,#c62828); border-color:rgba(255,100,100,0.5); color:#fff; }
.duel-result-replay-btn.primary:hover  { transform:translateY(-2px); box-shadow:0 6px 22px rgba(198,40,40,0.45); }
.duel-result-replay-btn.secondary { background:rgba(0,0,0,0.32); border-color:rgba(201,168,76,0.32); color:var(--accent); }
.duel-result-replay-btn.secondary:hover { background:rgba(201,168,76,0.09); transform:translateY(-1px); }