:root {
  --website-background: #121212;
  --theme-color1: #333333;
  --theme-color2: #363636;
  --website-theme-bg-base:        #0F1012;
  --website-theme-bg-sunken:      #121417;
  --website-theme-bg-surface:     #181B1F;
  --website-theme-bg-surface-alt: #1D2025;
  --website-theme-bg-raised:      #22262C;
  --website-theme-bg-hover:       #262B32;
  --website-theme-bg-active:      #1A1E23;
  --website-theme-bg-accent-blend:#2C3139;
  --website-theme-border-subtle:  #282D33;
  --website-theme-border:         #32383F;
  --website-theme-border-strong:  #3D454D;
  --website-theme-divider:        #2A3036;
  --website-theme-scrollbar:      #343B43;
  --website-theme-shadow-rgb:     0,0,0;
  --website-theme-bg-rgb:         15,16,18;
  --website-theme-glow-rgb:       var(--character-accent1-rgb,255,215,0);
  --website-theme-text-primary:   #F5F7FA;
  --website-theme-text-secondary: #C9CFD6;
  --website-theme-text-dim:       #9098A1;
  --website-theme-text-dark:      #0b0b0b;
  --tab-text-active:              #FFFFFF;
  --website-theme-radius-sm:      6px;
  --website-theme-radius-md:      10px;
  --website-theme-radius-lg:      16px;

  --spectro-accent-dark1: #212121;
  --spectro-accent-dark2: #1a1a1a;
  --spectro-accent-dark3: #2a2a2a;
  --spectro-accent-white: #ffffff;
  --spectro-accent1:      #FFD700;
  --spectro-accent2:      #FFEA00;
  --spectro-accent3:      #FFC107;
  --spectro-accent4:      #FFB300;
  --spectro-accent5:      #f3e120;

  --havoc-accent-dark1: #212121;
  --havoc-accent-dark2: #1a1a1a;
  --havoc-accent-dark3: #2a2a2a;
  --havoc-accent-white: #ffffff;
  --havoc-accent1: #971752;
  --havoc-accent2: #b13b71;
  --havoc-accent3: #c9568a;
  --havoc-accent4: #df7aa7;
  --havoc-accent5: #f4a2c2;

  --glacio-accent-dark1: #0c0c0c;
  --glacio-accent-dark2: #1a1a1a;
  --glacio-accent-dark3: #2a2a2a;
  --glacio-accent-white: #ffffff;
  --glacio-accent1:      #188bb8;
  --glacio-accent2:      #4FC3F7;
  --glacio-accent3:      #0288D1;
  --glacio-accent4:      #0277BD;
  --glacio-accent5:      #5eccff;

  --fusion-accent-dark1: #212121;
  --fusion-accent-dark2: #1a1a1a;
  --fusion-accent-dark3: #2a2a2a;
  --fusion-accent-white: #ffffff;
  --fusion-accent1:      #C9372A;
  --fusion-accent2:      #f14d4a;
  --fusion-accent3:      #D32F2F;
  --fusion-accent4:      #C62828;
  --fusion-accent5:      #ff5f5d;

  --electro-accent-dark1: #212121;
  --electro-accent-dark2: #1a1a1a;
  --electro-accent-dark3: #2a2a2a;
  --electro-accent-white: #ffffff;
  --electro-accent1:      #8d32c5;
  --electro-accent2:      #b466e9;
  --electro-accent3:      #8932cc;
  --electro-accent4:      #8A2BE2;
  --electro-accent5:      #9968e7;

  --aero-accent-dark1: #212121;
  --aero-accent-dark2: #1a1a1a;
  --aero-accent-dark3: #2a2a2a;
  --aero-accent-white: #ffffff;
  --aero-accent1: #7ae0c2;
  --aero-accent2: #51d4b1;
  --aero-accent3: #2dc59d;
  --aero-accent4: #259e7f;
  --aero-accent5: #1d7a63;

  --mat-color-green:  #74ef90;
  --mat-color-blue:   #79d9f0;
  --mat-color-pink:   #f99af6;
  --mat-color-yellow: #eee271;
  --mat-color-purple: #b172f5;
  --mat-color-gray:   #acacac;

  --mat-color-green-dark:  #48c06a;
  --mat-color-green-light: #bff7d0;
  --mat-color-blue-dark:   #2f98d1;
  --mat-color-blue-light:  #d9f6ff;
  --mat-color-pink-dark:   #d06bd9;
  --mat-color-pink-light:  #ffe6fb;
  --mat-color-yellow-dark: #d4c24a;
  --mat-color-yellow-light:#fff8d6;
  --mat-color-purple-dark: #8a4bd9;
  --mat-color-purple-light:#eddcff;
  --mat-color-gray-dark:   #8f8f8f;
  --mat-color-gray-light:  #e9e9e9;

  --six-star-weapon-1: #a30b10;
  --six-star-weapon-2: #c74545;
  --six-star-weapon-3: #6B1A1D;
  --six-star-weapon-4: #1E0B0C;
  --six-star-weapon-rgb: 184,32,37;

  --five-star-weapon-1: #e7de7b;
  --five-star-weapon-2: #f2f0c1;
  --five-star-weapon-3: #d9d49b;
  --five-star-weapon-4: #c1be75;
  --five-star-weapon-rgb: 231,222,123;

  --four-star-weapon-1: #ffbefd;
  --four-star-weapon-2: #ffd6fe;
  --four-star-weapon-3: #f8a3f9;
  --four-star-weapon-4: #e38fe0;
  --four-star-weapon-rgb: 255,190,253;

  --three-star-weapon-1: #a3eafc;
  --three-star-weapon-2: #c5f4fe;
  --three-star-weapon-3: #89d4f5;
  --three-star-weapon-4: #71c2e1;
  --three-star-weapon-rgb: 163,234,252;

  --two-star-weapon-1: #9cf3b0;
  --two-star-weapon-2: #b9fcd2;
  --two-star-weapon-3: #75eda5;
  --two-star-weapon-4: #57d694;
  --two-star-weapon-rgb: 156,243,176;

  --one-star-weapon-1: #c7c7c7;
  --one-star-weapon-2: #e0e0e0;
  --one-star-weapon-3: #a8a8a8;
  --one-star-weapon-4: #bfbfbf;
  --one-star-weapon-rgb: 199,199,199;
}

.character-page.spectro {
  --character-accent-dark1: var(--spectro-accent-dark1);
  --character-accent-dark2: var(--spectro-accent-dark2);
  --character-accent-dark3: var(--spectro-accent-dark3);
  --character-accent-white: var(--spectro-accent-white);
  --character-accent1:      var(--spectro-accent1);
  --character-accent2:      var(--spectro-accent2);
  --character-accent3:      var(--spectro-accent3);
  --character-accent4:      var(--spectro-accent4);
  --character-accent5:      var(--spectro-accent5);
  --character-accent1-rgb:  255,215,0;
  --talent-header-left-color: var(--character-accent-dark1);
  --talent-header-right-color: var(--character-accent-white);
}

.character-page.havoc {
  --character-accent-dark1: var(--havoc-accent-dark1);
  --character-accent-dark2: var(--havoc-accent-dark2);
  --character-accent-dark3: var(--havoc-accent-dark3);
  --character-accent-white: var(--havoc-accent-white);
  --character-accent1:      var(--havoc-accent1);
  --character-accent2:      var(--havoc-accent2);
  --character-accent3:      var(--havoc-accent3);
  --character-accent4:      var(--havoc-accent4);
  --character-accent5:      var(--havoc-accent5);
  --character-accent1-rgb:  223,41,105;
  --talent-header-left-color: var(--character-accent-white);
  --talent-header-right-color: var(--character-accent-white);
}

.character-page.glacio {
  --character-accent-dark1: var(--glacio-accent-dark1);
  --character-accent-dark2: var(--glacio-accent-dark2);
  --character-accent-dark3: var(--glacio-accent-dark3);
  --character-accent-white: var(--glacio-accent-white);
  --character-accent1:      var(--glacio-accent1);
  --character-accent2:      var(--glacio-accent2);
  --character-accent3:      var(--glacio-accent3);
  --character-accent4:      var(--glacio-accent4);
  --character-accent5:      var(--glacio-accent5);
  --character-accent1-rgb:  22,131,175;
  --talent-header-left-color: var(--character-accent-dark1);
  --talent-header-right-color: var(--character-accent-white);
}

.character-page.fusion {
  --character-accent-dark1: var(--fusion-accent-dark1);
  --character-accent-dark2: var(--fusion-accent-dark2);
  --character-accent-dark3: var(--fusion-accent-dark3);
  --character-accent-white: var(--fusion-accent-white);
  --character-accent1:      var(--fusion-accent1);
  --character-accent2:      var(--fusion-accent2);
  --character-accent3:      var(--fusion-accent3);
  --character-accent4:      var(--fusion-accent4);
  --character-accent5:      var(--fusion-accent5);
  --character-accent1-rgb:  201,55,42;
  --talent-header-left-color: var(--character-accent-white);
  --talent-header-right-color: var(--character-accent-white);
}

.character-page.electro {
  --character-accent-dark1: var(--electro-accent-dark1);
  --character-accent-dark2: var(--electro-accent-dark2);
  --character-accent-dark3: var(--electro-accent-dark3);
  --character-accent-white: var(--electro-accent-white);
  --character-accent1:      var(--electro-accent1);
  --character-accent2:      var(--electro-accent2);
  --character-accent3:      var(--electro-accent3);
  --character-accent4:      var(--electro-accent4);
  --character-accent5:      var(--electro-accent5);
  --character-accent1-rgb:  169,46,203;
  --talent-header-left-color: var(--character-accent-white);
  --talent-header-right-color: var(--character-accent-white);
}

.character-page.aero {
  --character-accent-dark1: var(--aero-accent-dark1);
  --character-accent-dark2: var(--aero-accent-dark2);
  --character-accent-dark3: var(--aero-accent-dark3);
  --character-accent-white: var(--aero-accent-white);
  --character-accent1:      var(--aero-accent1);
  --character-accent2:      var(--aero-accent2);
  --character-accent3:      var(--aero-accent3);
  --character-accent4:      var(--aero-accent4);
  --character-accent5:      var(--aero-accent5);
  --character-accent1-rgb:  35,180,55;
  --talent-header-left-color: var(--character-accent-dark1);
  --talent-header-right-color: var(--character-accent-white);
}

input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  width: 100%;
  outline: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: transparent;
  box-shadow: none;
  border: none;
}

input[type="range"]::-webkit-slider-thumb:focus,
input[type="range"]::-webkit-slider-thumb:active {
  outline: none !important;
  border-color: var(--character-accent-white) !important;
  box-shadow: none !important;
}

input[type="range"]::-moz-range-track {
  background: transparent;
  border: none;
}

input[type="range"]:focus {
  outline: none;
}

.character-page-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

.character-page-intro-dual {
  --cpid-gap-x: 2rem;
  --cpid-gap-y: 1.75rem;
  --cpid-card-pad: 1rem 1.25rem 1.15rem;
  --cpid-radius: var(--website-theme-radius-lg, 16px);
  --cpid-title-size: 1.05rem;
  --cpid-body-size: 0.9rem;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(280px, 400px) minmax(250px, 1fr);
  align-items: stretch;
  gap: var(--cpid-gap-y) var(--cpid-gap-x);
  margin: 34px 0 20px;
  position: relative;
}

.character-page-intro-dual__card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg,
    var(--website-theme-bg-surface, #181B1F) 0%,
    var(--website-theme-bg-surface-alt, #1D2025) 100%);
  border: 1px solid var(--website-theme-border-subtle, #282D33);
  border-radius: var(--cpid-radius);
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb,0,0,0),0.55),
    0 3px 8px rgba(var(--website-theme-shadow-rgb,0,0,0),0.55),
    0 8px 20px rgba(var(--website-theme-shadow-rgb,0,0,0),0.6),
    inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.character-page-intro-dual__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(40deg,
    rgba(var(--website-theme-glow-rgb,255,215,0),0.07) 0%,
    transparent 45% 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: .6;
  transition: opacity 0.4s ease;
}

.character-page-intro-dual__card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(var(--character-accent1-rgb), 0.08) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.character-page-intro-dual__card:hover {
  border-color: var(--character-accent1);
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb,0,0,0),0.55),
    0 6px 18px rgba(var(--website-theme-shadow-rgb,0,0,0),0.65),
    0 12px 32px rgba(var(--website-theme-shadow-rgb,0,0,0),0.7),
    0 0 0 1px rgba(var(--character-accent1-rgb),0.3),
    inset 0 0 30px rgba(var(--character-accent1-rgb), 0.05);
  transform: translateY(-2px);
}

.character-page-intro-dual__card:hover::before {
  opacity: 0.8;
}

.character-page-intro-dual__card:hover::after {
  opacity: 1;
}

.character-page-intro-dual__card--en {
  text-align: left;
}

.character-page-intro-dual__card--ar {
  text-align: right;
  direction: rtl;
}

.character-page-intro-dual__header {
  padding: .65rem 1rem .5rem;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg,
    var(--website-theme-bg-raised, #22262C) 0%,
    var(--website-theme-bg-surface, #181B1F) 100%);
  border-bottom: 1px solid var(--website-theme-border-subtle, #282D33);
}

.character-page-intro-dual__title {
  margin: 0;
  font-size: var(--cpid-title-size);
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--character-accent2);
  background: none !important;
  text-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  opacity: 1 !important;
}

.character-page-intro-dual__body {
  padding: var(--cpid-card-pad);
  font-size: var(--cpid-body-size);
  line-height: 1.55;
  color: var(--website-theme-text-primary);
}

.character-page-intro-dual__body strong {
  color: #ffffff;
  font-weight: 600;
}

.character-page-intro-dual__body p {
  margin: 0;
}

.cpid-inline-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.cpid-inline-icon img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.cpid-accent {
  color: var(--character-accent2);
}

.cpid-star {
  color: var(--character-accent2);
  font-weight: 600;
}

.character-page-intro-dual__video-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.character-page-intro-dual__video-aspect {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.character-page-intro-dual__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}

.yt-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yt-embed a {
  color: #fff;
  text-decoration: none;
  background: rgba(255, 0, 0, 0.8);
  border-radius: 8px;
  transition: background 0.3s;
}

.yt-embed a:hover {
  background: rgba(255, 0, 0, 1);
}

.no-guide-available {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    var(--website-theme-bg-surface) 0%, 
    var(--website-theme-bg-sunken) 100%);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: 12px;
  overflow: hidden;
  z-index: 1;
}

.no-guide-available::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, 
    rgba(var(--character-accent1-rgb), 0.05) 0%, 
    transparent 70%);
  pointer-events: none;
}

.no-guide-available span {
  color: var(--website-theme-text-dim);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  z-index: 1;
  padding: 12px 24px;
  background: var(--website-theme-bg-raised);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(var(--website-theme-shadow-rgb), 0.15);
}

@media (max-width: 1200px) {
  .character-page-intro-dual {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .character-page-intro-dual__video-wrapper {
    order: 2;
  }
  
  .character-page-intro-dual__card--ar {
    order: 3;
  }
}

@media (min-width: 1201px) and (max-width: 1400px) {
  .character-page-intro-dual {
    --cpid-gap-x: 1.5rem;
    --cpid-card-pad: 0.85rem 1rem 1rem;
    --cpid-title-size: 1rem;
    --cpid-body-size: 0.85rem;
  }
  
  .character-page-intro-dual__video-wrapper {
    grid-column: 2;
  }
}

@media (min-width: 900px) {
  .character-page-intro-dual__card {
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .character-page-intro-dual__body p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* ========================================
   STATS PANEL SECTION - Gaming Theme
   ======================================== */

.character-page__stats-panel {
  margin: 0;
  padding: 12px;
  background: var(--website-theme-bg-surface);
  border-radius: var(--website-theme-radius-lg);
  border: 1px solid var(--website-theme-border);
  box-shadow: 0 4px 20px rgba(var(--website-theme-shadow-rgb), 0.3);
  position: relative;
  overflow: hidden;
}

.character-page__stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  gap: 24px;
  position: relative;
}

.character-page__stats-title {
  font-size: 1.05rem;
  font-weight: 700;
  background: linear-gradient(135deg, 
    var(--character-accent2) 0%, 
    var(--character-accent1) 50%,
    var(--character-accent3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
  letter-spacing: 1px;
}


.character-page__stats-slider-container {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(
    135deg,
    var(--website-theme-bg-sunken) 0%,
    var(--website-theme-bg-surface) 100%
  );
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 4px 12px rgba(0,0,0,0.2);
  margin-left: 20px;
}

.character-page__stats-slider-container span {
  font-size: 16px;
  font-weight: 600;
  color: var(--character-accent-white);
  white-space: nowrap;
}

#character-page__stats-slider,
.character-page__stats-slider-container input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: linear-gradient(
    90deg,
    var(--character-accent2) 0%,
    var(--character-accent1) 50%,
    var(--character-accent3) 100%
  );
  height: var(--slider-height, 8px);
  border-radius: var(--slider-border-radius, 4px);
  outline: none;
  border: none;
  transition: all .3s;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.2),
    0 2px 8px rgba(var(--character-accent1-rgb),0.3);
  cursor: pointer;
  box-sizing: border-box;
}

#character-page__stats-slider:hover,
.character-page__stats-slider-container input[type="range"]:hover {
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.2),
    0 4px 16px rgba(var(--character-accent1-rgb),0.4);
}

#character-page__stats-slider::-webkit-slider-runnable-track,
.character-page__stats-slider-container input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: var(--slider-height, 8px);
  background: transparent;
  border-radius: var(--slider-border-radius, 4px);
  border: none;
}

#character-page__stats-slider::-webkit-slider-thumb,
.character-page__stats-slider-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--slider-thumb-width, 22px);
  height: var(--slider-thumb-height, 22px);
  background: var(--website-theme-bg-surface);
  border: var(--slider-thumb-border-width, 3px) solid var(--character-accent-white);
  border-radius: 50%;
  cursor: pointer;
  margin-top: var(--slider-thumb-margin-top, -8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 2px 4px rgba(0,0,0,0.2),
    0 4px 12px rgba(var(--character-accent1-rgb),0.3);
  transition: all .3s;
}

#character-page__stats-slider::-webkit-slider-thumb:hover,
.character-page__stats-slider-container input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 4px 8px rgba(0,0,0,0.3),
    0 6px 20px rgba(var(--character-accent1-rgb),0.4);
}

#character-page__stats-slider::-moz-range-thumb,
.character-page__stats-slider-container input[type="range"]::-moz-range-thumb {
  -moz-appearance: none;
  width: var(--slider-thumb-width, 22px);
  height: var(--slider-thumb-height, 22px);
  background: var(--website-theme-bg-surface);
  border: var(--slider-thumb-border-width, 3px) solid var(--character-accent-white);
  border-radius: 50%;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 2px 4px rgba(0,0,0,0.2),
    0 4px 12px rgba(var(--character-accent1-rgb),0.3);
  transition: all .3s;
}

#character-page__stats-slider::-moz-range-thumb:hover,
.character-page__stats-slider-container input[type="range"]::-moz-range-thumb:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 4px 8px rgba(0,0,0,0.3),
    0 6px 20px rgba(var(--character-accent1-rgb),0.4);
}

#character-page__stats-slider::-moz-range-track,
.character-page__stats-slider-container input[type="range"]::-moz-range-track {
  -moz-appearance: none;
  height: var(--slider-height, 8px);
  background: transparent;
  border: none;
  border-radius: var(--slider-border-radius, 4px);
}

#character-page__stats-slider:focus,
.character-page__stats-slider-container input[type="range"]:focus {
  outline: none;
}

.character-page__stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.character-page__stat-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  background: var(--website-theme-bg-surface);
  border: 1px solid var(--website-theme-border);
  border-radius: var(--website-theme-radius-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.character-page__stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--character-accent1-rgb), 0.1) 50%,
    transparent 100%);
  transition: left 0.5s ease;
}

.character-page__stat-card:hover::before {
  left: 100%;
}

.character-page__stat-card:hover {
  background: var(--website-theme-bg-raised);
  border-color: var(--character-accent1, var(--website-theme-border-strong));
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
    0 8px 20px rgba(var(--character-accent1-rgb, 255,215,0), 0.3),
    0 0 0 1px rgba(var(--character-accent1-rgb), 0.5);
}

.character-page__stat-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.3s ease;
}

.character-page__stat-icon:has-text("♥"),
.character-page__stat-icon:has-text("⚔") {
  font-size: 2rem;
}

/* Fallback: Target first two stat cards */
.character-page__stat-card:nth-child(1) .character-page__stat-icon,
.character-page__stat-card:nth-child(2) .character-page__stat-icon {
  font-size: 1.5rem;
}

.character-page__stat-card:hover .character-page__stat-icon {
  transform: scale(1.15) rotate(5deg);
}

.character-page__stat-icon .stat-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.character-page__stat-text {
  flex: 1;
  min-width: 0;
}

.character-page__stat-label {
  font-size: 0.75rem;
  color: var(--website-theme-text-dim);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.character-page__stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--website-theme-text-primary);
  transition: all 0.3s ease;
  position: relative;
}

.character-page__stat-card:hover .character-page__stat-value {
  color: var(--character-accent2);
  transform: scale(1.05);
}

@media (max-width: 1200px) {
  .character-page__stats-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  .character-page__stat-card { padding: 10px 8px; }
  .character-page__stat-icon { font-size: 1.3rem; }
  .character-page__stat-value { font-size: 0.95rem; }
}

@media (max-width: 768px) {
  .character-page__stats-header {
    gap: 12px;
  }
  
  .character-page__stats-title {
    font-size: 0.95rem;
  }
  
  .character-page__stats-slider-container {
    gap: 8px;
    font-size: 0.9rem;
  }
  
  .character-page__stats-slider-container span {
    min-width: 50px;
  }
  
  .character-page__stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .character-page__stat-card {
    padding: 12px;
  }
}

@media (max-width: 500px) {
  .character-page__stats-panel {
    padding: 6px 10px;
    margin: 6px 0;
  }
  .character-page__stats-title {
    font-size: 1.05rem;
    padding-left: 0;
    text-align: center;
    width: 100%;
  }
  .character-page__stats-header {
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
  }
  .character-page__stats-slider-container {
    padding: 8px 10px;
    margin: 0 12px;
    width: calc(100% - 30px);
    max-width: 100%;
    justify-content: center;
  }
  .character-page__stat-card {
    padding: 6px 10px;
    text-align: left;
  }
  .character-page__stat-icon { font-size: 1.25rem; }
  .character-page__stat-value { font-size: 0.8rem; }
  .character-page__stat-text {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
  }
  .character-page__stat-label { font-size: 0.75rem; }
  .character-page__stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ========================================
   TABS SECTION
   ======================================== */

.character-page__tabs-container {
  margin-top: 12px;
  margin-bottom: 20px;
}

.character-page__tabs-wrapper {
  padding: 8px;
  background: var(--website-theme-bg-raised);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-lg);
}

.character-page__tabs {
  display: flex;
  gap: 12px;
}

.character-page__tab-button {
  flex: 1;
  padding: 12px 16px;
  background: var(--website-theme-bg-sunken);
  color: var(--website-theme-text-secondary);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-md);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.85px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.character-page__tab-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--character-accent1-rgb), 0.1) 50%,
    transparent 100%);
  transition: left 0.5s ease;
}

.character-page__tab-button:hover::before {
  left: 100%;
}

.character-page__tab-button .tab-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform 0.25s ease;
}

.character-page__tab-button:hover:not(.active) {
  background: var(--website-theme-bg-hover);
  color: var(--website-theme-text-primary);
  border-color: var(--website-theme-border);
  transform: translateY(-2px);
}

.character-page__tab-button:hover:not(.active) .tab-icon {
  transform: scale(1.1);
}

.character-page__tab-button.active {
  background: linear-gradient(135deg,
    var(--character-accent1) 0%,
    var(--character-accent2) 100%);
  color: var(--talent-header-left-color);
  border-color: var(--character-accent1);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(var(--character-accent1-rgb), 0.4);
}

.character-page__tab-button.active .tab-icon {
  color: var(--talent-header-left-color);
  filter: drop-shadow(0 0 8px rgba(var(--character-accent1-rgb), 0.6));
}

.character-page__tab-button:focus-visible {
  outline: 2px solid var(--character-accent1);
  outline-offset: 2px;
}

.character-page__tab-button:focus {
  outline: none;
}

.character-page__tab-content {
  display: none;
  padding-top: 20px;
  animation: fadeIn 0.3s ease;
}

.character-page__tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 500px) {
  .character-page__tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .character-page__tab-button {
    padding: 10px 12px;
    font-size: 0.75rem;
  }

  .character-page__tab-button .tab-icon {
    width: 16px;
    height: 16px;
  }
}

/* ========================================
   TALENTS SECTION (organized after Tabs)
   ======================================== */
.character-page__glowing-star-legend {
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.character-page__glowing-star-content {
  display: flex;
  width: 100%;
  gap: 10px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    var(--website-theme-bg-surface, #181B1F) 0%,
    var(--website-theme-bg-surface-alt, #1D2025) 100%);
  border: 1px solid var(--website-theme-border-subtle, #282D33);
  border-radius: var(--website-theme-radius-md, 10px);
  padding: 8px 12px;
  color: var(--website-theme-text-secondary);
}
.glowing-star {
  --badge-text-color:    var(--website-theme-bg-raised);
  --badge-primary-color: var(--character-accent1);
  --badge-shadow-color1: rgba(var(--character-accent1-rgb),0.75);
  --badge-shadow-color2: rgba(var(--character-accent1-rgb),0.6);
  --badge-pulse-color1:  rgba(var(--character-accent1-rgb),0.6);
  --badge-pulse-color2:  rgba(var(--character-accent1-rgb),0.5);
  --badge-pulse-color3:  rgba(var(--character-accent1-rgb),0.8);
  --badge-pulse-color4:  rgba(var(--character-accent1-rgb),0.6);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1rem;
  background: var(--badge-primary-color);
  color: var(--badge-text-color);
  border-radius: 50%;
  box-shadow:
    0 0 6px  var(--badge-shadow-color1),
    0 0 12px var(--badge-shadow-color2);
}

.glowing-star:hover {
  animation: character-page__pulse 2s ease-in-out;
}

@media (pointer: coarse) {
  .glowing-star {
    animation: none !important;
  }
}

@keyframes character-page__pulse {
  0%, 100% {
    box-shadow:
      0 0 6px  var(--badge-pulse-color1),
      0 0 12px var(--badge-pulse-color2);
  }
  50% {
    box-shadow:
      0 0 8px  var(--badge-pulse-color3),
      0 0 16px var(--badge-pulse-color4);
  }
  100% {
    box-shadow:
      0 0 6px  var(--badge-pulse-color1),
      0 0 12px var(--badge-pulse-color2);
  }
}

.talents-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
.talents-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 1100px) {
  .talents-columns {
    grid-template-columns: 1fr;
  }
}

.talent-section {
  background: linear-gradient(135deg,
    var(--website-theme-bg-surface, #181B1F) 0%,
    var(--website-theme-bg-surface-alt, #1D2025) 100%);
  border: 1px solid var(--website-theme-border-subtle, #282D33);
  border-radius: var(--website-theme-radius-lg, 16px);
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb,0,0,0),0.55),
    0 3px 8px rgba(var(--website-theme-shadow-rgb,0,0,0),0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}
.talent-section__header {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--website-theme-border-subtle, #282D33);
}
.talent-section__header-left {
  padding: .75rem .95rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  background: var(--character-accent1);
  color: var(--talent-header-left-color, var(--website-theme-bg-raised));
  border-right: 1px solid var(--website-theme-border);
  font-weight: 800;
  letter-spacing: 1px;
}
.talent-section__header-right {
  flex: 1;
  padding: .75rem .95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  background: var(--website-theme-bg-raised);
  color: var(--talent-header-right-color, var(--website-theme-text-primary));
  font-weight: 700;
}
.talent-section__content {
  padding: 1rem 1.15rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  color: var(--website-theme-text-primary);
  font-size: .95rem;
  line-height: 1.3;
}
.talent-section__content p {
  margin: 0;
  line-height: 1.3;
}
.talent-subtitle {
  margin-top: .3rem;
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--character-accent2);
}

/* Talent keywords highlighting */
.talent-keyword {
  font-weight: 700;
  color: var(--character-accent2);
}

/* Talent dropdowns */
.talent-dropdown {
  border-top: 1px solid var(--website-theme-divider);
  background: var(--website-theme-bg-sunken);
}

.talent-dropdown + .talent-dropdown {
  border-top: none;
  margin-top: 0;
}

.talent-dropdown__header {
  width: 100%;
  cursor: pointer;
  background: var(--website-theme-bg-sunken);
  color: var(--website-theme-text-secondary);
  font-size: 0.72rem;
  letter-spacing: .8px;
  font-weight: 600;
  padding: .7rem .95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  border: none;
  outline: none;
  position: relative;
}

.talent-dropdown__header .arrow {
  font-size: .6rem;
  opacity: .75;
  transition: transform .18s ease;
}

.talent-dropdown__header:hover {
  background: var(--website-theme-bg-hover);
  color: var(--website-theme-text-primary);
}

.talent-dropdown__header:hover .arrow {
  opacity: .95;
}

.talent-dropdown__header:active {
  background: var(--website-theme-bg-active);
  filter: brightness(1.05);
}

.talent-dropdown__header:focus,
.talent-dropdown__header:focus-visible {
  color: var(--website-theme-text-primary);
}

.talent-dropdown.open > .talent-dropdown__header {
  background: var(--website-theme-bg-hover);
  color: var(--character-accent1);
}

.talent-dropdown.open > .talent-dropdown__header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(
    180deg,
    var(--character-accent1) 0%,
    var(--character-accent2) 100%
  );
  box-shadow: 0 0 6px rgba(var(--website-theme-glow-rgb),0.45);
  border-radius: 0 2px 2px 0;
}

.talent-dropdown.open .talent-dropdown__header .arrow {
  transform: rotate(180deg);
}

.talent-dropdown__content {
  display: none;
  padding: .85rem .95rem 1rem;
  border-top: 1px solid var(--website-theme-border-subtle);
  background: linear-gradient(135deg,
    var(--website-theme-bg-sunken) 0%,
    var(--website-theme-bg-surface) 100%);
  font-size: 15px;
  line-height: 1.45;
  color: var(--website-theme-text-secondary);
}

.talent-dropdown.open .talent-dropdown__content {
  display: block;
}

/* Multiplier slider */
.multiplier-slider {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 .9rem;
  background: var(--website-theme-bg-sunken);
  padding: .55rem .65rem .6rem;
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-md);
}

.multiplier-slider__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--website-theme-text-secondary);
  white-space: nowrap;
}

.multiplier-slider input[type=range] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: linear-gradient(90deg,
    var(--character-accent2) 0%,
    var(--character-accent1) 50%,
    var(--character-accent3) 100%);
  border-radius: 3px;
  outline: none;
  border: 1px solid var(--website-theme-border);
  cursor: pointer;
}

.multiplier-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--website-theme-bg-surface);
  border: 3px solid var(--character-accent1);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(var(--website-theme-glow-rgb), 0.3);
}

.multiplier-slider input[type=range]::-moz-range-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--website-theme-bg-surface);
  border: 3px solid var(--character-accent1);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(var(--website-theme-glow-rgb), 0.3);
}

.multiplier-slider input[type=range]::-webkit-slider-thumb:hover {
  background: var(--website-theme-bg-raised);
  box-shadow: 0 0 8px rgba(var(--website-theme-glow-rgb), 0.5);
}

.multiplier-slider input[type=range]::-moz-range-thumb:hover {
  background: var(--website-theme-bg-raised);
  box-shadow: 0 0 8px rgba(var(--website-theme-glow-rgb), 0.5);
}

/* Additional specificity for slider track */
.character-page .multiplier-slider input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: linear-gradient(90deg,
    var(--character-accent2) 0%,
    var(--character-accent1) 50%,
    var(--character-accent3) 100%) !important;
  border: 1px solid var(--website-theme-border);
  border-radius: 3px;
  cursor: pointer;
}

/* Multipliers table */
.multipliers-table {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.multiplier-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  background: var(--website-theme-bg-sunken);
  padding: 4px 12px;
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-sm);
  font-size: 14px;
}

.multiplier-label {
  font-weight: 600;
  color: var(--website-theme-text-secondary);
  letter-spacing: .4px;
}

.multiplier-value {
  font-weight: 700;
  color: var(--character-accent2);
}

.multiplier-row:hover {
  background: var(--website-theme-bg-hover);
}

/* ====================
   TALENTS EXTRA STATS
   ==================== */
.character-page-talents-extra-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 32px 0 24px;
}

.character-page-talents-extra-stats__bar {
  display: flex;
  align-items: stretch;
  background: linear-gradient(135deg,
    var(--website-theme-bg-surface) 0%,
    var(--website-theme-bg-surface-alt) 100%);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-lg);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 3px 8px rgba(var(--website-theme-shadow-rgb),0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.character-page-talents-extra-stats__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(40deg,
    rgba(var(--character-accent1-rgb),0.05) 0%,
    transparent 45% 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.character-page-talents-extra-stats__label {
  flex: 0 0 180px;
  padding: 14px 18px;
  background: var(--character-accent1);
  color: var(--talent-header-left-color, var(--website-theme-bg-raised));
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1px;
  border-right: 1px solid var(--website-theme-border);
  position: relative;
  z-index: 1;
}

.character-page-talents-extra-stats__value {
  flex: 1 1 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  background: var(--website-theme-bg-raised);
  color: var(--website-theme-text-primary);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  position: relative;
}

.character-page-talents-extra-stats__bar:hover {
  border-color: var(--character-accent1);
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 6px 18px rgba(var(--website-theme-shadow-rgb),0.65),
    0 0 0 1px rgba(var(--character-accent1-rgb),0.3),
    inset 0 0 30px rgba(var(--character-accent1-rgb), 0.05);
  transform: translateY(-2px);
}

.character-page-talents-extra-stats__bar:hover::before {
  opacity: 0.8;
}

@media (max-width: 900px) {
  .character-page-talents-extra-stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .character-page-talents-extra-stats__bar { font-size: 0.75rem; }
  .character-page-talents-extra-stats__label {
    flex-basis: 150px;
    padding: 12px 14px;
    font-size: 0.75rem;
  }
  .character-page-talents-extra-stats__value {
    padding: 12px 14px;
    font-size: 0.8rem;
  }
}

/* ====================
   TALENT PRIORITY
   ==================== */
.character-page-talent-priority-section {
  background: linear-gradient(135deg,
    var(--website-theme-bg-surface) 0%,
    var(--website-theme-bg-surface-alt) 100%);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-lg);
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 3px 8px rgba(var(--website-theme-shadow-rgb),0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  position: relative;
  margin: 32px 0;
}

.character-page-talent-priority-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--character-accent1);
  color: var(--talent-header-left-color, var(--website-theme-bg-raised));
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--website-theme-border-subtle);
}

.character-page-talent-priority-flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  padding: 28px 24px 32px;
}

.character-page-talent-priority-step {
  min-width: 140px;
  padding: 20px 18px;
  background: linear-gradient(135deg,
    var(--website-theme-bg-raised) 0%,
    var(--website-theme-bg-surface) 100%);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 3px 8px rgba(var(--website-theme-shadow-rgb),0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.character-page-talent-priority-step::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--character-accent1-rgb), 0.08) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.character-page-talent-priority-step:hover {
  border-color: var(--character-accent1);
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 6px 18px rgba(var(--website-theme-shadow-rgb),0.65),
    0 0 0 1px rgba(var(--character-accent1-rgb),0.3),
    inset 0 0 30px rgba(var(--character-accent1-rgb), 0.05);
  transform: translateY(-4px);
}

.character-page-talent-priority-step:hover::before {
  opacity: 1;
}

.character-page-talent-priority-step-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%,
    var(--character-accent2) 0%,
    var(--character-accent1) 60%,
    var(--character-accent3) 100%);
  color: var(--talent-header-left-color, var(--website-theme-bg-raised));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  box-shadow:
    0 0 12px rgba(var(--character-accent1-rgb),0.5),
    0 0 24px rgba(var(--character-accent1-rgb),0.3),
    inset 0 1px 4px rgba(255,255,255,0.25);
  position: relative;
  z-index: 1;
}

.character-page-talent-priority-step-name {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--website-theme-text-primary);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

.character-page-talent-priority-step:focus-visible {
  outline: 2px solid var(--character-accent2);
  outline-offset: 3px;
}

@media (max-width: 860px) {
  .character-page-talent-priority-flow { gap: 16px; }
  .character-page-talent-priority-step { min-width: 120px; }
  .character-page-talent-priority-step-number { width: 48px; height: 48px; font-size: 1rem; }
}

@media (max-width: 560px) {
  .character-page-talent-priority-step {
    min-width: 108px;
    padding: 16px 14px;
  }
  .character-page-talent-priority-step-number {
    width: 42px;
    height: 42px;
    font-size: 0.9rem;
  }
  .character-page-talent-priority-step-name {
    font-size: 0.68rem;
    letter-spacing: 0.8px;
  }
  .character-page-talent-priority-flow {
    padding: 20px 16px 24px;
  }
  .character-page-talent-priority-header {
    font-size: 0.7rem;
    padding: 10px 16px;
  }
}

@media (max-width: 500px) {
  .character-page-talent-priority-section { margin: 20px 0; }
  .character-page-talent-priority-header {
    padding: 10px 12px;
    font-size: 0.65rem;
  }
  .character-page-talent-priority-flow {
    gap: 12px;
    padding: 16px 12px 20px;
  }
  .character-page-talent-priority-step {
    min-width: 96px;
    padding: 12px 10px;
    gap: 8px;
  }
  .character-page-talent-priority-step-number {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }
  .character-page-talent-priority-step-name {
    font-size: 0.62rem;
    letter-spacing: 0.6px;
  }
}

/* ====================
   MATERIALS SECTION
   ==================== */
.character-page-upgrading-materials-section,
.character-page-talent-levelup-materials-section {
  background: linear-gradient(135deg,
    var(--website-theme-bg-surface) 0%,
    var(--website-theme-bg-surface-alt) 100%);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-lg);
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 3px 8px rgba(var(--website-theme-shadow-rgb),0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  position: relative;
  margin: 32px 0;
}

.character-page-upgrading-materials-header,
.character-page-talent-levelup-materials-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--character-accent1);
  color: var(--talent-header-left-color, var(--website-theme-bg-raised));
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--website-theme-border-subtle);
}

.character-page-upgrading-materials-list,
.character-page-talent-levelup-materials-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 28px 24px 32px;
  justify-content: center;
}

.character-page-upgrading-materials-card,
.character-page-talent-levelup-materials-card {
  flex: 0 0 140px;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 12px 20px;
  background: linear-gradient(135deg,
    var(--website-theme-bg-raised) 0%,
    var(--website-theme-bg-surface) 100%);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-lg);
  position: relative;
  text-align: center;
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 3px 8px rgba(var(--website-theme-shadow-rgb),0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.character-page-upgrading-materials-card::before,
.character-page-talent-levelup-materials-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%,
    rgba(var(--character-accent1-rgb), 0.06) 0%,
    transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.character-page-upgrading-materials-card:hover,
.character-page-talent-levelup-materials-card:hover {
  border-color: var(--character-accent1);
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 6px 18px rgba(var(--website-theme-shadow-rgb),0.65),
    0 0 0 1px rgba(var(--character-accent1-rgb),0.3),
    inset 0 0 30px rgba(var(--character-accent1-rgb), 0.05);
  transform: translateY(-4px);
}

.character-page-upgrading-materials-card:hover::before,
.character-page-talent-levelup-materials-card:hover::before {
  opacity: 1;
}

.character-page-upgrading-materials-card-icon,
.character-page-talent-levelup-materials-card-icon {
  width: 76px;
  height: 76px;
  border-radius: var(--website-theme-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mat-bg-color, #666);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    0 4px 12px rgba(var(--website-theme-shadow-rgb),0.5),
    inset 0 1px 2px rgba(255,255,255,0.15);
}

.character-page-upgrading-materials-card-icon::after,
.character-page-talent-levelup-materials-card-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.05) 40%,
    rgba(0,0,0,0.2) 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.character-page-upgrading-materials-card-icon img,
.character-page-talent-levelup-materials-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  position: relative;
  z-index: 1;
}

.character-page-upgrading-materials-card-count,
.character-page-talent-levelup-materials-card-count {
  display: block;
  color: var(--website-theme-text-primary);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.4px;
}

.character-page-upgrading-materials-card:focus-visible,
.character-page-talent-levelup-materials-card:focus-visible {
  outline: 2px solid var(--character-accent2);
  outline-offset: 3px;
}

/* Material color variants */
[character-page-materials-section-colors] {
  --mat-bg-color: var(--mat-color-gray);
}
[character-page-materials-section-colors="green"] {
  --mat-bg-color: var(--mat-color-green);
}
[character-page-materials-section-colors="blue"] {
  --mat-bg-color: var(--mat-color-blue);
}
[character-page-materials-section-colors="pink"] {
  --mat-bg-color: var(--mat-color-pink);
}
[character-page-materials-section-colors="yellow"] {
  --mat-bg-color: var(--mat-color-yellow);
}
[character-page-materials-section-colors="purple"] {
  --mat-bg-color: var(--mat-color-purple);
}
[character-page-materials-section-colors="gray"] {
  --mat-bg-color: var(--mat-color-gray);
}

/* Responsive Design */
@media (max-width: 1260px) {
  .character-page-upgrading-materials-card,
  .character-page-talent-levelup-materials-card {
    flex: 0 0 130px;
    max-width: 130px;
  }
  .character-page-upgrading-materials-list,
  .character-page-talent-levelup-materials-list {
    gap: 18px;
  }
}

@media (max-width: 980px) {
  .character-page-upgrading-materials-card,
  .character-page-talent-levelup-materials-card {
    flex: 0 0 115px;
    max-width: 115px;
  }
  .character-page-upgrading-materials-card-icon,
  .character-page-talent-levelup-materials-card-icon {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 620px) {
  .character-page-upgrading-materials-card,
  .character-page-talent-levelup-materials-card {
    flex: 0 0 100px;
    max-width: 100px;
    padding: 14px 10px 16px;
    font-size: 0.68rem;
  }
  .character-page-upgrading-materials-card-icon,
  .character-page-talent-levelup-materials-card-icon {
    width: 56px;
    height: 56px;
  }
  .character-page-upgrading-materials-card-count,
  .character-page-talent-levelup-materials-card-count {
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  .character-page-upgrading-materials-header,
  .character-page-talent-levelup-materials-header {
    font-size: 0.7rem;
    letter-spacing: 0.85px;
    padding: 10px 16px;
  }
  .character-page-upgrading-materials-list,
  .character-page-talent-levelup-materials-list {
    padding: 20px 16px 24px;
  }
}

@media (max-width: 500px) {
  .character-page-upgrading-materials-section,
  .character-page-talent-levelup-materials-section {
    margin: 20px 0;
  }
  .character-page-upgrading-materials-header,
  .character-page-talent-levelup-materials-header {
    padding: 10px 12px;
    font-size: 0.65rem;
  }
  .character-page-upgrading-materials-list,
  .character-page-talent-levelup-materials-list {
    gap: 12px;
    padding: 16px 12px 20px;
  }
  .character-page-upgrading-materials-card,
  .character-page-talent-levelup-materials-card {
    flex: 0 0 92px;
    max-width: 92px;
    padding: 12px 8px 14px;
    font-size: 0.62rem;
  }
  .character-page-upgrading-materials-card-icon,
  .character-page-talent-levelup-materials-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
  }
  .character-page-upgrading-materials-card-count,
  .character-page-talent-levelup-materials-card-count {
    font-size: 0.6rem;
  }
}

/* ====================
   SEQUENCES SECTION
   ==================== */
.character-page-sequences-section {
  display: block;
  position: relative;
}

.character-page-sequences-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  width: 100%;
}

.character-page-sequence-card {
  background: linear-gradient(135deg,
    var(--website-theme-bg-surface) 0%,
    var(--website-theme-bg-surface-alt) 100%);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-lg);
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb), 0.55),
    0 3px 8px rgba(var(--website-theme-shadow-rgb), 0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.character-page-sequence-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%,
    rgba(var(--character-accent1-rgb), 0.06) 0%,
    transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.character-page-sequence-card:hover {
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 6px 18px rgba(var(--website-theme-shadow-rgb),0.65),
    inset 0 0 30px rgba(var(--character-accent1-rgb), 0.05);
  transform: translateY(-2px);
}

.character-page-sequence-card:hover::before {
  opacity: 1;
}

.character-page-sequence-card-header {
  display: flex;
  width: 100%;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 1px solid var(--website-theme-border-subtle);
  background: var(--website-theme-bg-raised);
  line-height: 1.2;
  min-height: 40px;
}

.character-page-sequence-card-header-left {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  background: var(--character-accent1);
  color: var(--talent-header-left-color, var(--website-theme-bg-raised));
  font-weight: 800;
  letter-spacing: 1px;
  min-width: 140px;
  justify-content: flex-start;
}

.character-page-sequence-card-header-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  background: var(--website-theme-bg-raised);
  color: var(--talent-header-right-color, var(--website-theme-text-primary));
  font-weight: 700;
  letter-spacing: 0.7px;
}

.character-page-sequence-name {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--talent-header-right-color);
  letter-spacing: 0.6px;
  flex: 1;
}

.character-page-sequence-stars {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

.character-page-sequence-stars .glowing-star,
.sequence-star-empty {
  width: 20px;
  height: 20px;
  font-size: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.character-page-sequence-stars .glowing-star {
  box-shadow:
    0 0 8px rgba(var(--character-accent1-rgb),0.6),
    0 0 16px rgba(var(--character-accent1-rgb),0.4);
  animation: none;
}

.sequence-star-empty {
  color: var(--website-theme-text-dim);
  background: var(--website-theme-bg-sunken);
  border: 1px solid var(--website-theme-border-subtle);
}

.character-page-sequence-card-body {
  flex: 1 1 auto;
  padding: 18px 20px 20px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--website-theme-text-secondary);
  position: relative;
  background: var(--website-theme-bg-surface);
}

.character-page-sequence-card-body p {
  margin: 0;
}

.character-page-sequence-card-body p + p {
  margin-top: 12px;
}

.sequence-explain-dropdown {
  border-top: 1px solid var(--website-theme-border-subtle);
  background: var(--website-theme-bg-surface);
}

.sequence-explain-dropdown .talent-dropdown__header {
  width: 100%;
  background: var(--website-theme-bg-surface);
  border: 0;
  margin: 0;
  padding: 10px 18px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 600;
  color: var(--website-theme-text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  transition: background 0.25s ease;
  box-shadow: inset 4px 0 0 rgba(var(--character-accent1-rgb),0.06);
}

.sequence-explain-dropdown .talent-dropdown__header:hover {
  background: var(--website-theme-bg-raised);
}

.seq-dropdown-arrow {
  display: inline-block;
  font-size: 11px;
  transition: transform 0.3s ease;
  margin-left: 8px;
}

.sequence-explain-dropdown.open .seq-dropdown-arrow {
  transform: rotate(180deg);
}

.sequence-explain-dropdown .talent-dropdown__content {
  padding: 16px 20px 18px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--website-theme-text-secondary);
  background: var(--website-theme-bg-surface-alt);
  border-top: 1px solid var(--website-theme-border-subtle);
  display: none;
}

.sequence-explain-dropdown.open .talent-dropdown__content {
  display: block;
}

.sequence-explain-dropdown .talent-dropdown__content > p {
  background: var(--website-theme-bg-sunken);
  padding: 14px 16px;
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-md);
  color: var(--website-theme-text-primary);
  margin: 0;
}

.sequence-explain-dropdown .talent-dropdown__content > p + p {
  margin-top: 12px;
}

.character-page-sequence-card:hover .character-page-sequence-card-header-left {
  filter: brightness(1.05);
}

@media (max-width: 1100px) {
  .character-page-sequences-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .character-page-sequences-grid {
    gap: 20px;
  }
  
  .character-page-sequence-card-header-left {
    min-width: 120px;
    padding: 10px 14px;
    font-size: 0.75rem;
  }
  
  .character-page-sequence-card-header-right {
    padding: 10px 14px;
    gap: 12px;
  }
  
  .character-page-sequence-name {
    font-size: 0.75rem;
  }
  
  .character-page-sequence-card-body {
    padding: 16px 18px;
    font-size: 0.8rem;
  }
}

@media (max-width: 500px) {
  .character-page-sequences-grid {
    gap: 16px;
  }
  
  .character-page-sequence-card-header {
    min-height: 36px;
  }
  
  .character-page-sequence-card-header-left {
    min-width: 100px;
    padding: 8px 12px;
    font-size: 0.7rem;
  }
  
  .character-page-sequence-card-header-right {
    padding: 8px 12px;
    gap: 10px;
  }
  
  .character-page-sequence-name {
    font-size: 0.7rem;
  }
  
  .character-page-sequence-stars .glowing-star,
  .sequence-star-empty {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }
  
  .character-page-sequence-card-body {
    padding: 14px 16px;
    font-size: 0.75rem;
  }
  
  .sequence-explain-dropdown .talent-dropdown__header {
    padding: 8px 16px;
    font-size: 0.65rem;
  }
  
  .sequence-explain-dropdown .talent-dropdown__content {
    padding: 14px 16px;
    font-size: 0.75rem;
  }
}

/* ====================
   DISCLAIMER SECTION
   ==================== */
.character-page-review-section-panel.disclaimer-panel {
  margin: 24px 0 0 0;
  background: var(--website-theme-bg-surface);
  border: 1px solid var(--website-theme-border);
  border-radius: var(--website-theme-radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(var(--website-theme-shadow-rgb), 0.3);
}

.character-page-disclaimer-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 20px;
  background: var(--character-accent1);
  border-bottom: 1px solid var(--website-theme-border-subtle);
  color: var(--talent-header-left-color, var(--website-theme-bg-raised));
  position: relative;
}

.character-page-disclaimer-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--talent-header-left-color, var(--website-theme-bg-raised));
}

.character-page-review-section-translation-btn {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.4);
  color: var(--website-theme-text-primary);
  padding: 0.45rem 0.75rem;
  border-radius: var(--website-theme-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: absolute;
  right: 20px;
}

.character-page-review-section-translation-btn:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(0, 0, 0, 0.5);
}

.character-page-review-section-text-en,
.character-page-review-section-text-ar {
  padding: 20px;
  color: var(--website-theme-text-primary);
  font-size: 0.85rem;
  line-height: 1.7;
  background: var(--website-theme-bg-surface);
}

.character-page-review-section-text-en p,
.character-page-review-section-text-ar p {
  margin: 0;
}

.character-page-review-section-text-ar {
  display: none;
}

/* ====================
   CHART SECTION
   ==================== */
#chart-section {
  background: var(--website-theme-bg-surface);
  padding: 32px;
  border-radius: var(--website-theme-radius-lg);
  border: 1px solid var(--website-theme-border);
  box-shadow: 
    0 4px 20px rgba(var(--website-theme-shadow-rgb), 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
  width: 100%;
  margin: 24px 0 0 0;
  position: relative;
  overflow: hidden;
}

#chart-section::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--website-theme-bg-surface);
  pointer-events: none;
}

#chart-section:hover::before {
  animation: chartGlow 6s ease-in-out;
}

@keyframes chartGlow {
  0% { opacity: 0.5; transform: rotate(0deg) scale(1); }
  100% { opacity: 0.8; transform: rotate(180deg) scale(1.1); }
}

#wineChart {
  display: block;
  width: 100% !important;
  height: 380px !important;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

@media (max-width: 768px) {
  .character-page-disclaimer-header {
    padding: 10px 16px;
  }
  
  .character-page-disclaimer-title {
    font-size: 0.8rem;
  }
  
  .character-page-review-section-translation-btn {
    padding: 5px 12px;
    font-size: 0.7rem;
  }
  
  .character-page-review-section-text-en,
  .character-page-review-section-text-ar {
    padding: 16px;
    font-size: 0.8rem;
  }
  
  #chart-section {
    padding: 24px 20px;
  }
  
  #wineChart {
    height: 320px !important;
  }
}

@media (max-width: 500px) {
  .character-page-disclaimer-header {
    padding: 8px 14px;
  }
  
  .character-page-disclaimer-title {
    font-size: 0.75rem;
  }
  
  .character-page-review-section-translation-btn {
    padding: 4px 10px;
    font-size: 0.65rem;
  }
  
  .character-page-review-section-text-en,
  .character-page-review-section-text-ar {
    padding: 14px;
    font-size: 0.75rem;
  }
  
  #chart-section {
    padding: 20px 16px;
  }
  
  #wineChart {
    height: 280px !important;
  }
}


/* =====================================================
   BUILD TAB - BEST SUB-STATS SECTION
   ===================================================== */
.character-page-best-sub-stats-section {
  background: linear-gradient(135deg,
    var(--website-theme-bg-surface) 0%,
    var(--website-theme-bg-surface-alt) 100%);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-lg);
  overflow: hidden;
  margin: 0 0 1rem 0;
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 3px 8px rgba(var(--website-theme-shadow-rgb),0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.character-page-best-sub-stats-section-header {
  background:      var(--character-accent1);
  padding:         8px 10px;
  text-align:      center;
}

.character-page-best-sub-stats-section-header-left {
  font-size:       1rem;
  font-weight:     700;
  color:           var(--talent-header-left-color, var(--tab-text-active));
  text-transform:  uppercase;
}

.character-page-best-sub-stats-list {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             1rem;
  padding:         1rem;
  flex-wrap:       wrap;
}

.character-page-best-sub-stats-item {
  background: linear-gradient(135deg,
    var(--website-theme-bg-raised) 0%,
    var(--website-theme-bg-surface) 100%);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-md);
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 3px 8px rgba(var(--website-theme-shadow-rgb),0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--website-theme-text-primary);
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.character-page-best-sub-stats-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--character-accent1-rgb), 0.08) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.character-page-best-sub-stats-item:hover {
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 6px 18px rgba(var(--website-theme-shadow-rgb),0.65),
    0 0 0 1px rgba(var(--character-accent1-rgb),0.3),
    inset 0 0 30px rgba(var(--character-accent1-rgb), 0.05);
  transform: translateY(-2px);
}

.character-page-best-sub-stats-item:hover::before {
  opacity: 1;
}

.character-page-best-sub-stats-separator {
  font-size:       1rem;
  color:           var(--character-accent1);
  user-select:     none;
}

@media (max-width: 768px) {
  .character-page-best-sub-stats-list {
    gap:          .5rem;
    padding:      .5rem;
  }
  
  .character-page-best-sub-stats-item {
    flex:         1 1 auto;
    text-align:   center;
  }
  
  .character-page-best-sub-stats-separator {
    display: none;
  }
}


/* =====================================================
   BUILD TAB - WEAPONS SECTION
   ===================================================== */
.character-page-weapons-section {
  background: linear-gradient(135deg,
    var(--website-theme-bg-surface) 0%,
    var(--website-theme-bg-surface-alt) 100%);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-lg);
  padding: 0;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 3px 8px rgba(var(--website-theme-shadow-rgb),0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Extra spacing for the custom Team DMG block (Build tab). */
.character-page-team-dmg-section {
  margin-top: 1rem;
}

/* Team DMG section layout polish (scoped to avoid affecting other pages). */
.character-page-team-dmg-section .character-page-team-damage-list {
  gap: 0.6rem;
}

.character-page-team-dmg-section .character-page-team-damage-item {
  padding: 0.75rem 0.85rem;
  gap: 0.75rem;
  align-items: center;
}

.character-page-team-dmg-section .character-page-team-damage-team-comp {
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.character-page-team-dmg-section .character-page-team-damage-team-comp .entity-icons {
  gap: 0.4rem;
  flex-wrap: nowrap;
}

/* Save vertical space: hide the small "Team" / "Weapons" label chips here. */
.character-page-team-dmg-section .character-page-team-damage-team-comp .character-page-sets-label {
  display: none;
}

.character-page-team-dmg-section .character-page-team-damage-build {
  gap: 0.45rem;
}

/* Smaller icons for a denser list. */
.character-page-team-dmg-section .character-page-team-damage-team-comp .entity-icon {
  width: 26px;
  height: 26px;
}

.character-page-team-dmg-section .character-page-team-dmg-weapon {
  position: relative;
  display: inline-flex;
}

/* Team DMG (Lynae) compact one-row icons: characters + weapons */
.character-page-team-dmg-section .character-page-team-dmg-icons-row .entity-icons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.character-page-team-dmg-section .character-page-team-dmg-icons-row .entity-icon {
  width: 28px;
  height: 28px;
  display: block;
  box-sizing: border-box;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--website-theme-border-subtle);
  background: var(--website-theme-bg-raised);
}

.character-page-team-dmg-section .character-page-team-dmg-divider {
  opacity: 0.7;
  font-weight: 700;
  margin: 0 2px;
}

.character-page-team-dmg-section .character-page-team-dmg-weapon-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.character-page-team-dmg-section .character-page-team-dmg-refine-inline {
  position: static;
  transform: none;
  margin-left: 0;
  padding: 0 7px;
  height: 18px;
  line-height: 18px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: 999px;
}

.character-page-team-dmg-section .character-page-team-dmg-refine-inline.is-r5 {
  border-color: rgba(var(--six-star-weapon-rgb), 0.65);
  background: rgba(var(--six-star-weapon-rgb), 0.18);
  color: var(--website-theme-text-primary);
  box-shadow: 0 0 0 2px rgba(var(--six-star-weapon-rgb), 0.10);
}

@media (max-width: 500px) {
  .character-page-team-dmg-section .character-page-team-dmg-icons-row .entity-icons {
    gap: 4px;
  }

  .character-page-team-dmg-section .character-page-team-dmg-icons-row .entity-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
  }

  .character-page-team-dmg-section .character-page-team-dmg-weapon-inline {
    gap: 3px;
  }

  .character-page-team-dmg-section .character-page-team-dmg-refine-inline {
    padding: 0 6px;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
  }
}

.character-page-team-dmg-section .character-page-team-dmg-refine {
  position: absolute;
  right: 2px;
  bottom: 2px;
  margin-right: 0;
  padding: 0.10rem 0.28rem;
  font-size: 0.58rem;
  border-radius: 999px;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(var(--website-theme-shadow-rgb), 0.35);
}

/* Prevent old overlay badge positioning from affecting the inline refine labels. */
.character-page-team-dmg-section .character-page-team-dmg-weapon {
  position: static;
}

.character-page-team-dmg-section .character-page-team-dmg-refine {
  position: static;
  inset: auto;
  transform: none;
  margin-left: 4px;
}

.character-page-team-dmg-section .character-page-team-dmg-breakdown {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}

.character-page-team-dmg-section .character-page-team-dmg-breakdown-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  background: var(--website-theme-bg-surface-alt);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: 8px;
  padding: 0.22rem 0.42rem;
}

.character-page-team-dmg-section .character-page-team-dmg-breakdown-item .badge {
  margin-right: 0;
}

.character-page-team-dmg-section .character-page-team-dmg-number {
  font-family: 'Courier New', monospace;
  font-weight: 800;
  color: var(--website-theme-text-primary);
  font-size: 0.84rem;
  letter-spacing: 0.2px;
}

.character-page-team-dmg-section .character-page-team-damage-stats {
  min-width: 150px;
}

.character-page-team-dmg-section .character-page-team-damage-stats > div {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.4rem;
}

.character-page-team-dmg-section .character-page-team-damage-stats > div .badge {
  margin-right: 0;
}

.character-page-team-dmg-section .character-page-team-damage-value {
  font-size: 1.05rem;
  font-weight: 900;
}

.character-page-team-dmg-section .character-page-team-damage-percentage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--character-accent2-rgb), 0.35);
  background: rgba(var(--character-accent2-rgb), 0.10);
  font-weight: 900;
  letter-spacing: 0.3px;
}

@media (max-width: 768px) {
  .character-page-team-dmg-section .character-page-team-damage-item {
    padding: 1rem;
  }

  .character-page-team-dmg-section .character-page-team-dmg-breakdown {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .character-page-team-dmg-section .character-page-team-damage-team-comp {
    flex-wrap: wrap;
  }

  .character-page-team-dmg-section .character-page-team-damage-team-comp .entity-icons {
    flex-wrap: wrap;
  }
}

.character-page-weapons-section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  background: var(--character-accent1);
  color: var(--talent-header-left-color, var(--website-theme-bg-raised));
  font-size: var(--section-header-font-size, .76rem);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--website-theme-border-subtle);
}

.character-page-weapons-section-header-left {
  font-size:         1rem;
  font-weight:       700;
  color:             var(--talent-header-left-color, var(--tab-text-active));
  text-transform:    uppercase;
  letter-spacing:    1px;
}

.character-page-weapons-section-list {
  --weapons-gap: 1rem;
  --weapons-pad-x: 1.75rem;
  --weapons-pad-y: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: var(--weapons-gap);
  padding: calc(var(--weapons-pad-y) + 2px) var(--weapons-pad-x) var(--weapons-pad-y);
}

.character-page-weapon-section-item {
  --wp-radius: var(--website-theme-radius-lg);
  --wp-border: var(--website-theme-border-subtle);
  --wp-shadow-rgb: var(--website-theme-shadow-rgb);
  background: linear-gradient(
    135deg,
    var(--website-theme-bg-raised) 0%,
    var(--website-theme-bg-surface-alt) 100%
  );
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-radius);
  box-shadow:
    0 1px 0 rgba(var(--wp-shadow-rgb),0.55),
    0 3px 8px rgba(var(--wp-shadow-rgb),0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  display: flex;
  gap: 1rem;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.character-page-weapon-section-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%,
    rgba(var(--character-accent1-rgb), 0.06) 0%,
    transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.character-page-weapon-section-item:hover {
  box-shadow:
    0 1px 0 rgba(var(--wp-shadow-rgb),0.55),
    0 6px 18px rgba(var(--wp-shadow-rgb),0.65),
    0 0 0 1px rgba(var(--wp-glow-rgb),0.3),
    inset 0 0 30px rgba(var(--wp-glow-rgb), 0.05);
  transform: translateY(-2px);
}

.character-page-weapon-section-item:hover::before {
  opacity: 1;
}

.character-page-weapon-section-item[data-stars="6"] {
  --wp-accent-primary: var(--six-star-weapon-1);
  --wp-accent-light:   var(--six-star-weapon-2);
  --wp-accent-dark:    var(--six-star-weapon-3);
  --wp-glow-rgb:       var(--six-star-weapon-rgb);
}

.character-page-weapon-section-item[data-stars="5"] {
  --wp-accent-primary: var(--five-star-weapon-1);
  --wp-accent-light:   var(--five-star-weapon-2);
  --wp-accent-dark:    var(--five-star-weapon-3);
  --wp-glow-rgb:       var(--five-star-weapon-rgb);
}

.character-page-weapon-section-item[data-stars="4"] {
  --wp-accent-primary: var(--four-star-weapon-1);
  --wp-accent-light:   var(--four-star-weapon-2);
  --wp-accent-dark:    var(--four-star-weapon-3);
  --wp-glow-rgb:       var(--four-star-weapon-rgb);
}

.character-page-weapon-section-item[data-stars="3"] {
  --wp-accent-primary: var(--three-star-weapon-1);
  --wp-accent-light:   var(--three-star-weapon-2);
  --wp-accent-dark:    var(--three-star-weapon-3);
  --wp-glow-rgb:       var(--three-star-weapon-rgb);
}

.character-page-weapon-section-item[data-stars="2"] {
  --wp-accent-primary: var(--two-star-weapon-1);
  --wp-accent-light:   var(--two-star-weapon-2);
  --wp-accent-dark:    var(--two-star-weapon-3);
  --wp-glow-rgb:       var(--two-star-weapon-rgb);
}

.character-page-weapon-section-item[data-stars="1"] {
  --wp-accent-primary: var(--one-star-weapon-1);
  --wp-accent-light:   var(--one-star-weapon-2);
  --wp-accent-dark:    var(--one-star-weapon-3);
  --wp-glow-rgb:       var(--one-star-weapon-rgb);
}

.character-page-weapon-section-toggle-wrapper {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.character-page-weapon-section-translation-btn {
  background: rgba(0, 0, 0, 0.3);
  color: var(--website-theme-text-primary);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: var(--website-theme-radius-sm);
  padding: 0.45rem 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.character-page-weapon-section-item.ar-active .character-page-weapon-section-translation-btn {
  background: rgba(0, 0, 0, 0.4);
  color: var(--website-theme-text-primary);
  border-color: rgba(0, 0, 0, 0.5);
}

.character-page-weapon-section-image-container {
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  border-radius: var(--website-theme-radius-md);
  background-color: var(--wp-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: none;
  padding: 0px;
  box-shadow: 
    0 4px 10px rgba(var(--wp-glow-rgb), 0.5),
    0 0 16px rgba(var(--wp-glow-rgb), 0.4);
}

.character-page-weapon-section-image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

.character-page-weapon-section-info {
  flex: 1;
  color: var(--website-theme-text-primary);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.character-page-weapon-section-name-stars {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
}

.character-page-weapon-section-stars {
  color: var(--wp-accent-primary);
}

.character-page-weapon-section-stats {
  font-size: .875rem;
  color: var(--website-theme-text-secondary);
}

.character-page-weapon-section-description,
.character-page-weapon-section-comment {
  font-size: .875rem;
  line-height: 1.4;
  padding: .5rem;
  border-left: 3px solid var(--wp-accent-primary);
  background: var(--website-theme-bg-sunken);
  border-radius: var(--website-theme-radius-sm);
  color: var(--website-theme-text-secondary);
}

.character-page-weapon-section-item:not(.ar-active) .character-page-weapon-section-text-ar {
  display: none;
}

.character-page-weapon-section-item.ar-active .character-page-weapon-section-text-en {
  display: none;
}

.character-page-weapon-section-damage {
  display: inline-block;
  width: auto;
  max-width: fit-content;
  padding: .25rem .5rem;
  background: var(--wp-accent-light);
  border-left: 3px solid var(--wp-accent-primary);
  border-radius: var(--website-theme-radius-sm);
  color: var(--website-theme-text-dark);
  font-weight: 600;
  font-size: .875rem;
}

.character-page-weapon-section-item.ar-active .character-page-weapon-section-text-ar {
  display: block;
  direction: rtl;
  text-align: right;
}

.character-page-weapon-section-item:not(.ar-active) .character-page-weapon-section-translation-btn:hover {
  background:   rgba(0, 0, 0, 0.4) !important;
  color:        var(--website-theme-text-primary) !important;
  border-color: rgba(0, 0, 0, 0.5) !important;
}

.character-page-weapon-section-item:not(.ar-active) .character-page-weapon-section-translation-btn:focus,
.character-page-weapon-section-item:not(.ar-active) .character-page-weapon-section-translation-btn:active {
  outline:      none !important;
  background:   rgba(0, 0, 0, 0.35) !important;
  color:        var(--website-theme-text-primary) !important;
  border-color: rgba(0, 0, 0, 0.45) !important;
}

.character-page-weapon-section-item.ar-active .character-page-weapon-section-translation-btn {
  background:   rgba(0, 0, 0, 0.4) !important;
  color:        var(--website-theme-text-primary) !important;
  border-color: rgba(0, 0, 0, 0.5) !important;
}

.character-page-weapon-section-item.ar-active .character-page-weapon-section-translation-btn:hover {
  background:   rgba(0, 0, 0, 0.5) !important;
  color:        var(--website-theme-text-primary) !important;
  border-color: rgba(0, 0, 0, 0.6) !important;
}

.character-page-weapon-section-item.ar-active .character-page-weapon-section-translation-btn:focus,
.character-page-weapon-section-item.ar-active .character-page-weapon-section-translation-btn:active {
  outline:      none !important;
  background:   rgba(0, 0, 0, 0.4) !important;
  color:        var(--website-theme-text-primary) !important;
  border-color: rgba(0, 0, 0, 0.5) !important;
}

.character-page-weapon-section-build-note {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--website-theme-bg-sunken);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-sm);
  padding: 1rem;
  margin: 0px;
  font-size: 12px;
  color: var(--website-theme-text-secondary);
  font-style: italic;
}

.character-page-weapon-section-build-note .character-page-weapon-section-toggle-wrapper {
  position: static;
  order: 2;
  flex-shrink: 0;
}

.character-page-weapon-section-build-note .character-page-weapon-section-text-ar {
  display: none;
}

.character-page-weapon-section-build-note.ar-active .character-page-weapon-section-text-en {
  display: none;
}

.character-page-weapon-section-build-note.ar-active .character-page-weapon-section-text-ar {
  display: block;
  direction: rtl;
  text-align: right;
}

.character-page-weapon-section-build-note .character-page-weapon-section-note-text {
  order: 1;
  flex: 1;
}

@media (max-width: 768px) {
  .character-page-weapon-section-item {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
  }

  .character-page-weapon-section-image-container {
    order:          -1 !important;
    margin-bottom:  16px;
  }

  .character-page-weapon-section-toggle-wrapper {
    position: absolute;
    top:      .5rem;
    right:    .5rem;
  }
}


/* =====================================================
   BUILD TAB - ECHOES SECTION
   ===================================================== */
.character-page-echoes-section {
  background: linear-gradient(135deg,
    var(--website-theme-bg-surface) 0%,
    var(--website-theme-bg-surface-alt) 100%);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-lg);
  margin: 1rem 0;
  overflow: visible;
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 3px 8px rgba(var(--website-theme-shadow-rgb),0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
  z-index: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.character-page-echoes-section-header {
  display:           flex;
  align-items:       center;
  justify-content:   center;
  padding:           8px 10px;
  background:        var(--character-accent1);
  border-bottom:     1px solid var(--website-theme-border-subtle);
  text-transform:    uppercase;
  font-size:         var(--section-header-font-size, .76rem);
  font-weight:       800;
  letter-spacing:    1px;
  color:             var(--talent-header-left-color, var(--website-theme-bg-raised));
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.character-page-echoes-section-header-left {
  font-size:         1rem;
  font-weight:       700;
  color:             var(--talent-header-left-color, var(--tab-text-active));
  text-transform:    uppercase;
  letter-spacing:    1px;
}

.character-page-echoes-section-sets {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 10px;
  position: relative;
  overflow: visible;
}

.character-page-echoes-section-set {
  background: linear-gradient(135deg,
    var(--website-theme-bg-surface) 0%,
    var(--website-theme-bg-surface-alt) 100%);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-lg);
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 3px 8px rgba(var(--website-theme-shadow-rgb),0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  position: relative;
  overflow: visible;
  z-index: 2;
}

.character-page-echoes-section-set::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%,
    rgba(var(--character-accent1-rgb), 0.06) 0%,
    transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.character-page-echoes-section-set:has(.character-page-echoes-section-set-intro-echo:hover) {
  z-index: 99999;
}

.character-page-echoes-section-set:hover,
.character-page-echoes-section-set:has(.character-page-echoes-section-set-intro-echo:hover) {
  z-index: 10000;
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 6px 18px rgba(var(--website-theme-shadow-rgb),0.65),
    0 0 0 1px rgba(var(--character-accent1-rgb),0.3),
    inset 0 0 30px rgba(var(--character-accent1-rgb), 0.05);
  transform: translateY(-2px);
}

.character-page-echoes-section-set:hover::before {
  opacity: 1;
}

.echo-set-dropdown-inline-icon {
  width: 35px;
  height: 35px;
  vertical-align: center;
  margin: 0 0.2em;
  display: inline-block;
}

.character-page-echoes-section-set-name {
  font-size:   18px;
  font-weight: 700;
  color:       var(--website-theme-text-primary);
}

.character-page-echoes-section-set-intro {
  display:        flex;
  align-items:    flex-start;
  gap:            1rem;
}

.character-page-echoes-section-set-intro-image-wrapper {
  position:       relative;
  width:          6rem;
  height:         6rem;
  border-radius:  var(--website-theme-radius-md);
  background:     var(--website-theme-bg-raised);
  display:        flex;
  align-items:    center;
  justify-content:center;
  box-shadow:
    0 2px 8px rgba(var(--website-theme-shadow-rgb),0.3);
  cursor:         pointer;
  transition:     transform .2s ease;
}

.character-page-echoes-section-set-intro-image-wrapper:hover {
  transform: scale(1.05);
}

.character-page-echoes-section-set-intro-image-wrapper img {
  width:  80%;
  height: 80%;
  object-fit: contain;
}

.character-page-echoes-section-set-intro-echo {
  position: relative;
  width: 6rem;
  height: 6rem;
  border-radius: var(--website-theme-radius-md);
  background: var(--website-theme-bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(var(--website-theme-shadow-rgb), 0.3);
  cursor: pointer;
  transition: transform .2s ease;
  overflow: visible;
  z-index: 1;
}

.character-page-echoes-section-set-intro-echo:hover {
  transform: scale(1.05);
  z-index: 9999;
}

.character-page-echoes-section-set-intro-echo img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.character-page-echoes-section-set-intro-echo-tooltip {
  position: absolute;
  bottom: calc(100% + .5rem);
  left: 50%;
  transform: translateX(-50%);
  width: 270px;
  padding: .5rem;
  background: var(--website-theme-bg-surface);
  border: 1px solid var(--website-theme-border);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(var(--website-theme-shadow-rgb), 0.3);
  font-size: .75rem;
  color: var(--website-theme-text-primary);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
  pointer-events: none;
  z-index: 10000;
}

.character-page-echoes-section-set-intro-echo:hover .character-page-echoes-section-set-intro-echo-tooltip {
  opacity: 1;
  visibility: visible;
}

.character-page-echoes-section-set-bonus-wrapper {
  position: relative;
  padding-top: 1.5rem;
  flex: 1;
  min-width: 0;
}

.character-page-echoes-section-set-bonus-toggle-button {
  position:      absolute;
  top:           0;
  right:         0;
  background:    var(--website-theme-bg-sunken);
  color:         var(--website-theme-text-secondary);
  border:        1px solid var(--website-theme-border);
  border-radius: var(--website-theme-radius-sm);
  padding:       8px 12px;
  font-size:     16px;
  text-transform: uppercase;
  cursor:        pointer;
  transition:    background .18s, color .18s;
  margin-bottom: 8px !important;
}

.character-page-echoes-section-set-bonus-wrapper:not(.bonus-active) .character-page-echoes-section-set-bonus-toggle-button:hover {
  background:   var(--website-theme-bg-hover)      !important;
  color:        var(--website-theme-text-primary) !important;
  border-color: var(--website-theme-border-subtle)!important;
}

.character-page-echoes-section-set-bonus-wrapper:not(.bonus-active) .character-page-echoes-section-set-bonus-toggle-button:focus,
.character-page-echoes-section-set-bonus-wrapper:not(.bonus-active) .character-page-echoes-section-set-bonus-toggle-button:active {
  outline:      none                              !important;
  background:   var(--website-theme-bg-sunken)    !important;
  color:        var(--website-theme-text-secondary)!important;
  border-color: var(--website-theme-border-subtle)!important;
}

.character-page-echoes-section-set-bonus-text-en,
.character-page-echoes-section-set-bonus-text-ar {
  margin-top:    5px;
  font-size:     .875rem;
  color:         var(--website-theme-text-secondary);
  padding-right: 80px
}

.character-page-echoes-section-set-bonus-text-ar {
  display:      none;
  direction:    rtl;
  text-align:   right;
}

.character-page-echoes-section-set-bonus-wrapper.bonus-active .character-page-echoes-section-set-bonus-text-en {
  display: none;
}

.character-page-echoes-section-set-bonus-wrapper.bonus-active .character-page-echoes-section-set-bonus-text-ar {
  display: block;
}

.character-page-echoes-section-set-bonus-wrapper.bonus-active .character-page-echoes-section-set-bonus-toggle-button {
  background:   var(--character-accent1);
  color:        var(--website-theme-text-dark);
  border-color: var(--website-theme-border-strong);
}

.character-page-echoes-section-set-bonus-wrapper.bonus-active .character-page-echoes-section-set-bonus-toggle-button:hover {
  background:   var(--character-accent2);
  color:        var(--website-theme-text-dark);
  border-color: var(--website-theme-border-strong);
}

.character-page-echoes-section-set-bonus-wrapper.bonus-active .character-page-echoes-section-set-bonus-toggle-button:focus,
.character-page-echoes-section-set-bonus-wrapper.bonus-active .character-page-echoes-section-set-bonus-toggle-button:active {
  outline:      none;
}

.character-page-echoes-section-set-bonus-label {
  color: var(--character-accent5);
}

.character-page-echoes-section-set-cards-grid {
  display:            flex;
  flex-wrap:          wrap;
  gap:                .75rem;
}

.character-page-echoes-section-card {
  flex: 1 1 4.5rem;
  background: linear-gradient(135deg,
    var(--website-theme-bg-raised) 0%,
    var(--website-theme-bg-surface) 100%);
  border-radius: var(--website-theme-radius-md);
  border: 1px solid var(--website-theme-border-subtle);
  padding: .5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 3px 8px rgba(var(--website-theme-shadow-rgb),0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.character-page-echoes-section-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--character-accent1-rgb), 0.08) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.character-page-echoes-section-card:hover {
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb),0.55),
    0 6px 18px rgba(var(--website-theme-shadow-rgb),0.65),
    0 0 0 1px rgba(var(--character-accent1-rgb),0.3),
    inset 0 0 30px rgba(var(--character-accent1-rgb), 0.05);
  transform: translateY(-2px);
}

.character-page-echoes-section-card:hover::before {
  opacity: 1;
}

.character-page-echoes-section-card-title {
  font-size:       .75rem;
  font-weight:     600;
  color:           var(--website-theme-text-secondary);
  text-transform: uppercase;
}

.character-page-echoes-section-card-value {
  font-size:       .875rem;
  font-weight:     700;
  color: var(--character-accent2);
}

.character-page-echoes-section-details {
  background:       var(--website-theme-bg-sunken);
  border:           1px solid var(--website-theme-border);
  border-radius:    var(--website-theme-radius-sm);
  box-shadow:
    0 1px 0    rgba(var(--website-theme-shadow-rgb), 0.45),
    0 4px 10px rgba(var(--website-theme-shadow-rgb), 0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.character-page-echoes-section-details-header {
  display:           flex;
  align-items:       center;
  gap:               .5rem;
  padding:           8px 16px;
  background:        var(--website-theme-bg-raised);
  cursor:            default;
  user-select:       text;
  color: var(--website-theme-text-primary);
}

.character-page-echoes-section-details-arrow {
  display: none;
}

.character-page-echoes-section-details.expanded .character-page-echoes-section-details-arrow {
  transform: rotate(-180deg);
}

.character-page-echoes-section-details-rows {
  display:    flex;
  flex-direction: column;
  gap:       .5rem;
  padding:   8px 10px;
}

.character-page-echoes-section-details.expanded .character-page-echoes-section-details-rows {
  display:    flex;
}

.character-page-echoes-section-details-row {
  display:      flex;
  align-items:  center;
  background:   var(--website-theme-bg-surface-alt);
  border-radius: var(--website-theme-radius-sm);
  padding:       .5rem;
  gap:           .5rem;
}

.character-page-echoes-section-details-info {
  flex:             1;
  display:          flex;
  flex-direction:   column;
  gap:              .25rem;
}

.character-page-echoes-section-details-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--website-theme-text-primary);
  padding: 0 4px;
  font-size:     15px;
}

.character-page-echoes-section-details-label .label-text {
  flex: 1;
}

.character-page-echoes-section-details-label .label-percent {
  font-size: 16px;
  color: var(--website-theme-text-secondary);
  font-weight: 1000;
}

.character-page-echoes-section-details-label .character-page-echoes-section-details-suffix-sources-wrapper {
  color: var(--character-accent2) !important;
}

.character-page-echoes-section-details-bar {
  background:    var(--website-theme-bg-raised);
  border-radius: var(--website-theme-radius-sm);
  height:        .75rem;
  overflow:      hidden;
}

.character-page-echoes-section-details-bar-filled {
  background:    var(--character-accent1);
  height:        100%;
  transition:    width .3s ease;
}

.character-page-echoes-section-details-optimal-build {
  display: block;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 24px;
}

.character-page-echoes-section-details.expanded .character-page-echoes-section-details-optimal-build {
  display: block;
}

.character-page-echoes-section-optimal-build {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  background:     var(--website-theme-bg-sunken);
  border:         1px solid var(--website-theme-border);
  border-radius:  var(--website-theme-radius-sm);
  padding:        1rem;
}

.character-page-echoes-section-optimal-content {
  display:              grid;
  grid-template-columns: 30% 68%;
  grid-template-rows:    auto 1fr;
  column-gap:           2%;
  align-items:          start;
}

.character-page-echoes-section-optimal-title {
  font-size:      1rem;
  font-weight:    700;
  color:          var(--website-theme-text-primary);
  grid-column: 1;
  grid-row:    1;
  margin-bottom: 8px;
}

.character-page-echoes-section-optimal-table {
  grid-column: 1;
  grid-row:    2;
  width:       100%;
  margin:      0;
  border-collapse: collapse;
}

.character-page-echoes-section-optimal-table th,
.character-page-echoes-section-optimal-table td {
  padding:        .25rem .5rem;
  border:         1px solid var(--website-theme-border-subtle);
  font-size:      .875rem;
  color:          var(--website-theme-text-secondary);
}

.character-page-echoes-section-optimal-table th {
  background:     var(--website-theme-bg-raised);
  text-align:     left;
}

.character-page-echoes-section-optimal-comment-wrapper {
  grid-column: 2;
  grid-row:    1 / span 2;
  position:       relative;
  padding:        16px;
  background:     #1D2025;
  border-radius:  var(--website-theme-radius-sm);
  box-shadow:
    0 1px 4px rgba(var(--website-theme-shadow-rgb), 0.3);
  overflow:       visible;
}

.character-page-echoes-section-optimal-comment-toggle-button {
  position:      absolute;
  top:           0;
  right:         0;
  background:    var(--website-theme-bg-sunken);
  color:         var(--website-theme-text-secondary);
  border:        1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-sm);
  padding:       8px 12px;
  font-size:     12px;
  letter-spacing:.8px;
  font-weight:   600;
  text-transform:uppercase;
  cursor:        pointer;
  transition:    background .18s, color .18s;
  margin:       4px;
}

.character-page-echoes-section-optimal-comment-wrapper:not(.optimal-comment-active) .character-page-echoes-section-optimal-comment-toggle-button:hover {
  background:   var(--website-theme-bg-hover)      !important;
  color:        var(--website-theme-text-primary) !important;
  border-color: var(--website-theme-border-subtle)!important;
}

.character-page-echoes-section-optimal-comment-wrapper:not(.optimal-comment-active) .character-page-echoes-section-optimal-comment-toggle-button:focus,
.character-page-echoes-section-optimal-comment-wrapper:not(.optimal-comment-active) .character-page-echoes-section-optimal-comment-toggle-button:active {
  outline:      none                              !important;
  background:   var(--website-theme-bg-sunken)    !important;
  color:        var(--website-theme-text-secondary)!important;
  border-color: var(--website-theme-border-subtle)!important;
}

.character-page-echoes-section-optimal-comment-wrapper.optimal-comment-active .character-page-echoes-section-optimal-comment-toggle-button {
  background:   var(--character-accent1)            !important;
  color:        var(--website-theme-text-dark)    !important;
  border-color: var(--website-theme-border-strong)!important;
}

.character-page-echoes-section-optimal-comment-wrapper.optimal-comment-active .character-page-echoes-section-optimal-comment-toggle-button:hover {
  background:   var(--character-accent2)            !important;
  color:        var(--website-theme-text-dark)    !important;
  border-color: var(--website-theme-border-strong)!important;
}

/* ========================================
   CALCULATIONS TAB - DAMAGE BREAKDOWN
   ======================================== */

.character-page-damage-breakdown-section {
  position: relative;
  background: linear-gradient(135deg, var(--website-theme-bg-surface) 0%, var(--website-theme-bg-surface-alt) 100%);
  border: 1px solid var(--website-theme-border);
  border-radius: var(--website-theme-radius-lg);
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb), 0.45),
    0 6px 18px rgba(var(--website-theme-shadow-rgb), 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: visible;
  margin-bottom: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.character-page-damage-breakdown-section::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--website-theme-radius-lg);
  background: linear-gradient(135deg, rgba(var(--character-accent1-rgb), 0.05) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.character-page-damage-breakdown-section:hover::before {
  opacity: 1;
}

.character-page-damage-breakdown-section-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background: var(--character-accent1);
  color: var(--talent-header-left-color, var(--tab-text-active));
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: var(--website-theme-radius-lg) var(--website-theme-radius-lg) 0 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(var(--website-theme-shadow-rgb), 0.15);
}

.character-page-damage-breakdown-section-title {
  margin: 0;
  position: relative;
  z-index: 1;
  font-size: 1rem;
  color: var(--talent-header-left-color, var(--tab-text-active));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.character-page-damage-breakdown-container {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  overflow-x: auto;
  max-width: 100%;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.character-page-damage-breakdown-diagram {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 4px 12px rgba(var(--website-theme-shadow-rgb), 0.2));
}

.character-page-damage-breakdown-chart-wrapper {
  position: relative;
  width: 300px;
  height: 300px;
}

.character-page-damage-breakdown-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 32px rgba(var(--website-theme-shadow-rgb), 0.4));
}

.character-page-damage-breakdown-svg .dmg-segment {
  cursor: pointer;
  stroke: var(--website-theme-divider);
  stroke-width: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.character-page-damage-breakdown-svg .dmg-segment:hover {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 2;
  filter: brightness(1.2) drop-shadow(0 0 8px currentColor);
}

.character-page-damage-breakdown-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background: var(--website-theme-bg-raised);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
  box-shadow:
    0 0 0 3px var(--website-theme-border),
    0 4px 12px rgba(var(--website-theme-shadow-rgb), 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.08);
}

.character-page-damage-breakdown-top-percentages {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--website-theme-text-primary);
  line-height: 1.3;
  gap: 0.25rem;
}

.character-page-damage-breakdown-tooltip {
  position: absolute;
  padding: 0.5rem 0.75rem;
  background: var(--website-theme-bg-sunken);
  color: var(--website-theme-text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid var(--website-theme-border);
  border-radius: var(--website-theme-radius-sm);
  box-shadow:
    0 4px 12px rgba(var(--website-theme-shadow-rgb), 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
}

.character-page-damage-breakdown-tooltip.visible {
  opacity: 1;
}

.character-page-damage-breakdown-legend {
  flex: 0 0 auto;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  text-align: center;
}

.character-page-damage-breakdown-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--website-theme-radius-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  color: var(--website-theme-text-primary);
  background: var(--website-theme-bg-sunken);
  border: 1px solid var(--website-theme-border-subtle);
  justify-content: center;
  box-shadow: 0 1px 3px rgba(var(--website-theme-shadow-rgb), 0.15);
}

.character-page-damage-breakdown-legend-item:hover {
  background: var(--website-theme-bg-hover);
  border-color: var(--website-theme-border);
  box-shadow: 0 2px 6px rgba(var(--website-theme-shadow-rgb), 0.2);
  transform: translateY(-1px);
}

.character-page-damage-breakdown-legend-color {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--website-theme-radius-sm);
  border: 1px solid var(--website-theme-border-subtle);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.character-page-damage-breakdown-comment {
  font-size: 0.875rem;
  color: var(--website-theme-text-secondary);
  line-height: 1.6;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
  padding: 0 1.5rem 1rem;
  position: relative;
  z-index: 1;
}

.character-page-damage-breakdown-comment-text-en {
  display: block;
}

.character-page-damage-breakdown-comment-text-ar {
  display: none;
}

@media (max-width: 768px) {
  .character-page-damage-breakdown-container {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  
  .character-page-damage-breakdown-section-header {
    padding: 10px 12px;
  }
  
  .character-page-damage-breakdown-chart-wrapper {
    width: 250px;
    height: 250px;
  }
  
  .character-page-damage-breakdown-center {
    width: 100px;
    height: 100px;
  }
  
  .character-page-damage-breakdown-top-percentages {
    font-size: 0.8rem;
  }
  
  .character-page-damage-breakdown-legend {
    max-width: 100%;
    gap: 0.5rem;
  }
  
  .character-page-damage-breakdown-legend-item {
    padding: 0.4rem 0.6rem;
  }
  
  .character-page-damage-breakdown-legend-item span {
    font-size: 0.9rem;
    line-height: 1.2;
  }
  
  .character-page-damage-breakdown-comment {
    padding: 0 1rem 1rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {
  .character-page-damage-breakdown-chart-wrapper {
    width: 200px;
    height: 200px;
  }
  
  .character-page-damage-breakdown-center {
    width: 80px;
    height: 80px;
  }
  
  .character-page-damage-breakdown-container {
    padding: 1rem;
  }
  
  .character-page-damage-breakdown-section-header {
    padding: 10px;
  }
  
  .character-page-damage-breakdown-section-title {
    font-size: 0.875rem;
  }
  
  .character-page-damage-breakdown-legend {
    gap: 0.4rem;
  }
  
  .character-page-damage-breakdown-legend-item {
    padding: 0.35rem 0.5rem;
    gap: 0.4rem;
  }
  
  .character-page-damage-breakdown-legend-item span {
    font-size: 0.8rem;
    line-height: 1.15;
  }
  
  .character-page-damage-breakdown-legend-color {
    width: 1rem;
    height: 1rem;
  }
  
  .character-page-damage-breakdown-comment {
    padding: 0 0.75rem 0.75rem;
    font-size: 0.75rem;
  }
}

.character-page-echoes-section-optimal-comment-wrapper.optimal-comment-active .character-page-echoes-section-optimal-comment-toggle-button:focus,
.character-page-echoes-section-optimal-comment-wrapper.optimal-comment-active .character-page-echoes-section-optimal-comment-toggle-button:active {
  outline:      none                              !important;
}

.character-page-echoes-section-optimal-comment-text-en,
.character-page-echoes-section-optimal-comment-text-ar {
  font-size:     .875rem;
  color:         var(--website-theme-text-secondary);
  padding-top: 20px;
  line-height: 1.2;
}

.character-page-echoes-section-optimal-comment-text-ar {
  display:      none;
  direction:    rtl;
  text-align:   right;
  padding-top:  20px;
}

.character-page-echoes-section-optimal-comment-wrapper.optimal-comment-active .character-page-echoes-section-optimal-comment-text-en {
  display: none;
}

.character-page-echoes-section-optimal-comment-wrapper.optimal-comment-active .character-page-echoes-section-optimal-comment-text-ar {
  display: block;
}

.character-page-echoes-section-optimal-comment-title {
  color: var(--character-accent5);
}

@media (max-width: 768px) {
  .character-page-echoes-section-set-intro {
    display:           flex !important;
    flex-direction:    row !important;
    flex-wrap:         wrap !important;
    justify-content:   center !important;
    gap:               1rem !important;
    text-align:        initial !important;
    align-items:       initial !important;
  }

  .character-page-echoes-section-set-intro-echo-tooltip {
    width: 150px;
  }

  .character-page-echoes-section-set-intro > .character-page-echoes-section-set-intro-image-wrapper,
  .character-page-echoes-section-set-intro > .character-page-echoes-section-set-intro-echo {
    flex:       0 0 calc((100% - 2rem) / 3) !important;
    max-width:  calc((100% - 2rem) / 3) !important;
    width:      100% !important;
    aspect-ratio: 1 / 1 !important;
  }

  .character-page-echoes-section-set-bonus-wrapper {
    flex:          0 0 100% !important;
    max-width:     100% !important;
    padding-top:   0 !important;
    text-align:    center !important;
  }

  .character-page-echoes-section-set-bonus-toggle-button {
    position:      static !important;
    margin:        0 auto 1rem !important;
  }

  .character-page-echoes-section-set-cards-grid {
    display:        flex !important;
    flex-wrap:      wrap !important;
    justify-content: center !important;
    gap:            .75rem !important;
  }
  
  .character-page-echoes-section-set-cards-grid > .character-page-echoes-section-card {
    flex: 0 0 calc((100% - (2 * .75rem)) / 3) !important;
  }

  .character-page-echoes-section-details-optimal-build .character-page-echoes-section-optimal-content {
    display:        flex !important;
    flex-direction: column !important;
    gap:            1rem !important;
  }

  .character-page-echoes-section-set-bonus-text-ar {
    text-align: center !important;
  }

  .character-page-echoes-section-set-bonus-text-en,
  .character-page-echoes-section-set-bonus-text-ar {
    margin-top:    0px;
    font-size:     .875rem;
    color:         var(--website-theme-text-secondary);
    padding-right: 0px
  }
  
  .character-page-echoes-section-details-label .label-text {
    padding-right:      30px;
  }
}

/* ========================================
   SYNERGIES SECTION
   ======================================== */

.character-page-synergies-section {
  --synergy-highlight-5: #ffd700;
  --synergy-highlight-4: #d66bf4;
}

.character-page-synergies-section {
  background: var(--website-theme-bg-surface);
  border: 1px solid var(--website-theme-border);
  border-radius: var(--website-theme-radius-md);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow:
    0 1px 0    rgba(var(--website-theme-shadow-rgb), 0.45),
    0 4px 10px rgba(var(--website-theme-shadow-rgb), 0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.character-page-synergies-section-header {
  display:           flex;
  align-items:       center;
  justify-content:   center;
  padding:           8px 10px;
  background:        var(--character-accent1);
  border-bottom:     1px solid var(--website-theme-border-subtle);
  position:          relative;
}

.character-page-synergies-section-title {
  font-size:         1rem;
  font-weight:       700;
  color:             var(--talent-header-left-color, var(--tab-text-active));
  text-transform:    uppercase;
  letter-spacing:    1px;
}

.character-page-synergies-section-translation-btn {
  background:        rgba(0, 0, 0, 0.3);
  color:             var(--website-theme-text-primary);
  border:            1px solid rgba(0, 0, 0, 0.4);
  border-radius:     var(--website-theme-radius-sm);
  padding:           0.45rem 0.75rem;
  font-size:         0.75rem;
  font-weight:       600;
  text-transform:    uppercase;
  letter-spacing:    0.5px;
  cursor:            pointer;
  transition:        all 0.2s ease;
  position:          absolute;
  right:             10px;
}

.character-page-synergies-section-translation-btn:hover {
  background:        rgba(0, 0, 0, 0.4);
  color:             var(--website-theme-text-primary);
  border-color:      rgba(0, 0, 0, 0.5);
}

.character-page-synergies-section-content {
  padding:           1rem;
  display:           flex;
  flex-direction:    column;
  gap:               2rem;
}

.character-page-synergies-section-lang-en { 
  display: block; 
}

.character-page-synergies-section-lang-ar { 
  display: none; 
}

.character-page-synergies-section.ar-active .character-page-synergies-section-lang-en { 
  display: none; 
}

.character-page-synergies-section.ar-active .character-page-synergies-section-lang-ar { 
  display: block; 
}

.character-page-synergies-section-item {
  --wp-radius:       var(--website-theme-radius-md);
  --wp-border:       var(--website-theme-border-subtle);
  --wp-shadow-rgb:   var(--website-theme-shadow-rgb);

  background:        linear-gradient(
                       135deg,
                       var(--website-theme-bg-raised)     0%,
                       var(--website-theme-bg-surface-alt) 100%
                     );
  border:            1px solid var(--wp-border);
  border-radius:     var(--wp-radius);
  box-shadow:
    0 1px 0    rgba(var(--wp-shadow-rgb), 0.45),
    0 4px 10px rgba(var(--wp-shadow-rgb), 0.45),
    0 8px 20px rgba(var(--wp-shadow-rgb), 0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);

  display:           flex;
  align-items:       center;
  gap:               1rem;
  margin-bottom:     1rem;
  padding:           1px 12px;
  position:          relative;
  overflow:          hidden;
  transition:        transform .18s ease,
                     box-shadow .25s ease;
}

.character-page-synergies-section-item:hover {
  transform: translateY(-3px);
}

.character-page-synergies-section-image {
  flex-shrink:       0;
  width:             6rem;
  height:            6rem;
  border-radius:     var(--website-theme-radius-sm);
  overflow:          hidden;
  box-shadow:
    0 1px 0    rgba(var(--website-theme-shadow-rgb), 0.45),
    0 4px 10px rgba(var(--website-theme-shadow-rgb), 0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);
  margin-top: 10px;
  margin-bottom: 10px;
}

.character-page-synergies-section-image img {
  width:             100%;
  height:            100%;
  object-fit:        cover;
}

.character-page-synergies-section-text {
  flex:              1;
  color:             var(--website-theme-text-primary);
  font-size:         0.875rem;
  line-height:       1.6;
}

.character-page-synergies-section-name highlight {
  font-weight:       700;
}

.character-page-synergies-section-item[data-stars="5"] .character-page-synergies-section-name highlight {
  color:             var(--synergy-highlight-5);
}

.character-page-synergies-section-item[data-stars="4"] .character-page-synergies-section-name highlight {
  color:             var(--synergy-highlight-4);
}

.character-page-synergies-section-lang-ar {
  direction: rtl;
  text-align: right;
}

.character-page-synergies-section-lang-ar .character-page-synergies-section-text p {
  direction: rtl;
  unicode-bidi: isolate;
}

@media (max-width: 768px) {
  .character-page-synergies-section-item {
    flex-direction:    column;
    align-items:       center;
    text-align:        center;
  }
  
  .character-page-synergies-section-image {
    width:             5rem;
    height:            5rem;
  }
}

/* ===========================
   CHARACTER COMBO DAMAGE SECTION
   =========================== */

.character-combo-damage-section {
  background: var(--website-theme-bg-surface);
  border: 1px solid var(--website-theme-border);
  border-radius: var(--website-theme-radius-md);
  overflow: hidden;
  margin: 0 0 1rem 0;
  box-shadow: 0 1px 0 rgba(var(--website-theme-shadow-rgb), 0.45), 0 4px 10px rgba(var(--website-theme-shadow-rgb), 0.45), inset 0 1px 0 rgba(255,255,255,0.04);
}

.character-combo-damage-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  background: var(--character-accent1);
  color: var(--talent-header-left-color, var(--tab-text-active));
  border-bottom: 1px solid var(--website-theme-border-subtle);
}

.character-combo-damage-title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--talent-header-left-color, var(--tab-text-active));
}

.character-combo-damage-content { 
  padding: 1.75rem; 
}

.character-combo-damage-alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  margin: 0 0 0.75rem 0;
  background: linear-gradient(90deg, rgba(255,243,205,0.95), rgba(255,250,235,0.95));
  border: 1px solid rgba(255,193,7,0.18);
  border-radius: var(--website-theme-radius-sm);
  color: #5a4a00;
  font-size: 0.95rem;
}

.character-combo-damage-alert-icon { 
  font-size: 1.15rem; 
  line-height: 1; 
}

.character-combo-damage-alert-text { 
  line-height: 1.3; 
}

.character-combo-damage-recommended {
  padding: 0.85rem 1rem;
  background: var(--website-theme-bg-sunken);
  border: 1px solid var(--website-theme-border-subtle);
  border-left: 3px solid var(--character-accent1);
  border-radius: var(--website-theme-radius-sm);
  margin: 0 0 1rem 0;
}

.character-combo-damage-recommended-title {
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--website-theme-text-primary);
  margin-bottom: 0.35rem;
}

.character-combo-damage-recommended-text {
  color: var(--website-theme-text-secondary);
  font-size: 0.9rem;
}

.character-combo-damage-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1rem;
}

#character-page-character-combo-dmg { 
  margin: 0; 
}

#character-page-character-combo-dmg-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1rem;
}

.character-combo-dmg-item {
  --tp-radius: var(--website-theme-radius-md);
  --tp-border: var(--website-theme-border-subtle);
  --tp-shadow-rgb: var(--website-theme-shadow-rgb);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--website-theme-bg-raised) 0%, var(--website-theme-bg-surface-alt) 100%);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: 0 1px 0 rgba(var(--tp-shadow-rgb), 0.45), 0 4px 10px rgba(var(--tp-shadow-rgb), 0.45), 0 8px 20px rgba(var(--tp-shadow-rgb), 0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 0.18s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.character-combo-dmg-item:hover {
  transform: translateY(-3px);
  border-color: var(--website-theme-border);
  box-shadow: 0 1px 0 rgba(var(--tp-shadow-rgb), 0.5), 0 5px 14px rgba(var(--tp-shadow-rgb), 0.55), 0 10px 28px rgba(var(--tp-shadow-rgb), 0.6), 0 0 0 1px rgba(var(--character-accent1-rgb), 0.18), inset 0 1px 0 rgba(255,255,255,0.06);
}

.character-combo-dmg-item > div:first-child { 
  font-weight: 600; 
  margin-bottom: 6px; 
}

.character-combo-dmg-item hr {
  border: 0; 
  border-top: 1px solid var(--character-border-color, rgba(255,255,255,0.06));
  margin: 8px 0;
}

#character-page-character-combo-dmg .entity-icons,
.character-combo-damage-section .entity-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 6px 0;
}

#character-page-character-combo-dmg .entity-icons .entity-icon,
.character-combo-damage-section .entity-icons .entity-icon {
  width: 32px; 
  height: 32px; 
  border-radius: 4px; 
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(var(--website-theme-shadow-rgb), 0.25);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#character-page-character-combo-dmg .entity-icons .entity-icon:hover,
.character-combo-damage-section .entity-icons .entity-icon:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(var(--website-theme-shadow-rgb), 0.35), 0 0 0 3px rgba(var(--website-theme-glow-rgb), 0.10);
  border-color: var(--website-theme-border-strong);
}

#character-page-character-combo-dmg .ccd-header,
.character-combo-damage-section .ccd-header { 
  font-weight: 700; 
  color: var(--website-theme-text-primary); 
}

#character-page-character-combo-dmg .ccd-header .ccd-label,
.character-combo-damage-section .ccd-header .ccd-label { 
  opacity: 0.9; 
  font-weight: 700; 
  margin-right: 6px; 
}

#character-page-character-combo-dmg .ccd-header .ccd-combo-name,
.character-combo-damage-section .ccd-header .ccd-combo-name { 
  color: var(--website-theme-text-primary); 
}

.badge {
  display: inline-block;
  padding: 0.18rem 0.45rem;
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
  vertical-align: middle;
  background: var(--website-theme-bg-sunken);
  color: var(--website-theme-text-secondary);
  margin-right: 0.35rem;
}

#character-page-character-combo-dmg .badge-combo,
.character-combo-damage-section .badge-combo {
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
  border-color: rgba(var(--character-accent1-rgb), 0.45);
  background: rgba(var(--character-accent1-rgb), 0.12);
  color: var(--website-theme-text-primary);
}

#character-page-character-combo-dmg .ccd-icons,
.character-combo-damage-section .ccd-icons { 
  margin: 4px 0 8px; 
}

#character-page-character-combo-dmg .ccd-fields,
.character-combo-damage-section .ccd-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

#character-page-character-combo-dmg .ccd-field,
.character-combo-damage-section .ccd-field {
  color: var(--website-theme-text-secondary);
  font-size: 0.9rem;
}

#character-page-character-combo-dmg .ccd-field .ccd-label,
.character-combo-damage-section .ccd-field .ccd-label { 
  font-weight: 600; 
  opacity: 0.9; 
  margin-right: 6px; 
}

#character-page-character-combo-dmg .ccd-field .ccd-value,
.character-combo-damage-section .ccd-field .ccd-value { 
  color: var(--website-theme-text-primary); 
}

#character-page-character-combo-dmg .ccd-field .ccd-dmg,
.character-combo-damage-section .ccd-field .ccd-dmg {
  color: var(--character-accent2);
  font-weight: 600;
}

#character-page-character-combo-dmg .ccd-field .ccd-pct,
.character-combo-damage-section .ccd-field .ccd-pct {
  font-weight: 700;
}

#character-page-character-combo-dmg .ccd-actions,
.character-combo-damage-section .ccd-actions { 
  margin-top: 10px; 
  display: flex; 
  gap: 8px; 
}

#character-page-character-combo-dmg .ccd-rotation-btn,
.character-combo-damage-section .ccd-rotation-btn,
#character-page-character-combo-dmg .ccd-btn-rotation,
.character-combo-damage-section .ccd-btn-rotation { 
  background: var(--website-theme-bg-sunken);
  color: var(--website-theme-text-secondary);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-sm);
  padding: .5rem .75rem;
  font-size: .72rem;
  letter-spacing: .8px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s, color .18s;
  width: 100%;
}

#character-page-character-combo-dmg .ccd-rotation-btn:hover,
.character-combo-damage-section .ccd-rotation-btn:hover,
#character-page-character-combo-dmg .ccd-btn-rotation:hover,
.character-combo-damage-section .ccd-btn-rotation:hover {
  background: var(--website-theme-bg-hover);
  color: var(--website-theme-text-primary);
}

.character-page-calculations-alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  margin: 0 0 0.75rem 0;
  background: linear-gradient(90deg, rgba(255,243,205,0.95), rgba(255,250,235,0.95));
  border: 1px solid rgba(255,193,7,0.18);
  border-radius: var(--website-theme-radius-sm);
  color: #5a4a00;
  font-size: 0.95rem;
}

.character-page-calculations-alert-icon { 
  font-size: 1.15rem; 
  line-height: 1; 
}

.character-page-calculations-alert-text { 
  line-height: 1.3; 
}

.character-page-recommended-combo {
  padding: 0.85rem 1rem;
  background: var(--website-theme-bg-sunken);
  border: 1px solid var(--website-theme-border-subtle);
  border-left: 3px solid var(--character-accent1);
  border-radius: var(--website-theme-radius-sm);
  margin: 0 0 1rem 0;
}

.character-page-recommended-combo-title {
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--website-theme-text-primary);
  margin-bottom: 0.35rem;
}

.character-page-recommended-combo-text {
  color: var(--website-theme-text-secondary);
  font-size: 0.9rem;
}

#character-page-character-combo-dmg .pct-badge,
.character-combo-damage-section .pct-badge {
  display: inline-block;
  padding: 0.18rem 0.45rem;
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
  vertical-align: middle;
  background: var(--website-theme-bg-sunken);
  color: var(--website-theme-text-primary);
}

#character-page-character-combo-dmg .pct-badge.pct-100,
.character-combo-damage-section .pct-badge.pct-100 {
  border-color: #2ecb70;
  background: rgba(46, 203, 112, 0.16);
}

#character-page-character-combo-dmg .pct-badge.pct-95,
.character-combo-damage-section .pct-badge.pct-95 {
  border-color: #FFE066;
  background: rgba(255, 224, 102, 0.18);
}

#character-page-character-combo-dmg .pct-badge.pct-90,
.character-combo-damage-section .pct-badge.pct-90 {
  border-color: #FFD04D;
  background: rgba(255, 208, 77, 0.18);
}

#character-page-character-combo-dmg .pct-badge.pct-85,
.character-combo-damage-section .pct-badge.pct-85 {
  border-color: #FFC04D;
  background: rgba(255, 192, 77, 0.18);
}

#character-page-character-combo-dmg .pct-badge.pct-80,
.character-combo-damage-section .pct-badge.pct-80 {
  border-color: #FF9E3D;
  background: rgba(255, 158, 61, 0.18);
}

#character-page-character-combo-dmg .pct-badge.pct-75,
.character-combo-damage-section .pct-badge.pct-75 {
  border-color: #FF7A3D;
  background: rgba(255, 122, 61, 0.20);
}

#character-page-character-combo-dmg .pct-badge.pct-lte75,
.character-combo-damage-section .pct-badge.pct-lte75 {
  border-color: var(--fusion-accent1);
  background: rgba(201, 55, 42, 0.22);
}

#character-page-character-combo-dmg-dialog,
#combo-rotation-dialog {
  min-width: min(500px, 94vw);
  max-width: min(750px, 94vw);
  padding: 0;
  background: var(--website-theme-bg-surface);
  border: 1px solid var(--website-theme-border);
  border-radius: 12px;
  color: var(--website-theme-text-primary);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255,255,255,0.06) inset;
  overflow: hidden;
}

#character-page-character-combo-dmg-dialog::backdrop,
#combo-rotation-dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#character-page-character-combo-dmg-dialog .dialog-title,
#combo-rotation-dialog .dialog-title,
#character-page-character-combo-dmg-dialog form > div:first-child,
#combo-rotation-dialog form > div:first-child {
  font-size: 1.125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--website-theme-text-primary);
  margin: 0;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(var(--character-accent1-rgb), 0.15) 0%, rgba(var(--character-accent1-rgb), 0.05) 100%);
  border-bottom: 2px solid rgba(var(--character-accent1-rgb), 0.3);
  position: relative;
}

#character-page-character-combo-dmg-dialog .dialog-title::before,
#combo-rotation-dialog .dialog-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--character-accent1);
  border-radius: 0 2px 2px 0;
}


#character-page-character-combo-dmg-dialog form > div:first-child::after {
  display: none;
}

#character-page-character-combo-dmg-dialog form > div:first-child:empty::after {
  display: none;
  content: none;
}

#character-page-character-combo-dmg-dialog form > div:first-child:empty {
  margin: 0;
}

.rotation-steps {
  margin: 0;
  padding: 0.75rem 1.5rem 1.5rem;
}

.rotation-steps-label {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--website-theme-text-secondary);
  margin: 0 0 0.625rem 0;
}

.rotation-steps h4 {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--website-theme-text-secondary);
  margin: 0 0 0.75rem 0;
}

.rotation-step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: rotation-counter;
}

.rotation-step-list li {
  counter-increment: rotation-counter;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem 0.5rem 3rem;
  background: var(--website-theme-bg-sunken);
  border: 1px solid var(--website-theme-border-subtle);
  border-left: 3px solid rgba(var(--character-accent1-rgb), 0.5);
  border-radius: 6px;
  line-height: 1.4;
  color: var(--website-theme-text-primary);
  position: relative;
  transition: all 0.2s ease;
}

.rotation-step-list li:hover {
  background: var(--website-theme-bg-surface-alt);
  border-left-color: var(--character-accent1);
  transform: translateX(2px);
}

.rotation-step-list li::before {
  content: counter(rotation-counter, decimal-leading-zero);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--character-accent1);
  background: rgba(var(--character-accent1-rgb), 0.15);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(var(--character-accent1-rgb), 0.3);
}

.rotation-step-list li:last-child {
  margin-bottom: 0;
}

.rotation-video {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--website-theme-border);
}

.video-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #ff0000;
  color: white;
  text-decoration: none;
  border-radius: var(--website-theme-radius-sm);
  font-weight: 600;
  transition: all 0.3s ease;
}

.video-link:hover {
  background: #cc0000;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.video-link svg {
  width: 24px;
  height: 24px;
}

.dialog-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(var(--website-theme-bg-rgb), 0.8);
  border: 1px solid var(--website-theme-border-subtle);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--website-theme-text-secondary);
  transition: all 0.2s ease;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.dialog-close:hover {
  color: var(--website-theme-text-primary);
  background: var(--website-theme-bg-surface-alt);
  border-color: var(--website-theme-border);
  transform: rotate(90deg);
}

.dialog-content {
  position: relative;
}

.dialog-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0;
}

.dialog-body::-webkit-scrollbar {
  width: 8px;
}

.dialog-body::-webkit-scrollbar-track {
  background: var(--website-theme-bg-sunken);
}

.dialog-body::-webkit-scrollbar-thumb {
  background: var(--website-theme-border);
  border-radius: 4px;
}

.dialog-body::-webkit-scrollbar-thumb:hover {
  background: var(--website-theme-border-subtle);
}

.dialog-actions {
  display: flex;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--website-theme-bg-sunken);
  border-top: 1px solid var(--website-theme-border-subtle);
  justify-content: flex-end;
}

.dialog-btn {
  padding: 0.625rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dialog-btn-exit {
  background: var(--website-theme-bg-surface-alt);
  color: var(--website-theme-text-secondary);
  border-color: var(--website-theme-border-subtle);
}

.dialog-btn-exit:hover {
  background: var(--website-theme-bg-surface);
  color: var(--website-theme-text-primary);
  border-color: var(--website-theme-border);
}

.dialog-btn-video {
  background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
  color: white;
  border-color: rgba(255, 0, 0, 0.3);
  box-shadow: 0 2px 8px rgba(255, 0, 0, 0.2);
}

.dialog-btn-video:hover {
  background: linear-gradient(135deg, #cc0000 0%, #990000 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.dialog-btn-video svg {
  width: 18px;
  height: 18px;
}

#ccd-dialog-note-wrap { 
  margin: .75rem 0 .5rem; 
  padding: .5rem .6rem; 
  background: var(--website-theme-bg-sunken); 
  border: 1px solid var(--website-theme-border-subtle); 
  border-radius: var(--website-theme-radius-sm);
}

#ccd-dialog-note-wrap strong { 
  font-weight: 800; 
  text-transform: uppercase; 
  letter-spacing: .6px; 
  color: var(--website-theme-text-primary);
}

#ccd-dialog-note { 
  color: var(--website-theme-text-secondary); 
}

#ccd-dialog-rot-text {
  white-space: pre-wrap;
  background: var(--website-theme-bg-sunken);
  padding: .75rem .9rem;
  border-radius: var(--website-theme-radius-sm);
  border: 1px solid var(--website-theme-border-subtle);
  line-height: 1.45;
  font-size: .92rem;
  max-height: 40vh;
  overflow: auto;
}

#character-page-character-combo-dmg-dialog div strong { 
  font-weight: 700; 
  color: var(--website-theme-text-primary);
}

#ccd-dialog-rot-time { 
  display: inline-block; 
  padding: 0.18rem 0.45rem; 
  border: 1px solid var(--website-theme-border-subtle); 
  border-radius: 6px; 
  background: var(--website-theme-bg-surface-alt); 
  color: var(--website-theme-text-primary);
  margin-left: .35rem; 
}

#character-page-character-combo-dmg-dialog menu {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  padding: .75rem 0 0;
  margin: .75rem 0 0;
  border-top: 1px solid var(--website-theme-border-subtle);
}

#character-page-character-combo-dmg-dialog menu > button {
  min-width: 112px;
}

#character-page-character-combo-dmg-dialog button {
  cursor: pointer;
  border-radius: var(--website-theme-radius-sm);
  padding: .5rem .9rem;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  border: 1px solid var(--website-theme-border-subtle);
  background: var(--website-theme-bg-sunken);
  color: var(--website-theme-text-secondary);
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .2s ease;
}

#character-page-character-combo-dmg-dialog button:hover {
  background: var(--website-theme-bg-hover);
  color: var(--website-theme-text-primary);
}

#character-page-character-combo-dmg-dialog button:disabled,
#character-page-character-combo-dmg-dialog button[aria-disabled="true"] {
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none;
}

#character-page-character-combo-dmg-dialog .ccd-dialog-video-btn {
  --yt-red: #E62117;
  --yt-red-hover: #cc1d12;
  border-color: var(--yt-red);
  background: var(--yt-red);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2) inset;
  position: relative;
}

#character-page-character-combo-dmg-dialog .ccd-dialog-video-btn:hover {
  background: var(--yt-red-hover);
  border-color: var(--yt-red-hover);
  box-shadow: 0 0 0 3px rgba(230, 33, 23, 0.18);
}

#character-page-character-combo-dmg-dialog .ccd-dialog-video-btn::before {
  content: "";
  display: inline-block;
  width: 0; 
  height: 0;
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-right: 8px;
  vertical-align: middle;
}

#character-page-character-combo-dmg-dialog .ccd-steps-cards {
  --ccd-step-badge-w: 1.9rem;
  --ccd-step-badge-gap: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0.35rem;
  max-height: 40vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#character-page-character-combo-dmg-dialog .ccd-step-card {
  position: relative;
  padding: 0.6rem 0.75rem 0.6rem calc(var(--ccd-step-badge-w) + var(--ccd-step-badge-gap) + 0.75rem);
  background: var(--website-theme-bg-sunken);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-sm);
  color: var(--website-theme-text-primary);
  line-height: 1.45;
  font-size: .92rem;
  transition: background .18s ease, border-color .18s ease, box-shadow .2s ease;
}

#character-page-character-combo-dmg-dialog .ccd-step-card:hover {
  background: var(--website-theme-bg-hover);
  border-color: var(--website-theme-border);
}

#character-page-character-combo-dmg-dialog .ccd-step-num {
  position: absolute;
  left: 0.6rem;
  top: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ccd-step-badge-w);
  padding: 0.12rem 0.4rem;
  text-align: center;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  line-height: 1.2;
  background: var(--character-accent1);
  color: #fff;
}

#character-page-character-combo-dmg-dialog .ccd-step-body {
  white-space: normal;
}

@media (max-width: 768px) {
  .character-combo-damage-content { 
    padding: 1.5rem 1rem; 
  }

  .character-combo-damage-header { 
    flex-direction: column; 
    align-items: stretch; 
    gap: 0.5rem; 
  }
  
  .character-combo-damage-list,
  #character-page-character-combo-dmg-list { 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  }
  
  .character-combo-dmg-item { 
    padding: 1rem; 
  }
}

@media (max-width: 480px) {
  .character-combo-damage-content { 
    padding: 1rem; 
  }

  .character-combo-damage-alert,
  .character-page-calculations-alert { 
    padding: 0.5rem 0.75rem; 
    font-size: 0.9rem; 
  }
  
  #character-page-character-combo-dmg .entity-icons .entity-icon,
  .character-combo-damage-section .entity-icons .entity-icon { 
    width: 28px; 
    height: 28px; 
  }
  
  .character-combo-damage-list,
  #character-page-character-combo-dmg-list { 
    grid-template-columns: 1fr; 
  }
  
  #character-page-character-combo-dmg .ccd-actions,
  .character-combo-damage-section .ccd-actions { 
    gap: 6px; 
  }
  
  #character-page-character-combo-dmg .ccd-rotation-btn,
  .character-combo-damage-section .ccd-rotation-btn,
  #character-page-character-combo-dmg .ccd-btn-rotation,
  .character-combo-damage-section .ccd-btn-rotation { 
    width: 100%; 
  }
  
  #character-page-character-combo-dmg-dialog { 
    padding: 1rem; 
  }
  
  #character-page-character-combo-dmg-dialog .ccd-step-card { 
    font-size: .88rem; 
  }
  
  #character-page-character-combo-dmg-dialog .ccd-steps-cards { 
    --ccd-step-badge-w: 1.7rem; 
    --ccd-step-badge-gap: 0.7rem; 
    max-height: 50vh;
  }
  
  #ccd-dialog-rot-text { 
    max-height: 50vh; 
  }
}

/* ===========================
   ROTATIONS SECTION
   =========================== */

.character-page-rotation-section {
  background: var(--website-theme-bg-surface);
  border: 1px solid var(--website-theme-border);
  border-radius: var(--website-theme-radius-md);
  overflow: hidden;
  margin-bottom: 24px;
  margin-top: 35px;
  box-shadow:
    0 1px 0    rgba(var(--website-theme-shadow-rgb), 0.45),
    0 4px 10px rgba(var(--website-theme-shadow-rgb), 0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
.character-page-rotation-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 10px;
  background:       var(--character-accent1);
  border-bottom: 1px solid var(--website-theme-border-subtle);
}
.character-page-rotation-title {
  font-size:         1rem;
  font-weight:       700;
  color:             var(--talent-header-left-color, var(--tab-text-active));
  text-transform:    uppercase;
  letter-spacing:    1px;
}
.character-page-rotation-toggle-btn {
  background: var(--website-theme-bg-sunken);
  color: var(--website-theme-text-secondary);
  border: 1px solid var(--website-theme-border);
  border-radius: var(--website-theme-radius-sm);
  padding: 4px 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.character-page-rotation-section:not(.ar-active) .character-page-rotation-toggle-btn:hover {
  background: var(--website-theme-bg-hover) !important;
  color: var(--website-theme-text-primary) !important;
  border-color: var(--website-theme-border-subtle) !important;
}
.character-page-rotation-section:not(.ar-active) .character-page-rotation-toggle-btn:focus,
.character-page-rotation-section:not(.ar-active) .character-page-rotation-toggle-btn:active {
  outline: none !important;
  background: var(--website-theme-bg-sunken) !important;
  color: var(--website-theme-text-secondary) !important;
  border-color: var(--website-theme-border-subtle) !important;
}
.character-page-rotation-section.ar-active .character-page-rotation-toggle-btn {
  background: var(--character-accent1) !important;
  color: var(--website-theme-text-dark) !important;
  border-color: var(--website-theme-border-strong) !important;
}
.character-page-rotation-section.ar-active .character-page-rotation-toggle-btn:hover {
  background: var(--character-accent4) !important;
  color: var(--website-theme-text-dark) !important;
  border-color: var(--website-theme-border-strong) !important;
}
.character-page-rotation-section.ar-active .character-page-rotation-toggle-btn:focus,
.character-page-rotation-section.ar-active .character-page-rotation-toggle-btn:active {
  outline: none !important;
}
.character-page-rotation-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 16px;
}
.character-page-rotation-char-card {
  text-align: center;
  
}
.character-page-rotation-char-thumb img {
  width: var(--char-img-size, 110px);
  height: var(--char-img-size, 110px);
  border-radius: 5%;
  display: block;
  margin: 0 auto;
  box-shadow:
    0 1px 0    rgba(var(--website-theme-shadow-rgb), 0.45),
    0 4px 10px rgba(var(--website-theme-shadow-rgb), 0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
.character-page-rotation-char-role {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
}
.character-page-rotation-role-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  flex-shrink: 0;
}
.character-page-rotation-role-label {
  color: var(--website-theme-text-primary);
}
.character-page-rotation-video-card {
  margin-left: auto;
  flex: 0 0 var(--video-card-width, 300px);
  align-self: flex-start;
  box-shadow: 0 1px 0 rgba(var(--website-theme-shadow-rgb), 0.45), 0 4px 10px rgba(var(--website-theme-shadow-rgb), 0.45), inset 0 1px 0 rgba(255,255,255,0.04);
}
.character-page-rotation-video-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    0 1px 0    rgba(var(--website-theme-shadow-rgb), 0.45),
    0 4px 10px rgba(var(--website-theme-shadow-rgb), 0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);

}
.character-page-rotation-video-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--website-theme-radius-sm);
  box-shadow:
    0 1px 0    rgba(var(--website-theme-shadow-rgb), 0.45),
    0 4px 10px rgba(var(--website-theme-shadow-rgb), 0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);

}
.character-page-rotation-video-card iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: var(--website-theme-radius-sm);
}
.character-page-rotation-toggle-btn-mobile {
  display: none;
}
.character-page-rotation-accordion {
  margin-top:    0;
  margin-right:  16px;
  margin-bottom: 16px;
  margin-left:   16px;
  border: 1px solid var(--website-theme-border);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(var(--website-theme-shadow-rgb), 0.45), 0 4px 10px rgba(var(--website-theme-shadow-rgb), 0.45), inset 0 1px 0 rgba(255,255,255,0.04);
}
.character-page-rotation-accordion-toggle {
  width: 100%;
  padding: 12px 16px;
  background: var(--character-accent1);
  color: var(--talent-header-left-color, var(--tab-text-active));
  border: none;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.character-page-rotation-accordion-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.character-page-rotation-accordion-title {
  display: inline-flex;
  align-items: center;
}

.character-page-rotation-badges {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.character-page-rotation-accordion-chevron {
  font-size: 12px;
  line-height: 1;
}

.character-page-rotation-accordion-panel {
  display: none;
  padding: 12px 16px;
  background: var(--website-theme-bg-sunken);
  color: var(--website-theme-text-primary);
}

.character-page-rotation-accordion-panel p {
  margin: 0;
}

.character-page-rotation-accordion-panel ul {
  margin: 0;
  padding-inline-start: 20px;
}

.character-page-rotation-accordion-panel strong + ul,
.character-page-rotation-accordion-panel strong + br + ul,
.character-page-rotation-accordion-panel br + ul,
.character-page-rotation-accordion-panel p + ul {
  margin-top: 0;
}

.character-page-rotation-accordion-panel ul + strong {
  display: block;
  margin-top: 12px;
}

.character-page-rotation-accordion-panel strong {
  color: var(--character-accent5);
}

.character-page-rotation-difficulty-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: calc(var(--website-theme-radius-sm, 4px) * 2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all .18s ease;
  box-shadow: 0 0 0 0 transparent;
}

.character-page-rotation-difficulty-easy {
  --easy-bg: var(--difficulty-bg-easy, #e6ffed);
  --easy-border: var(--difficulty-border-easy, #1a7f37);
  --easy-color: var(--difficulty-color-easy, #1a7f37);

  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--easy-bg) 100%, transparent 0%) 0%,
      color-mix(in srgb, var(--easy-bg) 80%, white 20%) 100%);
  color: var(--easy-color);
  border-color: color-mix(in srgb, var(--easy-border) 70%, white 30%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--easy-border) 15%, transparent),
    0 1px 2px rgba(0,0,0,.06);
}

.character-page-rotation-difficulty-easy:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--easy-border) 25%, transparent),
    0 2px 4px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.character-page-rotation-difficulty-easy::before {
  content: "✔";
  font-size: 11px;
  line-height: 1;
}

.character-page-rotation-difficulty-medium {
  --medium-bg: var(--difficulty-bg-medium, #fff4e6);
  --medium-border: var(--difficulty-border-medium, #ff8c00);
  --medium-color: var(--difficulty-color-medium, #ff8c00);

  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--medium-bg) 100%, transparent 0%) 0%,
      color-mix(in srgb, var(--medium-bg) 80%, white 20%) 100%);
  color: var(--medium-color);
  border-color: color-mix(in srgb, var(--medium-border) 70%, white 30%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--medium-border) 15%, transparent),
    0 1px 2px rgba(0,0,0,.06);
}

.character-page-rotation-difficulty-medium:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--medium-border) 25%, transparent),
    0 2px 4px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.character-page-rotation-difficulty-medium::before {
  content: "✔";
  font-size: 11px;
  line-height: 1;
}

.character-page-rotation-difficulty-hard {
  --hard-bg: var(--difficulty-bg-hard, #ffe6e6);
  --hard-border: var(--difficulty-border-hard, #b91c1c);
  --hard-color: var(--difficulty-color-hard, #b91c1c);

  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--hard-bg) 100%, transparent 0%) 0%,
      color-mix(in srgb, var(--hard-bg) 80%, white 20%) 100%);
  color: var(--hard-color);
  border: 1px solid color-mix(in srgb, var(--hard-border) 70%, white 30%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--hard-border) 15%, transparent),
    0 1px 2px rgba(0,0,0,.08);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: calc(var(--website-theme-radius-sm, 4px) * 2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  transition: all .18s ease;
}

.character-page-rotation-difficulty-hard:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--hard-border) 25%, transparent),
    0 2px 5px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

.character-page-rotation-difficulty-hard::before {
  content: "✹";
  font-size: 12px;
  line-height: 1;
}

.character-page-rotation-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: calc(var(--website-theme-radius-sm, 4px) * 2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all .18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.character-page-rotation-type-tag:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--website-theme-border, #4a4a4a) 15%, transparent),
    0 2px 4px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.character-page-rotation-type-energy {
  --energy-bg: #e6f5ff;
  --energy-border: #1976d2;
  --energy-color: #0d47a1;

  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--energy-bg) 100%, transparent 0%) 0%,
      color-mix(in srgb, var(--energy-bg) 80%, white 20%) 100%);
  color: var(--energy-color);
  border-color: color-mix(in srgb, var(--energy-border) 60%, white 40%);
}

.character-page-rotation-type-concerto {
  --concerto-bg: #f3e6ff;
  --concerto-border: #8e24aa;
  --concerto-color: #6a1b9a;

  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--concerto-bg) 100%, transparent 0%) 0%,
      color-mix(in srgb, var(--concerto-bg) 80%, white 20%) 100%);
  color: var(--concerto-color);
  border-color: color-mix(in srgb, var(--concerto-border) 60%, white 40%);
}

.character-page-rotation-type-generic {
  background: color-mix(in srgb, var(--website-theme-bg-raised) 95%, white 5%);
  color: var(--website-theme-text-primary);
  border-color: color-mix(in srgb, var(--website-theme-border) 70%, white 30%);
}

.character-page-rotation-section:not(.ar-active)
  .character-page-rotation-accordion-toggle:focus,
.character-page-rotation-section:not(.ar-active)
  .character-page-rotation-accordion-toggle:active {
  outline:      none                               !important;
}

.character-page-rotation-section.ar-active
  .character-page-rotation-accordion-toggle:focus,
.character-page-rotation-section.ar-active
  .character-page-rotation-accordion-toggle:active {
  outline:      none                               !important;
}

.character-page-rotation-section
  .character-page-rotation-accordion-panel {
  background:   var(--website-theme-bg-sunken)     !important;
  color:        var(--website-theme-text-primary)  !important;
}

body .character-page-rotation-section.ar-active .character-page-rotation-accordion-toggle,
body .character-page-rotation-section.ar-active .character-page-rotation-accordion-toggle:hover,
body .character-page-rotation-section.ar-active .character-page-rotation-accordion-toggle:focus,
body .character-page-rotation-section.ar-active .character-page-rotation-accordion-toggle:active,
body .character-page-rotation-section:not(.ar-active) .character-page-rotation-accordion-toggle,
body .character-page-rotation-section:not(.ar-active) .character-page-rotation-accordion-toggle:hover,
body .character-page-rotation-section:not(.ar-active) .character-page-rotation-accordion-toggle:focus,
body .character-page-rotation-section:not(.ar-active) .character-page-rotation-accordion-toggle:active {
  background:    var(--website-theme-bg-raised);
  color:         var(--website-theme-text-primary);
  border-color:  var(--website-theme-border);
}

@media (max-width: 768px) {
  .character-page-rotation-header .character-page-rotation-toggle-btn {
    display: none;
  }
  .character-page-rotation-toggle-btn-mobile {
    display: block;
    margin: 16px auto !important;
  }
  .character-page-rotation-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .character-page-rotation-char-card {
    flex: 0 1 32% !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .character-page-rotation-char-thumb img {
    width: 100% !important;
    height: auto !important;
    max-width: 70px !important;
  }
  .character-page-rotation-video-card {
    width: 100% !important;
    margin-top: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .character-page-rotation-accordion {
    margin-top:    0;
    margin-right:  7px;
    margin-bottom: 16px;
    margin-left:   7px;
  }
}

/* =============================================== */
/* Team Damage Comparison Section                 */
/* =============================================== */

.character-page-team-damage-section {
  background: var(--website-theme-bg-surface);
  border: 1px solid var(--website-theme-border);
  border-radius: var(--website-theme-radius-md);
  overflow: hidden;
  margin: 1.5rem 0 0 0;
  box-shadow: 0 1px 0 rgba(var(--website-theme-shadow-rgb), 0.45), 0 4px 10px rgba(var(--website-theme-shadow-rgb), 0.45), inset 0 1px 0 rgba(255,255,255,0.04);
}

.character-page-calculations-alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  margin: 0 0 0.75rem 0;
  background: linear-gradient(90deg, rgba(255,243,205,0.95), rgba(255,250,235,0.95));
  border: 1px solid rgba(255,193,7,0.18);
  border-radius: var(--website-theme-radius-sm);
  color: #5a4a00;
  font-size: 0.95rem;
}

.character-page-calculations-alert-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.character-page-calculations-alert-text {
  line-height: 1.3;
}

@media (max-width: 480px) {
  .character-page-calculations-alert {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
}

.character-page-team-damage-section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  background: var(--character-accent1);
  color: var(--talent-header-left-color, var(--tab-text-active));
  border-bottom: 1px solid var(--website-theme-border-subtle);
  position: relative;
}

.character-page-team-damage-section-title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--talent-header-left-color, var(--tab-text-active));
}

.character-page-team-damage-section-content {
  padding: 1.75rem;
}

.character-page-team-damage-note {
  padding: 1rem;
  background: var(--website-theme-bg-sunken);
  border-left: 3px solid var(--character-accent1);
  border-radius: var(--website-theme-radius-sm);
  margin-bottom: 1.5rem;
}

.character-page-team-damage-note-text {
  color: var(--website-theme-text-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
}

.character-page-team-damage-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.character-page-team-damage-item {
  --tp-radius: var(--website-theme-radius-md);
  --tp-border: var(--website-theme-border-subtle);
  --tp-shadow-rgb: var(--website-theme-shadow-rgb);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--website-theme-bg-raised) 0%, var(--website-theme-bg-surface-alt) 100%);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: 0 1px 0 rgba(var(--tp-shadow-rgb), 0.45), 0 4px 10px rgba(var(--tp-shadow-rgb), 0.45), 0 8px 20px rgba(var(--tp-shadow-rgb), 0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 0.18s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.character-page-team-damage-item:hover {
  transform: translateY(-3px);
  border-color: var(--website-theme-border);
  box-shadow: 0 1px 0 rgba(var(--tp-shadow-rgb), 0.5), 0 5px 14px rgba(var(--tp-shadow-rgb), 0.55), 0 10px 28px rgba(var(--tp-shadow-rgb), 0.6), 0 0 0 1px rgba(var(--character-accent1-rgb), 0.18), inset 0 1px 0 rgba(255,255,255,0.06);
}

.character-page-team-damage-build {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.character-page-team-damage-main-char {
  font-size: 0.875rem;
  color: var(--website-theme-text-secondary);
  font-weight: 500;
}

.character-page-team-damage-echo-info {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.build-note {
  font-weight: 600;
  color: var(--website-theme-text-primary);
  background: var(--website-theme-bg-surface-alt);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: 6px;
  padding: 0.18rem 0.45rem;
  line-height: 1;
}

.character-page-team-damage-team-comp {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.character-page-sets-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--website-theme-text-secondary);
  padding: 2px 6px;
  background: var(--website-theme-bg-surface-alt);
  border-radius: 4px;
  border: 1px solid var(--website-theme-border-subtle);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.character-page-team-damage-team-comp .entity-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.character-page-team-damage-team-comp .entity-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(var(--website-theme-shadow-rgb), 0.25);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.character-page-team-damage-team-comp .entity-icon:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(var(--website-theme-shadow-rgb), 0.35), 0 0 0 3px rgba(var(--website-theme-glow-rgb), 0.10);
  border-color: var(--website-theme-border-strong);
}

.character-page-team-damage-team-comp .entity-sep--arrow {
  margin: 0 6px;
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.character-page-team-damage-team-comp .missing-entity {
  display: inline-block;
  padding: 4px 8px;
  background: rgba(255, 0, 0, 0.2);
  border: 1px solid rgba(255, 0, 0, 0.3);
  border-radius: 4px;
  font-size: 0.7rem;
  color: #ff6b6b;
}

.character-page-team-damage-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  min-width: 120px;
}

.character-page-team-damage-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--website-theme-text-primary);
  font-family: 'Courier New', monospace;
}

.character-page-team-damage-percentage {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--character-accent2);
}

/* ========================================
   CALCULATIONS TAB - TEAMS LOOKUP
   ======================================== */

.character-page-teams-search {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.character-page-teams-search-label {
  color: var(--website-theme-text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
}

.character-page-teams-search-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--website-theme-bg-sunken);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-sm);
  color: var(--website-theme-text-primary);
  outline: none;
}

.character-page-teams-search-input:focus {
  border-color: var(--website-theme-border);
  box-shadow: 0 0 0 3px rgba(var(--character-accent1-rgb), 0.16);
}

.character-page-teams-search-status {
  color: var(--website-theme-text-dim);
  font-size: 0.85rem;
}

.character-page-teams-team-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--website-theme-border-subtle);
}

.character-page-teams-team-id {
  font-size: 0.85rem;
  color: var(--website-theme-text-dim);
  font-weight: 600;
}

.character-page-teams-team-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--website-theme-text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.character-page-teams-team-dps {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--character-accent2);
}

.character-page-teams-item {
  align-items: flex-start;
}

.character-page-teams-main-info {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  margin-top: 0;
}

.character-page-teams-character-list {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.character-page-teams-note-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  min-width: 240px;
  padding: 1.25rem;
  background: rgba(26, 28, 31, 0.7);
  border-radius: var(--website-theme-radius-lg);
  border: 1px solid var(--website-theme-border-subtle);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.character-page-teams-note-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--character-accent2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.character-page-teams-note-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--website-theme-text-secondary);
  white-space: pre-wrap;
  unicode-bidi: embed;
}

.character-page-teams-note-text[dir="rtl"] {
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  text-align: right;
  direction: rtl;
}

.character-page-teams-note-text[dir="ltr"] {
  text-align: left;
  direction: ltr;
}

.character-page-teams-note-read-more {
  color: var(--character-accent2);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-left: 0.25rem;
  cursor: pointer;
}

.character-page-teams-note-read-more:hover {
  color: var(--character-accent1);
  text-decoration: underline;
}

.character-page-teams-character-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.875rem;
  border-radius: var(--website-theme-radius-lg);
  background: linear-gradient(145deg, var(--website-theme-bg-raised) 0%, var(--website-theme-bg-surface-alt) 100%);
  border: 1px solid var(--website-theme-border-subtle);
  min-width: 145px;
  flex: 0 1 auto;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.character-page-teams-character-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--character-accent1-rgb), 0.35);
  box-shadow: 0 10px 28px rgba(var(--website-theme-shadow-rgb), 0.55), 0 0 18px rgba(var(--character-accent1-rgb), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.character-page-teams-character-link {
  display: flex;
  align-self: center;
  text-decoration: none;
}

.character-page-teams-character-img {
  width: 64px;
  height: 64px;
  border-radius: var(--website-theme-radius-sm);
  border: 2.5px solid rgba(var(--character-accent1-rgb), 0.18);
  object-fit: cover;
  background: var(--website-theme-bg-sunken);
  box-shadow: 0 4px 12px rgba(var(--website-theme-shadow-rgb), 0.5);
}

.character-page-teams-character-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
}

.character-page-teams-character-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--website-theme-text-primary);
  text-align: center;
}

.character-page-teams-character-badges {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.character-page-teams-badge {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--website-theme-border-subtle);
  background: var(--website-theme-bg-sunken);
  color: var(--website-theme-text-secondary);
}

.character-page-teams-badge-seq {
  border-color: rgba(var(--character-accent1-rgb), 0.28);
}

.character-page-teams-badge-ref {
  border-color: rgba(var(--character-accent1-rgb), 0.18);
  color: var(--character-accent2);
}

.character-page-teams-character-equipment {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  padding-top: 0.6rem;
  border-top: 1px solid var(--website-theme-border-subtle);
}

.character-page-teams-weapon-img,
.character-page-teams-set-img {
  width: 42px;
  height: 42px;
  border-radius: var(--website-theme-radius-sm);
  border: 1px solid var(--website-theme-border-subtle);
  object-fit: cover;
  background: var(--website-theme-bg-sunken);
}

.character-page-teams-weapon-img:hover,
.character-page-teams-set-img:hover {
  transform: scale(1.15);
  border-color: rgba(var(--character-accent1-rgb), 0.45);
  box-shadow: 0 4px 12px rgba(var(--character-accent1-rgb), 0.18);
}

.character-page-teams-rotation-btn {
  margin-top: 0.35rem;
  padding: 0.75rem 1.1rem;
  background: linear-gradient(135deg, var(--character-accent2), var(--character-accent1));
  border: 1px solid rgba(var(--character-accent1-rgb), 0.25);
  border-radius: var(--website-theme-radius-md);
  color: var(--website-theme-text-dark);
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
  width: 100%;
  box-shadow: 0 4px 14px rgba(var(--website-theme-shadow-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
}

@media (max-width: 900px) {
  .character-page-teams-main-info {
    flex-direction: column;
  }

  .character-page-teams-note-section {
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .character-page-teams-character-list {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .character-page-teams-character-card {
    flex: 1 1 0;
    min-width: 0;
    padding: clamp(0.45rem, 2.2vw, 0.875rem);
    gap: clamp(0.35rem, 1.8vw, 0.625rem);
  }

  .character-page-teams-character-img {
    width: clamp(38px, 12vw, 64px);
    height: clamp(38px, 12vw, 64px);
  }

  .character-page-teams-character-name {
    font-size: clamp(0.72rem, 2.8vw, 0.95rem);
  }

  .character-page-teams-badge {
    font-size: clamp(0.62rem, 2.4vw, 0.78rem);
    padding: 0.14rem 0.45rem;
  }

  .character-page-teams-character-equipment {
    gap: 0.35rem;
    padding-top: 0.45rem;
  }

  .character-page-teams-weapon-img,
  .character-page-teams-set-img {
    width: clamp(26px, 9vw, 42px);
    height: clamp(26px, 9vw, 42px);
  }
}

.character-page-teams-rotation-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 10px 26px rgba(var(--website-theme-shadow-rgb), 0.55), 0 0 18px rgba(var(--character-accent1-rgb), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.character-page-teams-rotation-btn:disabled {
  background: var(--website-theme-bg-raised);
  border-color: var(--website-theme-border-subtle);
  color: var(--website-theme-text-dim);
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: none;
}

.character-page-teams-modal[hidden] {
  display: none;
}

.character-page-teams-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.character-page-teams-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--website-theme-bg-rgb), 0.85);
  backdrop-filter: blur(8px);
}

.character-page-teams-modal-content {
  position: relative;
  background: linear-gradient(135deg, var(--website-theme-bg-surface) 0%, var(--website-theme-bg-surface-alt) 100%);
  border: 1px solid rgba(var(--character-accent1-rgb), 0.18);
  border-radius: var(--website-theme-radius-lg);
  box-shadow: 0 20px 55px rgba(var(--website-theme-shadow-rgb), 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  max-width: 760px;
  width: 100%;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.character-page-teams-modal-header {
  padding: 1.25rem 1.25rem;
  border-bottom: 1px solid var(--website-theme-border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.character-page-teams-modal-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--character-accent2);
}

.character-page-teams-modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--website-theme-text-secondary);
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--website-theme-radius-sm);
  transition: background 0.2s ease, color 0.2s ease;
}

.character-page-teams-modal-close:hover {
  background: rgba(var(--character-accent1-rgb), 0.12);
  color: var(--website-theme-text-primary);
}

.character-page-teams-modal-body {
  padding: 1.25rem;
  overflow-y: auto;
}

.character-page-teams-rotation-raw {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--website-theme-text-secondary);
  white-space: pre-line;
}

.character-page-teams-rotation-section {
  margin-bottom: 1.1rem;
}

.character-page-teams-rotation-title {
  margin: 0 0 0.65rem 0;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--character-accent1-rgb), 0.10);
  border-left: 3px solid var(--character-accent2);
  border-radius: var(--website-theme-radius-sm);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--character-accent2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.character-page-teams-rotation-note {
  margin: 0 0 0.65rem 0;
  padding: 0.5rem 0.75rem;
  background: rgba(161, 161, 170, 0.08);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-sm);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--website-theme-text-dim);
  text-align: center;
}

.character-page-teams-rotation-entry {
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--website-theme-bg-raised);
  border-radius: var(--website-theme-radius-sm);
  border-left: 2px solid rgba(var(--character-accent1-rgb), 0.35);
  line-height: 1.45;
}

.character-page-teams-rotation-character {
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--character-accent2);
}

.character-page-teams-rotation-text {
  font-size: 0.84rem;
  color: var(--website-theme-text-secondary);
}

@media (max-width: 520px) {
  .character-page-teams-character-card {
    max-width: none;
  }
}

.character-page-teams-team-note {
  margin-top: 0.9rem;
  padding: 0.75rem 0.9rem;
  background: var(--website-theme-bg-sunken);
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-sm);
  color: var(--website-theme-text-secondary);
  white-space: pre-wrap;
  line-height: 1.5;
}

.badge {
  display: inline-block;
  padding: 0.18rem 0.45rem;
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
  vertical-align: middle;
  background: var(--website-theme-bg-sunken);
  color: var(--website-theme-text-secondary);
  margin-right: 0.35rem;
}

.badge-echo {
  border-color: rgba(var(--character-accent1-rgb), 0.45);
  background: rgba(var(--character-accent1-rgb), 0.10);
  color: var(--website-theme-text-primary);
}

/* ── Teams pagination ─────────────────────────────────────── */
.character-page-teams-pagination {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--website-theme-border-subtle);
}

.character-page-teams-pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}

.character-page-teams-pagination-btn--more {
  background: var(--character-accent1);
  border: 1px solid var(--character-accent1);
  color: #fff;
  text-shadow: none;
}

/* Light accent colors need dark text for readability */
.character-page.spectro .character-page-teams-pagination-btn--more,
.character-page.aero    .character-page-teams-pagination-btn--more {
  color: #1a1a1a;
}

.character-page-teams-pagination-btn--more:hover {
  filter: brightness(1.18);
  transform: translateY(-1px);
}

.character-page-teams-pagination-btn--collapse {
  background: var(--website-theme-bg-sunken);
  border: 1px solid var(--website-theme-border-subtle);
  color: var(--website-theme-text-secondary);
}

.character-page-teams-pagination-btn--collapse:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* ── Echo details pagination ─────────────────────────────────────────────── */
.echo-details-pagination {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--website-theme-border-subtle);
}

.echo-details-pagination-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}

.echo-details-pagination-btn--more {
  background: var(--character-accent1);
  border: 1px solid var(--character-accent1);
  color: #fff;
}

.character-page.spectro .echo-details-pagination-btn--more,
.character-page.aero    .echo-details-pagination-btn--more {
  color: #1a1a1a;
}

.echo-details-pagination-btn--more:hover {
  filter: brightness(1.14);
  transform: translateY(-1px);
}

.echo-details-pagination-btn--collapse {
  background: var(--website-theme-bg-sunken);
  border: 1px solid var(--website-theme-border-subtle);
  color: var(--website-theme-text-secondary);
}

.echo-details-pagination-btn--collapse:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.badge-refine {
  border-color: rgba(var(--character-accent2-rgb), 0.45);
  background: rgba(var(--character-accent2-rgb), 0.10);
  color: var(--website-theme-text-primary);
}

.character-page-team-damage-section-header .character-page-review-section-translation-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.character-page-team-damage-note-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .6rem;
}

.character-page-team-damage-note-toolbar .character-page-review-section-translation-btn {
  margin: 0;
  padding: .45rem .7rem;
  font-size: .78rem;
  position: static;
  right: auto;
}

.character-page-team-damage-note-toolbar.ar-active .character-page-review-section-translation-btn {
  background: rgba(0, 0, 0, 0.4) !important;
  color: var(--website-theme-text-primary) !important;
  border-color: rgba(0, 0, 0, 0.5) !important;
}

.character-page-team-damage-note-toolbar.ar-active .character-page-review-section-translation-btn:hover {
  background: rgba(0, 0, 0, 0.5) !important;
  color: var(--website-theme-text-primary) !important;
}

.character-page-team-damage-note .translation-ar {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: .5rem;
  font-size: 0.82rem;
  color: var(--website-theme-text-secondary);
  line-height: 2;
}

/* Default to English; JS toggles .ar-active */
.character-page-team-damage-note .character-page-team-damage-note-text-ar {
  display: none;
}

.character-page-team-damage-note.ar-active .character-page-team-damage-note-text {
  display: none;
}

.character-page-team-damage-note.ar-active .character-page-team-damage-note-text-ar {
  display: block;
}

@media (max-width: 768px) {
  .character-page-team-damage-note-toolbar {
    justify-content: center;
  }
}

.character-page-team-damage-note .translation-ar p {
  margin: 0 0 .5rem;
}

.character-page-team-damage-note.ar-active {
  border-right: 3px solid var(--character-accent1);
  border-left: none;
}

@media (max-width: 768px) {
  .character-page-team-damage-section-content {
    padding: 1.5rem 1rem;
  }
  
  .character-page-team-damage-item {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem;
  }
  
  .character-page-team-damage-stats {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  
  .character-page-team-damage-section-header {
    padding-right: 88px;
  }
}

/* ====================
   RELATED VIDEOS
   ==================== */
.character-page-related-videos-section {
  margin: 36px 0;
  background: linear-gradient(
    135deg,
    var(--website-theme-bg-surface) 0%,
    var(--website-theme-bg-surface-alt) 100%
  );
  border: 1px solid var(--website-theme-border-subtle);
  border-radius: var(--website-theme-radius-lg);
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb), .40),
    0 4px 12px rgba(var(--website-theme-shadow-rgb), .45),
    0 8px 28px rgba(var(--website-theme-shadow-rgb), .55);
  overflow: hidden;
  position: relative;
}

.character-page-related-videos-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  height: 40px;
  padding: 0 1.75rem;
  background: var(--character-accent1);
  color: var(--talent-header-left-color, var(--tab-text-active));
  font-size: var(--section-header-font-size, 15px);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--website-theme-border-subtle);
}

.character-page-related-videos-title-en,
.character-page-related-videos-title-ar {
  color: var(--talent-header-left-color, var(--tab-text-active));
}

.character-page-related-videos-title-separator {
  opacity: .4;
  font-weight: 600;
}

.character-page-related-videos-title-ar {
  font-family: var(--ar-font-family);
  display: inline-block;
}

.character-page-related-videos-list {
  --rv-gap: 1.6rem;
  --rv-pad-x: 1.75rem;
  --rv-pad-y: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rv-gap);
  padding: var(--rv-pad-y) var(--rv-pad-x) calc(var(--rv-pad-y) + .2rem);
  justify-content: center;
}

.character-page-related-video-card {
  --rv-card-size: 300px;
  flex: 0 0 var(--rv-card-size);
  max-width: var(--rv-card-size);
  background: var(--website-theme-bg-raised);
  border-radius: var(--website-theme-radius-md);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(var(--website-theme-shadow-rgb), .45),
    0 4px 10px rgba(var(--website-theme-shadow-rgb), .45),
    0 8px 20px rgba(var(--website-theme-shadow-rgb), .55);
  display: flex;
  flex-direction: column;
}

.character-page-related-video-card iframe {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  border: none;
}

.character-page-related-video-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  overflow: hidden;
  cursor: pointer;
}

.character-page-related-video-thumb img[data-thumb] {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.character-page-related-video-card:hover {
  transform: translateY(-3px);
  transition: transform .18s;
}

.yt-open-btn {
  margin: .9rem auto 1rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.15rem;
  background: #d00606;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 14px;
  border-radius: 9999px;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.yt-open-btn:hover,
.yt-open-btn:focus-visible {
  background: #cc0000;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

.yt-open-btn:active {
  background: #cc0000;
  color: #ffffff !important;
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  opacity: .95;
}

.yt-icon svg path {
  fill: #ffffff !important;
}

.character-page-related-video-card .yt-icon,
.character-page-related-video-card .yt-open-btn .yt-icon,
.character-page-related-video-thumb .yt-icon {
  display: none !important;
}

@media (max-width: 1260px) {
  .character-page-related-video-card {
    --rv-card-size: 260px;
  }
  .character-page-related-videos-list {
    --rv-gap: 1.4rem;
  }
}

@media (max-width: 980px) {
  .character-page-related-video-card {
    --rv-card-size: 220px;
  }
}

@media (max-width: 780px) {
  .character-page-related-videos-list {
    justify-content: center;
  }
  .character-page-related-video-card {
    --rv-card-size: 100%;
    max-width: 320px;
  }
}

@media (max-width: 600px) {
  .character-page-related-videos-header {
    flex-direction: column;
    font-size: var(--section-header-font-size-mobile, 16px);
    gap: .4rem;
    text-align: center;
    height: auto;
    padding: .75rem 1rem;
  }
  .character-page-related-videos-title-separator {
    display: none;
  }
  .character-page-related-videos-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    align-items: stretch;
  }
  .character-page-related-video-card {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 500px) {
  .character-page-related-videos-section {
    margin: 16px 0;
  }
  .character-page-related-videos-header {
    font-size: 12px;
    padding: .45rem .65rem;
  }
  .character-page-related-videos-list {
    --rv-gap: .6rem;
    --rv-pad-x: .75rem;
    --rv-pad-y: .6rem;
    padding: var(--rv-pad-y) var(--rv-pad-x) calc(var(--rv-pad-y) + .2rem);
  }
  .character-page-related-video-card {
    --rv-card-size: 100%;
    max-width: none;
    width: 100%;
    border-radius: var(--website-theme-radius-sm);
  }
  .character-page-related-videos-section .yt-open-btn {
    font-size: 11px;
    padding: .35rem .7rem;
    margin: .5rem auto .6rem;
  }
}

@media (max-width: 420px) {
  .character-page-related-videos-list {
    --rv-gap: .5rem;
    --rv-pad-x: .6rem;
    --rv-pad-y: .5rem;
  }
  .character-page-related-video-card {
    max-width: none;
    width: 100%;
  }
  .character-page-related-videos-header {
    font-size: 11px;
    padding: .4rem .55rem;
  }
}

/* =============================
   REVEAL TAB (DEFERRED IMAGES)
   ============================= */

.character-page-reveal-section {
  max-width: 980px;
  margin: 0 auto;
  padding: 12px;
}

.character-page-reveal-gate {
  display: flex;
  justify-content: center;
  padding: 34px 18px;
  border: 1px solid rgb(var(--cc-element-rgb, 122 224 194) / 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgb(var(--cc-element-rgb, 122 224 194) / 0.16), transparent 48%),
    rgba(5, 12, 14, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 42px rgba(0, 0, 0, 0.28);
}

.character-page-reveal-load-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  min-height: 48px;
  padding: 13px 24px;
  border: 0;
  border-radius: 999px;
  color: var(--talent-header-left-color, #031412);
  background: linear-gradient(135deg, var(--cc-element-core, #7ae0c2), var(--cc-element-soft, #51d4b1));
  box-shadow: 0 14px 32px rgb(var(--cc-element-rgb, 122 224 194) / 0.26);
  font: 900 0.92rem/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.character-page-reveal-load-button:hover,
.character-page-reveal-load-button:focus-visible {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: 0 18px 42px rgb(var(--cc-element-rgb, 122 224 194) / 0.34);
}

.character-page-reveal-load-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.character-page-reveal-load-button:disabled {
  cursor: wait;
  filter: saturate(0.9);
}

#character-page__tab-reveal.reveal-images-gated:not(.reveal-images-visible) [data-reveal-lazy="1"] {
  display: none;
}

/* Bottom "Hide Reveal Images" button — only visible once images are shown. */
.character-page-reveal-gate--bottom {
  display: none;
  margin-top: 18px;
}

#character-page__tab-reveal.reveal-images-visible .character-page-reveal-gate--bottom {
  display: flex;
}

.character-page-reveal-images {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.character-page-reveal-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.character-page-reveal-item-media {
  position: relative;
  width: 100%;
  text-align: center;
  background: linear-gradient(110deg, rgba(255,255,255,0.04) 8%, rgba(255,255,255,0.08) 18%, rgba(255,255,255,0.04) 33%);
  background-size: 200% 100%;
  animation: revealShimmer 1.2s linear infinite;
}

.character-page-reveal-item.is-loaded .character-page-reveal-item-media {
  animation: none;
  background: transparent;
}

.character-page-reveal-img {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: initial;
  background: rgba(0, 0, 0, 0.25);
}

@keyframes revealShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}









/* =========================================================================
   Sigrika character page — AW unified theme overrides
   -------------------------------------------------------------------------
   Scope: .character-page.cp-aw-themed (Sigrika only, opt-in per character).
   Strategy:
     - Remap legacy --website-theme-* tokens to the /home/home.css AW palette
       so every existing rule in /css/characters-page.css inherits the new
       background/border/typography automatically.
     - Keep --character-accent* (Aero green) untouched so element identity
       and active/hover highlights still work.
     - Override only a few specific surfaces where hard-coded hex colors leak
       through, plus the unified page container width.
   ========================================================================= */

/* ---------- Token remap (warm AW palette over the cool legacy palette) ---- */
.character-page.cp-aw-themed {
  /* Local raised-panel palette: noticeably lighter than --aw-bg so panels
     read as elevated cards instead of blending into the page. */
  --cp-panel:        #1c1d22;
  --cp-panel-2:      #23252b;
  --cp-panel-3:      #2a2c33;
  --cp-panel-line:   rgba(255, 255, 255, 0.06);
  --cp-panel-line-strong: rgba(255, 255, 255, 0.10);
  --cp-panel-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
                     0 6px 18px rgba(0,0,0,0.45),
                     0 1px 0 rgba(0,0,0,0.6);

  /* Surface backgrounds */
  --website-theme-bg-base:        var(--aw-bg);
  --website-theme-bg-sunken:      var(--aw-bg);
  --website-theme-bg-surface:     var(--cp-panel);
  --website-theme-bg-surface-alt: var(--cp-panel-2);
  --website-theme-bg-raised:      var(--cp-panel);
  --website-theme-bg-hover:       var(--cp-panel-3);
  --website-theme-bg-active:      var(--cp-panel-2);
  --website-theme-bg-accent-blend:var(--cp-panel-2);

  /* Borders / dividers */
  --website-theme-border-subtle:  var(--cp-panel-line);
  --website-theme-border:         var(--cp-panel-line);
  --website-theme-border-strong:  var(--cp-panel-line-strong);
  --website-theme-divider:        var(--cp-panel-line);
  --website-theme-scrollbar:      var(--cp-panel-line-strong);

  /* Text — pure white for body copy on themed character pages */
  --website-theme-text-primary:   #ffffff;
  --website-theme-text-secondary: #ffffff;
  --website-theme-text-dim:       rgba(255, 255, 255, 0.72);

  /* Radii: standardise to AW radius (12px / 6px / 20px) */
  --website-theme-radius-sm:      var(--aw-radius-sm);
  --website-theme-radius-md:      var(--aw-radius);
  --website-theme-radius-lg:      var(--aw-radius);

  /* Shadow base */
  --website-theme-shadow-rgb:     0,0,0;
  --website-theme-bg-rgb:         14,14,16; /* matches --aw-bg #0e0e10 */
}

/* ----- Per-element accent-RGB corrections ------------------------------
   /css/characters-page.css ships some --character-accent1-rgb values that
   don't match the visible --character-accent1 hex (notably Aero, where the
   variable says forest green but the colour is mint). Realign so every
   hover glow / shimmer / box-shadow that uses the rgb() form matches the
   element's actual colour. Only applies inside .cp-aw-themed pages. */
.character-page.cp-aw-themed.spectro { --character-accent1-rgb: 255,215,0;   } /* #FFD700 */
.character-page.cp-aw-themed.havoc   { --character-accent1-rgb: 151,23,82;   } /* #971752 */
.character-page.cp-aw-themed.glacio  { --character-accent1-rgb: 24,139,184;  } /* #188bb8 */
.character-page.cp-aw-themed.fusion  { --character-accent1-rgb: 201,55,42;   } /* #C9372A */
.character-page.cp-aw-themed.electro { --character-accent1-rgb: 141,50,197;  } /* #8d32c5 */
.character-page.cp-aw-themed.aero    { --character-accent1-rgb: 122,224,194; } /* #7ae0c2 */

/* ---------- Unified page container -------------------------------------- */
.character-page.cp-aw-themed.character-page-container {
  width: min(1720px, calc(100% - 64px));
  max-width: none;
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 700px) {
  .character-page.cp-aw-themed.character-page-container {
    width: min(1720px, calc(100% - 24px));
  }
}

/* ---------- Page background ---------------------------------------------- */
body:has(.character-page.cp-aw-themed) {
  background: var(--aw-bg);
  color: #ffffff;
}

/* ---------- Typography: Arabic blocks use Tajawal ----------------------- */
.character-page.cp-aw-themed [lang="ar"],
.character-page.cp-aw-themed [dir="rtl"],
.character-page.cp-aw-themed .character-page-intro-dual__card--ar,
.character-page.cp-aw-themed .character-page-review-section-text-ar,
.character-page.cp-aw-themed .character-page-weapon-section-text-ar,
.character-page.cp-aw-themed .character-page-echoes-section-set-bonus-text-ar,
.character-page.cp-aw-themed .character-page-echoes-section-optimal-comment-text-ar,
.character-page.cp-aw-themed .character-page-team-damage-note-text-ar,
.character-page.cp-aw-themed .character-page-synergies-section-lang-ar,
.character-page.cp-aw-themed .character-page-damage-breakdown-comment-text-ar {
  font-family: var(--aw-font-ar);
}

/* ---------- Intro dual cards: flatten the cool gradient ----------------- */
.character-page.cp-aw-themed .character-page-intro-dual__card {
  background: var(--cp-panel);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.45),
    0 6px 18px rgba(0,0,0,0.35);
}
.character-page.cp-aw-themed .character-page-intro-dual__card::before {
  background: linear-gradient(135deg,
    rgba(var(--character-accent1-rgb), 0.08) 0%,
    transparent 60%);
  opacity: 0.7;
}
.character-page.cp-aw-themed .character-page-intro-dual__card:hover {
  border-color: var(--character-accent1);
  background: var(--cp-panel);
}

/* ---------- Glowing-star legend (talents intro pill) -------------------- */
.character-page.cp-aw-themed .character-page__glowing-star-content {
  background: var(--cp-panel);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius);
}

/* ---------- Stats panel -------------------------------------------------- */
.character-page.cp-aw-themed .character-page__stats-panel {
  background: var(--cp-panel);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius);
}
.character-page.cp-aw-themed .character-page__stat-card {
  background: var(--cp-panel-2);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius-sm);
}

/* ---------- Tabs --------------------------------------------------------- */
.character-page.cp-aw-themed .character-page__tabs-wrapper {
  background: var(--cp-panel);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius);
}
.character-page.cp-aw-themed .character-page__tab-button {
  background: var(--aw-bg);
  border: 1px solid var(--cp-panel-line);
  color: var(--aw-ink-dim);
  border-radius: var(--aw-radius-sm);
}
.character-page.cp-aw-themed .character-page__tab-button:hover:not(.active) {
  background: var(--cp-panel-2);
  border-color: var(--aw-line-strong);
  color: #ffffff;
}
.character-page.cp-aw-themed .character-page__tab-button.active {
  background: linear-gradient(135deg,
    var(--character-accent1) 0%,
    var(--character-accent2) 100%);
  border-color: var(--character-accent1);
  color: #0b1410;
  box-shadow: 0 4px 14px rgba(var(--character-accent1-rgb), 0.35);
}

/* ---------- Talent sections --------------------------------------------- */
.character-page.cp-aw-themed .talent-section,
.character-page.cp-aw-themed .talent-dropdown,
.character-page.cp-aw-themed .character-page-talent-priority-section {
  background: var(--cp-panel);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius);
}
.character-page.cp-aw-themed .talent-dropdown__header,
.character-page.cp-aw-themed .talent-dropdown__content {
  background: transparent;
}
.character-page.cp-aw-themed .multipliers-table {
  background: var(--cp-panel-2);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius-sm);
}

/* ---------- Talent priority pills --------------------------------------- */
.character-page.cp-aw-themed .character-page-talent-priority-step {
  background: var(--cp-panel-2);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius-sm);
}

/* ---------- Build tab: best sub-stats / weapons / echoes ---------------- */
.character-page.cp-aw-themed .character-page-best-sub-stats-section,
.character-page.cp-aw-themed .character-page-weapons-section,
.character-page.cp-aw-themed .character-page-echoes-section {
  background: var(--cp-panel);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius);
}
.character-page.cp-aw-themed .character-page-best-sub-stats-item,
.character-page.cp-aw-themed .character-page-best-sub-stats-separator {
  background: var(--cp-panel-2);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius-sm);
  color: #ffffff;
}
.character-page.cp-aw-themed .character-page-best-sub-stats-separator {
  color: var(--character-accent1);
  border-color: var(--cp-panel-line);
  background: transparent;
}

/* Echoes set tile inside a character page */
.character-page.cp-aw-themed .character-page-echoes-section-set {
  background: var(--cp-panel-2);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius);
}
.character-page.cp-aw-themed .character-page-echoes-section-card {
  background: var(--cp-panel);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius-sm);
}
.character-page.cp-aw-themed .character-page-echoes-section-details,
.character-page.cp-aw-themed .character-page-echoes-section-details-optimal-build {
  background: var(--cp-panel);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius-sm);
}
.character-page.cp-aw-themed .character-page-echoes-section-details-bar {
  background: var(--aw-bg);
  border: 1px solid var(--cp-panel-line);
}
.character-page.cp-aw-themed .character-page-echoes-section-details-bar-filled {
  background: linear-gradient(90deg,
    var(--character-accent1) 0%,
    var(--character-accent2) 100%);
}
.character-page.cp-aw-themed .character-page-echoes-section-set-bonus-wrapper {
  background: var(--cp-panel);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius-sm);
}
.character-page.cp-aw-themed .character-page-echoes-section-set-bonus-label {
  color: var(--character-accent1);
}

/* ---------- Disclaimer panel & review/translation buttons --------------- */
.character-page.cp-aw-themed .disclaimer-panel,
.character-page.cp-aw-themed .character-page-review-section-panel {
  background: var(--cp-panel);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius);
}
.character-page.cp-aw-themed .character-page-review-section-translation-btn,
.character-page.cp-aw-themed .character-page-weapon-section-translation-btn,
.character-page.cp-aw-themed .character-page-echoes-section-set-bonus-toggle-button,
.character-page.cp-aw-themed .character-page-echoes-section-optimal-comment-toggle-button,
.character-page.cp-aw-themed .character-page-synergies-section-translation-btn,
.character-page.cp-aw-themed .character-page-team-damage-note-translation-btn {
  background: rgba(var(--character-accent1-rgb), 0.10);
  border: 1px solid rgba(var(--character-accent1-rgb), 0.35);
  color: var(--character-accent1);
  border-radius: 999px;
  font-family: var(--aw-font-ar);
}
.character-page.cp-aw-themed .character-page-review-section-translation-btn:hover,
.character-page.cp-aw-themed .character-page-weapon-section-translation-btn:hover,
.character-page.cp-aw-themed .character-page-echoes-section-set-bonus-toggle-button:hover,
.character-page.cp-aw-themed .character-page-echoes-section-optimal-comment-toggle-button:hover,
.character-page.cp-aw-themed .character-page-synergies-section-translation-btn:hover,
.character-page.cp-aw-themed .character-page-team-damage-note-translation-btn:hover {
  background: rgba(var(--character-accent1-rgb), 0.18);
  color: #ffffff;
}

/* ---------- Synergies, Teams, Reveal, Calculations ---------------------- */
.character-page.cp-aw-themed .character-page-synergies-section,
.character-page.cp-aw-themed .character-page-team-damage-section,
.character-page.cp-aw-themed .character-page-reveal-section,
.character-page.cp-aw-themed .character-page-damage-breakdown-section,
.character-page.cp-aw-themed .character-page-related-videos-section {
  background: var(--cp-panel);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius);
}
.character-page.cp-aw-themed .character-page-synergies-section-item,
.character-page.cp-aw-themed .character-page-team-damage-note,
.character-page.cp-aw-themed .character-page-teams-info-note {
  background: var(--cp-panel-2);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius-sm);
}
.character-page.cp-aw-themed .character-page-reveal-item-media {
  background: var(--cp-panel-2);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius-sm);
  overflow: hidden;
}

/* ---------- Optimal build table ----------------------------------------- */
.character-page.cp-aw-themed .character-page-echoes-section-optimal-table {
  background: var(--cp-panel-2);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius-sm);
  overflow: hidden;
}
.character-page.cp-aw-themed .character-page-echoes-section-optimal-table th,
.character-page.cp-aw-themed .character-page-echoes-section-optimal-table td {
  border-color: var(--cp-panel-line);
  color: #ffffff;
}
.character-page.cp-aw-themed .character-page-echoes-section-optimal-comment-wrapper {
  background: var(--cp-panel);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius-sm);
}

/* ---------- Damage breakdown legend + chart ----------------------------- */
.character-page.cp-aw-themed .character-page-damage-breakdown-container,
.character-page.cp-aw-themed .character-page-damage-breakdown-comment {
  background: var(--cp-panel-2);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius-sm);
}
.character-page.cp-aw-themed .character-page-damage-breakdown-legend-item {
  background: var(--cp-panel);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius-sm);
  color: #ffffff;
}

/* ---------- Section / panel headers: hairline divider, subtle accent --- */
.character-page.cp-aw-themed .character-page-best-sub-stats-section-header,
.character-page.cp-aw-themed .character-page-weapons-section-header,
.character-page.cp-aw-themed .character-page-echoes-section-header,
.character-page.cp-aw-themed .character-page-synergies-section-header,
.character-page.cp-aw-themed .character-page-team-damage-section-header,
.character-page.cp-aw-themed .character-page-damage-breakdown-section-header,
.character-page.cp-aw-themed .character-page-related-videos-header,
.character-page.cp-aw-themed .character-page-talent-priority-header,
.character-page.cp-aw-themed .character-page-disclaimer-header {
  border-bottom: 1px solid var(--cp-panel-line);
}
/* Headers on the element-accent background keep dark text for legibility
   (light elements like Aero would otherwise be unreadable in white). */
.character-page.cp-aw-themed .character-page-best-sub-stats-section-header-left,
.character-page.cp-aw-themed .character-page-weapons-section-header-left,
.character-page.cp-aw-themed .character-page-echoes-section-header-left,
.character-page.cp-aw-themed .character-page-synergies-section-title,
.character-page.cp-aw-themed .character-page-team-damage-section-title,
.character-page.cp-aw-themed .character-page-damage-breakdown-section-title,
.character-page.cp-aw-themed .character-page-related-videos-title-en,
.character-page.cp-aw-themed .character-page-related-videos-title-ar,
.character-page.cp-aw-themed .character-page-talent-priority-title,
.character-page.cp-aw-themed .character-page-disclaimer-title {
  color: var(--talent-header-left-color, #ffffff);
  font-weight: 800;
  letter-spacing: 0.6px;
}

/* ---------- Talent section header keeps the Aero accent strip ---------- */
.character-page.cp-aw-themed .talent-section__header {
  background: linear-gradient(90deg,
    rgba(var(--character-accent1-rgb), 0.18) 0%,
    rgba(var(--character-accent1-rgb), 0.04) 100%);
  border-bottom: 1px solid var(--cp-panel-line);
}

/* ---------- Page-wide spacing rhythm ------------------------------------ */
.character-page.cp-aw-themed .character-page-intro-dual {
  margin: 28px 0 18px;
}
/* ---------- Raised panel elevation -------------------------------------
   Apply a soft drop-shadow + 1px inner highlight to every top-level panel
   so they read as elevated cards against the page background, not flat
   colour swatches. Inner cards (stat tiles, sequence cards, talent steps,
   etc.) stay flat so the visual tier is panel > card. */
.character-page.cp-aw-themed .character-page-intro-dual__card,
.character-page.cp-aw-themed .character-page__glowing-star-content,
.character-page.cp-aw-themed .character-page__stats-panel,
.character-page.cp-aw-themed .character-page__tabs-wrapper,
.character-page.cp-aw-themed .talent-section,
.character-page.cp-aw-themed .talent-dropdown,
.character-page.cp-aw-themed .character-page-talent-priority-section,
.character-page.cp-aw-themed .character-page-best-sub-stats-section,
.character-page.cp-aw-themed .character-page-weapons-section,
.character-page.cp-aw-themed .character-page-echoes-section,
.character-page.cp-aw-themed .character-page-echoes-section-set,
.character-page.cp-aw-themed .character-page-sequences-section,
.character-page.cp-aw-themed .character-page-synergies-section,
.character-page.cp-aw-themed .character-page-team-damage-section,
.character-page.cp-aw-themed .character-page-reveal-section,
.character-page.cp-aw-themed .character-page-damage-breakdown-section,
.character-page.cp-aw-themed .character-page-related-videos-section,
.character-page.cp-aw-themed .disclaimer-panel,
.character-page.cp-aw-themed .character-page-review-section-panel {
  box-shadow: var(--cp-panel-shadow);
}

/* Sequence cards — they are the "card" tier inside the sequences panel.
   Lift them off the panel with the lighter cp-panel-2 surface. */
.character-page.cp-aw-themed .character-page-sequences-grid > * {
  background: var(--cp-panel-2);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius);
}

/* Stats panel header divider sharpens the tier */
.character-page.cp-aw-themed .character-page__stats-header {
  border-bottom-color: var(--cp-panel-line);
}

/* Tighten the gap right under the tab strip (was very large originally) */
.character-page.cp-aw-themed .character-page__tabs-container {
  margin-bottom: 12px;
}
.character-page.cp-aw-themed .character-page__tab-content {
  padding-top: 16px;
}
.character-page.cp-aw-themed .character-page__tab-content > section,
.character-page.cp-aw-themed .character-page__tab-content > div {
  margin-top: 14px;
}
.character-page.cp-aw-themed .character-page__tab-content > :first-child,
.character-page.cp-aw-themed .character-page__tab-content > section:first-child,
.character-page.cp-aw-themed .character-page__tab-content > div:first-child {
  margin-top: 0;
}
/* Talent-priority section sits below the talent grid; trim the legacy 32px */
.character-page.cp-aw-themed .character-page-talent-priority-section {
  margin: 14px 0;
}

/* ---------- Mobile fine-tuning ------------------------------------------ */
@media (max-width: 700px) {
  .character-page.cp-aw-themed .character-page__tabs {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .character-page.cp-aw-themed .character-page__stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================================
   Element-driven recoloring of the shared partials (top menu, custom top
   menu, social media bar) — applied only on character pages via a body
   class. The base red (--aw-accent / --tm-accent / --ctm-accent /
   --awsm-accent) stays everywhere else.
   ========================================================================= */

/* Per-element accent definitions for the partials. */
body.cp-element-spectro {
  --cp-elem-accent:     #FFB300;
  --cp-elem-accent-d:   #C78700;
  --cp-elem-accent-s:   #FFD700;
  --cp-elem-accent-rgb: 255,179,0;
}
body.cp-element-havoc {
  --cp-elem-accent:     #971752;
  --cp-elem-accent-d:   #6f0f3b;
  --cp-elem-accent-s:   #df7aa7;
  --cp-elem-accent-rgb: 151,23,82;
}
body.cp-element-glacio {
  --cp-elem-accent:     #188bb8;
  --cp-elem-accent-d:   #0f6789;
  --cp-elem-accent-s:   #5eccff;
  --cp-elem-accent-rgb: 24,139,184;
}
body.cp-element-fusion {
  --cp-elem-accent:     #C9372A;
  --cp-elem-accent-d:   #8e2520;
  --cp-elem-accent-s:   #ff5f5d;
  --cp-elem-accent-rgb: 201,55,42;
}
body.cp-element-electro {
  --cp-elem-accent:     #8d32c5;
  --cp-elem-accent-d:   #642294;
  --cp-elem-accent-s:   #b466e9;
  --cp-elem-accent-rgb: 141,50,197;
}
body.cp-element-aero {
  --cp-elem-accent:     #259e7f;
  --cp-elem-accent-d:   #1d7a63;
  --cp-elem-accent-s:   #51d4b1;
  --cp-elem-accent-rgb: 37,158,127;
}

/* ---- Top menu (partials/top-menu.css overrides) ---- */
body[class*="cp-element-"] {
  --tm-accent:   var(--cp-elem-accent);
  --tm-accent-d: var(--cp-elem-accent-d);
  --tm-accent-s: var(--cp-elem-accent-s);
  --ctm-accent:   var(--cp-elem-accent);
  --ctm-accent-s: var(--cp-elem-accent-s);
  --awsm-accent: var(--cp-elem-accent);
}
body[class*="cp-element-"] .website-top-navigation-link.is-active {
  background: rgba(var(--cp-elem-accent-rgb), 0.14);
  color: #ffffff;
}
body[class*="cp-element-"] .website-top-navigation-donate-btn {
  box-shadow: 0 8px 22px -10px rgba(var(--cp-elem-accent-rgb), 0.6);
}
body[class*="cp-element-"] .website-top-navigation-donate-btn:hover {
  box-shadow: 0 12px 28px -10px rgba(var(--cp-elem-accent-rgb), 0.75);
}

/* ---- Custom top menu (partials/custom-top-menu.css overrides) ---- */
body[class*="cp-element-"] .arab-wuwa-top-custom-menu-card::before {
  background: radial-gradient(220px 90px at 0% 0%,
    rgba(var(--cp-elem-accent-rgb), 0.14), transparent 65%);
}
body[class*="cp-element-"] .arab-wuwa-top-custom-menu-icon {
  background: rgba(var(--cp-elem-accent-rgb), 0.12);
  border-color: rgba(var(--cp-elem-accent-rgb), 0.22);
}
body[class*="cp-element-"] .arab-wuwa-top-custom-menu-card:hover .arab-wuwa-top-custom-menu-icon {
  background: rgba(var(--cp-elem-accent-rgb), 0.24);
  border-color: rgba(var(--cp-elem-accent-rgb), 0.45);
}
body[class*="cp-element-"] .arab-wuwa-top-custom-menu-coming-soon-badge {
  background: rgba(var(--cp-elem-accent-rgb), 0.20);
  border-color: rgba(var(--cp-elem-accent-rgb), 0.35);
  color: var(--cp-elem-accent-s);
}

/* ---- Social media bar (partials/social-media-bar.css overrides) ---- */
body[class*="cp-element-"] .awsm-btn:hover,
body[class*="cp-element-"] .awsm-btn:focus-visible {
  background: rgba(var(--cp-elem-accent-rgb), 0.14);
  border-color: rgba(var(--cp-elem-accent-rgb), 0.4);
}



/* =========================================================================
   SEQUENCES DMG INCREASE
   Custom-built bar list that replaces the legacy Chart.js canvas.
   - Uses the character accent color so each element gets its own theme.
   - Animates bar width from 0 -> --seq-fill once `.is-ready` is set by JS.
   - Pure HTML/CSS (no chart library, no canvas).
   ========================================================================= */

.seq-dmg-increase {
  --seq-track-h: 28px;
  --seq-row-gap: 14px;
  --seq-radius: 999px;
  --seq-accent: var(--character-accent1, var(--aw-accent, #b8444a));
  --seq-accent-rgb: var(--character-accent1-rgb, 184, 68, 74);
  --seq-baseline: rgba(255, 255, 255, 0.55);
  --seq-baseline-rgb: 255, 255, 255;

  margin: 24px 0 0;
  padding: 28px 28px 24px;
  background:
    radial-gradient(140% 100% at 0% 0%,
      rgba(var(--seq-accent-rgb), 0.10), transparent 55%),
    var(--cp-panel, #1c1d22);
  border: 1px solid var(--cp-panel-line, rgba(255, 255, 255, 0.06));
  border-radius: var(--aw-radius, 12px);
  box-shadow: var(--cp-panel-shadow,
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 6px 18px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(0, 0, 0, 0.6));
}

.seq-dmg-increase__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cp-panel-line, rgba(255, 255, 255, 0.06));
}

.seq-dmg-increase__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #ffffff;
}

.seq-dmg-increase__subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}

.seq-dmg-increase__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--seq-row-gap);
}

/* ---- Row layout: label | track | value ---- */
.seq-dmg-row {
  --seq-fill: 0%;
  --seq-intensity: 0;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
}

.seq-dmg-row__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

.seq-dmg-row.is-baseline .seq-dmg-row__label {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
}

.seq-dmg-row.is-best .seq-dmg-row__label {
  background: rgba(var(--seq-accent-rgb), 0.20);
  border-color: rgba(var(--seq-accent-rgb), 0.55);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(var(--seq-accent-rgb), 0.25),
              0 6px 16px -8px rgba(var(--seq-accent-rgb), 0.55);
}

/* ---- Track + fill ---- */
.seq-dmg-row__track {
  position: relative;
  height: var(--seq-track-h);
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--seq-radius);
  overflow: hidden;
}

.seq-dmg-row__track::before {
  /* Subtle baseline marker (S0 width) */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  pointer-events: none;
}

.seq-dmg-row__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(var(--seq-accent-rgb), 0.55) 0%,
    rgba(var(--seq-accent-rgb), 0.95) 70%,
    rgba(var(--seq-accent-rgb), 1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 0 18px rgba(var(--seq-accent-rgb), calc(0.18 + 0.32 * var(--seq-intensity)));
  transition: width 900ms cubic-bezier(.2,.7,.2,1);
}

/* Baseline row gets neutral white fill so it reads as "the reference". */
.seq-dmg-row.is-baseline .seq-dmg-row__fill {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.42) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* Highest row gets a brighter, fuller glow. */
.seq-dmg-row.is-best .seq-dmg-row__fill {
  background: linear-gradient(
    90deg,
    rgba(var(--seq-accent-rgb), 0.75) 0%,
    rgba(var(--seq-accent-rgb), 1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 0 22px rgba(var(--seq-accent-rgb), 0.55);
}

/* Diagonal-stripe shimmer over the fill. */
.seq-dmg-row__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.06) 0 8px,
    transparent 8px 18px);
  mix-blend-mode: overlay;
  opacity: 0.7;
  pointer-events: none;
}

/* Trigger the width transition once JS adds .is-ready. */
.seq-dmg-increase.is-ready .seq-dmg-row__fill {
  width: var(--seq-fill);
}

/* ---- Value column ---- */
.seq-dmg-row__value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 78px;
  font-variant-numeric: tabular-nums;
}

.seq-dmg-row__pct {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.seq-dmg-row__delta {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(var(--seq-accent-rgb), 0.95);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.seq-dmg-row.is-baseline .seq-dmg-row__delta {
  color: rgba(255, 255, 255, 0.55);
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Hover affordance ---- */
.seq-dmg-row:hover .seq-dmg-row__fill {
  filter: brightness(1.08) saturate(1.05);
}

/* ---- Footer / legend ---- */
.seq-dmg-increase__footer {
  margin-top: 10px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 1px solid var(--cp-panel-line, rgba(255, 255, 255, 0.06));
}

.seq-dmg-increase__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
}

.seq-dmg-increase__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.seq-dmg-increase__legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.seq-dmg-increase__legend-swatch.is-active {
  background: linear-gradient(135deg,
    rgba(var(--seq-accent-rgb), 0.6),
    rgba(var(--seq-accent-rgb), 1));
  border-color: rgba(var(--seq-accent-rgb), 0.6);
}

.seq-dmg-increase__legend-swatch.is-best {
  background: rgba(var(--seq-accent-rgb), 1);
  border-color: rgba(var(--seq-accent-rgb), 1);
  box-shadow: 0 0 10px rgba(var(--seq-accent-rgb), 0.6);
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .seq-dmg-increase {
    padding: 20px 18px 18px;
  }
  .seq-dmg-row {
    grid-template-columns: 44px 1fr auto;
    gap: 10px;
  }
  .seq-dmg-row__label {
    height: 24px;
    padding: 0 8px;
    font-size: 0.78rem;
  }
  .seq-dmg-row__track {
    height: 22px;
  }
  .seq-dmg-row__pct {
    font-size: 0.9rem;
  }
  .seq-dmg-row__value {
    min-width: 64px;
  }
}

@media (max-width: 420px) {
  .seq-dmg-increase__legend {
    gap: 10px;
    font-size: 0.72rem;
  }
}

/* =========================================================================
   BUILD TARGETS  (Best Sub-Stats + Optimal Build)
   Reuses .character-page-best-sub-stats-section so it inherits the
   accent-bar header used by the rest of the Build tab. The internal
   layout is then a custom priority chain + stat-card grid.
   ========================================================================= */

.cp-build-targets {
  --cp-bt-accent: var(--character-accent1, var(--aw-accent, #b8444a));
  --cp-bt-accent-rgb: var(--character-accent1-rgb, 184, 68, 74);
}

.cp-build-targets .cp-build-targets__body {
  padding: 22px 22px 20px;
  background:
    radial-gradient(160% 110% at 100% 0%,
      rgba(var(--cp-bt-accent-rgb), 0.10), transparent 55%),
    transparent;
}

/* ---- Sub-stat priority chain ---- */
.cp-build-targets__priority {
  width: 100%;
  display: flex;
  justify-content: center;
}

.cp-build-targets__priority-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffffff;
}

.cp-build-targets__priority-chain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
}

.cp-build-targets__priority-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  background: rgba(var(--cp-bt-accent-rgb), 0.10);
  border: 1px solid rgba(var(--cp-bt-accent-rgb), 0.30);
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
}

.cp-build-targets__priority-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--cp-bt-accent-rgb), 0.85);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cp-build-targets__priority-name {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* ---- Optimal build inner panel ---- */
.cp-build-targets__panel {
  background: var(--cp-panel-2, #23252b);
  border: 1px solid var(--cp-panel-line, rgba(255, 255, 255, 0.06));
  border-radius: var(--aw-radius, 12px);
  padding: 20px 20px 16px;
}

.cp-build-targets__panel + .cp-build-targets__panel {
  margin-top: 16px;
}

.cp-build-targets__panel-header {
  display: flex;
  align-items: baseline;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cp-panel-line, rgba(255, 255, 255, 0.06));
}

.cp-build-targets__panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}

/* ---- Stat card grid ---- */
.cp-build-targets__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.cp-stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  min-height: 76px;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.cp-stat-card:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(var(--cp-bt-accent-rgb), 0.30);
}

.cp-stat-card__label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  gap: 5px;
}

.cp-stat-card__label .stat-icon-img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.75;
}

.cp-build-targets__priority-name .stat-icon-img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 5px;
  opacity: 0.85;
}

.cp-stat-card__value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cp-stat-card__note {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.3;
}

.cp-stat-card--core {
  background:
    linear-gradient(180deg,
      rgba(var(--cp-bt-accent-rgb), 0.10),
      rgba(var(--cp-bt-accent-rgb), 0.02));
  border-color: rgba(var(--cp-bt-accent-rgb), 0.28);
}

.cp-stat-card--core .cp-stat-card__value {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(var(--cp-bt-accent-rgb), 0.35);
}

.cp-stat-card[data-empty="true"] {
  opacity: 0.55;
}

.cp-stat-card[data-empty="true"] .cp-stat-card__value {
  color: rgba(255, 255, 255, 0.55);
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .cp-build-targets__priority-chain {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .cp-build-targets .cp-build-targets__body {
    padding: 18px 16px 16px;
  }
  .cp-build-targets__panel {
    padding: 16px 14px 12px;
  }
  .cp-build-targets__grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
  }
  .cp-stat-card {
    padding: 12px 14px;
  }
  .cp-stat-card__value {
    font-size: 1.2rem;
  }
}
/* =========================================================================
   WEAPONS SECTION (themed override for .cp-aw-themed pages)
   - Two-column responsive grid (one card per column on desktop, one per row
     on narrow screens).
   - Build-note row stretches across both columns.
   - Card redesign: cleaner panel surface, accent strip on hover, refined
     header, DMG badge themed with the character accent, stars below name.
   ========================================================================= */

.character-page.cp-aw-themed .character-page-weapons-section-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.character-page.cp-aw-themed .character-page-weapon-section-build-note {
  grid-column: 1 / -1;
}

.character-page.cp-aw-themed .character-page-team-dmg-section .character-page-weapons-section-list {
  display: flex;
  flex-direction: column;
}

.character-page.cp-aw-themed .character-page-team-dmg-section .character-page-team-damage-list {
  width: 100%;
}

@media (max-width: 1180px) {
  .character-page.cp-aw-themed .character-page-weapons-section-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .character-page.cp-aw-themed .character-page-weapons-section-list {
    grid-template-columns: 1fr;
  }
}

/* ---- Card shell ---- */
.character-page.cp-aw-themed .character-page-weapon-section-item {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  padding: 16px;
  background: var(--cp-panel-2, #23252b);
  border: 1px solid var(--cp-panel-line, rgba(255, 255, 255, 0.06));
  border-radius: var(--aw-radius, 12px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 14px rgba(0, 0, 0, 0.35);
  transform: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  overflow: hidden;
}

/* Subtle accent strip pinned to the left edge tied to the rarity color. */
.character-page.cp-aw-themed .character-page-weapon-section-item::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--wp-accent-primary, rgba(var(--character-accent1-rgb), 0.85));
  opacity: 0.85;
  pointer-events: none;
}

.character-page.cp-aw-themed .character-page-weapon-section-item:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--character-accent1-rgb), 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 26px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(var(--character-accent1-rgb), 0.18);
}

/* Reset legacy radial-glow that targets a different color. */
.character-page.cp-aw-themed .character-page-weapon-section-item::before {
  display: none;
}

/* ---- Image ---- */
.character-page.cp-aw-themed .character-page-weapon-section-image-container {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  align-self: start;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 0 1px rgba(var(--wp-glow-rgb, 184, 68, 74), 0.20),
    0 4px 12px rgba(var(--wp-glow-rgb, 184, 68, 74), 0.25);
  padding: 6px;
}

.character-page.cp-aw-themed .character-page-weapon-section-image-container img {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* ---- Info column ---- */
.character-page.cp-aw-themed .character-page-weapon-section-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.character-page.cp-aw-themed .character-page-weapon-section-name-stars {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding-right: 80px; /* room for the absolute translation button */
}

.character-page.cp-aw-themed .character-page-weapon-section-name {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
}

.character-page.cp-aw-themed .character-page-weapon-section-stars {
  font-size: 0.8rem;
  letter-spacing: 1px;
  color: var(--wp-accent-primary, rgba(var(--character-accent1-rgb), 1));
}

/* ---- DMG badge ---- */
.character-page.cp-aw-themed .character-page-weapon-section-damage {
  align-self: flex-start;
  background: linear-gradient(135deg,
    rgba(var(--character-accent1-rgb), 0.20),
    rgba(var(--character-accent1-rgb), 0.08));
  border: 1px solid rgba(var(--character-accent1-rgb), 0.40);
  border-left-width: 3px;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 4px 10px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

/* ---- Stats line ---- */
.character-page.cp-aw-themed .character-page-weapon-section-stats {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.2px;
}

/* ---- Description block ---- */
.character-page.cp-aw-themed .character-page-weapon-section-description {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-left: 3px solid rgba(var(--character-accent1-rgb), 0.65);
  border-radius: 8px;
  padding: 10px 12px;
}

/* ---- Translation button (top-right) ---- */
.character-page.cp-aw-themed .character-page-weapon-section-toggle-wrapper {
  top: 10px;
  right: 10px;
}

.character-page.cp-aw-themed .character-page-weapon-section-item .character-page-weapon-section-translation-btn {
  background: rgba(var(--character-accent1-rgb), 0.18);
  border: 1px solid rgba(var(--character-accent1-rgb), 0.40);
  color: #ffffff;
  font-size: 0.68rem;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0.3px;
}

.character-page.cp-aw-themed .character-page-weapon-section-item .character-page-weapon-section-translation-btn:hover {
  background: rgba(var(--character-accent1-rgb), 0.32);
  border-color: rgba(var(--character-accent1-rgb), 0.6);
}

/* ---- Build note row (full width, themed) ---- */
.character-page.cp-aw-themed .character-page-weapon-section-build-note {
  background: rgba(var(--character-accent1-rgb), 0.06);
  border: 1px solid rgba(var(--character-accent1-rgb), 0.25);
  border-radius: 10px;
  padding: 12px 14px;
  position: relative;
}

.character-page.cp-aw-themed .character-page-weapon-section-build-note .character-page-weapon-section-translation-btn {
  background: rgba(var(--character-accent1-rgb), 0.18);
  border: 1px solid rgba(var(--character-accent1-rgb), 0.40);
  color: #ffffff;
  font-size: 0.68rem;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: none;
}

/* ---- Narrow card layout: stack image above info ---- */
@media (max-width: 480px) {
  .character-page.cp-aw-themed .character-page-weapon-section-item {
    grid-template-columns: 1fr;
  }
  .character-page.cp-aw-themed .character-page-weapon-section-image-container {
    width: 72px;
    height: 72px;
  }
  .character-page.cp-aw-themed .character-page-weapon-section-name-stars {
    padding-right: 70px;
  }
}
/* ---- Auto rank badge (top-left of each weapon card) ---- */
.character-page.cp-aw-themed .character-page-weapon-section-rank-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #ffffff;
  background: linear-gradient(135deg,
    rgba(var(--character-accent1-rgb), 0.85),
    rgba(var(--character-accent1-rgb), 0.55));
  border: 1px solid rgba(var(--character-accent1-rgb), 0.65);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Make room on the card so the badge does not overlap the image. */
.character-page.cp-aw-themed .character-page-weapon-section-item {
  padding-top: 40px;
}
/* =========================================================================
   ECHOES SECTION (themed override for .cp-aw-themed pages)
   - Removes the gap above the set-bonus description.
   - Reskins the 5 cost cards into a clean tag row.
   - Reformats Echo Set Details rows: cost-tag chips per echo + cleaned
     suffix (kept: char icons + "Energy XXX"; removed: "Note: With" wording).
   ========================================================================= */

.character-page.cp-aw-themed .character-page-echoes-section {
  background: var(--cp-panel, #1c1d22);
  border: 1px solid var(--cp-panel-line, rgba(255, 255, 255, 0.06));
  border-radius: var(--aw-radius, 12px);
  overflow: hidden;
}

.character-page.cp-aw-themed .character-page-echoes-section-sets {
  padding: 18px;
}

.character-page.cp-aw-themed .character-page-echoes-section-set {
  background: var(--cp-panel-2, #23252b);
  border: 1px solid var(--cp-panel-line, rgba(255, 255, 255, 0.06));
  border-radius: var(--aw-radius, 12px);
  padding: 16px;
}

.character-page.cp-aw-themed .character-page-echoes-section-set-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #ffffff;
  text-transform: uppercase;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--cp-panel-line, rgba(255, 255, 255, 0.06));
}

/* ---- Set intro (sonata icon + main echo + bonus text) ---- */
.character-page.cp-aw-themed .character-page-echoes-section-set-intro {
  gap: 14px;
}

.character-page.cp-aw-themed .character-page-echoes-section-set-intro-image-wrapper,
.character-page.cp-aw-themed .character-page-echoes-section-set-intro-echo {
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--cp-panel-line, rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 0 0 1px rgba(var(--character-accent1-rgb), 0.18);
}

/* ---- Fix the gap above the set-bonus text ---- */
.character-page.cp-aw-themed .character-page-echoes-section-set-bonus-wrapper {
  padding-top: 0;
  padding-right: 110px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.character-page.cp-aw-themed .character-page-echoes-section-set-bonus-text-en,
.character-page.cp-aw-themed .character-page-echoes-section-set-bonus-text-ar {
  margin-top: 0;
  padding-right: 0;
  color: #ffffff;
  font-size: 0.88rem;
  line-height: 1.55;
}

.character-page.cp-aw-themed .character-page-echoes-section-set-bonus-label {
  color: rgba(var(--character-accent1-rgb), 1);
  font-weight: 700;
}

.character-page.cp-aw-themed .character-page-echoes-section-set-bonus-toggle-button {
  background: rgba(var(--character-accent1-rgb), 0.18);
  color: #ffffff;
  border: 1px solid rgba(var(--character-accent1-rgb), 0.40);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: none;
  margin-bottom: 0 !important;
}

.character-page.cp-aw-themed .character-page-echoes-section-set-bonus-wrapper.bonus-active .character-page-echoes-section-set-bonus-toggle-button {
  background: rgba(var(--character-accent1-rgb), 0.32);
  color: #ffffff;
  border-color: rgba(var(--character-accent1-rgb), 0.65);
}

/* ---- 5 cost-card row (top-level: ATK 4 / Aero 3 / etc) ---- */
.character-page.cp-aw-themed .character-page-echoes-section-set-cards-grid {
  margin-top: 16px;
  gap: 10px;
}

.character-page.cp-aw-themed .character-page-echoes-section-card {
  flex: 1 1 0;
  min-width: 0;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--cp-panel-line, rgba(255, 255, 255, 0.06));
  border-left: 3px solid rgba(var(--character-accent1-rgb), 0.55);
  border-radius: 10px;
  padding: 10px 12px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
  box-shadow: none;
}

.character-page.cp-aw-themed .character-page-echoes-section-card::before { display: none; }

.character-page.cp-aw-themed .character-page-echoes-section-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--cp-panel-line-strong, rgba(255, 255, 255, 0.10));
  border-left-color: rgba(var(--character-accent1-rgb), 0.85);
}

.character-page.cp-aw-themed .character-page-echoes-section-card-title {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 22px;
  padding: 0 8px;
  background: rgba(var(--character-accent1-rgb), 0.18);
  border: 1px solid rgba(var(--character-accent1-rgb), 0.40);
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.character-page.cp-aw-themed .character-page-echoes-section-card-value {
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
}

/* ---- Echo Set Details panel ---- */
.character-page.cp-aw-themed .character-page-echoes-section-details {
  margin-top: 16px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--cp-panel-line, rgba(255, 255, 255, 0.06));
  border-radius: 10px;
  box-shadow: none;
}

.character-page.cp-aw-themed .character-page-echoes-section-details-row {
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.character-page.cp-aw-themed .character-page-echoes-section-details-row:first-child { border-top: 0; }

.character-page.cp-aw-themed .character-page-echoes-section-details-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.character-page.cp-aw-themed .character-page-echoes-section-details-label {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.character-page.cp-aw-themed .character-page-echoes-section-details-label .label-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #ffffff;
}

.character-page.cp-aw-themed .character-page-echoes-section-details-label .label-percent {
  flex-shrink: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  font-size: 0.95rem;
  padding: 4px 10px;
  background: rgba(var(--character-accent1-rgb), 0.18);
  border: 1px solid rgba(var(--character-accent1-rgb), 0.40);
  border-radius: 999px;
}

/* Tag-style row head: set icon + tag chips */
.character-page.cp-aw-themed .cp-echo-row__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.character-page.cp-aw-themed .cp-echo-row__head img.echo-set-dropdown-inline-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.30);
  padding: 2px;
  border: 1px solid var(--cp-panel-line, rgba(255, 255, 255, 0.06));
  vertical-align: middle;
}

.character-page.cp-aw-themed .cp-echo-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.character-page.cp-aw-themed .cp-echo-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 0.78rem;
  color: #ffffff;
  white-space: nowrap;
  line-height: 1.2;
}

.character-page.cp-aw-themed .cp-echo-tag__cost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 20px;
  padding: 0 6px;
  background: rgba(var(--character-accent1-rgb), 0.22);
  border: 1px solid rgba(var(--character-accent1-rgb), 0.45);
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.7rem;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.character-page.cp-aw-themed .cp-echo-tag__stat {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

/* Tag color variants per cost (subtle differentiation) */
.character-page.cp-aw-themed .cp-echo-tag[data-cost="4"] { border-color: rgba(var(--character-accent1-rgb), 0.45); }
.character-page.cp-aw-themed .cp-echo-tag[data-cost="3"] { border-color: rgba(255, 255, 255, 0.14); }
.character-page.cp-aw-themed .cp-echo-tag[data-cost="1"] { border-color: rgba(255, 255, 255, 0.08); opacity: 0.92; }

/* Suffix: char icons + Energy value (no "Note: With" wording) */
.character-page.cp-aw-themed .cp-echo-row__suffix {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  width: fit-content;
}

.character-page.cp-aw-themed .cp-echo-row__chars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.character-page.cp-aw-themed .cp-echo-row__chars img.echo-set-dropdown-inline-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  object-fit: cover;
  vertical-align: middle;
}

.character-page.cp-aw-themed .cp-echo-row__energy {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.2px;
}

.character-page.cp-aw-themed .cp-echo-row__energy::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 6px;
  border-radius: 50%;
  background: rgba(var(--character-accent1-rgb), 0.85);
  vertical-align: middle;
  position: relative;
  top: -2px;
}

/* Themed bar */
.character-page.cp-aw-themed .character-page-echoes-section-details-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  overflow: hidden;
}

.character-page.cp-aw-themed .character-page-echoes-section-details-bar-filled {
  background: linear-gradient(90deg,
    rgba(var(--character-accent1-rgb), 0.85),
    rgba(var(--character-accent1-rgb), 0.45));
  border-radius: 999px;
}

/* Stack details on narrow screens */
@media (max-width: 720px) {
  .character-page.cp-aw-themed .character-page-echoes-section-set-bonus-wrapper {
    padding-right: 0;
  }
  .character-page.cp-aw-themed .character-page-echoes-section-set-bonus-toggle-button {
    position: static;
    align-self: flex-end;
    margin-bottom: 8px !important;
  }
  .character-page.cp-aw-themed .character-page-echoes-section-set-cards-grid {
    flex-wrap: wrap;
  }
  .character-page.cp-aw-themed .character-page-echoes-section-card {
    flex: 1 1 calc(50% - 5px);
  }
}
/* =========================================================================
   ECHO SET DETAILS - SINGLE-LINE COMPACT LAYOUT (desktop)
   Pulls the head row (set icon + cost tags), the suffix (char icons +
   energy) and the percent pill onto one horizontal line. The bar shrinks
   to a thin 3px underline. Wraps gracefully on narrow widths.
   ========================================================================= */
.character-page.cp-aw-themed .character-page-echoes-section-details-row {
  padding: 8px 12px;
}

.character-page.cp-aw-themed .character-page-echoes-section-details-info {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.character-page.cp-aw-themed .character-page-echoes-section-details-label {
  flex: 1 1 100%;
  gap: 10px;
  flex-wrap: nowrap;
  align-items: center;
}

.character-page.cp-aw-themed .character-page-echoes-section-details-label .label-text {
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.character-page.cp-aw-themed .cp-echo-row__suffix {
  margin-left: auto;
}

.character-page.cp-aw-themed .character-page-echoes-section-details-bar {
  flex: 1 1 100%;
  height: 3px;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .character-page.cp-aw-themed .character-page-echoes-section-details-label {
    flex-wrap: wrap;
  }
  .character-page.cp-aw-themed .cp-echo-row__suffix {
    margin-left: 0;
  }
}
/* =========================================================================
   ECHOES SECTION - REFINEMENTS
   1. Thicker accent bar (visible).
   2. Better internal padding; translation toggle no longer sticks to edge.
   3. Tighter gaps between set name -> intro -> cost cards -> details.
   4. Polished Echo Set Details panel (rounded all corners, header, dividers).
   ========================================================================= */

/* (1) Make the accent bar visible again */
.character-page.cp-aw-themed .character-page-echoes-section-details-bar {
  height: 5px;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* (2a) Better breathing room at the section sides + translation button */
.character-page.cp-aw-themed .character-page-echoes-section-set {
  padding: 18px 20px;
}

.character-page.cp-aw-themed .character-page-echoes-section-set-bonus-wrapper {
  padding-right: 130px;
}

.character-page.cp-aw-themed .character-page-echoes-section-set-bonus-toggle-button {
  top: 4px;
  right: 4px;
}

/* (3) Tighter rhythm between rows */
.character-page.cp-aw-themed .character-page-echoes-section-set-name {
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.character-page.cp-aw-themed .character-page-echoes-section-set-cards-grid {
  margin-top: 10px;
}

.character-page.cp-aw-themed .character-page-echoes-section-details {
  margin-top: 10px;
}

/* (4) Polished Echo Set Details panel */
.character-page.cp-aw-themed .character-page-echoes-section-details {
  border-radius: var(--aw-radius, 12px);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--cp-panel-line, rgba(255, 255, 255, 0.06));
}

.character-page.cp-aw-themed .character-page-echoes-section-details-header {
  background: rgba(var(--character-accent1-rgb), 0.10);
  border-bottom: 1px solid rgba(var(--character-accent1-rgb), 0.20);
  color: #ffffff;
  padding: 10px 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 0.8rem;
  gap: 10px;
}

.character-page.cp-aw-themed .character-page-echoes-section-details:not(.expanded) .character-page-echoes-section-details-header {
  border-bottom-color: rgba(var(--character-accent1-rgb), 0.20);
}

.character-page.cp-aw-themed .character-page-echoes-section-details-header:hover {
  background: rgba(var(--character-accent1-rgb), 0.10);
}

.character-page.cp-aw-themed .character-page-echoes-section-details-arrow {
  display: none;
}

.character-page.cp-aw-themed .character-page-echoes-section-details-rows {
  padding: 0;
  gap: 0;
}

.character-page.cp-aw-themed .character-page-echoes-section-details-row {
  background: transparent;
  border-radius: 0;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.character-page.cp-aw-themed .character-page-echoes-section-details-row:first-child {
  border-top: 0;
}

.character-page.cp-aw-themed .character-page-echoes-section-details-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}

.character-page.cp-aw-themed .character-page-echoes-section-details-row:hover {
  background: rgba(var(--character-accent1-rgb), 0.06);
}
/* Disable the legacy whole-set hover glow on themed character pages. */
.character-page.cp-aw-themed .character-page-echoes-section-set:hover,
.character-page.cp-aw-themed .character-page-echoes-section-set:has(.character-page-echoes-section-set-intro-echo:hover) {
  box-shadow: none;
  transform: none;
  z-index: auto;
}

.character-page.cp-aw-themed .character-page-echoes-section-set::before,
.character-page.cp-aw-themed .character-page-echoes-section-set:hover::before {
  display: none;
  opacity: 0;
}

/* Also drop the row hover tint we added earlier. */
.character-page.cp-aw-themed .character-page-echoes-section-details-row:hover {
  background: inherit;
}
/* Add left padding inside the set bonus description so the text does not
   stick to the left edge of the panel. */
.character-page.cp-aw-themed .character-page-echoes-section-set-bonus-wrapper {
  padding-left: 14px;
}
/* =========================================================================
   SYNERGIES (auto-filled, image-only) - themed
   ========================================================================= */
.character-page.cp-aw-themed .character-page-synergies-section-content[data-synergies-auto="1"] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.character-page.cp-aw-themed .character-page-synergies-section-content[data-synergies-auto="1"] .character-page-synergies-section-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  padding: 0;
  margin: 0;
  border-radius: var(--aw-radius, 12px);
  overflow: hidden;
  background: var(--cp-panel-2, #23252b);
  border: 1px solid var(--cp-panel-line, rgba(255, 255, 255, 0.06));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  text-decoration: none;
}

.character-page.cp-aw-themed .character-page-synergies-section-content[data-synergies-auto="1"] .character-page-synergies-section-item:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--character-accent1-rgb), 0.45);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(var(--character-accent1-rgb), 0.25);
}

.character-page.cp-aw-themed .character-page-synergies-section-content[data-synergies-auto="1"] .character-page-synergies-section-image {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: rgba(0, 0, 0, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.character-page.cp-aw-themed .character-page-synergies-section-content[data-synergies-auto="1"] .character-page-synergies-section-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  margin: 0;
}

@media (max-width: 480px) {
  .character-page.cp-aw-themed .character-page-synergies-section-content[data-synergies-auto="1"] .character-page-synergies-section-item {
    width: calc(33.333% - 8px);
  }
}

/* =========================================================================
   AW THEMED — DMG Source Breakdown (Calculations tab)
   Scope: .character-page.cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed
   Built on top of the base .character-page-damage-breakdown-* rules.
   ========================================================================= */

.cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed {
  background: var(--cp-panel);
  border: 1px solid var(--cp-panel-line);
  border-radius: var(--aw-radius);
  overflow: hidden;
}
.cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed::before {
  display: none;
}

/* Header — keep accent fill, just clean up spacing/typography */
.cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed .character-page-damage-breakdown-section-header {
  padding: 14px 18px;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--cp-panel-line);
  justify-content: center;
}
.cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed .character-page-damage-breakdown-section-title {
  letter-spacing: 0.7px;
  font-size: 0.95rem;
  text-shadow: none;
}

/* Body container — 2-col layout, no inner card border */
.cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed .character-page-damage-breakdown-container {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  align-items: center;
  gap: 28px;
  padding: 24px 22px 22px;
  overflow: visible;
  justify-content: stretch;
}

/* Diagram column */
.cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed .character-page-damage-breakdown-diagram {
  filter: none;
  justify-self: center;
}
.cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed .character-page-damage-breakdown-chart-wrapper {
  width: 300px;
  height: 300px;
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.45));
}
.cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed .character-page-damage-breakdown-chart-wrapper::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--character-accent1-rgb), 0.18) 0%,
    rgba(var(--character-accent1-rgb), 0.05) 45%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed .character-page-damage-breakdown-svg {
  position: relative;
  z-index: 1;
  filter: none;
}
.cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed .character-page-damage-breakdown-svg .dmg-segment {
  stroke: var(--cp-panel);
  stroke-width: 3;
  transition: filter 180ms ease, transform 180ms ease;
  transform-origin: 150px 150px;
}
.cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed .character-page-damage-breakdown-svg .dmg-segment:hover {
  stroke: var(--cp-panel);
  stroke-width: 3;
  filter: brightness(1.2) drop-shadow(0 0 12px rgba(var(--character-accent1-rgb), 0.55));
}

/* Center pill — solid AW panel, accent ring, structured top-share readout */
.cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed .character-page-damage-breakdown-center {
  width: 144px;
  height: 144px;
  background: linear-gradient(180deg, var(--cp-panel-2) 0%, var(--cp-panel) 100%);
  box-shadow:
    0 0 0 1px var(--cp-panel-line) inset,
    0 0 0 4px rgba(var(--character-accent1-rgb), 0.18),
    0 6px 14px rgba(0, 0, 0, 0.55);
  z-index: 5;
}
.cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed .character-page-damage-breakdown-top-percentages.cp-dmg-center__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: inherit;
  color: #ffffff;
  line-height: 1.1;
  padding: 10px;
  text-align: center;
}

/* =========================================================================
   TRANSLATION BUTTONS — neutral shared styling
   ========================================================================= */
.character-page {
  --cp-translate-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.03) 100%), rgba(18, 22, 28, 0.88);
  --cp-translate-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%), rgba(24, 29, 37, 0.94);
  --cp-translate-bg-active: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(7, 9, 12, 0.96);
  --cp-translate-border: rgba(255, 255, 255, 0.14);
  --cp-translate-border-hover: rgba(255, 255, 255, 0.24);
  --cp-translate-border-active: rgba(255, 255, 255, 0.34);
  --cp-translate-color: rgba(248, 250, 252, 0.96);
  --cp-translate-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 20px rgba(0, 0, 0, 0.24);
  --cp-translate-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 28px rgba(0, 0, 0, 0.32);
  --cp-translate-shadow-active: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 12px 30px rgba(0, 0, 0, 0.38);
}

.character-page .character-page-review-section-translation-btn,
.character-page .character-page-weapon-section-translation-btn,
.character-page .character-page-synergies-section-translation-btn,
.character-page .character-page-team-damage-note-translation-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.1rem;
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--cp-translate-border) !important;
  background: var(--cp-translate-bg) !important;
  color: var(--cp-translate-color) !important;
  box-shadow: var(--cp-translate-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--aw-font-ar, inherit);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.35px;
  text-transform: none;
  transition: transform 180ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease, color 220ms ease, opacity 220ms ease;
}

.character-page .character-page-review-section-translation-btn:hover,
.character-page .character-page-weapon-section-translation-btn:hover,
.character-page .character-page-synergies-section-translation-btn:hover,
.character-page .character-page-team-damage-note-translation-btn:hover {
  background: var(--cp-translate-bg-hover) !important;
  border-color: var(--cp-translate-border-hover) !important;
  color: #ffffff !important;
  box-shadow: var(--cp-translate-shadow-hover);
  transform: translateY(-1px);
}

.character-page .character-page-review-section-translation-btn:focus-visible,
.character-page .character-page-weapon-section-translation-btn:focus-visible,
.character-page .character-page-synergies-section-translation-btn:focus-visible,
.character-page .character-page-team-damage-note-translation-btn:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.34) !important;
  box-shadow: var(--cp-translate-shadow-hover), 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.character-page .character-page-review-section-translation-btn:active,
.character-page .character-page-weapon-section-translation-btn:active,
.character-page .character-page-synergies-section-translation-btn:active,
.character-page .character-page-team-damage-note-translation-btn:active {
  transform: translateY(0) scale(0.98);
}

.character-page .character-page-review-section-translation-btn[aria-pressed="true"],
.character-page .character-page-weapon-section-translation-btn[aria-pressed="true"],
.character-page .character-page-synergies-section-translation-btn[aria-pressed="true"],
.character-page .character-page-team-damage-note-translation-btn[aria-pressed="true"],
.character-page .character-page-team-damage-note-translation-btn[aria-expanded="true"],
.character-page .character-page-synergies-section.ar-active .character-page-synergies-section-translation-btn,
.character-page .character-page-weapon-section-item.ar-active .character-page-weapon-section-translation-btn,
.character-page .character-page-weapon-section-build-note.ar-active .character-page-weapon-section-translation-btn,
.character-page .character-page-team-damage-note-toolbar.ar-active .character-page-review-section-translation-btn {
  background: var(--cp-translate-bg-active) !important;
  border-color: var(--cp-translate-border-active) !important;
  color: #ffffff !important;
  box-shadow: var(--cp-translate-shadow-active);
}

.character-page .character-page-review-section-translation-btn[aria-pressed="true"]:hover,
.character-page .character-page-weapon-section-translation-btn[aria-pressed="true"]:hover,
.character-page .character-page-synergies-section-translation-btn[aria-pressed="true"]:hover,
.character-page .character-page-team-damage-note-translation-btn[aria-pressed="true"]:hover,
.character-page .character-page-team-damage-note-translation-btn[aria-expanded="true"]:hover,
.character-page .character-page-synergies-section.ar-active .character-page-synergies-section-translation-btn:hover,
.character-page .character-page-weapon-section-item.ar-active .character-page-weapon-section-translation-btn:hover,
.character-page .character-page-weapon-section-build-note.ar-active .character-page-weapon-section-translation-btn:hover,
.character-page .character-page-team-damage-note-toolbar.ar-active .character-page-review-section-translation-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(0, 0, 0, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
}

.character-page .character-page-team-damage-section-header .character-page-team-damage-note-translation-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.character-page .character-page-team-damage-note-toolbar {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .character-page .character-page-team-damage-section-header {
    padding-right: 96px;
  }
}
.cp-aw-themed .cp-dmg-center__top-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.cp-aw-themed .cp-dmg-center__top-pct {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  margin-top: 2px;
  letter-spacing: -0.5px;
  font-feature-settings: "tnum" 1;
}
.cp-aw-themed .cp-dmg-center__caption {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 4px;
}

/* Legend column — vertical stack of share rows */
.cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed .character-page-damage-breakdown-legend {
  max-width: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  text-align: left;
}

.cp-aw-themed .cp-dmg-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px 12px;
  background: var(--cp-panel-2);
  border: 1px solid var(--cp-panel-line);
  border-left: 3px solid var(--cp-dmg-color, rgba(var(--character-accent1-rgb), 0.55));
  border-radius: var(--aw-radius-sm);
  color: #ffffff;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  box-shadow: none;
  justify-content: flex-start;
}
.cp-aw-themed .cp-dmg-row:hover {
  background: var(--cp-panel-3);
  border-top-color: var(--cp-panel-line-strong);
  border-right-color: var(--cp-panel-line-strong);
  border-bottom-color: var(--cp-panel-line-strong);
  transform: none;
}
.cp-aw-themed .cp-dmg-row__head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.cp-aw-themed .cp-dmg-row__dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}
.cp-aw-themed .cp-dmg-row__label {
  flex: 1 1 auto;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.cp-aw-themed .cp-dmg-row__pct {
  flex: 0 0 auto;
  font-size: 0.92rem;
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  color: #ffffff;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--cp-panel-line);
  border-radius: 999px;
  min-width: 56px;
  text-align: center;
}
.cp-aw-themed .cp-dmg-row__bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--cp-panel-line);
  border-radius: 999px;
  overflow: hidden;
}
.cp-aw-themed .cp-dmg-row__bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: inherit;
  background: var(--cp-dmg-color, rgba(var(--character-accent1-rgb), 0.85));
  box-shadow: 0 0 8px rgba(var(--character-accent1-rgb), 0.20);
  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Comment / footer block — flush with section, hairline divider on top */
.cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed .character-page-damage-breakdown-comment {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--cp-panel-line);
  border-radius: 0;
  margin: 0;
  padding: 14px 22px 16px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}

/* Tooltip — match AW panel surface */
.cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed .character-page-damage-breakdown-tooltip {
  background: var(--cp-panel);
  border: 1px solid var(--cp-panel-line-strong);
  color: #ffffff;
  border-radius: var(--aw-radius-sm);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed .character-page-damage-breakdown-container {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px 18px 20px;
  }
}
@media (max-width: 560px) {
  .cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed .character-page-damage-breakdown-chart-wrapper {
    width: 240px;
    height: 240px;
  }
  .cp-aw-themed .character-page-damage-breakdown-section.cp-dmg-themed .character-page-damage-breakdown-center {
    width: 120px;
    height: 120px;
  }
  .cp-aw-themed .cp-dmg-center__top-pct { font-size: 1.45rem; }
  .cp-aw-themed .cp-dmg-row__label { font-size: 0.86rem; }
  .cp-aw-themed .cp-dmg-row__pct { font-size: 0.84rem; min-width: 50px; }
}

/* =========================================================================
   Shared premium character showcase layout
   ========================================================================= */
body.cc-showcase-body {
  --cc-element-core: var(--aero-accent1);
  --cc-element-soft: var(--aero-accent2);
  --cc-element-rgb: 122 224 194;
  --cc-element-soft-rgb: 81 212 177;
  --cc-element-glow: rgb(var(--cc-element-rgb) / 0.24);
  --cc-element-motif-blur: 0px;
  background:
    radial-gradient(circle at 16% 8%, rgb(var(--cc-element-rgb) / 0.18), transparent 30vw),
    radial-gradient(circle at 84% 16%, rgb(var(--cc-element-soft-rgb) / 0.12), transparent 34vw),
    radial-gradient(circle at 50% 92%, rgb(var(--cc-element-rgb) / 0.14), transparent 38vw),
    linear-gradient(180deg, #050809 0%, #0a1012 44%, #050708 100%);
  color: #ffffff;
}

body.cc-showcase-body.cc-element-aero,
.character-page.cc-showcase.cc-element-aero {
  --cc-element-core: var(--aero-accent1);
  --cc-element-soft: var(--aero-accent2);
  --cc-element-rgb: 122 224 194;
  --cc-element-soft-rgb: 81 212 177;
  --cc-element-glow: rgb(var(--cc-element-rgb) / 0.24);
  --cc-element-motif-blur: 0px;
}

body.cc-showcase-body.cc-element-fusion,
.character-page.cc-showcase.cc-element-fusion {
  --cc-element-core: var(--fusion-accent1);
  --cc-element-soft: var(--fusion-accent2);
  --cc-element-rgb: 201 55 42;
  --cc-element-soft-rgb: 241 77 74;
  --cc-element-glow: rgb(var(--cc-element-rgb) / 0.24);
  --cc-element-motif-blur: 0.4px;
}

body.cc-showcase-body.cc-element-electro,
.character-page.cc-showcase.cc-element-electro {
  --cc-element-core: var(--electro-accent1);
  --cc-element-soft: var(--electro-accent2);
  --cc-element-rgb: 141 50 197;
  --cc-element-soft-rgb: 180 102 233;
  --cc-element-glow: rgb(var(--cc-element-rgb) / 0.24);
  --cc-element-motif-blur: 0px;
}

body.cc-showcase-body.cc-element-glacio,
.character-page.cc-showcase.cc-element-glacio {
  --cc-element-core: var(--glacio-accent1);
  --cc-element-soft: var(--glacio-accent2);
  --cc-element-rgb: 24 139 184;
  --cc-element-soft-rgb: 79 195 247;
  --cc-element-glow: rgb(var(--cc-element-rgb) / 0.22);
  --cc-element-motif-blur: 0px;
}

body.cc-showcase-body.cc-element-havoc,
.character-page.cc-showcase.cc-element-havoc {
  --cc-element-core: var(--havoc-accent1);
  --cc-element-soft: var(--havoc-accent2);
  --cc-element-rgb: 151 23 82;
  --cc-element-soft-rgb: 177 59 113;
  --cc-element-glow: rgb(var(--cc-element-rgb) / 0.22);
  --cc-element-motif-blur: 0.5px;
}

body.cc-showcase-body.cc-element-spectro,
.character-page.cc-showcase.cc-element-spectro {
  --cc-element-core: var(--spectro-accent1);
  --cc-element-soft: var(--spectro-accent2);
  --cc-element-rgb: 255 215 0;
  --cc-element-soft-rgb: 255 234 0;
  --cc-element-glow: rgb(var(--cc-element-rgb) / 0.24);
  --cc-element-motif-blur: 0px;
}

body.cc-showcase-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 78%);
}

body.cc-showcase-body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 42%, rgb(var(--cc-element-rgb) / 0.035) 45%, transparent 52% 100%);
  animation: cc-aurora 9s ease-in-out infinite alternate;
}

.cc-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  height: 3px;
  width: calc(var(--cc-scroll, 0) * 100%);
  background: var(--cc-element-core);
  box-shadow: 0 0 18px rgb(var(--cc-element-rgb) / 0.8);
}

.character-page.cc-showcase {
  width: min(1440px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(12px, 2vw, 28px) 0 64px;
  --cc-glass: rgba(20, 21, 26, 0.74);
  --cc-glass-strong: rgba(22, 23, 28, 0.9);
  --cc-section-bg: rgba(28, 29, 34, 0.96);
  --cc-card-bg: rgba(255, 255, 255, 0.045);
  --cc-card-bg-raised: var(--website-theme-bg-raised, #1c1d22);
  --cc-line: rgb(var(--cc-element-rgb) / 0.16);
  --cc-line-strong: rgb(var(--cc-element-rgb) / 0.32);
  --cc-ink: #ffffff;
  --cc-muted: rgba(255, 255, 255, 0.88);
  --cc-panel-top: rgba(255, 255, 255, 0.105);
  --cc-panel-bottom: rgba(255, 255, 255, 0.025);
  --cc-depth: 0 28px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.character-page.cc-showcase,
.character-page.cc-showcase * {
  box-sizing: border-box;
}

.cc-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(460px, 58vh, 620px);
  display: grid;
  grid-template-columns: minmax(390px, 0.72fr) minmax(520px, 1.28fr);
  gap: clamp(14px, 2vw, 34px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 38px) clamp(8px, 1.6vw, 22px) clamp(10px, 1.4vw, 20px) clamp(24px, 3.4vw, 48px);
  margin: 26px 0 28px;
  border: 1px solid var(--cc-line);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgb(var(--cc-element-rgb) / 0.12), transparent 36%),
    radial-gradient(circle at 72% 26%, rgb(var(--cc-element-soft-rgb) / 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    var(--cc-glass);
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  isolation: isolate;
}

.cc-element-motif {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.9;
  filter: blur(var(--cc-element-motif-blur, 0));
}

.cc-element-motif__line {
  position: absolute;
  right: clamp(70px, 12vw, 210px);
  top: 18%;
  width: min(44vw, 620px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--cc-element-core), var(--cc-element-soft), transparent);
  box-shadow: 0 0 24px var(--cc-element-glow);
  opacity: 0.54;
  transform: rotate(-14deg) translateZ(0);
  animation: cc-element-line-drift 12s ease-in-out infinite;
}

.cc-element-motif__line:nth-child(2) {
  top: 44%;
  right: clamp(20px, 7vw, 130px);
  width: min(52vw, 720px);
  opacity: 0.38;
  animation-delay: -4s;
}

.cc-element-motif__line:nth-child(3) {
  top: 70%;
  right: clamp(110px, 18vw, 300px);
  width: min(34vw, 470px);
  opacity: 0.3;
  animation-delay: -7s;
}

.cc-element-motif__leaf {
  position: absolute;
  right: clamp(140px, 22vw, 360px);
  top: 22%;
  width: 12px;
  height: 26px;
  border-radius: 80% 0 80% 0;
  border: 1px solid color-mix(in srgb, var(--cc-element-core) 70%, white 30%);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), color-mix(in srgb, var(--cc-element-core) 36%, transparent));
  box-shadow: 0 0 18px var(--cc-element-glow);
  transform: rotate(36deg) translateZ(0);
  animation: cc-element-shape-drift 9s ease-in-out infinite;
}

.cc-element-motif__leaf:nth-child(5) {
  right: clamp(34px, 8vw, 150px);
  top: 50%;
  width: 10px;
  height: 22px;
  opacity: 0.78;
  animation-delay: -3s;
}

.cc-element-motif__leaf:nth-child(6) {
  right: clamp(210px, 30vw, 500px);
  top: 76%;
  width: 9px;
  height: 19px;
  opacity: 0.62;
  animation-delay: -6s;
}

body.cc-showcase-body.cc-element-fusion .cc-element-motif__leaf,
.character-page.cc-showcase.cc-element-fusion .cc-element-motif__leaf {
  width: 14px;
  height: 28px;
  border-radius: 80% 18% 65% 18%;
  clip-path: polygon(50% 0, 82% 28%, 66% 100%, 45% 78%, 24% 100%, 32% 48%, 12% 30%);
  transform: rotate(22deg) translateZ(0);
}

body.cc-showcase-body.cc-element-fusion .cc-element-motif__line,
.character-page.cc-showcase.cc-element-fusion .cc-element-motif__line {
  height: 3px;
  border-radius: 20% 80% 25% 75%;
  filter: drop-shadow(0 0 12px rgb(var(--cc-element-rgb) / 0.38));
  animation-name: cc-fusion-line-drift;
  animation-duration: 7.6s;
}

body.cc-showcase-body.cc-element-fusion .cc-element-motif__leaf,
.character-page.cc-showcase.cc-element-fusion .cc-element-motif__leaf {
  animation-name: cc-fusion-shape-drift;
  animation-duration: 6.8s;
}

body.cc-showcase-body.cc-element-electro .cc-element-motif__line,
.character-page.cc-showcase.cc-element-electro .cc-element-motif__line {
  clip-path: polygon(0 45%, 36% 45%, 42% 0, 52% 100%, 59% 45%, 100% 45%, 100% 58%, 63% 58%, 54% 100%, 45% 0, 39% 58%, 0 58%);
  height: 10px;
  border-radius: 0;
  animation-name: cc-electro-line-drift;
  animation-duration: 5.4s;
}

body.cc-showcase-body.cc-element-electro .cc-element-motif__leaf,
.character-page.cc-showcase.cc-element-electro .cc-element-motif__leaf {
  width: 11px;
  height: 32px;
  border-radius: 0;
  clip-path: polygon(58% 0, 24% 45%, 52% 45%, 35% 100%, 82% 36%, 54% 36%);
  animation-name: cc-electro-shape-drift;
  animation-duration: 4.8s;
}

body.cc-showcase-body.cc-element-glacio .cc-element-motif__leaf,
.character-page.cc-showcase.cc-element-glacio .cc-element-motif__leaf {
  width: 19px;
  height: 19px;
  border-radius: 3px;
  clip-path: polygon(50% 0, 92% 25%, 92% 75%, 50% 100%, 8% 75%, 8% 25%);
  transform: rotate(45deg) translateZ(0);
  animation-name: cc-glacio-shape-drift;
  animation-duration: 12s;
}

body.cc-showcase-body.cc-element-glacio .cc-element-motif__line,
.character-page.cc-showcase.cc-element-glacio .cc-element-motif__line {
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffffff, var(--cc-element-core), #ffffff, transparent);
  animation-name: cc-glacio-line-drift;
  animation-duration: 13s;
}

body.cc-showcase-body.cc-element-havoc .cc-element-motif__line,
.character-page.cc-showcase.cc-element-havoc .cc-element-motif__line {
  height: 5px;
  border-radius: 45% 55% 40% 60%;
  clip-path: polygon(0 50%, 20% 15%, 48% 45%, 68% 0, 100% 50%, 72% 100%, 49% 60%, 21% 88%);
  animation-name: cc-havoc-line-drift;
  animation-duration: 8.4s;
}

body.cc-showcase-body.cc-element-havoc .cc-element-motif__leaf,
.character-page.cc-showcase.cc-element-havoc .cc-element-motif__leaf {
  width: 16px;
  height: 16px;
  border-radius: 32% 68% 36% 64%;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation-name: cc-havoc-shape-drift;
  animation-duration: 7.2s;
}

body.cc-showcase-body.cc-element-spectro .cc-element-motif__line,
.character-page.cc-showcase.cc-element-spectro .cc-element-motif__line {
  height: 2px;
  background: repeating-linear-gradient(90deg, transparent 0 14px, var(--cc-element-core) 14px 28px, var(--cc-element-soft) 28px 36px, transparent 36px 50px);
  animation-name: cc-spectro-line-drift;
  animation-duration: 11.5s;
}

body.cc-showcase-body.cc-element-spectro .cc-element-motif__leaf,
.character-page.cc-showcase.cc-element-spectro .cc-element-motif__leaf {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 35%, var(--cc-element-core) 38% 54%, transparent 58%);
  animation-name: cc-spectro-shape-drift;
  animation-duration: 10s;
}

.cc-hero:hover {
  border-color: rgb(var(--cc-element-rgb) / 0.28);
  box-shadow:
    0 40px 115px rgba(0, 0, 0, 0.58),
    0 0 46px rgb(var(--cc-element-rgb) / 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.cc-hero::before,
.cc-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.cc-hero::before {
  inset: -28% -18% auto auto;
  width: min(1080px, 74vw);
  height: min(1080px, 74vw);
  border-radius: 50%;
  background: conic-gradient(from 180deg, transparent, rgb(var(--cc-element-rgb) / 0.28), transparent, rgb(var(--cc-element-soft-rgb) / 0.18), transparent);
  filter: blur(18px);
  animation: cc-rotate 18s linear infinite;
}

.cc-hero::after {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.18;
  mask-image: linear-gradient(90deg, black, transparent 78%);
}

.cc-hero__copy {
  position: relative;
  z-index: 4;
  align-self: center;
}

.cc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 7px 12px;
  border: 1px solid rgb(var(--cc-element-rgb) / 0.24);
  border-radius: 999px;
  color: var(--cc-element-core);
  background: rgb(var(--cc-element-rgb) / 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.cc-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cc-element-core);
  box-shadow: 0 0 18px var(--cc-element-core);
}

.cc-hero h1 {
  margin: 0;
  font-size: clamp(3.9rem, 8.8vw, 7.8rem);
  line-height: 0.86;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.cc-hero h1 span {
  display: block;
  padding-left: 0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(210, 255, 242, 0.78);
  text-shadow: none;
}

.cc-hero__lede {
  max-width: 680px;
  margin: 22px 0 0;
  color: var(--cc-muted);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.9;
}

.cc-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(135px, 1fr));
  gap: 10px;
  margin-top: 18px;
  max-width: 500px;
}

.cc-meta-card {
  position: relative;
  overflow: hidden;
  padding: 11px 13px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cc-meta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgb(var(--cc-element-rgb) / 0.12), transparent 48%);
  opacity: 0;
  transition: opacity 180ms ease;
}

.cc-meta-card:hover::before {
  opacity: 1;
}

.cc-meta-card b {
  display: block;
  color: #ffffff;
  font-size: 1.05rem;
}

.cc-meta-card span {
  display: block;
  margin-top: 5px;
  color: var(--cc-muted);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cc-hero__visual {
  position: relative;
  align-self: stretch;
  min-height: clamp(440px, 54vh, 600px);
  margin-left: clamp(-70px, -4vw, -24px);
  z-index: 2;
}

.cc-portrait-ring {
  position: absolute;
  inset: -2% -6% -6% -8%;
  border-radius: 42% 58% 48% 52% / 58% 48% 52% 42%;
  background:
    radial-gradient(circle at 54% 20%, rgba(255, 255, 255, 0.24), transparent 24%),
    linear-gradient(135deg, rgb(var(--cc-element-rgb) / 0.28), rgb(var(--cc-element-soft-rgb) / 0.08) 55%, rgba(255, 255, 255, 0.06));
  border: 1px solid rgb(var(--cc-element-rgb) / 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 40px 80px rgba(0, 0, 0, 0.36), 0 0 80px rgb(var(--cc-element-rgb) / 0.16);
  animation: cc-morph 8s ease-in-out infinite alternate;
}

.cc-portrait-ring::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: inherit;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  animation: cc-rotate 28s linear infinite reverse;
}

.cc-portrait {
  --cc-portrait-scale: 1.18;
  --cc-portrait-x: 0px;
  position: absolute;
  right: clamp(28px, 5vw, 86px);
  top: clamp(-18px, -1.5vh, 0px);
  bottom: auto;
  width: auto;
  height: min(128%, 760px);
  max-width: none;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(0 32px 42px rgba(0, 0, 0, 0.52));
  transform-origin: top center;
  animation: cc-float 5.8s ease-in-out infinite;
}

.cc-video-card {
  position: relative;
  display: block;
  margin-top: 12px;
  width: min(430px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  color: #ffffff;
  background: rgba(5, 12, 14, 0.72);
  border: 1px solid rgb(var(--cc-element-rgb) / 0.28);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.42), 0 0 34px rgb(var(--cc-element-rgb) / 0.12);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.cc-video-card:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: rgb(var(--cc-element-rgb) / 0.48);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 46px rgb(var(--cc-element-rgb) / 0.18);
}

.cc-video-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.08) contrast(1.05) brightness(0.78);
}

.cc-video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.72) 100%);
}

.cc-video-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  color: #061613;
  background: linear-gradient(135deg, #ffffff, var(--cc-element-core));
  box-shadow: 0 0 32px rgb(var(--cc-element-rgb) / 0.42);
  font-size: 1rem;
  text-indent: 2px;
}

.cc-video-card__label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 2;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cc-section-rail {
  position: sticky;
  top: 10px;
  z-index: 30;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 0 22px;
  padding: 8px;
  border-radius: 20px;
  background: rgba(5, 11, 13, 0.72);
  border: 1px solid var(--cc-line);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015)),
    radial-gradient(circle at 12% 0%, rgb(var(--cc-element-rgb) / 0.16), transparent 42%);
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--cc-element-rgb) / 0.55) transparent;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 8px;
}

.cc-section-rail::-webkit-scrollbar {
  height: 6px;
}

.cc-section-rail::-webkit-scrollbar-track {
  background: transparent;
}

.cc-section-rail::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgb(var(--cc-element-rgb) / 0.45);
}

.cc-rail-button {
  position: relative;
  overflow: hidden;
  flex: 1 0 auto;
  min-width: 118px;
  border: 0;
  border-radius: 15px;
  padding: 12px 14px;
  background: transparent;
  color: rgba(237, 255, 250, 0.72);
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: 180ms ease;
}

.cc-rail-button::after {
  content: none;
}

.cc-rail-button:hover,
.cc-rail-button.is-active {
  color: var(--talent-header-left-color, #041412);
  background: linear-gradient(135deg, var(--cc-element-core), var(--cc-element-soft));
  box-shadow: 0 10px 24px rgb(var(--cc-element-rgb) / 0.16);
}

.cc-rail-button:hover::after,
.cc-rail-button.is-active::after {
  opacity: 0;
}

.cc-rail-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.character-page.cc-showcase .character-page__tab-contents {
  display: block;
  counter-reset: cc-section-counter;
}

.character-page.cc-showcase .character-page__tab-content {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  margin: 0;
  padding-top: 0 !important;
  min-width: 0;
  scroll-margin-top: 92px;
}

.character-page.cc-showcase .character-page__tab-content:not(:last-child) {
  margin-bottom: 24px !important;
}

.character-page.cc-showcase .character-page__tab-content > .character-page__stats-panel,
.character-page.cc-showcase .character-page__tab-content > .character-page-talent-priority-section,
.character-page.cc-showcase .character-page__tab-content > .character-page-best-sub-stats-section,
.character-page.cc-showcase .character-page__tab-content > .character-page-weapons-section,
.character-page.cc-showcase .character-page__tab-content > .character-page-echoes-section,
.character-page.cc-showcase .character-page__tab-content > .character-page-synergies-section,
.character-page.cc-showcase .character-page__tab-content > .character-page-team-damage-section,
.character-page.cc-showcase .character-page__tab-content > .character-page-damage-breakdown-section,
.character-page.cc-showcase .character-page__tab-content > .character-page-related-videos-section,
.character-page.cc-showcase .character-page__tab-content > .disclaimer-panel,
.character-page.cc-showcase .character-page__tab-content > .seq-dmg-increase {
  margin: 0 0 24px !important;
}

.character-page.cc-showcase .character-page__stats-panel,
.character-page.cc-showcase .talent-section,
.character-page.cc-showcase .character-page-talent-priority-section,
.character-page.cc-showcase .character-page-best-sub-stats-section,
.character-page.cc-showcase .character-page-weapons-section,
.character-page.cc-showcase .character-page-echoes-section,
.character-page.cc-showcase .character-page-synergies-section,
.character-page.cc-showcase .character-page-team-damage-section,
.character-page.cc-showcase .character-page-damage-breakdown-section,
.character-page.cc-showcase .character-page-related-videos-section,
.character-page.cc-showcase .disclaimer-panel,
.character-page.cc-showcase .seq-dmg-increase {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cc-line) !important;
  border-radius: 26px !important;
  background: var(--cc-section-bg);
  box-shadow: var(--cc-depth) !important;
  backdrop-filter: blur(18px);
}

.character-page.cc-showcase .character-page__stats-panel::after,
.character-page.cc-showcase .talent-section::after,
.character-page.cc-showcase .character-page-best-sub-stats-section::after,
.character-page.cc-showcase .character-page-weapons-section::after,
.character-page.cc-showcase .character-page-echoes-section::after,
.character-page.cc-showcase .character-page-synergies-section::after,
.character-page.cc-showcase .character-page-team-damage-section::after,
.character-page.cc-showcase .character-page-damage-breakdown-section::after,
.character-page.cc-showcase .seq-dmg-increase::after {
  content: none;
}

.character-page.cc-showcase .cc-in-view::after {
  transform: none;
}

.character-page.cc-showcase .character-page__stats-header,
.character-page.cc-showcase .character-page-talent-priority-header,
.character-page.cc-showcase .character-page-best-sub-stats-section-header,
.character-page.cc-showcase .character-page-weapons-section-header,
.character-page.cc-showcase .character-page-echoes-section-header,
.character-page.cc-showcase .character-page-synergies-section-header,
.character-page.cc-showcase .character-page-team-damage-section-header,
.character-page.cc-showcase .character-page-damage-breakdown-section-header,
.character-page.cc-showcase .character-page-related-videos-header,
.character-page.cc-showcase .character-page-disclaimer-header,
.character-page.cc-showcase .seq-dmg-increase__header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  background: linear-gradient(135deg, rgb(var(--cc-element-rgb) / 0.92), rgb(var(--cc-element-soft-rgb) / 0.78));
  color: #031412 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 14px 30px rgba(0, 0, 0, 0.18) !important;
}

.character-page.cc-showcase .character-page__stats-title,
.character-page.cc-showcase .character-page-talent-priority-title,
.character-page.cc-showcase .character-page-talent-priority-title-en,
.character-page.cc-showcase .character-page-talent-priority-title-ar,
.character-page.cc-showcase .character-page-best-sub-stats-section-header-left,
.character-page.cc-showcase .character-page-weapons-section-header-left,
.character-page.cc-showcase .character-page-echoes-section-header-left,
.character-page.cc-showcase .character-page-synergies-section-title,
.character-page.cc-showcase .character-page-team-damage-section-title,
.character-page.cc-showcase .character-page-damage-breakdown-section-title,
.character-page.cc-showcase .character-page-related-videos-title-en,
.character-page.cc-showcase .character-page-related-videos-title-ar,
.character-page.cc-showcase .character-page-disclaimer-title,
.character-page.cc-showcase .seq-dmg-increase__title {
  color: var(--talent-header-left-color, #031412) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

.character-page.cc-showcase .character-page__stats-panel {
  overflow: hidden;
  padding: 14px !important;
}

.character-page.cc-showcase .character-page__stats-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px !important;
  margin: 0 0 14px !important;
  border-radius: 18px !important;
  background: var(--cc-card-bg-raised);
  border: 1px solid rgb(var(--cc-element-rgb) / 0.12) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.22);
}

.character-page.cc-showcase .character-page__stats-title {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  min-width: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 0%, rgb(var(--cc-element-rgb) / 0.16), transparent 62%),
    linear-gradient(135deg, rgba(12, 12, 15, 0.96), rgba(22, 22, 27, 0.86));
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  border: 1px solid rgb(var(--cc-element-rgb) / 0.34);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

.character-page.cc-showcase .character-page__stats-slider-container {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--cc-card-bg);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 30px rgba(0, 0, 0, 0.28);
}

.character-page.cc-showcase .character-page__stats-slider-container span {
  color: #ffffff;
  font-weight: 900;
  white-space: nowrap;
  font-size: clamp(1.05rem, 2.2vw, 1.42rem);
  text-shadow: 0 0 18px rgb(var(--cc-element-rgb) / 0.14);
}

.character-page.cc-showcase #character-page__stats-slider {
  width: 100%;
  height: 8px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(90deg, var(--cc-element-core), var(--cc-element-soft));
  box-shadow: 0 0 24px rgb(var(--cc-element-rgb) / 0.35);
}

.character-page.cc-showcase #character-page__stats-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  background: #0a1113;
  box-shadow: 0 0 0 5px rgb(var(--cc-element-rgb) / 0.18), 0 0 22px rgb(var(--cc-element-rgb) / 0.55);
  cursor: pointer;
}

.character-page.cc-showcase #character-page__stats-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  background: #0a1113;
  box-shadow: 0 0 0 5px rgb(var(--cc-element-rgb) / 0.18), 0 0 22px rgb(var(--cc-element-rgb) / 0.55);
  cursor: pointer;
}

.character-page.cc-showcase #character-page__stats-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cc-element-core), var(--cc-element-soft));
}

.character-page.cc-showcase .seq-dmg-increase {
  padding: 0 !important;
}

.character-page.cc-showcase .seq-dmg-increase__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 10px !important;
  border-radius: 0 !important;
}

.character-page.cc-showcase .seq-dmg-increase__subtitle {
  margin: 0;
  color: rgba(3, 20, 18, 0.72) !important;
  font-weight: 700;
  text-align: center;
}

.character-page.cc-showcase .seq-dmg-increase__list,
.character-page.cc-showcase .seq-dmg-increase__footer {
  padding-left: 18px;
  padding-right: 18px;
}

.character-page.cc-showcase .character-page__stats-grid,
.character-page.cc-showcase .cp-build-targets__grid,
.character-page.cc-showcase .character-page-echoes-section-set-cards-grid {
  gap: 14px;
}

.character-page.cc-showcase .character-page__stat-card,
.character-page.cc-showcase .cp-stat-card,
.character-page.cc-showcase .character-page-echoes-section-card,
.character-page.cc-showcase .character-page-talent-priority-step,
.character-page.cc-showcase .cp-build-targets__priority-item,
.character-page.cc-showcase .character-page-damage-breakdown-legend-item,
.character-page.cc-showcase .character-page-synergies-section-item {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: var(--cc-card-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 26px rgba(0, 0, 0, 0.2) !important;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.character-page.cc-showcase .character-page__stat-card:hover,
.character-page.cc-showcase .cp-stat-card:hover,
.character-page.cc-showcase .character-page-echoes-section-card:hover,
.character-page.cc-showcase .character-page-talent-priority-step:hover,
.character-page.cc-showcase .cp-build-targets__priority-item:hover,
.character-page.cc-showcase .character-page-damage-breakdown-legend-item:hover,
.character-page.cc-showcase .character-page-synergies-section-item:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--cc-element-rgb) / 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 40px rgba(0, 0, 0, 0.28), 0 0 26px rgb(var(--cc-element-rgb) / 0.1) !important;
}

.character-page.cc-showcase .talents-columns {
  gap: 18px;
}

.character-page.cc-showcase .talent-section__content,
.character-page.cc-showcase .character-page-review-section-text-en,
.character-page.cc-showcase .character-page-review-section-text-ar,
.character-page.cc-showcase .character-page-team-damage-note,
.character-page.cc-showcase .character-page-damage-breakdown-comment {
  color: var(--cc-muted) !important;
}

.character-page.cc-showcase .talent-dropdown__header,
.character-page.cc-showcase .character-page-echoes-section-details-header {
  border-radius: 16px !important;
  background: var(--cc-card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.character-page.cc-showcase .character-page-echoes-section-details-header {
  cursor: default !important;
  user-select: text !important;
}

.character-page.cc-showcase .character-page-echoes-section-details-arrow {
  display: none !important;
}

.character-page.cc-showcase .character-page-echoes-section-details-rows,
.character-page.cc-showcase .character-page-echoes-section-details-optimal-build {
  display: flex !important;
}

.character-page.cc-showcase .character-page-echoes-section-details-optimal-build {
  flex-direction: column;
}

.character-page.cc-showcase .character-page-damage-breakdown-container {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  gap: 18px;
}

.character-page.cc-showcase .character-page-weapon-section-item,
.character-page.cc-showcase .character-page-weapon-section-build-note,
.character-page.cc-showcase .character-page-echoes-section-set,
.character-page.cc-showcase .character-page-team-damage-card {
  overflow: hidden;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  background: var(--cc-card-bg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.25) !important;
}

.character-page.cc-showcase .seq-dmg-increase__list {
  padding: 18px;
}

.character-page.cc-showcase .character-page-related-videos-section {
  margin-top: 40px;
}

.character-page.cc-showcase .character-page__tab-content > *,
.character-page.cc-showcase .character-page__stats-panel > *,
.character-page.cc-showcase .talent-section > *,
.character-page.cc-showcase .character-page-weapons-section > *,
.character-page.cc-showcase .character-page-echoes-section > *,
.character-page.cc-showcase .character-page-synergies-section > *,
.character-page.cc-showcase .character-page-team-damage-section > *,
.character-page.cc-showcase .character-page-damage-breakdown-section > * {
  min-width: 0;
}

.character-page.cc-showcase .character-page__tab-content img:not(.cc-portrait),
.character-page.cc-showcase .character-page__tab-content video,
.character-page.cc-showcase .character-page__tab-content canvas,
.character-page.cc-showcase .character-page__tab-content svg {
  max-width: 100%;
}

@media (max-width: 1100px) {
  .cc-hero {
    grid-template-columns: 1fr;
  }

  .cc-hero__visual {
    min-height: 500px;
    margin-left: 0;
  }

  .cc-portrait {
    --cc-portrait-scale: 1.12;
    --cc-portrait-x: 50%;
    right: 50%;
    top: -8px;
    bottom: auto;
    width: auto;
    height: min(124%, 660px);
  }

  .cc-meta-grid,
  .character-page.cc-showcase .cp-build-targets__body,
  .character-page.cc-showcase .character-page-damage-breakdown-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .character-page.cc-showcase {
    width: min(100% - 14px, 1440px);
    padding-bottom: 42px;
  }

  .cc-hero {
    min-height: auto;
    padding: 20px;
    border-radius: 24px;
    margin: 16px 0 16px;
    gap: 18px;
  }

  .cc-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.11em;
  }

  .cc-hero h1 {
    font-size: clamp(2.85rem, 17vw, 4.65rem);
    letter-spacing: 0.01em;
  }

  .cc-hero__lede {
    margin-top: 14px;
    font-size: 0.96rem;
    line-height: 1.7;
  }

  .cc-meta-grid {
    gap: 8px;
    margin-top: 14px;
  }

  .cc-meta-card {
    padding: 10px 11px;
  }

  .cc-section-rail {
    top: 6px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 14px;
    padding: 7px;
    border-radius: 18px;
    overflow: visible;
  }

  .cc-rail-button {
    width: 100%;
    min-width: 0;
    padding: 10px 6px;
    border-radius: 12px;
    font-size: 0.74rem;
    line-height: 1.12;
    letter-spacing: 0.01em;
    white-space: normal;
  }

  .cc-meta-grid,
  .character-page.cc-showcase .cp-build-targets__body,
  .character-page.cc-showcase .character-page-damage-breakdown-container {
    grid-template-columns: 1fr;
  }

  .cc-hero__visual {
    min-height: 390px;
  }

  .cc-video-card {
    width: 100%;
  }

  .cc-portrait {
    --cc-portrait-scale: 1.06;
    --cc-portrait-x: 50%;
    top: -6px;
    bottom: auto;
    width: auto;
    height: min(118%, 470px);
  }

  .character-page.cc-showcase .character-page__stats-header,
  .character-page.cc-showcase .character-page__stats-slider-container {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .character-page.cc-showcase .character-page__stats-header {
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    text-align: center;
    padding: 18px 12px !important;
  }

  .character-page.cc-showcase .character-page__stats-title {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .character-page.cc-showcase .character-page__stats-slider-container {
    width: min(100%, 560px);
    margin-inline: auto;
    justify-items: center;
    text-align: center;
    padding: 20px 18px 22px;
  }

  .character-page.cc-showcase .character-page__stats-slider-container span {
    width: 100%;
    text-align: center;
  }

  .character-page.cc-showcase #character-page__stats-slider {
    width: calc(100% - 22px);
    margin-inline: auto;
  }

  .character-page.cc-showcase .character-page__tab-content {
    margin: 14px 0 18px;
    scroll-margin-top: 150px;
  }

  .character-page.cc-showcase .character-page__stats-panel,
  .character-page.cc-showcase .talent-section,
  .character-page.cc-showcase .character-page-talent-priority-section,
  .character-page.cc-showcase .character-page-best-sub-stats-section,
  .character-page.cc-showcase .character-page-weapons-section,
  .character-page.cc-showcase .character-page-echoes-section,
  .character-page.cc-showcase .character-page-synergies-section,
  .character-page.cc-showcase .character-page-team-damage-section,
  .character-page.cc-showcase .character-page-damage-breakdown-section,
  .character-page.cc-showcase .character-page-related-videos-section,
  .character-page.cc-showcase .disclaimer-panel,
  .character-page.cc-showcase .seq-dmg-increase {
    border-radius: 20px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .character-page.cc-showcase .character-page__stats-panel {
    padding: 10px !important;
  }

  .character-page.cc-showcase .character-page__stats-grid,
  .character-page.cc-showcase .cp-build-targets__grid,
  .character-page.cc-showcase .character-page-echoes-section-set-cards-grid {
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .character-page.cc-showcase {
    width: min(100% - 10px, 1440px);
  }

  .cc-hero {
    padding: 16px;
    border-radius: 20px;
  }

  .cc-hero h1 {
    font-size: clamp(2.55rem, 16vw, 3.8rem);
  }

  .cc-hero__visual {
    min-height: 340px;
  }

  .cc-portrait-ring {
    inset: 3% -18% -4%;
  }

  .cc-portrait {
    height: min(113%, 410px);
  }

  .cc-video-card__play {
    width: 44px;
    height: 44px;
  }

  .cc-section-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .character-page.cc-showcase .character-page__tab-content {
    scroll-margin-top: 190px;
  }

  .character-page.cc-showcase .character-page__stats-panel {
    padding: 8px !important;
  }

  .character-page.cc-showcase .character-page__stats-header {
    padding: 16px 8px !important;
  }

  .character-page.cc-showcase .character-page__stats-slider-container {
    padding: 18px 14px 20px;
  }

  .character-page.cc-showcase #character-page__stats-slider {
    width: calc(100% - 18px);
  }
}

body.cc-showcase-body::after,
.cc-portrait-ring {
  animation: none !important;
}

.cc-hero::before,
.cc-portrait,
.cc-portrait-ring::before,
.cc-element-motif__line,
.cc-element-motif__leaf {
  will-change: transform;
  transform: translateZ(0);
}

.cc-hero::before {
  animation: cc-rotate-safe 42s linear infinite;
}

.cc-portrait {
  animation: cc-float-safe 10s ease-in-out infinite;
}

.cc-portrait-ring::before {
  animation: cc-rotate-safe 60s linear infinite reverse;
}

@media (max-width: 760px) {
  .cc-hero::before,
  .cc-portrait,
  .cc-portrait-ring::before,
  .cc-element-motif__line,
  .cc-element-motif__leaf {
    animation-duration: 70s;
  }

  .cc-portrait {
    animation-name: cc-float-mobile-safe;
    animation-duration: 14s;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.cc-showcase-body::after,
  .cc-hero::before,
  .cc-portrait-ring,
  .cc-portrait,
  .cc-portrait-ring::before,
  .cc-element-motif__line,
  .cc-element-motif__leaf {
    animation: none !important;
  }
}

@keyframes cc-aurora {
  from { transform: translateX(-4%) skewX(-4deg); opacity: 0.65; }
  to { transform: translateX(4%) skewX(4deg); opacity: 1; }
}

@keyframes cc-rotate {
  to { transform: rotate(360deg); }
}

@keyframes cc-float {
  0%, 100% { transform: translateX(var(--cc-portrait-x, 0px)) translateY(0) rotate(-1deg) scale(var(--cc-portrait-scale, 1)); }
  50% { transform: translateX(var(--cc-portrait-x, 0px)) translateY(10px) rotate(1deg) scale(var(--cc-portrait-scale, 1)); }
}

@keyframes cc-rotate-safe {
  to { transform: translateZ(0) rotate(360deg); }
}

@keyframes cc-float-safe {
  0%, 100% { transform: translateZ(0) translateX(var(--cc-portrait-x, 0px)) translateY(0) scale(var(--cc-portrait-scale, 1)); }
  50% { transform: translateZ(0) translateX(var(--cc-portrait-x, 0px)) translateY(4px) scale(var(--cc-portrait-scale, 1)); }
}

@keyframes cc-float-mobile-safe {
  0%, 100% { transform: translateZ(0) translateX(var(--cc-portrait-x, 0px)) translateY(0) scale(var(--cc-portrait-scale, 1)); }
  50% { transform: translateZ(0) translateX(var(--cc-portrait-x, 0px)) translateY(2px) scale(var(--cc-portrait-scale, 1)); }
}

@keyframes cc-element-line-drift {
  0%, 100% { transform: translateZ(0) translateX(0) translateY(0) rotate(-14deg); }
  50% { transform: translateZ(0) translateX(-18px) translateY(8px) rotate(-12deg); }
}

@keyframes cc-element-shape-drift {
  0%, 100% { transform: translateZ(0) translateX(0) translateY(0) rotate(36deg); }
  50% { transform: translateZ(0) translateX(-22px) translateY(12px) rotate(54deg); }
}

@keyframes cc-fusion-line-drift {
  0%, 100% { transform: translateZ(0) translateX(0) translateY(0) rotate(-8deg) scaleX(1); }
  50% { transform: translateZ(0) translateX(-10px) translateY(-14px) rotate(-2deg) scaleX(1.08); }
}

@keyframes cc-fusion-shape-drift {
  0%, 100% { transform: translateZ(0) translateX(0) translateY(0) rotate(22deg) scaleY(1); }
  50% { transform: translateZ(0) translateX(-12px) translateY(-20px) rotate(34deg) scaleY(1.14); }
}

@keyframes cc-electro-line-drift {
  0%, 100% { transform: translateZ(0) translateX(0) translateY(0) rotate(-18deg); }
  28% { transform: translateZ(0) translateX(-9px) translateY(6px) rotate(-24deg); }
  32% { transform: translateZ(0) translateX(8px) translateY(-5px) rotate(-10deg); }
  50% { transform: translateZ(0) translateX(-20px) translateY(10px) rotate(-16deg); }
}

@keyframes cc-electro-shape-drift {
  0%, 100% { transform: translateZ(0) translateX(0) translateY(0) rotate(8deg); }
  30% { transform: translateZ(0) translateX(12px) translateY(-8px) rotate(-18deg); }
  34% { transform: translateZ(0) translateX(-9px) translateY(7px) rotate(28deg); }
  50% { transform: translateZ(0) translateX(-16px) translateY(2px) rotate(12deg); }
}

@keyframes cc-glacio-line-drift {
  0%, 100% { transform: translateZ(0) translateX(0) translateY(0) rotate(-12deg) scaleX(1); opacity: 0.5; }
  50% { transform: translateZ(0) translateX(-8px) translateY(3px) rotate(-12deg) scaleX(1.16); opacity: 0.72; }
}

@keyframes cc-glacio-shape-drift {
  0%, 100% { transform: translateZ(0) translateX(0) translateY(0) rotate(45deg) scale(1); }
  50% { transform: translateZ(0) translateX(-10px) translateY(4px) rotate(105deg) scale(1.08); }
}

@keyframes cc-havoc-line-drift {
  0%, 100% { transform: translateZ(0) translateX(0) translateY(0) rotate(-20deg) skewX(-8deg); }
  50% { transform: translateZ(0) translateX(-24px) translateY(12px) rotate(-6deg) skewX(12deg); }
}

@keyframes cc-havoc-shape-drift {
  0%, 100% { transform: translateZ(0) translateX(0) translateY(0) rotate(45deg) scale(1); }
  50% { transform: translateZ(0) translateX(-18px) translateY(14px) rotate(135deg) scale(1.18); }
}

@keyframes cc-spectro-line-drift {
  0%, 100% { transform: translateZ(0) translateX(0) translateY(0) rotate(-10deg); filter: brightness(1); }
  50% { transform: translateZ(0) translateX(-14px) translateY(0) rotate(-10deg); filter: brightness(1.25); }
}

@keyframes cc-spectro-shape-drift {
  0%, 100% { transform: translateZ(0) translateX(0) translateY(0) scale(1); opacity: 0.62; }
  50% { transform: translateZ(0) translateX(-12px) translateY(8px) scale(1.28); opacity: 0.9; }
}

@keyframes cc-morph {
  from { border-radius: 42% 58% 48% 52% / 58% 48% 52% 42%; }
  to { border-radius: 55% 45% 58% 42% / 44% 58% 42% 56%; }
}


/* ══════════════════════════════════════════════════════════════
   CHARACTER BUILD SHARE BUTTON & MODAL
══════════════════════════════════════════════════════════════ */

/* ── Floating share button ─────────────────────────────────── */
.cp-share-float {
  position: fixed;
  bottom: 2rem;
  right: 1.75rem;
  z-index: 800;
}

#cpShareBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.15rem;
  background: linear-gradient(135deg, var(--cp-share-el-dark, #6b1e21) 0%, var(--cp-share-el, #b8444a) 100%);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06) inset;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

#cpShareBtn::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-18deg);
  animation: cpShareShimmer 3.5s ease-in-out infinite;
}

@keyframes cpShareShimmer {
  0%   { left: -75%; }
  35%  { left: 125%; }
  100% { left: 125%; }
}

#cpShareBtn:hover {
  filter: brightness(1.14);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}

#cpShareBtn:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

/* ── Share modal ───────────────────────────────────────────── */
.cp-share-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.cp-share-modal--hidden {
  display: none;
}

.cp-share-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cp-share-modal__panel {
  position: relative;
  z-index: 1;
  width: min(740px, 100%);
  max-height: calc(100vh - 2rem);
  background: var(--aw-bg-2, #141417);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cp-share-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.cp-share-modal__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--aw-ink, #f4ede4);
  letter-spacing: 0.02em;
}

.cp-share-modal__close {
  background: transparent;
  border: none;
  color: rgba(244,237,228,0.45);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  font-family: inherit;
}

.cp-share-modal__close:hover {
  color: var(--aw-ink, #f4ede4);
  background: rgba(255,255,255,0.06);
}

.cp-share-modal__body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem;
  min-height: 200px;
  overflow-y: auto;
}

.cp-share-modal__preview {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  display: block;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}

.cp-share-modal__actions {
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ── Action buttons ────────────────────────────────────────── */
.cp-share-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.15s, background 0.15s, border-color 0.15s;
  font-family: inherit;
}

.cp-share-action-btn--download {
  background: linear-gradient(135deg, var(--character-accent3, #8b2d30), var(--character-accent2, #b8444a));
  color: #fff;
}

.cp-share-action-btn--download:hover { filter: brightness(1.14); }

.cp-share-action-btn--share {
  background: transparent;
  color: var(--aw-ink, #f4ede4);
  border-color: rgba(255,255,255,0.15);
}

.cp-share-action-btn--share:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.28);
}

/* ── Spinner ───────────────────────────────────────────────── */
.cp-share-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 0;
}

.cp-share-spinner__ring {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(184,68,74,0.15);
  border-top-color: var(--character-accent2, #b8444a);
  border-radius: 50%;
  animation: cpShareSpin 0.72s linear infinite;
}

.cp-share-spinner__text {
  font-size: 0.85rem;
  color: rgba(244,237,228,0.4);
}

@keyframes cpShareSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
  .cp-share-float { bottom: 1.25rem; right: 1rem; }
  #cpShareBtn { padding: 0.55rem 0.9rem; font-size: 0.78rem; }
}

/* ══════════════════════════════════════════════════════════════
   CHARACTER LIKES WIDGET
══════════════════════════════════════════════════════════════ */

.cp-likes-widget {
  display: flex;
  align-items: center;
  margin-top: 0.85rem;
}

.cp-likes-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.9rem 0.42rem 0.7rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: var(--website-theme-text-secondary, #C9CFD6);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.cp-likes-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--website-theme-text-primary, #F5F7FA);
}

.cp-likes-btn:active:not(:disabled) {
  transform: scale(0.93);
}

.cp-likes-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Liked state — element accent color */
.cp-likes-btn--liked {
  background: rgba(var(--character-accent1-rgb, 220, 53, 69), 0.12);
  border-color: rgba(var(--character-accent1-rgb, 220, 53, 69), 0.38);
  color: var(--character-accent1, #e0607a);
}

.cp-likes-btn--liked:hover:not(:disabled) {
  background: rgba(var(--character-accent1-rgb, 220, 53, 69), 0.2);
  border-color: rgba(var(--character-accent1-rgb, 220, 53, 69), 0.55);
  color: var(--character-accent1, #e87a8d);
}

.cp-likes-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.cp-likes-count {
  min-width: 1.6ch;
  text-align: left;
  line-height: 1;
}

/* Toast notification */
.cp-likes-toast {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%) translateY(0.6rem);
  background: var(--website-theme-bg-raised, #22262C);
  color: var(--website-theme-text-primary, #F5F7FA);
  border: 1px solid var(--website-theme-border, #32383F);
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 500;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.cp-likes-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}