:root {
      --bg: #0d1117;
      --panel: #161b22;
      --border: #30363d;
      --gold: #e3b341;
      --gold-dim: #9a7b2c;
      --text: #e6edf3;
      --muted: #8b949e;
      --win: #7ec8ff;
      --lose: #f85149;
      --accent: #7ec8ff;
      --ui-font: "Manrope", "Segoe UI", system-ui, sans-serif;
      --display-font: "Cormorant Garamond", "Georgia", serif;
      /* Sand under fight clip — strong yellow (multiply on white MP4) */
      --ring-sand: #fce99a;
      /* Fight (main) + SPIN wheel control — red fill, black trim, white type */
      --fight-btn-r: 999px;
      --fight-btn-surface-top: #ffffff;
      --fight-btn-surface-mid: #f4f6f8;
      --fight-btn-surface-deep: #e8ebee;
      --fight-btn-trim: #ffffff;
      --fight-btn-glow: rgba(255, 255, 255, 0.14);
      --fight-btn-glow-strong: rgba(126, 200, 255, 0.28);
      --fight-spin-info-size: clamp(2.15rem, 11vw, 2.65rem);
      --hud-h: 0px;
    }
    * { box-sizing: border-box; }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    html {
      color-scheme: dark;
    }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--ui-font);
      background: radial-gradient(ellipse 120% 80% at 50% 0%, #1a2332 0%, var(--bg) 55%);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
    }
    /* Enable sound? Y/N — covers the game until they choose */
    .sound-start-gate {
      position: fixed;
      inset: 0;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      max-width: 100%;
      margin: 0;
      z-index: 20000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: clamp(1rem, 4vw, 2rem);
      background: rgba(0, 0, 0, 0.58);
      box-sizing: border-box;
      pointer-events: auto;
      transition: opacity 0.35s ease, visibility 0.35s ease;
    }
    .sound-start-gate--hide {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .sound-start-gate[hidden] {
      display: none !important;
      pointer-events: none !important;
    }
    .sound-start-gate__card {
      flex: 0 0 auto;
      width: min(360px, 92vw);
      max-width: 92vw;
      margin: 0;
      padding: clamp(1.25rem, 4vw, 1.75rem);
      border-radius: 16px;
      border: 1px solid var(--border);
      background: var(--panel);
      pointer-events: auto;
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 12px 40px rgba(0, 0, 0, 0.55),
        0 24px 64px rgba(0, 0, 0, 0.35);
      text-align: center;
    }
    .sound-start-gate__kicker {
      margin: 0 0 0.45rem;
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--gold);
    }
    .sound-start-gate__prompt {
      margin: 0 0 1.15rem;
      font-size: clamp(1.05rem, 3.2vw, 1.2rem);
      font-weight: 600;
      color: var(--text);
    }
    .sound-start-gate__actions {
      display: flex;
      gap: 0.65rem;
      justify-content: center;
      flex-wrap: wrap;
    }
    .sound-start-gate__btn {
      font-family: inherit;
      font-size: 0.95rem;
      font-weight: 600;
      padding: 0.55rem 1.35rem;
      border-radius: 10px;
      cursor: pointer;
      border: 1px solid var(--border);
      min-width: 5rem;
    }
    .sound-start-gate__btn--yes {
      border-color: var(--accent);
      background: rgba(35, 134, 54, 0.22);
      color: #7ee787;
    }
    .sound-start-gate__btn--no {
      border-color: var(--muted);
      background: var(--bg);
      color: var(--muted);
    }
    .sound-start-gate__btn:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
      .sound-start-gate {
        transition: none;
      }
    }
    /* Mobile: no sound prompt — desktop Y/N gate removed from layout */
    @media (max-width: 560px) {
      body {
        overflow-x: hidden;
      }
      .sound-start-gate {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
      }
    }
    .app-shell {
      position: relative;
      z-index: 1;
      max-width: 960px;
      margin: 0 auto;
      padding: 0.55rem 0.55rem 0;
      box-sizing: border-box;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
    }
    .wrap {
      position: relative;
      z-index: 0;
      margin: 0;
      padding: 0;
      max-width: none;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .app-header {
      position: relative;
      z-index: 4;
      display: grid;
      grid-template-columns: 1fr;
      align-items: start;
      justify-items: center;
      gap: 0;
      margin-bottom: 0.45rem;
      min-height: 5.2rem;
      overflow: visible;
      padding: 0.1rem 0 0;
    }
    .app-header__title {
      position: relative;
      z-index: 1;
      margin: 0;
      justify-self: center;
      text-align: center;
      line-height: 0;
      max-width: calc(100% - 6.5rem);
      padding-top: 1.15rem;
    }
    .app-header__logo {
      display: block;
      height: clamp(3.4rem, 12vw, 5.4rem);
      width: auto;
      max-width: 100%;
      object-fit: contain;
      object-position: center;
      pointer-events: none;
    }
    .app-header__menu {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 6;
      flex: 0 0 auto;
    }
    .app-header__balance,
    .app-header__balance--mobile {
      position: absolute;
      top: 0.15rem;
      left: 0;
      z-index: 6;
      display: flex;
      align-items: center;
      gap: 0.35rem;
      min-width: 0;
      font-size: 1.05rem;
      font-variant-numeric: tabular-nums;
      color: #fff;
    }
    .app-header__balance-icon {
      display: flex;
      flex-shrink: 0;
      line-height: 0;
      color: #fff;
    }
    .app-header__balance-svg {
      display: block;
    }
    .app-header__balance-value {
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
    }
    .app-menu-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.35rem;
      height: 2.35rem;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--panel);
      color: #fff;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .app-menu-toggle:hover {
      background: #1f262e;
      border-color: var(--gold-dim);
    }
    .app-menu-toggle:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 2px;
    }
    .app-menu-toggle__bars {
      display: block;
      width: 1.1rem;
      height: 2px;
      background: currentColor;
      border-radius: 1px;
      box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
    }
    .app-menu-dropdown {
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      width: min(92vw, 22.5rem);
      max-height: min(78dvh, calc(100dvh - 4.5rem));
      padding: 0.45rem 0.45rem 0.35rem;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background:
        linear-gradient(165deg, rgba(28, 22, 18, 0.98) 0%, rgba(12, 12, 14, 0.98) 100%);
      box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
      z-index: 40;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .app-menu-dropdown::before {
      content: "";
      display: block;
      height: 5px;
      margin: -0.45rem -0.45rem 0.55rem;
      background:
        repeating-linear-gradient(
          90deg,
          #c62828 0 7px,
          #f5f5f5 7px 14px
        );
      opacity: 0.92;
    }
    .app-menu-panel {
      display: flex;
      flex-direction: column;
      gap: 0.28rem;
    }
    .app-menu-panel.is-seg-open .app-menu-seg:not(.is-open) .app-menu-seg__body {
      display: none !important;
    }
    .app-menu-seg {
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      overflow: hidden;
    }
    .app-menu-seg.is-open {
      border-color: rgba(227, 179, 65, 0.28);
      background: rgba(255, 255, 255, 0.05);
      overflow: visible;
    }
    .app-menu-seg__head {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      width: 100%;
      padding: 0.7rem 0.75rem;
      border: none;
      background: transparent;
      color: #f3eee6;
      font-family: Montserrat, var(--ui-font);
      font-size: 0.86rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-align: left;
      cursor: pointer;
    }
    .app-menu-seg__head:hover {
      background: rgba(255, 255, 255, 0.04);
    }
    .app-menu-seg__head:focus-visible {
      outline: 2px solid rgba(227, 179, 65, 0.65);
      outline-offset: -2px;
    }
    .app-menu-seg__rope {
      flex: 0 0 auto;
      width: 0.85rem;
      height: 0.85rem;
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 35%, #fff 0 18%, transparent 19%),
        conic-gradient(from 20deg, #c62828 0 25%, #f5f5f5 25% 50%, #c62828 50% 75%, #f5f5f5 75% 100%);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    }
    .app-menu-seg__label {
      flex: 1 1 auto;
      min-width: 0;
    }
    .app-menu-panel.is-seg-open .app-menu-seg:not(.is-open) .app-menu-seg__head {
      padding: 0.55rem 0.75rem;
      opacity: 0.72;
    }
    .app-menu-seg__body {
      padding: 0 0.75rem 0.85rem;
      animation: appMenuSegIn 0.22s ease;
    }
    @keyframes appMenuSegIn {
      from {
        opacity: 0;
        transform: translateY(-4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .app-menu-seg__body[hidden] {
      display: none !important;
    }
    .app-menu-seg__back {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      margin: 0 0 0.55rem;
      padding: 0.28rem 0.55rem 0.28rem 0.4rem;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 999px;
      background: transparent;
      color: #f0e6d2;
      font-family: Montserrat, var(--ui-font);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .app-menu-seg__back:hover {
      border-color: rgba(227, 179, 65, 0.55);
      color: #fff;
    }
    .app-menu-seg__lead {
      margin: 0 0 0.55rem;
      color: rgba(240, 230, 210, 0.7);
      font-size: 0.82rem;
    }
    .app-menu-seg__action {
      display: block;
      width: 100%;
      padding: 0.65rem 0.75rem;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 10px;
      background: #000;
      color: #fff;
      font-family: Montserrat, var(--ui-font);
      font-size: 0.88rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .app-menu-seg__action:hover {
      border-color: #fff;
    }
    .app-menu-seg__list {
      margin: 0;
      padding: 0 0 0 1.1rem;
      color: rgba(243, 238, 230, 0.92);
      font-size: 0.84rem;
      line-height: 1.45;
    }
    .app-menu-seg__list li + li {
      margin-top: 0.45rem;
    }
    .app-menu-seg__list--rules {
      list-style: disc;
    }
    .app-menu-seg__hint {
      margin: 0 0 0.5rem;
      color: rgba(240, 230, 210, 0.65);
      font-size: 0.82rem;
    }
    .app-menu-seg__meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0.35rem 0.75rem;
      flex: 0 0 auto;
      margin: 0.55rem 0 0;
      padding-top: 0.35rem;
      border-top: none;
      color: rgba(240, 230, 210, 0.72);
      font-family: Montserrat, var(--ui-font);
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .app-menu-seg__body--rules {
      display: flex;
      flex-direction: column;
      min-height: 0;
      max-height: min(48dvh, 20rem);
      padding-bottom: 0.75rem;
    }
    .app-menu-seg__scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      padding-right: 0.15rem;
    }
    .app-menu-seg__body--history {
      max-height: min(48dvh, 20rem);
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .app-menu-seg__body--history .bet-history-table {
      font-size: 0.72rem;
    }
    .app-menu-dropdown__item {
      display: block;
      width: 100%;
      padding: 0.55rem 1rem;
      border: none;
      background: transparent;
      color: var(--text);
      font: inherit;
      text-align: left;
      cursor: pointer;
    }
    .app-menu-dropdown__item:hover {
      background: rgba(227, 179, 65, 0.1);
    }
    .app-menu-dropdown__item:focus-visible {
      outline: none;
      background: rgba(227, 179, 65, 0.15);
    }
    .app-modal {
      position: fixed;
      inset: 0;
      z-index: 18000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      box-sizing: border-box;
    }
    .app-modal[hidden] {
      display: none !important;
    }
    .app-modal__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      cursor: pointer;
    }
    .app-modal__panel {
      position: relative;
      width: 100%;
      max-width: 28rem;
      max-height: min(85vh, 640px);
      overflow: auto;
      padding: 1.25rem 1.35rem;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--panel);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }
    .app-modal__panel--wide {
      max-width: 36rem;
    }
    .app-modal__title {
      margin: 0 0 0.85rem;
      font-size: 1.15rem;
      color: var(--gold);
    }
    .app-modal__list {
      margin: 0 0 1rem;
      padding-left: 1.25rem;
      color: var(--text);
      line-height: 1.55;
      font-size: 0.95rem;
    }
    .app-modal__list li {
      margin-bottom: 0.45rem;
    }
    .app-modal__hint {
      margin: 0 0 1rem;
      color: var(--muted);
      font-size: 0.95rem;
    }
    .fight-spin-info-modal-body p {
      margin: 0 0 0.65rem;
    }
    .fight-spin-info-modal-body p:last-child {
      margin-bottom: 0;
    }
    .app-modal__close {
      font: inherit;
      font-weight: 600;
      padding: 0.5rem 1.1rem;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text);
      cursor: pointer;
    }
    .app-modal__close:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 2px;
    }
    .bet-history-table-wrap {
      overflow-x: auto;
      margin-bottom: 1rem;
      max-height: 45vh;
      overflow-y: auto;
    }
    .bet-history-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.82rem;
    }
    .bet-history-table th,
    .bet-history-table td {
      padding: 0.4rem 0.5rem;
      text-align: left;
      border-bottom: 1px solid var(--border);
    }
    .bet-history-table th {
      color: var(--muted);
      font-weight: 600;
    }
    header {
      text-align: center;
      margin-bottom: 1rem;
    }
    header h1 {
      margin: 0;
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--gold);
    }
    /* Chikara-moji–style banner (力文字): chunky display + red / blue / white + yellow glint */
    .game-title--chikara {
      margin: 0;
      font-family: var(--display-font);
      font-size: clamp(1.42rem, 4.8vw, 2.05rem);
      font-weight: 600;
      letter-spacing: 0.04em;
      line-height: 1.25;
      display: inline-flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: center;
      gap: 0.35em 0.45em;
      text-transform: none;
      filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
    }
    .game-title--chikara .game-title__word {
      position: relative;
      display: inline-block;
      -webkit-text-stroke: 1.5px rgba(18, 12, 28, 0.95);
      paint-order: stroke fill;
    }
    .game-title--chikara .game-title__word--trompey {
      color: #ff2d3d;
      text-shadow:
        0 0 14px rgba(255, 80, 90, 0.55),
        0 0 22px rgba(255, 220, 120, 0.35),
        1px 1px 0 #ffffff,
        2px 3px 0 rgba(120, 0, 20, 0.45);
    }
    .game-title--chikara .game-title__vs {
      font-size: 0.72em;
      color: #ffffff;
      letter-spacing: 0.12em;
      -webkit-text-stroke: 1px rgba(30, 60, 140, 0.9);
      paint-order: stroke fill;
      text-shadow:
        0 0 10px rgba(255, 248, 200, 0.55),
        0 0 18px rgba(80, 140, 255, 0.4),
        1px 2px 0 rgba(20, 40, 100, 0.5);
    }
    .game-title--chikara .game-title__word--putey {
      color: #2b6bff;
      text-shadow:
        0 0 14px rgba(80, 150, 255, 0.5),
        0 0 20px rgba(255, 235, 150, 0.28),
        1px 1px 0 #ffffff,
        2px 3px 0 rgba(0, 35, 120, 0.5);
    }
    /* Header: keep “Trompey vs Putey” on one line (no flex-wrap from .game-title--chikara) */
    .app-header .game-title.game-title--chikara {
      flex-wrap: nowrap;
      white-space: nowrap;
      max-width: 100%;
      min-width: 0;
      font-size: clamp(0.82rem, 2.65vw + 0.32rem, 1.58rem);
      gap: 0.2em 0.32em;
      line-height: 1.15;
    }
    header p {
      margin: 0.35rem 0 0;
      font-size: 0.85rem;
      color: var(--muted);
    }
    /* Sumo arena: crowd, lights, dohyo platform */
    .arena-wrap {
      position: relative;
      margin-bottom: 0;
      border-radius: 16px;
      border: 1px solid var(--border);
      overflow: hidden;
      min-height: clamp(360px, 68dvh, 820px);
      flex: 1 1 auto;
      background: #120a18;
      transition: background-color 0.4s ease;
      /* Photo alignment; fight clip ellipse (relative to .fight-ring-composite box) */
      --arena-photo-pos: 50% 68%;
      --fight-ring-clip: ellipse(50% 46% at 50% 56%);
    }
    @media (min-width: 600px) {
      .arena-wrap { min-height: clamp(340px, 58vh, 780px); }
    }
    .arena-wrap.fighting {
      background: #000000;
      overflow: hidden;
    }
    body.dojo-wheel-spinning .arena-wrap::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 80;
      pointer-events: none;
      background: rgba(0, 0, 0, 0.42);
    }
    body.dojo-wheel-spinning .fighter > .hud-choose {
      visibility: hidden;
    }
    .arena-wrap.fight-intro {
      transition: background-color 2.6s ease-in-out;
    }
    .arena-wrap.fight-intro .arena-backdrop {
      filter: brightness(0.2);
      transition: filter 2.8s cubic-bezier(0.33, 0, 0.25, 1);
    }
    .arena-wrap.fight-intro:not(.fighting) {
      background: #08060c;
      transition: background-color 2.6s ease-in-out;
    }
    /* Solid black titles while the clip warms up under them */
    .fight-intro-overlay {
      position: absolute;
      inset: 0;
      z-index: 25;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.25rem;
      pointer-events: none;
      background: #000000;
      text-align: center;
    }
    .arena-wrap.fight-intro .fight-intro-overlay {
      animation: none;
      background: #000000;
    }
    @media (prefers-reduced-motion: reduce) {
      .arena-wrap.fight-intro .fight-intro-overlay {
        animation: none;
        background: #000000;
      }
      .arena-wrap.fight-intro .arena-backdrop {
        transition: filter 0.35s ease;
      }
    }
    /* Phone: titles over the live clip so hits are not eaten by a black screen */
    .arena-wrap.fight-intro-live .fight-intro-overlay {
      align-items: flex-start;
      padding-top: 12%;
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(0, 0, 0, 0.18) 38%,
        rgba(0, 0, 0, 0) 62%
      );
    }
    .arena-wrap.fight-intro-live .arena-backdrop {
      filter: none;
    }
    .fight-intro-overlay[hidden] {
      display: none !important;
    }
    .fight-intro-overlay__line {
      margin: 0;
      max-width: 22rem;
      font-size: clamp(1.05rem, 4.2vw, 1.65rem);
      font-weight: 800;
      letter-spacing: 0.12em;
      line-height: 1.35;
      text-transform: uppercase;
      color: #f0e6d2;
      text-shadow:
        0 0 24px rgba(227, 179, 65, 0.35),
        0 2px 12px rgba(0, 0, 0, 0.95);
    }
    .arena-backdrop {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-color: #0a0610;
      background-image: url("src/Background_image.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: var(--arena-photo-pos);
      filter: brightness(1);
      transition:
        background-color 0.4s ease,
        background-image 0.4s ease,
        filter 2.8s cubic-bezier(0.33, 0, 0.25, 1);
    }
    .arena-wrap.fighting .arena-backdrop {
      background-image: none;
      background-color: #000000;
    }
    /* Multi / neon sparkles between crowd top and fighter heads (idle / intro / result) */
    .arena-upper-sparkles {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      transition: opacity 0.35s ease, visibility 0.35s ease;
    }
    .arena-wrap.fighting .arena-upper-sparkles {
      opacity: 0;
      visibility: hidden;
    }
    /* Stadium fascia — lit marquee above the crowd (idle / pick / result) */
    .arena-stadium-marquee {
      display: none;
      position: absolute;
      left: 50%;
      top: clamp(1.45rem, 5.2vh, 3.4rem);
      transform: translateX(-50%);
      /* Above .fight-atmosphere (10) so crowd sparklers don’t paint over the sign */
      z-index: 11;
      pointer-events: none;
      width: min(96%, 26rem);
      padding: 0.32rem 0.45rem 0.42rem;
      border-radius: 8px;
      background: linear-gradient(
        180deg,
        rgba(42, 26, 58, 0.94) 0%,
        rgba(14, 8, 22, 0.96) 48%,
        rgba(28, 16, 40, 0.94) 100%
      );
      border: 1px solid rgba(100, 70, 50, 0.75);
      box-shadow:
        0 6px 28px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(255, 120, 60, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
      transition: opacity 0.4s ease, visibility 0.4s ease;
    }
    .arena-wrap.fighting .arena-stadium-marquee {
      opacity: 0;
      visibility: hidden;
    }
    .arena-stadium-marquee__bulbs {
      position: absolute;
      left: 8px;
      right: 8px;
      top: 5px;
      height: 6px;
      border-radius: 3px;
      background-image: radial-gradient(
        circle at 50% 50%,
        #fff8e8 0%,
        #ffc978 42%,
        rgba(200, 80, 30, 0.55) 68%,
        transparent 71%
      );
      background-size: 10px 7px;
      background-repeat: repeat-x;
      background-position: 2px center;
      opacity: 0.9;
      box-shadow:
        0 0 8px rgba(255, 200, 120, 0.55),
        0 0 14px rgba(255, 140, 60, 0.25);
    }
    .arena-stadium-marquee__text {
      position: relative;
      margin: 0.55rem 0.5rem 0.12rem;
      font-family: "RocknRoll One", system-ui, sans-serif;
      font-size: clamp(0.58rem, 2.5vw, 0.86rem);
      font-weight: 400;
      letter-spacing: 0.2em;
      text-indent: 0.2em;
      text-align: center;
      line-height: 1.3;
      text-transform: uppercase;
      color: #fff4dc;
      text-shadow:
        0 0 10px rgba(255, 238, 200, 0.95),
        0 0 22px rgba(255, 130, 70, 0.62),
        0 0 36px rgba(255, 70, 40, 0.38),
        0 1px 2px rgba(0, 0, 0, 0.92);
      animation: arena-marquee-glow 2.5s ease-in-out infinite;
    }
    @keyframes arena-marquee-glow {
      0%,
      100% {
        opacity: 1;
        filter: brightness(1);
      }
      50% {
        opacity: 0.94;
        filter: brightness(1.09);
      }
    }
    @media (max-width: 380px) {
      .arena-stadium-marquee__text {
        letter-spacing: 0.1em;
        text-indent: 0.1em;
        font-size: 0.52rem;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .arena-stadium-marquee__text {
        animation: none;
      }
    }
    /* Prize wheel overlay: above HUD so the spin is visible */
    .arena-wrap > .dojo-wheel-layer {
      position: absolute;
      left: 50%;
      top: 38%;
      right: auto;
      bottom: auto;
      width: auto;
      height: auto;
      z-index: 90;
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;
      visibility: visible;
      transform: translate(-50%, -50%);
    }
    .arena-wrap.fighting > .dojo-wheel-layer {
      top: 16%;
    }
    .dojo-wheel-layer[hidden] {
      display: none !important;
    }
    .dojo-wheel-stack {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      pointer-events: none;
    }
    /* Needle at top, points down at the segment under it */
    .dojo-wheel-needle {
      width: 0;
      height: 0;
      border-left: clamp(7px, 1.8vw, 11px) solid transparent;
      border-right: clamp(7px, 1.8vw, 11px) solid transparent;
      border-top: clamp(14px, 3.6vw, 20px) solid #ffd56a;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px rgba(255, 200, 100, 0.85));
      margin-bottom: -2px;
      z-index: 2;
    }
    /* Desktop: wheel size (+10% vs original 3cm) */
    .dojo-wheel {
      --dojo-spin-dur: 2s;
      --lbl-rad: calc(1.72rem * 1.1);
      width: calc(3cm * 1.1);
      height: calc(3cm * 1.1);
      flex-shrink: 0;
      position: relative;
      border-radius: 50%;
      overflow: visible;
      transform-origin: 50% 50%;
      box-shadow:
        0 0 0 2px rgba(255, 236, 160, 0.95),
        0 0 10px rgba(255, 120, 200, 0.85),
        0 0 22px rgba(120, 210, 255, 0.7),
        0 0 34px rgba(255, 200, 80, 0.55),
        0 4px 20px rgba(0, 0, 0, 0.4);
    }
    /* Carnival burst: conic spectrum + inner jewel depth */
    .dojo-wheel::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      z-index: 0;
      background:
        radial-gradient(
          circle at 50% 50%,
          rgba(40, 20, 60, 0.35) 0%,
          transparent 62%
        ),
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.55) 0%, transparent 42%),
        conic-gradient(
          from -18deg,
          #ff2d55 0deg,
          #ff9f1c 40deg,
          #ffe066 80deg,
          #7af8c8 120deg,
          #38bdf8 160deg,
          #a78bfa 200deg,
          #f472b6 240deg,
          #ff2d95 280deg,
          #ff2d55 360deg
        );
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.45),
        inset 0 -8px 16px rgba(0, 0, 0, 0.22),
        inset 0 3px 12px rgba(255, 255, 255, 0.35);
    }
    body.dojo-wheel-spinning .dojo-wheel {
      width: min(32vw, 14rem);
      height: min(32vw, 14rem);
    }
    /* Specular shine (spins with wheel) */
    .dojo-wheel::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      z-index: 0;
      pointer-events: none;
      background: radial-gradient(
        ellipse 130% 90% at 32% 18%,
        rgba(255, 255, 255, 0.75) 0%,
        rgba(255, 248, 200, 0.2) 28%,
        transparent 52%
      );
      mix-blend-mode: soft-light;
    }
    /* Uploaded wheel image or SVG fallback: show art only, no painted disc on top */
    .dojo-wheel--custom::before,
    .dojo-wheel--custom::after,
    .dojo-wheel--fallback::before,
    .dojo-wheel--fallback::after {
      display: none !important;
      content: none !important;
    }
    .dojo-wheel__svg-fallback {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      border-radius: 50%;
      overflow: visible;
      pointer-events: none;
    }
    .dojo-wheel__svg-fallback[hidden] {
      display: none !important;
    }
    /* PNG / video wheel: never stack the vector wedge art on top of the asset */
    .dojo-wheel--custom .dojo-wheel__svg-fallback {
      display: none !important;
    }
    .dojo-wheel--fallback .dojo-wheel__svg-fallback {
      display: block !important;
    }
    #dojo-wheel.dojo-wheel--custom:not(.dojo-wheel--fallback) #dojo-wheel-fallback {
      display: none !important;
      visibility: hidden !important;
    }
    /* Photo underneath; wedges + labels stay readable on top */
    .dojo-wheel--custom .dojo-wheel__svg-wedges path {
      fill-opacity: 0.58;
    }
    .dojo-wheel--fallback .dojo-wheel__svg-wedges path {
      fill-opacity: 1;
    }
    @media (max-width: 639px) {
      .dojo-wheel {
        width: clamp(2.75cm, 28.6vw, 4.62cm);
        height: clamp(2.75cm, 28.6vw, 4.62cm);
        --lbl-rad: calc(1.38rem * 1.1);
      }
      .arena-wrap > .dojo-wheel-layer {
        top: 32%;
      }
      .arena-wrap.fighting > .dojo-wheel-layer {
        top: 14%;
      }
      body.dojo-wheel-spinning .dojo-wheel {
        width: min(46vw, 11.5rem);
        height: min(46vw, 11.5rem);
      }
    }
    .dojo-wheel__video {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: none;
      border-radius: 50%;
      clip-path: circle(50% at 50% 50%);
      pointer-events: none;
      background: #1a1520;
    }
    .dojo-wheel--video .dojo-wheel__video {
      display: block;
    }
    .dojo-wheel--video .dojo-wheel__img {
      display: none !important;
    }
    .dojo-wheel--video .dojo-wheel__svg-fallback {
      display: none !important;
    }
    .dojo-wheel--video .dojo-wheel__html-labels {
      display: none !important;
    }
    /* PNG / static art usually already has segment text — hide overlay ring (reads as a second wheel) */
    .dojo-wheel--custom:not(.dojo-wheel--video) .dojo-wheel__html-labels {
      display: none !important;
    }
    .dojo-wheel__html-labels {
      position: absolute;
      inset: 0;
      z-index: 5;
      pointer-events: none;
      border-radius: 50%;
    }
    .dojo-wheel__lbl {
      position: absolute;
      left: 50%;
      top: 50%;
      font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
      font-size: clamp(6px, 2.8vmin, 11px);
      font-weight: 800;
      line-height: 1;
      color: #fff;
      text-shadow:
        0 0 3px #000,
        0 1px 2px #000,
        0 -1px 2px #000;
      white-space: nowrap;
      transform: translate(-50%, -50%) rotate(var(--seg-deg, 0deg)) translateY(calc(-1 * var(--lbl-rad))) rotate(calc(-1 * var(--seg-deg, 0deg)));
    }
    .dojo-wheel__img {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
      border-radius: 50%;
      clip-path: circle(50% at 50% 50%);
      filter:
        drop-shadow(0 0 6px rgba(255, 220, 120, 0.9))
        drop-shadow(0 0 14px rgba(255, 100, 200, 0.55))
        drop-shadow(0 0 20px rgba(100, 200, 255, 0.4))
        drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
    }
    .dojo-wheel--custom .dojo-wheel__img {
      filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 14px rgba(255, 210, 120, 0.45));
    }
    .dojo-wheel--spinning {
      animation: dojo-wheel-spin-dynamic var(--dojo-spin-dur, 2s) cubic-bezier(0.18, 0.72, 0.22, 1) forwards;
    }
    @keyframes dojo-wheel-spin-dynamic {
      from {
        transform: rotate(var(--dojo-from, 0deg));
      }
      to {
        transform: rotate(var(--dojo-to, 1080deg));
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .dojo-wheel--spinning {
        animation: dojo-wheel-spin-dynamic-reduced var(--dojo-spin-dur, 0.55s) ease-out forwards;
      }
      @keyframes dojo-wheel-spin-dynamic-reduced {
        from {
          transform: rotate(var(--dojo-from, 0deg));
        }
        to {
          transform: rotate(var(--dojo-to, 120deg));
        }
      }
      .dojo-wheel {
        box-shadow:
          0 0 0 2px rgba(255, 236, 160, 0.75),
          0 0 12px rgba(255, 180, 100, 0.5),
          0 4px 16px rgba(0, 0, 0, 0.35);
      }
      .dojo-wheel__img {
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
      }
    }
    .arena-sparkle {
      position: absolute;
      width: clamp(11px, 2.4vw, 18px);
      height: clamp(11px, 2.4vw, 18px);
      border-radius: 50%;
      pointer-events: none;
      animation: arena-sparkle-twinkle 2.4s ease-in-out infinite;
    }
    .arena-sparkle--multi {
      /* Off-center so it doesn’t sit behind / bleed through the stadium marquee */
      left: 82%;
      top: clamp(20%, 24vh, 34%);
      transform: translate(-50%, -50%);
      background: conic-gradient(
        from 25deg,
        #ff6b9d,
        #ffd93d,
        #6bcfff,
        #c084fc,
        #7af8c8,
        #ff6b9d
      );
      box-shadow:
        0 0 10px rgba(255, 210, 120, 0.95),
        0 0 22px rgba(200, 120, 255, 0.55),
        0 0 34px rgba(100, 200, 255, 0.35);
      animation-delay: 0.1s;
    }
    .arena-sparkle--blue {
      left: 26%;
      top: clamp(28%, 33vh, 42%);
      transform: translate(-50%, -50%);
      background: radial-gradient(circle at 35% 35%, #e0f4ff 0%, #38bdf8 42%, #0369a1 78%, transparent 100%);
      box-shadow:
        0 0 12px #22d3ee,
        0 0 26px rgba(34, 211, 238, 0.55),
        0 0 40px rgba(14, 165, 233, 0.35);
      animation-delay: 0.55s;
    }
    .arena-sparkle--pink {
      left: 74%;
      top: clamp(28%, 33vh, 42%);
      transform: translate(-50%, -50%);
      background: radial-gradient(circle at 40% 35%, #ffe4f5 0%, #ff4fa3 45%, #be185d 78%, transparent 100%);
      box-shadow:
        0 0 12px #ff2d95,
        0 0 26px rgba(255, 45, 149, 0.5),
        0 0 38px rgba(236, 72, 153, 0.35);
      animation-delay: 0.95s;
    }
    @keyframes arena-sparkle-twinkle {
      0%, 100% { opacity: 0.62; filter: brightness(0.92); }
      50% { opacity: 1; filter: brightness(1.2); }
    }
    @media (prefers-reduced-motion: reduce) {
      .arena-sparkle {
        animation: none !important;
        opacity: 0.85;
      }
    }
    /* Marquee + win-line fireworks (embers sit above the prompt) */
    .arena-prompt-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 0;
      min-height: 0;
      position: relative;
      z-index: 2;
    }
    .arena-win-fireworks {
      position: relative;
      width: min(26rem, 94vw);
      height: 0;
      margin: 0;
      pointer-events: none;
      overflow: hidden;
      visibility: visible;
    }
    .arena-prompt-stack:has(.arena-prompt--result-win) .arena-win-fireworks,
    .arena-prompt-stack--has-win-fx .arena-win-fireworks {
      height: clamp(5.5rem, 16vw, 8rem);
      margin: 0 auto -0.2rem;
      overflow: visible;
      transform: scale(1.45);
      transform-origin: bottom center;
    }
    .arena-win-fire__ember {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 9px;
      height: 9px;
      margin-left: -4.5px;
      border-radius: 50%;
      opacity: 0;
      transform: translate(-50%, 0);
      animation: none;
      will-change: transform, opacity;
    }
    .arena-win-fire__ember--purple {
      background: radial-gradient(circle at 32% 32%, #f5f3ff 0%, #c4b5fd 35%, #7c3aed 100%);
      box-shadow: 0 0 10px #a78bfa, 0 0 4px #ede9fe;
    }
    .arena-win-fire__ember--turquoise {
      background: radial-gradient(circle at 32% 32%, #ecfeff 0%, #5eead4 38%, #0d9488 100%);
      box-shadow: 0 0 10px #2dd4bf, 0 0 4px #ccfbf1;
    }
    .arena-win-fire__ember--orange {
      background: radial-gradient(circle at 32% 32%, #fff7ed 0%, #fdba74 38%, #ea580c 100%);
      box-shadow: 0 0 10px #fb923c, 0 0 4px #ffedd5;
    }
    .arena-prompt-stack:has(.arena-prompt--result-win) .arena-win-fire__ember,
    .arena-prompt-stack--has-win-fx .arena-win-fire__ember {
      animation: arena-win-firework-burst 1.2s ease-out infinite;
    }
    @keyframes arena-win-firework-burst {
      0% {
        transform: translate(-50%, 0) scale(1.15);
        opacity: 0;
      }
      8% {
        opacity: 1;
      }
      100% {
        transform: translate(calc(-50% + var(--dx, 0px) * 1.35), calc(var(--dy, -120px) * 1.35)) scale(0.18);
        opacity: 0;
      }
    }
    .arena-win-fire__ember:nth-child(1) {
      --dx: -12px;
      --dy: -72px;
      animation-delay: 0s;
    }
    .arena-win-fire__ember:nth-child(2) {
      --dx: 18px;
      --dy: -88px;
      animation-delay: 0.05s;
    }
    .arena-win-fire__ember:nth-child(3) {
      --dx: -28px;
      --dy: -64px;
      animation-delay: 0.1s;
    }
    .arena-win-fire__ember:nth-child(4) {
      --dx: 42px;
      --dy: -76px;
      animation-delay: 0.02s;
    }
    .arena-win-fire__ember:nth-child(5) {
      --dx: -52px;
      --dy: -52px;
      animation-delay: 0.12s;
    }
    .arena-win-fire__ember:nth-child(6) {
      --dx: 8px;
      --dy: -100px;
      animation-delay: 0.07s;
    }
    .arena-win-fire__ember:nth-child(7) {
      --dx: 58px;
      --dy: -48px;
      animation-delay: 0.15s;
    }
    .arena-win-fire__ember:nth-child(8) {
      --dx: -38px;
      --dy: -92px;
      animation-delay: 0.03s;
    }
    .arena-win-fire__ember:nth-child(9) {
      --dx: 28px;
      --dy: -56px;
      animation-delay: 0.09s;
    }
    .arena-win-fire__ember:nth-child(10) {
      --dx: -8px;
      --dy: -108px;
      animation-delay: 0.14s;
    }
    .arena-win-fire__ember:nth-child(11) {
      --dx: 68px;
      --dy: -62px;
      animation-delay: 0.06s;
    }
    .arena-win-fire__ember:nth-child(12) {
      --dx: -62px;
      --dy: -70px;
      animation-delay: 0.11s;
    }
    .arena-win-fire__ember:nth-child(13) {
      --dx: 2px;
      --dy: -78px;
      animation-delay: 0.04s;
    }
    .arena-win-fire__ember:nth-child(14) {
      --dx: -22px;
      --dy: -58px;
      animation-delay: 0.16s;
    }
    .arena-win-fire__ember:nth-child(15) {
      --dx: 48px;
      --dy: -90px;
      animation-delay: 0.08s;
    }
    .arena-win-fire__ember:nth-child(16) {
      --dx: -48px;
      --dy: -84px;
      animation-delay: 0.13s;
    }
    .arena-win-fire__ember:nth-child(17) {
      --dx: 22px;
      --dy: -68px;
      animation-delay: 0.01s;
    }
    .arena-win-fire__ember:nth-child(18) {
      --dx: -18px;
      --dy: -96px;
      animation-delay: 0.17s;
    }
    .arena-win-fire__ember:nth-child(19) {
      --dx: 36px;
      --dy: -104px;
      animation-delay: 0.05s;
    }
    .arena-win-fire__ember:nth-child(20) {
      --dx: -32px;
      --dy: -48px;
      animation-delay: 0.1s;
    }
    .arena-win-fire__ember:nth-child(21) {
      --dx: 12px;
      --dy: -112px;
      animation-delay: 0.12s;
    }
    .arena-win-fire__ember:nth-child(22) {
      --dx: -58px;
      --dy: -58px;
      animation-delay: 0.07s;
    }
    .arena-win-fire__ember:nth-child(23) {
      --dx: 52px;
      --dy: -82px;
      animation-delay: 0.14s;
    }
    .arena-win-fire__ember:nth-child(24) {
      --dx: -2px;
      --dy: -118px;
      animation-delay: 0.09s;
    }
    @media (prefers-reduced-motion: reduce) {
      .arena-prompt-stack:has(.arena-prompt--result-win) .arena-win-fire__ember,
      .arena-prompt-stack--has-win-fx .arena-win-fire__ember {
        animation: none !important;
        opacity: 0.55;
        transform: translate(calc(-50% + var(--dx, 0px) * 0.35), calc(var(--dy, -120px) * 0.35)) scale(0.85);
      }
    }
    @media (max-width: 560px) {
      .arena-prompt-stack {
        z-index: 25;
        position: relative;
        overflow: visible;
      }
      .arena-prompt-stack:has(.arena-prompt--result-win) .arena-win-fireworks,
      .arena-prompt-stack--has-win-fx .arena-win-fireworks {
        /* Tall enough for the full fountain — was clipping under the arena edge */
        height: clamp(8.5rem, 28vw, 11rem);
        width: min(96vw, 32rem);
        margin-bottom: 0.1rem;
        overflow: visible;
        transform: scale(1.55);
        transform-origin: bottom center;
      }
      .arena-win-fire__ember {
        width: 10px;
        height: 10px;
        margin-left: -5px;
      }
    }
    /* Directly under the arena card — not overlaid on the ring */
    .arena-prompt {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: center;
      gap: 0 0.15rem;
      margin: 0 auto;
      max-width: min(36rem, 100%);
      min-height: 1.35em;
      padding: 0.45rem 0.65rem;
      text-align: center;
      font-size: clamp(1rem, 3.1vw, 1.22rem);
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1.35;
      color: #f0f4f8;
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(22, 27, 34, 0.55) 0%, rgba(13, 17, 23, 0.35) 100%);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
      transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        color 0.2s ease,
        transform 0.25s ease;
    }
    .arena-prompt__lead {
      flex: 0 1 auto;
      text-wrap: balance;
    }
    .arena-prompt__sep {
      flex: 0 0 auto;
      color: var(--muted);
      font-weight: 600;
    }
    .arena-prompt__extra {
      flex: 1 1 12rem;
      min-width: 0;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.03em;
      color: var(--gold-dim);
      text-shadow: 0 0 14px rgba(227, 179, 65, 0.2);
    }
    .arena-prompt--confirmed .arena-prompt__lead {
      color: var(--gold);
      text-shadow: 0 0 20px rgba(227, 179, 65, 0.25);
    }
    .arena-prompt--error {
      border-color: rgba(248, 113, 113, 0.55);
      box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.25), 0 8px 24px rgba(0, 0, 0, 0.35);
    }
    .arena-prompt--error .arena-prompt__lead {
      color: #ffb4b4;
      text-shadow: 0 0 14px rgba(248, 113, 113, 0.35);
    }
    .arena-prompt--confirmed .arena-prompt__extra {
      color: #f0d78a;
    }
    .arena-prompt--result {
      font-size: clamp(1.05rem, 3.4vw, 1.32rem);
      padding: 0.55rem 0.85rem;
      border-color: rgba(227, 179, 65, 0.22);
      background: linear-gradient(165deg, rgba(28, 34, 48, 0.92) 0%, rgba(14, 18, 26, 0.88) 100%);
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 12px 36px rgba(0, 0, 0, 0.45),
        0 0 48px rgba(227, 179, 65, 0.08);
    }
    .arena-prompt--result .arena-prompt__lead {
      color: #fff8e8;
      text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
    }
    .arena-prompt--result-win .arena-prompt__extra {
      color: #aff4c6;
      text-shadow:
        0 0 18px rgba(63, 185, 80, 0.55),
        0 0 32px rgba(46, 160, 67, 0.35);
    }
    .arena-prompt--result-lose .arena-prompt__extra {
      color: #ffb4a9;
      text-shadow: 0 0 14px rgba(248, 81, 73, 0.35);
    }
    .wrap.fight-flow .arena-prompt-stack:not(:has(.arena-prompt--result)) .arena-prompt {
      opacity: 0;
      visibility: hidden;
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      margin: 0;
      padding: 0;
    }
    .wrap.fight-flow .arena-prompt-stack:not(:has(.arena-prompt--result)):not(.arena-prompt-stack--has-win-fx) .arena-win-fireworks {
      height: 0;
      margin: 0;
      overflow: hidden;
      visibility: hidden;
    }
    .wrap.fight-flow .arena-prompt-stack.arena-prompt-stack--has-win-fx .arena-win-fireworks {
      height: clamp(8.5rem, 26vw, 11rem);
      width: min(94vw, 32rem);
      margin: 0 auto 0.1rem;
      overflow: visible;
      visibility: visible;
      transform: scale(1.5);
      transform-origin: bottom center;
    }
    /* Result summary: stack visible over fight-flow */
    .wrap.fight-flow .arena-wrap.result-phase ~ .arena-prompt-stack {
      margin-bottom: 0.85rem;
    }
    .wrap.fight-flow .arena-wrap.result-phase ~ .arena-prompt-stack .arena-prompt.arena-prompt--result {
      opacity: 1;
      visibility: visible;
      position: relative;
      width: auto;
      max-width: min(38rem, calc(100% - 1rem));
      height: auto;
      overflow: visible;
      clip: auto;
      clip-path: none;
      white-space: normal;
      margin: 0 auto;
      padding: 0.55rem 0.85rem;
    }
    /* Green + red sweepers — only while fight clip plays (black stadium) */
    .fight-spotlights {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      overflow: hidden;
      opacity: 0;
      transition: opacity 0.45s ease;
    }
    .arena-wrap.fighting .fight-spotlights {
      opacity: 0.52;
      clip-path: none;
      z-index: 2;
    }
    .fight-spot {
      position: absolute;
      width: 58%;
      height: 92%;
      top: -8%;
      border-radius: 50%;
      filter: blur(38px);
      mix-blend-mode: screen;
      opacity: 0.72;
      will-change: transform;
    }
    .arena-wrap.fighting .fight-spot {
      width: 46%;
      height: 64%;
      top: -6%;
      filter: blur(44px);
      opacity: 0.55;
    }
    .fight-spot-green {
      left: -14%;
      background: radial-gradient(
        ellipse 56% 52% at 42% 36%,
        rgba(140, 255, 190, 1) 0%,
        rgba(50, 200, 110, 0.55) 36%,
        rgba(15, 100, 45, 0.22) 54%,
        transparent 70%
      );
      animation: fight-spot-green 4.4s ease-in-out infinite;
    }
    .fight-spot-red {
      left: 28%;
      background: radial-gradient(
        ellipse 54% 50% at 52% 40%,
        rgba(255, 110, 110, 1) 0%,
        rgba(255, 40, 55, 0.58) 34%,
        rgba(190, 25, 35, 0.24) 52%,
        transparent 70%
      );
      animation: fight-spot-red 3.6s ease-in-out infinite;
    }
    /* Fight: green / red washes tucked under upper stadium corners, behind crowd layer */
    .arena-wrap.fighting .fight-spot-green {
      left: -22%;
      background: radial-gradient(
        ellipse 52% 50% at 12% 18%,
        rgba(130, 255, 185, 0.95) 0%,
        rgba(45, 190, 105, 0.42) 38%,
        rgba(12, 85, 40, 0.14) 55%,
        transparent 72%
      );
      animation: fight-spot-green-stadium 5.2s ease-in-out infinite;
    }
    .arena-wrap.fighting .fight-spot-red {
      left: auto;
      right: -22%;
      background: radial-gradient(
        ellipse 52% 50% at 88% 18%,
        rgba(255, 105, 105, 0.95) 0%,
        rgba(235, 35, 50, 0.44) 38%,
        rgba(160, 20, 30, 0.14) 55%,
        transparent 72%
      );
      animation: fight-spot-red-stadium 4.6s ease-in-out infinite;
    }
    @keyframes fight-spot-green-stadium {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.42; }
      45% { transform: translate(3%, 4%) scale(1.06); opacity: 0.58; }
      70% { transform: translate(1%, 1%) scale(0.98); opacity: 0.48; }
    }
    @keyframes fight-spot-red-stadium {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.42; }
      48% { transform: translate(-3%, 4%) scale(1.05); opacity: 0.58; }
      72% { transform: translate(-1%, 1%) scale(0.98); opacity: 0.48; }
    }
    @keyframes fight-spot-green {
      0%, 100% {
        transform: translate(0, 0) rotate(-10deg) scale(1);
        opacity: 0.62;
      }
      38% {
        transform: translate(22%, 12%) rotate(8deg) scale(1.1);
        opacity: 0.92;
      }
      72% {
        transform: translate(48%, 2%) rotate(-6deg) scale(0.95);
        opacity: 0.68;
      }
    }
    @keyframes fight-spot-red {
      0%, 100% {
        transform: translate(35%, 6%) rotate(14deg) scale(1.06);
        opacity: 0.7;
      }
      40% {
        transform: translate(-8%, 14%) rotate(-10deg) scale(0.92);
        opacity: 0.95;
      }
      75% {
        transform: translate(22%, -4%) rotate(4deg) scale(1.1);
        opacity: 0.68;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .fight-spot {
        animation: none !important;
        opacity: 0.42;
      }
    }
    /* Stadium fairy string + sparklers always on; corner beams + flashes ramp up during clip */
    .fight-atmosphere {
      position: absolute;
      inset: 0;
      z-index: 10;
      pointer-events: none;
      overflow: hidden;
      opacity: 1;
      transition: opacity 0.45s ease;
    }
    /* Stadium string — not on top of the fight clip */
    .arena-wrap.fighting .fight-fairy-perimeter {
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
    }
    .arena-wrap:not(.fighting) .fight-audience-flash {
      animation: none !important;
      opacity: 0 !important;
    }
    /* Neon sparklers on black fight backdrop */
    .fight-bg-sparklers {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
    }
    .fight-bg-sparkler {
      position: absolute;
      width: clamp(13px, 2.8vw, 22px);
      height: clamp(13px, 2.8vw, 22px);
      border-radius: 50%;
      mix-blend-mode: screen;
      pointer-events: none;
      animation: fight-bg-sparkler-twinkle 2.15s ease-in-out infinite;
    }
    .fight-bg-sparkler--pink {
      left: 20%;
      top: 17%;
      background: radial-gradient(circle at 35% 35%, #fff0f8 0%, #ff2d9b 46%, #9d174d 100%);
      box-shadow:
        0 0 12px #ff4aad,
        0 0 26px rgba(255, 60, 160, 0.7),
        0 0 42px rgba(255, 120, 200, 0.45);
      animation-delay: 0s;
    }
    .fight-bg-sparkler--purple {
      left: 6%;
      top: 24%;
      transform: none;
      background: radial-gradient(circle at 35% 35%, #f3e8ff 0%, #a855f7 44%, #4c1d95 100%);
      box-shadow:
        0 0 12px #c084fc,
        0 0 28px rgba(168, 85, 247, 0.72),
        0 0 44px rgba(139, 92, 246, 0.42);
      animation-delay: 0.4s;
    }
    .fight-bg-sparkler--orange {
      left: auto;
      right: 20%;
      top: 18%;
      background: radial-gradient(circle at 35% 35%, #fff6e8 0%, #ff9100 45%, #9a3412 100%);
      box-shadow:
        0 0 12px #ffb020,
        0 0 28px rgba(255, 145, 40, 0.72),
        0 0 44px rgba(255, 120, 20, 0.42);
      animation-delay: 0.78s;
    }
    .fight-bg-sparkler--cyan {
      left: 8%;
      top: 42%;
      background: radial-gradient(circle at 35% 35%, #e8ffff 0%, #06b6d4 44%, #0e7490 100%);
      box-shadow:
        0 0 14px #22d3ee,
        0 0 30px rgba(6, 182, 212, 0.75),
        0 0 48px rgba(34, 211, 238, 0.4);
      animation-delay: 0.12s;
    }
    .fight-bg-sparkler--magenta {
      left: auto;
      right: 12%;
      top: 38%;
      background: radial-gradient(circle at 35% 35%, #ffe8fb 0%, #e879f9 42%, #86198f 100%);
      box-shadow:
        0 0 14px #f0abfc,
        0 0 32px rgba(232, 121, 249, 0.75),
        0 0 50px rgba(240, 171, 252, 0.4);
      animation-delay: 0.33s;
    }
    .fight-bg-sparkler--yellow {
      left: 18%;
      top: 28%;
      background: radial-gradient(circle at 35% 35%, #fffef0 0%, #facc15 40%, #a16207 100%);
      box-shadow:
        0 0 14px #fde047,
        0 0 30px rgba(250, 204, 21, 0.78),
        0 0 46px rgba(253, 224, 71, 0.42);
      animation-delay: 0.66s;
    }
    .fight-bg-sparkler--electric {
      left: 62%;
      top: 22%;
      background: radial-gradient(circle at 35% 35%, #f0f4ff 0%, #3b82f6 42%, #1e3a8a 100%);
      box-shadow:
        0 0 14px #60a5fa,
        0 0 32px rgba(59, 130, 246, 0.78),
        0 0 50px rgba(96, 165, 250, 0.42);
      animation-delay: 0.22s;
    }
    .fight-bg-sparkler--mint {
      left: 72%;
      top: 48%;
      background: radial-gradient(circle at 35% 35%, #ecfff8 0%, #2dd4bf 44%, #0f766e 100%);
      box-shadow:
        0 0 14px #5eead4,
        0 0 30px rgba(45, 212, 191, 0.72),
        0 0 48px rgba(94, 234, 212, 0.38);
      animation-delay: 0.88s;
    }
    .fight-bg-sparkler--neon {
      animation-name: fight-bg-sparkler-glisten;
      animation-duration: 1.75s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
    @keyframes fight-bg-sparkler-twinkle {
      0%, 100% { opacity: 0.72; filter: brightness(0.98); }
      50% { opacity: 1; filter: brightness(1.28); }
    }
    @keyframes fight-bg-sparkler-glisten {
      0%, 100% { opacity: 0.58; filter: brightness(0.92) saturate(1.15); transform: scale(1); }
      20% { opacity: 1; filter: brightness(1.5) saturate(1.45); transform: scale(1.1); }
      45% { opacity: 0.78; filter: brightness(1.12) saturate(1.25); transform: scale(0.94); }
      70% { opacity: 0.95; filter: brightness(1.38) saturate(1.5); transform: scale(1.06); }
    }
    /* One lantern each side */
    .fight-oriental-hangings {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      padding: 0 clamp(10px, 5vw, 36px);
      box-sizing: border-box;
    }
    .fight-hanging--side-left {
      margin-top: -2px;
    }
    .fight-hanging--side-right {
      margin-top: -2px;
      animation-delay: 0.4s;
    }
    .fight-hanging {
      position: relative;
      flex: 0 0 auto;
      top: 0;
      width: clamp(16px, 3.4vw, 28px);
      height: clamp(58px, 13vh, 118px);
      transform-origin: 50% 0;
      border-radius: 46% 46% 42% 42% / 38% 38% 58% 58%;
      mix-blend-mode: screen;
      opacity: 0.9;
      animation: fight-hanging-sway 3.8s ease-in-out infinite;
      box-shadow:
        0 0 14px rgba(255, 200, 120, 0.55),
        0 0 28px rgba(255, 160, 80, 0.28),
        inset 0 2px 10px rgba(255, 255, 255, 0.22);
    }
    .fight-hanging::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 62%;
      height: clamp(9px, 2vh, 14px);
      border-radius: 4px 4px 2px 2px;
      background: linear-gradient(180deg, #ffe8a8, #d4a017 55%, #8b6914);
      box-shadow: 0 0 10px rgba(255, 215, 120, 0.85);
    }
    .fight-hanging::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -2px;
      transform: translateX(-50%);
      width: 3px;
      height: clamp(14px, 3vh, 22px);
      background: repeating-linear-gradient(
        180deg,
        rgba(255, 220, 140, 0.95) 0 2px,
        rgba(180, 120, 60, 0.5) 2px 4px
      );
      border-radius: 0 0 2px 2px;
      opacity: 0.85;
    }
    .fight-hanging--jade {
      background: linear-gradient(180deg, #e8fff4 0%, #20c997 40%, #0d6e55 100%);
      box-shadow:
        0 0 16px rgba(80, 220, 180, 0.55),
        0 0 30px rgba(40, 200, 160, 0.22),
        inset 0 2px 10px rgba(255, 255, 255, 0.25);
      animation-delay: 0s;
    }
    .fight-hanging--coral {
      background: linear-gradient(180deg, #ffe8f0 0%, #ff6b6b 38%, #c92a2a 100%);
      box-shadow:
        0 0 16px rgba(255, 120, 100, 0.5),
        0 0 28px rgba(255, 80, 80, 0.22),
        inset 0 2px 10px rgba(255, 255, 255, 0.2);
      animation-delay: 0.25s;
    }
    .fight-hanging--violet {
      background: linear-gradient(180deg, #f3e8ff 0%, #9b59b6 40%, #5b2c6f 100%);
      box-shadow:
        0 0 16px rgba(200, 140, 255, 0.55),
        0 0 30px rgba(160, 100, 255, 0.22),
        inset 0 2px 10px rgba(255, 255, 255, 0.22);
      animation-delay: 0.5s;
    }
    .fight-hanging--amber {
      background: linear-gradient(180deg, #fff8e6 0%, #fd7e14 40%, #9c4221 100%);
      box-shadow:
        0 0 16px rgba(255, 180, 80, 0.52),
        0 0 28px rgba(255, 140, 40, 0.22),
        inset 0 2px 10px rgba(255, 255, 255, 0.2);
      animation-delay: 0.75s;
    }
    @keyframes fight-hanging-sway {
      0%, 100% { transform: rotate(-5deg); }
      50% { transform: rotate(5deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .fight-hanging {
        animation: none !important;
      }
    }
    .fight-audience-flashes {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 2;
    }
    /* Tiny star twinkles — dark crowd + mat letterbox during fight */
    .fight-crowd-twinkles {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 3;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.45s ease, visibility 0.45s;
    }
    .arena-wrap.fighting .fight-crowd-twinkles {
      opacity: 1;
      visibility: visible;
    }
    .fight-mat-twinkles {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s ease, visibility 0.4s;
    }
    .fight-on-mat.on .fight-mat-twinkles {
      opacity: 1;
      visibility: visible;
    }
    @keyframes fight-crowd-twinkle-pulse {
      0%,
      100% {
        opacity: 0.28;
        filter: brightness(0.88);
      }
      40% {
        opacity: 1;
        filter: brightness(1.32);
      }
      65% {
        opacity: 0.55;
        filter: brightness(1.02);
      }
    }
    .fight-crowd-twinkle {
      position: absolute;
      left: 0;
      top: 0;
      width: 2px;
      height: 2px;
      margin: 0;
      padding: 0;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 50%, #fffef8 0%, rgba(255, 240, 210, 0.85) 55%, transparent 72%);
      mix-blend-mode: screen;
      box-shadow:
        0 0 3px rgba(255, 252, 235, 1),
        0 0 7px rgba(255, 228, 180, 0.75),
        0 0 12px rgba(255, 200, 120, 0.4);
      transform: translate(-50%, -50%);
      animation: fight-crowd-twinkle-pulse 2.85s ease-in-out infinite;
      pointer-events: none;
    }
    .fight-crowd-twinkle::before,
    .fight-crowd-twinkle::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 252, 240, 0.95) 35%,
        rgba(255, 235, 200, 0.55) 70%,
        transparent 100%
      );
      pointer-events: none;
    }
    .fight-crowd-twinkle::before {
      width: 1px;
      height: clamp(5px, 1.15vw, 8px);
      margin-left: -0.5px;
      margin-top: calc(clamp(5px, 1.15vw, 8px) / -2);
      background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 252, 240, 0.92) 40%,
        rgba(255, 220, 170, 0.35) 100%
      );
    }
    .fight-crowd-twinkle::after {
      width: clamp(5px, 1.15vw, 8px);
      height: 1px;
      margin-left: calc(clamp(5px, 1.15vw, 8px) / -2);
      margin-top: -0.5px;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(5n) {
      animation-duration: 3.35s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(5n + 2) {
      animation-duration: 2.25s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(7n) {
      transform: translate(-50%, -50%) scale(0.78);
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(11n) {
      transform: translate(-50%, -50%) scale(1.12);
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(1) {
      left: 8%;
      top: 9%;
      animation-delay: 0s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(2) {
      left: 24%;
      top: 6%;
      animation-delay: -0.4s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(3) {
      left: 50%;
      top: 4%;
      animation-delay: -1.1s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(4) {
      left: 76%;
      top: 7%;
      animation-delay: -0.75s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(5) {
      left: 92%;
      top: 11%;
      animation-delay: -1.9s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(6) {
      left: 14%;
      top: 21%;
      animation-delay: -0.2s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(7) {
      left: 38%;
      top: 17%;
      animation-delay: -2.2s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(8) {
      left: 63%;
      top: 19%;
      animation-delay: -1.35s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(9) {
      left: 86%;
      top: 23%;
      animation-delay: -0.55s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(10) {
      left: 5%;
      top: 13%;
      animation-delay: -2.65s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(11) {
      left: 96%;
      top: 16%;
      animation-delay: -1.05s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(12) {
      left: 11%;
      top: 31%;
      animation-delay: -0.9s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(13) {
      left: 28%;
      top: 27%;
      animation-delay: -2.4s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(14) {
      left: 72%;
      top: 29%;
      animation-delay: -1.55s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(15) {
      left: 89%;
      top: 32%;
      animation-delay: -0.15s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(16) {
      left: 19%;
      top: 36%;
      animation-delay: -2.9s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(17) {
      left: 81%;
      top: 35%;
      animation-delay: -1.2s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(18) {
      left: 3%;
      top: 42%;
      animation-delay: -0.65s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(19) {
      left: 97%;
      top: 45%;
      animation-delay: -2.05s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(20) {
      left: 7%;
      top: 56%;
      animation-delay: -1.45s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(21) {
      left: 93%;
      top: 58%;
      animation-delay: -0.3s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(22) {
      left: 12%;
      top: 48%;
      animation-delay: -2.75s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(23) {
      left: 88%;
      top: 51%;
      animation-delay: -1.85s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(24) {
      left: 4%;
      top: 66%;
      animation-delay: -0.95s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(25) {
      left: 96%;
      top: 68%;
      animation-delay: -2.35s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(26) {
      left: 10%;
      top: 77%;
      animation-delay: -1.65s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(27) {
      left: 90%;
      top: 75%;
      animation-delay: -0.5s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(28) {
      left: 22%;
      top: 34%;
      animation-delay: -2.15s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(29) {
      left: 78%;
      top: 33%;
      animation-delay: -1.25s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(30) {
      left: 48%;
      top: 11%;
      animation-delay: -0.8s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(31) {
      left: 33%;
      top: 13%;
      animation-delay: -2.5s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(32) {
      left: 67%;
      top: 14%;
      animation-delay: -1.1s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(33) {
      left: 16%;
      top: 6%;
      animation-delay: -0.25s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(34) {
      left: 84%;
      top: 5%;
      animation-delay: -2.85s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(35) {
      left: 50%;
      top: 22%;
      animation-delay: -1.5s;
    }
    .fight-crowd-twinkles .fight-crowd-twinkle:nth-child(36) {
      left: 43%;
      top: 26%;
      animation-delay: -0.6s;
    }
    .fight-mat-twinkles .fight-crowd-twinkle:nth-child(1) {
      left: 10%;
      top: 5%;
      animation-delay: -0.35s;
    }
    .fight-mat-twinkles .fight-crowd-twinkle:nth-child(2) {
      left: 28%;
      top: 4%;
      animation-delay: -1.8s;
    }
    .fight-mat-twinkles .fight-crowd-twinkle:nth-child(3) {
      left: 50%;
      top: 3%;
      animation-delay: -0.9s;
    }
    .fight-mat-twinkles .fight-crowd-twinkle:nth-child(4) {
      left: 72%;
      top: 4%;
      animation-delay: -2.2s;
    }
    .fight-mat-twinkles .fight-crowd-twinkle:nth-child(5) {
      left: 90%;
      top: 6%;
      animation-delay: -1.15s;
    }
    .fight-mat-twinkles .fight-crowd-twinkle:nth-child(6) {
      left: 4%;
      top: 38%;
      animation-delay: -0.5s;
    }
    .fight-mat-twinkles .fight-crowd-twinkle:nth-child(7) {
      left: 96%;
      top: 40%;
      animation-delay: -2.6s;
    }
    .fight-mat-twinkles .fight-crowd-twinkle:nth-child(8) {
      left: 5%;
      top: 62%;
      animation-delay: -1.4s;
    }
    .fight-mat-twinkles .fight-crowd-twinkle:nth-child(9) {
      left: 95%;
      top: 64%;
      animation-delay: -0.2s;
    }
    .fight-mat-twinkles .fight-crowd-twinkle:nth-child(10) {
      left: 8%;
      top: 88%;
      animation-delay: -2.05s;
    }
    .fight-mat-twinkles .fight-crowd-twinkle:nth-child(11) {
      left: 92%;
      top: 87%;
      animation-delay: -1.25s;
    }
    .fight-mat-twinkles .fight-crowd-twinkle:nth-child(12) {
      left: 22%;
      top: 92%;
      animation-delay: -0.75s;
    }
    .fight-mat-twinkles .fight-crowd-twinkle:nth-child(13) {
      left: 78%;
      top: 91%;
      animation-delay: -2.45s;
    }
    .fight-mat-twinkles .fight-crowd-twinkle:nth-child(14) {
      left: 50%;
      top: 8%;
      animation-delay: -1.55s;
    }
    .fight-audience-flash {
      position: absolute;
      width: clamp(48px, 18%, 140px);
      height: clamp(56px, 22%, 160px);
      border-radius: 50%;
      background: radial-gradient(
        ellipse 50% 50% at 50% 50%,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.35) 28%,
        transparent 62%
      );
      mix-blend-mode: screen;
      opacity: 0;
      filter: blur(0.5px);
      animation: fight-cam-pop 8.4s linear infinite;
    }
    .fight-audience-flash:nth-child(1) {
      left: 6%;
      top: 10%;
      animation-duration: 7.6s;
      animation-delay: 0s;
    }
    .fight-audience-flash:nth-child(2) {
      left: 22%;
      top: 6%;
      animation-duration: 9.1s;
      animation-delay: 1.1s;
    }
    .fight-audience-flash:nth-child(3) {
      left: 42%;
      top: 4%;
      animation-duration: 8.2s;
      animation-delay: 2.4s;
    }
    .fight-audience-flash:nth-child(4) {
      left: 58%;
      top: 8%;
      animation-duration: 7.9s;
      animation-delay: 0.55s;
    }
    .fight-audience-flash:nth-child(5) {
      left: 74%;
      top: 5%;
      animation-duration: 8.8s;
      animation-delay: 3.2s;
    }
    .fight-audience-flash:nth-child(6) {
      left: 88%;
      top: 12%;
      animation-duration: 7.3s;
      animation-delay: 1.8s;
    }
    .fight-audience-flash:nth-child(7) {
      left: 14%;
      top: 18%;
      animation-duration: 9.4s;
      animation-delay: 4.1s;
    }
    .fight-audience-flash:nth-child(8) {
      left: 82%;
      top: 20%;
      animation-duration: 8s;
      animation-delay: 2.9s;
    }
    /* Side-of-ring camera pops (mid arena, left / right) */
    .fight-audience-flash--side {
      width: clamp(36px, 14%, 100px);
      height: clamp(44px, 17%, 120px);
    }
    .fight-audience-flash:nth-child(9) {
      left: 2%;
      top: 36%;
      animation-duration: 8.3s;
      animation-delay: 0.35s;
    }
    .fight-audience-flash:nth-child(10) {
      left: 5%;
      top: 50%;
      animation-duration: 7.4s;
      animation-delay: 2.1s;
    }
    .fight-audience-flash:nth-child(11) {
      left: 3%;
      top: 63%;
      animation-duration: 9s;
      animation-delay: 1.25s;
    }
    .fight-audience-flash:nth-child(12) {
      left: auto;
      right: 2%;
      top: 38%;
      animation-duration: 7.7s;
      animation-delay: 0.85s;
    }
    .fight-audience-flash:nth-child(13) {
      left: auto;
      right: 5%;
      top: 51%;
      animation-duration: 8.5s;
      animation-delay: 2.65s;
    }
    .fight-audience-flash:nth-child(14) {
      left: auto;
      right: 3%;
      top: 64%;
      animation-duration: 7.1s;
      animation-delay: 1.55s;
    }
    /* Extra pops: sides + upper/lower black */
    .fight-audience-flash--bg {
      width: clamp(30px, 12%, 88px);
      height: clamp(38px, 14%, 102px);
      filter: blur(0.65px);
    }
    .fight-audience-flash:nth-child(15) {
      left: 4%;
      top: 76%;
      animation-duration: 8.2s;
      animation-delay: 0.22s;
    }
    .fight-audience-flash:nth-child(16) {
      left: 1.5%;
      top: 46%;
      animation-duration: 7.5s;
      animation-delay: 2.35s;
    }
    .fight-audience-flash:nth-child(17) {
      left: 11%;
      top: 30%;
      animation-duration: 8.9s;
      animation-delay: 1.05s;
    }
    .fight-audience-flash:nth-child(18) {
      left: auto;
      right: 4%;
      top: 77%;
      animation-duration: 7.8s;
      animation-delay: 0.65s;
    }
    .fight-audience-flash:nth-child(19) {
      left: auto;
      right: 1.5%;
      top: 45%;
      animation-duration: 8.4s;
      animation-delay: 2.05s;
    }
    .fight-audience-flash:nth-child(20) {
      left: auto;
      right: 10%;
      top: 29%;
      animation-duration: 7.2s;
      animation-delay: 1.45s;
    }
    .fight-audience-flash:nth-child(21) {
      left: 38%;
      top: 5%;
      animation-duration: 8.6s;
      animation-delay: 0.4s;
    }
    .fight-audience-flash:nth-child(22) {
      left: 56%;
      top: 7%;
      animation-duration: 7.4s;
      animation-delay: 2.85s;
    }
    .fight-audience-flash:nth-child(23) {
      left: 24%;
      top: 10%;
      animation-duration: 8.1s;
      animation-delay: 1.65s;
    }
    .fight-audience-flash:nth-child(24) {
      left: 71%;
      top: 9%;
      animation-duration: 7.7s;
      animation-delay: 0.95s;
    }
    /* Positioned flashes: dense paparazzi on fight clip left / right (hidden until .fighting) */
    .fight-audience-flash--pos {
      left: var(--fx-l, auto);
      right: var(--fx-r, auto);
      top: var(--fx-t, 50%);
      animation-duration: var(--fx-dur, 8.4s);
      animation-delay: var(--fx-del, 0s);
    }
    .arena-wrap:not(.fighting) .fight-audience-flash--pos {
      visibility: hidden;
      animation: none;
    }
    /* Brighter white paparazzi (fight clip only — same .--pos visibility as above) */
    .fight-audience-flash--flash-white {
      background: radial-gradient(
        ellipse 52% 52% at 50% 48%,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.42) 26%,
        rgba(240, 248, 255, 0.2) 44%,
        transparent 64%
      );
      box-shadow: 0 0 14px rgba(255, 255, 255, 0.45);
    }
    .fight-audience-flash--flash-orange {
      background: radial-gradient(
        ellipse 52% 52% at 50% 48%,
        rgba(255, 252, 235, 0.98) 0%,
        rgba(255, 190, 110, 0.52) 30%,
        rgba(255, 130, 50, 0.22) 48%,
        transparent 64%
      );
      box-shadow:
        0 0 16px rgba(255, 170, 80, 0.5),
        0 0 28px rgba(255, 120, 40, 0.22);
    }
    @keyframes fight-cam-pop {
      0%, 100% { opacity: 0; transform: scale(0.75); }
      0.65% { opacity: 0; }
      0.85% { opacity: 0.94; transform: scale(1.08); }
      1.35% { opacity: 0; transform: scale(0.9); }
      1.36%, 99.9% { opacity: 0; }
    }
    .fight-fairy-perimeter {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 3;
    }
    /* Ellipse of fairies — matches opening-page ring mask (ellipse ~50% × 46%, center ~50% 56%) */
    .fight-fairy-ellipse-hub {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0;
      height: 0;
      pointer-events: none;
      transform: translate(-50%, -50%) scaleY(0.88);
    }
    /* Outer + inner stadium strings around the full arena card (stronger on black fight screen) */
    .fight-fairy-ellipse-hub--arena-outer {
      top: 55%;
      transform: translate(-50%, -50%) scaleY(0.9);
      z-index: 0;
    }
    .fight-fairy-ellipse-hub--arena-inner {
      top: 56%;
      transform: translate(-50%, -50%) scaleY(0.88);
      z-index: 1;
    }
    .fight-fairy-ellipse-hub--arena-outer .fight-fairy--stadium-outer {
      transform: rotate(var(--fr, 0deg)) translateY(calc(-1 * clamp(128px, 36vw, 318px)));
      opacity: 0.38;
      width: clamp(2px, 0.5vw, 3.5px);
      height: clamp(2px, 0.5vw, 3.5px);
      box-shadow:
        0 0 4px rgba(255, 248, 220, 0.95),
        0 0 9px rgba(255, 220, 150, 0.5);
    }
    .fight-fairy-ellipse-hub--arena-inner .fight-fairy {
      transform: rotate(var(--fr, 0deg)) translateY(calc(-1 * clamp(118px, 31vw, 292px)));
      opacity: 0.5;
    }
    .fight-fairy-ellipse-hub .fight-fairy {
      position: absolute;
      left: 0;
      top: 0;
      flex: none;
      transform-origin: center center;
    }
    .fight-fairy {
      flex: 0 0 auto;
      width: clamp(2px, 0.55vw, 4px);
      height: clamp(2px, 0.55vw, 4px);
      border-radius: 50%;
      background: #fff8e8;
      box-shadow:
        0 0 4px rgba(255, 240, 200, 0.95),
        0 0 8px rgba(255, 220, 140, 0.55);
      opacity: 0.35;
      animation: fight-fairy-twinkle 1.4s ease-in-out infinite;
    }
    .fight-fairy:nth-child(3n) { animation-duration: 1.05s; }
    .fight-fairy:nth-child(3n + 1) { animation-duration: 1.65s; }
    .fight-fairy:nth-child(3n + 2) { animation-duration: 1.28s; }
    .fight-fairy:nth-child(5n) { animation-delay: 0.15s; }
    .fight-fairy:nth-child(5n + 1) { animation-delay: 0.45s; }
    .fight-fairy:nth-child(5n + 2) { animation-delay: 0.72s; }
    .fight-fairy:nth-child(5n + 3) { animation-delay: 0.28s; }
    .fight-fairy:nth-child(5n + 4) { animation-delay: 0.9s; }
    .fight-fairy:nth-child(7n) { background: #ffe8c8; }
    .fight-fairy:nth-child(11n) { background: #e8f4ff; box-shadow: 0 0 5px rgba(200, 230, 255, 0.8), 0 0 9px rgba(180, 210, 255, 0.45); }
    @keyframes fight-fairy-twinkle {
      0%, 100% { opacity: 0.25; filter: brightness(0.88); }
      50% { opacity: 1; filter: brightness(1.35); }
    }
    @media (prefers-reduced-motion: reduce) {
      .fight-audience-flash {
        animation: none !important;
        opacity: 0 !important;
      }
      .fight-bg-sparkler {
        animation: none !important;
        opacity: 0.88;
      }
      .fight-bg-sparkler--neon {
        animation: none !important;
        opacity: 0.9;
      }
      .fight-fairy {
        animation: none !important;
        opacity: 0.5;
      }
      .fight-crowd-twinkle {
        animation: none !important;
        opacity: 0.52;
        filter: none;
      }
      .fight-mat-corner-spot {
        animation: none !important;
        opacity: 0.62;
      }
      .fight-fighters-orbit__tilt {
        transform: rotateX(16deg);
      }
    }
    .dohyo-platform {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 92%;
      min-height: 280px;
      max-height: none;
      z-index: 2;
      display: block;
      pointer-events: none;
      transition: height 0.4s ease, max-height 0.4s ease, min-height 0.4s ease;
    }
    /* More vertical room while the fight clip plays (full-frame video) */
    .arena-wrap.fighting .dohyo-platform {
      height: 76%;
      min-height: 220px;
      max-height: min(58vh, 420px);
      z-index: 8;
    }
    /* Blackout platform (cards, mat chrome); fight clip stays above this layer */
    .arena-fight-shade {
      display: none;
      position: absolute;
      inset: 0;
      z-index: 5;
      pointer-events: none;
      background: radial-gradient(
        ellipse 120% 95% at 50% 100%,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.94) 42%,
        rgba(0, 0, 0, 0.97) 100%
      );
    }
    .arena-wrap.fighting .arena-fight-shade {
      display: block;
      background: #000000;
    }
    .dohyo-clay {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 62%;
      height: 58%;
      transform: translateX(-50%);
      border-radius: 50%;
      /* Invisible footprint — ring comes from Background_image only (no drawn loop before fight) */
      background: transparent;
      border: none;
      box-shadow: none;
      transition: opacity 0.3s ease;
    }
    .dohyo-platform .dohyo-clay { position: absolute; }
    /* Fight clip: rectangular footprint over the photo ring — no fake clay mat or oval frame */
    .fight-on-mat {
      position: absolute;
      left: 9%;
      right: 9%;
      /* Offset from platform bottom */
      bottom: 0.5cm;
      height: 82%;
      /* Below fighter picks while idle so taps hit .fighter (mobile) */
      z-index: 2;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.35s ease, visibility 0.35s;
      /* No chrome — only positions the clip */
      border: none;
      box-shadow: none;
      outline: none;
      background: transparent;
      /* Black fight panel rounding (full-bleed mat behind clip) */
      --fight-black-r: clamp(14px, 2.6vw, 22px);
      --fight-fairy-outset: 11px;
      /* Default for descendants; clip stack overrides for viewport fairy string */
      --fight-fairy-mat-r: var(--fight-black-r);
    }
    .fight-on-mat.on {
      opacity: 1;
      visibility: visible;
      z-index: 7;
      overflow: visible;
    }
    .arena-wrap.fighting .fight-on-mat.on {
      background: #000000;
      border-radius: var(--fight-black-r);
    }
    .fight-on-mat__frame {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      pointer-events: none;
    }
    /* Warm orange wash — upper corners of the black mat only (not the full arena) */
    .fight-mat-corner-spot {
      position: absolute;
      mix-blend-mode: screen;
      opacity: 0;
      visibility: hidden;
      filter: blur(1.2px);
      pointer-events: none;
      z-index: 9;
      width: min(44%, 220px);
      height: min(38%, 130px);
      max-height: 36%;
    }
    .fight-on-mat.on .fight-mat-corner-spot {
      opacity: 0.78;
      visibility: visible;
    }
    /* Orange corner washes read as body decorations over the fight clip */
    .arena-wrap.fighting .fight-mat-corner-spot {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }
    .fight-mat-corner-spot--tl {
      top: 2px;
      left: 2px;
      background: radial-gradient(
        ellipse 100% 100% at 0% 0%,
        rgba(255, 210, 130, 0.95) 0%,
        rgba(255, 130, 45, 0.5) 45%,
        rgba(200, 70, 15, 0.12) 72%,
        transparent 88%
      );
      transform-origin: 0 0;
      animation: fight-mat-corner-drift-tl 8.5s ease-in-out infinite;
    }
    .fight-mat-corner-spot--tr {
      top: 2px;
      right: 2px;
      left: auto;
      background: radial-gradient(
        ellipse 100% 100% at 100% 0%,
        rgba(255, 210, 130, 0.95) 0%,
        rgba(255, 130, 45, 0.5) 45%,
        rgba(200, 70, 15, 0.12) 72%,
        transparent 88%
      );
      transform-origin: 100% 0;
      animation: fight-mat-corner-drift-tr 7.8s ease-in-out infinite;
    }
    @keyframes fight-mat-corner-drift-tl {
      0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.68; }
      50% { transform: rotate(3deg) scale(1.04); opacity: 0.82; }
    }
    @keyframes fight-mat-corner-drift-tr {
      0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.68; }
      50% { transform: rotate(-3deg) scale(1.04); opacity: 0.82; }
    }
    /* Fairy string: default hidden; --screen = outline of .arena-wrap game card (below title, not laptop bezel) */
    .fight-frame-fairy-border {
      pointer-events: none;
      mix-blend-mode: screen;
      opacity: 0;
      visibility: hidden;
    }
    .arena-wrap.fighting .fight-frame-fairy-border--screen {
      position: absolute;
      inset: 0;
      z-index: 12;
      border-radius: 16px;
      opacity: 1;
      visibility: visible;
      --fight-fairy-mat-r: 16px;
      --fight-fairy-outset: 5px;
    }
    /* Soft cones from outer frame corners toward the stage (orange / yellow / pink) */
    .fight-frame-stage-beams {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      border-radius: inherit;
      overflow: hidden;
    }
    .fight-frame-stage-beam {
      position: absolute;
      width: min(64%, 440px);
      height: min(64%, 440px);
      mix-blend-mode: screen;
      pointer-events: none;
      opacity: 0.55;
      filter: blur(0.4px);
      animation: fight-frame-stage-beam-pulse 3.5s ease-in-out infinite;
    }
    .fight-frame-stage-beams .fight-frame-stage-beam:nth-child(3n + 1) {
      animation-delay: 0s;
    }
    .fight-frame-stage-beams .fight-frame-stage-beam:nth-child(3n + 2) {
      animation-delay: 0.38s;
    }
    .fight-frame-stage-beams .fight-frame-stage-beam:nth-child(3n) {
      animation-delay: 0.76s;
    }
    @keyframes fight-frame-stage-beam-pulse {
      0%, 100% {
        opacity: 0.44;
        filter: blur(0.35px) brightness(0.94);
      }
      50% {
        opacity: 0.72;
        filter: blur(0.55px) brightness(1.1);
      }
    }
    .fight-frame-stage-beam--tl {
      top: -5%;
      left: -5%;
      transform-origin: 0 0;
      background: linear-gradient(
        to bottom right,
        rgba(255, 92, 38, 0.88) 0%,
        rgba(255, 165, 85, 0.45) 17%,
        rgba(255, 200, 130, 0.14) 36%,
        transparent 56%
      );
    }
    .fight-frame-stage-beam--tl.fight-frame-stage-beam--yellow {
      width: min(58%, 400px);
      height: min(58%, 400px);
      transform: rotate(-5deg);
      background: linear-gradient(
        to bottom right,
        rgba(255, 238, 115, 0.82) 0%,
        rgba(255, 205, 75, 0.4) 15%,
        transparent 50%
      );
    }
    .fight-frame-stage-beam--tl.fight-frame-stage-beam--pink {
      width: min(58%, 400px);
      height: min(58%, 400px);
      transform: rotate(6deg);
      background: linear-gradient(
        to bottom right,
        rgba(255, 125, 195, 0.84) 0%,
        rgba(255, 85, 155, 0.38) 15%,
        transparent 50%
      );
    }
    .fight-frame-stage-beam--tr {
      top: -5%;
      right: -5%;
      left: auto;
      transform-origin: 100% 0;
      background: linear-gradient(
        to bottom left,
        rgba(255, 92, 38, 0.88) 0%,
        rgba(255, 165, 85, 0.45) 17%,
        rgba(255, 200, 130, 0.14) 36%,
        transparent 56%
      );
    }
    .fight-frame-stage-beam--tr.fight-frame-stage-beam--yellow {
      width: min(58%, 400px);
      height: min(58%, 400px);
      transform: rotate(5deg);
      background: linear-gradient(
        to bottom left,
        rgba(255, 238, 115, 0.82) 0%,
        rgba(255, 205, 75, 0.4) 15%,
        transparent 50%
      );
    }
    .fight-frame-stage-beam--tr.fight-frame-stage-beam--pink {
      width: min(58%, 400px);
      height: min(58%, 400px);
      transform: rotate(-6deg);
      background: linear-gradient(
        to bottom left,
        rgba(255, 125, 195, 0.84) 0%,
        rgba(255, 85, 155, 0.38) 15%,
        transparent 50%
      );
    }
    .fight-frame-stage-beam--bl {
      bottom: -5%;
      left: -5%;
      top: auto;
      transform-origin: 0 100%;
      background: linear-gradient(
        to top right,
        rgba(255, 92, 38, 0.88) 0%,
        rgba(255, 165, 85, 0.45) 17%,
        rgba(255, 200, 130, 0.14) 36%,
        transparent 56%
      );
    }
    .fight-frame-stage-beam--bl.fight-frame-stage-beam--yellow {
      width: min(58%, 400px);
      height: min(58%, 400px);
      transform: rotate(5deg);
      background: linear-gradient(
        to top right,
        rgba(255, 238, 115, 0.82) 0%,
        rgba(255, 205, 75, 0.4) 15%,
        transparent 50%
      );
    }
    .fight-frame-stage-beam--bl.fight-frame-stage-beam--pink {
      width: min(58%, 400px);
      height: min(58%, 400px);
      transform: rotate(-6deg);
      background: linear-gradient(
        to top right,
        rgba(255, 125, 195, 0.84) 0%,
        rgba(255, 85, 155, 0.38) 15%,
        transparent 50%
      );
    }
    .fight-frame-stage-beam--br {
      bottom: -5%;
      right: -5%;
      top: auto;
      left: auto;
      transform-origin: 100% 100%;
      background: linear-gradient(
        to top left,
        rgba(255, 92, 38, 0.88) 0%,
        rgba(255, 165, 85, 0.45) 17%,
        rgba(255, 200, 130, 0.14) 36%,
        transparent 56%
      );
    }
    .fight-frame-stage-beam--br.fight-frame-stage-beam--yellow {
      width: min(58%, 400px);
      height: min(58%, 400px);
      transform: rotate(-5deg);
      background: linear-gradient(
        to top left,
        rgba(255, 238, 115, 0.82) 0%,
        rgba(255, 205, 75, 0.4) 15%,
        transparent 50%
      );
    }
    .fight-frame-stage-beam--br.fight-frame-stage-beam--pink {
      width: min(58%, 400px);
      height: min(58%, 400px);
      transform: rotate(6deg);
      background: linear-gradient(
        to top left,
        rgba(255, 125, 195, 0.84) 0%,
        rgba(255, 85, 155, 0.38) 15%,
        transparent 50%
      );
    }
    /* Continuous orange highlight along the fairy string (under bulbs) */
    .fight-fairy-orange-streak-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      overflow: visible;
      filter:
        drop-shadow(0 0 2px rgba(255, 170, 80, 1))
        drop-shadow(0 0 7px rgba(255, 120, 35, 0.65))
        drop-shadow(0 0 14px rgba(255, 90, 20, 0.35));
    }
    .fight-fairy-orange-streak__rect {
      stroke-width: clamp(1.6px, 0.32vw, 2.6px);
      vector-effect: non-scaling-stroke;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 6 94;
      animation: fight-fairy-orange-streak-run 5.2s linear infinite;
    }
    @keyframes fight-fairy-orange-streak-run {
      to {
        stroke-dashoffset: -100;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .fight-frame-stage-beam {
        animation: none !important;
        opacity: 0.52;
        filter: blur(0.35px);
      }
      .fight-fairy-orange-streak__rect {
        animation: none;
        stroke-dasharray: none;
        stroke-opacity: 0.42;
      }
      .fight-fairy-blue-streak-svg--orbit .fight-fairy-blue-streak__path--bolt {
        animation: none;
        stroke-dasharray: none;
        stroke-opacity: 0.42;
      }
      .fight-mat-spot {
        animation: none !important;
        opacity: 0.56;
      }
    }
    .fight-frame-fairy-border__top,
    .fight-frame-fairy-border__bottom,
    .fight-frame-fairy-border__left,
    .fight-frame-fairy-border__right,
    .fight-frame-fairy-border__corner {
      z-index: 1;
    }
    .fight-frame-fairy-border__top {
      position: absolute;
      top: calc(var(--fight-fairy-outset) * 0.35);
      left: calc(var(--fight-fairy-mat-r) + var(--fight-fairy-outset) * 0.42);
      right: calc(var(--fight-fairy-mat-r) + var(--fight-fairy-outset) * 0.42);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .fight-frame-fairy-border__bottom {
      position: absolute;
      bottom: calc(var(--fight-fairy-outset) * 0.35);
      top: auto;
      left: calc(var(--fight-fairy-mat-r) + var(--fight-fairy-outset) * 0.42);
      right: calc(var(--fight-fairy-mat-r) + var(--fight-fairy-outset) * 0.42);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .fight-frame-fairy-border__left {
      position: absolute;
      left: calc(var(--fight-fairy-outset) * 0.35);
      top: calc(var(--fight-fairy-mat-r) + var(--fight-fairy-outset) * 0.55);
      bottom: calc(var(--fight-fairy-mat-r) + var(--fight-fairy-outset) * 0.55);
      width: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }
    .fight-frame-fairy-border__right {
      position: absolute;
      right: calc(var(--fight-fairy-outset) * 0.35);
      left: auto;
      top: calc(var(--fight-fairy-mat-r) + var(--fight-fairy-outset) * 0.55);
      bottom: calc(var(--fight-fairy-mat-r) + var(--fight-fairy-outset) * 0.55);
      width: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }
    .fight-frame-fairy-border__corner {
      position: absolute;
      width: calc(var(--fight-fairy-mat-r) + var(--fight-fairy-outset) * 2);
      height: calc(var(--fight-fairy-mat-r) + var(--fight-fairy-outset) * 2);
      pointer-events: none;
    }
    .fight-frame-fairy-border__corner--tl {
      top: calc(var(--fight-fairy-outset) * 0.32);
      left: calc(var(--fight-fairy-outset) * 0.32);
    }
    .fight-frame-fairy-border__corner--tr {
      top: calc(var(--fight-fairy-outset) * 0.32);
      right: calc(var(--fight-fairy-outset) * 0.32);
      left: auto;
    }
    .fight-frame-fairy-border__corner--bl {
      bottom: calc(var(--fight-fairy-outset) * 0.32);
      left: calc(var(--fight-fairy-outset) * 0.32);
      top: auto;
    }
    .fight-frame-fairy-border__corner--br {
      bottom: calc(var(--fight-fairy-outset) * 0.32);
      right: calc(var(--fight-fairy-outset) * 0.32);
      top: auto;
      left: auto;
    }
    .fight-frame-fairy-border__corner--tl .fight-fairy--frame-corner:nth-child(1) {
      position: absolute;
      top: 2px;
      left: 12px;
    }
    .fight-frame-fairy-border__corner--tl .fight-fairy--frame-corner:nth-child(2) {
      position: absolute;
      top: 11px;
      left: 4px;
    }
    .fight-frame-fairy-border__corner--tl .fight-fairy--frame-corner:nth-child(3) {
      position: absolute;
      top: 20px;
      left: 16px;
    }
    .fight-frame-fairy-border__corner--tr .fight-fairy--frame-corner:nth-child(1) {
      position: absolute;
      top: 2px;
      right: 12px;
      left: auto;
    }
    .fight-frame-fairy-border__corner--tr .fight-fairy--frame-corner:nth-child(2) {
      position: absolute;
      top: 11px;
      right: 4px;
      left: auto;
    }
    .fight-frame-fairy-border__corner--tr .fight-fairy--frame-corner:nth-child(3) {
      position: absolute;
      top: 20px;
      right: 16px;
      left: auto;
    }
    .fight-frame-fairy-border__corner--bl .fight-fairy--frame-corner:nth-child(1) {
      position: absolute;
      bottom: 2px;
      left: 12px;
      top: auto;
    }
    .fight-frame-fairy-border__corner--bl .fight-fairy--frame-corner:nth-child(2) {
      position: absolute;
      bottom: 11px;
      left: 4px;
      top: auto;
    }
    .fight-frame-fairy-border__corner--bl .fight-fairy--frame-corner:nth-child(3) {
      position: absolute;
      bottom: 20px;
      left: 16px;
      top: auto;
    }
    .fight-frame-fairy-border__corner--br .fight-fairy--frame-corner:nth-child(1) {
      position: absolute;
      bottom: 2px;
      right: 12px;
      top: auto;
      left: auto;
    }
    .fight-frame-fairy-border__corner--br .fight-fairy--frame-corner:nth-child(2) {
      position: absolute;
      bottom: 11px;
      right: 4px;
      top: auto;
      left: auto;
    }
    .fight-frame-fairy-border__corner--br .fight-fairy--frame-corner:nth-child(3) {
      position: absolute;
      bottom: 20px;
      right: 16px;
      top: auto;
      left: auto;
    }
    .fight-fairy--frame {
      flex: 0 0 auto;
      width: clamp(2.5px, 0.65vw, 4.5px);
      height: clamp(2.5px, 0.65vw, 4.5px);
      opacity: 0.55;
      box-shadow:
        0 0 5px rgba(255, 248, 220, 1),
        0 0 10px rgba(255, 220, 150, 0.65);
    }
    .fight-frame-fairy-border--screen .fight-fairy--frame,
    .fight-frame-fairy-border--screen .fight-fairy--frame-corner {
      width: clamp(1.6px, 0.38vw, 3px);
      height: clamp(1.6px, 0.38vw, 3px);
      box-shadow:
        0 0 3px rgba(255, 248, 220, 1),
        0 0 7px rgba(255, 220, 150, 0.62);
    }
    .fight-fairy--frame-corner {
      flex: none;
      position: absolute;
    }
    /* Fight clip + optional orbit / spotlight overlay */
    .fight-clip-stack {
      position: relative;
      flex-shrink: 0;
      align-self: flex-end;
      z-index: 2;
      overflow: visible;
    }
    .fight-fighters-orbit {
      position: absolute;
      left: -14px;
      right: -14px;
      top: -10px;
      bottom: clamp(-56px, -11vh, -28px);
      z-index: 5;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: min(480px, 105vw);
      mix-blend-mode: screen;
      opacity: 0;
      visibility: hidden;
    }
    .fight-on-mat.on .fight-fighters-orbit {
      opacity: 1;
      visibility: visible;
    }
    .fight-fighters-orbit__tilt {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotateX(52deg);
      transform-style: preserve-3d;
    }
    .fight-fairy-ellipse-hub--fighters {
      position: absolute;
      left: 50%;
      top: 56%;
      width: 0;
      height: 0;
      --fighter-orbit-r: clamp(110px, 33vw, 258px);
      transform: translate(-50%, -50%) scaleY(0.4);
      transform-style: preserve-3d;
      pointer-events: none;
    }
    /* Blue streak on the fighter ring (circle squashed by hub scaleY → matches bulbs) */
    .fight-fairy-ellipse-hub--fighters .fight-fairy-blue-streak-svg--orbit {
      position: absolute;
      left: 50%;
      top: 50%;
      width: calc(2 * var(--fighter-orbit-r));
      height: calc(2 * var(--fighter-orbit-r));
      margin: 0;
      padding: 0;
      transform: translate(-50%, -50%);
      overflow: visible;
      z-index: 0;
      pointer-events: none;
      filter:
        drop-shadow(0 0 3px rgba(200, 245, 255, 1))
        drop-shadow(0 0 10px rgba(100, 190, 255, 0.92))
        drop-shadow(0 0 22px rgba(60, 150, 255, 0.65))
        drop-shadow(0 0 38px rgba(35, 110, 230, 0.42));
    }
    .fight-fairy-blue-streak-svg--orbit .fight-fairy-blue-streak__path--bolt {
      stroke-width: clamp(1.55px, 0.32vw, 2.85px);
      vector-effect: non-scaling-stroke;
      stroke-linecap: round;
      stroke-dasharray: 3.8 96.2;
      animation: fight-fairy-blue-streak-run 2.05s linear infinite;
    }
    .fight-fairy-blue-streak__path--b1 {
      animation-delay: 0s;
    }
    .fight-fairy-blue-streak__path--b2 {
      animation-delay: -0.68s;
    }
    .fight-fairy-blue-streak__path--b3 {
      animation-delay: -1.36s;
    }
    @keyframes fight-fairy-blue-streak-run {
      to {
        stroke-dashoffset: -100;
      }
    }
    .fight-fairy-ellipse-hub--fighters .fight-fairy--fighter-orbit {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      transform: rotate(var(--fr, 0deg)) translateY(calc(-1 * var(--fighter-orbit-r)));
      transform-origin: center center;
      width: clamp(2px, 0.5vw, 4px);
      height: clamp(2px, 0.5vw, 4px);
      opacity: 0.48;
      box-shadow:
        0 0 4px rgba(255, 245, 200, 1),
        0 0 9px rgba(255, 215, 140, 0.52);
    }
    /* Desktop: soft spotlights from all sides (no orbital ring); mobile keeps tilted blue ring */
    .fight-mat-spotlight-rig {
      display: none;
    }
    @keyframes fight-mat-spot-pulse {
      0%,
      100% {
        opacity: 0.48;
        filter: blur(15px) brightness(0.94);
      }
      50% {
        opacity: 0.82;
        filter: blur(22px) brightness(1.1);
      }
    }
    @media (min-width: 640px) {
      .fight-fighters-orbit__tilt {
        display: none !important;
      }
      .fight-mat-spotlight-rig {
        display: block;
        position: absolute;
        inset: -6% -4% -14% -4%;
        z-index: 4;
        pointer-events: none;
        mix-blend-mode: screen;
      }
      .fight-mat-spot {
        position: absolute;
        pointer-events: none;
        mix-blend-mode: screen;
        opacity: 0.68;
        animation: fight-mat-spot-pulse 5.2s ease-in-out infinite;
      }
      .fight-mat-spot--n {
        top: -24%;
        left: 2%;
        right: 2%;
        height: 70%;
        background: radial-gradient(
          ellipse 92% 58% at 50% 0%,
          rgba(255, 248, 220, 0.78) 0%,
          rgba(255, 185, 75, 0.38) 36%,
          rgba(255, 120, 35, 0.14) 58%,
          transparent 82%
        );
        filter: blur(16px);
        animation-delay: 0s;
      }
      .fight-mat-spot--s {
        bottom: -30%;
        left: 2%;
        right: 2%;
        height: 75%;
        background: radial-gradient(
          ellipse 95% 62% at 50% 100%,
          rgba(255, 235, 190, 0.72) 0%,
          rgba(255, 160, 55, 0.34) 38%,
          rgba(255, 95, 25, 0.12) 60%,
          transparent 84%
        );
        filter: blur(18px);
        animation-delay: -1.3s;
      }
      .fight-mat-spot--e {
        right: -36%;
        top: 4%;
        bottom: 14%;
        width: 82%;
        background: radial-gradient(
          ellipse 52% 88% at 100% 50%,
          rgba(255, 252, 215, 0.74) 0%,
          rgba(255, 175, 65, 0.32) 40%,
          rgba(255, 110, 30, 0.12) 62%,
          transparent 80%
        );
        filter: blur(17px);
        animation-delay: -2.6s;
      }
      .fight-mat-spot--w {
        left: -36%;
        top: 4%;
        bottom: 14%;
        width: 82%;
        background: radial-gradient(
          ellipse 52% 88% at 0% 50%,
          rgba(255, 252, 215, 0.74) 0%,
          rgba(255, 175, 65, 0.32) 40%,
          rgba(255, 110, 30, 0.12) 62%,
          transparent 80%
        );
        filter: blur(17px);
        animation-delay: -0.65s;
      }
      .fight-mat-spot--ne {
        top: -18%;
        right: -22%;
        width: 72%;
        height: 72%;
        background: radial-gradient(
          ellipse 70% 70% at 85% 12%,
          rgba(255, 240, 160, 0.72) 0%,
          rgba(255, 155, 50, 0.3) 42%,
          transparent 76%
        );
        filter: blur(14px);
        animation-delay: -3.2s;
      }
      .fight-mat-spot--se {
        bottom: -22%;
        right: -24%;
        width: 74%;
        height: 74%;
        background: radial-gradient(
          ellipse 72% 72% at 88% 88%,
          rgba(255, 230, 175, 0.68) 0%,
          rgba(255, 145, 45, 0.28) 44%,
          transparent 78%
        );
        filter: blur(16px);
        animation-delay: -1.95s;
      }
      .fight-mat-spot--sw {
        bottom: -22%;
        left: -24%;
        width: 74%;
        height: 74%;
        background: radial-gradient(
          ellipse 72% 72% at 12% 88%,
          rgba(255, 230, 175, 0.68) 0%,
          rgba(255, 145, 45, 0.28) 44%,
          transparent 78%
        );
        filter: blur(16px);
        animation-delay: -4.1s;
      }
      .fight-mat-spot--nw {
        top: -18%;
        left: -22%;
        width: 72%;
        height: 72%;
        background: radial-gradient(
          ellipse 70% 70% at 15% 12%,
          rgba(255, 240, 160, 0.72) 0%,
          rgba(255, 155, 50, 0.3) 42%,
          transparent 76%
        );
        filter: blur(14px);
        animation-delay: -2.25s;
      }
    }
    /* Winner still — tight to the PNG; no video-sized frame or sand mat (fight clip keeps that) */
    .result-on-ring {
      position: absolute;
      left: 9%;
      right: 9%;
      bottom: 0.5cm;
      height: 82%;
      z-index: 2;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.35s ease, visibility 0.35s;
      border: none;
      background: transparent;
    }
    .result-on-ring.on {
      opacity: 1;
      visibility: visible;
      z-index: 9;
      overflow: visible;
    }
    .arena-wrap.result-phase {
      overflow: visible;
    }
    .arena-wrap.result-phase .dohyo-platform {
      overflow: visible !important;
    }
    .arena-wrap.result-phase .result-on-ring.on {
      z-index: 22;
      overflow: visible;
    }
    .result-on-ring.on .fight-ring-composite {
      animation: result-pop 0.5s ease-out;
    }
    .fight-ring-composite {
      position: relative;
      isolation: isolate;
      /* Result / default ring mask over the artwork */
      width: min(78%, 420px);
      height: min(52%, 280px);
      max-height: min(52vh, 300px);
      margin: 0 auto;
      flex-shrink: 0;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      outline: none !important;
      overflow: hidden;
      line-height: 0;
      background: transparent;
      clip-path: var(--fight-ring-clip);
      -webkit-clip-path: var(--fight-ring-clip);
    }
    .arena-wrap.fighting .fight-ring-composite--full {
      background: #141414;
    }
    /* Fight MP4: full frame visible (whole bodies); sand in letterbox; soft rounded frame */
    .fight-ring-composite--full {
      position: relative;
      z-index: 1;
      width: min(
        calc(96% * 0.7225),
        calc((clamp(130px, 36vw, 240px) * 2 + clamp(0.2rem, 2vw, 0.85rem)) * 0.7225)
      );
      height: min(calc(58vw * 0.7225), calc(360px * 0.7225));
      max-height: min(56vh, 420px);
      min-height: 168px;
      padding: 0.2cm;
      box-sizing: border-box;
      border-radius: clamp(12px, 2.5vw, 22px) !important;
      clip-path: none;
      -webkit-clip-path: none;
      overflow: hidden;
    }
    /* Square fight viewport — black letterbox inside; fairy string tracks this box */
    .arena-wrap.fighting .fight-ring-composite--full {
      aspect-ratio: 1;
      width: min(
        84vw,
        58vh,
        400px,
        min(
          calc(96% * 0.7225),
          calc((clamp(130px, 36vw, 240px) * 2 + clamp(0.2rem, 2vw, 0.85rem)) * 0.7225)
        )
      );
      max-width: min(84vw, 58vh, 400px);
      height: auto;
      max-height: min(84vw, 58vh, 400px);
      min-height: 168px;
    }
    /* Winner PNG only: shrink-wrap — no full-bleed sand box like the video */
    .fight-ring-composite--winner {
      clip-path: none;
      -webkit-clip-path: none;
      width: auto;
      height: auto;
      min-height: 0;
      max-width: min(62vw, 364px);
      max-height: min(50vh, 364px);
      overflow: visible;
    }
    .fight-ring-composite--winner .result-winner-img {
      width: auto !important;
      height: auto !important;
      max-width: min(62vw, 364px);
      max-height: min(50vh, 364px);
      min-height: 0 !important;
      object-fit: contain;
      object-position: center bottom;
    }
    .result-ring-payout {
      position: absolute;
      left: calc(100% + 0.2rem);
      top: 50%;
      transform: translateY(-50%);
      z-index: 4;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      pointer-events: none;
      min-width: 4.5rem;
      padding: 0.15rem 0.1rem;
    }
    .result-ring-payout[hidden] {
      display: none !important;
    }
    /* Desktop: no winnings badge beside winner art (mobile keeps it) */
    @media (min-width: 561px) {
      .result-ring-payout {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
      }
    }
    /* Electric cyan / blue nebula behind the amount */
    .result-ring-payout__sparkles {
      position: absolute;
      inset: -1.1rem -1.5rem -1.1rem -1.5rem;
      z-index: 0;
      pointer-events: none;
      border-radius: 50%;
      background:
        radial-gradient(ellipse 58% 52% at 50% 48%, rgba(34, 211, 238, 0.42) 0%, transparent 58%),
        radial-gradient(circle at 22% 38%, rgba(56, 189, 248, 0.38) 0%, transparent 46%),
        radial-gradient(circle at 78% 42%, rgba(99, 102, 241, 0.32) 0%, transparent 44%),
        radial-gradient(circle at 52% 72%, rgba(14, 165, 233, 0.28) 0%, transparent 40%);
      opacity: 0.75;
      filter: blur(11px);
      animation: result-ring-nebula 2.2s ease-in-out infinite;
    }
    @keyframes result-ring-nebula {
      0%,
      100% {
        opacity: 0.55;
        transform: scale(1);
      }
      50% {
        opacity: 0.88;
        transform: scale(1.06);
      }
    }
    /* Red & green stardust specks bursting outward */
    .result-ring-payout__stardust {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0;
      height: 0;
      z-index: 1;
      pointer-events: none;
    }
    .result-ring-payout__speck {
      position: absolute;
      left: 0;
      top: 0;
      width: 8px;
      height: 8px;
      margin: -4px 0 0 -4px;
      border-radius: 50%;
      animation: result-stardust-fly 1.25s ease-out infinite;
      will-change: transform, opacity;
    }
    .result-ring-payout__speck--r {
      background: radial-gradient(circle at 35% 35%, #fff 0%, #fca5a5 28%, #ef4444 100%);
      box-shadow: 0 0 10px #f87171, 0 0 4px #fecaca;
    }
    .result-ring-payout__speck--g {
      background: radial-gradient(circle at 35% 35%, #fff 0%, #86efac 28%, #22c55e 100%);
      box-shadow: 0 0 10px #4ade80, 0 0 4px #bbf7d0;
    }
    .result-ring-payout__speck:nth-child(1) {
      --tx: 40px;
      --ty: -4px;
      animation-delay: 0s;
    }
    .result-ring-payout__speck:nth-child(2) {
      --tx: -36px;
      --ty: 8px;
      animation-delay: 0.06s;
    }
    .result-ring-payout__speck:nth-child(3) {
      --tx: 8px;
      --ty: -38px;
      animation-delay: 0.12s;
    }
    .result-ring-payout__speck:nth-child(4) {
      --tx: -10px;
      --ty: 40px;
      animation-delay: 0.04s;
    }
    .result-ring-payout__speck:nth-child(5) {
      --tx: 34px;
      --ty: 26px;
      animation-delay: 0.1s;
    }
    .result-ring-payout__speck:nth-child(6) {
      --tx: -32px;
      --ty: -22px;
      animation-delay: 0.14s;
    }
    .result-ring-payout__speck:nth-child(7) {
      --tx: 44px;
      --ty: 14px;
      animation-delay: 0.02s;
    }
    .result-ring-payout__speck:nth-child(8) {
      --tx: -42px;
      --ty: -10px;
      animation-delay: 0.16s;
    }
    .result-ring-payout__speck:nth-child(9) {
      --tx: 18px;
      --ty: 36px;
      animation-delay: 0.08s;
    }
    .result-ring-payout__speck:nth-child(10) {
      --tx: -20px;
      --ty: -36px;
      animation-delay: 0.11s;
    }
    .result-ring-payout__speck:nth-child(11) {
      --tx: 28px;
      --ty: -30px;
      animation-delay: 0.18s;
    }
    .result-ring-payout__speck:nth-child(12) {
      --tx: -26px;
      --ty: 32px;
      animation-delay: 0.05s;
    }
    @keyframes result-stardust-fly {
      0% {
        transform: translate(0, 0) scale(1.2);
        opacity: 0;
      }
      12% {
        opacity: 1;
      }
      100% {
        transform: translate(calc(var(--tx) * 1.55), calc(var(--ty) * 1.55)) scale(0.25);
        opacity: 0;
      }
    }
    .result-ring-payout__value {
      position: relative;
      z-index: 2;
      font-family: "RocknRoll One", "Segoe UI", system-ui, sans-serif;
      font-size: clamp(1rem, 3.8vw, 1.45rem);
      font-weight: 700;
      letter-spacing: 0.07em;
      line-height: 1.15;
      white-space: nowrap;
      padding: 0.42rem 0.65rem;
      border-radius: 12px;
      color: #e0f7ff;
      background: linear-gradient(165deg, rgba(12, 20, 38, 0.96) 0%, rgba(6, 11, 28, 0.98) 100%);
      border: 2px solid rgba(56, 189, 248, 0.9);
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.75),
        0 6px 22px rgba(0, 0, 0, 0.55),
        0 0 28px rgba(34, 211, 238, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
      text-shadow:
        0 0 14px rgba(56, 189, 248, 0.95),
        0 0 28px rgba(14, 165, 233, 0.55),
        0 1px 2px rgba(0, 0, 0, 0.95);
      animation: result-ring-neon-pulse 1.8s ease-in-out infinite alternate;
    }
    @keyframes result-ring-neon-pulse {
      0% {
        border-color: rgba(56, 189, 248, 0.75);
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.75),
          0 6px 22px rgba(0, 0, 0, 0.55),
          0 0 22px rgba(34, 211, 238, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }
      100% {
        border-color: rgba(125, 211, 252, 1);
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.8),
          0 8px 28px rgba(0, 0, 0, 0.58),
          0 0 40px rgba(56, 189, 248, 0.65),
          0 0 56px rgba(34, 211, 238, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.16);
      }
    }
    @media (max-width: 520px) {
      .result-ring-payout {
        left: 50%;
        top: calc(100% + 0.15rem);
        transform: translateX(-50%);
        align-items: center;
        padding: 0.15rem 0 0;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .result-ring-payout__sparkles,
      .result-ring-payout__value,
      .result-ring-payout__speck {
        animation: none !important;
      }
      .result-ring-payout__sparkles {
        opacity: 0.65;
      }
      .result-ring-payout__speck {
        opacity: 0.85;
        transform: translate(calc(var(--tx) * 0.45), calc(var(--ty) * 0.45)) scale(0.85);
      }
      .result-ring-payout__value {
        border-color: rgba(125, 211, 252, 0.95);
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.75),
          0 6px 22px rgba(0, 0, 0, 0.55),
          0 0 26px rgba(34, 211, 238, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.12);
      }
    }
    /* Mobile: same purple / turquoise / orange burst above ring payout + fighter */
    .result-win-fireworks {
      display: none;
    }
    @media (min-width: 561px) {
      .result-win-fireworks {
        display: none !important;
      }
    }
    @media (max-width: 560px) {
      .fight-ring-composite--winner.fight-ring-composite--win-fireworks {
        padding-top: 0;
        overflow: visible !important;
      }
      /* Fountain sits on the result stage, not inside the winner frame (avoids cut-out clip) */
      .result-on-ring > .result-win-fireworks:not([hidden]) {
        display: block;
        position: absolute;
        left: 50%;
        bottom: calc(0.5cm + min(42%, 220px));
        transform: translateX(-50%);
        width: min(22rem, 94vw);
        height: clamp(5.5rem, 22vw, 7.5rem);
        z-index: 30;
        pointer-events: none;
        overflow: visible;
      }
      .result-win-fireworks:not([hidden]) {
        display: block;
        position: absolute;
        left: 50%;
        top: auto;
        transform: translateX(-50%);
        width: min(22rem, 94vw);
        height: clamp(5.5rem, 22vw, 7.5rem);
        z-index: 30;
        pointer-events: none;
        overflow: visible;
      }
      .result-win-fire__ember {
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 6px;
        height: 6px;
        margin-left: -3px;
        border-radius: 50%;
        opacity: 0;
        transform: translate(-50%, 0);
        animation: result-win-firework-burst 1.15s ease-out infinite;
        will-change: transform, opacity;
      }
      .result-win-fire__ember--purple {
        background: radial-gradient(circle at 32% 32%, #f5f3ff 0%, #c4b5fd 35%, #7c3aed 100%);
        box-shadow: 0 0 10px #a78bfa, 0 0 4px #ede9fe;
      }
      .result-win-fire__ember--turquoise {
        background: radial-gradient(circle at 32% 32%, #ecfeff 0%, #5eead4 38%, #0d9488 100%);
        box-shadow: 0 0 10px #2dd4bf, 0 0 4px #ccfbf1;
      }
      .result-win-fire__ember--orange {
        background: radial-gradient(circle at 32% 32%, #fff7ed 0%, #fdba74 38%, #ea580c 100%);
        box-shadow: 0 0 10px #fb923c, 0 0 4px #ffedd5;
      }
      .result-win-fireworks:not([hidden]) .result-win-fire__ember:nth-child(1) {
        --dx: -10px;
        --dy: -56px;
        animation-delay: 0s;
      }
      .result-win-fireworks:not([hidden]) .result-win-fire__ember:nth-child(2) {
        --dx: 14px;
        --dy: -68px;
        animation-delay: 0.05s;
      }
      .result-win-fireworks:not([hidden]) .result-win-fire__ember:nth-child(3) {
        --dx: -22px;
        --dy: -50px;
        animation-delay: 0.1s;
      }
      .result-win-fireworks:not([hidden]) .result-win-fire__ember:nth-child(4) {
        --dx: 32px;
        --dy: -58px;
        animation-delay: 0.02s;
      }
      .result-win-fireworks:not([hidden]) .result-win-fire__ember:nth-child(5) {
        --dx: -40px;
        --dy: -40px;
        animation-delay: 0.12s;
      }
      .result-win-fireworks:not([hidden]) .result-win-fire__ember:nth-child(6) {
        --dx: 6px;
        --dy: -78px;
        animation-delay: 0.07s;
      }
      .result-win-fireworks:not([hidden]) .result-win-fire__ember:nth-child(7) {
        --dx: 46px;
        --dy: -38px;
        animation-delay: 0.15s;
      }
      .result-win-fireworks:not([hidden]) .result-win-fire__ember:nth-child(8) {
        --dx: -30px;
        --dy: -72px;
        animation-delay: 0.03s;
      }
      .result-win-fireworks:not([hidden]) .result-win-fire__ember:nth-child(9) {
        --dx: 22px;
        --dy: -44px;
        animation-delay: 0.09s;
      }
      .result-win-fireworks:not([hidden]) .result-win-fire__ember:nth-child(10) {
        --dx: -6px;
        --dy: -84px;
        animation-delay: 0.14s;
      }
      .result-win-fireworks:not([hidden]) .result-win-fire__ember:nth-child(11) {
        --dx: 54px;
        --dy: -50px;
        animation-delay: 0.06s;
      }
      .result-win-fireworks:not([hidden]) .result-win-fire__ember:nth-child(12) {
        --dx: -48px;
        --dy: -54px;
        animation-delay: 0.11s;
      }
      .result-win-fireworks:not([hidden]) .result-win-fire__ember:nth-child(13) {
        --dx: 2px;
        --dy: -62px;
        animation-delay: 0.04s;
      }
      .result-win-fireworks:not([hidden]) .result-win-fire__ember:nth-child(14) {
        --dx: -16px;
        --dy: -46px;
        animation-delay: 0.16s;
      }
      .result-win-fireworks:not([hidden]) .result-win-fire__ember:nth-child(15) {
        --dx: 38px;
        --dy: -74px;
        animation-delay: 0.08s;
      }
      .result-win-fireworks:not([hidden]) .result-win-fire__ember:nth-child(16) {
        --dx: -26px;
        --dy: -64px;
        animation-delay: 0.13s;
      }
    }
    @keyframes result-win-firework-burst {
      0% {
        transform: translate(-50%, 0) scale(1);
        opacity: 0;
      }
      8% {
        opacity: 1;
      }
      100% {
        transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, -90px)) scale(0.12);
        opacity: 0;
      }
    }
    @media (max-width: 560px) and (prefers-reduced-motion: reduce) {
      .result-win-fire__ember {
        animation: none !important;
        opacity: 0.5;
        transform: translate(calc(-50% + var(--dx, 0px) * 0.38), calc(var(--dy, -90px) * 0.38)) scale(0.8);
      }
    }
    /* Solid sand plane: white in the MP4 × multiply → sand */
    .fight-sand-backdrop {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: radial-gradient(
        ellipse 92% 88% at 50% 52%,
        var(--ring-sand) 0%,
        #f0d860 100%
      );
      pointer-events: none;
    }
    /* Fight clip uses black-mat MP4 — normal blend on true black */
    .arena-wrap.fighting .fight-ring-composite--full .fight-sand-backdrop {
      background: #000000 !important;
      background-image: none !important;
    }
    .fight-ring-composite video,
    .fight-video {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      min-height: 0;
      margin: 0;
      padding: 0;
      /* contain = full frame visible (sand backdrop fills letterbox via multiply) */
      object-fit: contain;
      object-position: center center;
      mix-blend-mode: normal;
      filter: none;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      outline: none !important;
    }
    .fight-ring-composite--full .fight-video {
      border-radius: 0 !important;
      object-fit: contain;
      object-position: center center;
      transform: none;
    }
    .arena-wrap.fighting .fight-ring-composite--full .fight-video {
      mix-blend-mode: normal;
      filter: none;
      background-color: #000000 !important;
    }
    @media (max-width: 639px) {
      /* Overlays/blend/3D force iOS software video decode → slow stutter */
      .arena-wrap.fighting .fight-frame-fairy-border,
      .arena-wrap.fighting .fight-spotlights,
      .arena-wrap.fighting .fight-crowd-twinkles,
      .arena-wrap.fighting .fight-fairy-perimeter,
      .arena-wrap.fighting .fight-mat-twinkles,
      .arena-wrap.fighting .fight-fighters-orbit,
      .arena-wrap.fighting .fight-mat-corner-spot,
      .arena-wrap.fighting .fight-mat-spotlight-rig,
      .arena-wrap.fighting .fight-audience-flashes {
        display: none !important;
      }
      .arena-wrap.fighting .fight-clip-stack,
      .arena-wrap.fighting .fight-on-mat__frame,
      .arena-wrap.fighting .fight-ring-composite--full,
      .arena-wrap.fighting .fight-sand-backdrop,
      .arena-wrap.fighting .fight-video {
        transform: none !important;
        filter: none !important;
        mix-blend-mode: normal !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        animation: none !important;
        transition: none !important;
      }
      /* Black stage so the clip’s black mat frame disappears into the viewport */
      .arena-wrap.fighting {
        background: #000000 !important;
      }
      .arena-wrap.fighting .arena-backdrop {
        background-image: none !important;
        background-color: #000000 !important;
        filter: none !important;
      }
      .arena-wrap.fighting .dohyo-clay {
        opacity: 0 !important;
      }
      .arena-wrap.fighting .fight-on-mat.on {
        background: #000000 !important;
        overflow: visible;
      }
      .arena-wrap.fighting .fight-on-mat.on::before {
        content: none;
      }
      .arena-wrap.fighting .fight-sand-backdrop {
        background: #000000 !important;
      }
      /* Bigger bout — size the box up (no CSS scale on the video) */
      .arena-wrap.fighting .fight-ring-composite--full {
        border-radius: 0 !important;
        background: #000000 !important;
        box-shadow: none !important;
        width: min(96vw, 78vh, 460px) !important;
        max-width: min(96vw, 78vh, 460px) !important;
        max-height: min(96vw, 78vh, 460px) !important;
        min-height: 200px !important;
        padding: 0 !important;
      }
      .arena-wrap.fighting .fight-on-mat {
        left: 2%;
        right: 2%;
        bottom: 0;
        height: 90%;
      }
      .arena-wrap.fighting .dohyo-platform {
        height: 88% !important;
        max-height: min(78vh, 520px) !important;
        min-height: 260px !important;
      }
      /*
       * Stadium edge lights — corners only (no full-width top bands that read as strips).
       * Purple / light blue / yellow around the rim of the black stage.
       */
      .arena-wrap.fighting .arena-fight-shade {
        display: block !important;
        background:
          radial-gradient(ellipse 48% 38% at 0% 12%, rgba(168, 85, 247, 0.5) 0%, transparent 72%),
          radial-gradient(ellipse 48% 38% at 100% 12%, rgba(125, 211, 252, 0.45) 0%, transparent 72%),
          radial-gradient(ellipse 42% 36% at 0% 88%, rgba(125, 211, 252, 0.35) 0%, transparent 72%),
          radial-gradient(ellipse 42% 36% at 100% 88%, rgba(168, 85, 247, 0.38) 0%, transparent 72%),
          radial-gradient(ellipse 36% 28% at 8% 50%, rgba(250, 204, 21, 0.18) 0%, transparent 75%),
          radial-gradient(ellipse 36% 28% at 92% 50%, rgba(250, 204, 21, 0.18) 0%, transparent 75%),
          #000000 !important;
      }
      .arena-wrap.fighting .fight-atmosphere {
        display: block !important;
        position: absolute;
        inset: 0;
        z-index: 15;
        pointer-events: none;
        overflow: hidden;
        background:
          radial-gradient(ellipse 34% 28% at 0% 8%, rgba(168, 85, 247, 0.42) 0%, transparent 74%),
          radial-gradient(ellipse 34% 28% at 100% 8%, rgba(125, 211, 252, 0.38) 0%, transparent 74%),
          radial-gradient(ellipse 32% 30% at 0% 92%, rgba(56, 189, 248, 0.28) 0%, transparent 74%),
          radial-gradient(ellipse 32% 30% at 100% 92%, rgba(168, 85, 247, 0.3) 0%, transparent 74%);
        mix-blend-mode: normal;
        filter: none;
        animation: none;
        transform: none;
        opacity: 1;
      }
      .arena-wrap.fighting .fight-atmosphere > * {
        display: none !important;
      }
      /* Never leave idle marquee / sparkle chrome visible over the black fight stage */
      .arena-wrap.fighting .arena-stadium-marquee,
      .arena-wrap.fighting .arena-upper-sparkles,
      .arena-wrap.fighting .fight-oriental-hangings,
      .arena-wrap.fighting .fight-bg-sparklers {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
      }
      .arena-wrap.fighting .fight-on-mat.on {
        z-index: 20;
      }
    }
    /* Hide embedded captions / subtitles UI (small white text) */
    .fight-ring-composite--full .fight-video::-webkit-media-text-track-display,
    .fight-ring-composite--full .fight-video::-webkit-media-text-track-container {
      display: none !important;
    }
    .fight-ring-composite--full .fight-video::cue {
      visibility: hidden;
      opacity: 0;
    }
    .fight-ring-composite .result-winner-img {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      min-height: 0;
      margin: 0;
      padding: 0;
      object-fit: contain;
      object-position: center center;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      outline: none !important;
    }
    .result-on-ring .result-winner-img {
      mix-blend-mode: normal;
      filter: saturate(1.12) contrast(1.05);
    }
    .arena-wrap.fighting .arena {
      z-index: 1;
      opacity: 0;
      visibility: hidden;
      filter: none;
      pointer-events: none;
      transition: opacity 0.35s ease, visibility 0.35s ease;
    }
    .arena-wrap.result-phase .arena {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: none;
    }
    /* While both classes overlap for one frame, keep the black fight stage under the winner */
    .arena-wrap.fighting.result-phase {
      background: #000000;
    }
    .arena-wrap.fighting.result-phase .fight-on-mat {
      opacity: 0 !important;
      visibility: hidden !important;
      transition: none !important;
    }
    .arena-wrap.fighting.result-phase .arena-backdrop {
      background-image: none !important;
      background-color: #000000 !important;
    }
    .arena-wrap.fighting .arena-stage {
      z-index: 3;
    }
    .arena-wrap.fighting .dohyo-clay {
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    /* Inside .dohyo-platform: same box as .fight-on-mat — tracks platform height / max-height */
    .arena-stage {
      position: absolute;
      left: 2%;
      right: 2%;
      width: auto;
      bottom: 16%;
      height: 74%;
      transform: none;
      z-index: 6;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      pointer-events: none;
    }
    .arena {
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: end;
      justify-items: center;
      column-gap: clamp(0.15rem, 2.5vw, 0.9rem);
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      box-sizing: border-box;
      padding: 0 0 0.2rem;
      min-height: 0;
      height: 100%;
      pointer-events: auto;
    }
    .fighter {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: none;
      height: 100%;
      justify-self: center;
      min-height: 44px;
      min-width: 44px;
      padding: 0;
      margin: 0;
      background: transparent;
      border: none;
      border-radius: 0;
      overflow: visible;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      -webkit-user-select: none;
      user-select: none;
      cursor: pointer;
      pointer-events: auto;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      transition: filter 0.2s ease, opacity 0.2s ease;
    }
    .fighter > .hud-choose {
      position: relative;
      z-index: 8;
      width: min(72%, 8.5rem);
      min-height: 1.15rem;
      margin-top: 0.2rem;
      padding: 0;
      border-radius: 999px;
      pointer-events: auto;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    }
    .fighter > .hud-choose.is-ready {
      box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.85),
        0 4px 14px rgba(0, 0, 0, 0.35);
    }
    #card-trompey > .hud-choose,
    #card-putey > .hud-choose {
      transform: none;
    }
    .arena-wrap.fighting .fighter > .hud-choose {
      display: none;
    }
    .fighter-figure {
      position: relative;
      width: 100%;
      flex: 1 1 auto;
      height: 100%;
      max-height: none;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
    }
    .fighter-figure__stack {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      height: 100%;
      min-height: 0;
      overflow: visible;
      transform: none;
    }
    .fighter-figure__stack--trompey {
      transform: none;
    }
    .fighter-portrait {
      width: 212.5%;
      max-width: none;
      height: 85%;
      max-height: none;
      object-fit: contain;
      object-position: left bottom;
      margin: 0 auto 0 0;
      display: block;
      flex: 0 0 auto;
      align-self: flex-end;
      pointer-events: none;
      user-select: none;
      filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
      transition: filter 0.35s ease;
    }
    /* Glow only after the player has chosen (not on first-load / post-round intro) */
    .arena-wrap:not(.arena-wrap--pick-intro) .fighter.selected .fighter-portrait {
      filter:
        brightness(1.04)
        drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45))
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.35));
    }
    .arena-wrap:not(.arena-wrap--pick-intro) .fighter:not(.selected) .fighter-portrait {
      filter:
        brightness(0.72)
        saturate(0.78)
        drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
      opacity: 0.78;
    }
    .arena-wrap:not(.arena-wrap--pick-intro) .fighter:not(.selected) .fighter-name {
      opacity: 0.9;
      filter: brightness(0.94);
    }
    .fighter-name {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: 50%;
      right: auto;
      bottom: 0.2rem;
      z-index: 2;
      width: auto;
      min-width: 6.4rem;
      margin: 0;
      padding: 0.42rem 1.15rem;
      font-family: Montserrat, var(--ui-font);
      font-size: clamp(0.78rem, 2.6vw, 0.95rem);
      font-weight: 800;
      letter-spacing: 0.1em;
      line-height: 1.1;
      color: #1a1208;
      text-align: center;
      text-shadow: none;
      text-transform: uppercase;
      pointer-events: none;
      user-select: none;
      white-space: nowrap;
      transform: translateX(-50%);
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
      background: linear-gradient(160deg, #fff4c8 0%, #e3b341 48%, #b8891f 100%);
      border: none;
      box-shadow:
        0 0 0 1px rgba(255, 230, 160, 0.35),
        0 6px 16px rgba(0, 0, 0, 0.4);
    }
    .fighter-pick-diamond__text {
      display: block;
      transform: none;
    }
    .fighter-name--trompey,
    .fighter-name--putey {
      color: #1a1208;
      transform: translateX(-50%);
    }
    .arena-wrap:not(.arena-wrap--pick-intro) .fighter.selected .fighter-name {
      color: #1a1208;
      background: linear-gradient(160deg, #fff8e0 0%, #f0d060 40%, #e3b341 100%);
      box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.55),
        0 0 18px rgba(227, 179, 65, 0.55),
        0 8px 18px rgba(0, 0, 0, 0.45);
      text-shadow: none;
      opacity: 1;
      filter: none;
    }
    .fighter:not([aria-disabled="true"]):hover {
      z-index: 4;
      filter: brightness(1.06);
    }
    .fighter[data-pick-locked] {
      cursor: not-allowed;
    }
    .fighter[aria-disabled="true"] {
      pointer-events: none;
      cursor: default;
      opacity: 0.72;
    }
    .fighter:focus {
      outline: none;
    }
    .fighter:focus-visible {
      outline: none;
    }
    @media (hover: none) {
      .fighter.selected {
        z-index: 6;
      }
    }
    /* Narrow viewports: keep both fighters fully visible and tappable. */
    @media (max-width: 639px) {
      .arena-wrap {
        --arena-photo-pos: 50% 70%;
        min-height: 0;
        flex: 1 1 auto;
      }
      .arena-wrap:not(.fighting) {
        overflow: hidden;
      }
      /* Result fountain must not be clipped by the arena card */
      .arena-wrap.result-phase,
      .arena-wrap.result-phase:not(.fighting) {
        overflow: visible !important;
      }
      .arena-wrap.result-phase .dohyo-platform,
      .arena-wrap.result-phase .result-on-ring,
      .arena-wrap.result-phase .fight-ring-composite--winner {
        overflow: visible !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
      }
      .arena-wrap.result-phase .fight-ring-composite--winner {
        isolation: auto;
      }
      .arena-wrap.result-phase .result-win-fireworks:not([hidden]) {
        z-index: 30;
      }
      .dohyo-platform {
        overflow: visible;
        height: 100%;
      }
      .arena-wrap.fighting .dohyo-platform {
        overflow: hidden;
      }
      .arena-stage {
        left: 0;
        right: 0;
        width: auto;
        height: 80%;
        bottom: 18%;
        transform: none;
        overflow: visible;
      }
      /* Idle pick copy lives in the foot-level pill; keep status off the heads */
      .arena-stage > .msg {
        display: none;
      }
      .arena-stage > .msg:empty {
        min-height: 0;
        padding: 0;
      }
      .arena-stage > .msg.error {
        color: #fff;
      }
      .arena {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 0.15rem;
        padding: 0;
        margin: 0 auto;
        transform: none;
        transform-origin: bottom center;
      }
      .arena-wrap.fighting .arena {
        transform: none;
      }
      .fighter {
        max-width: none;
        width: 100%;
        height: 100%;
      }
      .fighter-figure {
        height: 100%;
        max-height: none;
        flex: 1 1 auto;
        min-height: 0;
      }
      .fighter-figure__stack--trompey {
        transform: none;
      }
      .fighter-name {
        display: flex;
        min-width: 5.6rem;
        padding: 0.38rem 0.95rem;
        font-size: clamp(0.72rem, 3.2vw, 0.88rem);
        transform: translateX(-50%);
      }
      .fighter-name--trompey,
      .fighter-name--putey {
        transform: translateX(-50%);
      }
      .arena-upper-sparkles,
      .fight-oriental-hangings,
      .fight-audience-flashes,
      .fight-spotlights,
      .arena-stadium-marquee,
      .fight-bg-sparklers {
        display: none;
      }
      .arena-backdrop {
        filter: brightness(0.62) saturate(0.72);
      }
    }
    @media (max-width: 380px) {
      .arena-wrap:not(.fighting) .arena {
        transform: none;
      }
    }
    /* Sumo clip in the ring: +20% scale while the fight MP4 plays (desktop only — transform breaks iOS video) */
    @media (min-width: 640px) {
      .arena-wrap.fighting .fight-clip-stack {
        transform: scale(1.38) translateY(8%);
        transform-origin: center bottom;
      }
      .arena-wrap.fighting .fight-ring-composite--full {
        width: min(78vw, 72vh, 560px);
        max-width: min(78vw, 72vh, 560px);
        max-height: min(78vw, 72vh, 560px);
        min-height: 280px;
      }
      .arena-wrap.fighting .fight-on-mat {
        left: 4%;
        right: 4%;
        height: 88%;
        align-items: flex-end;
        padding-bottom: 1.5%;
      }
      /* Winner: larger hero, dead-center on the result stage */
      .result-on-ring {
        left: 4%;
        right: 4%;
        height: 88%;
        align-items: center;
        justify-content: center;
      }
      .fight-ring-composite--winner {
        max-width: min(70vw, 520px);
        max-height: min(70vh, 520px);
        margin: 0 auto;
      }
      .fight-ring-composite--winner .result-winner-img {
        max-width: min(70vw, 520px);
        max-height: min(70vh, 520px);
        object-position: center center;
      }
      /* Winner celebration: keep the control panel from dropping off-screen */
      .arena-wrap.result-phase {
        min-height: clamp(300px, 46dvh, 560px);
        flex: 1 1 auto;
      }
      .wrap.fight-flow:has(.arena-wrap.result-phase) .arena-wrap.result-phase ~ .arena-prompt-stack {
        margin-bottom: 0.25rem;
      }
      .wrap.fight-flow:has(.arena-wrap.result-phase) .controls.controls-minimal:has(.hud-pane) {
        margin-top: -0.85rem;
        padding-top: 0;
        padding-bottom: 0.25rem;
      }
      .wrap.fight-flow:has(.arena-wrap.result-phase) .play-pick-row {
        margin-bottom: 0;
        padding-bottom: 0;
      }
    }
    @media (max-width: 639px) {
      .arena-wrap.fighting .fight-clip-stack {
        transform: none !important;
      }
      .arena-wrap.fighting .dohyo-platform {
        overflow: visible;
      }
      .arena-wrap.fighting .fight-on-mat.on {
        z-index: 20;
        transition: none;
      }
    }
    .fighter.selected {
      z-index: 8;
    }
    /*
     * Desktop only — do not edit the max-width: 639px fighter rules.
     * PNGs are left-weighted; mobile keeps 212.5% + left margin.
     * Narrow the pick grid to the dohyo footprint so both fighters sit on the clay.
     */
    @media (min-width: 640px) {
      .fighter-figure,
      .fighter-figure__stack {
        align-items: flex-start;
        overflow: visible;
      }
      .fighter {
        overflow: visible;
      }
      .fighter-portrait {
        width: 212.5%;
        max-width: none;
        height: 85%;
        object-fit: contain;
        object-position: left bottom;
        margin: 0;
        align-self: flex-start;
        position: relative;
        left: 0;
        /* Inch left from 12% */
        transform: translateX(8%);
      }
      .arena-stage {
        left: 18%;
        right: 18%;
        width: auto;
        overflow: visible;
      }
      .arena {
        column-gap: clamp(0.75rem, 2.5vw, 1.75rem);
        padding: 0 0.25rem 0.35rem;
        overflow: visible;
      }
      /*
       * Source art is centered, but desktop arena is much wider than the side
       * panel: cover shows ~80% of the photo width vs ~45% in the panel, so
       * side galleries look lopsided. Zoom the backdrop so framing matches.
       */
      .arena-wrap:not(.fighting) {
        --arena-photo-pos: 50% 70%;
      }
      .arena-wrap:not(.fighting) .arena-backdrop {
        background-size: auto 155%;
        background-position: var(--arena-photo-pos);
      }
      /* Fight-bg neon orbs are for black clip; hide on idle so they don’t sit on Putey */
      .arena-wrap:not(.fighting) .fight-bg-sparklers {
        display: none;
      }
      /* Keep upper fairy orbs in the crowd band only */
      .arena-sparkle--pink {
        left: 78%;
        top: 12%;
      }
      .arena-sparkle--multi {
        left: 88%;
        top: 10%;
      }
      .arena-sparkle--blue {
        left: 18%;
        top: 12%;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .fighter-portrait {
        transition: none;
      }
    }
    .controls {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1rem 1.1rem 1.15rem;
    }
    .controls h2 {
      margin: 0 0 0.75rem;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .controls h2 + .bet-hint {
      margin: -0.5rem 0 0.65rem;
      font-size: 0.78rem;
      color: var(--muted);
      font-weight: 400;
      text-transform: none;
      letter-spacing: normal;
    }
    .bet-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.75rem;
    }
    .bet-row label {
      font-size: 0.85rem;
      color: var(--muted);
      width: 100%;
    }
    @media (min-width: 520px) {
      .bet-row label { width: auto; }
    }
    .bet-row input[type="number"] {
      width: 100px;
      padding: 0.5rem 0.6rem;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text);
      font-size: 1rem;
    }
    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-bottom: 1rem;
    }
    .chips button {
      padding: 0.4rem 0.65rem;
      font-size: 0.8rem;
      font-weight: 600;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: #21262d;
      color: var(--muted);
      cursor: pointer;
    }
    .chips button.is-selected {
      color: #0d1117;
      border-color: #fff;
      background: #fff;
      box-shadow: none;
    }
    .chips button:disabled { opacity: 0.45; cursor: not-allowed; }
    .fight-btn-split {
      display: flex;
      flex-direction: column;
      width: 100%;
      align-items: stretch;
      gap: 0.55rem;
      overflow: visible;
    }
    .fight-btn-split--inline-cta {
      flex-direction: column;
      width: auto;
      flex: 0 0 auto;
      align-items: stretch;
      gap: 0;
      max-width: none;
    }
    .fight-msg-spin-row:empty {
      display: none;
      min-height: 0;
      margin: 0;
      padding: 0;
    }
    .fight-msg-spin-row:not(:empty) {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 0.35rem;
      width: 100%;
      min-height: 1.1rem;
    }
    .fight-btn {
      width: 100%;
      padding: 0.85rem 1rem;
      font-family: var(--display-font);
      font-size: 1.05rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: none;
      border: 1px solid var(--fight-btn-trim);
      border-radius: var(--fight-btn-r);
      background: linear-gradient(
        180deg,
        var(--fight-btn-surface-top) 0%,
        var(--fight-btn-surface-mid) 52%,
        var(--fight-btn-surface-deep) 100%
      );
      color: #0d1117;
      cursor: pointer;
      box-shadow: 0 4px 16px var(--fight-btn-glow);
    }
    .fight-btn--main {
      flex: 0 0 auto;
      flex-shrink: 0;
      min-height: 2.75rem;
      position: relative;
      z-index: 2;
    }
    .fight-btn.fight-btn--inline-cta {
      width: auto;
      min-width: 5.1rem;
      padding: 0.4rem 0.85rem;
      font-size: 0.78rem;
      min-height: 2.35rem;
      letter-spacing: 0.1em;
      line-height: 1.15;
    }
    .bet-panel__payout-random-group .fight-spin-info-btn {
      border-radius: 50%;
    }
    .fight-spin-info-wrap {
      position: relative;
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      z-index: 6;
    }
    .fight-spin-info-tooltip {
      position: absolute;
      left: calc(100% + 10px);
      right: auto;
      top: 50%;
      bottom: auto;
      width: min(19.5rem, calc(100vw - 2.5rem));
      margin: 0;
      padding: 0 0 0 12px;
      margin-left: -12px;
      transform: translateY(-50%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: none;
      z-index: 8000;
    }
    .fight-spin-info-tooltip__inner {
      position: relative;
      padding: 0.65rem 0.78rem;
      border-radius: 12px;
      border: 2px solid transparent;
      background:
        linear-gradient(165deg, var(--panel) 0%, #141c28 100%) padding-box,
        linear-gradient(
          118deg,
          #7dd3fc 0%,
          #e2e8f0 14%,
          #38bdf8 28%,
          #f8fafc 42%,
          #60a5fa 56%,
          #cbd5e1 70%,
          #0ea5e9 84%,
          #f1f5f9 92%,
          #93c5fd 100%
        ) border-box;
      background-clip: padding-box, border-box;
      background-size: 100% 100%, 260% 260%;
      background-repeat: no-repeat, no-repeat;
      animation: fight-spin-tip-outline-shimmer 3.6s ease-in-out infinite;
      box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.65),
        0 0 14px rgba(56, 189, 248, 0.42),
        0 0 28px rgba(147, 197, 253, 0.22),
        0 0 48px rgba(186, 230, 253, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 24px rgba(56, 189, 248, 0.04),
        0 12px 40px rgba(0, 0, 0, 0.5);
      font-size: 0.82rem;
      line-height: 1.48;
      color: var(--text);
      text-align: left;
    }
    @keyframes fight-spin-tip-outline-shimmer {
      0%,
      100% {
        background-position: 0% 0%, 0% 45%;
      }
      50% {
        background-position: 0% 0%, 100% 55%;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .fight-spin-info-tooltip__inner {
        animation: none;
        background-position: 0% 0%, 50% 50%;
      }
    }
    .fight-spin-info-tooltip__inner p {
      margin: 0 0 0.5rem;
    }
    .fight-spin-info-tooltip__inner p:last-child {
      margin-bottom: 0;
    }
    @media (hover: hover) and (pointer: fine) {
      .fight-spin-info-wrap:hover .fight-spin-info-tooltip,
      .fight-spin-info-wrap:focus-within .fight-spin-info-tooltip {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
    }
    @media (hover: none) {
      .fight-spin-info-wrap--tip-open .fight-spin-info-tooltip {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
    }
    /* Above ℹ: small viewports and primary touch (coarse / no hover) */
    @media (max-width: 639px), (hover: none) {
      .fight-spin-info-tooltip {
        left: auto;
        right: 0;
        top: auto;
        bottom: calc(100% + 8px);
        transform: none;
        width: min(18rem, calc(100vw - 1.5rem));
        padding: 0 0 10px;
        margin-left: 0;
        margin-bottom: -10px;
      }
    }
    .fight-spin-info-btn {
      flex: 0 0 auto;
      width: var(--fight-spin-info-size);
      height: var(--fight-spin-info-size);
      min-width: var(--fight-spin-info-size);
      min-height: var(--fight-spin-info-size);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      background: #ffffff;
      overflow: visible;
      transition: background 0.15s ease, filter 0.15s ease;
    }
    .fight-spin-info-btn::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 130%;
      height: 130%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(
        circle at 50% 45%,
        rgba(100, 210, 255, 0.45) 0%,
        rgba(40, 160, 255, 0.12) 42%,
        transparent 68%
      );
      animation: fight-spin-info-halo 1.65s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }
    .fight-spin-info-btn:hover:not(:disabled) {
      filter: brightness(1.08);
    }
    .fight-spin-info-btn:hover:not(:disabled) .fight-spin-info-btn__i {
      fill: #38bdf8;
    }
    .fight-spin-info-btn:focus {
      outline: none;
    }
    .fight-spin-info-btn:focus-visible {
      outline: 2px solid rgba(120, 210, 255, 0.95);
      outline-offset: 2px;
    }
    .fight-spin-info-btn:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
    .fight-spin-info-btn:disabled::before {
      animation: none;
      opacity: 0.35;
    }
    .fight-spin-info-btn:disabled .fight-spin-info-btn__i {
      animation: none;
    }
    .fight-spin-info-btn__svg {
      display: block;
      overflow: visible;
      position: relative;
      z-index: 1;
    }
    .fight-spin-info-btn__ring {
      stroke: rgba(14, 116, 144, 0.72);
    }
    .fight-spin-info-btn__i-scale {
      pointer-events: none;
    }
    .fight-spin-info-btn__i {
      fill: #0369a1;
      animation: fight-spin-info-i-sparkle 1.55s ease-in-out infinite;
      filter:
        drop-shadow(0 0 1px rgba(56, 189, 248, 0.75))
        drop-shadow(0 0 4px rgba(14, 165, 233, 0.65))
        drop-shadow(0 0 10px rgba(8, 145, 178, 0.45))
        drop-shadow(0 0 16px rgba(14, 116, 144, 0.28));
    }
    @keyframes fight-spin-info-halo {
      0%,
      100% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(0.88);
      }
      50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
      }
    }
    @keyframes fight-spin-info-i-sparkle {
      0%,
      100% {
        fill: #0e7490;
        filter:
          drop-shadow(0 0 1px rgba(56, 189, 248, 0.55))
          drop-shadow(0 0 5px rgba(14, 165, 233, 0.5))
          drop-shadow(0 0 12px rgba(8, 145, 178, 0.38))
          drop-shadow(0 0 18px rgba(12, 74, 110, 0.22));
      }
      50% {
        fill: #0284c7;
        filter:
          drop-shadow(0 0 1px rgba(125, 211, 252, 0.85))
          drop-shadow(0 0 7px rgba(56, 189, 248, 0.72))
          drop-shadow(0 0 14px rgba(14, 165, 233, 0.48))
          drop-shadow(0 0 22px rgba(8, 145, 178, 0.32));
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .fight-spin-info-btn::before {
        animation: none;
        opacity: 0.65;
        transform: translate(-50%, -50%) scale(1);
      }
      .fight-spin-info-btn__i {
        animation: none;
        fill: #0369a1;
        filter:
          drop-shadow(0 0 1px rgba(56, 189, 248, 0.55))
          drop-shadow(0 0 6px rgba(14, 165, 233, 0.45));
      }
    }
    .fight-btn:hover:not(:disabled) {
      filter: brightness(1.08);
    }
    .fight-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      box-shadow: none;
    }
    @keyframes fight-btn-pair-pulse-auto {
      0%,
      100% {
        box-shadow: 0 4px 16px var(--fight-btn-glow);
      }
      50% {
        box-shadow: 0 0 28px var(--fight-btn-glow-strong);
      }
    }
    .fight-btn-split.fight-btn-split--pulse-auto .fight-btn--main {
      animation: fight-btn-pair-pulse-auto 0.42s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .fight-btn-split.fight-btn-split--pulse-auto .fight-btn--main {
        animation: none;
        box-shadow: 0 0 0 2px var(--fight-btn-trim), 0 4px 16px var(--fight-btn-glow);
      }
    }
    .arena-wrap:not(.fighting) .arena-stage > .msg {
      display: none;
    }
    .msg {
      margin-top: 0.75rem;
      min-height: 1.25rem;
      font-size: 0.9rem;
      text-align: center;
      color: var(--muted);
    }
    .msg.error { color: var(--lose); }
    @media (min-width: 640px) {
      .fight-msg-spin-row:not(:empty) {
        max-width: 288px;
        margin-left: auto;
        margin-right: auto;
      }
      .fight-msg-spin-row > .msg {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        min-height: 1.1rem;
        width: 100%;
        max-width: none;
        font-size: 0.8rem;
        font-weight: 700;
        text-align: center;
        color: var(--muted);
      }
    }
    /* Compact stake row — no headings / hint copy */
    .controls.controls-minimal {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0.5rem 0 0;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }
    .bet-panel {
      width: 100%;
      padding: 0.85rem 1rem 0.9rem;
      background: #000;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 16px;
      box-shadow: none;
    }
    .bet-panel__layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 0.65rem 0.85rem;
      width: 100%;
    }
    .play-bar {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.55rem;
    }
    .play-bar__win-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.4rem 0.75rem;
      min-height: 1.4rem;
    }
    .play-bar__bonus {
      margin: 0;
      width: 100%;
      padding: 0.42rem 0.7rem 0.48rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: transparent;
      color: #fff;
      font-family: var(--ui-font);
      cursor: pointer;
      text-align: center;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .play-bar__bonus-title {
      display: block;
      font-family: var(--display-font);
      font-size: 1.02rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      line-height: 1.15;
    }
    .play-bar__bonus-detail {
      display: block;
      margin-top: 0.12rem;
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.01em;
      color: var(--muted);
      line-height: 1.25;
    }
    .play-bar__bonus.is-on {
      border-color: #fff;
      background: rgba(255, 255, 255, 0.08);
    }
    .play-bar__bonus.is-on .play-bar__bonus-detail {
      color: rgba(255, 255, 255, 0.82);
    }
    .play-bar__bonus:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .play-bar__bonus:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 2px;
    }
    .play-bar__cta {
      width: 100%;
    }
    .play-bar__actions {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
      align-items: stretch;
      gap: 0.45rem;
      width: 100%;
    }
    .play-bar__actions .play-bar__bonus {
      width: 100%;
      min-height: 2.55rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0.28rem 0.5rem;
    }
    .play-bar__actions .play-bar__cta {
      width: 100%;
    }
    .bet-panel__win-cluster {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.5rem 0.75rem;
      max-width: 100%;
      justify-self: center;
    }
    .bet-panel > .fight-msg-spin-row:not(:empty) {
      margin-bottom: 0.4rem;
    }
    .bet-panel__payout-choice {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.45rem 0.65rem;
      width: 100%;
    }
    .bet-panel__payout-radios {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
      gap: 3px;
      flex: 1 1 auto;
      min-width: 0;
      padding: 3px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 14px;
      background: rgba(8, 12, 18, 0.72);
    }
    .bet-panel__win-type-label {
      grid-column: 1 / -1;
      text-align: center;
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0 0 0.12rem;
    }
    .bet-panel__payout-row--standard {
      grid-column: 1;
      min-width: 0;
    }
    .bet-panel__payout-random-group {
      grid-column: 2;
      min-width: 0;
      display: flex;
    }
    .bet-panel__payout-option {
      margin: 0;
      font-family: var(--ui-font);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: none;
      padding: 0.42rem 0.55rem;
      border-radius: 11px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
      min-height: 2.85rem;
      min-width: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .bet-panel__payout-option:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 2px;
    }
    .bet-panel__payout-option--active {
      border-color: transparent;
      color: #fff8e8;
      background: rgba(227, 179, 65, 0.16);
      box-shadow: inset 0 0 0 1px rgba(227, 179, 65, 0.45);
      transform: none;
    }
    .bet-panel__payout-option:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .bet-panel__payout-option--random {
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }
    .bet-panel__payout-option__copy {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.1rem;
    }
    .bet-panel__payout-option__title {
      display: block;
      font-size: 0.78rem;
      font-weight: 650;
      line-height: 1.1;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .bet-panel__payout-option__detail {
      display: block;
      margin-top: 0.12rem;
      font-size: 0.59rem;
      font-weight: 650;
      line-height: 1.15;
      letter-spacing: 0.01em;
      text-transform: none;
      color: var(--muted);
      white-space: nowrap;
    }
    .bet-panel__payout-option--active .bet-panel__payout-option__detail {
      color: #f0d78a;
    }
    .bet-panel__payout-random-group {
      grid-column: 2;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      min-width: 0;
    }
    .fight-btn-split--inline-cta {
      flex-direction: row;
      align-items: stretch;
    }
    .fight-btn__stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.08rem;
      line-height: 1.1;
    }
    .fight-btn-mode-hint {
      display: block;
      max-width: none;
      margin-top: 0;
      font-family: var(--ui-font);
      font-size: 0.58rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      line-height: 1.15;
      color: rgba(13, 17, 23, 0.55);
      text-align: center;
      text-transform: none;
      white-space: nowrap;
    }
    .fight-btn-mode-hint--spin {
      color: rgba(13, 17, 23, 0.72);
    }
    .bet-panel__payout-row {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      gap: 0;
      position: relative;
      width: 100%;
      min-width: 0;
    }
    .bet-panel__payout-hover-tip {
      position: absolute;
      left: calc(100% + 6px);
      top: 50%;
      right: auto;
      bottom: auto;
      width: max-content;
      max-width: min(17.5rem, calc(100vw - 2rem));
      margin: 0;
      padding: 0 0 0 8px;
      margin-left: -8px;
      transform: translateY(-50%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 9000;
      transition: opacity 0.1s ease, visibility 0.1s ease;
    }
    .bet-panel__payout-hover-tip__inner {
      padding: 0.55rem 0.68rem;
      border-radius: 10px;
      border: 1px solid rgba(139, 148, 158, 0.45);
      background: linear-gradient(165deg, var(--panel) 0%, #141c28 100%);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
      font-size: 0.78rem;
      line-height: 1.45;
      color: var(--text);
      text-align: left;
    }
    .bet-panel__payout-hover-tip__inner p {
      margin: 0 0 0.4rem;
    }
    .bet-panel__payout-hover-tip__inner p:last-child {
      margin-bottom: 0;
    }
    /* Desktop: show tip on hover only — not on click/focus (focus-within looked like “stuck” open). */
    @media (hover: hover) and (pointer: fine) {
      .bet-panel__payout-row:hover .bet-panel__payout-hover-tip {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
    }
    @media (hover: none) {
      .bet-panel__payout-row:active .bet-panel__payout-hover-tip {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
    }
    .bet-panel__payout-wheel-icon {
      display: flex;
      flex-shrink: 0;
      line-height: 0;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
    }
    .bet-panel__payout-wheel-svg {
      display: block;
      width: 22px;
      height: 22px;
    }
    .bet-panel__fight-mult {
      font-size: 0.88rem;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      color: #5ffcff;
      letter-spacing: 0.03em;
      white-space: nowrap;
      flex: 0 0 auto;
      text-shadow:
        0 0 6px rgba(0, 245, 255, 0.95),
        0 0 14px rgba(64, 224, 255, 0.65);
    }
    @media (prefers-reduced-motion: reduce) {
      .bet-panel__fight-mult {
        text-shadow: none;
      }
    }
    .bet-panel__fight-pick {
      display: inline-flex;
      align-items: center;
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.02em;
      white-space: nowrap;
      flex: 0 1 auto;
      min-width: 0;
      max-width: 9rem;
    }
    /* Author `display: inline-flex` beats the UA [hidden] rule — force off when hidden. */
    .bet-panel__fight-pick[hidden] {
      display: none !important;
    }
    .bet-panel__fight-pick-star {
      color: var(--gold);
      margin-right: 0.2em;
      flex-shrink: 0;
      line-height: 1;
    }
    #bet-panel-fight-pick-label {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .bet-panel__win {
      position: relative;
      margin: 0;
      text-align: center;
      font-size: 0.98rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--muted);
      white-space: nowrap;
      overflow: visible;
      flex: 0 0 auto;
    }
    .bet-panel__win--random-idle {
      white-space: normal;
      text-shadow:
        0 0 12px rgba(255, 220, 160, 0.35),
        0 0 22px rgba(56, 189, 248, 0.22);
    }
    .bet-panel__win-value-wrap--visually-hidden {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }
    .bet-panel__win-random-visual {
      position: relative;
      display: inline-flex;
      vertical-align: middle;
      align-items: center;
      justify-content: center;
      min-width: 0;
      min-height: 0;
      margin-left: 0.35rem;
      font-family: var(--display-font);
      font-size: 1.05rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--win);
    }
    /* Author `display: inline-flex` beats the UA [hidden] rule — force off when hidden. */
    .bet-panel__win-random-visual[hidden] {
      display: none !important;
    }
    .bet-panel__idle-wheel-shell {
      position: relative;
      width: clamp(2.75rem, 12vw, 3.4rem);
      height: clamp(2.75rem, 12vw, 3.4rem);
      animation: bet-panel-idle-wheel-spin 22s linear infinite;
    }
    @keyframes bet-panel-idle-wheel-spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .bet-panel__idle-wheel-shell {
        animation: none;
      }
      .bet-panel__idle-spark {
        animation: none !important;
        opacity: 0.35;
      }
    }
    .bet-panel__idle-wheel-glow {
      position: absolute;
      inset: -24%;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(
        circle at 42% 38%,
        rgba(255, 248, 220, 0.58) 0%,
        rgba(120, 210, 255, 0.32) 40%,
        rgba(255, 140, 220, 0.22) 62%,
        transparent 76%
      );
      filter: blur(9px);
      opacity: 0.92;
      animation: bet-panel-idle-glow 2.9s ease-in-out infinite;
    }
    @keyframes bet-panel-idle-glow {
      0%,
      100% {
        opacity: 0.62;
        transform: scale(0.94);
      }
      50% {
        opacity: 1;
        transform: scale(1.08);
      }
    }
    .bet-panel__idle-wheel-svg {
      position: relative;
      z-index: 2;
      display: block;
      width: 100%;
      height: 100%;
      filter:
        drop-shadow(0 0 14px rgba(255, 220, 140, 0.55))
        drop-shadow(0 0 6px rgba(56, 189, 248, 0.4));
    }
    .bet-panel__idle-wheel-sparkles {
      position: absolute;
      inset: -10%;
      z-index: 4;
      pointer-events: none;
    }
    .bet-panel__idle-spark {
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #fff;
      box-shadow:
        0 0 10px 3px rgba(255, 255, 255, 0.95),
        0 0 16px 4px rgba(255, 200, 120, 0.65);
      animation: bet-panel-idle-sparkle 1.55s ease-in-out infinite;
    }
    @keyframes bet-panel-idle-sparkle {
      0%,
      100% {
        opacity: 0.2;
        transform: scale(0.45);
      }
      50% {
        opacity: 1;
        transform: scale(1.35);
      }
    }
    .bet-panel__idle-spark--1 {
      top: 6%;
      left: 50%;
      margin-left: -2px;
      animation-delay: 0s;
    }
    .bet-panel__idle-spark--2 {
      top: 42%;
      right: 2%;
      animation-delay: 0.25s;
    }
    .bet-panel__idle-spark--3 {
      bottom: 12%;
      right: 18%;
      animation-delay: 0.5s;
    }
    .bet-panel__idle-spark--4 {
      bottom: 8%;
      left: 14%;
      animation-delay: 0.12s;
    }
    .bet-panel__idle-spark--5 {
      top: 38%;
      left: 4%;
      animation-delay: 0.38s;
    }
    .bet-panel__idle-spark--6 {
      top: 18%;
      right: 22%;
      animation-delay: 0.65s;
    }
    .bet-panel__win-value-wrap {
      position: relative;
      display: inline-block;
      vertical-align: baseline;
      overflow: visible;
    }
    .bet-panel__win-value {
      color: var(--win);
      font-variant-numeric: tabular-nums;
      font-weight: 700;
    }
    /* Rare wheel multipliers above 1.95× */
    .bet-panel__win-value-wrap--stardust {
      z-index: 2;
    }
    .bet-panel__win-value-wrap--stardust .bet-panel__win-value {
      position: relative;
      z-index: 2;
      color: #fff8e8;
      text-shadow:
        0 0 8px rgba(255, 69, 0, 0.95),
        0 0 14px rgba(46, 204, 113, 0.9),
        0 0 20px rgba(255, 140, 0, 0.9),
        0 0 26px rgba(255, 45, 85, 0.75);
      animation:
        win-value-stardust-pop 0.68s cubic-bezier(0.22, 1.25, 0.36, 1) forwards,
        win-value-stardust-shimmer 2.2s ease-in-out 0.58s infinite;
    }
    @keyframes win-value-stardust-pop {
      0% {
        transform: scale(1);
        filter: brightness(1);
      }
      55% {
        transform: scale(1.2);
        filter: brightness(1.38);
      }
      100% {
        transform: scale(1);
        filter: brightness(1.06);
      }
    }
    @keyframes win-value-stardust-shimmer {
      0%,
      100% {
        text-shadow:
          0 0 10px #ff5722,
          0 0 18px #2ecc71,
          0 0 24px #ff9800;
      }
      50% {
        text-shadow:
          0 0 14px #e53935,
          0 0 22px #43a047,
          0 0 30px #ffa726;
      }
    }
    .bet-panel__win-value-wrap--stardust::before,
    .bet-panel__win-value-wrap--stardust::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 5px;
      height: 5px;
      margin: -2.5px 0 0 -2.5px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      opacity: 0;
    }
    .bet-panel__win-value-wrap--stardust::before {
      animation: win-stardust-burst-a 0.92s ease-out forwards;
      box-shadow:
        -30px -8px 0 0 rgba(255, 87, 34, 0.95),
        28px 12px 0 0 rgba(76, 175, 80, 0.92),
        6px -32px 0 1px rgba(255, 152, 0, 0.9),
        -20px 26px 0 0 rgba(244, 67, 54, 0.88),
        34px -14px 0 0 rgba(139, 195, 74, 0.88),
        -10px 34px 0 1px rgba(255, 109, 0, 0.82);
    }
    .bet-panel__win-value-wrap--stardust::after {
      animation: win-stardust-burst-b 0.88s ease-out 0.06s forwards;
      box-shadow:
        22px 24px 0 0 rgba(56, 142, 60, 0.9),
        -26px -20px 0 0 rgba(229, 57, 53, 0.9),
        0 36px 0 0 rgba(255, 193, 7, 0.85),
        -32px 10px 0 1px rgba(255, 82, 28, 0.8);
    }
    @keyframes win-stardust-burst-a {
      0% {
        opacity: 0;
        transform: scale(0.25);
      }
      18% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: scale(3.4);
      }
    }
    @keyframes win-stardust-burst-b {
      0% {
        opacity: 0;
        transform: scale(0.2) rotate(22deg);
      }
      22% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: scale(2.9) rotate(22deg);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .bet-panel__win-value-wrap--stardust .bet-panel__win-value {
        animation: none;
        text-shadow:
          0 0 8px rgba(255, 87, 34, 0.85),
          0 0 12px rgba(46, 125, 50, 0.8);
      }
      .bet-panel__win-value-wrap--stardust::before,
      .bet-panel__win-value-wrap--stardust::after {
        animation: none;
        opacity: 0.55;
        transform: scale(1.6);
      }
    }
    .action-bar__stakes {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.45rem 0.55rem;
      justify-self: start;
      min-width: 0;
    }
    .stake-input-label {
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .stakes-outcome-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.65rem 1rem;
      min-width: 0;
      width: 100%;
    }
    .outcome-announce {
      margin: 0;
      font-size: clamp(0.88rem, 2.8vw, 1.05rem);
      font-weight: 800;
      letter-spacing: 0.03em;
      color: var(--win);
      max-width: 12rem;
      line-height: 1.25;
      flex-shrink: 0;
    }
    .outcome-announce[hidden] {
      display: none !important;
    }
    /* Winnings or loss copy + fireworks — to the right of “Trompey wins!” */
    .outcome-result-wrap {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1 1 auto;
      min-width: min(11rem, 100%);
      min-height: 2.5rem;
      padding: 0.4rem 1rem;
      flex-shrink: 1;
    }
    .outcome-result-wrap:has(> .outcome-result-text[hidden]) {
      display: none;
    }
    .outcome-result-text {
      position: relative;
      z-index: 1;
      margin: 0;
      text-align: center;
      font-size: clamp(0.8rem, 2.5vw, 1.05rem);
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      line-height: 1.3;
      color: var(--text);
      pointer-events: none;
    }
    .outcome-result-text[hidden] {
      display: none !important;
    }
    .outcome-result-text--win {
      color: var(--win);
      text-shadow: 0 0 12px rgba(126, 200, 255, 0.4);
    }
    .outcome-result-text--lose {
      color: #ffa198;
      font-size: clamp(0.75rem, 2.3vw, 0.95rem);
    }
    /* Purple / blue / red bursts around winnings (win only) */
    .fireworks {
      position: absolute;
      inset: -24px;
      pointer-events: none;
      z-index: 0;
      overflow: visible;
    }
    .fireworks[hidden] {
      display: none !important;
    }
    .fireworks__spark {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 5px;
      height: 5px;
      margin: -2.5px 0 0 -2.5px;
      border-radius: 50%;
      opacity: 0;
      animation: fireworks-burst 1.1s ease-out infinite;
    }
    .fireworks__spark--purple {
      background: #c084fc;
      box-shadow: 0 0 10px #a855f7, 0 0 16px rgba(168, 85, 247, 0.6);
    }
    .fireworks__spark--blue {
      background: #60a5fa;
      box-shadow: 0 0 10px #3b82f6, 0 0 16px rgba(59, 130, 246, 0.55);
    }
    .fireworks__spark--red {
      background: #f87171;
      box-shadow: 0 0 10px #ef4444, 0 0 16px rgba(239, 68, 68, 0.55);
    }
    .fireworks__spark:nth-child(1) {
      animation-delay: 0s;
      --fx-a: 0deg;
      --fx-d: 42px;
    }
    .fireworks__spark:nth-child(2) {
      animation-delay: 0.08s;
      --fx-a: 20deg;
      --fx-d: 46px;
    }
    .fireworks__spark:nth-child(3) {
      animation-delay: 0.04s;
      --fx-a: 40deg;
      --fx-d: 40px;
    }
    .fireworks__spark:nth-child(4) {
      animation-delay: 0.12s;
      --fx-a: 60deg;
      --fx-d: 44px;
    }
    .fireworks__spark:nth-child(5) {
      animation-delay: 0.02s;
      --fx-a: 80deg;
      --fx-d: 48px;
    }
    .fireworks__spark:nth-child(6) {
      animation-delay: 0.16s;
      --fx-a: 100deg;
      --fx-d: 41px;
    }
    .fireworks__spark:nth-child(7) {
      animation-delay: 0.06s;
      --fx-a: 120deg;
      --fx-d: 45px;
    }
    .fireworks__spark:nth-child(8) {
      animation-delay: 0.14s;
      --fx-a: 140deg;
      --fx-d: 43px;
    }
    .fireworks__spark:nth-child(9) {
      animation-delay: 0.1s;
      --fx-a: 160deg;
      --fx-d: 47px;
    }
    .fireworks__spark:nth-child(10) {
      animation-delay: 0.18s;
      --fx-a: 180deg;
      --fx-d: 42px;
    }
    .fireworks__spark:nth-child(11) {
      animation-delay: 0.05s;
      --fx-a: 200deg;
      --fx-d: 46px;
    }
    .fireworks__spark:nth-child(12) {
      animation-delay: 0.15s;
      --fx-a: 220deg;
      --fx-d: 40px;
    }
    .fireworks__spark:nth-child(13) {
      animation-delay: 0.09s;
      --fx-a: 240deg;
      --fx-d: 44px;
    }
    .fireworks__spark:nth-child(14) {
      animation-delay: 0.03s;
      --fx-a: 260deg;
      --fx-d: 48px;
    }
    .fireworks__spark:nth-child(15) {
      animation-delay: 0.17s;
      --fx-a: 280deg;
      --fx-d: 41px;
    }
    .fireworks__spark:nth-child(16) {
      animation-delay: 0.11s;
      --fx-a: 300deg;
      --fx-d: 45px;
    }
    .fireworks__spark:nth-child(17) {
      animation-delay: 0.07s;
      --fx-a: 320deg;
      --fx-d: 43px;
    }
    .fireworks__spark:nth-child(18) {
      animation-delay: 0.13s;
      --fx-a: 340deg;
      --fx-d: 46px;
    }
    @keyframes fireworks-burst {
      0% {
        transform: rotate(var(--fx-a)) translateY(0) scale(1.2);
        opacity: 0;
      }
      12% {
        opacity: 1;
      }
      100% {
        transform: rotate(var(--fx-a)) translateY(calc(-1 * var(--fx-d))) scale(0.2);
        opacity: 0;
      }
    }
    .action-bar__balance {
      justify-self: end;
      font-size: 0.92rem;
      color: var(--muted);
      text-align: right;
      white-space: nowrap;
    }
    @media (max-width: 560px) {
      .app-shell {
        padding-left: 0.38rem;
        padding-right: 0.38rem;
        padding-bottom: max(0.45rem, env(safe-area-inset-bottom));
      }
      .app-header {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        justify-items: center;
        min-height: 4.8rem;
      }
      .app-header__balance,
      .app-header__balance--mobile {
        position: absolute;
        top: 0.1rem;
        left: 0;
        z-index: 6;
        display: flex;
        min-width: 0;
        max-width: calc(50% - 0.5rem);
        margin-left: 0;
        transform: none;
        font-size: 1.02rem;
        gap: 0.3rem;
      }
      .app-header__title {
        display: block;
        justify-self: center;
        max-width: calc(100% - 5.75rem);
        padding-top: 1.15rem;
        transform: none;
      }
      .app-header__logo {
        height: clamp(3rem, 13vw, 4.35rem);
        max-width: 100%;
      }
      .app-header__menu {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 6;
        transform: none;
        margin-right: 0;
      }
      .app-menu-toggle {
        width: 2.12rem;
        height: 2.12rem;
        transform: scale(0.9);
        transform-origin: right center;
      }
      .bet-panel__layout {
        grid-template-columns: 1fr;
        gap: 0.65rem;
        justify-items: stretch;
      }
      .bet-panel__win-cluster {
        order: 0;
        flex-direction: column;
        justify-self: center;
        width: 100%;
        gap: 0.55rem;
      }
      .action-bar__stakes,
      .stakes-outcome-row {
        width: 100%;
        justify-content: center;
      }
      .arena-prompt-stack,
      .arena-prompt {
        width: 100%;
        min-width: 0;
      }
      .arena-prompt {
        padding: 0.42rem 0.55rem;
        font-size: clamp(0.84rem, 4vw, 1rem);
      }
      .arena-prompt__lead {
        width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
      }
      .bet-panel {
        padding: 0.7rem;
      }
      .bet-panel__payout-choice {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
      }
      .bet-panel__payout-radios {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        width: 100%;
        gap: 3px;
        padding: 3px;
      }
      .bet-panel__payout-radios .bet-panel__win-type-label {
        grid-column: 1 / -1;
        width: 100%;
        margin: 0 0 0.08rem;
        text-align: center;
      }
      .bet-panel__payout-random-group {
        display: flex;
        grid-column: 2;
        min-width: 0;
      }
      .bet-panel__payout-row,
      .bet-panel__payout-option {
        width: 100%;
        min-width: 0;
      }
      .bet-panel__payout-option__copy {
        min-width: 0;
      }
      .bet-panel__payout-option__detail {
        white-space: normal;
        text-wrap: balance;
      }
      .controls-minimal .fight-btn-split--inline-cta,
      .controls-minimal .fight-btn.fight-btn--inline-cta {
        width: 100%;
      }
      .controls-minimal .fight-btn.fight-btn--inline-cta {
        min-height: 2.75rem;
        font-size: 0.82rem;
      }
      .fight-btn-mode-hint {
        white-space: normal;
      }
      /* Touch UI already explains both bet types inline; hover tips only create overflow. */
      .bet-panel__payout-hover-tip {
        display: none;
      }
      /* Panel balance: keep for screen readers / sync; icon + amount live in header */
      .bet-panel__layout > .action-bar__balance {
        display: none;
      }
      .bet-panel__payout-radios .bet-panel__win-type-label {
        flex: 0 0 auto !important;
        width: auto;
        max-width: none;
        text-align: left;
        margin: 0 0.32rem 0 0;
        align-self: center;
      }
      .bet-panel__payout-hover-tip {
        left: 50%;
        right: auto;
        top: auto;
        bottom: calc(100% + 8px);
        transform: translateX(-50%);
        width: min(18rem, calc(100vw - 1.5rem));
        max-width: min(18rem, calc(100vw - 1.5rem));
        padding: 0 0 10px;
        margin-left: 0;
        margin-bottom: -10px;
      }
    }
    /* Desktop: win + bonus + Fight, stake on the last row */
    @media (min-width: 561px) {
      .bet-panel__layout.play-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto auto;
        align-items: center;
      }
      .play-bar__win-row {
        grid-column: 1 / -1;
        grid-row: 1;
      }
      .play-bar__bonus {
        grid-column: auto;
        grid-row: auto;
        width: auto;
        justify-self: stretch;
      }
      .play-bar__cta {
        grid-column: auto;
        grid-row: auto;
        width: auto;
      }
      .play-bar__actions {
        grid-column: 1 / -1;
        grid-row: 2;
      }
      .controls-minimal .action-bar__stakes,
      .play-bar__stakes {
        grid-column: 1;
        grid-row: 3;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
        padding-right: 1rem;
      }
      .bet-panel__layout.play-bar > .action-bar__balance {
        grid-column: 2;
        grid-row: 3;
        align-self: center;
        display: block;
      }
      .bet-panel__win-cluster {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        justify-self: stretch;
        flex-wrap: nowrap;
      }
      .controls-minimal .stakes-outcome-row {
        flex-wrap: nowrap;
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
      }
      .controls-minimal .chips {
        flex-wrap: nowrap;
        flex: 0 1 auto;
        min-width: 0;
      }
      .controls-minimal .stake-input {
        flex: 0 0 auto;
      }
      .bet-panel__payout-choice {
        width: auto;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        column-gap: 0.22rem;
        row-gap: 0.45rem;
      }
      .bet-panel__payout-radios {
        margin-right: 0.12rem;
      }
      .controls-minimal .fight-btn-split--inline-cta {
        margin-left: -0.08rem;
      }
      .controls-minimal .chips .chips__chip--desktop-only {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .app-menu-toggle {
        width: 2.5rem;
        height: 2.5rem;
        transform: none;
      }
    }
    .action-bar__balance strong {
      color: #fff;
      font-weight: 700;
    }
    .controls-minimal .stake-input {
      width: 4.25rem;
      padding: 0.42rem 0.45rem;
      font-size: 0.95rem;
      font-variant-numeric: tabular-nums;
      text-align: center;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: rgba(22, 27, 34, 0.92);
      color: var(--text);
      appearance: textfield;
      -moz-appearance: textfield;
    }
    .controls-minimal .stake-input::-webkit-outer-spin-button,
    .controls-minimal .stake-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
      .controls-minimal .stake-input:focus {
      outline: none;
      border-color: #fff;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
    }
    .controls-minimal .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.28rem;
      margin: 0;
      justify-content: flex-start;
    }
    .controls-minimal .chips button {
      min-width: 2.35rem;
      padding: 0.32rem 0.45rem;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: transparent;
      color: #fff;
      font-family: var(--ui-font);
    }
    .controls-minimal .chips button.is-selected {
      color: #0d1117;
      border-color: #fff;
      background: #fff;
    }
    .controls-minimal .chips .chips__chip--desktop-only {
      display: none;
    }
    .controls-minimal .fight-btn-split--inline-cta {
      width: auto;
      max-width: none;
      margin: 0;
      gap: 0;
    }
    .controls-minimal .fight-msg-spin-row:not(:empty) {
      max-width: 288px;
      margin-left: auto;
      margin-right: auto;
    }
    .controls-minimal .bet-panel__payout-option {
      font-size: 0.68rem;
      padding: 0.28rem 0.48rem;
    }
    .controls-minimal .bet-panel__payout-wheel-svg {
      width: 20px;
      height: 20px;
    }
    .controls-minimal .bet-panel__idle-wheel-shell {
      width: clamp(2.45rem, 10.5vw, 2.95rem);
      height: clamp(2.45rem, 10.5vw, 2.95rem);
    }
    .controls-minimal .bet-panel__win-random-visual {
      min-width: 0;
      min-height: 0;
    }
    .controls-minimal .fight-btn.fight-btn--inline-cta {
      padding: 0.48rem 0.9rem;
      font-size: clamp(1.05rem, 4.2vw, 1.28rem);
      min-height: 2.55rem;
      min-width: 4.85rem;
      letter-spacing: 0.08em;
      line-height: 1.15;
    }
    /* Desktop: larger control panel typography & controls; stake input + chips unchanged */
    @media (min-width: 561px) {
      .controls.controls-minimal {
        gap: 0.85rem;
        padding: 0.65rem 0 0;
      }
      .bet-panel {
        padding: 1.05rem 1.25rem 1.05rem;
        border-radius: 14px;
      }
      .bet-panel__layout.play-bar {
        gap: 0.85rem 1.05rem;
      }
      .bet-panel__win-cluster {
        gap: 0.62rem 1rem;
      }
      .bet-panel__payout-choice {
        column-gap: 0.4rem;
        row-gap: 0.55rem;
      }
      .bet-panel__payout-radios {
        gap: 0.5rem 0.72rem;
        margin-right: 0.18rem;
      }
      .controls-minimal .bet-panel__win-type-label {
        font-size: 0.8rem;
        letter-spacing: 0.14em;
      }
      .controls-minimal .bet-panel__payout-option {
        font-size: 0.84rem;
        padding: 0.44rem 0.82rem;
      }
      .controls-minimal .bet-panel__payout-option--random {
        gap: 0.34rem;
      }
      .controls-minimal .bet-panel__payout-wheel-svg {
        width: 26px;
        height: 26px;
      }
      .controls-minimal .bet-panel__payout-hover-tip__inner {
        font-size: 0.92rem;
        line-height: 1.48;
        padding: 0.65rem 0.82rem;
        border-radius: 11px;
      }
      .controls-minimal .bet-panel__win {
        font-size: 1.14rem;
        letter-spacing: 0.045em;
      }
      .controls-minimal .bet-panel__idle-wheel-shell {
        width: clamp(2.85rem, 9vw, 3.45rem);
        height: clamp(2.85rem, 9vw, 3.45rem);
      }
      .controls-minimal .bet-panel__win-random-visual {
        min-width: 0;
        min-height: 0;
      }
      .bet-panel__fight-mult {
        font-size: 1.05rem;
      }
      .bet-panel__fight-pick {
        font-size: 1.02rem;
        max-width: 13rem;
      }
      .action-bar__balance {
        font-size: 1.08rem;
      }
      .controls-minimal .fight-msg-spin-row:not(:empty) {
        max-width: 340px;
      }
      .controls-minimal .fight-msg-spin-row > .msg {
        font-size: 0.92rem;
        font-weight: 700;
      }
      .controls-minimal .fight-btn-split--inline-cta {
        margin-left: 0;
      }
      .controls-minimal .fight-btn.fight-btn--inline-cta {
        padding: 0.72rem 1.85rem;
        font-size: 1.08rem;
        min-height: 3.2rem;
        min-width: 8.25rem;
        letter-spacing: 0.12em;
        line-height: 1.2;
      }
    }
    /* Mobile betting panel: compact stake row, clearer and more vivid bet cards. */
    @media (max-width: 560px) {
      .controls.controls-minimal {
        padding-top: 0.35rem;
        gap: 0.4rem;
      }
      .bet-panel {
        padding: 0.48rem 0.55rem 0.55rem;
        border-color: rgba(255, 255, 255, 0.16);
        background: #000;
        box-shadow: none;
      }
      .bet-panel__layout.play-bar {
        display: flex;
        flex-direction: column;
        gap: 0.38rem;
      }
      .play-bar__bonus-detail {
        font-size: 0.6rem;
      }
      .play-bar__cta,
      .controls-minimal .fight-btn-split--inline-cta,
      .controls-minimal .fight-btn.fight-btn--inline-cta {
        width: 100%;
      }
      .play-bar__actions {
        grid-template-columns: minmax(5.6rem, 0.85fr) minmax(0, 1.4fr);
        gap: 0.32rem;
      }
      .play-bar__stakes,
      .action-bar__stakes {
        flex-wrap: nowrap;
        gap: 0.22rem 0.32rem;
        width: 100%;
      }
      .stake-input-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
      }
      .controls-minimal .stake-input {
        width: 3.45rem;
        padding: 0.28rem 0.35rem;
        font-size: 0.84rem;
        border-radius: 8px;
      }
      .controls-minimal .chips {
        gap: 0.2rem;
      }
      .controls-minimal .chips button {
        min-width: 1.92rem;
        padding: 0.24rem 0.32rem;
        font-size: 0.65rem;
        background: transparent;
        border-color: rgba(255, 255, 255, 0.12);
        color: var(--muted);
      }
      .controls-minimal .chips button.is-selected {
        color: #0d1117;
        border-color: #fff;
        background: #fff;
      }
      .controls-minimal .bet-panel__win {
        font-size: 0.92rem;
        color: var(--muted);
      }
      .bet-panel__payout-wheel-icon {
        opacity: 0.55;
        filter: grayscale(1) brightness(1.15);
      }
      .bet-panel__win-cluster {
        gap: 0.42rem;
      }
      .controls-minimal .bet-panel__win {
        font-size: 1rem;
      }
      .bet-panel__payout-radios {
        gap: 3px;
        padding: 3px;
        border-color: rgba(255, 255, 255, 0.08);
        background: rgba(8, 12, 18, 0.72);
        box-shadow: none;
      }
      .controls-minimal .bet-panel__win-type-label {
        margin-bottom: 0.08rem;
        font-size: 0.6rem;
        letter-spacing: 0.14em;
        color: var(--muted);
      }
      .controls-minimal .bet-panel__payout-option {
        min-height: 2.7rem;
        padding: 0.38rem 0.32rem;
        font-size: 0.7rem;
        box-shadow: none;
      }
      .bet-panel__payout-option__title {
        font-size: 0.72rem;
        font-weight: 650;
      }
      .bet-panel__payout-option__detail {
        font-size: 0.55rem;
        line-height: 1.2;
      }
      .controls-minimal .bet-panel__payout-wheel-svg {
        width: 24px;
        height: 24px;
      }
      .controls-minimal .bet-panel__idle-wheel-shell {
        width: clamp(1.2rem, 5.25vw, 1.5rem);
        height: clamp(1.2rem, 5.25vw, 1.5rem);
      }
      .controls-minimal .bet-panel__win-random-visual {
        min-width: 0;
        min-height: 0;
        margin-left: 0.2rem;
        font-size: 0.95rem;
      }
      .controls-minimal .fight-btn-split--inline-cta {
        margin-top: 0.05rem;
      }
    }
    @keyframes result-pop {
      from { transform: scale(0.94); opacity: 0.88; }
      to { transform: scale(1); opacity: 1; }
    }

    /* Play dock sits in document flow (mobile first) */
    .controls.controls-minimal:has(.hud-pane) {
      padding: 0;
      gap: 0;
      background: #000;
    }
    .play-guide.arena-prompt {
      position: absolute;
      left: 50%;
      right: auto;
      top: auto;
      bottom: 8%;
      z-index: 12;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: 0.1rem;
      width: max-content;
      max-width: calc(100% - 1.25rem);
      margin: 0;
      padding: 0.38rem 1.05rem 0.4rem;
      overflow: hidden;
      border-radius: 999px;
      border: 2px solid rgba(255, 255, 255, 0.72);
      background: rgba(0, 0, 0, 0.52);
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.18),
        0 0 16px rgba(255, 255, 255, 0.35),
        0 4px 18px rgba(0, 0, 0, 0.45);
      font-family: "RocknRoll One", system-ui, sans-serif;
      font-size: clamp(0.92rem, 3.5vw, 1.12rem);
      font-weight: 800;
      letter-spacing: 0.04em;
      color: var(--gold);
      text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.85),
        0 0 12px rgba(227, 179, 65, 0.45);
      white-space: nowrap;
      pointer-events: none;
      transform: translateX(-50%);
    }
    .play-guide.arena-prompt .arena-prompt__lead {
      flex: 0 0 auto;
      text-wrap: nowrap;
      overflow-wrap: normal;
      white-space: nowrap;
      color: var(--gold);
    }
    .play-guide.arena-prompt .arena-prompt__sep {
      display: none;
    }
    .play-guide.arena-prompt .arena-prompt__extra {
      display: block;
      flex: 0 0 auto;
      min-width: 0;
      font-family: "RocknRoll One", system-ui, sans-serif;
      font-size: clamp(0.95rem, 3.8vw, 1.18rem);
      font-weight: 800;
      letter-spacing: 0.04em;
      color: #fff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.45);
    }
    .play-guide.arena-prompt .arena-prompt__extra[hidden] {
      display: none !important;
    }
    .play-guide.arena-prompt::after {
      content: "";
      position: absolute;
      top: -50%;
      left: 0;
      width: 38%;
      height: 200%;
      background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 35%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(255, 255, 255, 0.15) 65%,
        transparent 100%
      );
      transform: translateX(-160%) skewX(-18deg);
      animation: play-guide-shine 2.6s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes play-guide-shine {
      0%,
      18% {
        transform: translateX(-160%) skewX(-18deg);
      }
      52%,
      100% {
        transform: translateX(360%) skewX(-18deg);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .play-guide.arena-prompt::after {
        animation: none;
        opacity: 0.35;
        transform: translateX(40%) skewX(-18deg);
      }
    }
    .wrap.fight-flow .play-guide.arena-prompt,
    .arena-wrap.fighting .play-guide.arena-prompt,
    .arena-wrap.result-phase .play-guide.arena-prompt {
      opacity: 0;
      visibility: hidden;
    }
    .play-pick-pill {
      display: flex;
      align-items: center;
      justify-content: center;
      width: min(16rem, 86%);
      min-height: 2.2rem;
      margin: 0.28rem auto 0.1rem;
      padding: 0.28rem 1rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      background: rgba(255, 255, 255, 0.06);
      color: #fff;
      font-family: Montserrat, var(--ui-font);
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: 0.03em;
    }
    .play-pick-pill.is-empty {
      min-height: 2.2rem;
      opacity: 0.4;
    }
    .play-pick-pill.is-trompey {
      opacity: 1;
      background: linear-gradient(180deg, #3b6fe0 0%, #1f4bb4 100%);
      border-color: transparent;
    }
    .play-pick-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.55rem 0.85rem;
      width: 100%;
      margin: 0 0 0.45rem;
      padding: 0.1rem 0 0.35rem;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .play-pick-prompt {
      margin: 0;
      flex: 0 0 auto;
      font-family: var(--display-font);
      font-size: clamp(1.05rem, 2.4vw, 1.28rem);
      font-weight: 700;
      letter-spacing: 0.02em;
      color: rgba(255, 248, 230, 0.88);
      white-space: nowrap;
      line-height: 1.2;
    }
    .play-pick-row__names {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: 0.65rem;
    }
    .play-pick-pill-btn {
      appearance: none;
      -webkit-appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 8.75rem;
      min-height: 2.85rem;
      margin: 0;
      padding: 0.55rem 1.55rem;
      border: 2px solid rgba(227, 179, 65, 0.65);
      border-radius: 999px;
      background: transparent;
      color: #fff8e4;
      font-family: Montserrat, var(--ui-font);
      font-size: clamp(1.05rem, 2.3vw, 1.28rem);
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: none;
      line-height: 1;
      cursor: pointer;
      box-shadow: none;
      transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
    }
    .play-pick-pill-btn:hover:not(:disabled) {
      border-color: rgba(243, 215, 138, 0.9);
      background: rgba(227, 179, 65, 0.1);
    }
    .play-pick-pill-btn:focus-visible {
      outline: 2px solid rgba(227, 179, 65, 0.75);
      outline-offset: 2px;
    }
    .play-pick-pill-btn.active {
      border-color: #f3d78a;
      background: rgba(227, 179, 65, 0.2);
      color: #ffe9a8;
    }
    .play-pick-pill-btn.is-ready:not(.active) {
      border-color: rgba(255, 255, 255, 0.55);
    }
    .play-pick-pill-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    /* Names live in the control panel now */
    .fighter-name {
      display: none !important;
    }
    /* Idle pick copy — prompt lives in the control panel */
    .play-guide.arena-prompt {
      display: none !important;
    }
    .play-pick-pill.is-putey {
      opacity: 1;
      background: linear-gradient(180deg, #3b6fe0 0%, #1f4bb4 100%);
      border-color: transparent;
    }
    /* Fight bell (shared); sits in the arena apron */
    .play-bell-dock {
      display: flex;
      justify-content: center;
      width: 100%;
      margin: 0 auto;
    }
    .play-bell-dock--arena {
      position: absolute;
      left: auto;
      right: 3.5%;
      top: 11%;
      bottom: auto;
      z-index: 14;
      width: auto;
      margin: 0;
      transform: none;
      pointer-events: none;
    }
    .play-bell-dock--arena .fight-bell {
      pointer-events: auto;
    }
    .arena-wrap.fighting .play-bell-dock--arena,
    .arena-wrap.result-phase .play-bell-dock--arena,
    .wrap.fight-flow .play-bell-dock--arena {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    /* Hide pick prompt + fighter name pills during fight / winner scenes */
    .wrap.fight-flow .play-pick-prompt,
    .wrap.fight-flow .play-pick-row__names {
      display: none !important;
    }
    .wrap.fight-flow .play-pick-row {
      padding-top: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: none;
      min-height: 0;
    }
    .fight-bell {
      --pull: 0;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.2rem;
      width: auto;
      min-width: 0;
      max-width: none;
      min-height: 0;
      margin: 0;
      padding: 0.15rem 0.35rem 0.25rem;
      border: none;
      border-radius: 0;
      clip-path: none;
      background: transparent;
      color: #f7e7a8;
      box-shadow: none;
      cursor: pointer;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }
    .fight-bell:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .fight-bell:active:not(:disabled),
    .fight-bell.is-pulling {
      cursor: grabbing;
    }
    .fight-bell__visual {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 7.25rem;
      flex-shrink: 0;
      transform-origin: 50% 8%;
      transform: translateY(calc(var(--pull) * 10px));
      transition: transform 0.12s ease-out;
      filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
    }
    .fight-bell.is-pulling .fight-bell__visual {
      transition: none;
    }
    .fight-bell__img {
      display: block;
      width: 100%;
      height: auto;
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
    }
    .fight-bell.is-struck .fight-bell__visual {
      animation: fight-bell-swing 1.15s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    /* Idle invite: gentle hang + glow after a fighter is picked */
    .fight-bell.is-ready-to-ring:not(.is-struck):not(.is-pulling) .fight-bell__visual {
      animation: fight-bell-beckon 1.15s ease-in-out infinite;
    }
    .fight-bell.is-ready-to-ring .fight-bell__visual {
      filter:
        drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 18px rgba(227, 179, 65, 0.45));
    }
    .fight-bell.is-ready-to-ring .fight-bell__copy {
      animation: fight-bell-copy-pulse 1.35s ease-in-out infinite;
    }
    .fight-bell.is-ready-to-ring .fight-bell__title {
      color: #ffe9a8;
      text-shadow: 0 0 10px rgba(227, 179, 65, 0.4);
    }
    @keyframes fight-bell-beckon {
      0%, 100% { transform: rotate(-8deg); }
      50% { transform: rotate(10deg); }
    }
    @keyframes fight-bell-copy-pulse {
      0%, 100% { opacity: 0.88; }
      50% { opacity: 1; }
    }
    @keyframes fight-bell-swing {
      0% { transform: rotate(0deg); }
      10% { transform: rotate(24deg); }
      24% { transform: rotate(-22deg); }
      40% { transform: rotate(16deg); }
      56% { transform: rotate(-12deg); }
      72% { transform: rotate(7deg); }
      86% { transform: rotate(-3deg); }
      100% { transform: rotate(0deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .fight-bell.is-struck .fight-bell__visual {
        animation-duration: 0.35s;
      }
      .fight-bell.is-ready-to-ring:not(.is-struck):not(.is-pulling) .fight-bell__visual {
        animation: none;
      }
      .fight-bell.is-ready-to-ring .fight-bell__copy {
        animation: none;
        opacity: 1;
      }
    }
    .fight-bell__copy {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      min-width: 0;
      max-width: 10rem;
    }
    .fight-bell__cta {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.12rem;
      width: 100%;
      margin: 0;
      padding: 0.42rem 0.8rem 0.48rem;
      box-sizing: border-box;
      border-radius: 0.55rem;
      border: 1px solid rgba(227, 179, 65, 0.42);
      background: rgba(5, 4, 2, 0.86);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    }
    .fight-bell__line,
    .fight-bell__title {
      display: block;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0;
      background: none;
      box-shadow: none;
      width: auto;
      line-height: 1.15;
      text-align: center;
    }
    .fight-bell__line {
      font-family: var(--display-font);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      color: rgba(255, 246, 220, 0.88);
      text-wrap: balance;
    }
    .fight-bell__title {
      font-family: Montserrat, var(--ui-font);
      font-size: 0.98rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #f3d78a;
    }
    .fight-bell.is-ready-to-ring .fight-bell__cta {
      border-color: rgba(243, 215, 138, 0.72);
      background: rgba(8, 6, 2, 0.9);
      box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.5),
        0 0 18px rgba(227, 179, 65, 0.22);
    }
    .fight-bell.is-ready-to-ring .fight-bell__line,
    .fight-bell.is-ready-to-ring .fight-bell__title {
      background: none;
      border: none;
    }
    .fight-bell.is-ready-to-ring .fight-bell__title {
      color: #ffe9a8;
      text-shadow: 0 0 10px rgba(227, 179, 65, 0.4);
    }
    .play-cta-row {
      display: none;
    }
    .auto-bet-btn {
      width: auto;
      min-height: 2.55rem;
      margin: 0;
      padding: 0.45rem 0.9rem;
      border: 1px solid rgba(227, 179, 65, 0.4);
      border-radius: 0;
      clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.55) 100%);
      color: #f2efe8;
      font-family: Montserrat, var(--ui-font);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      box-shadow: none;
      cursor: pointer;
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .auto-bet-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .auto-bet-btn.is-on {
      background: linear-gradient(180deg, #fff8e8 0%, #e3b341 100%);
      color: #1a1208;
      border-color: transparent;
    }
    .auto-bet-rounds {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      width: 100%;
      max-width: 1180px;
      margin: -0.15rem auto 0.35rem;
      padding: 0 0.1rem;
    }
    .auto-bet-rounds[hidden] {
      display: none !important;
    }
    .auto-bet-rounds__lbl {
      margin-right: 0.15rem;
      font-family: Montserrat, var(--ui-font);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
      white-space: nowrap;
    }
    .auto-bet-rounds__opt {
      min-width: 2.1rem;
      height: 1.7rem;
      padding: 0 0.45rem;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 0;
      clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
      background: transparent;
      color: rgba(255, 255, 255, 0.82);
      font-family: Montserrat, var(--ui-font);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      cursor: pointer;
    }
    .auto-bet-rounds__opt.is-selected {
      border-color: transparent;
      background: linear-gradient(180deg, #f3d78a 0%, #e3b341 100%);
      color: #000;
    }
    .auto-bet-rounds__opt:disabled {
      opacity: 0.55;
      cursor: default;
    }
    .auto-bet-rounds.is-running .auto-bet-rounds__lbl {
      color: rgba(255, 255, 255, 0.78);
    }
    .play-win.is-trompey .bet-panel__win-value,
    .play-win.is-trompey .hud-win,
    .play-win.is-putey .bet-panel__win-value,
    .play-win.is-putey .hud-win {
      color: #2f6bff;
      -webkit-text-stroke: 0.7px #fff;
      paint-order: stroke fill;
      text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff;
    }
    .play-win--result-win .hud-lbl,
    .play-win--result-lose .hud-lbl {
      display: none;
    }
    .play-win--result-win,
    .play-win--result-lose {
      white-space: normal;
    }
    .play-win--result-win .bet-panel__win-value-wrap--result-msg,
    .play-win--result-lose .bet-panel__win-value-wrap--result-msg {
      display: block;
      max-width: 100%;
    }
    .play-win--result-win .bet-panel__win-value {
      color: #aff4c6;
      -webkit-text-stroke: 0;
      text-shadow:
        0 0 14px rgba(63, 185, 80, 0.55),
        0 1px 8px rgba(0, 0, 0, 0.85);
      font-size: clamp(1.05rem, 4vw, 1.35rem);
      letter-spacing: 0.06em;
    }
    .play-win--result-lose .bet-panel__win-value {
      color: #ffb4a9;
      -webkit-text-stroke: 0;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
      font-size: clamp(0.92rem, 3.6vw, 1.15rem);
      letter-spacing: 0.03em;
      white-space: normal;
      line-height: 1.25;
    }
    .play-win--fighting-pick .bet-panel__win.hud-win {
      display: inline-flex;
      align-items: baseline;
      justify-content: center;
      gap: 0.85rem;
      flex-wrap: wrap;
    }
    .play-win__pick {
      font-family: "RocknRoll One", system-ui, sans-serif;
      font-size: clamp(0.95rem, 3.4vw, 1.2rem);
      font-weight: 800;
      letter-spacing: 0.04em;
      line-height: 1.15;
    }
    .play-win__pick[hidden] {
      display: none !important;
    }
    .play-win--fighting-pick.is-trompey .play-win__pick,
    .play-win--fighting-pick.is-putey .play-win__pick {
      color: #2f6bff;
      -webkit-text-stroke: 0.7px #fff;
      paint-order: stroke fill;
      text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff;
    }
    .hud-pane .hud-lbl,
    .hud-pane .hud-stake-label,
    .hud-pane .hud-val,
    .play-win .hud-lbl {
      color: #fff;
    }
    .hud-pane .chips button {
      color: #fff;
      border: 1px solid #fff;
      background: #000;
    }
    .hud-pane .chips button.is-selected {
      color: #000;
      background: #fff;
      border-color: #fff;
    }
    .hud-step {
      background: #fff;
      color: #000;
    }
    .hud-pane .stake-input {
      color: #fff;
    }
    .play-bet-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.55rem 0.75rem;
      width: 100%;
      max-width: none;
      margin: 0;
      padding-left: 0;
    }
    .play-bet-row > .bet-panel__fight-mult,
    .play-bet-row > .bet-panel__fight-pick {
      display: none !important;
    }
    .play-bet-row .hud-stake {
      display: flex;
      flex-wrap: nowrap !important;
      align-items: center;
      gap: 0.4rem;
      min-width: 0;
      width: auto;
      margin: 0;
      justify-content: flex-start;
      overflow: hidden;
      flex: 1 1 auto;
    }
    .play-bet-row .chips {
      flex-wrap: nowrap !important;
      overflow-x: auto;
      min-width: 0;
      scrollbar-width: none;
    }
    .play-bet-row .chips::-webkit-scrollbar {
      display: none;
    }
    .play-win {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: center;
      gap: 0.45rem;
      width: 100%;
      margin: 0 auto;
      padding: 0.05rem 0;
      text-align: center;
      white-space: nowrap;
    }
    .play-win .hud-lbl,
    .play-win .hud-win,
    .play-win .bet-panel__win-value,
    .hud-pane .play-win .hud-win.bet-panel__win {
      font-family: "RocknRoll One", system-ui, sans-serif;
      font-size: clamp(0.95rem, 3.4vw, 1.2rem);
      font-weight: 800;
      font-style: normal;
      letter-spacing: 0.04em;
      line-height: 1.15;
      text-transform: none;
      opacity: 1;
      text-align: center;
    }
    .bet-panel.hud-pane {
      position: relative;
      left: auto;
      right: auto;
      bottom: auto;
      z-index: 40;
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 0.4rem 0.7rem calc(0.55rem + env(safe-area-inset-bottom)) 0.28rem;
      border: 0;
      border-top: 0;
      border-radius: 0;
      background: #000;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }
    .hud-pane > .fight-msg-spin-row { order: 0; }
    .hud-pane > .hud-bar { order: 1; }
    .hud-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem 1rem;
      width: 100%;
      min-width: 0;
    }
    .hud-wheel-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      gap: 0.35rem;
      margin: 0 0 0 auto;
      padding: 0.28rem 0.45rem 0.4rem;
      max-width: 9.5rem;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.06);
      color: #fff;
      font-family: Montserrat, var(--ui-font);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .hud-wheel-btn__face {
      width: 3.15rem;
      height: 3.15rem;
      flex-shrink: 0;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(20, 12, 8, 0.35) 0 18%, transparent 19%),
        conic-gradient(
          from -18deg,
          #ff2d55 0deg,
          #ff9f1c 45deg,
          #ffe066 90deg,
          #7af8c8 135deg,
          #38bdf8 180deg,
          #a78bfa 225deg,
          #f472b6 270deg,
          #ff2d95 315deg,
          #ff2d55 360deg
        );
      box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.7),
        0 0 12px rgba(255, 180, 80, 0.5);
    }
    .hud-wheel-btn.is-on .hud-wheel-btn__face {
      animation: hud-wheel-idle 2.8s linear infinite;
    }
    .hud-wheel-btn.is-spinning .hud-wheel-btn__face {
      animation: hud-wheel-idle 0.45s linear infinite;
    }
    @keyframes hud-wheel-idle {
      to { transform: rotate(360deg); }
    }
    .hud-wheel-btn__hint {
      display: block;
      font-size: 0.78rem;
      font-weight: 600;
      line-height: 1.2;
      text-align: center;
      opacity: 0.92;
    }
    .hud-wheel-btn.is-on {
      background: #fff;
      color: #0d1117;
      border-color: #fff;
    }
    .hud-wheel-btn.is-on .hud-wheel-btn__hint {
      opacity: 0.85;
    }
    .hud-wheel-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    @media (prefers-reduced-motion: reduce) {
      .hud-wheel-btn.is-on .hud-wheel-btn__face,
      .hud-wheel-btn.is-spinning .hud-wheel-btn__face {
        animation: none;
      }
    }
    .app-shell {
      padding-bottom: env(safe-area-inset-bottom);
    }
    .hud-cta {
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 0.5rem;
      width: 100%;
      max-width: 960px;
      margin: 0 auto;
    }
    .hud-bonus {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 960px;
      margin: 0 auto;
      min-height: 2.65rem;
      padding: 0.38rem 0.7rem;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      background: transparent;
      color: #fff;
      font-family: Montserrat, var(--ui-font);
      cursor: pointer;
      text-transform: none;
    }
    .hud-bonus__title {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .hud-bonus__cost {
      margin-top: 0.12rem;
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.01em;
      opacity: 0.72;
    }
    .hud-bonus.is-on {
      background: #fff;
      color: #0d1117;
      border-color: #fff;
    }
    .hud-bonus.is-on .hud-bonus__cost {
      opacity: 0.7;
      color: inherit;
    }
    .hud-track {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.45rem;
      width: 100%;
      max-width: 960px;
      margin: 0 auto;
    }
    .hud-track__side {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.4rem;
      padding: 0.32rem 0.55rem;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.04);
    }
    .hud-track__name {
      font-family: Montserrat, var(--ui-font);
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.7);
    }
    .hud-track__mult {
      font-family: Montserrat, var(--ui-font);
      font-size: 1.05rem;
      font-weight: 700;
      color: #fff;
    }
    .hud-track--boost .hud-track__mult {
      color: var(--win);
    }
    .hud-track.is-trompey .hud-track__side--trompey,
    .hud-track.is-putey .hud-track__side--putey {
      border-color: rgba(255, 255, 255, 0.55);
      background: rgba(255, 255, 255, 0.1);
    }
    .hud-binary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
      width: 100%;
      max-width: 960px;
      margin: 0 auto;
    }
    .hud-choose {
      min-height: 2.7rem;
      padding: 0.42rem 0.7rem;
      font-size: 1.15rem;
      font-weight: 700;
      border: 0;
      border-radius: 14px;
      cursor: pointer;
      font-family: Montserrat, var(--ui-font);
      color: #fff;
      -webkit-tap-highlight-color: transparent;
    }
    .hud-choose__kicker {
      display: block;
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      opacity: 0.78;
    }
    .hud-choose__name {
      display: block;
      margin-top: 0.02rem;
      font-size: 0.98rem;
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    .hud-choose--trompey {
      background: linear-gradient(180deg, #3b6fe0 0%, #1f4bb4 100%);
    }
    .hud-choose--putey {
      background: linear-gradient(180deg, #3b6fe0 0%, #1f4bb4 100%);
    }
    .hud-choose:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .hud-binary.is-ready .hud-choose {
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
    }
    .hud-choose.active {
      outline: 2px solid #fff;
      outline-offset: 1px;
    }
    .hud-bonus:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .hud-cta .fight-btn-split--inline-cta,
    .hud-cta .fight-btn.fight-btn--inline-cta {
      width: auto;
      flex: 1 1 auto;
      max-width: 22rem;
    }
    .hud-cta .fight-btn.fight-btn--inline-cta {
      min-height: 2.7rem;
      font-size: 1.15rem;
    }
    .hud-bar {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0.55rem;
      width: 100%;
      max-width: 1180px;
      margin: 0 auto;
    }
    .hud-balances {
      display: flex;
      align-items: stretch;
      gap: 1.1rem;
      color: #fff;
      font-family: Montserrat, var(--ui-font);
      min-width: 0;
    }
    .hud-bal-block {
      min-width: 5.5rem;
    }
    .hud-lbl {
      font-size: 0.88rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      opacity: 0.78;
    }
    .hud-val,
    .hud-win,
    .hud-pane .hud-win.bet-panel__win {
      margin: 0;
      font-size: 1.5rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: #fff;
      text-align: left;
      white-space: nowrap;
    }
    .hud-win .bet-panel__win-value {
      color: var(--win);
      font-weight: 700;
    }
    .hud-sep {
      width: 1px;
      background: rgba(255, 255, 255, 0.22);
      align-self: stretch;
    }
    .hud-stake {
      display: flex;
      align-items: center;
      gap: 0.5rem 0.65rem;
      flex-wrap: nowrap;
      width: 100%;
      margin: 0;
      justify-content: flex-start;
      min-height: 2.55rem;
    }
    .hud-pane .hud-stake.action-bar__stakes {
      flex-wrap: nowrap;
      width: 100%;
    }
    .hud-pane .stakes-outcome-row {
      width: auto;
      flex: 0 0 0;
      min-width: 0;
      max-width: 0;
      overflow: hidden;
      gap: 0;
    }
    .hud-stake-label {
      display: inline;
      flex: 0 0 auto;
      font-family: Montserrat, var(--ui-font);
      font-size: 0.88rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.78);
    }
    .hud-stake-row {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      gap: 0.4rem;
      margin-left: 0;
      padding: 0.2rem 0.45rem 0.2rem 0.15rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: transparent;
    }
    .hud-step {
      width: 2.35rem;
      height: 2.35rem;
      border: 0;
      border-radius: 50%;
      background: #fff;
      color: #0d1117;
      font-size: 1.35rem;
      line-height: 1;
      cursor: pointer;
      font-family: Montserrat, var(--ui-font);
      font-weight: 600;
    }
    .hud-step:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .hud-pane .stake-input {
      width: 4.4rem;
      border: 0;
      background: transparent;
      color: #fff;
      text-align: center;
      font-family: Montserrat, var(--ui-font);
      font-size: 1.35rem;
      font-weight: 700;
      font-style: normal;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
      padding: 0.1rem 0;
    }
    .hud-pane .chips {
      display: flex;
      margin: 0;
      gap: 0.4rem;
      flex-wrap: nowrap;
      flex: 1 1 auto;
      min-width: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .hud-pane .chips button {
      min-width: 2.85rem;
      height: 2.35rem;
      padding: 0 0.7rem;
      border-radius: 999px;
      font-family: Montserrat, var(--ui-font);
      font-weight: 600;
      font-size: 0.95rem;
      flex: 0 0 auto;
    }
    .hud-pane .bet-panel__fight-mult,
    .hud-pane .bet-panel__fight-pick {
      align-self: center;
    }
    @media (min-width: 561px) {
      :root { --hud-h: 168px; }
      .hud-wheel-btn {
        max-width: 10.5rem;
      }
      .hud-wheel-btn__face {
        width: 3.4rem;
        height: 3.4rem;
      }
    }
    @media (max-width: 560px) {
      :root { --hud-h: 156px; }
      .bet-panel.hud-pane {
        padding: 0.4rem 0.45rem calc(0.4rem + env(safe-area-inset-bottom)) 0.35rem;
      }
      .play-bet-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.35rem;
      }
      .play-bet-row .hud-stake {
        width: auto;
        min-width: 0;
        flex-wrap: nowrap;
      }
      .hud-pane .stakes-outcome-row {
        display: none;
      }
      .hud-stake-label {
        display: none;
      }
      .hud-stake {
        width: auto;
        margin: 0;
        justify-content: flex-start;
        flex-wrap: nowrap;
      }
      .play-bet-row .chips,
      .hud-pane .chips,
      .controls-minimal .chips {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        min-width: 0;
        gap: 0.28rem;
      }
      .hud-pane .chips button {
        min-width: 2.05rem;
        height: 1.85rem;
        font-size: 0.75rem;
        padding: 0 0.38rem;
      }
      .hud-step {
        width: 1.85rem;
        height: 1.85rem;
        font-size: 1.15rem;
      }
      .hud-pane .stake-input,
      .controls-minimal .stake-input {
        width: 3.1rem;
        font-size: 1.35rem;
        padding: 0.1rem 0;
        border: 0;
        background: transparent;
      }
      .play-win {
        padding: 0.05rem 0;
      }
      .hud-pane .chips button[data-chip="100"] {
        display: none;
      }
    }

    /* Desktop — compact stake bar; bell + diamond picks live in the arena */
    @media (min-width: 640px) {
      .play-guide.arena-prompt {
        display: none !important;
      }

      .play-bell-dock--arena {
        right: 2.5%;
        top: 4.5%;
      }

      .play-bell-dock--arena .fight-bell {
        min-width: 0;
        padding: 0.1rem 0.25rem 0.2rem;
      }

      .play-bell-dock--arena .fight-bell.is-ready-to-ring {
        min-width: 0;
        padding: 0.1rem 0.25rem 0.2rem;
      }

      .play-bell-dock--arena .fight-bell__visual {
        width: 11.5rem;
      }

      .play-bell-dock--arena .fight-bell__copy {
        max-width: 11.5rem;
      }

      .play-bell-dock--arena .fight-bell__cta {
        padding: 0.5rem 0.95rem 0.55rem;
        gap: 0.14rem;
      }

      .play-bell-dock--arena .fight-bell__line {
        font-size: 0.92rem;
        padding: 0;
      }

      .play-bell-dock--arena .fight-bell__title {
        font-size: 1.18rem;
        letter-spacing: 0.18em;
        padding: 0;
      }

      .play-bell-dock--arena .fight-bell:hover:not(:disabled) .fight-bell__visual {
        filter:
          drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 16px rgba(227, 179, 65, 0.35));
      }

      .wrap.fight-flow .play-pick-row .play-win {
        position: static;
        transform: none;
        width: 100%;
        justify-content: center;
        margin: 0.15rem 0 0;
      }

      .play-pick-row {
        position: relative;
        flex: 1 0 100%;
        order: -1;
        display: block;
        margin: 0 0 0.25rem;
        /* Match arena fighters, nudged a little right */
        padding: 0.05rem 12% 0.35rem 22%;
        box-sizing: border-box;
      }

      .play-pick-prompt {
        position: absolute;
        left: 0.35rem;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        font-size: 1.28rem;
        font-weight: 700;
        z-index: 1;
      }

      .play-pick-row__names {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-items: center;
        width: 100%;
        gap: clamp(0.75rem, 2.5vw, 1.75rem);
      }

      .play-pick-pill-btn {
        min-width: 9.5rem;
        min-height: 3.05rem;
        padding: 0.58rem 1.75rem;
        font-size: 1.32rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        border-width: 2px;
        justify-self: center;
      }

      .play-pick-row .play-win {
        position: absolute;
        right: 0.45rem;
        left: auto;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
        gap: 0.4rem;
        width: auto;
        margin: 0;
        padding: 0;
        border: none;
        flex: none;
        z-index: 1;
      }

      .controls.controls-minimal:has(.hud-pane) {
        background: transparent;
        padding: 0.2rem 0 0.4rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      .bet-panel.hud-pane {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.2rem 0.65rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0.55rem 0.85rem 0.6rem;
        border-radius: 0;
        clip-path: polygon(
          0 12px,
          12px 0,
          calc(100% - 12px) 0,
          100% 12px,
          100% calc(100% - 12px),
          calc(100% - 12px) 100%,
          12px 100%,
          0 calc(100% - 12px)
        );
        border: 1px solid rgba(227, 179, 65, 0.3);
        background:
          linear-gradient(165deg, rgba(42, 32, 18, 0.65) 0%, rgba(8, 8, 8, 0.95) 45%, #030303 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 236, 190, 0.12),
          0 10px 28px rgba(0, 0, 0, 0.45);
      }

      .bet-panel.hud-pane::before {
        content: "";
        position: absolute;
        left: 12%;
        right: 12%;
        top: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(227, 179, 65, 0.5) 50%, transparent);
        pointer-events: none;
      }

      .play-win .hud-lbl {
        font-family: var(--display-font);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(227, 179, 65, 0.9);
      }

      .play-win .bet-panel__win-value,
      .play-win .hud-win {
        font-family: Montserrat, var(--ui-font);
        font-size: 1.35rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: #f6f3eb;
      }

      .play-bet-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.4rem 0.45rem;
        padding: 0;
        border: none;
        flex: 1 1 auto;
        min-width: 0;
        margin-left: auto;
      }

      .play-bet-row .hud-stake {
        flex: 0 1 auto;
        justify-content: flex-end;
        gap: 0.4rem;
        width: auto;
        overflow: visible;
      }

      .auto-bet-btn {
        flex: 0 0 auto;
        min-height: 2.65rem;
        padding: 0.5rem 1.2rem;
        font-size: 0.86rem;
        letter-spacing: 0.12em;
        clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
      }

      .auto-bet-btn:hover:not(:disabled) {
        border-color: rgba(227, 179, 65, 0.75);
        filter: brightness(1.08);
      }

      .auto-bet-rounds {
        flex: 1 0 100%;
        margin: 0.15rem auto 0;
        gap: 0.35rem;
        padding: 0.3rem 0.55rem;
        max-width: fit-content;
        clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(227, 179, 65, 0.2);
      }

      .hud-step {
        width: 2.05rem;
        height: 2.05rem;
        border-radius: 0;
        clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
        border: 1px solid rgba(227, 179, 65, 0.4);
        background: linear-gradient(160deg, #2c2418 0%, #0c0c0c 100%);
        color: #f3d78a;
        font-size: 1.05rem;
        font-weight: 700;
      }

      .controls-minimal .stake-input,
      .hud-pane .stake-input {
        width: 3.9rem;
        min-height: 2.05rem;
        border-radius: 0;
        clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
        border: 1px solid rgba(227, 179, 65, 0.38);
        background: rgba(0, 0, 0, 0.62);
        color: #fff;
        font-family: Montserrat, var(--ui-font);
        font-size: 1.05rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }

      .controls-minimal .stake-input:focus {
        border-color: rgba(227, 179, 65, 0.8);
        box-shadow: 0 0 0 2px rgba(227, 179, 65, 0.16);
      }

      .hud-pane .chips button,
      .controls-minimal .chips button {
        min-width: 2.2rem;
        min-height: 1.95rem;
        padding: 0.25rem 0.4rem;
        border-radius: 0;
        clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
        border: 1px solid rgba(227, 179, 65, 0.35);
        background: rgba(255, 255, 255, 0.03);
        color: rgba(255, 248, 230, 0.92);
        font-family: Montserrat, var(--ui-font);
        font-size: 0.72rem;
        font-weight: 700;
      }

      .hud-pane .chips button.is-selected,
      .controls-minimal .chips button.is-selected {
        border-color: transparent;
        background: linear-gradient(180deg, #f3d78a 0%, #e3b341 100%);
        color: #1a1208;
      }
    }

}