/* ========================================================================
   BOMBARERA SKINS V83 — RARITY WORLDS
   Each rarity now owns a distinct character stage inspired by the luminous
   layered glass language of the Daily Rewards / Promo Code modals.
   CSS-only treatment: no continuous animations, no extra canvas work.
   ======================================================================== */

/* Shared rarity surface. Individual modifiers below only change tokens. */
body[data-ui-context="skins"] .skins-v77__card{
  --rarity-a:#4fdcff;
  --rarity-b:#287da6;
  --rarity-c:#0b2139;
  --rarity-ink:#bdefff;
  --rarity-line:rgba(99,221,255,.30);
  --rarity-glow:rgba(72,213,255,.20);
  --rarity-glow-2:rgba(78,118,255,.10);
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 31%,var(--rarity-glow),transparent 39%),
    radial-gradient(circle at 92% 2%,var(--rarity-glow-2),transparent 34%),
    linear-gradient(150deg,color-mix(in srgb,var(--rarity-c) 90%,#17314c 10%),#071326 72%,#040d1c)!important;
}

/* The portrait is the "rarity world". Keep the character art untouched. */
body[data-ui-context="skins"] .skins-v77__portrait{
  isolation:isolate;
  background:
    radial-gradient(ellipse at 50% 102%,color-mix(in srgb,var(--rarity-a) 18%,transparent),transparent 48%),
    linear-gradient(180deg,color-mix(in srgb,var(--rarity-c) 78%,transparent),rgba(4,13,29,.12));
}
body[data-ui-context="skins"] .skins-v77__portrait::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 35%,rgba(255,255,255,.075),transparent 9%),
    radial-gradient(circle at 50% 37%,transparent 0 24%,var(--rarity-line) 24.4% 24.8%,transparent 25.2%),
    linear-gradient(120deg,transparent 0 37%,color-mix(in srgb,var(--rarity-a) 9%,transparent) 37.5% 38%,transparent 38.5% 62%,color-mix(in srgb,var(--rarity-b) 8%,transparent) 62.5% 63%,transparent 63.5%);
  opacity:.82;
}
body[data-ui-context="skins"] .skins-v77__portrait-glow{z-index:1!important;background:radial-gradient(circle,var(--rarity-glow),transparent 65%)!important;filter:blur(8px)!important}
body[data-ui-context="skins"] .skins-v77__portrait canvas{z-index:2}
body[data-ui-context="skins"] .skins-v77__portrait::after{z-index:3}
body[data-ui-context="skins"] .skins-v80__ability{z-index:6}

/* Rarity badge now reads as part of the world instead of a generic dark pill. */
body[data-ui-context="skins"] .skins-v77__card-rarity{
  color:var(--rarity-ink)!important;
  border-color:var(--rarity-line)!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--rarity-a) 16%,rgba(3,11,24,.84)),rgba(3,11,24,.78))!important;
  box-shadow:0 7px 18px rgba(0,0,0,.18),0 0 15px color-mix(in srgb,var(--rarity-a) 10%,transparent)!important;
}
body[data-ui-context="skins"] .skins-v77__card::before{
  background:linear-gradient(90deg,var(--rarity-a),var(--rarity-b),var(--rarity-a))!important;
  box-shadow:0 0 22px color-mix(in srgb,var(--rarity-a) 52%,transparent)!important;
}
body[data-ui-context="skins"] .skins-v77__card:hover{
  border-color:color-mix(in srgb,var(--rarity-a) 68%,white 8%)!important;
  box-shadow:0 24px 48px rgba(0,0,0,.35),0 0 34px color-mix(in srgb,var(--rarity-a) 17%,transparent),inset 0 1px 0 rgba(255,255,255,.10)!important;
}

/* COMMON — cool Bombarera steel/cyan. Calm, clean, intentionally restrained. */
body[data-ui-context="skins"] .skins-v77__card--common{
  --rarity-a:#63ddff;
  --rarity-b:#3b87b7;
  --rarity-c:#102a45;
  --rarity-ink:#9feaff;
  --rarity-line:rgba(101,220,255,.25);
  --rarity-glow:rgba(76,199,255,.18);
  --rarity-glow-2:rgba(74,112,189,.10);
}
body[data-ui-context="skins"] .skins-v77__card--common .skins-v77__portrait::before{
  background:
    radial-gradient(circle at 50% 39%,transparent 0 25%,rgba(105,221,255,.17) 25.5% 26%,transparent 26.5%),
    linear-gradient(90deg,transparent 49.6%,rgba(101,220,255,.07) 50%,transparent 50.4%),
    linear-gradient(180deg,transparent 57%,rgba(101,220,255,.07) 57.5%,transparent 58%);
  opacity:.72;
}

/* RARE — electric cyan/blue vault. Stronger rim and luminous side auroras. */
body[data-ui-context="skins"] .skins-v77__card--rare{
  --rarity-a:#55ecff;
  --rarity-b:#4c7dff;
  --rarity-c:#0a2750;
  --rarity-ink:#b9f7ff;
  --rarity-line:rgba(82,225,255,.40);
  --rarity-glow:rgba(54,221,255,.29);
  --rarity-glow-2:rgba(69,111,255,.22);
  border-color:rgba(85,224,255,.40)!important;
}
body[data-ui-context="skins"] .skins-v77__card--rare .skins-v77__portrait::before{
  background:
    radial-gradient(circle at 50% 37%,transparent 0 23%,rgba(87,237,255,.28) 23.5% 24%,transparent 24.6%),
    radial-gradient(circle at 7% 38%,rgba(50,205,255,.16),transparent 28%),
    radial-gradient(circle at 93% 28%,rgba(79,108,255,.17),transparent 31%),
    linear-gradient(125deg,transparent 0 35%,rgba(105,237,255,.09) 35.5% 36%,transparent 36.5% 64%,rgba(92,125,255,.08) 64.5% 65%,transparent 65.5%);
}

/* EPIC — violet / magenta aurora from Bombarera's reward and promo modals. */
body[data-ui-context="skins"] .skins-v77__card--epic{
  --rarity-a:#bd78ff;
  --rarity-b:#ff5fc8;
  --rarity-c:#281750;
  --rarity-ink:#f0c9ff;
  --rarity-line:rgba(202,123,255,.43);
  --rarity-glow:rgba(169,92,255,.31);
  --rarity-glow-2:rgba(255,78,191,.22);
  border-color:rgba(188,108,255,.42)!important;
  background:
    radial-gradient(circle at 25% 8%,rgba(168,86,255,.20),transparent 34%),
    radial-gradient(circle at 86% 29%,rgba(255,74,190,.16),transparent 36%),
    radial-gradient(circle at 50% 48%,rgba(151,90,255,.24),transparent 42%),
    linear-gradient(150deg,#271746,#120f35 70%,#090c22)!important;
}
body[data-ui-context="skins"] .skins-v77__card--epic .skins-v77__portrait::before{
  background:
    radial-gradient(circle at 50% 37%,transparent 0 22%,rgba(215,142,255,.31) 22.5% 23%,transparent 23.6%),
    radial-gradient(circle at 16% 18%,rgba(122,102,255,.17),transparent 28%),
    radial-gradient(circle at 88% 23%,rgba(255,91,198,.18),transparent 30%),
    linear-gradient(118deg,transparent 0 31%,rgba(225,151,255,.09) 31.5% 32%,transparent 32.5% 68%,rgba(255,101,199,.08) 68.5% 69%,transparent 69.5%);
}
body[data-ui-context="skins"] .skins-v77__card--epic .skins-v80__ability{background:linear-gradient(90deg,rgba(24,12,54,.83),rgba(49,16,63,.76))!important}

/* LEGENDARY — jackpot treatment: gold + amber with restrained magenta depth. */
body[data-ui-context="skins"] .skins-v77__card--legendary{
  --rarity-a:#ffd35d;
  --rarity-b:#ff9f43;
  --rarity-c:#49311d;
  --rarity-ink:#fff0ad;
  --rarity-line:rgba(255,207,91,.52);
  --rarity-glow:rgba(255,193,63,.34);
  --rarity-glow-2:rgba(255,91,181,.15);
  border-color:rgba(255,197,70,.48)!important;
  background:
    radial-gradient(circle at 50% 35%,rgba(255,203,75,.27),transparent 38%),
    radial-gradient(circle at 13% 0%,rgba(255,85,187,.13),transparent 30%),
    radial-gradient(circle at 92% 10%,rgba(255,157,55,.17),transparent 31%),
    linear-gradient(150deg,#463020,#241c2d 58%,#101225)!important;
  box-shadow:0 18px 38px rgba(0,0,0,.31),0 0 26px rgba(255,181,53,.08),inset 0 1px 0 rgba(255,246,205,.10)!important;
}
body[data-ui-context="skins"] .skins-v77__card--legendary .skins-v77__portrait::before{
  background:
    repeating-conic-gradient(from 0deg at 50% 43%,rgba(255,215,105,.11) 0deg 3deg,transparent 3deg 18deg),
    radial-gradient(circle at 50% 43%,transparent 0 21%,rgba(255,218,116,.34) 21.5% 22%,transparent 22.7% 31%,rgba(255,174,64,.12) 31.5% 32%,transparent 32.5%),
    radial-gradient(circle at 13% 20%,rgba(255,83,184,.13),transparent 29%);
  opacity:.90;
}
body[data-ui-context="skins"] .skins-v77__card--legendary .skins-v77__card-rarity{
  color:#fff0ad!important;
  background:linear-gradient(135deg,rgba(116,74,20,.76),rgba(63,37,24,.74))!important;
  box-shadow:0 7px 18px rgba(0,0,0,.20),0 0 18px rgba(255,191,61,.16)!important;
}
body[data-ui-context="skins"] .skins-v77__card--legendary .skins-v80__ability{
  border-color:rgba(255,207,91,.28)!important;
  background:linear-gradient(90deg,rgba(52,35,21,.84),rgba(35,24,38,.78))!important;
}

/* Selected-skin feature card follows the equipped hero's rarity as well. */
body[data-ui-context="skins"] .skins-v82__equipped{
  --eq-a:#63ddff;--eq-b:#4b83c4;--eq-bg:#0b2540;--eq-glow:rgba(80,213,255,.17);
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 48%,var(--eq-glow),transparent 32%),
    radial-gradient(circle at 90% 0%,color-mix(in srgb,var(--eq-b) 13%,transparent),transparent 35%),
    linear-gradient(135deg,color-mix(in srgb,var(--eq-bg) 76%,#0a1b35 24%),rgba(8,19,43,.96))!important;
  border-color:color-mix(in srgb,var(--eq-a) 35%,rgba(113,202,255,.20))!important;
}
body[data-ui-context="skins"] .skins-v83__equipped--rare{--eq-a:#55ecff;--eq-b:#4c7dff;--eq-bg:#0b2b55;--eq-glow:rgba(62,220,255,.24)}
body[data-ui-context="skins"] .skins-v83__equipped--epic{--eq-a:#c17cff;--eq-b:#ff5fc8;--eq-bg:#2a184d;--eq-glow:rgba(178,96,255,.25)}
body[data-ui-context="skins"] .skins-v83__equipped--legendary{--eq-a:#ffd35d;--eq-b:#ff9f43;--eq-bg:#46301f;--eq-glow:rgba(255,194,65,.25)}
body[data-ui-context="skins"] .skins-v83__equipped--epic{
  background:radial-gradient(circle at 15% 48%,rgba(177,91,255,.25),transparent 33%),radial-gradient(circle at 91% 5%,rgba(255,83,194,.14),transparent 34%),linear-gradient(135deg,#261742,rgba(8,19,43,.97))!important;
}
body[data-ui-context="skins"] .skins-v83__equipped--legendary{
  background:radial-gradient(circle at 16% 48%,rgba(255,196,69,.26),transparent 33%),radial-gradient(circle at 92% 5%,rgba(255,93,180,.10),transparent 34%),linear-gradient(135deg,#3b2a20,rgba(12,18,39,.97))!important;
  border-color:rgba(255,205,88,.40)!important;
}
body[data-ui-context="skins"] .skins-v82__equipped .skins-v81__equipped-stage{
  background:
    radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--eq-a) 22%,transparent),transparent 46%),
    linear-gradient(180deg,color-mix(in srgb,var(--eq-bg) 48%,transparent),rgba(5,14,30,.28))!important;
  border-color:color-mix(in srgb,var(--eq-a) 28%,rgba(255,255,255,.08))!important;
}
body[data-ui-context="skins"] .skins-v82__equipped .skins-v81__equipped-halo{
  background:radial-gradient(circle,color-mix(in srgb,var(--eq-a) 30%,transparent),transparent 66%)!important;
}

/* Active state remains green for usability, but does not erase rarity identity. */
body[data-ui-context="skins"] .skins-v77__card.is-active{
  outline:1px solid rgba(111,240,174,.38);
  outline-offset:-4px;
}

/* Avoid costly decorative layers on compact/mobile grids. */
@media (max-width:760px){
  body[data-ui-context="skins"] .skins-v77__portrait::before{opacity:.58}
  body[data-ui-context="skins"] .skins-v77__card--legendary .skins-v77__portrait::before{opacity:.70}
}
@media (prefers-reduced-motion:reduce){
  body[data-ui-context="skins"] .skins-v77__card{transition:none!important}
}