/*
 * PHNX590 rarity system
 * Ancestral: red / white energy
 * Divin: celestial gold
 */

:root {
  --rarity-ancestral: #ff304f;
  --rarity-ancestral-rgb: 255, 48, 79;
  --rarity-ancestral-light: #ffffff;
  --rarity-divin: #ffd76a;
  --rarity-divin-rgb: 255, 215, 106;
  --rarity-divin-light: #fff6c7;
}

body .rarity-ancestral {
  --rarity: var(--rarity-ancestral);
  --rarity-rgb: var(--rarity-ancestral-rgb);
  --rarity-light: var(--rarity-ancestral-light);
}

body .rarity-divin {
  --rarity: var(--rarity-divin);
  --rarity-rgb: var(--rarity-divin-rgb);
  --rarity-light: var(--rarity-divin-light);
}

/* Rarity labels shared by the account, inventory and Like.io loadout. */
.cosmetic-rarity-badge {
  align-items: center;
  border: 1px solid rgba(var(--rarity-rgb, 148, 163, 184), .48);
  border-radius: 999px;
  color: var(--rarity, #94a3b8);
  display: inline-flex;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .12em;
  line-height: 1;
  margin: 1px 0 3px;
  padding: 4px 8px;
  text-transform: uppercase;
  width: max-content;
}

.rarity-ancestral .cosmetic-rarity-badge {
  background: linear-gradient(95deg, rgba(255, 48, 79, .24), rgba(255, 255, 255, .14), rgba(255, 48, 79, .24));
  border-color: rgba(255, 255, 255, .76);
  box-shadow: 0 0 11px rgba(255, 255, 255, .18), 0 0 20px rgba(255, 48, 79, .28);
  color: #fff;
  text-shadow: 0 0 8px #ff304f;
}

.rarity-divin .cosmetic-rarity-badge {
  background: linear-gradient(95deg, rgba(135, 78, 9, .52), rgba(255, 215, 106, .2), rgba(135, 78, 9, .52));
  border-color: rgba(255, 231, 145, .8);
  box-shadow: 0 0 11px rgba(255, 246, 199, .18), 0 0 23px rgba(255, 188, 54, .3);
  color: #fff6c7;
  text-shadow: 0 0 8px #ffc44d;
}

/* Public shop cards. Loaded after shop-showcase.css to make the two themes canonical. */
body[data-route="shop"] .shop-item.rarity-ancestral {
  --rarity: var(--rarity-ancestral);
  --rarity-rgb: var(--rarity-ancestral-rgb);
  background:
    radial-gradient(circle at 16% 17%, rgba(255, 255, 255, .2), transparent 25%),
    radial-gradient(circle at 80% 76%, rgba(255, 48, 79, .2), transparent 43%),
    linear-gradient(150deg, rgba(77, 8, 22, .99), rgba(27, 7, 17, .99) 58%, rgba(8, 14, 30, .99)) padding-box,
    conic-gradient(from var(--shop-rarity-angle), transparent 0 9%, #fff 21%, #ff304f 37%, rgba(255, 255, 255, .4) 53%, transparent 65% 80%, #ff304f 91%, transparent) border-box !important;
  box-shadow: inset 0 0 45px rgba(255, 48, 79, .13), 0 14px 38px rgba(0, 0, 0, .3), 0 0 28px rgba(255, 48, 79, .18) !important;
}

body[data-route="shop"] .shop-item.rarity-divin {
  --rarity: var(--rarity-divin);
  --rarity-rgb: var(--rarity-divin-rgb);
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 251, 218, .22), transparent 27%),
    radial-gradient(circle at 82% 76%, rgba(255, 188, 54, .2), transparent 45%),
    linear-gradient(150deg, rgba(74, 45, 6, .99), rgba(29, 19, 8, .99) 56%, rgba(11, 17, 32, .99)) padding-box,
    conic-gradient(from var(--shop-rarity-angle), transparent 0 8%, #fff7cb 18%, #ffd76a 34%, #fff 48%, rgba(255, 190, 58, .44) 60%, transparent 72% 82%, #ffd76a 92%, transparent) border-box !important;
  box-shadow: inset 0 0 50px rgba(255, 215, 106, .14), 0 14px 38px rgba(0, 0, 0, .3), 0 0 34px rgba(255, 196, 66, .2) !important;
}

body[data-route="shop"] .shop-item.rarity-divin::after {
  animation: phnxDivinScan 2.25s ease-in-out infinite;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .72) 47%, rgba(255, 215, 106, .38) 54%, transparent 72%);
  opacity: .96;
}

body[data-route="shop"] .shop-item.rarity-ancestral::after {
  animation: phnxAncestralScan 2.4s ease-in-out infinite;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .74) 47%, rgba(255, 48, 79, .4) 55%, transparent 72%);
  opacity: .94;
}

body[data-route="shop"] .shop-item.rarity-ancestral > .shop-rarity-effects,
body[data-route="shop"] .shop-item.rarity-divin > .shop-rarity-effects {
  display: block;
  opacity: 1;
}

body[data-route="shop"] .shop-item.rarity-ancestral .shop-rarity-effects i:nth-child(3n) {
  background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 22px rgba(255, 255, 255, .8);
}

body[data-route="shop"] .shop-item.rarity-ancestral .shop-rarity-effects i:nth-child(3n + 1) {
  background: #ff304f;
  box-shadow: 0 0 10px #ff304f, 0 0 24px rgba(255, 48, 79, .9);
}

body[data-route="shop"] .shop-item.rarity-divin .shop-rarity-effects i {
  background: #ffd76a;
  box-shadow: 0 0 10px #fff6c7, 0 0 24px rgba(255, 196, 66, .9);
}

body[data-route="shop"] .shop-item.rarity-divin .shop-rarity-effects i:nth-child(4n) {
  background: #fff;
  border-radius: 1px;
  box-shadow: 0 0 11px #fff, 0 0 28px rgba(255, 230, 138, .95);
  transform: rotate(45deg);
}

/* Any cosmetic card: account chooser, inventory and Like.io loadout. */
.cosmetic-card.rarity-ancestral,
.inventory-cosmetic-card.rarity-ancestral,
.live-game-cosmetic-card.rarity-ancestral,
.cosmetic-card.rarity-divin,
.inventory-cosmetic-card.rarity-divin,
.live-game-cosmetic-card.rarity-divin {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.cosmetic-card.rarity-ancestral,
.inventory-cosmetic-card.rarity-ancestral,
.live-game-cosmetic-card.rarity-ancestral {
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 255, 255, .15), transparent 28%),
    linear-gradient(135deg, rgba(63, 7, 20, .96), rgba(10, 16, 31, .98) 70%);
  border-color: rgba(255, 74, 99, .68);
  box-shadow: inset 0 0 24px rgba(255, 48, 79, .11), 0 0 20px rgba(255, 48, 79, .13);
}

.cosmetic-card.rarity-divin,
.inventory-cosmetic-card.rarity-divin,
.live-game-cosmetic-card.rarity-divin {
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 251, 218, .18), transparent 28%),
    linear-gradient(135deg, rgba(66, 42, 5, .97), rgba(10, 17, 32, .98) 70%);
  border-color: rgba(255, 215, 106, .7);
  box-shadow: inset 0 0 26px rgba(255, 215, 106, .12), 0 0 22px rgba(255, 196, 66, .15);
}

.cosmetic-card.rarity-ancestral > :not(.shop-rarity-effects),
.cosmetic-card.rarity-divin > :not(.shop-rarity-effects),
.inventory-cosmetic-card.rarity-ancestral > :not(.shop-rarity-effects),
.inventory-cosmetic-card.rarity-divin > :not(.shop-rarity-effects),
.live-game-cosmetic-card.rarity-ancestral > :not(.shop-rarity-effects),
.live-game-cosmetic-card.rarity-divin > :not(.shop-rarity-effects) {
  position: relative;
  z-index: 2;
}

/* Admin cards for boosts, frames, notification frames, bundles and missiles. */
body.admin-panel-route :is(.admin-shop-card, .admin-web-frame-card).rarity-ancestral,
body.admin-panel-route :is(.admin-shop-card, .admin-web-frame-card).rarity-divin {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

body.admin-panel-route :is(.admin-shop-card, .admin-web-frame-card).rarity-ancestral {
  background:
    radial-gradient(circle at 11% 8%, rgba(255, 255, 255, .14), transparent 25%),
    linear-gradient(145deg, rgba(67, 8, 22, .97), rgba(8, 17, 33, .99) 65%) !important;
  border-color: rgba(255, 74, 99, .64) !important;
  box-shadow: inset 0 0 28px rgba(255, 48, 79, .1), 0 0 20px rgba(255, 48, 79, .12);
}

body.admin-panel-route :is(.admin-shop-card, .admin-web-frame-card).rarity-divin {
  background:
    radial-gradient(circle at 11% 8%, rgba(255, 251, 218, .18), transparent 26%),
    linear-gradient(145deg, rgba(67, 42, 6, .97), rgba(8, 17, 33, .99) 65%) !important;
  border-color: rgba(255, 215, 106, .68) !important;
  box-shadow: inset 0 0 30px rgba(255, 215, 106, .1), 0 0 22px rgba(255, 196, 66, .14);
}

body.admin-panel-route :is(.admin-shop-card, .admin-web-frame-card).rarity-ancestral > :not(.shop-rarity-effects),
body.admin-panel-route :is(.admin-shop-card, .admin-web-frame-card).rarity-divin > :not(.shop-rarity-effects) {
  position: relative;
  z-index: 2;
}

/* Shared particles for account and admin cards. */
:is(
  .cosmetic-card,
  .inventory-cosmetic-card,
  .live-game-cosmetic-card,
  .admin-shop-card,
  .admin-web-frame-card
) > .shop-rarity-effects {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

:is(
  .cosmetic-card,
  .inventory-cosmetic-card,
  .live-game-cosmetic-card,
  .admin-shop-card,
  .admin-web-frame-card
) > .shop-rarity-effects i {
  animation: phnxRarityParticle var(--particle-duration, 3s) ease-in-out var(--particle-delay, 0s) infinite;
  background: var(--rarity, #94a3b8);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--rarity, #94a3b8), 0 0 17px rgba(var(--rarity-rgb, 148, 163, 184), .76);
  height: var(--particle-size, 3px);
  left: var(--particle-x, 50%);
  opacity: 0;
  position: absolute;
  top: var(--particle-y, 60%);
  width: var(--particle-size, 3px);
}

.rarity-ancestral > .shop-rarity-effects i:nth-child(3n) {
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 19px rgba(255, 255, 255, .8);
}

.rarity-divin > .shop-rarity-effects i:nth-child(4n) {
  background: #fff6c7;
  border-radius: 1px;
  box-shadow: 0 0 9px #fff, 0 0 21px rgba(255, 215, 106, .88);
}

/* Live Pass rewards, including cards managed in the admin panel. */
.live-pass-reward-card.rarity-ancestral,
.admin-live-pass-reward-card.rarity-ancestral {
  --rarity: var(--rarity-ancestral);
  --rarity-rgb: var(--rarity-ancestral-rgb);
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 255, 255, .18), transparent 29%),
    linear-gradient(150deg, rgba(69, 8, 21, .98), rgba(8, 18, 35, .99)) padding-box,
    conic-gradient(from var(--pass-rarity-angle), transparent 0 12%, #fff 25%, #ff304f 42%, transparent 63% 80%, #ff304f 91%, transparent) border-box !important;
}

.live-pass-reward-card.rarity-divin,
.admin-live-pass-reward-card.rarity-divin {
  --rarity: var(--rarity-divin);
  --rarity-rgb: var(--rarity-divin-rgb);
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 251, 218, .2), transparent 29%),
    linear-gradient(150deg, rgba(69, 43, 6, .98), rgba(8, 18, 35, .99)) padding-box,
    conic-gradient(from var(--pass-rarity-angle), transparent 0 9%, #fff6c7 21%, #ffd76a 38%, #fff 51%, transparent 67% 80%, #ffd76a 92%, transparent) border-box !important;
}

.rarity-ancestral > .live-pass-rarity-effects,
.rarity-divin > .live-pass-rarity-effects {
  display: block !important;
  opacity: 1 !important;
}

.rarity-ancestral > .live-pass-rarity-effects i:nth-child(3n) {
  background: #fff;
  box-shadow: 0 0 9px #fff, 0 0 20px rgba(255, 255, 255, .86);
}

.rarity-divin > .live-pass-rarity-effects i {
  background: #ffd76a;
  box-shadow: 0 0 9px #fff6c7, 0 0 23px rgba(255, 196, 66, .88);
}

/* Like.io skill tree and its admin rarity thresholds. */
.live-game-skill-rarity[data-rarity="ancestral"] {
  background: linear-gradient(90deg, rgba(255, 48, 79, .2), rgba(255, 255, 255, .16), rgba(255, 48, 79, .2));
  border-color: rgba(255, 255, 255, .8);
  color: #fff;
  box-shadow: 0 0 11px rgba(255, 255, 255, .2), 0 0 21px rgba(255, 48, 79, .34);
  text-shadow: 0 0 9px #ff304f;
}

.live-game-skill-rarity[data-rarity="divin"] {
  background: linear-gradient(90deg, rgba(116, 71, 6, .7), rgba(255, 215, 106, .2), rgba(116, 71, 6, .7));
  border-color: rgba(255, 234, 155, .84);
  color: #fff6c7;
  box-shadow: 0 0 12px rgba(255, 246, 199, .2), 0 0 24px rgba(255, 196, 66, .36);
  text-shadow: 0 0 9px #ffc44d;
}

.live-game-skill-node.rarity-divin {
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, .19), transparent 27%),
    radial-gradient(circle at 78% 76%, rgba(255, 196, 66, .2), transparent 52%),
    linear-gradient(145deg, rgba(70, 43, 6, .98), rgba(7, 12, 25, .99));
  border-color: #ffd76a;
  box-shadow: inset 0 0 30px rgba(255, 215, 106, .13), 0 0 27px rgba(255, 196, 66, .3);
  color: #fff6c7;
}

.live-game-skill-node.rarity-divin::after {
  border-color: rgba(255, 246, 199, .62);
  box-shadow: inset 0 0 18px rgba(255, 215, 106, .18);
}

.live-game-skill-node.rarity-divin.can-upgrade {
  animation: liveGameSkillAvailable 1.55s ease-in-out infinite, phnxDivinPulse 2s ease-in-out infinite;
}

.admin-live-game-rarity-grid label[data-rarity="ancestral"] {
  border-color: rgba(255, 74, 99, .44);
  box-shadow: inset 3px 0 #ff304f;
}

.admin-live-game-rarity-grid label[data-rarity="divin"] {
  border-color: rgba(255, 215, 106, .48);
  box-shadow: inset 3px 0 #ffd76a;
}

.admin-live-game-rarity-grid label[data-rarity="ancestral"] > span { color: #ff8194; }
.admin-live-game-rarity-grid label[data-rarity="divin"] > span { color: #ffe69c; }

@keyframes phnxRarityParticle {
  0%, 100% { opacity: 0; transform: translate3d(0, 9px, 0) scale(.45); }
  22% { opacity: .92; }
  68% { opacity: .58; }
  88% { opacity: 0; transform: translate3d(var(--particle-drift, 0), -34px, 0) scale(1.25); }
}

@keyframes phnxAncestralScan {
  0%, 100% { transform: translateX(-145%) skewX(-15deg); }
  55% { transform: translateX(145%) skewX(-15deg); }
}

@keyframes phnxDivinScan {
  0%, 100% { transform: translateX(-145%) skewX(-12deg); }
  58% { transform: translateX(145%) skewX(-12deg); }
}

@keyframes phnxDivinPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); box-shadow: inset 0 0 34px rgba(255, 215, 106, .18), 0 0 36px rgba(255, 196, 66, .42); }
}

@media (prefers-reduced-motion: reduce) {
  .rarity-ancestral > .shop-rarity-effects i,
  .rarity-divin > .shop-rarity-effects i,
  .rarity-ancestral > .live-pass-rarity-effects i,
  .rarity-divin > .live-pass-rarity-effects i,
  .live-game-skill-node.rarity-divin,
  body[data-route="shop"] .shop-item.rarity-ancestral::after,
  body[data-route="shop"] .shop-item.rarity-divin::after {
    animation: none !important;
  }
}