.skill-spectacle {
  position: absolute;
  z-index: 55;
  pointer-events: none;
  isolation: isolate;
  color: #fff8df;
  --skill-color: #e66d62;
}

.skill-spectacle[hidden] { display: none; }

.skill-spectacle[data-state="full"],
.skill-spectacle[data-state="repeat"] {
  left: 6%;
  top: 5.5%;
  width: 88%;
  height: 55%;
}

.skill-spectacle[data-state="repeat"] {
  left: 11%;
  top: 7%;
  width: 78%;
  height: 44%;
}

.skill-spectacle__stage {
  position: absolute;
  inset: 0;
  overflow: visible;
  filter: drop-shadow(0 7px 9px rgb(16 8 34 / 48%));
  transform-origin: 50% 50%;
}

.skill-spectacle__stage::before {
  content: "";
  position: absolute;
  inset: 4% -2% 6%;
  z-index: -4;
  background:
    linear-gradient(106deg, transparent 0%, rgb(13 8 25 / 91%) 8% 27%, color-mix(in srgb, var(--skill-color) 46%, #21132f) 51%, rgb(20 12 35 / 44%) 77%, transparent 98%),
    linear-gradient(163deg, transparent 7%, rgb(255 242 205 / 12%) 46%, transparent 76%);
  box-shadow: inset 0 0 24px rgb(255 235 200 / 7%);
  clip-path: polygon(0 24%, 7% 12%, 21% 17%, 34% 4%, 52% 13%, 68% 0, 86% 12%, 100% 7%, 94% 31%, 100% 54%, 89% 70%, 96% 92%, 72% 84%, 54% 100%, 34% 89%, 14% 98%, 17% 74%, 2% 64%, 9% 43%);
}

.skill-spectacle__wash,
.skill-spectacle__ink,
.skill-spectacle__ring,
.skill-spectacle__slash {
  position: absolute;
  display: block;
}

.skill-spectacle__wash {
  z-index: -3;
  inset: 8% 1% 8% -2%;
  opacity: .58;
  background:
    radial-gradient(ellipse at 32% 48%, color-mix(in srgb, var(--skill-color) 70%, transparent) 0 8%, transparent 48%),
    linear-gradient(112deg, transparent 5%, rgb(255 244 212 / 15%) 47%, transparent 72%);
  clip-path: polygon(0 20%, 17% 7%, 40% 14%, 64% 0, 100% 28%, 88% 54%, 99% 83%, 60% 74%, 38% 100%, 15% 77%);
}

.skill-spectacle__ink {
  z-index: -2;
  left: -1%;
  top: 14%;
  width: 41%;
  height: 70%;
  opacity: .86;
  background: linear-gradient(102deg, rgb(9 5 18 / 92%), rgb(20 11 29 / 82%) 62%, transparent);
  clip-path: polygon(2% 17%, 15% 8%, 35% 12%, 45% 2%, 62% 17%, 88% 9%, 100% 30%, 89% 45%, 98% 64%, 73% 72%, 64% 94%, 41% 83%, 18% 100%, 11% 72%, 0 60%, 8% 39%);
}

.skill-spectacle__portrait,
.skill-spectacle__weapon {
  position: absolute;
  z-index: 1;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.skill-spectacle__portrait {
  filter: drop-shadow(0 3px 8px rgb(8 5 19 / 55%));
  transform-origin: 54% 55%;
}

.skill-spectacle__weapon {
  z-index: 3;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--skill-color) 70%, white));
  transform-origin: 50% 50%;
}

.skill-spectacle[data-hero="character_a"] .skill-spectacle__portrait {
  right: -10%;
  bottom: -13%;
  width: 108%;
  height: 108%;
  object-position: right bottom;
}

.skill-spectacle[data-hero="character_a"] .skill-spectacle__weapon {
  right: -10%;
  bottom: -13%;
  width: 108%;
  height: 108%;
  object-position: right bottom;
  clip-path: polygon(0 52%, 100% 45%, 100% 100%, 0 100%);
}

.skill-spectacle[data-hero="character_b"] .skill-spectacle__portrait {
  left: -10%;
  bottom: -14%;
  width: 108%;
  height: 108%;
  object-position: left bottom;
}

.skill-spectacle[data-hero="character_b"] .skill-spectacle__weapon {
  left: -10%;
  bottom: -14%;
  width: 108%;
  height: 108%;
  object-position: left bottom;
  clip-path: polygon(0 0, 100% 0, 100% 21%, 64% 30%, 25% 25%, 0 37%);
}

.skill-spectacle[data-hero="character_c"] .skill-spectacle__portrait {
  left: -12%;
  bottom: -15%;
  width: 110%;
  height: 110%;
  object-position: left bottom;
}

.skill-spectacle[data-hero="character_c"] .skill-spectacle__weapon {
  left: -12%;
  bottom: -15%;
  width: 110%;
  height: 110%;
  object-position: left bottom;
  clip-path: polygon(0 31%, 64% 39%, 72% 100%, 0 100%);
  transform-origin: 18% 75%;
}

.skill-spectacle__slash {
  z-index: 4;
  left: -10%;
  top: 57%;
  width: 124%;
  height: 3px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #fff8df 18% 74%, transparent);
  box-shadow: 0 0 7px #fff, 0 0 16px var(--skill-color), 0 0 26px var(--skill-color);
  transform: rotate(-16deg) scaleX(.25);
}

.skill-spectacle[data-hero="character_b"] .skill-spectacle__slash,
.skill-spectacle[data-hero="character_c"] .skill-spectacle__slash { display: none; }

.skill-spectacle__ring {
  z-index: 2;
  right: 3%;
  top: 10%;
  width: 68%;
  aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, var(--skill-color) 75%, white);
  border-left-color: transparent;
  border-radius: 50%;
  opacity: 0;
  box-shadow: inset 0 0 11px color-mix(in srgb, var(--skill-color) 45%, transparent), 0 0 13px color-mix(in srgb, var(--skill-color) 55%, transparent);
}

.skill-spectacle[data-hero="character_a"] .skill-spectacle__ring { display: none; }

.skill-spectacle[data-hero="character_c"] .skill-spectacle__ring {
  right: 2%;
  top: 19%;
  width: 54%;
  border-radius: 10%;
  transform: rotate(45deg) scale(.55);
}

.skill-spectacle__motif {
  position: absolute;
  z-index: 5;
  inset: 0;
}

.skill-spectacle__motif i {
  position: absolute;
  display: block;
  width: 13px;
  height: 13px;
  border: 2px solid #fff8df;
  border-radius: 50%;
  opacity: 0;
  background: var(--skill-color);
  box-shadow: inset -3px -3px 4px rgb(38 20 52 / 35%), 0 0 10px var(--skill-color);
}

.skill-spectacle[data-hero="character_a"] .skill-spectacle__motif i:nth-child(1) { left: 26%; top: 72%; }
.skill-spectacle[data-hero="character_a"] .skill-spectacle__motif i:nth-child(2) { left: 38%; top: 65%; }
.skill-spectacle[data-hero="character_a"] .skill-spectacle__motif i:nth-child(3) { left: 50%; top: 58%; }
.skill-spectacle[data-hero="character_a"] .skill-spectacle__motif i:nth-child(4) { left: 62%; top: 51%; }

.skill-spectacle[data-hero="character_b"] .skill-spectacle__motif i {
  width: 22px;
  height: 22px;
  border-radius: 50% 50% 45% 45%;
  background: rgb(33 54 78 / 84%);
}
.skill-spectacle[data-hero="character_b"] .skill-spectacle__motif i:nth-child(1) { right: 8%; top: 25%; }
.skill-spectacle[data-hero="character_b"] .skill-spectacle__motif i:nth-child(2) { right: 3%; top: 47%; }
.skill-spectacle[data-hero="character_b"] .skill-spectacle__motif i:nth-child(3) { right: 13%; top: 68%; }
.skill-spectacle[data-hero="character_b"] .skill-spectacle__motif i:nth-child(4) { display: none; }

.skill-spectacle[data-hero="character_c"] .skill-spectacle__motif i {
  width: 10px;
  height: 10px;
  border-color: #fff0ad;
  background: #83bd84;
}
.skill-spectacle[data-hero="character_c"] .skill-spectacle__motif i:nth-child(1) { right: 22%; top: 27%; }
.skill-spectacle[data-hero="character_c"] .skill-spectacle__motif i:nth-child(2) { right: 13%; top: 27%; }
.skill-spectacle[data-hero="character_c"] .skill-spectacle__motif i:nth-child(3) { right: 22%; top: 61%; }
.skill-spectacle[data-hero="character_c"] .skill-spectacle__motif i:nth-child(4) { right: 13%; top: 61%; }

.skill-spectacle__copy {
  position: absolute;
  z-index: 7;
  left: 3%;
  top: 16%;
  width: 34%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: #fff8df;
  text-shadow: 0 2px 2px #140b23, 0 0 8px #140b23;
}

.skill-spectacle__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10% -15%;
  background: radial-gradient(ellipse at 40% 50%, rgb(8 5 18 / 89%) 0 31%, rgb(8 5 18 / 52%) 48%, transparent 73%);
  clip-path: polygon(4% 9%, 28% 0, 58% 11%, 83% 3%, 100% 26%, 87% 49%, 98% 78%, 71% 89%, 43% 100%, 20% 86%, 0 64%, 12% 39%);
}

.skill-spectacle[data-hero="character_b"] .skill-spectacle__copy,
.skill-spectacle[data-hero="character_c"] .skill-spectacle__copy {
  left: auto;
  right: 2%;
  align-items: flex-end;
  text-align: right;
}

.skill-spectacle__copy > small {
  max-width: 100%;
  overflow: hidden;
  color: color-mix(in srgb, var(--skill-color) 40%, #fff7d8);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-spectacle__copy > strong {
  display: grid;
  margin: 3px 0 4px;
  color: #fffbea;
  font-family: "STKaiti", "KaiTi", "FangSong", serif;
  font-size: 43px;
  font-weight: 900;
  line-height: .92;
  -webkit-text-stroke: .9px #fff1bd;
  paint-order: stroke fill;
  text-shadow: 2px 2px 0 #17091f, -1px -1px 0 #17091f, 0 0 5px #fff2cf, 0 0 13px var(--skill-color);
}

.skill-spectacle__copy > strong span:last-child { margin-left: 13px; }

.skill-spectacle__copy > p {
  max-width: 142px;
  margin: 0;
  color: #ffeeb7;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.skill-spectacle__compact { display: none; }

.skill-spectacle[data-state="compact"] {
  left: 4%;
  top: 5.5%;
  width: min(72%, 330px);
  height: 54px;
}

.skill-spectacle[data-state="compact"][data-placement="button"] {
  left: 50%;
  top: auto;
  bottom: 13%;
  width: min(70%, 320px);
  transform: translateX(-50%);
}

.skill-spectacle[data-state="compact"] .skill-spectacle__stage,
.skill-spectacle[data-state="compact"] .skill-spectacle__copy {
  display: none;
}

.skill-spectacle[data-state="compact"] .skill-spectacle__compact {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 6px;
  border-left: 3px solid var(--skill-color);
  background: linear-gradient(94deg, rgb(21 13 37 / 95%), rgb(40 24 55 / 91%) 73%, rgb(18 12 31 / 70%));
  box-shadow: 0 4px 12px rgb(12 6 24 / 38%), inset 0 0 0 1px rgb(255 242 207 / 12%);
  clip-path: polygon(0 0, 97% 0, 100% 78%, 4% 100%);
}

.skill-spectacle__compact > img {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid color-mix(in srgb, var(--skill-color) 72%, #fff6cc);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 8px color-mix(in srgb, var(--skill-color) 60%, transparent);
}

.skill-spectacle__compact > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.skill-spectacle__compact strong {
  color: #fff4cf;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 17px;
  line-height: 1.1;
  white-space: nowrap;
}

.skill-spectacle__compact small {
  overflow: hidden;
  color: #f2dfba;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: normal;
}

.skill-spectacle.is-entering[data-state="full"] .skill-spectacle__stage { animation: skill-stage-full 800ms cubic-bezier(.16, .78, .18, 1) both; }
.skill-spectacle.is-entering[data-state="repeat"] .skill-spectacle__stage { animation: skill-stage-repeat 420ms cubic-bezier(.18, .75, .2, 1) both; }
.skill-spectacle.is-entering[data-state="full"] .skill-spectacle__copy,
.skill-spectacle.is-entering[data-state="repeat"] .skill-spectacle__copy { animation: skill-copy-in 230ms 65ms ease-out both; }

.skill-spectacle.is-entering[data-hero="character_a"] .skill-spectacle__portrait { animation: skill-sword-portrait 650ms cubic-bezier(.12, .76, .2, 1) both; }
.skill-spectacle.is-entering[data-hero="character_a"] .skill-spectacle__weapon { animation: skill-sword-weapon 720ms cubic-bezier(.12, .82, .25, 1) both; }
.skill-spectacle.is-entering[data-hero="character_a"] .skill-spectacle__slash { animation: skill-sword-slash 680ms 70ms ease-out both; }
.skill-spectacle.is-entering[data-hero="character_b"] .skill-spectacle__portrait { animation: skill-ribbon-portrait 700ms cubic-bezier(.16, .72, .2, 1) both; }
.skill-spectacle.is-entering[data-hero="character_b"] .skill-spectacle__weapon { animation: skill-ribbon-loop 760ms cubic-bezier(.2, .78, .2, 1) both; }
.skill-spectacle.is-entering[data-hero="character_b"] .skill-spectacle__ring { animation: skill-ring-open 700ms 80ms ease-out both; }
.skill-spectacle.is-entering[data-hero="character_c"] .skill-spectacle__portrait { animation: skill-fan-portrait 680ms cubic-bezier(.16, .72, .2, 1) both; }
.skill-spectacle.is-entering[data-hero="character_c"] .skill-spectacle__weapon { animation: skill-fan-open 700ms cubic-bezier(.14, .78, .2, 1) both; }
.skill-spectacle.is-entering[data-hero="character_c"] .skill-spectacle__ring { animation: skill-array-open 720ms 80ms ease-out both; }
.skill-spectacle.is-entering .skill-spectacle__motif i { animation: skill-motif-arrive 520ms ease-out both; }
.skill-spectacle.is-entering .skill-spectacle__motif i:nth-child(2) { animation-delay: 70ms; }
.skill-spectacle.is-entering .skill-spectacle__motif i:nth-child(3) { animation-delay: 130ms; }
.skill-spectacle.is-entering .skill-spectacle__motif i:nth-child(4) { animation-delay: 190ms; }
.skill-spectacle.is-entering[data-state="compact"] .skill-spectacle__compact { animation: skill-compact-in 260ms ease-out both; }
.skill-spectacle.is-entering[data-variant="auto"] .skill-spectacle__compact { animation-duration: 190ms; }

@keyframes skill-stage-full {
  0% { opacity: 0; transform: translateX(-8%) skewX(-5deg) scaleX(.55); }
  28% { opacity: 1; transform: translateX(0) skewX(0) scaleX(1); }
  72%, 100% { opacity: 1; transform: translateX(0) scaleX(1); }
}

@keyframes skill-stage-repeat {
  0% { opacity: 0; transform: translateX(-14%) scaleX(.75); }
  42%, 100% { opacity: 1; transform: translateX(0) scaleX(1); }
}

@keyframes skill-copy-in {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to { opacity: 1; transform: none; }
}

@keyframes skill-sword-portrait {
  from { opacity: 0; transform: translateX(14%) scale(1.06); }
  42%, to { opacity: 1; transform: none; }
}

@keyframes skill-sword-weapon {
  from { opacity: 0; transform: translate(-18%, 16%) scale(.72); }
  48%, to { opacity: .55; transform: none; }
}

@keyframes skill-sword-slash {
  0%, 16% { opacity: 0; transform: rotate(-16deg) scaleX(.18); }
  34% { opacity: 1; transform: rotate(-16deg) scaleX(1); }
  72%, 100% { opacity: .16; transform: rotate(-16deg) scaleX(1.08); }
}

@keyframes skill-ribbon-portrait {
  from { opacity: 0; transform: translateX(-10%) scale(1.04); }
  45%, to { opacity: 1; transform: none; }
}

@keyframes skill-ribbon-loop {
  from { opacity: 0; transform: rotate(-16deg) scale(.72); }
  52%, to { opacity: .5; transform: rotate(1deg) scale(1.02); }
}

@keyframes skill-ring-open {
  from { opacity: 0; transform: rotate(-80deg) scale(.45); }
  52%, to { opacity: .8; transform: rotate(12deg) scale(1); }
}

@keyframes skill-fan-portrait {
  from { opacity: 0; transform: translateX(-9%) translateY(5%) scale(1.04); }
  44%, to { opacity: 1; transform: none; }
}

@keyframes skill-fan-open {
  from { opacity: 0; transform: rotate(-18deg) scaleX(.08); }
  48%, to { opacity: .48; transform: rotate(0) scaleX(1); }
}

@keyframes skill-array-open {
  from { opacity: 0; transform: rotate(15deg) scale(.35); }
  52%, to { opacity: .76; transform: rotate(45deg) scale(1); }
}

@keyframes skill-motif-arrive {
  from { opacity: 0; transform: translate(-14px, 18px) scale(.35); }
  62%, to { opacity: .92; transform: none; }
}

@keyframes skill-compact-in {
  from { opacity: 0; transform: translateX(-12px) scaleX(.92); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 360px) {
  .skill-spectacle__copy > strong { font-size: 36px; }
  .skill-spectacle__copy { width: 35%; }
  .skill-spectacle__copy > p { max-width: 112px; font-size: 9px; }
  .skill-spectacle__copy > small { font-size: 9px; }
  .skill-spectacle__compact strong { font-size: 15px; }
  .skill-spectacle__compact small { font-size: 11px; }
}

/* Keep the physical weapon in the original portrait; only energy motifs overlay it. */
.skill-spectacle .skill-spectacle__weapon { display: none; }
.skill-spectacle[data-hero="character_a"] .skill-spectacle__portrait {
  right: -3%; bottom: -5%; width: 100%; height: 100%;
}
.skill-spectacle[data-hero="character_b"] .skill-spectacle__portrait,
.skill-spectacle[data-hero="character_c"] .skill-spectacle__portrait {
  left: -3%; bottom: -5%; width: 100%; height: 100%;
}
.skill-spectacle__portrait {
  mask-image: linear-gradient(to bottom, #000 0 88%, transparent 100%);
}
.skill-spectacle__stage::before,
.skill-spectacle__ink,
.skill-spectacle__copy::before {
  clip-path: none;
  mask: var(--skill-ink, url('../assets/effects/battle-feel/ink.webp')) center / 100% 100% no-repeat;
}
.skill-spectacle__stage::before { inset: -8% -3%; opacity: .72; }
.skill-spectacle__wash { clip-path: none; opacity: .25; }
.skill-spectacle__energy {
  position: absolute; z-index: 2; left: 5%; top: 28%; width: 90%; height: 67%;
  object-fit: contain; pointer-events: none; opacity: .65;
  animation: skill-energy-arrive 650ms ease-out both;
}
.skill-spectacle[data-hero="character_b"] .skill-spectacle__energy {
  left: 0; top: 10%; width: 70%; height: 88%; opacity: .45;
}
.skill-spectacle[data-hero="character_c"] .skill-spectacle__energy {
  left: 0; top: 40%; width: 76%; height: 60%; opacity: .55;
}
.skill-spectacle__slash, .skill-spectacle__ring { visibility: hidden; }
@keyframes skill-energy-arrive {
  from { transform: scale(.75) translateY(8px); opacity: 0; }
  48% { transform: scale(1); opacity: .75; }
  to { transform: scale(1.02); opacity: .35; }
}
.skill-spectacle.is-exiting .skill-spectacle__stage,
.skill-spectacle.is-exiting .skill-spectacle__copy {
  animation: skill-natural-exit 150ms ease-in both !important;
}
@keyframes skill-natural-exit {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(5px) scale(.98); }
}

@media (max-height: 560px) {
  .skill-spectacle[data-state="full"],
  .skill-spectacle[data-state="repeat"] {
    left: 4%;
    top: 5.5%;
    width: 72%;
    height: 54px;
  }
}

/* Formal Moon / Osmanthus / Ink themes. The old physical weapon layer stays disabled. */
.skill-spectacle[data-hero="character_a"] .skill-spectacle__stage::before {
  background:linear-gradient(108deg,transparent 0%,rgb(19 37 67 / 86%) 9% 29%,rgb(83 153 196 / 78%) 55%,rgb(35 54 91 / 34%) 82%,transparent 98%);
}
.skill-spectacle[data-hero="character_b"] .skill-spectacle__stage::before {
  background:linear-gradient(108deg,transparent 0%,rgb(70 38 29 / 82%) 9% 31%,rgb(193 119 57 / 74%) 55%,rgb(88 50 33 / 30%) 82%,transparent 98%);
}
.skill-spectacle[data-hero="character_c"] .skill-spectacle__stage::before {
  background:linear-gradient(108deg,transparent 0%,rgb(35 25 61 / 86%) 9% 31%,rgb(111 78 157 / 76%) 55%,rgb(49 36 77 / 32%) 82%,transparent 98%);
}
.skill-spectacle[data-hero="character_a"] .skill-spectacle__portrait { right:-1%; bottom:-3%; width:96%; height:103%; }
.skill-spectacle[data-hero="character_b"] .skill-spectacle__portrait { left:-1%; bottom:-4%; width:96%; height:104%; }
.skill-spectacle[data-hero="character_c"] .skill-spectacle__portrait { left:-2%; bottom:-4%; width:98%; height:104%; }
.skill-spectacle[data-hero="character_a"] .skill-spectacle__energy { left:1%; top:9%; width:96%; height:86%; opacity:.62; }
.skill-spectacle[data-hero="character_b"] .skill-spectacle__energy { left:1%; top:13%; width:72%; height:82%; opacity:.58; }
.skill-spectacle[data-hero="character_c"] .skill-spectacle__energy { left:0; top:20%; width:80%; height:72%; opacity:.62; }
.skill-spectacle[data-hero="character_b"] .skill-spectacle__motif i {
  width:18px;
  height:12px;
  border-radius:70% 15% 70% 15%;
  border-color:#fff0b8;
  background:#efad51;
}
.skill-spectacle[data-hero="character_c"] .skill-spectacle__motif i {
  width:25px;
  height:4px;
  border:0;
  border-radius:999px;
  background:#eadcff;
  box-shadow:0 0 9px #b897e8;
}

.bubble-reduced-motion .skill-spectacle *,
.bubble-reduced-motion .skill-spectacle *::before,
.bubble-reduced-motion .skill-spectacle *::after {
  animation: none !important;
  transition: none !important;
}