/* ================================================================
   ARENA V3 — A/B variant polish layer
   Loads AFTER /v2/css/arena.css; every rule here is a deliberate
   delta vs production (the control). CSS-only: no JS forks, no
   shared-asset edits. Perf contract respected: no per-frame
   blur/filter tweens, no transform animation on .machine (engine
   owns it), transform/opacity-only motion, zero layout shift.
   ================================================================ */

/* ---------- brand feel: selection + scrollbar ------------------- */

::selection {
  color: #fff;
  background: rgba(228, 3, 46, .8);
  text-shadow: none;
}

html {
  scrollbar-color: #3d3d47 #0b0b0e;
}

/* ---------- keyboard focus: visible inside clip-paths -----------
   The base outline (2px, offset +2) draws OUTSIDE the border box,
   and clip-path clips it away entirely — keyboard focus was
   invisible on every clipped control. Pull the ring inside. */

body.arena .spin-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -7px;
}

body.arena .class-arrow:focus-visible,
body.arena .sound-toggle:focus-visible,
body.arena .history-nav:focus-visible {
  outline-offset: -5px;
}

body.arena .spotlight-watch:focus-visible,
body.arena .spotlight-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -5px;
}

/* ---------- entrance choreography (one-shot, first paint) -------
   Logo is the LCP element — never animated. Everything below it
   rises in a 3-step stagger; .machine fades opacity-only so the
   engine's transform tweens never race a CSS animation. */

@media (prefers-reduced-motion: no-preference) {
  .tagline-strip {
    animation: v3-rise-in .5s cubic-bezier(.22, .9, .32, 1) .04s backwards;
  }

  .class-selector {
    animation: v3-rise-in .5s cubic-bezier(.22, .9, .32, 1) .12s backwards;
  }

  .machine {
    animation: v3-fade-in .55s ease .18s backwards;
  }

  .arena-controls {
    animation: v3-rise-in .5s cubic-bezier(.22, .9, .32, 1) .28s backwards;
  }

  .spotlight {
    animation: v3-rise-in .5s ease .34s backwards;
  }

  /* Result chips land one by one instead of as a slab. Chips are
     rebuilt each spin, so the cascade re-fires on every result. */
  .result-readout .result-chip {
    animation: v3-chip-in .32s cubic-bezier(.2, .9, .3, 1) backwards;
  }

  .result-readout .result-chip:nth-child(1) { animation-delay: .02s; }
  .result-readout .result-chip:nth-child(2) { animation-delay: .07s; }
  .result-readout .result-chip:nth-child(3) { animation-delay: .12s; }
  .result-readout .result-chip:nth-child(4) { animation-delay: .17s; }
  .result-readout .result-chip:nth-child(5) { animation-delay: .22s; }
  .result-readout .result-chip:nth-child(6) { animation-delay: .27s; }
  .result-readout .result-chip:nth-child(7) { animation-delay: .32s; }
  .result-readout .result-chip:nth-child(8) { animation-delay: .37s; }
}

@keyframes v3-rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
}

@keyframes v3-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes v3-chip-in {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
}

/* ---------- desktop: hover physics on every control -------------
   Pointer-gated so touch devices never get sticky hover states.
   Each :hover transform re-declares its :active below it, so the
   pressed state still wins the cascade inside this later sheet. */

@media (pointer: fine) {
  .spin-button:hover {
    transform: translateY(-1px);
  }

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

  .class-arrow--left:hover {
    transform: translateY(-50%) translateX(-3px);
  }

  .class-arrow--right:hover {
    transform: translateY(-50%) translateX(3px);
  }

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

  .sound-toggle:hover {
    transform: translateY(-1px);
  }

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

  .history-nav {
    transition: color .18s ease, border-color .18s ease,
      transform .13s ease, box-shadow .18s ease;
  }

  .history-nav:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(228, 3, 46, .25);
  }

  .history-nav:active {
    transform: translateY(1px) scale(.96);
  }

  /* History cards: brighten, don't lift — they aren't clickable,
     so no fake affordance. Rail glow keys off the class color. */
  .history-card {
    transition: border-color .2s ease, box-shadow .2s ease;
  }

  .history-card:hover {
    border-color: rgba(255, 255, 255, .16);
    box-shadow:
      0 18px 38px rgba(0, 0, 0, .5),
      0 0 22px color-mix(in srgb, var(--rail) 16%, transparent);
  }
}

/* ---------- desktop: mid-range history grid ---------------------
   1024–1279px viewports squeeze 5 columns to ~190px and long
   weapon names start wrapping rows out of alignment; 4 columns
   keeps the cards composed until the shell has real room. */

@media (min-width: 1024px) and (max-width: 1279px) {
  .history-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Page indicator: tabular digits so "9 / 10" doesn't jiggle the
   pagination row when the page count changes width. */
.history-page {
  font-variant-numeric: tabular-nums;
}

/* ---------- mobile: tap targets + scroll ergonomics ------------- */

/* Spotlight dots were 9px diamonds — far below any touch guideline.
   Invisible hit-area inflation to 29px, with the gap widened to
   match so adjacent targets meet without overlapping. */
.spotlight-dots {
  gap: 20px;
}

.spotlight-dot {
  position: relative;
}

.spotlight-dot::after {
  content: "";
  position: absolute;
  inset: -10px;
}

/* Same trick for the two small inline text links. */
.spotlight-submit a,
.ragequit-nudge a {
  position: relative;
}

.spotlight-submit a::after,
.ragequit-nudge a::after {
  content: "";
  position: absolute;
  inset: -14px -8px; /* 16px text + 2*14 = 44px effective target */
}

@media (max-width: 768px) {
  /* The readout is a hidden-scrollbar horizontal strip; snap points
     make thumb-flicks settle on chip boundaries instead of mid-chip. */
  .result-readout {
    scroll-snap-type: x proximity;
    scroll-padding-inline: 10px;
  }

  .result-chip {
    scroll-snap-align: start;
  }
}

/* ================================================================
   PASS 2 — interaction feedback
   ================================================================ */

/* Rapid SPIN-mashing on touch must never trigger double-tap zoom,
   and drum text shouldn't highlight on double-click. */
.spin-button,
.class-arrow,
.sound-toggle,
.history-nav,
.spotlight-dot,
.spotlight-watch,
.spotlight-cta {
  touch-action: manipulation;
}

.spin-label,
.class-banner__title {
  user-select: none;
  -webkit-user-select: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* "Working" cue while the reels run: the engine disables the
     button for the whole spin; breathe the label so the desaturated
     button reads as busy, not broken. Opacity-only (compositor). */
  .spin-button[disabled] .spin-label {
    animation: v3-spin-wait 1.1s ease-in-out infinite;
  }

  /* History reveals once, on its first unhide after a spin —
     the [hidden] display:none boundary restarts the animation. */
  .history {
    animation: v3-rise-in .45s cubic-bezier(.22, .9, .32, 1) backwards;
  }
}

@keyframes v3-spin-wait {
  0%, 100% { opacity: .55; }
  50% { opacity: .95; }
}

/* ================================================================
   PASS 3 — mobile ergonomics (device-emulation audited: no real
   overflow, targets ≥44px except the fixes here)
   ================================================================ */

@media (max-width: 768px) {
  /* Horizontal chip strip must not chain into the browser's
     back/forward edge-swipe when it hits its scroll end. */
  .result-readout {
    overscroll-behavior-x: contain;
  }
}

/* ================================================================
   PASS 4 — typography & composition
   ================================================================ */

/* Reel role labels sit on the dark cabinet at 10px — lift them just
   above the muted grey so they read without stealing focus. */
.reel-role {
  color: rgba(244, 244, 245, .56);
}

/* Result chips: the VALUE is the payload — give it the same Barlow
   Condensed italic voice as the card names; the small red label
   stays Chakra. Baseline alignment already handled by the flex. */
.result-chip {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .05em;
}

.result-chip span {
  font-family: "Chakra Petch", sans-serif;
  font-style: normal;
  font-weight: 600;
}

/* Cut the readout's corners so the strip speaks the same chamfered
   language as every other plate on the page. */
.result-readout {
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* This sheet loads after arena.css, so the 15px above would also beat
   the base's ≤768px chip size — restate the mobile scale here. */
@media (max-width: 768px) {
  .result-chip {
    font-size: 13px;
  }
}

/* ================================================================
   PASS 5 — accessibility & robustness
   ================================================================ */

/* Users who ask for more contrast get brighter secondary text and
   firmer hairlines — the red brand identity stays. */
@media (prefers-contrast: more) {
  :root {
    --muted: #c6c6cf;
  }

  .reel-role {
    color: rgba(244, 244, 245, .82);
  }

  .class-banner,
  .machine,
  .card-viewport,
  .history-card,
  .spotlight-card {
    border-color: #55555e;
  }

  .result-chip {
    border-color: rgba(255, 43, 61, .6);
  }

  .class-banner__title {
    color: var(--white);
  }
}

/* Windows High Contrast / forced colors: clip-path still cuts the
   corner geometry, but backgrounds are replaced by the OS — keep the
   controls legible by ensuring borders exist where shape would
   otherwise vanish. */
@media (forced-colors: active) {
  .spin-button,
  .class-arrow,
  .sound-toggle,
  .history-nav,
  .spotlight-watch,
  .spotlight-cta {
    border: 2px solid ButtonText;
  }

  .winline,
  .machine-laser,
  .arena-embers {
    display: none;
  }
}