:root {
  --ink: #08080a;
  --panel: #101014;
  --panel2: #16161b;
  --line: #2a2a31;
  --red: #e4032e;
  --red-hot: #ff2b3d;
  --red-deep: #8f0f1f;
  --white: #f4f4f5;
  --muted: #9a9aa3;
  --glow: rgba(255, 43, 61, .55);
  --class-light: #37d8f0;
  --class-medium: #ffb800;
  --class-heavy: #ff3b5b;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ink);
  min-width: 320px;
  overflow-x: clip;
}

body.arena {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--white);
  font-family: "Chakra Petch", sans-serif;
  background-color: var(--ink);
  background-image:
    radial-gradient(circle at 50% 20%, rgba(228, 3, 46, .18), transparent 32vw),
    radial-gradient(circle at 50% 58%, transparent 0, rgba(0, 0, 0, .72) 72%),
    linear-gradient(180deg, rgba(5, 5, 7, .88) 0%, rgba(5, 5, 7, .55) 30%, rgba(5, 5, 7, .62) 62%, rgba(4, 4, 6, .94) 100%),
    url("/images/v2/hero-1920.webp");
  background-attachment: fixed, fixed, fixed, fixed;
  background-size: cover, cover, cover, cover;
  background-position: center bottom;
}

body.arena::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .045;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .24) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255, 43, 61, .22) 0 1px, transparent 1px 19px);
  mix-blend-mode: screen;
}

body.arena::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 46%, rgba(228, 3, 46, .055) 46.2% 46.7%, transparent 47%),
    linear-gradient(65deg, transparent 0 62%, rgba(255, 43, 61, .04) 62.2% 62.8%, transparent 63%);
}

body.arena button,
body.arena a {
  -webkit-tap-highlight-color: transparent;
}

body.arena button:focus-visible,
body.arena a:focus-visible {
  outline: 2px solid var(--red-hot);
  outline-offset: 2px;
}

body.arena .arena-shell {
  width: min(1280px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 24px 0 10px;
  position: relative;
  z-index: 1;
}

.arena-embers {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.arena-embers span {
  position: absolute;
  left: var(--x);
  bottom: -6vh;
  width: var(--s);
  height: var(--s);
  background: var(--red-hot);
  box-shadow: 0 0 22px rgba(255, 43, 61, .8);
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(45deg);
  animation: arena-ember-drift var(--d) linear infinite;
  animation-delay: var(--delay);
}

.arena-embers.is-hot span {
  animation-duration: calc(var(--d) * .58);
}

.arena-embers span:nth-child(1) { --x: 7%; --s: 3px; --d: 18s; --delay: -3s; }
.arena-embers span:nth-child(2) { --x: 15%; --s: 2px; --d: 21s; --delay: -8s; }
.arena-embers span:nth-child(3) { --x: 24%; --s: 4px; --d: 19s; --delay: -12s; }
.arena-embers span:nth-child(4) { --x: 33%; --s: 2px; --d: 17s; --delay: -5s; }
.arena-embers span:nth-child(5) { --x: 42%; --s: 3px; --d: 23s; --delay: -16s; }
.arena-embers span:nth-child(6) { --x: 51%; --s: 2px; --d: 20s; --delay: -7s; }
.arena-embers span:nth-child(7) { --x: 58%; --s: 5px; --d: 24s; --delay: -18s; }
.arena-embers span:nth-child(8) { --x: 66%; --s: 3px; --d: 18s; --delay: -10s; }
.arena-embers span:nth-child(9) { --x: 74%; --s: 2px; --d: 22s; --delay: -14s; }
.arena-embers span:nth-child(10) { --x: 81%; --s: 4px; --d: 19s; --delay: -6s; }
.arena-embers span:nth-child(11) { --x: 89%; --s: 2px; --d: 25s; --delay: -20s; }
.arena-embers span:nth-child(12) { --x: 96%; --s: 3px; --d: 21s; --delay: -11s; }

@keyframes arena-ember-drift {
  0% {
    opacity: 0;
    transform: translate3d(-10px, 0, 0) rotate(45deg) scale(.7);
  }
  14% {
    opacity: .55;
  }
  74% {
    opacity: .34;
  }
  100% {
    opacity: 0;
    transform: translate3d(32px, -112vh, 0) rotate(220deg) scale(1.2);
  }
}


/* The logo is the page's semantic <h1> (SEO). Strip default heading margins
   so the wrapper is layout-invisible; the img below owns all spacing. */
.arena-logo-heading {
  margin: 0;
  line-height: 0;
}

.arena-logo {
  display: block;
  width: min(520px, 80vw);
  height: auto;
  margin: 2px auto 10px;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .6));
  user-select: none;
  -webkit-user-drag: none;
}

.tagline-strip {
  margin: 6px auto 18px;
  color: var(--white);
  font-family: "Chakra Petch", sans-serif;
  font-size: clamp(10px, 1.7vw, 13px);
  font-weight: 600;
  letter-spacing: .35em;
  text-align: center;
  text-transform: uppercase;
}

.tagline-strip::before,
.tagline-strip::after {
  content: "///";
  display: inline-block;
  margin: 0 16px;
  color: var(--red);
  font-style: italic;
  letter-spacing: .05em;
  text-shadow: 0 0 14px var(--glow);
}

/* Holds the class banner plus its two cycle arrows. Banner-width and
   positioned so the arrows can flank the banner without being clipped by the
   banner's own clip-path. */
.class-selector {
  position: relative;
  width: min(860px, 92vw);
  margin: 0 auto 24px;
}

.class-banner {
  width: 100%;
  min-height: 112px;
  margin: 0;
  position: relative;
  display: grid;
  place-items: center;
  padding: 16px 34px 15px;
  isolation: isolate;
  clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
  border: 1px solid #33333a;
  background:
    linear-gradient(90deg, rgba(228, 3, 46, .16), transparent 18%, transparent 82%, rgba(228, 3, 46, .16)),
    linear-gradient(180deg, rgba(255, 255, 255, .055), transparent 28%),
    linear-gradient(135deg, rgba(22, 22, 27, .96), rgba(10, 10, 13, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 18px 60px rgba(0, 0, 0, .46),
    0 0 36px rgba(228, 3, 46, .15);
}

.class-banner::before,
.class-banner::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 43, 61, .82), transparent);
  z-index: -1;
}

.class-banner::before {
  top: 0;
}

.class-banner::after {
  bottom: 0;
}

.class-banner__shock {
  position: absolute;
  inset: 5px;
  border: 1px solid var(--red-hot);
  opacity: 0;
  clip-path: inherit;
  pointer-events: none;
}

/* Interior flash fired by the engine when the final class lands.
   z-index -1 inside the banner's isolated stacking context: above the
   box background, below the title text. */
.class-banner__flash {
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: inherit;
  background: radial-gradient(ellipse 72% 110% at 50% 52%,
    rgba(255, 255, 255, .92),
    rgba(255, 128, 138, .6) 38%,
    rgba(228, 3, 46, .32) 62%,
    transparent 80%);
  opacity: 0;
  pointer-events: none;
}

.class-banner__title {
  margin: 0;
  color: rgba(244, 244, 245, .88);
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(56px, 9vw, 96px);
  font-style: italic;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: .86;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 24px var(--glow);
  transform-origin: 50% 60%;
}

.class-banner__caption {
  margin: 6px 0 0;
  color: var(--muted);
  font-family: "Chakra Petch", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-align: center;
  text-transform: uppercase;
}

.class-banner[data-class="Light"] {
  --class-accent: var(--class-light);
}

.class-banner[data-class="Medium"] {
  --class-accent: var(--class-medium);
}

.class-banner[data-class="Heavy"] {
  --class-accent: var(--class-heavy);
}

.class-banner[data-class="Light"] .class-banner__title,
.class-banner[data-class="Medium"] .class-banner__title,
.class-banner[data-class="Heavy"] .class-banner__title {
  color: var(--white);
}

.class-banner[data-class="Light"] .class-banner__caption,
.class-banner[data-class="Medium"] .class-banner__caption,
.class-banner[data-class="Heavy"] .class-banner__caption {
  color: rgba(244, 244, 245, .62);
}

.class-banner[data-class="Light"]::after,
.class-banner[data-class="Medium"]::after,
.class-banner[data-class="Heavy"]::after {
  height: 3px;
  left: 28%;
  right: 28%;
  background: linear-gradient(90deg, transparent, var(--class-accent), transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--class-accent) 70%, transparent);
}

.machine {
  --machine-pad: 28px;
  position: relative;
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: calc(var(--machine-pad) + 6px) var(--machine-pad) var(--machine-pad);
  isolation: isolate;
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
  border: 1px solid #303038;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 22%),
    linear-gradient(120deg, rgba(228, 3, 46, .11), transparent 24%, transparent 76%, rgba(228, 3, 46, .08)),
    rgba(16, 16, 20, .96);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .025),
    0 24px 90px rgba(0, 0, 0, .58),
    0 0 52px rgba(228, 3, 46, .15);
  transition: filter .24s ease, box-shadow .24s ease;
}

.machine::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 6px;
  background: repeating-linear-gradient(45deg, var(--red) 0 11px, #19070b 11px 22px);
  box-shadow: 0 0 20px rgba(228, 3, 46, .62);
}

.machine::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgba(255, 43, 61, .05) 49.8% 50.2%, transparent 50.2%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 16px);
  opacity: .5;
  clip-path: inherit;
}

.machine.dimmed {
  filter: brightness(.7);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .018),
    0 18px 70px rgba(0, 0, 0, .7),
    0 0 24px rgba(228, 3, 46, .08);
}

.machine-corner {
  position: absolute;
  z-index: 4;
  width: 42px;
  height: 42px;
  border-color: var(--red-hot);
  filter: drop-shadow(0 0 10px rgba(255, 43, 61, .6));
  pointer-events: none;
}

.machine-corner--tl {
  top: 15px;
  left: 15px;
  border-top: 3px solid;
  border-left: 3px solid;
}

.machine-corner--tr {
  top: 15px;
  right: 15px;
  border-top: 3px solid;
  border-right: 3px solid;
}

.machine-corner--bl {
  bottom: 15px;
  left: 15px;
  border-bottom: 3px solid;
  border-left: 3px solid;
}

.machine-corner--br {
  right: 15px;
  bottom: 15px;
  border-right: 3px solid;
  border-bottom: 3px solid;
}

.class-arrow {
  position: absolute;
  top: 50%;
  z-index: 8;
  width: 56px;
  height: 96px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--red-hot);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent),
    rgba(10, 10, 13, .92);
  border: 1px solid rgba(228, 3, 46, .42);
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  box-shadow: 0 0 24px rgba(228, 3, 46, .34), inset 0 0 18px rgba(228, 3, 46, .08);
  cursor: pointer;
  transform: translateY(-50%);
  animation: arrow-pulse 2.8s ease-in-out infinite;
  transition: border-color .18s ease, color .18s ease, filter .18s ease, transform .18s ease;
}

.class-arrow svg {
  width: 32px;
  height: 64px;
  filter: drop-shadow(0 0 12px rgba(255, 43, 61, .8));
}

.class-arrow--left {
  left: -24px;
}

.class-arrow--right {
  right: -24px;
}

.class-arrow:hover {
  color: var(--white);
  border-color: var(--red-hot);
  filter: brightness(1.18);
}

.class-arrow:active {
  transform: translateY(calc(-50% + 2px)) scale(.97);
}

.class-arrow[disabled] {
  opacity: .34;
  pointer-events: none;
  animation: none;
  filter: saturate(.5);
}

@keyframes arrow-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(228, 3, 46, .22), inset 0 0 18px rgba(228, 3, 46, .06); }
  50% { box-shadow: 0 0 34px rgba(255, 43, 61, .46), inset 0 0 24px rgba(228, 3, 46, .12); }
}

.machine-focus {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 82% 48%, transparent 0 18%, rgba(0, 0, 0, .52) 58%, rgba(0, 0, 0, .78) 100%);
  transition: opacity .28s ease;
}

.machine.focus-mode .machine-focus {
  opacity: 1;
}

.machine.focus-mode .reel-slot:not(.focus-reel) {
  opacity: .65;
}

.reel-bank {
  --role-h: 20px;
  position: relative;
}

.reels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  position: relative;
  z-index: 2;
}

.winline {
  position: absolute;
  left: 3px;
  right: 3px;
  top: calc(var(--role-h) + ((100% - var(--role-h)) / 2));
  z-index: 6;
  height: 3px;
  pointer-events: none;
  opacity: .82;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 43, 61, .85) 9%,
    rgba(255, 128, 138, .96) 34%,
    #fff 50%,
    rgba(255, 128, 138, .96) 66%,
    rgba(255, 43, 61, .85) 91%,
    transparent);
  box-shadow:
    0 0 6px rgba(255, 255, 255, .75),
    0 0 22px rgba(255, 43, 61, 1),
    0 0 52px rgba(228, 3, 46, .7);
  animation: laser-breathe 3s ease-in-out infinite;
}

.winline::before,
.winline::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 34px;
  height: 20px;
  background: radial-gradient(ellipse, rgba(255, 43, 61, .72), transparent 68%);
}

.winline::before {
  left: 7%;
}

.winline::after {
  right: 7%;
}

/* The winline stays hidden until the first completed loadout: the engine
   adds .is-live in celebrate() and sweeps the line across the winners.
   visibility (not opacity) because laser-breathe animates opacity. */
.winline:not(.is-live) {
  visibility: hidden;
}

.winline.is-hot {
  opacity: 1;
  box-shadow:
    0 0 8px rgba(255, 255, 255, 1),
    0 0 24px rgba(255, 43, 61, 1),
    0 0 58px rgba(228, 3, 46, .8);
}

@keyframes laser-breathe {
  0%, 100% { opacity: .72; filter: brightness(.92); }
  50% { opacity: .98; filter: brightness(1.2); }
}

.reel-slot {
  min-width: 0;
  position: relative;
  transition: opacity .24s ease;
}

.reel-role {
  height: var(--role-h);
  margin: 0;
  color: var(--muted);
  font-family: "Chakra Petch", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  line-height: var(--role-h);
  text-align: center;
  text-transform: uppercase;
}

.card-viewport {
  /* Drum window: one full card plus a peek of the previous/next cells above
     and below. A cell is 75% of this window (arena-engine CELL_FRACTION);
     --drum-peek = (1 - CELL_FRACTION) / 2 and feeds the strip origin and
     shade geometry below — change the fraction, change both. */
  --drum-peek: 12.5%;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.62;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 22%),
    radial-gradient(circle at 50% 44%, rgba(228, 3, 46, .14), transparent 64%),
    #0e0e12;
  border: 1px solid #26262c;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .018),
    0 15px 35px rgba(0, 0, 0, .35);
  transform-origin: center;
}

.card-viewport::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 3px;
  background: linear-gradient(90deg, transparent 0 8%, var(--red-hot) 8% 86%, transparent 86%);
  box-shadow: 0 0 14px rgba(255, 43, 61, .58);
}

.card-viewport::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  z-index: 3;
  width: 26px;
  height: 8px;
  transform: translateX(-50%) skewX(-28deg);
  background: var(--red);
  opacity: .8;
}

.card-viewport.is-locked {
  border-color: rgba(255, 43, 61, .9);
  box-shadow:
    inset 0 0 0 1px rgba(255, 43, 61, .34),
    0 0 28px rgba(228, 3, 46, .42);
}

.card-edge {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 0 2px var(--red-hot), inset 0 0 28px rgba(255, 43, 61, .5);
}

.card-flash {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  transform: translate3d(-130%, 0, 0) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  opacity: 0;
}

.reel-strip {
  position: absolute;
  /* The strip origin sits at the top of the winner window (one peek down),
     so the engine's -WIN_INDEX * cellHeight lock math needs no offset.
     Height stays auto: the cells stack past both edges and the viewport
     clips them. */
  top: var(--drum-peek);
  left: 0;
  right: 0;
  will-change: transform, filter;
  transform: translate3d(0, 0, 0);
}

/* Drum shading: the peeked neighbors recede into the cabinet like cells on
   a physical wheel — heavy falloff over each peek zone plus a faint center
   sheen for curvature. Above the strip, under the frame accents (z3+). */
.drum-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 4, 7, .92), rgba(4, 4, 7, .55) 7%, rgba(6, 6, 10, .28) var(--drum-peek), transparent 20%),
    linear-gradient(0deg, rgba(4, 4, 7, .92), rgba(4, 4, 7, .55) 7%, rgba(6, 6, 10, .28) var(--drum-peek), transparent 20%),
    linear-gradient(180deg, transparent 34%, rgba(255, 255, 255, .02) 50%, transparent 66%);
}

/* Hairline glass edges framing the winner window at the peek boundaries. */
.drum-shade::before,
.drum-shade::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}

.drum-shade::before { top: var(--drum-peek); }
.drum-shade::after { bottom: var(--drum-peek); }

.arena-cell {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .026), transparent 35%),
    linear-gradient(180deg, rgba(228, 3, 46, .08), transparent 34%, rgba(0, 0, 0, .2));
}

.arena-cell::before {
  content: "THE FINALS";
  position: absolute;
  left: 50%;
  top: 57%;
  color: var(--white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(20px, 3vw, 48px);
  font-style: italic;
  font-weight: 900;
  letter-spacing: .12em;
  opacity: .05;
  pointer-events: none;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(-16deg);
  white-space: nowrap;
}

.arena-cell__art {
  flex: 0 0 76%;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 8% 7% 4%;
}

.arena-cell__art img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55));
  user-select: none;
}

.arena-cell__art img.legacy-art {
  filter:
    saturate(.2)
    sepia(.4)
    hue-rotate(-40deg)
    saturate(2.2)
    brightness(.9)
    drop-shadow(0 0 18px rgba(255, 43, 61, .5));
}

.arena-cell__name {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px 2px;
  position: relative;
  background:
    linear-gradient(90deg, transparent, rgba(228, 3, 46, .18), transparent),
    rgba(6, 6, 8, .66);
  border-top: 1px solid rgba(255, 43, 61, .34);
}

.arena-cell__name::before,
.arena-cell__name::after {
  content: "";
  width: 8px;
  height: 2px;
  margin: 0 5px;
  flex: 0 0 auto;
  background: var(--red-hot);
  box-shadow: 0 0 8px rgba(255, 43, 61, .8);
}

.arena-cell__label {
  min-width: 0;
  color: var(--white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(11px, 1.55vw, 21px);
  font-style: italic;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: .9;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255, 43, 61, .35);
  white-space: nowrap;
}

.arena-cell.long-name .arena-cell__label {
  font-size: clamp(10px, 1.22vw, 17px);
}

.arena-cell.xlong-name .arena-cell__label {
  font-size: clamp(9px, 1.05vw, 15px);
}

.spark {
  position: absolute;
  z-index: 9;
  width: 4px;
  height: 4px;
  pointer-events: none;
  background: var(--red-hot);
  box-shadow: 0 0 12px rgba(255, 43, 61, .9);
}

.counter-plate {
  width: min(300px, 86vw);
  min-height: 64px;
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: 28px auto 28px;
  grid-template-rows: 34px 16px;
  align-items: center;
  justify-items: center;
  padding: 8px 18px 7px;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  border: 1px solid rgba(255, 43, 61, .38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 42%),
    rgba(9, 9, 12, .88);
  box-shadow: inset 0 0 20px rgba(228, 3, 46, .08), 0 0 28px rgba(228, 3, 46, .16);
}

#loadoutTotal {
  color: var(--white);
  font-family: "Chakra Petch", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

#loadoutTotal.pop,
#loadoutTotal.tick {
  animation: counter-pop .36s cubic-bezier(.2, 1.5, .35, 1);
}

.counter-stars {
  color: var(--red-hot);
  font-size: 16px;
  text-shadow: 0 0 12px rgba(255, 43, 61, .7);
}

.counter-label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

@keyframes counter-pop {
  0% { transform: scale(1); filter: brightness(1); }
  45% { transform: scale(1.18); filter: brightness(1.7); }
  100% { transform: scale(1); filter: brightness(1); }
}

.arena-controls {
  width: min(520px, 94vw);
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* Invisible spacer mirroring the sound toggle so the SPIN button centers under
   the slot machine; the speaker stays put relative to the button. */
.arena-controls::before {
  content: "";
  flex: 0 0 auto;
  width: 64px;
  visibility: hidden;
  pointer-events: none;
}

.spin-button {
  position: relative;
  width: min(420px, 80vw);
  min-height: 92px;
  overflow: hidden;
  color: var(--white);
  border: 1px solid #780817;
  clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 26px 100%, 0 50%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .26), transparent 18%),
    linear-gradient(180deg, var(--red-hot), var(--red) 55%, var(--red-deep));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -10px 18px rgba(70, 0, 10, .24),
    0 0 34px rgba(228, 3, 46, .48);
  cursor: pointer;
  transition: transform .13s ease, filter .18s ease, box-shadow .18s ease;
  animation: spin-pulse 2.6s ease-in-out infinite;
}

.spin-button::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate3d(-130%, 0, 0) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .52), transparent);
  transition: transform .46s ease;
}

.spin-button:hover {
  filter: brightness(1.13);
}

.spin-button:hover::before {
  transform: translate3d(130%, 0, 0) skewX(-18deg);
}

.spin-button:active,
.spin-button.is-pressing {
  transform: translateY(2px) scale(.985);
}

.spin-button[disabled] {
  pointer-events: none;
  filter: saturate(.72) brightness(.82);
  animation: none;
}

.spin-label {
  position: relative;
  z-index: 2;
  display: inline-block;
  color: var(--white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 42px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(70, 0, 12, .45), 0 0 14px rgba(255, 255, 255, .22);
  text-transform: uppercase;
}

.spin-flash {
  position: absolute;
  inset: -22px;
  z-index: 1;
  border: 2px solid rgba(255, 255, 255, .72);
  opacity: 0;
  clip-path: inherit;
  pointer-events: none;
}

@keyframes spin-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -10px 18px rgba(70, 0, 10, .24), 0 0 28px rgba(228, 3, 46, .42); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -10px 18px rgba(70, 0, 10, .24), 0 0 52px rgba(255, 43, 61, .72); }
}

.sound-toggle {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--red-hot);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  border: 1px solid rgba(228, 3, 46, .42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent),
    rgba(9, 9, 12, .92);
  box-shadow: inset 0 0 18px rgba(228, 3, 46, .08), 0 0 20px rgba(228, 3, 46, .2);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, transform .13s ease, filter .18s ease;
}

.sound-toggle:hover {
  color: var(--white);
  border-color: var(--red-hot);
  filter: brightness(1.15);
}

.sound-toggle:active {
  transform: translateY(2px) scale(.97);
}

.sound-icon {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 0 10px rgba(255, 43, 61, .65));
}

.sound-icon--off {
  display: none;
}

.sound-toggle.is-muted {
  color: rgba(154, 154, 163, .74);
}

.sound-toggle.is-muted .sound-icon--on {
  display: none;
}

.sound-toggle.is-muted .sound-icon--off {
  display: block;
}

.result-readout {
  width: min(980px, 94vw);
  margin: 16px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  border-top: 1px solid rgba(255, 43, 61, .22);
  border-bottom: 1px solid rgba(255, 43, 61, .22);
  background: rgba(8, 8, 10, .56);
}

.result-readout.is-visible {
  animation: readout-in .34s ease-out both;
}

.result-readout[hidden] {
  display: none;
}

.result-chip {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 9px;
  color: var(--white);
  background: rgba(16, 16, 20, .86);
  border: 1px solid rgba(255, 43, 61, .24);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  font-family: "Chakra Petch", sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.result-chip span {
  color: var(--red-hot);
  font-size: 10px;
  letter-spacing: .14em;
}

@keyframes readout-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.history {
  width: min(1240px, 100%);
  margin: 34px auto 0;
}

.history[hidden] {
  display: none;
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.history-title {
  margin: 0;
  color: var(--white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.history-title span {
  color: var(--red-hot);
  text-shadow: 0 0 12px rgba(255, 43, 61, .6);
}

.history-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
}

.history-nav {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--red-hot);
  border: 1px solid rgba(228, 3, 46, .4);
  background: rgba(8, 8, 10, .86);
  cursor: pointer;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

.history-nav svg {
  width: 22px;
  height: 22px;
}

.history-nav:hover {
  color: var(--white);
  border-color: var(--red-hot);
}

.history-nav[disabled] {
  opacity: .35;
  pointer-events: none;
}

.history-page {
  color: var(--muted);
  font-family: "Chakra Petch", sans-serif;
  font-size: 13px;
  font-weight: 600;
  min-width: 44px;
  text-align: center;
}

.history-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.history-card {
  --rail: var(--red-hot);
  min-width: 0;
  padding: 12px 12px 13px 14px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);
  border: 1px solid rgba(255, 255, 255, .07);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 34%),
    rgba(16, 16, 20, .9);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .35);
}

.history-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--rail);
  box-shadow: 0 0 16px color-mix(in srgb, var(--rail) 68%, transparent);
}

.history-card[data-class="Light"] { --rail: var(--class-light); }
.history-card[data-class="Medium"] { --rail: var(--class-medium); }
.history-card[data-class="Heavy"] { --rail: var(--class-heavy); }

.history-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.history-card__class {
  color: var(--white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.history-card__time {
  color: var(--muted);
  font-family: "Chakra Petch", sans-serif;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.history-card__weapon {
  margin: 0 0 5px;
  color: var(--white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: .95;
  text-transform: uppercase;
}

.history-card__spec,
.history-card__gadgets {
  margin: 0;
  color: var(--muted);
  font-family: "Chakra Petch", sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.history-card__spec {
  color: rgba(244, 244, 245, .72);
  margin-bottom: 5px;
}

/* ── Streamer spotlight (arena skin) ─────────────────────────────────
   DOM built by the shared /js/streamer-spotlight.js (same admin-fed
   /api/featured-streamers carousel as the main page); only the skin
   lives here. Cards stack absolutely and crossfade via .active. */
.spotlight {
  width: min(1240px, 100%);
  margin: 34px auto 0;
}

.spotlight-container {
  position: relative;
}

.spotlight-card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  text-align: left;
  opacity: 0;
  transform: scale(.97);
  transition: opacity .55s ease, transform .55s ease;
  pointer-events: none;
  overflow: hidden;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  border: 1px solid #33333a;
  background:
    linear-gradient(90deg, rgba(228, 3, 46, .12), transparent 20%, transparent 80%, rgba(228, 3, 46, .12)),
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 30%),
    linear-gradient(135deg, rgba(22, 22, 27, .96), rgba(10, 10, 13, .98));
}

.spotlight-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 43, 61, .7), transparent);
}

.spotlight-card.active {
  position: relative;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.spotlight-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255, 43, 61, .55);
  box-shadow: 0 0 16px rgba(228, 3, 46, .32);
}

.spotlight-info {
  flex: 1;
  min-width: 0;
}

.spotlight-name {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.spotlight-platform-badge {
  padding: 3px 9px 2px;
  color: rgba(244, 244, 245, .78);
  border: 1px solid rgba(255, 43, 61, .42);
  background: rgba(228, 3, 46, .12);
  font-family: "Chakra Petch", sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.spotlight-quote {
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.spotlight-watch {
  flex-shrink: 0;
  padding: 11px 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--red-hot), var(--red));
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  font-family: "Chakra Petch", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: filter .2s ease, transform .2s ease;
}

.spotlight-watch:hover {
  filter: brightness(1.18);
  transform: translateY(-1px);
}

.spotlight-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 15px;
}

.spotlight-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(255, 43, 61, .45);
  background: transparent;
  transform: rotate(45deg);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.spotlight-dot.active {
  border-color: var(--red-hot);
  background: var(--red-hot);
  box-shadow: 0 0 10px var(--glow);
}

.spotlight-dot:hover:not(.active) {
  border-color: var(--red-hot);
}

.spotlight-submit {
  margin: 14px 0 0;
  color: var(--muted);
  font-family: "Chakra Petch", sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  text-align: center;
}

.spotlight-submit a {
  color: var(--red-hot);
  font-weight: 700;
  text-decoration: none;
}

.spotlight-submit a:hover {
  text-decoration: underline;
}

.spotlight-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 22px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed rgba(255, 43, 61, .38);
  background: rgba(228, 3, 46, .05);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}

.spotlight-coming-soon-icon {
  font-size: 26px;
}

.spotlight-coming-soon-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.spotlight-coming-soon-text strong {
  color: var(--white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 19px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.spotlight-cta {
  display: inline-block;
  margin-top: 4px;
  padding: 11px 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--red-hot), var(--red));
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  font-family: "Chakra Petch", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: filter .2s ease;
}

.spotlight-cta:hover {
  filter: brightness(1.18);
}

@media (max-width: 640px) {
  .spotlight-card {
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px;
  }

  .spotlight-watch {
    width: 100%;
    text-align: center;
  }
}


@media (min-width: 1920px) {
  body.arena {
    background-image:
      radial-gradient(circle at 50% 20%, rgba(228, 3, 46, .18), transparent 32vw),
      radial-gradient(circle at 50% 58%, transparent 0, rgba(0, 0, 0, .72) 72%),
      linear-gradient(180deg, rgba(5, 5, 7, .88) 0%, rgba(5, 5, 7, .55) 30%, rgba(5, 5, 7, .62) 62%, rgba(4, 4, 6, .94) 100%),
      url("/images/v2/hero-2560.webp");
  }
}

@media (max-width: 1023px) {
  body.arena .arena-shell {
    width: min(100vw - 20px, 960px);
  }

  .machine {
    --machine-pad: 18px;
  }

  .class-arrow--left {
    left: -10px;
  }

  .class-arrow--right {
    right: -10px;
  }

  .history-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body.arena {
    background-image:
      radial-gradient(circle at 50% 20%, rgba(228, 3, 46, .18), transparent 32vw),
      radial-gradient(circle at 50% 58%, transparent 0, rgba(0, 0, 0, .72) 72%),
      linear-gradient(180deg, rgba(5, 5, 7, .88) 0%, rgba(5, 5, 7, .55) 30%, rgba(5, 5, 7, .62) 62%, rgba(4, 4, 6, .94) 100%),
      url("/images/v2/hero-960.webp");
    /* iOS Safari repaints every scroll frame with fixed attachment —
       flip ALL layers to scroll on mobile, not just the photo. */
    background-attachment: scroll;
  }

  body.arena .arena-shell {
    width: calc(100vw - 16px);
    padding-top: 16px;
  }


  .tagline-strip {
    margin-top: 4px;
    letter-spacing: .2em;
  }

  .tagline-strip::before,
  .tagline-strip::after {
    margin: 0 8px;
  }

  .class-banner {
    min-height: 88px;
    margin-bottom: 16px;
    padding: 13px 22px;
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  }

  .class-banner__title {
    font-size: clamp(48px, 14vw, 64px);
  }

  .class-banner__caption {
    font-size: 9px;
    letter-spacing: .12em;
  }

  .machine {
    --machine-pad: 12px;
  }

  .reels {
    gap: 6px;
  }

  .reel-role {
    display: none;
  }

  .reel-bank {
    --role-h: 0px;
  }

  .class-arrow {
    width: 44px;
    height: 72px;
  }

  .class-arrow svg {
    width: 26px;
    height: 52px;
  }

  .class-arrow--left {
    left: 4px;
  }

  .class-arrow--right {
    right: 4px;
  }

  .card-viewport {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .018), 0 8px 20px rgba(0, 0, 0, .35);
  }

  .arena-cell__art {
    padding: 10% 4% 2%;
  }

  .arena-cell__name {
    padding-inline: 2px;
  }

  .arena-cell__name::before,
  .arena-cell__name::after {
    width: 4px;
    margin-inline: 2px;
  }

  .arena-cell__label {
    font-size: clamp(9px, 2.35vw, 12px);
    letter-spacing: .02em;
  }

  .arena-cell.long-name .arena-cell__label,
  .arena-cell.xlong-name .arena-cell__label {
    font-size: clamp(8px, 2.1vw, 10px);
  }

  .counter-plate {
    width: min(270px, 80vw);
    min-height: 58px;
    margin-top: 14px;
  }

  .arena-controls {
    gap: 10px;
    margin-top: 18px;
  }

  .spin-button {
    min-height: 64px;
    clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 20px 100%, 0 50%);
  }

  .spin-label {
    font-size: 34px;
  }

  .sound-toggle {
    width: 56px;
    height: 56px;
  }

  .arena-controls::before {
    width: 56px;
  }

  .result-readout {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .result-readout::-webkit-scrollbar {
    display: none;
  }

  .result-chip {
    flex: 0 0 auto;
    font-size: 11px;
  }

  .history-header {
    align-items: center;
  }

  .history-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  body.arena .arena-shell {
    width: calc(100vw - 12px);
  }

  .class-banner {
    width: calc(100vw - 20px);
  }

  .machine {
    --machine-pad: 8px;
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  }

  .machine::before {
    left: 16px;
    right: 16px;
  }

  .machine-corner {
    width: 30px;
    height: 30px;
  }

  .machine-corner--tl,
  .machine-corner--tr {
    top: 11px;
  }

  .machine-corner--bl,
  .machine-corner--br {
    bottom: 11px;
  }

  .machine-corner--tl,
  .machine-corner--bl {
    left: 11px;
  }

  .machine-corner--tr,
  .machine-corner--br {
    right: 11px;
  }

  .reels {
    gap: 4px;
  }

  .class-arrow {
    top: 50%;
    width: 44px;
    height: 64px;
  }

  .card-viewport::after {
    width: 16px;
  }

  .arena-cell__art img {
    width: 92%;
    height: 88%;
  }

  .arena-cell__name {
    padding-bottom: 0;
  }

  .arena-cell__label,
  .arena-cell.long-name .arena-cell__label,
  .arena-cell.xlong-name .arena-cell__label {
    font-size: 0;
  }

  .arena-cell__name::before,
  .arena-cell__name::after {
    width: 10px;
    margin-inline: 1px;
  }

  .counter-plate {
    min-height: 54px;
  }

  #loadoutTotal {
    font-size: 24px;
  }

  .arena-controls {
    width: calc(100vw - 18px);
  }

  .spin-button {
    width: calc(100% - 66px);
  }

  .sound-toggle {
    width: 52px;
    height: 52px;
  }

  .arena-controls::before {
    width: 52px;
  }

  .sound-icon {
    width: 30px;
    height: 30px;
  }

  .history-header {
    gap: 10px;
  }

  .history-title {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  .arena-embers {
    display: none;
  }

  .winline,
  .class-arrow,
  .spin-button {
    animation: none !important;
  }
}

/* Small phones: 8px name plates are unreadable noise — the result readout
   below the controls carries the item names instead. */
@media (max-width: 480px) {
  .arena-cell__name {
    display: none;
  }
}

/* ============================== GRADE TIERS =============================
   META ROLL / BRICK: the engine grades each roll against live meta data,
   adds .grade-jackpot / .grade-bust to .machine in celebrate(), and slams
   the #gradeStamp overlay. Classes clear on the next spin's reset. */

:root {
  --gold: #f6c945;
  --gold-hot: #ffd76a;
}

.grade-stamp {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.grade-stamp[hidden] {
  display: none;
}

.grade-stamp__text {
  padding: .16em .5em .1em;
  border: 4px solid currentColor;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(46px, 9vw, 118px);
  font-style: italic;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: .9;
  text-transform: uppercase;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

.grade-stamp[data-grade="jackpot"] {
  transform: rotate(-7deg);
}

.grade-stamp[data-grade="jackpot"] .grade-stamp__text {
  color: var(--gold-hot);
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(56, 44, 8, .78), rgba(20, 15, 4, .88));
  box-shadow:
    0 0 38px rgba(246, 201, 69, .55),
    inset 0 0 24px rgba(246, 201, 69, .22);
  text-shadow:
    0 0 20px rgba(255, 215, 106, .85),
    0 2px 0 rgba(0, 0, 0, .55);
}

.grade-stamp[data-grade="bust"] {
  transform: rotate(6deg);
}

.grade-stamp[data-grade="bust"] .grade-stamp__text {
  color: #d8d8de;
  border-color: rgba(255, 43, 61, .6);
  background: rgba(10, 8, 9, .82);
  box-shadow:
    0 0 26px rgba(0, 0, 0, .65),
    inset 0 0 18px rgba(255, 43, 61, .12);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6);
}

/* --- jackpot: the whole cabinet goes gold ------------------------------ */

.machine.grade-jackpot {
  box-shadow:
    inset 0 0 0 1px rgba(246, 201, 69, .1),
    0 24px 90px rgba(0, 0, 0, .58),
    0 0 64px rgba(246, 201, 69, .3);
}

.machine.grade-jackpot .machine-corner {
  border-color: var(--gold-hot);
  filter: drop-shadow(0 0 12px rgba(246, 201, 69, .7));
}

.machine.grade-jackpot .winline {
  background: linear-gradient(90deg,
    transparent,
    rgba(246, 201, 69, .85) 9%,
    rgba(255, 223, 128, .96) 34%,
    #fff 50%,
    rgba(255, 223, 128, .96) 66%,
    rgba(246, 201, 69, .85) 91%,
    transparent);
  box-shadow:
    0 0 6px rgba(255, 255, 255, .8),
    0 0 22px rgba(246, 201, 69, 1),
    0 0 52px rgba(168, 126, 20, .75);
}

.machine.grade-jackpot .winline::before,
.machine.grade-jackpot .winline::after {
  background: radial-gradient(ellipse, rgba(246, 201, 69, .75), transparent 68%);
}

.machine.grade-jackpot .card-viewport.is-locked {
  border-color: rgba(246, 201, 69, .9);
  box-shadow:
    inset 0 0 0 1px rgba(246, 201, 69, .34),
    0 0 28px rgba(201, 151, 31, .45);
}

.machine.grade-jackpot .card-edge {
  box-shadow: inset 0 0 0 2px var(--gold-hot), inset 0 0 28px rgba(246, 201, 69, .5);
}

/* --- bust: lights down, party cancelled -------------------------------- */

.machine.grade-bust {
  filter: saturate(.55) brightness(.86);
}

.machine.grade-bust .winline {
  opacity: .35;
  animation: none;
  background: linear-gradient(90deg,
    transparent,
    rgba(154, 154, 163, .55) 12%,
    rgba(216, 216, 222, .7) 50%,
    rgba(154, 154, 163, .55) 88%,
    transparent);
  box-shadow: 0 0 10px rgba(154, 154, 163, .35);
}

.machine.grade-bust .winline::before,
.machine.grade-bust .winline::after {
  background: radial-gradient(ellipse, rgba(154, 154, 163, .4), transparent 68%);
}

/* --- jackpot-pending charge on the final reel's crawl ------------------ */

.card-viewport.is-charged {
  border-color: rgba(246, 201, 69, .75);
  animation: charged-pulse .5s ease-in-out infinite alternate;
}

.card-viewport.is-charged::before {
  background: linear-gradient(90deg, transparent 0 8%, var(--gold-hot) 8% 86%, transparent 86%);
  box-shadow: 0 0 14px rgba(246, 201, 69, .6);
}

@keyframes charged-pulse {
  from {
    box-shadow:
      inset 0 0 0 1px rgba(246, 201, 69, .25),
      0 0 18px rgba(246, 201, 69, .3);
  }
  to {
    box-shadow:
      inset 0 0 0 1px rgba(246, 201, 69, .45),
      0 0 34px rgba(246, 201, 69, .55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-viewport.is-charged {
    animation: none;
  }
}

/* --- readout + history callouts ---------------------------------------- */

.result-chip--jackpot {
  color: #201804;
  background: linear-gradient(180deg, var(--gold-hot), #c9971f);
  border-color: #ffe49a;
  font-weight: 700;
  letter-spacing: .08em;
}

.result-chip--bust {
  color: #ff8a95;
  background: #1b1114;
  border-color: rgba(255, 43, 61, .5);
  letter-spacing: .08em;
}

.ragequit-nudge {
  flex-basis: 100%;
  margin: 3px 0 0;
  color: var(--muted);
  font-family: "Chakra Petch", sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.ragequit-nudge a {
  color: var(--red-hot);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 43, 61, .5);
}

.ragequit-nudge a:hover,
.ragequit-nudge a:focus-visible {
  color: var(--white);
  border-color: var(--white);
}

.history-card__badge {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px 1px;
  font-family: "Chakra Petch", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  vertical-align: 2px;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

.history-card__badge--jackpot {
  color: #201804;
  background: linear-gradient(180deg, var(--gold-hot), #c9971f);
}

.history-card__badge--bust {
  color: #ff8a95;
  background: #1f1216;
  border: 1px solid rgba(255, 43, 61, .45);
}

.history-card[data-grade="jackpot"] {
  --rail: var(--gold);
}

.history-card[data-grade="bust"] {
  --rail: #55555e;
}

/* =========================== LASER RAIL FRAME ===========================
   A red laser comet tracing a rounded rail just inside the cabinet edge.
   The comet is a conic-gradient on an oversized square pseudo-element that
   ROTATES (transform-only, compositor-friendly) inside a ring mask —
   deliberately not an animated gradient angle, which would re-raster the
   gradient every frame. The engine drives state via classes on .machine:
   idle (slow orbit) → .is-spinning (fast, second comet joins) →
   .is-celebrating (flat-out), with .grade-jackpot recoloring gold and
   .grade-bust dying to a limping grey stub.

   Geometry: the cabinet clip-path chamfers 22px off each corner. The rail
   is inset 10px with a 9px radius so the rounded corner clears the chamfer
   cut (nearest approach ≈ 25px > 22px) — shrink the inset or radius and
   the comet gets clipped at every corner. */

.machine-laser {
  --laser-period: 3.4s;
  --laser-width: 2px;
  --laser-tail-start: 286deg;
  --laser-head: #fff;
  --laser-hot: var(--red-hot);
  --laser-tail: rgba(228, 3, 46, 0);
  --laser-rail: rgba(255, 43, 61, .12);
  position: absolute;
  inset: 10px;
  z-index: 3;
  border-radius: 9px;
  padding: var(--laser-width);
  overflow: hidden;
  pointer-events: none;
  background: var(--laser-rail);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.machine-laser::before,
.machine-laser::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  /* Oversized square: its inscribed circle must cover the rail's corners
     at any cabinet aspect, so the beam never vanishes mid-orbit. */
  width: 150%;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg,
    transparent 0 var(--laser-tail-start),
    var(--laser-tail) calc(var(--laser-tail-start) + 8deg),
    var(--laser-hot) 344deg,
    var(--laser-head) 354deg 358deg,
    transparent 360deg);
  animation: laser-orbit var(--laser-period) linear infinite;
}

/* Second comet, half an orbit behind — hidden until the reels run. */
.machine-laser::after {
  opacity: 0;
  animation-delay: calc(var(--laser-period) / -2);
}

@keyframes laser-orbit {
  from { transform: translate(-50%, -50%) rotate(0turn); }
  to   { transform: translate(-50%, -50%) rotate(1turn); }
}

.machine.is-spinning .machine-laser {
  --laser-period: 1.1s;
  /* The cabinet dims while reels run (.dimmed → brightness(.7)) — exactly
     when the rail should be racing. Compensate via hotter beam colors, not
     a filter: filtering the container would force the rotating layers
     through an offscreen surface every frame. */
  --laser-hot: #ff8a93;
  --laser-rail: rgba(255, 92, 104, .18);
}

.machine.is-spinning .machine-laser::after,
.machine.is-celebrating .machine-laser::after {
  opacity: 1;
}

.machine.is-celebrating .machine-laser {
  --laser-period: .5s;
  --laser-tail-start: 220deg;
  --laser-rail: rgba(255, 43, 61, .3);
}

.machine.grade-jackpot .machine-laser {
  --laser-hot: var(--gold-hot);
  --laser-head: #fff8e1;
  --laser-tail: rgba(246, 201, 69, 0);
  --laser-rail: rgba(246, 201, 69, .22);
}

/* Bust: the rail dies. A cold grey stub limping around a near-dark ring,
   flickering like a failing ballast — declared after .is-celebrating so it
   wins the cascade tie during the bust celebration window. */
.machine.grade-bust .machine-laser {
  --laser-period: 5.5s;
  --laser-tail-start: 318deg;
  --laser-hot: #74747e;
  --laser-head: #9a9aa3;
  --laser-tail: rgba(116, 116, 126, 0);
  --laser-rail: rgba(116, 116, 126, .08);
  animation: laser-gutter 2.2s infinite;
}

/* A dying sign limps alone: without this the .is-celebrating rule above
   keeps the second comet on through the bust celebration window. */
.machine.grade-bust .machine-laser::after {
  opacity: 0;
}

@keyframes laser-gutter {
  0%, 100% { opacity: .55; }
  8% { opacity: .2; }
  12% { opacity: .6; }
  47% { opacity: .28; }
  53% { opacity: .55; }
  81% { opacity: .18; }
  86% { opacity: .5; }
}

@media (max-width: 480px) {
  .machine-laser {
    --laser-width: 1.5px;
  }
}

/* Without a working ring composite the beams would paint across the whole
   cabinet face instead of a 2px rail — hide the frame entirely on engines
   that support neither form (ancient WebViews). */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .machine-laser {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* !important so the state rules (.grade-bust sets animation at higher
     specificity) can't re-enable motion — matches the winline/class-arrow/
     spin-button convention above. The comets hide; the rail stays as a
     brighter static accent so the frame still reads. */
  .machine-laser,
  .machine-laser::before,
  .machine-laser::after {
    animation: none !important;
  }

  .machine-laser::before,
  .machine-laser::after {
    display: none;
  }

  .machine-laser {
    --laser-rail: rgba(255, 43, 61, .3);
  }
}

/* ========================== IDLE SPIN SHIMMER ===========================
   The hover sheen (.spin-button::before) auto-sweeps every few seconds
   while the button idles, so it breathes light between spins. Scoped to
   :not(:hover) so the existing hover-triggered sweep transition still
   owns the pseudo-element on pointer-over. */

.spin-button:not(:hover)::before {
  animation: spin-shimmer 7.5s ease-in-out infinite;
}

.spin-button[disabled]::before {
  animation: none;
}

@keyframes spin-shimmer {
  0%, 79% { transform: translate3d(-130%, 0, 0) skewX(-18deg); }
  91%, 100% { transform: translate3d(130%, 0, 0) skewX(-18deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spin-button::before {
    animation: none !important;
  }
}