.piece-classes { --pc-gold: #56dcff; --pc-blue: #57d7ff; position: relative; max-width: 1420px; margin: 0px auto; padding: 30px 20px 40px; color: rgb(244, 244, 241); }
.piece-classes * { box-sizing: border-box; }
.piece-classes__heading { text-align: center; margin-bottom: 26px; }
.piece-classes__eyebrow { display: block; color: var(--pc-gold); font: 800 11px / 1.4 Orbitron, sans-serif; letter-spacing: 0.34em; text-transform: uppercase; }
.piece-classes__heading h2 { margin: 9px 0px 5px; color: rgb(255, 255, 255); font: 900 clamp(2rem, 4vw, 3.5rem) / 1.1 "Cinzel Decorative", serif; text-transform: uppercase; }
.piece-classes__heading p { margin: 0px; color: rgb(173, 182, 193); font: 600 16px / 1.5 Rajdhani, sans-serif; }
.piece-classes__shell { display: grid; grid-template-columns: minmax(245px, 290px) minmax(0px, 1fr); gap: 16px; min-height: 670px; min-width: 0px; }
.piece-classes__list { display: grid; grid-template-rows: repeat(9, 1fr); gap: 5px; min-height: 0px; }
.piece-class-tab { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 11px; border-width: 1px 1px 1px 3px; border-style: solid; border-color: rgba(194, 217, 233, 0.12) rgba(194, 217, 233, 0.12) rgba(194, 217, 233, 0.12) transparent; border-image: none; background: linear-gradient(90deg, rgba(9, 16, 26, 0.88), rgba(9, 16, 26, 0.45)); color: rgb(226, 232, 239); text-align: left; cursor: pointer; transition: background 0.28s, border-color 0.28s, transform 0.28s, box-shadow 0.28s; }
.piece-class-tab:hover, .piece-class-tab:focus-visible { background: linear-gradient(90deg, rgba(65, 45, 22, 0.9), rgba(12, 20, 30, 0.75)); border-color: rgba(86, 220, 255, 0.48); outline: none; transform: translateX(4px); }
.piece-class-tab[aria-selected="true"] { border-top-color: rgba(86, 220, 255, 0.7); border-right-color: rgba(86, 220, 255, 0.7); border-bottom-color: rgba(86, 220, 255, 0.7); border-left-color: var(--pc-gold); background: linear-gradient(90deg, rgba(21, 129, 167, 0.32), rgba(14, 22, 32, 0.82)); box-shadow: rgba(86, 220, 255, 0.08) 0px 0px 24px inset, rgba(86, 220, 255, 0.08) 0px 0px 22px; }
.piece-class-tab__icon { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 auto; border: 1px solid rgba(86, 220, 255, 0.35); border-radius: 50%; background: rgb(8, 15, 26); box-shadow: rgba(66, 196, 249, 0.09) 0px 0px 14px; }
.piece-class-tab__icon img { width: 31px; height: 31px; object-fit: contain; }
.piece-class-tab__copy { min-width: 0px; flex: 1 1 0%; }
.piece-class-tab__copy strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 800 15px / 1.1 "Cinzel Decorative", serif; }
.piece-class-tab__copy small { display: block; margin-top: 4px; color: var(--pc-gold); font: 800 9px / 1.2 Orbitron, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.piece-class-tab__number { color: rgb(135, 144, 154); font: 700 11px Orbitron, sans-serif; }
.piece-classes__panel { position: relative; min-height: 670px; min-width: 0px; overflow: hidden; border: 1px solid rgba(86, 220, 255, 0.3); background: rgb(6, 13, 22); box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 60px, rgba(255, 255, 255, 0.04) 0px 0px 0px 1px inset; }
.piece-classes__panel::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(3, 8, 16, 0.98) 0%, rgba(4, 10, 20, 0.88) 40%, rgba(3, 9, 18, 0.72) 100%), radial-gradient(circle at 75% 50%, rgba(31, 93, 139, 0.25), transparent 55%); opacity: 0.85; }
.piece-classes__panel::after { content: ""; position: absolute; inset: -40%; pointer-events: none; background: radial-gradient(circle at 62% 42%, rgba(71, 173, 231, 0.16), transparent 29%), radial-gradient(circle at 48% 58%, rgba(86, 220, 255, 0.1), transparent 34%); animation: 9s ease-in-out 0s infinite alternate none running pieceClassAtmosphere; }
.piece-classes__detail { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(250px, 1.1fr); height: 100%; min-height: 670px; min-width: 0px; padding: 36px 35px 28px 45px; }
.piece-classes__text { align-self: center; z-index: 2; max-width: 430px; }
.piece-classes__kicker { color: var(--pc-gold); font: 800 10px Orbitron, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; }
.piece-classes__name { margin: 16px 0px 13px; color: rgb(114, 229, 255); font: 900 clamp(2.5rem, 4.8vw, 5rem) / 0.99 "Cinzel Decorative", serif; text-transform: uppercase; text-shadow: rgb(2, 18, 27) 0px 2px 4px, rgba(51, 209, 255, 0.55) 0px 0px 12px, rgba(25, 152, 225, 0.3) 0px 0px 28px; animation: 3.8s ease-in-out 0s infinite normal none running pieceClassNameGlow; }
.piece-classes__line { width: 145px; height: 2px; margin: 23px 0px; background: linear-gradient(90deg,var(--pc-gold),transparent); }
.piece-classes__description { max-width: 380px; color: rgb(195, 204, 216); font: 700 18px / 1.5 Rajdhani, sans-serif; }
.piece-classes__stat-caption { margin: 22px 0px -12px; color: rgb(86, 220, 255); font: 700 10px / 1.3 Orbitron, sans-serif; text-transform: uppercase; letter-spacing: 0.08em; }
.piece-classes__stats { display: grid; gap: 14px; margin-top: 25px; max-width: 345px; }
.piece-class-stat { display: grid; grid-template-columns: 45px 1fr 30px; gap: 11px; align-items: center; color: rgb(210, 218, 228); font: 800 11px Orbitron, sans-serif; }
.piece-class-stat__track { height: 4px; background: rgba(152, 224, 244, 0.15); }
.piece-class-stat__fill { display: block; height: 100%; width: var(--value); background: linear-gradient(90deg, rgb(11, 139, 185), rgb(184, 243, 255)); box-shadow: rgba(86, 220, 255, 0.4) 0px 0px 10px; transform-origin: left center; animation: 0.8s ease 0s 1 normal both running pieceStatReveal; }
.piece-class-stat__value { color: var(--pc-gold); }
.piece-classes__video { margin-top: 22px; max-width: 370px; padding: 9px; border: 1px solid rgba(86, 220, 255, 0.38); border-radius: 8px; background: rgba(0, 0, 0, 0.72); box-shadow: rgba(0, 0, 0, 0.24) 0px 8px 28px; }
.piece-classes__video > span { display: block; margin: 1px 0px 8px; color: var(--pc-gold); font: 800 10px / 1.2 Orbitron, sans-serif; letter-spacing: 0.15em; text-transform: uppercase; }
.piece-classes__video video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; background: rgb(0, 0, 0); object-fit: cover; }
.piece-classes__portrait { position: relative; min-height: 560px; display: flex; align-items: flex-end; justify-content: center; }
.piece-classes__portrait::before { content: ""; position: absolute; width: 68%; height: 55%; bottom: 12%; border-radius: 50%; background: radial-gradient(rgba(53, 169, 233, 0.2), transparent 70%); filter: blur(20px); animation: 5s ease-in-out 0s infinite alternate none running pieceClassGlow; }
.piece-classes__portrait img { position: relative; max-width: 100%; height: min(620px, 100%); object-fit: contain; object-position: center bottom; filter: drop-shadow(rgba(75, 190, 249, 0.24) 0px 0px 20px); animation: 5s ease-in-out 0s infinite normal none running pieceClassFloat; }
.piece-classes__portrait-label { position: absolute; z-index: 2; left: 50%; bottom: 15%; width: 190px; transform: translateX(-50%); padding: 5px 2px; background: linear-gradient(90deg, transparent, rgb(16, 28, 61) 16%, rgb(16, 28, 61) 84%, transparent); color: rgb(255, 255, 255); text-align: center; text-shadow: rgb(0, 0, 0) 0px 1px 4px; font: 700 13px / 1.2 "Cinzel Decorative", serif; text-transform: uppercase; pointer-events: none; }
.piece-classes__panel.is-changing .piece-classes__text { animation: 0.48s ease 0s 1 normal both running pieceClassTextIn; }
.piece-classes__panel.is-changing .piece-classes__portrait img { animation: 0.68s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal both running pieceClassPortraitIn, 5s ease-in-out 0.68s infinite normal none running pieceClassFloat; }
@keyframes pieceClassTextIn { 
  0% { opacity: 0; transform: translateX(18px); }
  100% { opacity: 1; transform: translateX(0px); }
}
@keyframes pieceClassPortraitIn { 
  0% { opacity: 0; transform: translateY(26px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0px) scale(1); }
}
@keyframes pieceClassFloat { 
  50% { transform: translateY(-9px); }
}
@keyframes pieceClassGlow { 
  100% { opacity: 0.55; transform: scale(1.17); }
}
@keyframes pieceClassAtmosphere { 
  100% { transform: translate(2%, 1%) scale(1.05); }
}
@keyframes pieceClassNameGlow { 
  50% { color: rgb(183, 247, 255); text-shadow: rgb(2, 18, 27) 0px 2px 4px, rgba(92, 229, 255, 0.82) 0px 0px 18px, rgba(29, 174, 242, 0.45) 0px 0px 38px; }
}
@keyframes pieceStatReveal { 
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@media (max-width: 900px) {
  .piece-classes__shell { grid-template-columns: 1fr; gap: 12px; }
  .piece-classes__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .piece-class-tab { min-width: 180px; scroll-snap-align: start; }
  .piece-class-tab__number { display: none; }
  .piece-classes__panel, .piece-classes__detail { min-height: 590px; }
  .piece-classes__detail { padding: 22px; grid-template-columns: 1fr 1fr; }
  .piece-classes__portrait { min-height: 0px; }
}
@media (max-width: 600px) {
  .piece-classes { padding: 20px 10px; width: 100%; overflow: hidden; }
  .piece-classes__heading h2 { font-size: clamp(1.35rem, 6vw, 1.8rem); overflow-wrap: anywhere; }
  .piece-classes__heading p { font-size: 14px; }
  .piece-class-tab { min-width: 160px; }
  .piece-classes__panel, .piece-classes__detail { min-height: 920px; width: 100%; }
  .piece-classes__detail { display: block; padding: 24px 20px; }
  .piece-classes__text { position: relative; z-index: 2; min-width: 0px; }
  .piece-classes__kicker { font-size: 8px; letter-spacing: 0.07em; overflow-wrap: anywhere; }
  .piece-classes__name { font-size: clamp(1.65rem, 8vw, 2.4rem); margin: 10px 0px; overflow-wrap: anywhere; }
  .piece-classes__description { font-size: 16px; }
  .piece-classes__stats { gap: 9px; margin-top: 15px; max-width: 260px; }
  .piece-classes__video { max-width: 340px; margin-top: 18px; }
  .piece-classes__portrait { position: absolute; inset: auto 0px 0px; height: 390px; }
  .piece-classes__portrait img { height: 100%; max-width: 100%; }
  .piece-classes__panel::before { background: linear-gradient(rgba(3, 8, 16, 0.98) 0%, rgba(4, 10, 20, 0.82) 45%, rgba(3, 9, 18, 0.55) 100%), radial-gradient(circle at 50% 82%, rgba(31, 93, 139, 0.22), transparent 60%); }
}
@media (prefers-reduced-motion: reduce) {
  .piece-classes *, .piece-classes::after, .piece-classes__panel::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
@media (max-width: 600px) {
  .piece-classes__panel, .piece-classes__detail { min-height: 950px; }
  .piece-classes__portrait { height: 300px; }
  .piece-classes__portrait-label { bottom: 14%; }
}
.piece-nation-leaders { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 18px; margin: 22px 0px 28px; }
.piece-nation-leaders[hidden] { display: none; }
.piece-nation-leader { position: relative; isolation: isolate; min-height: 270px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); background: rgb(9, 15, 30); box-shadow: rgba(0, 0, 0, 0.32) 0px 20px 44px; }
.piece-nation-leader.is-capella { border-color: rgba(255, 91, 112, 0.45); background: linear-gradient(90deg, rgba(28, 5, 13, 0.54), rgba(18, 7, 12, 0.25)), url("/images/classes/nation-ranking/portador-red.png") center center / cover no-repeat; }
.piece-nation-leader.is-procyon { border-color: rgba(74, 162, 255, 0.45); background: linear-gradient(270deg, rgba(4, 15, 39, 0.6), rgba(5, 13, 34, 0.22)), url("/images/classes/nation-ranking/portador-blue.png") center center / cover no-repeat; }
.piece-nation-leader::after { content: ""; position: absolute; inset: 0px; z-index: -1; background: linear-gradient(0deg, rgba(2, 4, 12, 0.92), transparent 62%); pointer-events: none; }
.piece-nation-leader__art { position: absolute; bottom: 0px; right: 0px; z-index: -1; width: 65%; height: 110%; object-fit: contain; object-position: center bottom; filter: drop-shadow(rgb(3, 3, 10) 0px 8px 16px); }
.piece-nation-leader.is-procyon .piece-nation-leader__art { right: auto; left: 0px; }
.piece-nation-leader__info { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-shadow: rgb(0, 0, 0) 0px 2px 10px; }
.piece-nation-leader.is-procyon .piece-nation-leader__info { align-items: flex-end; text-align: right; }
.piece-nation-leader__nation { font: 900 clamp(22px, 2.8vw, 38px) / 1 "Cinzel Decorative", serif; color: rgb(245, 223, 184); letter-spacing: 0.06em; }
.piece-nation-leader__role { font: 800 10px / 1.2 Orbitron, sans-serif; letter-spacing: 0.18em; color: rgb(255, 197, 202); }
.piece-nation-leader.is-procyon .piece-nation-leader__role { color: rgb(183, 227, 255); }
.piece-nation-leader__info strong { font: 900 20px / 1.1 Rajdhani, sans-serif; color: rgb(255, 255, 255); }
.piece-nation-leader__info > span:last-of-type { font: 700 12px / 1.2 Rajdhani, sans-serif; color: rgb(221, 227, 243); }
.piece-nation-leader__info b { font: 800 14px / 1.2 Orbitron, sans-serif; color: rgb(255, 255, 255); border-top: 1px solid rgba(255, 255, 255, 0.4); padding-top: 8px; margin-top: 5px; min-width: 45%; }
.piece-nation-leader.is-procyon .piece-nation-leader__info b { text-align: right; }
@media (max-width: 740px) {
  .piece-nation-leaders { grid-template-columns: 1fr; }
  .piece-nation-leader { min-height: 250px; }
}
.piece-guardians { margin: 12px 0px 30px; }
.piece-guardians[hidden] { display: none; }
.piece-guardians__heading { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0px 0px 10px; font: 800 clamp(13px, 1.7vw, 22px) / 1.2 "Cinzel Decorative", serif; color: rgb(248, 212, 216); }
.piece-guardians__heading span:last-child { text-align: right; color: rgb(199, 232, 255); }
.piece-guardians__heading small { display: block; margin-top: 4px; font: 800 10px Orbitron, sans-serif; letter-spacing: 0.17em; color: rgb(168, 174, 194); }
.piece-guardians__rows { display: grid; gap: 8px; }
.piece-guardians__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.piece-guardians__pair:nth-child(n+5) { display: none; }
.piece-guardians.is-expanded .piece-guardians__pair:nth-child(n+5) { display: grid; }
.piece-guardian { position: relative; isolation: isolate; min-width: 0px; min-height: 96px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(90deg, rgba(78, 12, 28, 0.78), rgba(15, 9, 18, 0.85)); box-shadow: rgba(248, 64, 86, 0.1) 0px 0px 24px inset; }
.piece-guardian.is-procyon { background: linear-gradient(270deg, rgba(13, 50, 120, 0.78), rgba(8, 15, 35, 0.87)); box-shadow: rgba(49, 133, 255, 0.14) 0px 0px 24px inset; }
.piece-guardian img { position: absolute; z-index: -1; right: 2%; bottom: -15px; width: 42%; height: 145%; object-fit: contain; object-position: center bottom; opacity: 0.85; filter: drop-shadow(rgba(0, 0, 0, 0.65) 0px 0px 12px); }
.piece-guardian.is-procyon img { right: auto; left: 2%; transform: scaleX(-1); }
.piece-guardian__details { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; text-shadow: rgb(0, 0, 0) 0px 2px 9px; }
.piece-guardian.is-procyon .piece-guardian__details { left: auto; right: 17px; text-align: right; }
.piece-guardian__details strong { font: 900 17px Rajdhani, sans-serif; color: rgb(255, 255, 255); }
.piece-guardian__details span { font: 800 11px Orbitron, sans-serif; color: rgb(231, 237, 249); }
.piece-guardian__details small { font: 800 12px Rajdhani, sans-serif; color: rgb(246, 197, 206); }
.piece-guardian.is-procyon .piece-guardian__details small { color: rgb(185, 228, 255); }
.piece-guardians__toggle { display: block; margin: 16px auto 0px; padding: 11px 25px; border: 1px solid rgba(233, 188, 98, 0.55); border-radius: 4px; background: linear-gradient(90deg, rgb(26, 18, 32), rgb(13, 27, 57)); color: rgb(247, 220, 165); font: 800 11px Orbitron, sans-serif; letter-spacing: 0.12em; cursor: pointer; }
.piece-guardians__toggle:hover, .piece-guardians__toggle:focus-visible { border-color: rgb(86, 220, 255); color: rgb(183, 239, 255); box-shadow: rgba(86, 220, 255, 0.2) 0px 0px 18px; }
.piece-guardians__toggle span { font-size: 19px; vertical-align: middle; margin-left: 8px; }
@media (max-width: 700px) {
  .piece-guardians__heading { font-size: 12px; }
  .piece-guardians__pair { gap: 7px; }
  .piece-guardian { min-height: 100px; }
  .piece-guardian img { width: 62%; opacity: 0.52; }
  .piece-guardian__details { left: 9px; }
  .piece-guardian.is-procyon .piece-guardian__details { right: 9px; }
  .piece-guardian__details span { font-size: 9px; }
}
.piece-ranking-nations { background: transparent !important; border: 0px !important; box-shadow: none !important; padding: 0px !important; }
.piece-ranking-nations.is-guardians-view .ranking-tg-title, .piece-ranking-nations.is-guardians-view .ranking-tg-note, .piece-ranking-nations.is-guardians-view .ranking-tg-sides { display: none !important; }
.piece-ranking-nations .piece-nation-leaders { margin-top: 8px; }
.piece-nation-leader, .piece-guardian { border: 0px !important; box-shadow: none !important; }
.piece-nation-leader.is-capella { background: radial-gradient(circle at 72% 48%, rgba(218, 43, 87, 0.38), transparent 38%), linear-gradient(100deg, rgb(72, 16, 34), rgb(27, 7, 19) 72%, rgb(8, 9, 22)); }
.piece-nation-leader.is-procyon { background: radial-gradient(circle at 28% 48%, rgba(47, 143, 255, 0.36), transparent 38%), linear-gradient(260deg, rgb(18, 57, 108), rgb(7, 27, 59) 70%, rgb(6, 11, 30)); }
.piece-nation-leader::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(circle at 35% 48%, rgba(255, 255, 255, 0.11), transparent 24%); animation: 8s ease-in-out 0s infinite alternate none running pieceNationLight; }
.piece-nation-leader.is-procyon::before { animation-delay: -4s; }
.piece-nation-leader__art { animation: 5.8s ease-in-out 0s infinite normal none running pieceNationFloat; transition: filter 0.4s; }
.piece-nation-leader.is-procyon .piece-nation-leader__art { animation-delay: -2.7s; }
.piece-nation-leader:hover .piece-nation-leader__art { filter: drop-shadow(rgba(180, 224, 255, 0.55) 0px 0px 24px); }
.piece-nation-leader__title { position: absolute; left: 22px; top: 22px; z-index: 2; font: 900 clamp(21px, 2.7vw, 36px) / 1 "Cinzel Decorative", serif; color: rgb(248, 226, 175); text-shadow: rgba(246, 210, 119, 0.52) 0px 0px 18px; }
.piece-nation-leader.is-procyon .piece-nation-leader__title { left: auto; right: 22px; }
.piece-nation-leader__info b { border: 0px; padding-top: 0px; }
.piece-guardian { animation: 6s ease-in-out 0s infinite alternate none running pieceGuardianGlow; background: linear-gradient(90deg, rgba(82, 14, 34, 0.79), rgba(21, 8, 20, 0.65), transparent) !important; }
.piece-guardian.is-procyon { animation-delay: -3s; background: linear-gradient(270deg, rgba(13, 63, 132, 0.8), rgba(8, 21, 49, 0.65), transparent) !important; }
.piece-guardian img { animation: 6.5s ease-in-out 0s infinite normal none running pieceNationFloat; }
.piece-guardian.is-procyon img { animation: 6.5s ease-in-out -2.8s infinite normal none running pieceNationFloatMirror; }
.piece-guardian img { z-index: 0; pointer-events: none; }
.piece-guardian__details { z-index: 1; }
.piece-nation-leader.is-procyon .piece-nation-leader__art { width: 100%; height: 145%; left: -19%; bottom: -28%; }
@keyframes pieceNationFloat { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}
@keyframes pieceNationFloatMirror { 
  0%, 100% { transform: translateY(0px) scaleX(-1); }
  50% { transform: translateY(-8px) scaleX(-1); }
}
@keyframes pieceNationLight { 
  0% { transform: translateX(-12%); opacity: 0.5; }
  100% { transform: translateX(12%); opacity: 1; }
}
@keyframes pieceGuardianGlow { 
  0% { filter: brightness(0.9); }
  100% { filter: brightness(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .piece-nation-leader::before, .piece-nation-leader__art, .piece-guardian, .piece-guardian img { animation: auto ease 0s 1 normal none running none !important; }
}
.piece-nation-leader, .piece-nation-leader.is-capella, .piece-nation-leader.is-procyon { background: transparent !important; }
.piece-nation-leader::before, .piece-nation-leader::after { content: none !important; }
.piece-nation-leader__art { z-index: 0; }
.piece-nation-leader__info { z-index: 1; }
.piece-guardians__pair:nth-child(n+5) { display: none; }
.piece-guardians.is-expanded .piece-guardians__pair:nth-child(n+5) { display: grid; }
.piece-guardians__rows { gap: 18px; }
.piece-guardian, .piece-guardian.is-procyon { min-height: 122px; overflow: visible; filter: none; background: transparent !important; box-shadow: none !important; }
.piece-guardian img { height: 145%; bottom: -7px; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 72%, transparent 100%); }
.piece-nation-leader__art { mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 68%, transparent 100%); }
.piece-nation-leaders { gap: 0px; }
@media (max-width: 700px) {
  .piece-guardians__rows { gap: 13px; }
  .piece-guardian, .piece-guardian.is-procyon { min-height: 110px; }
}
.piece-nation-leader.is-procyon .piece-nation-leader__art { mask-image: radial-gradient(58% 78% at 36% 40%, rgb(0, 0, 0) 54%, transparent 100%); }
.piece-nation-leader.is-procyon .piece-nation-leader__art { left: -3%; width: 92%; height: 135%; bottom: -24%; }
.piece-nation-leader.is-procyon .piece-nation-leader__art { left: 0px; right: auto; bottom: 0px; width: 65%; height: 110%; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 68%, transparent 100%); }
.piece-classes__panel:is([data-class="warrior"], [data-class="blader"], [data-class="dark-mage"], [data-class="force-archer"], [data-class="force-blader"], [data-class="wizard"], [data-class="force-gunner"], [data-class="force-shielder"], [data-class="gladiator"]) .piece-classes__detail { display: flex; flex-direction: column-reverse; min-height: 0px; height: auto; padding: 0px; }
.piece-classes__panel:is([data-class="warrior"], [data-class="blader"], [data-class="dark-mage"], [data-class="force-archer"], [data-class="force-blader"], [data-class="wizard"], [data-class="force-gunner"], [data-class="force-shielder"], [data-class="gladiator"]) .piece-classes__portrait { display: block; position: relative; inset: auto; min-height: 0px; height: auto; width: 100%; overflow: hidden; border-bottom: 1px solid rgba(86, 220, 255, 0.4); background: rgb(6, 16, 29); }
.piece-classes__panel:is([data-class="warrior"], [data-class="blader"], [data-class="dark-mage"], [data-class="force-archer"], [data-class="force-blader"], [data-class="wizard"], [data-class="force-gunner"], [data-class="force-shielder"], [data-class="gladiator"]) .piece-classes__portrait::before { display: none; }
.piece-classes__panel:is([data-class="warrior"], [data-class="blader"], [data-class="dark-mage"], [data-class="force-archer"], [data-class="force-blader"], [data-class="wizard"], [data-class="force-gunner"], [data-class="force-shielder"], [data-class="gladiator"]) .piece-classes__portrait img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; object-position: center center; transform: none; animation: 7s ease-in-out 0s infinite normal none running warriorLight; filter: none; }
.piece-classes__panel:is([data-class="warrior"], [data-class="blader"], [data-class="dark-mage"], [data-class="force-archer"], [data-class="force-blader"], [data-class="wizard"], [data-class="force-gunner"], [data-class="force-shielder"], [data-class="gladiator"]) .piece-classes__text { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(180px, 260px); gap: 0px 30px; align-self: stretch; max-width: none; padding: 26px 30px 28px; background: linear-gradient(120deg, rgba(3, 12, 25, 0.97), rgba(6, 27, 44, 0.94)); }
.piece-classes__panel:is([data-class="warrior"], [data-class="blader"], [data-class="dark-mage"], [data-class="force-archer"], [data-class="force-blader"], [data-class="wizard"], [data-class="force-gunner"], [data-class="force-shielder"], [data-class="gladiator"]) .piece-classes__text > * { grid-column: 1; min-width: 0px; }
.piece-classes__panel:is([data-class="warrior"], [data-class="blader"], [data-class="dark-mage"], [data-class="force-archer"], [data-class="force-blader"], [data-class="wizard"], [data-class="force-gunner"], [data-class="force-shielder"], [data-class="gladiator"]) .piece-classes__kicker { font-size: 9px; line-height: 1.6; letter-spacing: 0.12em; }
.piece-classes__panel:is([data-class="warrior"], [data-class="blader"], [data-class="dark-mage"], [data-class="force-archer"], [data-class="force-blader"], [data-class="wizard"], [data-class="force-gunner"], [data-class="force-shielder"], [data-class="gladiator"]) .piece-classes__name { font-size: clamp(2rem, 3.8vw, 3.3rem); margin: 10px 0px 4px; }
.piece-classes__panel:is([data-class="warrior"], [data-class="blader"], [data-class="dark-mage"], [data-class="force-archer"], [data-class="force-blader"], [data-class="wizard"], [data-class="force-gunner"], [data-class="force-shielder"], [data-class="gladiator"]) .piece-classes__line { margin: 12px 0px; }
.piece-classes__panel:is([data-class="warrior"], [data-class="blader"], [data-class="dark-mage"], [data-class="force-archer"], [data-class="force-blader"], [data-class="wizard"], [data-class="force-gunner"], [data-class="force-shielder"], [data-class="gladiator"]) .piece-classes__description { font-size: 16px; max-width: 420px; margin: 0px; }
.piece-classes__panel:is([data-class="warrior"], [data-class="blader"], [data-class="dark-mage"], [data-class="force-archer"], [data-class="force-blader"], [data-class="wizard"], [data-class="force-gunner"], [data-class="force-shielder"], [data-class="gladiator"]) .piece-classes__stat-caption { font-size: 8px; margin: 16px 0px 0px; }
.piece-classes__panel:is([data-class="warrior"], [data-class="blader"], [data-class="dark-mage"], [data-class="force-archer"], [data-class="force-blader"], [data-class="wizard"], [data-class="force-gunner"], [data-class="force-shielder"], [data-class="gladiator"]) .piece-classes__stats { gap: 10px; margin-top: 12px; max-width: 330px; }
.piece-classes__panel:is([data-class="warrior"], [data-class="blader"], [data-class="dark-mage"], [data-class="force-archer"], [data-class="force-blader"], [data-class="wizard"], [data-class="force-gunner"], [data-class="force-shielder"], [data-class="gladiator"]) .piece-classes__video { grid-area: 1 / 2 / span 7; align-self: center; margin: 0px; max-width: none; }
.piece-classes__panel[data-class="warrior"] .piece-classes__portrait::after { content: ""; position: absolute; inset: 0px; pointer-events: none; z-index: 3; clip-path: polygon(39% 63%, 83% 20%, 86% 21%, 78% 43%, 48% 78%, 42% 75%); background: linear-gradient(125deg, transparent 30%, rgba(160, 244, 255, 0.5) 49%, rgba(240, 255, 255, 0.667) 50%, transparent 65%) 0% 0% / 300% 300%; mix-blend-mode: screen; animation: 6s ease-in-out 0s infinite normal none running warriorSword; }
@keyframes warriorLight { 
  50% { filter: brightness(1.035) saturate(1.06); }
}
@keyframes warriorSword { 
  0%, 15% { background-position: 100% 100%; opacity: 0; }
  30% { opacity: 0.6; }
  55% { background-position: 0% 0%; opacity: 0.6; }
  70%, 100% { background-position: 0% 0%; opacity: 0; }
}
@media (max-width: 600px) {
  .piece-classes__panel[data-class="warrior"] { min-height: 0px; }
  .piece-classes__panel[data-class="warrior"] .piece-classes__text { display: block; padding: 22px 20px 24px; }
  .piece-classes__panel[data-class="warrior"] .piece-classes__name { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .piece-classes__panel[data-class="warrior"] .piece-classes__video { margin-top: 22px; max-width: 370px; }
}
@media (prefers-reduced-motion: reduce) {
  .piece-classes__panel[data-class="warrior"] .piece-classes__portrait img, .piece-classes__panel[data-class="warrior"] .piece-classes__portrait::after { animation: auto ease 0s 1 normal none running none !important; }
  .piece-classes__panel[data-class="warrior"] .piece-classes__portrait::after { opacity: 0; }
}
.piece-classes__panel[data-class="warrior"] .piece-classes__portrait::before { content: ""; display: block; position: absolute; inset: 0px; width: auto; height: auto; border-radius: 0px; z-index: 2; pointer-events: none; filter: none; background: radial-gradient(circle at 15% 65%, rgb(112, 232, 255) 0px, rgb(112, 232, 255) 1px, transparent 3px), radial-gradient(circle at 87% 40%, rgb(176, 244, 255) 0px, rgb(176, 244, 255) 1px, transparent 3px), radial-gradient(circle at 67% 85%, rgb(82, 217, 255) 0px, rgb(82, 217, 255) 1px, transparent 3px); animation: 5s ease-in-out 0s infinite normal none running warriorEmbers; }
@keyframes warriorEmbers { 
  0%, 100% { transform: translateY(8px); opacity: 0; }
  35% { opacity: 0.8; }
  95% { transform: translateY(-20px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .piece-classes__panel[data-class="warrior"] .piece-classes__portrait::before { opacity: 0; animation: auto ease 0s 1 normal none running none !important; }
}
.piece-classes__panel[data-class="warrior"] .piece-classes__portrait img { animation: 6s ease-in-out 0s infinite normal none running warriorAuraLight; transform: none; }
.piece-classes__panel[data-class="warrior"] .piece-classes__portrait::before { inset: -3%; background: radial-gradient(at 12% 55%, rgba(0, 153, 255, 0.42), transparent 25%) 0% 0% / 105% 110%, radial-gradient(at 22% 85%, rgba(23, 191, 255, 0.3), transparent 22%) 0% 0% / 115% 110%, radial-gradient(at 68% 50%, rgba(0, 217, 255, 0.4), transparent 24%) 0% 0% / 105% 115%, radial-gradient(at 83% 27%, rgba(38, 182, 255, 0.34), transparent 23%) 0% 0% / 110% 105%, radial-gradient(at 87% 78%, rgba(0, 134, 255, 0.34), transparent 25%) 0% 0% / 110% 110%; mix-blend-mode: screen; filter: blur(9px); mask-image: radial-gradient(at 40% 43%, transparent 12%, rgba(0, 0, 0, 0.05) 19%, rgb(0, 0, 0) 33%); animation: 5.5s ease-in-out 0s infinite normal none running warriorAuraFlow; }
.piece-classes__panel[data-class="warrior"] .piece-classes__portrait::after { background: linear-gradient(125deg, transparent 25%, rgba(30, 164, 255, 0.15) 38%, rgba(116, 241, 255, 0.8) 49%, rgba(240, 255, 255, 0.95) 50%, rgba(28, 192, 255, 0.22) 55%, transparent 68%) 0% 0% / 300% 300%; filter: drop-shadow(rgba(47, 209, 255, 0.65) 0px 0px 8px); animation: 4.8s ease-in-out 0s infinite normal none running warriorAuraSword; }
@keyframes warriorAuraLight { 
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.035) saturate(1.1); }
}
@keyframes warriorAuraFlow { 
  0%, 100% { opacity: 0.38; transform: translateY(1%) scale(1); background-position: 0% 60%, 30% 70%, 45% 70%, 70% 60%, 90% 75%; }
  50% { opacity: 0.85; transform: translateY(-1%) scale(1.025); background-position: 5% 30%, 20% 40%, 55% 35%, 80% 20%, 95% 40%; }
}
@keyframes warriorAuraSword { 
  0%, 10% { opacity: 0.1; background-position: 100% 100%; }
  35% { opacity: 0.7; }
  65% { opacity: 0.6; background-position: 0% 0%; }
  85%, 100% { opacity: 0.1; background-position: 0% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .piece-classes__panel[data-class="warrior"] .piece-classes__portrait img, .piece-classes__panel[data-class="warrior"] .piece-classes__portrait::before, .piece-classes__panel[data-class="warrior"] .piece-classes__portrait::after { animation: auto ease 0s 1 normal none running none !important; }
  .piece-classes__panel[data-class="warrior"] .piece-classes__portrait::before, .piece-classes__panel[data-class="warrior"] .piece-classes__portrait::after { opacity: 0; }
}
.piece-classes__panel[data-class="blader"] .piece-classes__portrait img { aspect-ratio: 2752 / 1536; animation: 6s ease-in-out 0s infinite normal none running warriorAuraLight; transform: none; }
.piece-classes__panel[data-class="blader"] .piece-classes__portrait::before { content: ""; display: block; position: absolute; inset: 0px; width: auto; height: auto; filter: blur(8px); border-radius: 0px; z-index: 2; pointer-events: none; background: radial-gradient(at 32% 77%, rgba(67, 207, 255, 0.4), transparent 25%), radial-gradient(at 73% 70%, rgba(50, 206, 255, 0.333), transparent 24%), radial-gradient(at 17% 42%, rgba(19, 156, 255, 0.2), transparent 23%); mask-image: radial-gradient(at 51% 42%, transparent 19%, rgb(0, 0, 0) 36%); mix-blend-mode: screen; animation: 5s ease-in-out 0s infinite normal none running warriorAuraFlow; }
.piece-classes__panel[data-class="blader"] .piece-classes__portrait::after { content: ""; position: absolute; inset: 0px; z-index: 3; pointer-events: none; clip-path: polygon(26% 56%, 52% 99%, 47% 100%, 24% 62%); background: linear-gradient(125deg, transparent 30%, rgba(181, 245, 255, 0.6) 49%, rgba(255, 255, 255, 0.733) 50%, transparent 65%) 0% 0% / 300% 300%; mix-blend-mode: screen; animation: 5s ease-in-out 0s infinite normal none running warriorAuraSword; }
@media (max-width: 600px) {
  .piece-classes__panel[data-class="blader"] { min-height: 0px; }
  .piece-classes__panel[data-class="blader"] .piece-classes__text { display: block; padding: 22px 20px 24px; }
  .piece-classes__panel[data-class="blader"] .piece-classes__name { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .piece-classes__panel[data-class="blader"] .piece-classes__video { margin-top: 22px; max-width: 370px; }
}
@media (prefers-reduced-motion: reduce) {
  .piece-classes__panel[data-class="blader"] .piece-classes__portrait img, .piece-classes__panel[data-class="blader"] .piece-classes__portrait::before, .piece-classes__panel[data-class="blader"] .piece-classes__portrait::after { animation: auto ease 0s 1 normal none running none !important; }
  .piece-classes__panel[data-class="blader"] .piece-classes__portrait::before, .piece-classes__panel[data-class="blader"] .piece-classes__portrait::after { opacity: 0; }
}
.piece-classes__panel[data-class="blader"] .piece-classes__portrait img { aspect-ratio: auto; transform: none; object-fit: contain; }
.piece-classes__panel[data-class="blader"] .piece-classes__portrait::after { clip-path: polygon(31% 67%, 47% 87%, 44% 94%, 28% 75%); background: linear-gradient(130deg, transparent 32%, rgba(98, 220, 255, 0.08) 43%, rgba(168, 244, 255, 0.45) 49%, rgba(227, 253, 255, 0.55) 51%, rgba(67, 206, 255, 0.12) 58%, transparent 68%) 0% 0% / 300% 300%; filter: blur(0.6px); opacity: 0.4; animation: 5.6s ease-in-out 0s infinite normal none running duelistBladeFlow; }
.piece-classes__panel[data-class="blader"] .piece-classes__portrait::before { background: radial-gradient(at 36% 83%, rgba(67, 207, 255, 0.333), transparent 18%), radial-gradient(at 70% 71%, rgba(50, 206, 255, 0.267), transparent 17%), radial-gradient(at 18% 45%, rgba(19, 156, 255, 0.133), transparent 20%); mask-image: radial-gradient(at 51% 46%, transparent 18%, rgb(0, 0, 0) 34%); }
@keyframes duelistBladeFlow { 
  0%, 12% { background-position: 100% 100%; opacity: 0.06; }
  35% { opacity: 0.5; }
  62% { background-position: 0% 0%; opacity: 0.4; }
  80%, 100% { background-position: 0% 0%; opacity: 0.06; }
}
@media (prefers-reduced-motion: reduce) {
  .piece-classes__panel[data-class="blader"] .piece-classes__portrait::after { opacity: 0; animation: auto ease 0s 1 normal none running none !important; }
}
.piece-classes__panel[data-class="blader"] .piece-classes__portrait img { transform-origin: 50% 72%; animation: 6s ease-in-out 0s infinite normal none running warriorAuraLight, 7s ease-in-out 0s infinite normal none running duelistIdleMotion; }
.piece-classes__panel[data-class="blader"] .piece-classes__portrait::before { transform-origin: 50% 72%; animation: 5s ease-in-out 0s infinite normal none running warriorAuraFlow, 7s ease-in-out 0s infinite normal none running duelistIdleMotion; }
.piece-classes__panel[data-class="blader"] .piece-classes__portrait::after { transform-origin: 50% 72%; animation: 5.6s ease-in-out 0s infinite normal none running duelistBladeFlow, 7s ease-in-out 0s infinite normal none running duelistIdleMotion; }
@keyframes duelistIdleMotion { 
  0%, 100% { translate: 0px; scale: 1.012; rotate: -0.12deg; }
  50% { translate: 0px -0.6%; scale: 1.022; rotate: 0.12deg; }
}
@media (prefers-reduced-motion: reduce) {
  .piece-classes__panel[data-class="blader"] .piece-classes__portrait img, .piece-classes__panel[data-class="blader"] .piece-classes__portrait::before, .piece-classes__panel[data-class="blader"] .piece-classes__portrait::after { translate: none; scale: none; rotate: none; animation: auto ease 0s 1 normal none running none !important; }
}
.piece-classes__panel[data-class="dark-mage"] .piece-classes__portrait img { aspect-ratio: auto; object-fit: contain; transform: none; animation: 6s ease-in-out 0s infinite normal none running warriorAuraLight; }
@media (max-width: 600px) {
  .piece-classes__panel[data-class="dark-mage"] { min-height: 0px; }
  .piece-classes__panel[data-class="dark-mage"] .piece-classes__text { display: block; padding: 22px 20px 24px; }
  .piece-classes__panel[data-class="dark-mage"] .piece-classes__name { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .piece-classes__panel[data-class="dark-mage"] .piece-classes__video { margin-top: 22px; max-width: 370px; }
}
@media (prefers-reduced-motion: reduce) {
  .piece-classes__panel[data-class="dark-mage"] .piece-classes__portrait img { animation: auto ease 0s 1 normal none running none !important; }
}
.piece-classes__panel[data-class="dark-mage"] .piece-classes__portrait::after { content: ""; position: absolute; inset: 0px; z-index: 2; pointer-events: none; background: radial-gradient(13% 22% at 17.5% 43%, rgba(194, 248, 255, 0.36), rgba(71, 181, 255, 0.15) 52%, transparent 78%); mix-blend-mode: screen; animation: 3.8s ease-in-out 0s infinite normal none running pieceMagePulse; }
.piece-mage-power { position: absolute; inset: 0px; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.piece-mage-power path { stroke: rgb(228, 252, 255); stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(rgb(87, 207, 255) 0px 0px 2px) drop-shadow(rgb(49, 141, 255) 0px 0px 5px); }
.piece-mage-power__vortex { transform-origin: 17.5% 43%; animation: 11s linear 0s infinite normal none running pieceMageVortex; opacity: 0.4; }
.piece-mage-power__vortex path { stroke-width: 0.8; }
.piece-mage-power__bolt { opacity: 0; animation: 3.7s linear 0s infinite normal none running pieceMageDischarge; }
.piece-mage-power__bolt--two { animation-duration: 4.9s; animation-delay: -1.8s; }
.piece-mage-power__bolt--three { animation-duration: 5.3s; animation-delay: -3s; }
.piece-mage-power__bolt--four { animation-duration: 4.3s; animation-delay: -2.4s; }
.piece-mage-power__sparks { fill: rgb(216, 250, 255); filter: drop-shadow(rgb(86, 203, 255) 0px 0px 3px); animation: 4.7s ease-out 0s infinite normal none running pieceMageSparks; }
@keyframes pieceMagePulse { 
  0%, 100% { opacity: 0.3; }
  45% { opacity: 0.85; }
  65% { opacity: 0.55; }
}
@keyframes pieceMageVortex { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes pieceMageDischarge { 
  0%, 18%, 25%, 58%, 67%, 100% { opacity: 0; }
  20% { opacity: 0.75; }
  22% { opacity: 0.2; }
  24% { opacity: 0.6; }
  60% { opacity: 0.4; }
  63% { opacity: 0.7; }
  65% { opacity: 0.15; }
}
@keyframes pieceMageSparks { 
  0%, 100% { opacity: 0; transform: translateY(4px); }
  35% { opacity: 0.7; }
  85% { opacity: 0; transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .piece-mage-power { display: none; }
  .piece-classes__panel[data-class="dark-mage"] .piece-classes__portrait::after { animation: auto ease 0s 1 normal none running none; opacity: 0.2; }
}
.piece-classes__panel[data-class="dark-mage"] .piece-classes__portrait img.piece-mage-orb { position: absolute; inset: 0px; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: fill; pointer-events: none; z-index: 2; transform-origin: 17.5% 43%; mix-blend-mode: screen; mask-image: radial-gradient(8.2% 14.7% at 17.5% 43%, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 48%, transparent 100%); animation: 8s linear 0s infinite normal none running pieceMageOrbTexture, 3.6s ease-in-out 0s infinite normal none running pieceMageOrbBreathe; }
@keyframes pieceMageOrbTexture { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes pieceMageOrbBreathe { 
  0%, 100% { scale: 0.96; opacity: 0.45; filter: brightness(0.9); }
  50% { scale: 1.09; opacity: 0.8; filter: brightness(1.16); }
}
@media (prefers-reduced-motion: reduce) {
  .piece-classes__panel[data-class="dark-mage"] .piece-classes__portrait img.piece-mage-orb { display: none; }
}
.piece-classes__panel[data-class="dark-mage"] .piece-classes__portrait img.piece-mage-orb { inset: 23% auto auto 7.5%; width: 20%; height: auto; aspect-ratio: 1 / 1; transform-origin: 50% 50%; object-fit: contain; mask-image: none; animation: 8s linear 0s infinite normal none running pieceMageOrbTexture, 3.6s ease-in-out 0s infinite normal none running pieceMageOrbIndependentPulse; }
@keyframes pieceMageOrbIndependentPulse { 
  0%, 100% { scale: 0.96; opacity: 0.8; filter: brightness(1); }
  50% { scale: 1.06; opacity: 1; filter: brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .piece-classes__panel[data-class="dark-mage"] .piece-classes__portrait img.piece-mage-orb { display: block; transform: none; scale: 1; opacity: 0.85; animation: auto ease 0s 1 normal none running none !important; }
}
.piece-classes__panel[data-class="dark-mage"] .piece-classes__portrait::after { background: radial-gradient(6% 13% at 10% 50%, rgba(143, 228, 255, 0.267), transparent 85%), radial-gradient(5% 12% at 19% 49%, rgba(137, 220, 255, 0.2), transparent 85%), radial-gradient(10% 16% at 15% 69%, rgba(71, 186, 255, 0.133), transparent 80%); animation: 6.3s linear 0s infinite normal none running pieceMageThunderLight; }
.piece-mage-power path { stroke: rgb(241, 253, 255); stroke-width: 1.15; filter: drop-shadow(rgb(164, 244, 255) 0px 0px 1.5px) drop-shadow(rgb(49, 157, 255) 0px 0px 4px); }
.piece-mage-power path.piece-mage-power__branch { stroke-width: 0.48; opacity: 0.75; }
.piece-mage-power__bolt { animation-name: pieceMageThunderStrike; animation-duration: 4.7s; }
.piece-mage-power__bolt--two { animation-duration: 6.3s; animation-delay: -2.3s; }
.piece-mage-power__bolt--three { animation-duration: 5.9s; animation-delay: -4.1s; }
.piece-mage-power__bolt--four { animation-duration: 7.1s; animation-delay: -1.6s; }
.piece-mage-power__residue { opacity: 0.2; animation: 4.8s ease-out 0s infinite normal none running pieceMageRemnants; }
.piece-mage-power__residue path { stroke-width: 0.55; stroke: rgb(156, 221, 255); filter: drop-shadow(rgb(58, 180, 255) 0px 0px 2px); }
@keyframes pieceMageThunderStrike { 
  0%, 17%, 25%, 56%, 65%, 100% { opacity: 0; }
  18.5% { opacity: 0.9; }
  20% { opacity: 0.25; }
  21.5% { opacity: 0.65; }
  24% { opacity: 0.08; }
  58% { opacity: 0.8; }
  60% { opacity: 0.16; }
  62% { opacity: 0.4; }
  64% { opacity: 0; }
}
@keyframes pieceMageThunderLight { 
  0%, 17%, 26%, 56%, 66%, 100% { opacity: 0.1; }
  19% { opacity: 0.65; }
  22% { opacity: 0.3; }
  58% { opacity: 0.5; }
  62% { opacity: 0.25; }
}
@keyframes pieceMageRemnants { 
  0% { opacity: 0; transform: translateY(3px); }
  20% { opacity: 0.4; }
  65% { opacity: 0.12; }
  100% { opacity: 0; transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .piece-mage-power { display: none; }
  .piece-classes__panel[data-class="dark-mage"] .piece-classes__portrait::after { opacity: 0.15; animation: auto ease 0s 1 normal none running none !important; }
}
.piece-mage-particles { position: absolute; left: 17.5%; top: 41%; width: 0px; height: 0px; z-index: 3; pointer-events: none; }
.piece-mage-particles::before { content: ""; position: absolute; width: 80px; height: 80px; left: -40px; top: -40px; background: radial-gradient(circle, rgba(182, 243, 255, 0.19), rgba(80, 191, 255, 0.07) 40%, transparent 70%); animation: 4s ease-in-out 0s infinite normal none running pieceMageParticleGlow; }
.piece-mage-particles i { position: absolute; left: 0px; top: 0px; width: var(--particle-size); height: var(--particle-size); border-radius: 50%; background: rgb(229, 251, 255); box-shadow: rgb(135, 230, 255) 0px 0px 4px, rgb(41, 158, 255) 0px 0px 9px; opacity: 0; animation: pieceMageParticleGrow var(--particle-duration) ease-out var(--particle-delay) infinite; }
@keyframes pieceMageParticleGrow { 
  0% { opacity: 0; transform: translate(0px, 16px) scale(0.15); }
  18% { opacity: 0.8; }
  45% { opacity: 0.65; transform: translate(calc(var(--particle-x)*.45),calc(var(--particle-y)*.45)) scale(1.35); }
  100% { opacity: 0; transform: translate(var(--particle-x),var(--particle-y)) scale(.25); }
}
@keyframes pieceMageParticleGlow { 
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 0.7; transform: scale(1.1); }
}
.piece-mage-power__bolt { opacity: 0; animation-name: pieceMageGentleArc; }
@keyframes pieceMageGentleArc { 
  0%, 36%, 47%, 100% { opacity: 0; }
  40% { opacity: 0.35; }
  44% { opacity: 0.12; }
}
@media (max-width: 600px) {
  .piece-mage-particles { transform: scale(0.55); transform-origin: 0px 0px; }
}
@media (prefers-reduced-motion: reduce) {
  .piece-mage-particles i, .piece-mage-particles::before { animation: auto ease 0s 1 normal none running none; }
  .piece-mage-particles::before { opacity: 0.4; }
}
.mage-live-energy { position: absolute; inset: 0px; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: hidden; }
.mage-particle-ring { transform-origin: 174px 214px; animation: 5s ease-in-out 0s infinite normal none running mageRingBreathe; }
.mage-ring-dot { fill: rgb(213, 247, 255); filter: drop-shadow(rgb(70, 187, 255) 0px 0px 2px); animation: mageRingSpark var(--duration) ease-in-out var(--delay) infinite; }
.mage-live-bolt { opacity: 0; animation: mageLiveStrike var(--duration) linear var(--delay) infinite; }
.mage-live-bolt path { stroke: rgb(239, 254, 255); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(rgb(102, 219, 255) 0px 0px 1.6px) drop-shadow(rgb(35, 138, 255) 0px 0px 4px); }
.mage-live-bolt path.mage-live-branch { stroke-width: 0.45; opacity: 0.65; }
@keyframes mageRingBreathe { 
  0%, 100% { transform: scale(0.96); }
  50% { transform: scale(1.045); }
}
@keyframes mageRingSpark { 
  0%, 100% { opacity: 0.18; }
  35% { opacity: 0.95; }
  65% { opacity: 0.5; }
}
@keyframes mageLiveStrike { 
  0%, 12%, 20%, 100% { opacity: 0; }
  13% { opacity: 0.8; }
  14.5% { opacity: 0.15; }
  16% { opacity: 0.65; }
  19% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mage-particle-ring, .mage-ring-dot { animation: auto ease 0s 1 normal none running none; }
  .mage-ring-dot { opacity: 0.45; }
  .mage-live-bolt { display: none; }
}
.mage-ring-dot { animation: mageLooseParticle var(--duration) ease-out var(--delay) infinite; transform-box: fill-box; transform-origin: center center; filter: drop-shadow(rgb(118, 223, 255) 0px 0px 1.5px); }
.mage-particle-ring { animation: 6s ease-in-out 0s infinite normal none running mageRingBreathe; }
@keyframes mageLooseParticle { 
  0% { opacity: 0; transform: translate(0px, 7px) scale(0.35); }
  15% { opacity: 0.8; transform: translate(0,var(--hop)) scale(1.15); }
  30% { opacity: 0.5; transform: translate(calc(var(--drift-x)*.2),2px) scale(.75); }
  48% { opacity: 0.9; transform: translate(calc(var(--drift-x)*.4),calc(var(--hop)*1.5)) scale(1.25); }
  70% { opacity: 0.45; transform: translate(calc(var(--drift-x)*.7),calc(var(--drift-y)*.6)) scale(.8); }
  100% { opacity: 0; transform: translate(var(--drift-x),var(--drift-y)) scale(.2); }
}
@media (prefers-reduced-motion: reduce) {
  .mage-ring-dot { animation: auto ease 0s 1 normal none running none; transform: none; opacity: 0.45; }
}
.mage-center-flash { opacity: 0; animation: 3.4s linear 0s infinite normal none running mageCenterFlash; }
.mage-center-flash path { stroke: rgb(244, 254, 255); stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(rgb(154, 242, 255) 0px 0px 2px) drop-shadow(rgb(39, 156, 255) 0px 0px 6px); }
.mage-center-flash path.mage-center-branch { stroke-width: 0.65; }
@keyframes mageCenterFlash { 
  0%, 18%, 29%, 67%, 78%, 100% { opacity: 0; }
  20% { opacity: 1; }
  22% { opacity: 0.18; }
  24% { opacity: 0.8; }
  27% { opacity: 0.1; }
  69% { opacity: 0.9; }
  72% { opacity: 0.2; }
  75% { opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
  .mage-center-flash { display: none; }
}
.piece-classes__panel[data-class="force-archer"] .piece-classes__portrait img { aspect-ratio: auto; object-fit: contain; transform: none; animation: 6s ease-in-out 0s infinite normal none running warriorAuraLight; }
@media (max-width: 600px) {
  .piece-classes__panel[data-class="force-archer"] { min-height: 0px; }
  .piece-classes__panel[data-class="force-archer"] .piece-classes__text { display: block; padding: 22px 20px 24px; }
  .piece-classes__panel[data-class="force-archer"] .piece-classes__name { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .piece-classes__panel[data-class="force-archer"] .piece-classes__video { margin-top: 22px; max-width: 370px; }
}
@media (prefers-reduced-motion: reduce) {
  .piece-classes__panel[data-class="force-archer"] .piece-classes__portrait img { animation: auto ease 0s 1 normal none running none !important; }
}
.archer-weapon-energy { position: absolute; inset: 0px; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.archer-weapon-glow { stroke: rgb(169, 245, 255); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(rgb(65, 207, 255) 0px 0px 3px) drop-shadow(rgb(20, 123, 255) 0px 0px 7px); animation: 3.8s ease-in-out 0s infinite normal none running archerWeaponPulse; }
.archer-weapon-glow circle { fill: rgba(148, 241, 255, 0.25); stroke-width: 1; }
.archer-weapon-mote { fill: rgb(213, 251, 255); filter: drop-shadow(rgb(102, 220, 255) 0px 0px 2px); animation: archerWeaponMote var(--duration) ease-out var(--delay) infinite; }
@keyframes archerWeaponPulse { 
  0%, 100% { opacity: 0.08; }
  45% { opacity: 0.65; }
  65% { opacity: 0.2; }
}
@keyframes archerWeaponMote { 
  0% { opacity: 0; transform: translate(0px, 0px); }
  20% { opacity: 0.85; }
  60% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(6px,var(--drift)); }
}
@media (prefers-reduced-motion: reduce) {
  .archer-weapon-energy { display: none; }
}
.archer-weapon-glow { stroke: rgb(220, 252, 255); stroke-width: 3; filter: drop-shadow(rgb(160, 245, 255) 0px 0px 3px) drop-shadow(rgb(34, 200, 255) 0px 0px 9px) drop-shadow(rgb(22, 125, 255) 0px 0px 15px); animation: 2.8s ease-in-out 0s infinite normal none running archerWeaponBrightPulse; }
.archer-weapon-glow circle { fill: rgba(175, 247, 255, 0.533); stroke-width: 1.8; }
.archer-weapon-mote { fill: rgb(241, 254, 255); filter: drop-shadow(rgb(162, 245, 255) 0px 0px 3px) drop-shadow(rgb(53, 186, 255) 0px 0px 6px); }
@keyframes archerWeaponBrightPulse { 
  0%, 100% { opacity: 0.32; }
  40% { opacity: 0.95; }
  60% { opacity: 0.6; }
  78% { opacity: 0.8; }
}
.archer-barrel-flow path { stroke: rgb(236, 255, 255); stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18, 210; filter: drop-shadow(rgb(166, 250, 255) 0px 0px 3px) drop-shadow(rgb(42, 204, 255) 0px 0px 8px); animation: 2.5s linear 0s infinite normal none running archerBarrelStream; }
.archer-barrel-flow path.archer-barrel-flow-secondary { animation-delay: -1.25s; stroke-dasharray: 22, 240; }
.archer-muzzle-pulse { fill: rgba(185, 250, 255, 0.333); stroke: rgb(233, 255, 255); stroke-width: 1.8; transform-box: fill-box; transform-origin: center center; filter: drop-shadow(rgb(98, 234, 255) 0px 0px 4px) drop-shadow(rgb(22, 158, 255) 0px 0px 9px); animation: 2.5s ease-in-out 0s infinite normal none running archerMuzzleEnergy; }
@keyframes archerBarrelStream { 
  0% { stroke-dashoffset: 228; opacity: 0.1; }
  18% { opacity: 0.95; }
  75% { opacity: 0.85; }
  100% { stroke-dashoffset: 0; opacity: 0.1; }
}
@keyframes archerMuzzleEnergy { 
  0%, 100% { opacity: 0.25; transform: scale(0.9); }
  70% { opacity: 1; transform: scale(1.2); }
  85% { opacity: 0.65; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .archer-barrel-flow, .archer-muzzle-pulse { display: none; }
}
.piece-classes__panel[data-class="force-blader"] .piece-classes__portrait img { aspect-ratio: auto; object-fit: contain; transform: none; animation: 6s ease-in-out 0s infinite normal none running warriorAuraLight; }
.piece-classes__panel[data-class="force-blader"] .piece-classes__portrait::after { content: ""; position: absolute; inset: 0px; pointer-events: none; z-index: 3; clip-path: polygon(32% 68%, 53% 100%, 48% 100%, 31% 73%); background: linear-gradient(135deg, transparent 30%, rgba(118, 234, 255, 0.333) 46%, rgba(236, 255, 255, 0.667) 50%, transparent 62%) 0% 0% / 300% 300%; mix-blend-mode: screen; animation: 5.6s ease-in-out 0s infinite normal none running duelistBladeFlow; }
@media (max-width: 600px) {
  .piece-classes__panel[data-class="force-blader"] { min-height: 0px; }
  .piece-classes__panel[data-class="force-blader"] .piece-classes__text { display: block; padding: 22px 20px 24px; }
  .piece-classes__panel[data-class="force-blader"] .piece-classes__name { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .piece-classes__panel[data-class="force-blader"] .piece-classes__video { margin-top: 22px; max-width: 370px; }
}
@media (prefers-reduced-motion: reduce) {
  .piece-classes__panel[data-class="force-blader"] .piece-classes__portrait img, .piece-classes__panel[data-class="force-blader"] .piece-classes__portrait::after { animation: auto ease 0s 1 normal none running none !important; }
  .piece-classes__panel[data-class="force-blader"] .piece-classes__portrait::after { opacity: 0; }
}
.piece-classes__panel[data-class="force-blader"] .piece-classes__portrait img { animation: 6s ease-in-out 0s infinite normal none running warriorAuraLight, 7s ease-in-out 0s infinite normal none running arcaneCharacterIdle; transform-origin: 50% 75%; }
.piece-classes__panel[data-class="force-blader"] .piece-classes__portrait::after { animation: 4s ease-in-out 0s infinite normal none running duelistBladeFlow, 7s ease-in-out 0s infinite normal none running arcaneCharacterIdle; transform-origin: 50% 75%; }
.arcane-energy { position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 4; transform-origin: 50% 75%; animation: 7s ease-in-out 0s infinite normal none running arcaneCharacterIdle; overflow: hidden; mix-blend-mode: screen; }
.arcane-aura-spark { fill: rgb(183, 244, 255); filter: drop-shadow(rgb(50, 189, 255) 0px 0px 3px); animation: arcaneAuraRise var(--duration) ease-out var(--delay) infinite; }
.arcane-blade-stream { stroke: rgb(240, 255, 255); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 25, 220; filter: drop-shadow(rgb(143, 244, 255) 0px 0px 3px) drop-shadow(rgb(29, 191, 255) 0px 0px 8px); animation: 3.2s linear 0s infinite normal none running arcaneBladeStream; }
.arcane-blade-arcs { stroke: rgb(209, 250, 255); stroke-width: 0.9; stroke-linejoin: round; filter: drop-shadow(rgb(37, 187, 255) 0px 0px 4px); animation: 4.6s linear 0s infinite normal none running mageCenterFlash; }
@keyframes arcaneCharacterIdle { 
  0%, 100% { translate: 0px; scale: 1.004; }
  50% { translate: 0px -0.35%; scale: 1.012; }
}
@keyframes arcaneAuraRise { 
  0% { opacity: 0; transform: translate(0px, 8px); }
  20% { opacity: 0.8; }
  65% { opacity: 0.45; }
  100% { opacity: 0; transform: translate(var(--drift),-32px); }
}
@keyframes arcaneBladeStream { 
  0% { stroke-dashoffset: 245; opacity: 0.15; }
  25% { opacity: 0.95; }
  80% { opacity: 0.85; }
  100% { stroke-dashoffset: 0; opacity: 0.15; }
}
@media (prefers-reduced-motion: reduce) {
  .arcane-energy { display: none; }
  .piece-classes__panel[data-class="force-blader"] .piece-classes__portrait img, .piece-classes__panel[data-class="force-blader"] .piece-classes__portrait::after { translate: none; scale: none; animation: auto ease 0s 1 normal none running none !important; }
}
.arcane-blade-halo { stroke: rgb(52, 202, 255); stroke-width: 13; stroke-linecap: round; filter: blur(6px); animation: 3.6s ease-in-out 0s infinite normal none running arcaneSwordAuraPulse; }
.arcane-blade-arcs { stroke: rgb(230, 253, 255); stroke-width: 1; animation: 3.7s linear 0s infinite normal none running arcaneSwordLightning; filter: drop-shadow(rgb(132, 236, 255) 0px 0px 2px) drop-shadow(rgb(41, 186, 255) 0px 0px 5px); }
.arcane-blade-arcs--second { animation-duration: 4.9s; animation-delay: -2.1s; stroke-width: 0.8; }
@keyframes arcaneSwordAuraPulse { 
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.55; }
}
@keyframes arcaneSwordLightning { 
  0%, 14%, 23%, 57%, 67%, 100% { opacity: 0; }
  16% { opacity: 0.95; }
  18% { opacity: 0.2; }
  21% { opacity: 0.7; }
  60% { opacity: 0.8; }
  63% { opacity: 0.2; }
  65% { opacity: 0.6; }
}
.piece-classes__panel[data-class="force-gunner"] .piece-classes__portrait img { transform-origin: 50% 65%; animation: 5s ease-in-out 0s infinite normal none running warriorAuraLight, 7s ease-in-out 0s infinite normal none running gunnerIdle !important; }
.gunner-live-energy { position: absolute; inset: 0px; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: hidden; mix-blend-mode: screen; transform-origin: 50% 65%; animation: 7s ease-in-out 0s infinite normal none running gunnerIdle; }
.gunner-barrel-flow path { stroke: rgb(224, 252, 255); stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: 22, 260; filter: drop-shadow(rgb(91, 225, 255) 0px 0px 3px) drop-shadow(rgb(19, 141, 255) 0px 0px 7px); animation: 2.6s linear 0s infinite normal none running gunnerBarrelFlow; }
.gunner-barrel-flow path:nth-child(2) { animation-delay: -0.9s; }
.gunner-barrel-flow path:nth-child(3) { animation-delay: -1.8s; }
.gunner-muzzle-halo { stroke: rgb(90, 220, 255); stroke-width: 8; filter: blur(5px); animation: 2.6s ease-in-out 0s infinite normal none running gunnerWeaponPulse; }
.gunner-weapon-arcs { stroke: rgb(230, 255, 255); stroke-width: 1.2; stroke-linejoin: round; filter: drop-shadow(rgb(56, 200, 255) 0px 0px 3px); animation: 3.9s linear 0s infinite normal none running arcaneSwordLightning; }
.gunner-core-orbit ellipse { stroke: rgb(169, 243, 255); stroke-width: 1.6; stroke-dasharray: 12, 85; filter: drop-shadow(rgb(33, 193, 255) 0px 0px 4px); animation: 4s linear 0s infinite normal none running gunnerOrbitFlow; }
.gunner-core-orbit ellipse + ellipse { animation-direction: reverse; animation-duration: 5.2s; }
.gunner-core-pulse { fill: rgb(200, 250, 255); filter: blur(3px) drop-shadow(rgb(22, 141, 255) 0px 0px 7px); animation: 3.3s ease-in-out 0s infinite normal none running gunnerWeaponPulse; }
.gunner-light-mote { fill: rgb(214, 251, 255); filter: drop-shadow(rgb(65, 202, 255) 0px 0px 3px); animation: arcaneAuraRise var(--duration) ease-out var(--delay) infinite; }
@keyframes gunnerIdle { 
  0%, 100% { translate: 0px; scale: 1; }
  50% { translate: 0px 0.2%; scale: 1.006; }
}
@keyframes gunnerBarrelFlow { 
  0% { stroke-dashoffset: 282; opacity: 0.15; }
  30%, 70% { opacity: 0.9; }
  100% { stroke-dashoffset: 0; opacity: 0.15; }
}
@keyframes gunnerWeaponPulse { 
  0%, 100% { opacity: 0.12; }
  48% { opacity: 0.6; }
  65% { opacity: 0.25; }
}
@keyframes gunnerOrbitFlow { 
  0% { stroke-dashoffset: 194; }
  100% { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gunner-live-energy { display: none; }
  .piece-classes__panel[data-class="force-gunner"] .piece-classes__portrait img { translate: none; scale: none; animation: auto ease 0s 1 normal none running none !important; }
}
.piece-classes__panel[data-class="force-gunner"] .piece-classes__portrait img { aspect-ratio: auto; object-fit: contain; transform: none; animation: 6s ease-in-out 0s infinite normal none running warriorAuraLight; }
@media (max-width: 600px) {
  .piece-classes__panel[data-class="force-gunner"] { min-height: 0px; }
  .piece-classes__panel[data-class="force-gunner"] .piece-classes__text { display: block; padding: 22px 20px 24px; }
  .piece-classes__panel[data-class="force-gunner"] .piece-classes__name { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .piece-classes__panel[data-class="force-gunner"] .piece-classes__video { margin-top: 22px; max-width: 370px; }
}
@media (prefers-reduced-motion: reduce) {
  .piece-classes__panel[data-class="force-gunner"] .piece-classes__portrait img { animation: auto ease 0s 1 normal none running none !important; }
}
.wizard-live-energy { position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: hidden; mix-blend-mode: screen; }
.wizard-crystal-halo { fill: rgb(67, 207, 255); filter: blur(11px); animation: 3.4s ease-in-out 0s infinite normal none running wizardCrystalPulse; }
.wizard-staff-stream path { stroke: rgb(182, 247, 255); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 32, 170; filter: drop-shadow(rgb(82, 219, 255) 0px 0px 3px) drop-shadow(rgb(22, 140, 255) 0px 0px 7px); animation: 4s linear 0s infinite normal none running wizardStaffFlow; }
.wizard-staff-stream path + path { stroke-width: 1.2; animation-delay: -1.9s; animation-duration: 5.3s; }
.wizard-crystal-flash { stroke: rgb(228, 255, 255); stroke-width: 1.1; stroke-linejoin: round; filter: drop-shadow(rgb(51, 202, 255) 0px 0px 4px); animation: 4.7s linear 0s infinite normal none running arcaneSwordLightning; }
.wizard-braid-shimmer path { stroke: rgb(184, 246, 255); stroke-width: 2.3; stroke-linecap: round; stroke-dasharray: 9, 110; filter: drop-shadow(rgb(36, 188, 255) 0px 0px 3px); animation: 3.6s linear 0s infinite normal none running wizardBraidFlow; }
.wizard-braid-shimmer path:nth-child(2n) { animation-delay: -1.8s; animation-duration: 4.4s; }
.wizard-braid-shimmer path:nth-child(3) { animation-delay: -0.8s; }
.wizard-energy-mote { fill: rgb(208, 250, 255); filter: drop-shadow(rgb(40, 189, 255) 0px 0px 2px); animation: arcaneAuraRise var(--duration) ease-out var(--delay) infinite; }
@keyframes wizardCrystalPulse { 
  0%, 100% { opacity: 0.08; }
  45% { opacity: 0.35; }
  65% { opacity: 0.16; }
}
@keyframes wizardStaffFlow { 
  0% { stroke-dashoffset: 202; opacity: 0.3; }
  50% { opacity: 0.85; }
  100% { stroke-dashoffset: 0; opacity: 0.3; }
}
@keyframes wizardBraidFlow { 
  0% { stroke-dashoffset: 119; opacity: 0.15; }
  35%, 65% { opacity: 0.8; }
  100% { stroke-dashoffset: 0; opacity: 0.15; }
}
@media (prefers-reduced-motion: reduce) {
  .wizard-live-energy { display: none; }
}
.piece-classes__panel[data-class="wizard"] .piece-classes__portrait img { aspect-ratio: auto; object-fit: contain; transform: none; animation: 6s ease-in-out 0s infinite normal none running warriorAuraLight; }
@media (max-width: 600px) {
  .piece-classes__panel[data-class="wizard"] { min-height: 0px; }
  .piece-classes__panel[data-class="wizard"] .piece-classes__text { display: block; padding: 22px 20px 24px; }
  .piece-classes__panel[data-class="wizard"] .piece-classes__name { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .piece-classes__panel[data-class="wizard"] .piece-classes__video { margin-top: 22px; max-width: 370px; }
}
@media (prefers-reduced-motion: reduce) {
  .piece-classes__panel[data-class="wizard"] .piece-classes__portrait img { animation: auto ease 0s 1 normal none running none !important; }
}.piece-classes__panel[data-class=force-shielder] .piece-classes__portrait img{aspect-ratio:auto;object-fit:contain;transform:none;animation:warriorAuraLight 6s ease-in-out infinite}
@media(max-width:600px){.piece-classes__panel[data-class=force-shielder]{min-height:0}.piece-classes__panel[data-class=force-shielder] .piece-classes__text{display:block;padding:22px 20px 24px}.piece-classes__panel[data-class=force-shielder] .piece-classes__name{font-size:clamp(1.8rem,8vw,2.5rem)}.piece-classes__panel[data-class=force-shielder] .piece-classes__video{margin-top:22px;max-width:370px}}
@media(prefers-reduced-motion:reduce){.piece-classes__panel[data-class=force-shielder] .piece-classes__portrait img{animation:none!important}}
/* Gladiador: mesmo card horizontal das demais classes. */
.piece-classes__panel[data-class=gladiator] .piece-classes__portrait img{aspect-ratio:auto;object-fit:contain;object-position:center;transform:none;animation:warriorAuraLight 6s ease-in-out infinite}
@media(max-width:600px){.piece-classes__panel[data-class=gladiator]{min-height:0}.piece-classes__panel[data-class=gladiator] .piece-classes__text{display:block;padding:22px 20px 24px}.piece-classes__panel[data-class=gladiator] .piece-classes__name{font-size:clamp(1.8rem,8vw,2.5rem)}.piece-classes__panel[data-class=gladiator] .piece-classes__video{margin-top:22px;max-width:370px}}
@media(prefers-reduced-motion:reduce){.piece-classes__panel[data-class=gladiator] .piece-classes__portrait img{animation:none!important}}
/* Chakrams: energia nas lâminas e resíduos que se dissipam. */
.chakram-live-energy{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:hidden;mix-blend-mode:screen}
.chakram-edge-halo{stroke:#2dcaff;stroke-width:6;stroke-linecap:round;filter:blur(4px);animation:chakramHaloPulse 3.2s ease-in-out infinite}
.chakram-edge-stream{stroke:#d7fbff;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:16 160;filter:drop-shadow(0 0 3px #42d3ff) drop-shadow(0 0 6px #168dff);animation:chakramStream 2.8s linear infinite}
.chakram-edge-stream>g{animation:chakramStream 3.4s linear -.8s infinite}
.chakram-core-light circle{fill:#c7edff;filter:blur(2px) drop-shadow(0 0 6px #699aff);animation:chakramCorePulse 2.9s ease-in-out infinite}
.chakram-core-light circle+circle{animation-delay:-1.4s}
.chakram-arc-flash{stroke:#e8ffff;stroke-width:.9;stroke-linejoin:round;filter:drop-shadow(0 0 4px #39caff);animation:arcaneSwordLightning 4.3s linear infinite}
.chakram-residue{fill:#dcfaff;filter:drop-shadow(0 0 2px #45ccff);animation:chakramResidue var(--duration) ease-out var(--delay) infinite}
@keyframes chakramHaloPulse{0%,100%{opacity:.13}50%{opacity:.48}}
@keyframes chakramStream{from{stroke-dashoffset:176;opacity:.2}25%,75%{opacity:.85}to{stroke-dashoffset:0;opacity:.2}}
@keyframes chakramCorePulse{0%,100%{opacity:.15}45%{opacity:.7}65%{opacity:.3}}
@keyframes chakramResidue{0%{opacity:0;translate:0 0}18%{opacity:.9}55%{opacity:.5}100%{opacity:0;translate:var(--dx) var(--dy)}}
@media(prefers-reduced-motion:reduce){.chakram-live-energy{display:none}}