/* A small arcade reward cabinet; artwork is rasterized at 160px, never a smooth pie chart. */
.boss-item-roulette {
  --roulette-diameter: min(352px, 72vw);
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 26px 20px 18px;
  text-align: center;
  position: relative;
  isolation: isolate;
}
.boss-item-roulette::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6px 0 0;
  border: 2px solid #334a5d;
  background: repeating-linear-gradient(0deg, #142433 0 3px, #162837 3px 6px);
  box-shadow:
    inset 0 2px #516476,
    inset 0 -4px #0b1524,
    0 4px #080f1b;
  clip-path: polygon(
    8px 0,
    calc(100% - 8px) 0,
    calc(100% - 8px) 4px,
    100% 4px,
    100% calc(100% - 4px),
    calc(100% - 8px) calc(100% - 4px),
    calc(100% - 8px) 100%,
    8px 100%,
    8px calc(100% - 4px),
    0 calc(100% - 4px),
    0 4px,
    8px 4px
  );
}
.boss-roulette-frame {
  width: var(--roulette-diameter);
  height: var(--roulette-diameter);
  position: relative;
  margin: 6px 0;
}
.boss-roulette-wheel {
  position: absolute;
  inset: 0;
  animation: boss-roulette-spin var(--roulette-spin)
    cubic-bezier(0.12, 0.65, 0.12, 1) var(--roulette-delay) both;
}
.boss-roulette-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 0 #090f1d);
}
.boss-roulette-sector {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px;
  display: grid;
  place-items: center;
  transform: rotate(var(--sector-angle))
    translateY(calc(var(--roulette-diameter) * -0.3))
    rotate(calc(-1 * var(--sector-angle)));
}
.boss-roulette-slot {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  background: #152535;
  border: 2px solid #7b929c;
  box-shadow:
    inset 0 2px #0a1523,
    inset 0 -2px #344d5b,
    0 3px #0a1523;
  clip-path: polygon(
    4px 0,
    calc(100% - 4px) 0,
    calc(100% - 4px) 4px,
    100% 4px,
    100% calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) 100%,
    4px 100%,
    4px calc(100% - 4px),
    0 calc(100% - 4px),
    0 4px,
    4px 4px
  );
  animation: boss-roulette-counterspin var(--roulette-spin)
    cubic-bezier(0.12, 0.65, 0.12, 1) var(--roulette-delay) both;
}
.boss-roulette-slot img {
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 0 #07121e);
}
.boss-roulette-pointer {
  position: absolute;
  z-index: 3;
  left: calc(50% - 12px);
  top: -6px;
  width: 24px;
  height: 28px;
  background: #ffe3a0;
  filter: drop-shadow(0 3px #553c2b);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 35%,
    83% 35%,
    83% 55%,
    66% 55%,
    66% 78%,
    58% 78%,
    58% 100%,
    42% 100%,
    42% 78%,
    34% 78%,
    34% 55%,
    17% 55%,
    17% 35%,
    0 35%
  );
}
.boss-roulette-hub {
  position: absolute;
  left: calc(50% - 24px);
  top: calc(50% - 24px);
  width: 48px;
  height: 48px;
  border: 4px solid #0b1828;
  background: linear-gradient(#d66b60 0 42%, #122536 42% 58%, #d9e4da 58%);
  box-shadow:
    0 3px #08121e,
    inset 2px 2px #ffffff35;
  clip-path: polygon(
    12px 0,
    36px 0,
    36px 4px,
    44px 4px,
    44px 12px,
    48px 12px,
    48px 36px,
    44px 36px,
    44px 44px,
    36px 44px,
    36px 48px,
    12px 48px,
    12px 44px,
    4px 44px,
    4px 36px,
    0 36px,
    0 12px,
    4px 12px,
    4px 4px,
    12px 4px
  );
}
.boss-roulette-hub::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 3px solid #122536;
  background: #f3ead5;
  top: calc(50% - 7px);
  left: calc(50% - 7px);
}
.boss-roulette-spinning,
.boss-roulette-result {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  min-height: 54px;
}
.boss-roulette-spinning {
  display: grid;
  align-content: center;
  color: #b4c9ce;
  font-size: 12px;
  animation: boss-roulette-hide 0s linear
    calc(var(--roulette-spin) + var(--roulette-delay)) both;
}
.boss-roulette-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 4px 22px;
  border: 2px solid #bea56b;
  background: #283b43;
  color: #ffe3a0;
  animation: boss-roulette-reveal 0s linear
    calc(var(--roulette-spin) + var(--roulette-delay)) both;
}
.boss-roulette-result > span:first-child {
  font-size: 12px;
}
.boss-roulette-hint {
  margin: 0;
  color: #91a8b5;
  font-size: 11px;
}
@keyframes boss-roulette-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(var(--roulette-turn));
  }
}
@keyframes boss-roulette-counterspin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(calc(-1 * var(--roulette-turn)));
  }
}
@keyframes boss-roulette-reveal {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}
@keyframes boss-roulette-hide {
  from {
    visibility: visible;
  }
  to {
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .boss-roulette-wheel {
    animation: none;
    transform: rotate(var(--roulette-turn));
  }
  .boss-roulette-slot {
    animation: none;
    transform: rotate(calc(-1 * var(--roulette-turn)));
  }
}
@media (max-width: 420px) {
  .boss-roulette-slot {
    width: 48px;
    height: 48px;
  }
  .boss-roulette-slot .item-icon {
    transform: scale(0.85);
  }
}
/* Completed rewards burst exactly when the saved wheel reaches its result. */
.boss-roulette-celebration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.boss-roulette-confetti {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 6px;
  height: 10px;
  background: var(--spark-color);
  box-shadow: 2px 2px #091524;
  opacity: 0;
  animation: boss-reward-burst 1.35s cubic-bezier(0.16, 0.65, 0.3, 1)
    calc(var(--roulette-spin) + var(--roulette-delay)) both;
}
.is-completed-prize .boss-roulette-result {
  border-color: #ffe38a;
  color: #fff1b1;
  background: #493b24;
  box-shadow:
    0 0 0 2px #916734,
    inset 0 0 14px #ffd66b30;
}
.is-completed-prize .boss-roulette-prize-icon {
  display: grid;
  place-items: center;
  animation: boss-reward-pop 1.4s ease-out
    calc(var(--roulette-spin) + var(--roulette-delay)) both;
}
@keyframes boss-reward-burst {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.4);
  }
  8% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--burst-x), calc(var(--burst-y) + 85px))
      rotate(var(--spark-turn)) scale(0.6);
  }
}
@keyframes boss-reward-pop {
  0% {
    transform: scale(0.5);
    filter: brightness(2.5) drop-shadow(0 0 14px #ffe38a);
  }
  20% {
    transform: scale(1.45);
    filter: brightness(1.7) drop-shadow(0 0 20px #ffe38a);
  }
  45% {
    transform: scale(1.05);
  }
  65% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1.1);
    filter: brightness(1.15) drop-shadow(0 0 7px #ffd568);
  }
}
@media (prefers-reduced-motion: reduce) {
  .boss-roulette-confetti {
    animation: none;
  }
  .is-completed-prize .boss-roulette-prize-icon {
    animation: none;
    filter: drop-shadow(0 0 7px #ffd568);
  }
}