/* One finite, user-triggered sequence. Characters and scenery are separate assets. */
.combat-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fighter {
  position: absolute;
  width: 39%;
  top: 32%;
}
.fighter-blue {
  left: 2%;
  --fighter-color: #2588ff;
}
.fighter-red {
  right: 2%;
  --fighter-color: #f36560;
}
.fighter-unit {
  position: relative;
  transform-origin: 50% 80%;
}
.fighter-sprite {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  transform: scale(1.38);
  transform-origin: 50% 50%;
}
.fighter-sprite img {
  display: block;
  width: 200%;
  max-width: none;
  height: 100%;
}
.fighter-red .fighter-sprite img {
  transform: translateX(-50%);
}
.fighter-shadow {
  position: absolute;
  bottom: 3%;
  left: 25%;
  width: 50%;
  height: 9%;
  border-radius: 50%;
  background: #16382d24;
}
.guard {
  position: absolute;
  top: 26%;
  width: 39%;
  height: auto;
  stroke: #152b42;
  stroke-width: 3;
  opacity: 0;
  filter: drop-shadow(0 0 6px #ffffffc9);
}
.fighter-blue .guard {
  right: -3%;
  transform: rotate(8deg);
}
.fighter-red .guard {
  left: -3%;
  transform: rotate(-8deg);
}
.guard-fill {
  fill: var(--fighter-color);
  fill-opacity: 0.87;
}
.guard path:nth-child(2) {
  stroke: #fff9e9;
  stroke-width: 2;
}
.guard-check {
  stroke: #fff9e9;
  stroke-width: 5;
}
.energy-bolt {
  position: absolute;
  top: 64%;
  left: 38%;
  width: 23%;
  height: 7px;
  border-radius: 50%;
  opacity: 0;
  background: #e9f8ff;
  box-shadow:
    0 0 0 2px #168bff,
    0 0 16px 5px #168bff70;
}
.bolt-red {
  background: #fff3e9;
  box-shadow:
    0 0 0 2px #f36560,
    0 0 16px 5px #f3656070;
}
.clash-burst {
  position: absolute;
  top: 45%;
  left: 38%;
  width: 24%;
  height: auto;
  stroke: #a65b10;
  stroke-width: 2;
  fill: #ffec8d;
  opacity: 0;
}
.clash-ring {
  position: absolute;
  top: 46%;
  left: 41%;
  width: 18%;
  aspect-ratio: 1;
  border: 5px solid #fff4ac;
  border-radius: 50%;
  opacity: 0;
}
.duel-cue {
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  z-index: 2;
  margin: 0;
  padding: 5px 17px;
  border: var(--outline);
  border-radius: 9px;
  background: var(--paper);
  box-shadow: 0 3px 0 #152b4230;
  font-family: var(--display);
  font-size: clamp(17px, 2vw, 27px);
  font-weight: 600;
  white-space: nowrap;
}
[data-phase="idle"] .duel-cue,
[data-phase="complete"] .duel-cue {
  display: none;
}
[data-phase="compare"] .versus,
[data-phase="validate"] .versus {
  opacity: 0;
  animation: none;
}
[data-phase="compare"] .fighter-unit {
  will-change: transform;
}
[data-phase="compare"] .arena-scene {
  transform: scale(1.02);
}
.quest-tag,
.team-tag,
.world-footer {
  z-index: 1;
}
.duel-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.arena-controls {
  min-height: 122px;
}
.skip-duel {
  padding: 3px 6px;
  font-size: 11px;
  min-height: 26px;
}
[data-phase="compare"] .arena-controls,
[data-phase="validate"] .arena-controls {
  min-height: 122px;
}

[data-phase="compare"][data-beat="ready"] .fighter-blue .fighter-unit {
  animation: ready-blue 500ms ease-out both;
}
[data-phase="compare"][data-beat="ready"] .fighter-red .fighter-unit {
  animation: ready-red 500ms ease-out both;
}
[data-beat="blue-attack"] .fighter-blue .fighter-unit {
  animation: blue-lunge 700ms ease-in-out both;
}
[data-beat="blue-attack"] .fighter-red .fighter-unit {
  animation: red-brace 700ms ease-out both;
}
[data-beat="blue-attack"] .fighter-red .guard {
  animation: guard-up 700ms ease-out both;
}
[data-beat="blue-attack"] .bolt-blue {
  animation: shot-blue 700ms ease-out both;
}
[data-beat="red-block"] .fighter-red .guard {
  animation: shield-hit 550ms ease-out both;
}
[data-beat="red-block"] .fighter-red .fighter-unit {
  animation: block-red 550ms ease-out both;
}
[data-beat="red-attack"] .fighter-red .fighter-unit {
  animation: red-lunge 700ms ease-in-out both;
}
[data-beat="red-attack"] .fighter-blue .fighter-unit {
  animation: blue-brace 700ms ease-out both;
}
[data-beat="red-attack"] .fighter-blue .guard {
  animation: guard-up 700ms ease-out both;
}
[data-beat="red-attack"] .bolt-red {
  animation: shot-red 700ms ease-out both;
}
[data-beat="blue-block"] .fighter-blue .guard {
  animation: shield-hit 550ms ease-out both;
}
[data-beat="blue-block"] .fighter-blue .fighter-unit {
  animation: block-blue 550ms ease-out both;
}
[data-beat="clash"] .fighter-blue .fighter-unit {
  animation: clash-blue 850ms ease-in-out both;
}
[data-beat="clash"] .fighter-red .fighter-unit {
  animation: clash-red 850ms ease-in-out both;
}
[data-beat="clash"] .clash-burst {
  animation: impact-star 850ms ease-out both;
}
[data-beat="clash"] .clash-ring {
  animation: impact-ring 850ms ease-out both;
}
[data-beat="recover"] .fighter-unit {
  animation: settle 550ms ease-out both;
}
[data-beat="red-block"] .duel-cue {
  color: #a52b30;
  background: #fff0e8;
}
[data-beat="blue-block"] .duel-cue {
  color: #1258a5;
  background: #e5f4ff;
}
[data-beat="clash"] .duel-cue {
  background: var(--gold);
}
[data-beat="verify"] .duel-cue {
  top: 23%;
  color: #12694e;
}
[data-beat="verify"] .fighter-blue .guard,
[data-beat="verify"] .fighter-red .guard {
  opacity: 0.85;
}

@keyframes ready-blue {
  35% {
    transform: translate(-5%, 4%) rotate(-9deg) scale(0.94, 1.04);
  }
}
@keyframes ready-red {
  35% {
    transform: translate(5%, 4%) rotate(9deg) scale(0.94, 1.04);
  }
}
@keyframes blue-lunge {
  0%,
  100% {
    transform: none;
  }
  18% {
    transform: translateX(-6%) rotate(-8deg);
  }
  48%,
  62% {
    transform: translate(52%, -9%) rotate(13deg) scale(1.06, 0.94);
  }
  80% {
    transform: translate(13%, 2%) rotate(-4deg);
  }
}
@keyframes red-lunge {
  0%,
  100% {
    transform: none;
  }
  18% {
    transform: translateX(6%) rotate(8deg);
  }
  48%,
  62% {
    transform: translate(-52%, -9%) rotate(-13deg) scale(1.06, 0.94);
  }
  80% {
    transform: translate(-13%, 2%) rotate(4deg);
  }
}
@keyframes red-brace {
  40%,
  75% {
    transform: translate(5%, 2%) rotate(9deg) scale(0.92, 1.03);
  }
}
@keyframes blue-brace {
  40%,
  75% {
    transform: translate(-5%, 2%) rotate(-9deg) scale(0.92, 1.03);
  }
}
@keyframes guard-up {
  0%,
  15% {
    opacity: 0;
    scale: 0.55;
  }
  35%,
  85% {
    opacity: 1;
    scale: 1.1;
  }
  100% {
    opacity: 0.95;
    scale: 1;
  }
}
@keyframes shield-hit {
  0%,
  65% {
    opacity: 1;
    scale: 1;
  }
  22% {
    scale: 1.22;
  }
  100% {
    opacity: 0;
    scale: 0.85;
  }
}
@keyframes block-red {
  0% {
    transform: translateX(5%) rotate(9deg);
  }
  25% {
    transform: translateX(10%) rotate(13deg);
  }
  100% {
    transform: none;
  }
}
@keyframes block-blue {
  0% {
    transform: translateX(-5%) rotate(-9deg);
  }
  25% {
    transform: translateX(-10%) rotate(-13deg);
  }
  100% {
    transform: none;
  }
}
@keyframes shot-blue {
  0%,
  28%,
  90%,
  100% {
    opacity: 0;
    transform: translateX(-40%) scaleX(0.15);
  }
  43% {
    opacity: 1;
    transform: translateX(15%) scaleX(0.9);
  }
  70% {
    opacity: 0.6;
    transform: translateX(70%) scaleX(0.3);
  }
}
@keyframes shot-red {
  0%,
  28%,
  90%,
  100% {
    opacity: 0;
    transform: translateX(40%) scaleX(0.15);
  }
  43% {
    opacity: 1;
    transform: translateX(-15%) scaleX(0.9);
  }
  70% {
    opacity: 0.6;
    transform: translateX(-70%) scaleX(0.3);
  }
}
@keyframes clash-blue {
  10% {
    transform: translateX(-5%);
  }
  42%,
  54% {
    transform: translate(32%, -6%) rotate(11deg);
  }
  75% {
    transform: translate(-5%, 4%) rotate(-6deg);
  }
  100% {
    transform: none;
  }
}
@keyframes clash-red {
  10% {
    transform: translateX(5%);
  }
  42%,
  54% {
    transform: translate(-32%, -6%) rotate(-11deg);
  }
  75% {
    transform: translate(5%, 4%) rotate(6deg);
  }
  100% {
    transform: none;
  }
}
@keyframes impact-star {
  0%,
  33% {
    opacity: 0;
    transform: scale(0.15) rotate(-25deg);
  }
  48% {
    opacity: 1;
    transform: scale(1.1) rotate(12deg);
  }
  85%,
  100% {
    opacity: 0;
    transform: scale(1.4) rotate(25deg);
  }
}
@keyframes impact-ring {
  0%,
  36% {
    opacity: 0;
    transform: scale(0.25);
  }
  48% {
    opacity: 1;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}
@keyframes settle {
  40% {
    transform: translateY(-3%) rotate(2deg);
  }
  100% {
    transform: none;
  }
}

/* The reward plays once and stays readable, with no perpetual glitter loop. */
.reward {
  background: #e8f5f4ed;
  overflow: hidden;
  animation: reward-veil 260ms ease-out both;
}
.reward-rays {
  position: absolute;
  width: 88%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    #ffce5e42 0deg 12deg,
    transparent 12deg 30deg
  );
  opacity: 0.7;
  animation: reward-rays 1400ms cubic-bezier(0.16, 1, 0.3, 1) both;
  mask-image: radial-gradient(circle, #000 15%, transparent 69%);
}
.reward img {
  position: relative;
  z-index: 1;
  animation: reward-book 950ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.reward-ribbon {
  z-index: 3;
  animation: reward-banner 500ms 350ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.reward-confetti {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.reward-confetti i {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 9px;
  height: 16px;
  background: var(--gold);
  border: 1px solid #152b4250;
  border-radius: 3px;
  opacity: 0;
  animation: reward-confetti 1550ms var(--delay) ease-out both;
}
.reward-confetti i:nth-child(3n) {
  background: #ee6960;
  width: 12px;
  height: 12px;
}
.reward-confetti i:nth-child(3n + 1) {
  background: #2786ea;
}
.reward-confetti i:nth-child(4n) {
  border-radius: 50%;
  width: 9px;
  height: 9px;
}
@keyframes reward-veil {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes reward-book {
  0% {
    opacity: 0;
    transform: translateY(28%) scale(0.2) rotate(-20deg);
  }
  60% {
    opacity: 1;
    transform: translateY(-3%) scale(1.08) rotate(5deg);
  }
  82% {
    transform: translateY(1%) scale(0.97) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes reward-banner {
  from {
    opacity: 0;
    transform: translateY(22px) rotate(-3deg) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-3deg) scale(1);
  }
}
@keyframes reward-rays {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-35deg);
  }
  to {
    opacity: 0.7;
    transform: scale(1) rotate(12deg);
  }
}
@keyframes reward-confetti {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg) scale(0.3);
  }
  12% {
    opacity: 1;
  }
  70% {
    opacity: 1;
    transform: translate(
        calc(var(--dx) * var(--party-scale, 1)),
        calc(var(--dy) * var(--party-scale, 1))
      )
      rotate(var(--r)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(
        calc(var(--dx) * var(--party-scale, 1)),
        calc((var(--dy) + 90px) * var(--party-scale, 1))
      )
      rotate(calc(var(--r) + 70deg)) scale(0.7);
  }
}
@media (max-width: 480px) {
  .fighter {
    top: 35%;
    width: 43%;
  }
  .fighter-blue {
    left: -1%;
  }
  .fighter-red {
    right: -1%;
  }
  .duel-cue {
    top: 27%;
    font-size: 18px;
    padding: 3px 12px;
  }
  .reward {
    --party-scale: 0.66;
  }
  .reward-confetti i {
    width: 7px;
    height: 12px;
  }
  .duel-actions {
    gap: 5px;
  }
  .skip-duel {
    max-width: 125px;
    font-size: 11px;
  }
}

/* Preference changes also finish the logical sequence; these selectors remove spatial effects. */
[data-reward-motion="false"] .reward,
[data-reward-motion="false"] .reward * {
  animation: none !important;
  transition: none !important;
}
[data-reward-motion="false"] .reward-rays,
[data-reward-motion="false"] .reward-confetti {
  display: none;
}
[data-reduced-motion="true"] .combat-layer *,
[data-reduced-motion="true"] .reward,
[data-reduced-motion="true"] .reward * {
  animation: none !important;
  transition: none !important;
}
[data-reduced-motion="true"] .reward-rays,
[data-reduced-motion="true"] .reward-confetti {
  display: none;
}
[data-reduced-motion="true"] .fighter-unit {
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .combat-layer *,
  .reward,
  .reward * {
    animation: none !important;
    transition: none !important;
  }
  .reward-rays,
  .reward-confetti {
    display: none;
  }
  .fighter-unit {
    transform: none !important;
  }
  .arena-scene {
    transform: none !important;
    filter: none !important;
  }
}