/* UltralinX portal section - hub chrome (modern OK) + CEF49-safe cabinet comps (.uxc-*) */

@font-face {
  font-family: "URW DIN";
  src: url("/ultralinx/assets/fonts/urw_din/URWDIN-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "URW DIN";
  src: url("/ultralinx/assets/fonts/urw_din/URWDIN-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "URW DIN";
  src: url("/ultralinx/assets/fonts/urw_din/URWDIN-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "URW DIN";
  src: url("/ultralinx/assets/fonts/urw_din/URWDIN-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/ultralinx/assets/fonts/barlow_condensed/BarlowCondensed-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/ultralinx/assets/fonts/barlow_condensed/BarlowCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/ultralinx/assets/fonts/barlow_condensed/BarlowCondensed-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── Portal hub chrome ───────────────────────────────────────── */

.ultralinx-page {
  --ux-navy: #0c1428;
  --ux-navy-mid: #1a1f4a;
  --ux-attract: #0f0d26;
  --ux-orange: #ff5a1e;
  --ux-amber: #fa8c14;
  --ux-magenta: #fa0064;
  --ux-coral: #ff5a3c;
  --ux-gold: #ffd700;
  --ux-signage: #fdab53;
  --ux-ok: #4ade80;
  --ux-warn: #fbbf24;
  --ux-text: #e8eef8;
  --ux-muted: #9aa8c0;
}

.ultralinx-page .game-hero-bg {
  background:
    radial-gradient(ellipse 90% 70% at 78% 18%, rgba(255, 90, 30, 0.28), transparent 52%),
    radial-gradient(ellipse 55% 45% at 12% 88%, rgba(201, 162, 39, 0.12), transparent 55%),
    linear-gradient(155deg, #070b16 0%, #0c1428 42%, #151b3a 100%);
}

.ultralinx-page .game-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 11, 22, 0.15) 0%, rgba(7, 11, 22, 0.55) 100%),
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      rgba(255, 255, 255, 0.015) 3px 4px
    );
  pointer-events: none;
}

.ultralinx-page .game-hero-bg,
.ultralinx-page .ux-hero-bg {
  pointer-events: none;
}

.ultralinx-page .ux-hero-content {
  position: relative;
  z-index: 4;
}

.ultralinx-page .game-hero-bg img {
  display: none;
}

.ultralinx-hero-mark {
  display: block;
  width: min(280px, 70vw);
  height: auto;
  margin: 0 0 1.25rem;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
  mix-blend-mode: screen;
}

.ultralinx-page .poc-card-tag {
  background: rgba(255, 90, 30, 0.18);
  border: 1px solid rgba(255, 90, 30, 0.45);
  color: #fdab53;
}

.ux-note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: flex-start;
  margin: 0 0 2rem;
  padding: 1rem 1.15rem;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
  color: var(--ux-text);
}

.ux-note strong {
  color: var(--ux-warn);
}

.ux-note p {
  margin: 0;
  flex: 1 1 220px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ux-muted);
}

.ux-constraints {
  margin: 0 0 2.5rem;
  padding: 1.25rem 1.35rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 90, 60, 0.35);
  background: linear-gradient(160deg, rgba(12, 20, 40, 0.95), rgba(26, 31, 74, 0.85));
}

.ux-constraints h2 {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  color: #fdab53;
}

.ux-constraints ul {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--ux-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.ux-constraints li + li {
  margin-top: 0.35rem;
}

.ux-constraints a {
  color: #ff8f6b;
}

.ux-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1.75rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(12, 20, 40, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 4.25rem;
  z-index: 20;
  backdrop-filter: blur(10px);
}

.ux-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.ux-toolbar-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ux-muted);
  margin-right: 0.25rem;
}

.ux-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ux-text);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.ux-chip:hover,
.ux-chip:focus-visible {
  border-color: rgba(255, 90, 30, 0.55);
  color: #fff;
}

.ux-chip.is-active {
  border-color: #ff5a1e;
  background: rgba(255, 90, 30, 0.2);
  color: #fff;
}

.ux-chip:focus-visible {
  outline: 2px solid #fdab53;
  outline-offset: 2px;
}

.ux-flavor-blurb {
  margin: 0 0 2rem;
  max-width: 52rem;
  color: var(--ux-muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

.ux-flavor-blurb strong {
  color: var(--ux-text);
}

.ux-surface-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 960px) {
  .ux-surface-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ux-surface-card--wide {
    grid-column: 1 / -1;
  }
}

.ux-surface-card {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 13, 38, 0.85);
  overflow: hidden;
}

.ux-surface-head {
  padding: 1rem 1.15rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ux-surface-head h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  color: #fff;
}

.ux-surface-meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ux-muted);
  line-height: 1.4;
}

.ux-surface-priority {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 90, 30, 0.2);
  color: #fdab53;
  vertical-align: middle;
}

.ux-stage {
  position: relative;
  min-height: 300px;
  padding: 1.5rem 1.35rem 1.35rem;
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, rgba(255, 90, 30, 0.08), transparent 60%),
    linear-gradient(165deg, #12182c 0%, #0a1020 55%, #151018 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ux-stage::before {
  content: "Vendor art placeholder · not shippable IP";
  position: absolute;
  top: 0.7rem;
  left: 0.85rem;
  z-index: 1;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(253, 171, 83, 0.75);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(253, 171, 83, 0.25);
  padding: 0.22rem 0.5rem;
  border-radius: 4px;
}

/*
 * Hub Marquee + Jackpot — equal-height preview wells.
 * Outer plate is 16:9; signage fills the plate (A/B/C). No in-canvas stage badges.
 */
.ux-stage--marquee,
.ux-stage--jackpot {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255, 210, 74, 0.12), transparent 55%),
    linear-gradient(180deg, #060810 0%, #12101c 100%);
}

/* Drop hub stage chrome badges — card titles live in .ux-surface-head only */
.ux-stage--marquee::before,
.ux-stage--jackpot::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
}

.ux-stage--marquee > .uxc-root,
.ux-stage--jackpot > .uxc-root {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 160px;
  overflow: hidden;
  background: #08090c;
}

.ux-stage--marquee .uxc-marquee--signage,
.ux-stage--marquee .uxc-marquee--pending {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: auto;
  min-height: 0;
}

.ux-stage--overlay {
  min-height: 440px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 45% at 72% 48%, rgba(80, 30, 60, 0.35), transparent 60%),
    linear-gradient(165deg, #14182a 0%, #0a0e18 55%, #12101c 100%);
}

.ux-stage--overlay::before {
  content: "Magenta hatch = vendor see-through · UltralinX panels stay opaque";
  color: rgba(255, 210, 230, 0.95);
  border-color: rgba(250, 0, 100, 0.45);
  background: rgba(20, 8, 18, 0.72);
}

/* Chroma-key teaching plate — hatch, not a solid pink wall */
.ux-stage--overlay::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 2.6rem;
  right: 1.1rem;
  bottom: 1.1rem;
  left: 34%;
  border-radius: 10px;
  border: 1px dashed rgba(250, 0, 100, 0.7);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  background:
    repeating-linear-gradient(
      -32deg,
      rgba(250, 0, 100, 0.38) 0 7px,
      rgba(250, 0, 100, 0.12) 7px 14px
    ),
    linear-gradient(160deg, rgba(40, 12, 28, 0.55), rgba(12, 10, 22, 0.35));
  pointer-events: none;
}

.ux-matrix {
  overflow-x: auto;
  margin-bottom: 2rem;
}

.ux-matrix table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 640px;
}

.ux-matrix th,
.ux-matrix td {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.65rem 0.75rem;
  text-align: left;
  vertical-align: top;
  color: var(--ux-muted);
}

.ux-matrix th {
  background: rgba(26, 31, 74, 0.7);
  color: #fdab53;
  font-weight: 700;
}

.ux-matrix td strong {
  color: var(--ux-text);
  display: block;
  margin-bottom: 0.25rem;
}

.ux-hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   CEF49-SAFE CABINET COMPS (.uxc-*)
   No CSS variables, grid, gap, clamp, aspect-ratio, inset, :has,
   backdrop-filter. Literal values only. Flex OK without gap.
   ═══════════════════════════════════════════════════════════════ */

.uxc-root {
  font-family: "URW DIN", Arial, Helvetica, sans-serif;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
}

.uxc-root * {
  box-sizing: border-box;
}

/* Widget min - bottom-left bug */

.uxc-bug {
  position: absolute;
  left: 12px;
  bottom: 14px;
  z-index: 2;
  width: 220px;
  background: #0c1428;
  border: 2px solid #ff5a3c;
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
}

.uxc-bug-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.uxc-bug-row + .uxc-bug-row {
  margin-top: 6px;
}

.uxc-bug-logo {
  height: 18px;
  width: auto;
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  mix-blend-mode: screen;
}

.uxc-bug-title {
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fdab53;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uxc-bug-meter-track {
  height: 8px;
  background: #1a1f4a;
  border-radius: 4px;
  overflow: hidden;
}

.uxc-bug-meter-fill {
  height: 100%;
  background: #fbbf24;
  border-radius: 4px;
}

.uxc-bug-meter-fill.is-full {
  background: #4ade80;
}

.uxc-bug-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-size: 10px;
  color: #cdcdcd;
}

.uxc-bug-cta {
  font-size: 10px;
  font-weight: 700;
  color: #fbbf24;
}

.uxc-bug-cta.is-ok {
  color: #4ade80;
}

.uxc-bug-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: #4ade80;
  color: #0c1428;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.uxc-bug-jackpot {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: #ff5a3c;
  letter-spacing: 0.02em;
}

.uxc-bug--ladder .uxc-ladder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.uxc-ladder-step {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #2f4445;
  background: #1a1f4a;
}

.uxc-ladder-step + .uxc-ladder-step {
  margin-left: 6px;
}

.uxc-ladder-step.is-lit {
  border-color: #ff5a1e;
  background: #ff5a1e;
}

.uxc-bug--nudge {
  width: 240px;
  padding: 10px 12px;
  text-align: center;
}

.uxc-nudge-line {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fdab53;
}

.uxc-nudge-line.is-ok {
  color: #4ade80;
}

.uxc-bug--idle {
  width: 206px;
  padding: 6px 10px;
}

.uxc-bug--idle .uxc-bug-jackpot {
  font-size: 16px;
}

/* Widget expanded panel */

.uxc-panel {
  position: absolute;
  left: 12px;
  bottom: 14px;
  z-index: 2;
  width: 260px;
  background: #0c1428;
  border: 2px solid #ff5a3c;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
}

.uxc-panel-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.uxc-panel-logo {
  height: 22px;
  width: auto;
  mix-blend-mode: screen;
}

.uxc-panel-tour {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fdab53;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.uxc-panel-jackpot {
  margin-top: 10px;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  color: #ff5a3c;
  text-align: center;
}

.uxc-panel-label {
  margin-top: 4px;
  text-align: center;
  font-size: 10px;
  color: #9aa8c0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.uxc-panel-meter {
  margin-top: 12px;
}

.uxc-panel-meter-track {
  height: 12px;
  background: #1a1f4a;
  border-radius: 6px;
  overflow: hidden;
}

.uxc-panel-meter-fill {
  height: 100%;
  background: #fbbf24;
}

.uxc-panel-meter-fill.is-full {
  background: #4ade80;
}

.uxc-panel-bet {
  margin-top: 8px;
  font-size: 12px;
  color: #cdcdcd;
  text-align: center;
}

.uxc-panel-cta {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 8px;
  border: 0;
  border-radius: 6px;
  background: #ff5a1e;
  color: #ffffff;
  font-family: "URW DIN", Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  cursor: default;
}

.uxc-panel-cta.is-ok {
  background: #4ade80;
  color: #0c1428;
}

.uxc-panel-cta.is-disabled {
  background: #2f4445;
  color: #9aa8c0;
}

.uxc-rules li {
  margin-top: 8px;
  padding: 8px;
  background: #1a1f4a;
  border-radius: 6px;
  font-size: 11px;
  color: #e8eef8;
  list-style: none;
}

.uxc-rules {
  margin: 12px 0 0;
  padding: 0;
}

.uxc-season {
  margin-top: 12px;
  text-align: center;
}

.uxc-season-ring {
  display: inline-block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid #ff5a1e;
  line-height: 64px;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: #fdab53;
}

.uxc-season-caption {
  margin-top: 8px;
  font-size: 11px;
  color: #cdcdcd;
}

/* Overlay expanded */

.uxc-overlay-wrap {
  position: absolute;
  z-index: 2;
}

.uxc-overlay-wrap--left {
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 28%;
  min-width: 160px;
  max-width: 220px;
}

.uxc-overlay-wrap--center {
  left: 50%;
  top: 50%;
  width: 72%;
  max-width: 420px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.uxc-overlay {
  height: 100%;
  background: #0c1428;
  border: 3px solid #c9a227;
  border-radius: 14px;
  padding: 14px 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
}

.uxc-overlay--a {
  border-color: #c9a227;
  background: #1a2e1a;
}

.uxc-overlay-banner {
  padding: 6px 8px;
  border-radius: 6px;
  background: #fbbf24;
  color: #0c1428;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.02em;
}

.uxc-overlay-banner.is-ok {
  background: #4ade80;
}

.uxc-overlay-logo {
  display: block;
  height: 28px;
  width: auto;
  margin: 12px auto 0;
  mix-blend-mode: screen;
}

.uxc-overlay-tour {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #f5e6a3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.uxc-overlay-amount {
  margin-top: 10px;
  text-align: center;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
  font-size: 42px;
  line-height: 1;
  color: #ffd700;
}

.uxc-overlay-powered {
  margin-top: 10px;
  text-align: center;
  font-size: 9px;
  color: #9aa8c0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.uxc-overlay--split .uxc-overlay-split-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
}

.uxc-overlay-split-left,
.uxc-overlay-split-right {
  width: 50%;
  padding: 4px;
}

.uxc-overlay-split-right {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.uxc-overlay--minimal {
  border-color: #ff5a3c;
  background: #0f0d26;
  padding-bottom: 0;
  overflow: hidden;
}

.uxc-overlay--minimal .uxc-overlay-amount {
  font-size: 56px;
  color: #ff5a3c;
  margin-top: 28px;
}

.uxc-overlay-strip {
  margin-top: 18px;
  padding: 10px;
  background: #1a1f4a;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: #fdab53;
}

.uxc-overlay-strip.is-ok {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

/* Marquee */

/* Beacon: locked signage render (Skin A). CEF49-safe — no inset/gap/aspect-ratio/var(). */
.uxc-marquee--beacon {
  max-width: 960px;
  padding: 0;
  background: #000000;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  overflow: hidden;
  line-height: 0;
}

.uxc-marquee-beacon {
  display: block;
  width: 100%;
  height: auto;
}

.uxc-marquee--pending {
  background: #0b0b10;
  border: 1px dashed #3a3a46;
  box-shadow: none;
  color: #8b8b99;
}

.uxc-marquee-pending-k {
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
}

.uxc-marquee-pending-b {
  margin-top: 6px;
  font-size: 15px;
}


.uxc-marquee {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  margin: 24px auto 0;
  padding: 28px 24px 22px;
  background: #0f0d26;
  border: 2px solid #ff5a3c;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 0 40px rgba(255, 90, 30, 0.2);
}

.uxc-marquee-amount {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
  font-size: 64px;
  line-height: 0.95;
  color: #fdab53;
  text-shadow: 0 2px 0 #0c1428;
}

.uxc-marquee-tour {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
}

.uxc-marquee-logo {
  display: block;
  height: 28px;
  width: auto;
  margin: 14px auto 0;
  mix-blend-mode: screen;
}

.uxc-marquee-tagline {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #ff5a1e;
}

.uxc-marquee--brand .uxc-marquee-logo {
  height: 40px;
  margin-top: 0;
}

.uxc-marquee--either .uxc-marquee-amount {
  display: none;
}

.uxc-marquee--either.is-amount .uxc-marquee-logo,
.uxc-marquee--either.is-amount .uxc-marquee-tour {
  display: none;
}

.uxc-marquee--either.is-amount .uxc-marquee-amount {
  display: block;
}

@media (max-width: 640px) {
  .uxc-marquee-amount {
    font-size: 42px;
  }

  .uxc-overlay-wrap--left {
    width: 42%;
  }

  .ux-toolbar {
    top: 3.5rem;
  }
}

/* ── Stats bar CTA ───────────────────────────────────────────── */

.ux-stats-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.ux-stats-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  flex: 1 1 auto;
}

.ux-proto-launch {
  appearance: none;
  border: 1px solid rgba(255, 90, 30, 0.65);
  border-radius: 8px;
  padding: 0.7rem 1.25rem;
  background: linear-gradient(135deg, #ff5a1e 0%, #e04812 100%);
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
  box-shadow: 0 8px 24px rgba(255, 90, 30, 0.28);
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.ux-proto-launch:hover,
.ux-proto-launch:focus-visible {
  border-color: #fdab53;
  background: linear-gradient(135deg, #ff6a32 0%, #ff5a1e 100%);
  box-shadow: 0 10px 28px rgba(255, 90, 30, 0.38);
  transform: translateY(-1px);
  outline: none;
}

.ux-proto-launch:focus-visible {
  outline: 2px solid #fdab53;
  outline-offset: 3px;
}

/* ── Machine prototype modal ─────────────────────────────────── */

body.ux-proto-open {
  overflow: hidden;
}

.ux-proto-modal[hidden] {
  display: none !important;
}

.ux-proto-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
}

.ux-proto-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 14, 0.82);
}

.ux-proto-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #070a12;
  color: #e8eef8;
}

.ux-proto-chrome {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 20, 40, 0.95);
  flex: 0 0 auto;
}

.ux-proto-chrome h2 { margin: 0; font-size: 1.05rem; color: #fff; }
.ux-proto-kicker { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: #9aa8c0; letter-spacing: 0.04em; }

.ux-proto-close {
  appearance: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.ux-proto-close:hover,
.ux-proto-close:focus-visible { border-color: #fdab53; color: #fdab53; }

.ux-proto-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: row;
  gap: 0;
  padding: 0.65rem 0.65rem 0.65rem 0.55rem;
  background: #06080f;
}

.ux-proto-sidebar.ux-proto-toolbar {
  flex: 0 0 280px;
  width: 280px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  align-items: stretch;
  padding: 0;
  border-bottom: 0;
  border-right: 0;
  background: transparent;
  overflow: hidden;
}

.ux-proto-side-stack {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 0.1rem 0.35rem 0.1rem 0.15rem;
  scrollbar-width: thin;
}

.ux-proto-card {
  flex: 0 0 auto;
  padding: 0.9rem 0.85rem 0.95rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(18, 20, 28, 0.94);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
}

.ux-proto-card + .ux-proto-card {
  flex: 1 1 auto;
}

.ux-proto-card-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ux-proto-card-kicker {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fdab53;
}

.ux-proto-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

.ux-proto-hint {
  margin: 0.15rem 0 0;
  font-size: 0.65rem;
  line-height: 1.35;
  color: #8b97ad;
}

.ux-proto-modal {
  --ux-text: #e8eef8;
  --ux-muted: #9aa8c0;
  --ux-orange: #ff5a1e;
  --ux-amber: #fa8c14;
  --ux-signage: #fdab53;
}

.ux-proto-sidebar .ux-toolbar-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.ux-proto-sidebar .ux-toolbar-group:first-of-type {
  margin-top: 0;
}

.ux-proto-sidebar .ux-toolbar-label {
  color: #8b97ad;
  font-size: 0.62rem;
}

.ux-proto-chip-col { display: flex; flex-direction: column; gap: 0.3rem; }
.ux-proto-chip-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.ux-proto-sidebar .ux-chip {
  width: 100%;
  text-align: left;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #d7deea;
  padding: 0.48rem 0.7rem 0.48rem 0.85rem;
  position: relative;
}

.ux-proto-sidebar .ux-chip.is-active {
  border-color: rgba(255, 90, 30, 0.55);
  background: linear-gradient(90deg, rgba(255, 90, 30, 0.22), rgba(255, 90, 30, 0.08));
  color: #fff;
  box-shadow: inset 3px 0 0 #ff5a1e, 0 0 0 1px rgba(255, 90, 30, 0.2);
}

.ux-proto-chip-row .ux-chip {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  text-align: center;
  border-radius: 999px;
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}

.ux-proto-chip-row .ux-chip.is-active {
  box-shadow: 0 0 0 1px rgba(255, 90, 30, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ux-proto-stepper-row { display: flex; align-items: center; gap: 0.35rem; }
.ux-proto-stepper { align-items: stretch; margin-top: 0 !important; }

.ux-proto-arrow {
  appearance: none;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #fdab53;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.ux-proto-stepper-copy { min-width: 0; flex: 1 1 auto; text-align: center; }
.ux-proto-stepper-copy strong { display: block; font-size: 0.78rem; color: #fff; }
.ux-proto-stepper-copy small { display: block; font-size: 0.62rem; color: #9aa8c0; line-height: 1.3; }

.ux-proto-stage {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(255, 90, 30, 0.08), transparent 60%),
    #05070f;
}

.ux-proto-cabinet { position: relative; transform-style: preserve-3d; }
.ux-proto-screen { position: relative; }

.ux-proto-bezel {
  border: 2px solid #ff8a1a;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 18px rgba(255, 138, 26, 0.35),
    inset 0 0 0 2px #111;
  background: #0a0a0a;
  overflow: hidden;
  height: 100%;
}

.ux-proto-glass {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #12081a;
}

.ux-proto-screen-label {
  display: block;
  margin-top: 0.35rem;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9aa8c0;
}

.ux-face-marquee {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1a7a28 0%, #0d4a18 55%, #083010 100%);
}

.ux-face-marquee-title {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f5d76e;
  text-shadow: 0 2px 0 #5a3a00, 0 0 18px rgba(255, 200, 60, 0.45);
}

.ux-face-marquee-triple { display: block; font-size: clamp(14px, 3.2vh, 28px); color: #ffe9a0; }
.ux-face-marquee-rising { display: block; font-size: clamp(18px, 4.2vh, 36px); color: #ffd24a; }
.ux-face-marquee-clover { display: block; font-size: clamp(16px, 3.6vh, 30px); color: #b6eb47; }

.ux-face-marquee-glow {
  position: absolute;
  inset: 10% 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 80, 0.25), transparent 70%);
  pointer-events: none;
}

.ux-face-main {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 80% 40% at 50% 20%, rgba(80, 160, 40, 0.35), transparent 55%),
    linear-gradient(180deg, #143018 0%, #0a1a10 40%, #071208 100%);
  color: #fff;
  font-family: "URW DIN", Arial, Helvetica, sans-serif;
}

.ux-face-jackpots { flex: 0 0 auto; padding: 4% 3% 2%; }
.ux-face-jp--grand { text-align: center; margin-bottom: 3%; }
.ux-face-jp--grand span { display: block; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.14em; color: #f5d76e; }
.ux-face-jp--grand strong {
  display: block;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(16px, 3.5vh, 28px);
  font-weight: 900;
  color: #ffe566;
  line-height: 1;
}

.ux-face-jp-row { display: flex; align-items: center; justify-content: space-between; gap: 2%; }
.ux-face-jp {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 3% 1%;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.ux-face-jp span { display: block; font-size: 0.42rem; font-weight: 800; letter-spacing: 0.08em; opacity: 0.85; }
.ux-face-jp strong {
  display: block;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(8px, 1.5vh, 13px);
  font-weight: 800;
  line-height: 1.1;
}
.ux-face-jp--mega { border-color: #3aa0ff; color: #8fd0ff; }
.ux-face-jp--major { border-color: #4ade80; color: #86efac; }
.ux-face-jp--minor { border-color: #c084fc; color: #e9d5ff; }
.ux-face-jp--mini { border-color: #f87171; color: #fecaca; }

.ux-face-jp-badge {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #ffe566, #c9a227);
  color: #1a3a10;
  font-size: 0.85rem;
  box-shadow: 0 0 10px rgba(255, 210, 70, 0.55);
}

.ux-face-features {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3%;
  padding: 0 4% 2%;
}

.ux-face-feature {
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #ffe566, #8a6a10);
  border: 2px solid #ffd24a;
  box-shadow: 0 0 12px rgba(255, 200, 60, 0.35);
}

.ux-face-feature-label { font-size: 0.55rem; font-weight: 900; letter-spacing: 0.06em; color: #143018; }
.ux-face-feature-hint { flex: 1 1 auto; font-size: 0.48rem; line-height: 1.25; text-align: center; color: #d7f0c0; opacity: 0.85; }

.ux-face-reels {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5%;
  padding: 0 3% 2%;
}

.ux-face-reel {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
}

.ux-face-cell {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: linear-gradient(180deg, #2a1848, #140a28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(9px, 1.6vh, 14px);
  color: #f0e6ff;
}

.ux-face-cell--clover {
  background: linear-gradient(180deg, #3a2a08, #1a1204);
  border-color: #c9a227;
  color: #ffe566;
  font-size: clamp(10px, 1.8vh, 16px);
}

.ux-face-clover-val { font-size: 0.55em; line-height: 1; color: #fdab53; }

.ux-face-hud {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2%;
  padding: 2% 3% 2.5%;
  background: rgba(0, 0, 0, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ux-face-hud-item { flex: 1 1 0; text-align: center; }
.ux-face-hud-item span { display: block; font-size: 0.42rem; font-weight: 800; letter-spacing: 0.1em; color: #9aa8c0; }
.ux-face-hud-item strong {
  display: block;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(11px, 2vh, 16px);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
}
.ux-face-hud-item--win strong { color: #4ade80; }

.ux-face-hud-denom {
  flex: 0 0 auto;
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
  background: #1a1f4a;
  border: 1px solid #ff5a1e;
  font-size: 0.55rem;
  font-weight: 900;
  color: #fdab53;
}

.ux-face-main--land .ux-face-reels { padding-top: 4%; }
.ux-face-reels--land .ux-face-reel { height: 100% !important; }

.ux-face-deck {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4%;
  padding: 4% 5%;
  background: linear-gradient(180deg, #1a1228, #0c0818);
}

.ux-face-deck-strip { display: flex; flex: 1 1 auto; gap: 3%; }

.ux-face-deck-chip {
  flex: 1 1 0;
  appearance: none;
  border: 1px solid #c9a227;
  border-radius: 6px;
  padding: 0.45rem 0.2rem;
  background: #1a1f4a;
  color: #fdab53;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(10px, 1.8vh, 14px);
  cursor: default;
}

.ux-face-deck-chip.is-active { background: #ff5a1e; border-color: #ffd24a; color: #fff; }

.ux-face-deck-play {
  flex: 0 0 22%;
  appearance: none;
  border: 2px solid #ffd24a;
  border-radius: 50%;
  aspect-ratio: 1;
  max-height: 78%;
  background: radial-gradient(circle at 35% 30%, #ff8a4a, #ff5a1e 55%, #b8320a);
  color: #fff;
  font-family: "URW DIN", Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 1.8vh, 14px);
  letter-spacing: 0.06em;
  box-shadow: 0 0 18px rgba(255, 90, 30, 0.5);
  cursor: default;
}

.ux-face-deck--rich {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 4%;
  padding: 3%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(180, 120, 40, 0.25), transparent 55%),
    #1a1208;
}

.ux-face-deck-banner { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 0.55rem; color: #f5d76e; }
.ux-face-deck-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }

.ux-face-deck-bet {
  appearance: none;
  border: 1px solid #c9a227;
  border-radius: 4px;
  padding: 0.35rem 0.15rem;
  background: #152040;
  color: #fdab53;
  font-size: 0.48rem;
  font-weight: 800;
  cursor: default;
}

.ux-face-deck-bet.is-active { background: #b91c1c; border-color: #ffd24a; color: #fff; }
.ux-face-deck-actions { grid-column: 1; display: flex; gap: 4px; }

.ux-face-deck-action {
  flex: 1 1 0;
  appearance: none;
  border: 1px solid #3a4560;
  border-radius: 4px;
  padding: 0.35rem 0.2rem;
  background: #1a2a50;
  color: #e8eef8;
  font-size: 0.48rem;
  font-weight: 800;
  cursor: default;
}

.ux-face-deck-action--repeat { background: #166534; border-color: #4ade80; }
.ux-face-deck-side { grid-row: 2 / 4; display: flex; flex-direction: column; gap: 4px; }

.ux-face-deck-util {
  appearance: none;
  border: 1px solid #3a4560;
  border-radius: 4px;
  padding: 0.4rem 0.35rem;
  background: #243044;
  color: #e8eef8;
  font-size: 0.48rem;
  font-weight: 800;
  cursor: default;
}

.ux-face-deck-util--service { background: #7f1d1d; border-color: #f87171; }

.ux-proto-cabinet--hydro {
  width: min(380px, 58vw);
  height: min(820px, 94vh);
  position: relative;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.ux-proto-stage[data-cabinet="hydro"][data-view="all"] .ux-proto-cabinet--hydro {
  transform: rotateX(5deg) rotateY(-8deg);
}

.ux-proto-stage[data-cabinet="hydro"][data-view="all"] .ux-proto-cabinet--hydro .ux-proto-screen {
  position: absolute;
  left: 0;
  right: 0;
}

.ux-proto-stage[data-cabinet="hydro"][data-view="all"] .ux-proto-screen--marquee {
  top: 0;
  left: 10%;
  right: 10%;
  height: 11%;
  transform: translateZ(36px);
}

.ux-proto-stage[data-cabinet="hydro"][data-view="all"] .ux-proto-screen--main {
  top: 12%;
  height: 66%;
  transform: translateZ(12px);
}

.ux-proto-stage[data-cabinet="hydro"][data-view="all"] .ux-proto-screen--deck {
  top: 79%;
  height: 18%;
  transform-origin: top center;
  transform: rotateX(52deg) translateZ(0);
}

.ux-proto-stage[data-cabinet="hydro"][data-view="all"] .ux-proto-screen-label { display: none; }

.ux-proto-stage[data-cabinet="hydro"][data-view="marquee"] .ux-proto-screen--main,
.ux-proto-stage[data-cabinet="hydro"][data-view="marquee"] .ux-proto-screen--deck,
.ux-proto-stage[data-cabinet="hydro"][data-view="main"] .ux-proto-screen--marquee,
.ux-proto-stage[data-cabinet="hydro"][data-view="main"] .ux-proto-screen--deck,
.ux-proto-stage[data-cabinet="hydro"][data-view="deck"] .ux-proto-screen--marquee,
.ux-proto-stage[data-cabinet="hydro"][data-view="deck"] .ux-proto-screen--main { display: none; }

.ux-proto-stage[data-cabinet="hydro"][data-view="marquee"] .ux-proto-cabinet--hydro,
.ux-proto-stage[data-cabinet="hydro"][data-view="main"] .ux-proto-cabinet--hydro,
.ux-proto-stage[data-cabinet="hydro"][data-view="deck"] .ux-proto-cabinet--hydro {
  width: min(520px, 70vw);
  height: auto;
  transform: none;
}

.ux-proto-stage[data-cabinet="hydro"][data-view="marquee"] .ux-proto-screen--marquee,
.ux-proto-stage[data-cabinet="hydro"][data-view="deck"] .ux-proto-screen--deck {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  transform: none;
}

.ux-proto-stage[data-cabinet="hydro"][data-view="main"] .ux-proto-screen--main {
  position: relative;
  width: min(380px, 55vw);
  margin: 0 auto;
  height: auto;
  transform: none;
}

.ux-proto-stage[data-cabinet="hydro"][data-view="main"] .ux-proto-glass {
  aspect-ratio: 9 / 16;
  max-height: min(88vh, 780px);
  height: auto;
}

.ux-proto-cabinet--portrait { width: min(380px, 55vw); }
.ux-proto-cabinet--portrait .ux-proto-glass {
  aspect-ratio: 9 / 16;
  max-height: min(88vh, 780px);
  height: auto;
}

.ux-proto-cabinet--landscape {
  width: min(640px, 72vw);
  display: flex;
  flex-direction: column;
  gap: 1%;
}

.ux-proto-cabinet--landscape .ux-proto-screen--land-top,
.ux-proto-cabinet--landscape .ux-proto-screen--land-bottom { width: 100%; }
.ux-proto-cabinet--landscape .ux-proto-bezel { aspect-ratio: 16 / 9; height: auto; }

.ux-proto-stage[data-cabinet="landscape"][data-view="marquee"] .ux-proto-screen--land-bottom,
.ux-proto-stage[data-cabinet="landscape"][data-view="main"] .ux-proto-screen--land-top { display: none; }

.ux-proto-overlay-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.ux-proto-overlay-host > * { pointer-events: auto; }

/* True-scale Exacta tab / bug / panel (CEF49-safe literals) */

.uxc-proto-tab {
  position: absolute;
  left: 2%;
  top: 42%;
  width: 22px;
  height: 72px;
  padding: 4px 2px;
  border: 1px solid #3a4560;
  border-radius: 4px 6px 6px 4px;
  background: #0c1428;
  color: #ffffff;
  font-family: "URW DIN", Arial, Helvetica, sans-serif;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.uxc-proto-tab img {
  width: 10px;
  height: auto;
  margin-bottom: 4px;
  mix-blend-mode: screen;
}

.uxc-proto-tab span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 8px;
  line-height: 1;
}

.uxc-proto-bug {
  position: absolute;
  left: 2%;
  top: 38%;
  width: 28px;
  height: 92px;
  padding: 4px 3px;
  border: 1px solid #ff5a3c;
  border-radius: 5px;
  background: #0c1428;
  color: #fdab53;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
}

.uxc-proto-bug-mark {
  width: 12px;
  height: auto;
  mix-blend-mode: screen;
}

.uxc-proto-bug-amount {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
  font-size: 11px;
  color: #ff5a3c;
  letter-spacing: 0.02em;
}

.uxc-proto-panel,
.uxc-proto-attract {
  position: absolute;
  left: 2%;
  top: 8%;
  bottom: 10%;
  width: 32%;
  max-width: 150px;
  min-width: 110px;
  padding: 8px;
  background: #0c1428;
  border: 2px solid #ff5a3c;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  overflow: auto;
}

.uxc-proto-attract {
  border-color: #c9a227;
  background: #1a2e1a;
}

.uxc-proto-collapse {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px 4px;
  border: 1px solid #2f4445;
  border-radius: 4px;
  background: #1a1f4a;
  color: #cdcdcd;
  font-family: "URW DIN", Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.ux-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .ux-proto-body {
    flex-direction: column;
  }

  .ux-proto-sidebar.ux-proto-toolbar {
    flex: 0 0 auto;
    width: 100%;
    max-height: 38vh;
    border-right: 0;
    padding: 0.55rem 0.55rem 0;
  }

  .ux-proto-side-stack {
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.55rem;
    height: auto;
  }

  .ux-proto-card,
  .ux-proto-card + .ux-proto-card {
    flex: 0 0 min(280px, 78vw);
    max-height: 34vh;
    overflow-y: auto;
  }

  .ux-proto-cabinet--hydro {
    width: min(300px, 88vw);
    height: min(680px, 78vh);
  }

  .ux-stats-bar-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .ux-proto-launch {
    margin-left: 0;
    width: 100%;
  }
}

/* ── AAA presentation polish (PDF / Exacta review) ───────────────────────── */

.ultralinx-page {
  --ux-navy: #0c1428;
  --ux-navy-mid: #1a1f4a;
  --ux-orange: #ff5a1e;
  --ux-amber: #fa8c14;
  --ux-gold: #ffd24a;
  --ux-signage: #fdab53;
  --ux-text: #e8eef8;
  --ux-muted: #9aa8c0;
}

.ultralinx-page .ux-hero {
  min-height: min(52vh, 520px);
}

.ultralinx-page .ux-hero-content {
  max-width: 44rem;
}

.ultralinx-page .ux-hero-eyebrow {
  margin-bottom: 1rem;
}

.ultralinx-hero-mark {
  width: min(320px, 72vw);
  margin-bottom: 1rem;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
}

.ultralinx-page .ux-hero-title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.55rem, 3.2vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.15;
}

.ultralinx-page .ux-hero-tagline {
  margin: 0 0 1.35rem;
  max-width: 36rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(232, 238, 248, 0.82);
}

.ux-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.15rem;
}

.ux-proto-launch--hero {
  margin-left: 0;
  padding: 0.85rem 1.45rem;
  font-size: 0.82rem;
}

.ux-proto-launch--secondary {
  margin-left: 0;
  background: transparent;
  border-color: rgba(253, 171, 83, 0.55);
  color: #fdab53;
  box-shadow: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ux-proto-launch--secondary:hover,
.ux-proto-launch--secondary:focus-visible {
  background: rgba(253, 171, 83, 0.12);
  border-color: #fdab53;
  color: #fff;
  box-shadow: none;
  transform: translateY(-1px);
}

.ux-hero-hint {
  font-size: 0.78rem;
  color: var(--ux-muted);
  letter-spacing: 0.02em;
}

.ultralinx-page .ux-stats-bar {
  border-top: 1px solid rgba(255, 90, 30, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(12, 20, 40, 0.98), rgba(8, 12, 24, 0.98));
}

.ultralinx-page .ux-stats-bar .game-stat-label {
  color: var(--ux-muted);
  letter-spacing: 0.08em;
}

.ultralinx-page .ux-stats-bar .game-stat-value {
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.ultralinx-page .ux-content {
  padding-top: 2rem;
}

.ux-section-head {
  margin-bottom: 1rem;
}

.ux-section-head h2 {
  margin: 0 0 0.35rem;
  color: #fff;
}

.ux-section-head .section-text {
  margin: 0;
  color: var(--ux-muted);
  max-width: 40rem;
}

.ux-matrix {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 12, 24, 0.65);
  overflow: hidden;
}

.ux-matrix table {
  margin: 0;
}

.ux-matrix th {
  background: rgba(255, 90, 30, 0.12);
  color: #fdab53;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ux-matrix tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

.ux-matrix td strong {
  display: inline-block;
  margin-right: 0.35rem;
  color: #ff8a4a;
}

.ux-toolbar--deck {
  border-color: rgba(255, 90, 30, 0.22);
  background: linear-gradient(180deg, rgba(16, 24, 48, 0.92), rgba(10, 14, 28, 0.92));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.ux-chip {
  border-radius: 8px;
}

.ux-chip.is-active {
  box-shadow: 0 0 0 1px rgba(255, 90, 30, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ux-flavor-blurb {
  padding: 0.85rem 1rem;
  border-left: 3px solid #ff5a1e;
  background: rgba(255, 90, 30, 0.06);
  border-radius: 0 10px 10px 0;
}

.ux-surface-card {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(18, 24, 44, 0.95), rgba(10, 14, 26, 0.98));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.ux-surface-head {
  padding: 1.1rem 1.25rem 0.95rem;
  background: rgba(255, 255, 255, 0.02);
}

.ux-surface-head h3 {
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}

.ux-note {
  border-radius: 14px;
  border-color: rgba(253, 171, 83, 0.4);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(12, 20, 40, 0.4));
}

.ux-constraints {
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Modal chrome */

.ux-proto-backdrop {
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(255, 90, 30, 0.12), transparent 55%),
    rgba(3, 5, 12, 0.88);
  backdrop-filter: blur(6px);
}

.ux-proto-shell {
  background:
    linear-gradient(180deg, #0c1428 0%, #070a12 40%, #05070f 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.ux-proto-chrome {
  align-items: center;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid rgba(255, 90, 30, 0.2);
  background: linear-gradient(180deg, rgba(18, 28, 52, 0.98), rgba(10, 16, 32, 0.98));
}

.ux-proto-chrome-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.ux-proto-chrome-mark {
  width: 42px;
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 8px rgba(255, 90, 30, 0.35));
}

.ux-proto-chrome h2 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.ux-proto-kicker {
  margin-top: 0.15rem;
  font-size: 0.7rem;
  color: #9aa8c0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ux-proto-close {
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.14);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ux-proto-sidebar.ux-proto-toolbar {
  background: transparent;
  border-right: 0;
  box-shadow: none;
}

.ux-proto-sidebar .ux-toolbar-label {
  color: #8b97ad;
}

.ux-proto-stage {
  position: relative;
  background:
    radial-gradient(ellipse 55% 45% at 50% 42%, rgba(255, 90, 30, 0.1), transparent 58%),
    radial-gradient(ellipse 80% 70% at 50% 100%, rgba(0, 0, 0, 0.55), transparent 50%),
    linear-gradient(180deg, #0a101c 0%, #05070f 100%);
}

.ux-proto-stage::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 4%;
  height: 18%;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(255, 138, 26, 0.12), transparent 70%);
  filter: blur(8px);
  opacity: 0.85;
}

.ux-proto-bezel {
  border: 2px solid #e07018;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px #1a0e06,
    0 0 0 3px rgba(255, 138, 26, 0.35),
    0 0 28px rgba(255, 138, 26, 0.28),
    0 18px 40px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px #0a0a0a;
  background: #050505;
}

.ux-proto-glass {
  background: #0e1420;
}

.ux-proto-screen-label {
  margin-top: 0.45rem;
  color: rgba(154, 168, 192, 0.85);
}

/* Dynamic faces */

.ux-face-marquee {
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255, 220, 80, 0.18), transparent 55%),
    linear-gradient(180deg, #1f8a30 0%, #0f5a1c 48%, #083010 100%);
}

.ux-face-marquee-title {
  animation: ux-marquee-breathe 3.6s ease-in-out infinite;
}

.ux-face-marquee-glow {
  animation: ux-glow-pulse 2.8s ease-in-out infinite;
}

@keyframes ux-marquee-breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.02); filter: brightness(1.08); }
}

@keyframes ux-glow-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.9; }
}

.ux-face-main {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(80, 40, 120, 0.35), transparent 50%),
    linear-gradient(180deg, #1a0e30 0%, #0c0818 55%, #080610 100%);
}

.ux-face-jp--grand strong {
  text-shadow: 0 0 16px rgba(255, 210, 74, 0.45);
}

.ux-face-cell {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, #2e1a4e 0%, #160c2c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ux-face-cell--rank .ux-face-rank {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(0.55rem, 1.6vh, 0.95rem);
  letter-spacing: 0.02em;
  color: #f0e6ff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.ux-face-cell--clover {
  background: linear-gradient(180deg, #1a3a22 0%, #0c2214 100%);
  border-color: rgba(182, 235, 71, 0.35);
}

.ux-face-clover-glyph {
  position: relative;
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-top: 0.06em;
}

.ux-face-clover-glyph::before {
  content: "";
  position: absolute;
  inset: 12% 12% 18% 12%;
  background:
    radial-gradient(circle at 28% 32%, #8fe63a 0 38%, transparent 40%),
    radial-gradient(circle at 72% 32%, #8fe63a 0 38%, transparent 40%),
    radial-gradient(circle at 28% 68%, #8fe63a 0 38%, transparent 40%),
    radial-gradient(circle at 72% 68%, #7ed321 0 38%, transparent 40%);
  filter: drop-shadow(0 0 4px rgba(126, 211, 33, 0.45));
}

.ux-face-clover-glyph::after {
  content: "";
  position: absolute;
  left: 46%;
  bottom: 2%;
  width: 0.12em;
  height: 0.28em;
  background: #5a9a22;
  border-radius: 1px;
  transform: rotate(12deg);
}

.ux-face-clover-glyph--lg {
  width: 1.15em;
  height: 1.15em;
  margin: 0 0 0.12em;
}

.ux-face-clover-val {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.ux-face-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}

.ux-face-hud {
  border-top: 1px solid rgba(255, 210, 74, 0.18);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55));
}

.ux-face-deck {
  background: linear-gradient(180deg, #1a1528 0%, #0c0a14 100%);
}

.ux-face-deck-play {
  box-shadow: 0 0 18px rgba(255, 90, 30, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .ux-face-marquee-title,
  .ux-face-marquee-glow {
    animation: none;
  }
}

/* ── Hub quiet chrome (cabinet north star) — overrides AAA orange polish ──── */

body.ux-ultralinx-hub .nav-products,
body.ux-ultralinx-hub .sticky-disclosure,
body.ux-ultralinx-hub .back-to-top {
  display: none !important;
}

/* Machine prototype launch parked for later */
.ultralinx-page .ux-proto-launch[data-ux-proto-open],
.ultralinx-page button.ux-proto-launch--hero {
  display: none !important;
}

.ultralinx-page {
  --ux-navy: #12161f;
  --ux-navy-mid: #1a1f28;
  --ux-orange: #d4af37;
  --ux-amber: #d4af37;
  --ux-gold: #d4af37;
  --ux-signage: #c9b06a;
  --ux-text: #e8eef8;
  --ux-muted: #9aa3b2;
  --ux-panel: rgba(22, 26, 34, 0.92);
  --ux-panel-border: rgba(255, 255, 255, 0.1);
  --ux-warn: #d4af37;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, #1a1f28 0%, transparent 55%),
    #0b0e14;
  color: var(--ux-text);
}

.ultralinx-page .game-hero,
.ultralinx-page .approach-hero,
.ultralinx-page .ux-hero {
  min-height: min(48vh, 460px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: #0b0e14;
}

.ultralinx-page .game-hero-bg,
.ultralinx-page .ux-hero-bg {
  background:
    radial-gradient(ellipse 55% 45% at 50% 42%, rgba(212, 175, 55, 0.07), transparent 58%),
    radial-gradient(ellipse 70% 60% at 50% 40%, #2a3140 0%, transparent 62%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #1a1f28 0%, #0d1016 72%),
    #0b0e14 !important;
  pointer-events: none;
}

.ultralinx-page .game-hero-bg::after {
  background: linear-gradient(180deg, rgba(11, 14, 20, 0.12) 0%, rgba(11, 14, 20, 0.55) 100%) !important;
}

.ultralinx-page .ux-hero-eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--ux-panel-border);
  border-radius: 3px;
  background: var(--ux-panel);
  color: #9aa3b2;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ultralinx-hero-mark {
  display: block;
  width: min(300px, 70vw);
  margin: 0 0 1rem;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
  mix-blend-mode: normal;
}

.ultralinx-page .ux-hero-title {
  color: #f2f4f8;
}

.ultralinx-page .ux-hero-tagline {
  max-width: 38rem;
  color: rgba(154, 163, 178, 0.95);
}

.ux-cab-cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid #d4af37;
  border-radius: 4px;
  background: #d4af37;
  color: #1a1408;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
}

.ux-cab-cta:hover,
.ux-cab-cta:focus-visible {
  filter: brightness(1.06);
  color: #1a1408;
}

.ux-hero-hint {
  font-size: 0.72rem;
  color: #6a7382;
}

.ultralinx-page .ux-stats-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(14, 17, 24, 0.95);
}

.ultralinx-page .ux-stats-bar .game-stat-label { color: #6a7382; }
.ultralinx-page .ux-stats-bar .game-stat-value { color: #e8eef8; }

.ux-tip-k {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6a7382;
}

.ux-intro { margin: 0 0 1.75rem; }

.ux-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.ux-intro-card {
  border: 1px solid var(--ux-panel-border);
  border-radius: 4px;
  background: var(--ux-panel);
  padding: 0.85rem 0.9rem 1rem;
}

.ux-intro-card strong {
  display: block;
  margin-bottom: 0.35rem;
  color: #f2f4f8;
  font-size: 0.88rem;
}

.ux-intro-card p {
  margin: 0;
  color: #9aa3b2;
  font-size: 0.78rem;
  line-height: 1.45;
}

.ux-matrix {
  border-radius: 4px;
  border: 1px solid var(--ux-panel-border);
  background: rgba(14, 17, 24, 0.85);
}

.ux-matrix th {
  background: rgba(212, 175, 55, 0.08);
  color: #c9b06a;
}

.ux-matrix td strong { color: #d4af37; }

.ux-toolbar--deck {
  border: 1px solid var(--ux-panel-border);
  border-radius: 4px;
  background: var(--ux-panel);
  box-shadow: none;
}

.ultralinx-page .ux-chip {
  border-radius: 3px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(12, 14, 18, 0.85);
  color: #9aa3b2;
}

.ultralinx-page .ux-chip.is-active {
  color: #1a1408;
  background: #d4af37;
  border-color: #d4af37;
  box-shadow: none;
}

.ux-flavor-blurb {
  padding: 0.75rem 0.9rem;
  border-left: 2px solid #d4af37;
  background: rgba(212, 175, 55, 0.06);
  border-radius: 0 4px 4px 0;
  color: #9aa3b2;
}

.ux-flavor-blurb strong { color: #e8eef8; }

.ux-surface-card {
  border-radius: 6px;
  border: 1px solid var(--ux-panel-border);
  background: linear-gradient(180deg, rgba(22, 26, 34, 0.98), rgba(12, 14, 18, 0.98));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.ux-note {
  border-radius: 4px;
  border: 1px solid var(--ux-panel-border);
  background: var(--ux-panel);
}

.ux-note strong { color: #d4af37; }
.ux-note a { color: #d4af37; }

.ux-constraints {
  margin: 0 0 2rem;
  padding: 1.1rem 1.15rem;
  border-radius: 4px;
  border: 1px solid var(--ux-panel-border);
  background: rgba(14, 17, 24, 0.9);
  box-shadow: none;
}

.ux-constraints h2 { color: #c9b06a; }
.ux-constraints a { color: #d4af37; }

.ultralinx-page .poc-card-tag {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #c9b06a;
}

@media (max-width: 900px) {
  .ux-intro-grid { grid-template-columns: 1fr; }
}

/* Attract kiosk prototype panel (Exacta Claude 1:1) */
.ux-kiosk {
  margin: 0 0 2rem;
}

.ux-kiosk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  margin-bottom: 0.75rem;
}

.ux-kiosk-head h2 {
  margin: 0.15rem 0 0.35rem;
  color: #f2f4f8;
  font-size: 1.15rem;
}

.ux-kiosk-head .section-text {
  margin: 0;
  max-width: 40rem;
  color: #9aa3b2;
  font-size: 0.88rem;
  line-height: 1.45;
}

.ux-kiosk-actions {
  display: flex;
  gap: 0.5rem;
}

.ux-cab-cta--ghost {
  background: transparent;
  color: #d4af37;
  border-color: rgba(212, 175, 55, 0.55);
}

.ux-cab-cta--ghost:hover,
.ux-cab-cta--ghost:focus-visible {
  background: rgba(212, 175, 55, 0.1);
  color: #f2f4f8;
  filter: none;
}

.ux-kiosk-frame {
  position: relative;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: #0a0a0c;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  aspect-ratio: 16 / 9;
  min-height: 360px;
  max-height: min(72vh, 720px);
}

.ux-kiosk-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0a0a0c;
}

/* Flavor-switched hub marquee: Pulse plaque / pending fill the 16:9 frame */
.ux-kiosk-frame--signage,
.ux-kiosk-frame--pending {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.ux-kiosk-signage {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.ux-kiosk-signage > .uxc-root {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.ux-kiosk-signage .uxc-marquee--signage,
.ux-kiosk-signage .uxc-marquee--pending {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  aspect-ratio: auto;
  border: 0 !important;
  border-radius: 0;
  outline: none !important;
  box-shadow: none !important;
  background: #08090c;
}

/* Kill legacy .uxc-marquee red inset chrome inside hub frame */
.ux-kiosk-signage .uxc-marquee--signage .ux-jackpot-signage--plaque {
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-width: none;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  outline: none !important;
  box-shadow: none !important;
  padding: 4% 5% 3.5%;
}

.ux-kiosk-signage .uxc-marquee--pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Sticky flavor dock — bottom-left viewport (hub + cabinet).
   NOTE: portal `.page` uses transform animation which creates a containing
   block for position:fixed — neutralize that on UltralinX pages. */
.ultralinx-page.page,
.ux-cabinet-page.page {
  transform: none !important;
  animation: uxPageFadeIn 0.45s ease forwards;
}

@keyframes uxPageFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.ux-flavor-dock {
  position: fixed;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 120;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: rgba(22, 26, 34, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

.ux-flavor-dock-k {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6a7382;
  padding: 0 0.15rem;
}

.ux-flavor-dock-row {
  display: flex;
  gap: 3px;
}

.ux-flavor-dock-btn {
  appearance: none;
  width: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  background: rgba(12, 14, 18, 0.85);
  color: #9aa3b2;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.ux-flavor-dock-btn--current {
  width: auto;
  min-width: 4.35rem;
  padding: 0 0.55rem;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ux-flavor-dock-btn:hover {
  color: #e8eef8;
  border-color: rgba(255, 255, 255, 0.2);
}

.ux-flavor-dock-btn.is-active {
  color: #1a1408;
  background: #d4af37;
  border-color: #d4af37;
}

.ux-flavor-dock-view {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  margin-left: 0.1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(12, 14, 18, 0.85);
}

.ux-flavor-dock-view-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.85rem;
  margin: 0;
  padding: 0 0.5rem;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: #8b93a3;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.ux-flavor-dock-view-btn:last-child {
  border-right: 0;
}

.ux-flavor-dock-view-btn:hover {
  color: #e8eef8;
  background: rgba(255, 255, 255, 0.04);
}

.ux-flavor-dock-view-btn.is-active {
  color: #e8eef8;
  background: rgba(255, 255, 255, 0.1);
}

.ux-flavor-dock-label,
.ux-flavor-dock-current {
  min-width: 3.6rem;
  padding: 0 0.35rem 0 0.15rem;
  color: #c5ccd8;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.ux-ultralinx-hub .ux-flavor-dock,
body.ux-cabinet-immersive .ux-flavor-dock {
  display: flex;
}

.ultralinx-page[data-ux-flavor="current"] .ux-flavor-dock-btn.is-active,
body[data-ux-flavor="current"] .ux-flavor-dock-btn.is-active {
  background: #c9a227;
  border-color: #c9a227;
  color: #1a1408;
}

.ultralinx-page[data-ux-flavor="B"] .ux-flavor-dock-btn.is-active,
body[data-ux-flavor="B"] .ux-flavor-dock-btn.is-active {
  background: #ff7a1a;
  border-color: #ff7a1a;
  color: #1a1408;
}

.ultralinx-page[data-ux-flavor="C"] .ux-flavor-dock-btn.is-active,
body[data-ux-flavor="C"] .ux-flavor-dock-btn.is-active {
  background: #9aa3b2;
  border-color: #9aa3b2;
  color: #12161f;
}

.ux-flavor-dock-btn.is-locked,
.ux-flavor-dock-btn:disabled {
  opacity: 0.38;
  filter: grayscale(1);
  cursor: not-allowed;
  color: #6a7382;
  background: rgba(12, 14, 18, 0.55);
  border-color: rgba(255, 255, 255, 0.06);
}

.ux-flavor-dock-btn.is-locked:hover,
.ux-flavor-dock-btn:disabled:hover {
  color: #6a7382;
  border-color: rgba(255, 255, 255, 0.06);
}

.ux-flavor-dock.is-coming-soon {
  opacity: 0.72;
}

.ux-flavor-dock.is-coming-soon .ux-flavor-dock-btn.is-active,
.ux-flavor-dock.is-coming-soon .ux-flavor-dock-btn.is-locked,
.ux-flavor-dock.is-coming-soon .ux-flavor-dock-btn:disabled {
  opacity: 0.42;
  filter: grayscale(1);
  color: #6a7382;
  background: rgba(12, 14, 18, 0.55);
  border-color: rgba(255, 255, 255, 0.06);
  cursor: not-allowed;
}

.ux-flavor-dock.is-coming-soon .ux-flavor-dock-view-btn {
  color: #6a7382;
}

.ux-alias {
  margin-left: 0.35rem;
  color: #6a7382;
  font-size: 0.72rem;
  font-weight: 600;
}

.ux-lock-pill {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  color: #6a7382;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.ux-matrix-wrap.is-locked {
  opacity: 0.42;
  filter: grayscale(0.85);
  pointer-events: none;
  user-select: none;
}

.ux-toolbar.is-hidden {
  display: none;
}

/* Live widget pair — left: H+V bugs stacked; right: expanded panel */
.ux-widget-pair {
  margin: 0 0 2rem;
  padding: 1.25rem 1.15rem 1.4rem;
  border: 1px solid rgba(255, 154, 60, 0.32);
  border-radius: 14px;
  background:
    linear-gradient(165deg, rgba(28, 36, 52, 0.92), rgba(14, 18, 28, 0.96));
}

.ux-widget-pair-head {
  max-width: 42rem;
  margin-bottom: 1.15rem;
}

.ux-widget-pair-title {
  margin: 0.35rem 0 0.4rem;
  font-size: 1.35rem;
  color: #f2f5fa;
}

.ux-widget-pair-head .section-text {
  margin: 0;
  color: #a8b4c8;
}

.ux-widget-pair-cols {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.25rem;
  align-items: stretch;
}

@media (min-width: 900px) {
  .ux-widget-pair-cols {
    display: grid;
    grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr);
    gap: 1.5rem;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .ux-widget-pair-col--bugs {
    min-height: 0;
    height: 100%;
  }

  .ux-widget-pair-col--exp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .ux-widget-pair-col--exp .ux-stage--pair-exp {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
  }
}

.ux-widget-pair-col,
.ux-widget-bug-box {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(10, 12, 18, 0.72);
  overflow: hidden;
}

.ux-widget-pair-col--bugs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
  border: none;
  background: transparent;
  overflow: visible;
  border-radius: 0;
  /* Match expanded panel stage height so left stacks fill the column */
  min-height: 920px;
  -ms-flex-item-align: stretch;
  align-self: stretch;
}

.ux-widget-bug-box {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 0;
}

.ux-widget-pair-col .ux-surface-head,
.ux-widget-bug-box .ux-surface-head {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding: 0.85rem 1rem 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ux-stage--pair-min,
.ux-stage--pair-exp {
  display: block;
  position: relative;
  padding: 0;
  box-sizing: border-box;
  min-height: 140px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 154, 60, 0.06) 0%, transparent 50%),
    #0a0c12;
}

/* Hide noisy vendor placeholder chip inside bug stages (keeps stage usable) */
.ux-stage--pair-min::before,
.ux-stage--pair-bug-h::before,
.ux-stage--pair-bug-v::before,
.ux-stage--pair-exp::before {
  content: none !important;
  display: none !important;
}

.ux-widget-bug-box .ux-stage--pair-min {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

/* Hub comps: same .ux-cab-px + .uxc-proto-* as cabinet, 1:1 (no scale / no hide) */
.ux-hub-px.ux-cab-px {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  visibility: visible !important;
  pointer-events: auto;
  --px-scale: 1;
  --hhr-reserve: 0px;
}

/* Panel chrome flush like bugs; HHR band is internal padding, not stage reserve. */
.ux-hub-px.ux-hub-px--panel {
  --hhr-reserve: 0px;
}

/* Vertical mid-left uses cabinet rotate geometry — do not stretch to fill the stage */
.ux-stage--pair-bug-h,
.ux-stage--pair-bug-v {
  min-height: 320px;
}

.ux-stage--pair-exp {
  min-height: 920px;
  height: 920px;
}

/* Exacta Current handoff captures in hub live pair (not Pulse chrome) */
.ux-stage--pair-current {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 1.25rem;
}

.ux-pair-capture {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.ux-pair-capture--bug-h {
  width: 206px;
  max-width: min(206px, 100%);
  height: auto;
}

.ux-pair-capture--bug-v {
  width: auto;
  height: 206px;
  max-height: min(206px, 85%);
}

.ux-pair-capture--panel {
  width: auto;
  height: auto;
  max-width: 339px;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.ux-widget-pair--current .ux-tip-k {
  color: #d4af37;
}

/* Panel column stage fills to match left stack */
.ux-widget-pair-col--exp .ux-stage--pair-exp {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  height: auto;
  min-height: 920px;
}

/* Main-screen glass compare — Exacta 01 / 02 at capture scale */
.ux-glass-compare {
  margin: 0 0 2rem;
  padding: 1.25rem 1.15rem 1.4rem;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 14px;
  background:
    linear-gradient(165deg, rgba(28, 36, 52, 0.92), rgba(14, 18, 28, 0.96));
}

.ux-glass-compare-head {
  max-width: 42rem;
  margin-bottom: 1.15rem;
}

.ux-glass-compare-title {
  margin: 0.35rem 0 0.4rem;
  font-size: 1.35rem;
  color: #f2f5fa;
}

.ux-glass-compare-head .section-text {
  margin: 0;
  color: #a8b4c8;
}

.ux-glass-compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 720px) {
  .ux-glass-compare-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.ux-glass-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}

.ux-glass-card .ux-surface-head {
  padding: 0 0.15rem;
}

.ux-main-glass {
  --ux-glass-w: 1080;
  --ux-glass-h: 1920;
  position: relative;
  width: min(100%, 320px);
  margin: 0 auto;
  aspect-ratio: 1080 / 1920;
  background:
    linear-gradient(45deg, #1a1e28 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(-45deg, #1a1e28 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(45deg, transparent 75%, #1a1e28 75%) 0 0 / 16px 16px,
    linear-gradient(-45deg, transparent 75%, #1a1e28 75%) 0 0 / 16px 16px,
    #12151c;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 18px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.ux-main-glass-label {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 2;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: rgba(8, 10, 16, 0.72);
  color: rgba(242, 245, 250, 0.85);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Capture pixels: bug ~205×60 → upscaled; panel flush left */
.ux-main-glass-shot {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  image-rendering: high-quality;
  pointer-events: none;
}

.ux-main-glass-shot--bug {
  top: auto;
  bottom: 0;
  left: 0;
  width: calc(100% * 205 / 1080);
  transform: none;
}

.ux-main-glass-shot--panel {
  left: 0;
  bottom: 0;
  width: calc(100% * 338 / 1080);
}

/* Exacta handoff screenshot stages (Current) */
.ux-surface-grid--handoff {
  grid-template-columns: 1fr;
}

@media (min-width: 960px) {
  .ux-surface-grid--handoff {
    grid-template-columns: 1fr 1fr;
  }
}

.ux-stage--handoff {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 1rem;
  background:
    linear-gradient(45deg, #1a1e28 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(-45deg, #1a1e28 25%, transparent 25%) 0 0 / 16px 16px,
    #12151c;
  overflow: auto;
}

.ux-stage--handoff-bug {
  min-height: 140px;
  padding: 2rem 1.25rem;
}

.ux-stage--handoff-panel {
  padding: 1rem;
}

.ux-stage--handoff-portrait {
  max-height: min(78vh, 920px);
  padding: 0.75rem;
}

.ux-stage--handoff-landscape {
  padding: 0;
  min-height: 0;
}

.ux-handoff-live-kiosk {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #050608;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.ux-handoff-kiosk-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #050608;
}

.ux-handoff-figure {
  margin: 0;
  max-width: 100%;
}

.ux-handoff-figure--landscape .ux-handoff-shot {
  width: 100%;
  max-width: 1100px;
  height: auto;
  display: block;
  margin: 0 auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.ux-handoff-figure--bug .ux-handoff-shot {
  width: min(440px, 100%);
  height: auto;
  display: block;
  margin: 0 auto;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.ux-handoff-figure--panel .ux-handoff-shot {
  width: min(360px, 100%);
  height: auto;
  display: block;
  margin: 0 auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.ux-handoff-figure--portrait .ux-handoff-shot {
  width: auto;
  max-width: 100%;
  max-height: min(72vh, 860px);
  height: auto;
  display: block;
  margin: 0 auto;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}

.ux-handoff-figure--landscape .ux-handoff-shot {
  width: 100%;
  max-width: 1100px;
  height: auto;
  display: block;
  margin: 0 auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.ux-surface-card--handoff .ux-stage--handoff::before,
.ux-surface-card--handoff .ux-stage--handoff::after {
  content: none;
  display: none;
}

/* ==========================================================================
   Flavor A — Gradient Pulse (visual target skins)
   Geometry from WIREFRAMES.md; finish from render-bug/panel/attract.
   CEF49-safe subset for .uxc-* mocks (no custom properties / gap / clamp).
   ========================================================================== */

.uxc-bug--pulse {
  position: relative;
  left: auto;
  bottom: auto;
  width: 206px;
  height: 63px;
  margin: 12px auto;
  padding: 0;
  container-type: size;
  /* Same outer treatment as expanded Panel Pulse: 4px orange + 6px dark rim */
  border: none;
  border-top: 4px solid #ffb04a;
  border-right: 4px solid #ff6a3c;
  border-radius: 0 16px 0 0;
  background: linear-gradient(180deg, #14161c 0%, #0a0b0f 55%, #08090c 100%);
  box-shadow:
    0 0 0 6px #08090c,
    0 10px 28px rgba(0, 0, 0, 0.72);
  overflow: hidden;
}

.uxc-bug--pulse .uxc-bug-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.88;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Meter-only bug — no ULX mark / under-meter track (amount breathes) */
.uxc-bug--pulse .uxc-bug-logo,
.uxc-bug--pulse .uxc-bug-meter-track {
  display: none;
}

.uxc-bug--pulse .uxc-bug-odo {
  position: absolute;
  z-index: 2;
  left: 6px;
  top: 10px;
  width: 194px;
  height: 42px;
  display: block;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
}

/* Meter may sit in .uxc-bug-odo (hub) or directly on the pulse plate (stage comps) */
.uxc-bug--pulse > .ux-jackpot-meter--bug {
  position: absolute;
  z-index: 2;
  left: 6px;
  top: 10px;
  width: 194px;
  height: 42px;
  box-sizing: border-box;
}

/* Shared digit-frame meter — taller well without logo/track crowding */
.uxc-bug--pulse .uxc-bug-odo .ux-jackpot-meter {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  /* Font size owned by .ux-jackpot-meter--text (+ cqh clamp) */
}

.uxc-panel--pulse {
  position: relative;
  left: auto;
  bottom: auto;
  width: 339px;
  min-height: 520px;
  margin: 12px auto;
  padding: 0 0 16px;
  /* Pulse accent stroke (thicker top+right) + darker outer rim */
  border-style: solid;
  border-color: #ff8a3c #ff6a3c #c83a4a #ff8a3c;
  border-top-color: #ffb04a;
  border-right-color: #ff6a3c;
  border-width: 4px 4px 2px 2px;
  border-radius: 4px;
  background: linear-gradient(180deg, #14161c 0%, #0a0b0f 55%, #08090c 100%);
  box-shadow:
    0 0 0 6px #08090c,
    0 8px 24px rgba(0, 0, 0, 0.65);
  color: #e8eef8;
  box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* UltralinX banner — attract signage language; HHR stack sits below.
 * No side/top padding: compact Flavor A video must flush to panel edges.
 * position:relative so qualify ticker can overlay the attract (no reserved strip). */
.uxc-panel--pulse .uxc-panel-banner {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    #ff2f6e 0%,
    #ff5a48 18%,
    #ff7a3a 38%,
    #ff9a3c 55%,
    #ffb84a 75%,
    #ffd24a 100%
  ) left bottom / 100% 2px no-repeat,
    linear-gradient(180deg, #1a1220 0%, #12141a 55%, #0e1016 100%);
  box-shadow: inset 0 -8px 14px rgba(0, 0, 0, 0.32);
}

.uxc-panel--pulse .uxc-panel-hhr-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 10px 0;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background: linear-gradient(180deg, #0a0b0f 0%, #08090c 100%);
  box-shadow: inset 0 8px 14px rgba(0, 0, 0, 0.42);
}

.uxc-panel--pulse .uxc-panel-head {
  position: relative;
  height: 44px;
  margin: 0 0 8px;
}

.uxc-panel--pulse .uxc-panel-logo {
  height: 16px;
  width: auto;
  margin-top: 10px;
  mix-blend-mode: screen;
}

.uxc-panel--pulse .uxc-panel-title {
  position: absolute;
  left: 68px;
  top: 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffd77a;
  text-shadow: 0 0 10px rgba(255, 154, 60, 0.35);
}

.uxc-panel--pulse .uxc-panel-chev,
.uxc-panel--pulse .uxc-proto-collapse {
  position: absolute;
  right: 0;
  top: 5px;
  width: 34px;
  height: 34px;
  border: 1px solid #6a5a30;
  background: #12141a;
  color: #ffd77a;
  font-size: 14px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

/* Animated Pulse frame around jackpot — thick magenta→orange march + dark punch vs reel bg. */
@keyframes uxc-well-pulse-march {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.uxc-panel-well {
  position: relative;
  isolation: isolate;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 112px;
  margin: 0 0 10px;
  border: none;
  border-image: none;
  background:
    radial-gradient(ellipse 80% 90% at 50% 55%, #1a1220 0%, #08090c 70%);
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 36px;
  font-weight: 900;
  color: #ffc14d;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  /* Signage LED digits */
  text-shadow:
    0 0 6px rgba(255, 210, 100, 0.95),
    0 0 14px rgba(255, 160, 50, 0.75),
    0 0 26px rgba(255, 100, 40, 0.45),
    0 2px 3px rgba(0, 0, 0, 0.85);
  /* Dark outer separation so amount punches through busy green/gold reel bg */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.92),
    0 6px 22px rgba(0, 0, 0, 0.88),
    0 0 34px rgba(0, 0, 0, 0.7),
    0 0 20px rgba(255, 47, 110, 0.32),
    0 0 12px rgba(255, 154, 60, 0.22),
    inset 0 2px 8px rgba(0, 0, 0, 0.78);
  box-sizing: border-box;
}

/* Thick flowing Pulse gradient ring (portal preview chrome — modern mask OK). */
.uxc-panel-well::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  padding: 4px;
  box-sizing: border-box;
  background: linear-gradient(
    90deg,
    #ff2f6e 0%,
    #ff5a48 14%,
    #ff7a3a 28%,
    #ff9a3c 42%,
    #ffb84a 56%,
    #ffd24a 70%,
    #ffb84a 84%,
    #ff9a3c 92%,
    #ff2f6e 100%
  );
  background-size: 200% 100%;
  -webkit-animation: uxc-well-pulse-march 2.4s linear infinite;
  animation: uxc-well-pulse-march 2.4s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* Kill pink→yellow qualify track — Exacta CanPlay uses Optimal Bet text */
.uxc-panel--pulse .uxc-panel-meter,
.uxc-proto-panel.uxc-panel--pulse .uxc-panel-meter {
  display: none !important;
}

/* Compact qualify ticker — overlays bottom of banner attract (no layout strip / dead band). */
.uxc-panel-qual {
  padding: 0;
  box-sizing: border-box;
  border-radius: 0;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: rgba(0, 0, 0, 0.72);
  text-align: center;
  overflow: hidden;
}

.uxc-panel-qual--ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  margin: 0;
  height: 22px;
  min-height: 22px;
  max-height: 22px;
  pointer-events: none;
}

.uxc-panel-qual-viewport {
  height: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.uxc-panel-qual-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  width: -webkit-max-content;
  width: max-content;
  -webkit-animation: uxc-qual-marquee 14s linear infinite;
  animation: uxc-qual-marquee 14s linear infinite;
}

.uxc-panel-qual-line {
  display: inline-block;
  padding: 0 18px;
  white-space: nowrap;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 22px;
  text-transform: none;
  color: #e8d9a8;
}

.uxc-panel-qual-sep {
  color: rgba(232, 217, 168, 0.45);
  font-weight: 600;
}

.uxc-panel-qual-amt {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Qualify color lives on $ amount only — never on the strip chrome */
.uxc-panel-qual.is-need,
.uxc-panel-qual.is-in {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: rgba(0, 0, 0, 0.72);
}

.uxc-panel-qual.is-need .uxc-panel-qual-line,
.uxc-panel-qual.is-in .uxc-panel-qual-line {
  color: #e8d9a8;
}

.uxc-panel-qual.is-need .uxc-panel-qual-amt {
  color: #ff3b4e;
}

.uxc-panel-qual.is-in .uxc-panel-qual-amt {
  color: #3dff9a;
}

@-webkit-keyframes uxc-qual-marquee {
  0% { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes uxc-qual-marquee {
  0% { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

.uxc-panel--pulse .uxc-panel-bet {
  display: none !important;
}

.uxc-panel-content {
  border: 1px solid #2a2e38;
  background: #0c0e14;
  margin: 0 0 8px;
}

/*
 * Current-like HHR race body (Exacta handoff 02 IA):
 * race bar → horse picks → nav → Place wager. Flavor A gold/dark chrome.
 */
.uxc-panel-content--hhr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border-color: #3a3420;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 154, 60, 0.08) 0%, transparent 42%),
    #0a0b0f;
  overflow: hidden;
}

.uxc-hhr-racebar {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  height: 34px;
  border-bottom: 1px solid #3a3420;
  background: linear-gradient(180deg, #161820 0%, #0e1016 100%);
}

.uxc-hhr-racebar-btn,
.uxc-hhr-racebar-race {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c9a84a;
  box-sizing: border-box;
}

.uxc-hhr-racebar-btn {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 24%;
  flex: 0 0 24%;
  margin: 0;
  padding: 0;
  color: #8a7a48;
  border: 0;
  border-right: 1px solid #2a2618;
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.uxc-hhr-racebar-btn:last-child {
  border-right: 0;
  border-left: 1px solid #2a2618;
}

.uxc-hhr-racebar-btn:hover,
.uxc-hhr-racebar-btn:focus-visible {
  color: #ffd77a;
  outline: none;
}

.uxc-hhr-racebar-btn.is-active {
  color: #ffe09a;
  background: rgba(255, 154, 60, 0.12);
}

.uxc-hhr-stats {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 42px;
  margin: 0;
  padding: 6px 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #3a3420;
  background: linear-gradient(180deg, #1a1610 0%, #0e1016 100%);
  color: #c9a84a;
  font-size: 11px;
  line-height: 1.35;
}

.uxc-hhr-stats strong {
  display: block;
  margin: 0 0 2px;
  color: #ffe09a;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.uxc-hhr-racebar-race {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 22px;
  color: #ffe09a;
  /* Match STATS / QUICK PICK dark racebar — no brown/amber fill */
  background: transparent;
  box-shadow: none;
}

/* Prev/next pinned to race-segment edges — glyph only, no square backings. */
.uxc-hhr-racebar-race .uxc-hhr-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0 6px;
  font-size: 11px;
  line-height: 1;
  border-radius: 0;
  border: 0 none transparent;
  background: transparent none;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  color: #ffd77a;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  z-index: 1;
}

.uxc-hhr-racebar-race .uxc-hhr-nav[data-ux-hhr-race-dir="-1"] {
  left: 0;
  right: auto;
}

.uxc-hhr-racebar-race .uxc-hhr-nav[data-ux-hhr-race-dir="1"] {
  right: 0;
  left: auto;
}

.uxc-hhr-racebar-race .uxc-hhr-nav:hover,
.uxc-hhr-racebar-race .uxc-hhr-nav:focus-visible {
  border: 0 none transparent;
  background: transparent none;
  color: #ffe9a0;
  outline: none;
}

.uxc-hhr-racebar-label {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  line-height: 1;
  margin: 0;
  text-align: center;
  pointer-events: none;
}

.uxc-hhr-picks {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 4px 8px;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.uxc-hhr-pick-row {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  min-height: 0;
  margin: 0 0 3px;
  border: 1px solid #2a2e38;
  border-radius: 4px;
  background: linear-gradient(180deg, #12141a 0%, #0c0e14 100%);
  box-sizing: border-box;
  overflow: hidden;
}

.uxc-hhr-pick-row:last-child {
  margin-bottom: 0;
}

.uxc-hhr-pick-row:hover {
  border-color: #5a4a28;
}

.uxc-hhr-pick-row.is-selected {
  border-color: #c9a84a;
  box-shadow: inset 0 0 0 1px rgba(255, 210, 74, 0.28);
  background: linear-gradient(180deg, #1a1610 0%, #12100c 100%);
}

.uxc-hhr-pick {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0 6px 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.uxc-hhr-place {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 18px;
  flex: 0 0 18px;
  margin-right: 4px;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #8a7a48;
  letter-spacing: 0.02em;
}

.uxc-hhr-pick-row.is-selected .uxc-hhr-place {
  color: #ffd77a;
}

.uxc-hhr-silk {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 26px;
  flex: 0 0 26px;
  display: block;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.uxc-hhr-letter {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: #f2f4f8;
  letter-spacing: 0.04em;
}

.uxc-hhr-reorder {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 4px 0 0;
}

.uxc-hhr-move {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 22px;
  height: 100%;
  min-height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #c9a84a;
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.uxc-hhr-move:hover,
.uxc-hhr-move:focus-visible {
  color: #ffe09a;
  outline: none;
}

.uxc-hhr-dots,
.uxc-hhr-grip,
button.uxc-hhr-dots,
button.uxc-hhr-grip {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 18px;
  flex: 0 0 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 18px;
  height: 100%;
  min-height: 22px;
  margin: 0;
  margin-left: 2px;
  padding: 0;
  border: 0;
  opacity: 0.7;
  background-color: transparent;
  background-image: radial-gradient(#c9a84a 1.1px, transparent 1.2px);
  background-size: 5px 5px;
  background-position: center;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  color: inherit;
}

.uxc-hhr-dots:hover,
.uxc-hhr-grip:hover,
.uxc-hhr-dots:focus-visible,
.uxc-hhr-grip:focus-visible {
  opacity: 1;
  outline: none;
  color: #ffe09a;
}

.uxc-hhr-dots:active,
.uxc-hhr-grip:active,
.uxc-hhr-pick-row.is-dragging .uxc-hhr-dots,
.uxc-hhr-pick-row.is-dragging .uxc-hhr-grip {
  cursor: grabbing;
  opacity: 1;
}

.uxc-hhr-pick-row.is-dragging {
  opacity: 0.92;
  box-shadow: 0 0 0 1px rgba(255, 210, 74, 0.55);
  z-index: 2;
}

.uxc-hhr-picks,
.uxc-hhr-pick-row,
.uxc-hhr-reorder {
  touch-action: manipulation;
}

.uxc-hhr-dots,
[data-ux-hhr-dragging] .uxc-hhr-picks {
  touch-action: none;
}

/* Legacy under-list nav row — arrows now live in .uxc-hhr-racebar-race */
.uxc-hhr-actions {
  display: none;
}

.uxc-hhr-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  margin: 0 4px;
  border: 1px solid #5a4a28;
  border-radius: 3px;
  background: linear-gradient(180deg, #2a1e14 0%, #18120c 100%);
  color: #ffd77a;
  font-size: 12px;
  box-sizing: border-box;
}

.uxc-panel--pulse .uxc-panel-content {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 0;
}

/*
 * HHR instructional line — Exacta CanPlay flow (handoff 01): re-orderable horse
 * list (drag handles) then PLACE WAGER. Sits in the gap above the wager CTA.
 */
.uxc-hhr-hint {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin: 8px 12px 6px;
  padding: 0;
  font-family: "URW DIN", "Arial Narrow", Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: #c9a84a;
  white-space: normal;
}

.uxc-panel--pulse .uxc-panel-cta {
  margin-top: 0;
  border: 1px solid #ff9a3c;
  background: #14161c;
  color: #ffd77a;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.uxc-panel--pulse .uxc-panel-cta--wager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: auto;
  border: none;
  background: linear-gradient(90deg, #ff2f6e 0%, #ff9a3c 55%, #ffb04a 100%);
  color: #140a08;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}

.uxc-panel--pulse .uxc-panel-cta.is-ok {
  border-color: #ffd24a;
  color: #ffd24a;
}

.uxc-panel--pulse .uxc-panel-cta--wager.is-ok {
  border: none;
  color: #140a08;
  box-shadow: inset 0 0 0 1px rgba(255, 230, 140, 0.35);
}

.uxc-panel--pulse .uxc-panel-cta--wager.is-disabled,
.uxc-panel--pulse .uxc-panel-cta--wager:disabled {
  background: linear-gradient(180deg, #2a2e38 0%, #1a1c22 100%);
  color: #6a7080;
  text-shadow: none;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.85;
}

.uxc-panel--pulse .uxc-panel-cta--wager.is-confirming {
  background: linear-gradient(90deg, #ffd24a 0%, #ff9a3c 50%, #ff2f6e 100%);
  color: #140a08;
  -webkit-transform: scale(0.985);
  transform: scale(0.985);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.uxc-panel--pulse .uxc-panel-cta--wager.is-locked {
  background: linear-gradient(180deg, #3a3428 0%, #1c1a14 100%);
  color: #ffd77a;
  letter-spacing: 0.12em;
  box-shadow: inset 0 0 0 1px rgba(255, 210, 74, 0.35);
  cursor: default;
}

.uxc-hhr-reorder.is-locked,
.uxc-hhr-pick-row.is-wager-locked .uxc-hhr-reorder {
  opacity: 0.45;
}

.uxc-hhr-pick-row.is-wager-locked {
  opacity: 0.92;
}

/*
 * Attract = shared signage plaque (BG video + brand + JACKPOT + meter + tagline).
 * Canvas ~1218×686 (16:9 hero-video fit; was 1218×504). Content stack stays inside
 * Margin 24 safe region (BG video still edge-to-edge). Top Pulse rim via ::before
 * (cabinet stage paints the full cream+accent stack; hub uses ::before accent only).
 */
.uxc-attract--pulse {
  position: relative;
  width: 100%;
  max-width: 1218px;
  margin: 0;
  padding: 0;
  aspect-ratio: 1218 / 686;
  min-height: 220px;
  border: none;
  border-image: none;
  border-radius: 0;
  background: #08090c;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: none;
}

/* Hub / isolated stages: panel-matching top Pulse stroke only (no side rims). */
.uxc-attract--pulse::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  z-index: 40;
  pointer-events: none;
  background: #ffb04a;
}

.uxc-attract--pulse[data-ux-flavor-skin="B"]::before {
  background: linear-gradient(
    90deg,
    #f0d878 0%,
    #e8c040 35%,
    #d4a030 65%,
    #c88a28 100%
  );
}

.uxc-attract--pulse[data-ux-flavor-skin="C"]::before {
  background: linear-gradient(
    90deg,
    #fa8b1b 0%,
    #f2783a 18%,
    #e85a58 36%,
    #d03a68 54%,
    #c01850 72%,
    #a1033c 86%,
    #9f0137 100%
  );
}

/* Plaque fills canvas; content padding provides authoring safe inset (not glass dock). */
.uxc-attract--pulse > .ux-jackpot-signage {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  box-shadow: none;
}

/* Legacy attract chrome — removed from markup; keep display:none if stale DOM */
.uxc-attract-brand,
.uxc-attract-tiers,
.uxc-attract-tier,
.uxc-attract-strip {
  display: none;
}

.uxc-attract-meter {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-image: none;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

.ux-stage--overlay .uxc-attract--pulse {
  position: absolute;
  left: 0;
  bottom: 0;
  right: auto;
  top: auto;
  width: min(1218px, 100%);
  max-width: 100%;
  margin: 0;
  z-index: 2;
}

/*
 * Hub Jackpot stage: fill the shared 16:9 plate (A/B/C).
 * No 1218×504 letterbox — plaque scales to the well so meter/footer stay in view.
 */
.ux-stage--jackpot .uxc-attract--pulse {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  z-index: 2;
  margin: 0;
  min-height: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
}

.ux-stage--jackpot .uxc-attract--pulse > .ux-jackpot-signage--plaque {
  /* Match hub marquee: % padding; distribute stack so meter isn't floating mid-well */
  height: 100%;
  min-height: 0;
  padding: 3.5% 5% 3%;
  gap: 2.4%;
  font-size: clamp(12px, 5cqw, 40px);
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.ux-stage--jackpot .uxc-attract--pulse > .ux-jackpot-signage--plaque .ux-jackpot-signage__brand {
  width: var(--ux-js-brand-w);
  max-width: 70%;
  max-height: var(--ux-js-brand-max-h);
  margin: 0 auto;
}

.ux-stage--jackpot .uxc-attract--pulse > .ux-jackpot-signage--plaque .ux-jackpot-signage__logo {
  width: var(--ux-js-logo-w);
  max-width: 96%;
  max-height: var(--ux-js-logo-max-h);
  margin: 0 auto;
}

.ux-stage--jackpot .uxc-attract--pulse > .ux-jackpot-signage--plaque .ux-jackpot-signage__meter-stage {
  width: 82%;
  max-width: none;
  margin: 0 auto;
  margin-top: auto;
}

.ux-stage--jackpot .uxc-attract--pulse > .ux-jackpot-signage--plaque .ux-jackpot-signage__tagline {
  margin-top: 1.2%;
  margin-bottom: 0;
}

/* Hub marquee plaque — same fill distribution as jackpot well */
.ux-stage--marquee .uxc-marquee--signage .ux-jackpot-signage--plaque {
  height: 100%;
  min-height: 0;
  padding: 3.5% 5% 3%;
  gap: 2.4%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.ux-stage--marquee .uxc-marquee--signage .ux-jackpot-signage--plaque .ux-jackpot-signage__meter-stage {
  margin-top: auto;
  width: 82%;
}

.ux-stage--jackpot .uxc-attract--pulse[data-ux-flavor-skin="A"] > .ux-jackpot-signage--layout-hero-video,
.ux-stage--jackpot .uxc-attract--pulse[data-ux-flavor-skin="B"] > .ux-jackpot-signage--layout-hero-video,
.ux-stage--jackpot .uxc-attract--pulse[data-ux-flavor-skin="C"] > .ux-jackpot-signage--layout-hero-video {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
}

/* ==========================================================================
   .ux-jackpot-signage — plaque / compact / meter (panel · attract · marquee)
   hero-video (A/B/C): full hero video + live meter (no brand/JACKPOT plate overlays).
   pulse (legacy): BG video + UltralinX brand + JACKPOT wordmark + meter.
   A keeps flavor-a-digit-frame.png on the meter; B/C are frameless in the video well.
   ========================================================================== */

.ux-jackpot-signage {
  --ux-js-gold: #ffd24a;
  --ux-js-gold-hi: #ffe9a0;
  --ux-js-ink: #08090c;
  --ux-js-slots: 9;
  /* UltralinX sits above JACKPOT but is smaller — JACKPOT is the hero mark. */
  --ux-js-brand-w: 52%;
  --ux-js-brand-top: 4%;
  --ux-js-brand-max-h: 14%;
  --ux-js-logo-w: 86%;
  --ux-js-logo-top: 18%;
  --ux-js-logo-max-h: 32%;

  position: relative;
  isolation: isolate;
  container-type: inline-size;
  container-name: ux-js;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Meter sits in the lower cradle; brand + JACKPOT sit above. */
  justify-content: flex-end;
  width: 100%;
  max-width: 100%;
  padding: 8% 6% 8%;
  font-size: clamp(11px, 5.4cqw, 42px);
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  color: var(--ux-js-gold);
  text-align: center;
  overflow: hidden;
  /* Dark fill while video loads; animated BG is .ux-jackpot-signage__bg */
  background-color: #08090c;
  background-image: none;
}

/*
 * Shared Flavor A jackpot BG video — under logos/meter (beacon muted-loop pattern).
 * Fill entire signage box (panel / attract / marquee): pin edges + object-fit cover.
 * Crop as needed — never letterbox / contain / intrinsic undersize.
 */
.ux-jackpot-signage__bg {
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center center;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Flavor A UltralinX wordmark — smaller brand mark above dominant JACKPOT */
.ux-jackpot-signage__brand {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: var(--ux-js-brand-top);
  width: var(--ux-js-brand-w);
  max-width: 70%;
  max-height: var(--ux-js-brand-max-h);
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: center top;
  /* Transparent PNG preferred; screen knocks residual black plate on dark stages */
  -webkit-mix-blend-mode: screen;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* JACKPOT 3D wordmark — dominant mark; black knocked out via screen */
.ux-jackpot-signage__logo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: var(--ux-js-logo-top);
  width: var(--ux-js-logo-w);
  max-width: 96%;
  max-height: var(--ux-js-logo-max-h);
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: center top;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ==========================================================================
   .ux-jackpot-meter — modular digit-frame counter (shared by all 3 surfaces)
   Empty gold frame + plate-swap wells ($ + digits + punct). Used inside .ux-jackpot-signage.
   ========================================================================== */

.ux-jackpot-meter {
  --ux-jm-slots: 9;
  --ux-js-gold: #ffd24a;
  --ux-js-gold-hi: #ffe9a0;
  /* Attract-reference runway inset — shared by plaque / meter / compact */
  --ux-jm-well-left: 2.2%;
  --ux-jm-well-right: 2.4%;
  --ux-jm-well-top: 9%;
  --ux-jm-well-bottom: 9.5%;

  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 18em;
  /* Luke empty-frame (1024×217): open black runway, no baked $ */
  aspect-ratio: 1024 / 217;
  height: auto;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background-image: url("/ultralinx/assets/signage/flavor-a-digit-frame.png?v=jackpot-signage102");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  box-shadow: none;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  color: var(--ux-js-gold);
}

/* Enrolled bug — CSS typography meter (no gold frame / plate grid). */
.ux-jackpot-meter--bug {
  background-image: none !important;
}

.ux-jackpot-meter--bug.ux-jackpot-meter--text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0 1px;
  box-sizing: border-box;
  border: none;
  border-radius: 2px;
  background-color: #0e1016;
  background-image:
    linear-gradient(180deg, rgba(255, 210, 120, 0.05) 0%, transparent 40%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(90deg, #0e1016 0%, #161822 48%, #0a0b0f 100%) !important;
  box-shadow: none;
  --ux-jm-well-left: 0%;
  --ux-jm-well-right: 0%;
  --ux-jm-well-top: 0%;
  --ux-jm-well-bottom: 0%;
}

.ux-jackpot-meter--bug .ux-jackpot-meter__text {
  display: block;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #ffe7a0;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 1em;
  font-weight: 700;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  line-height: 1;
  text-align: center;
  text-indent: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

/* Hub Pulse bug mock — dark purple/black well (signage feel) */
.uxc-bug--pulse .ux-jackpot-meter--bug {
  background-image:
    linear-gradient(180deg, rgba(255, 210, 120, 0.05) 0%, transparent 40%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(90deg, #0e1016 0%, #161822 48%, #0a0b0f 100%) !important;
  background-color: #0e1016;
}

.uxc-bug--pulse .ux-jackpot-meter--text,
.uxc-bug--pulse .uxc-bug-odo .ux-jackpot-meter--text {
  /* CEF49: $250,000 (no cents) on Exacta 206×63 horizontal bug */
  font-size: 28px;
  letter-spacing: 0;
}

@supports (font-size: 1cqh) {
  .uxc-bug--pulse .ux-jackpot-meter--text,
  .uxc-bug--pulse .uxc-bug-odo .ux-jackpot-meter--text {
    font-size: clamp(20px, 48cqh, 34px);
  }
}

.uxc-bug--pulse .ux-jackpot-meter--bug .ux-jackpot-meter__text {
  letter-spacing: 0;
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
}

.ux-jackpot-meter::before,
.ux-jackpot-meter::after {
  content: none;
  display: none;
}

/* Legacy currency slot — $ is now a runway plate (flavor-a-digit-dollar.png) */
.ux-jackpot-signage__currency {
  display: none;
}

/*
 * Open-runway plate row inside empty frame (1024×217).
 * Remeasured dark well ≈ x 13–1005, y 12–203
 * → left 1.27% / right 1.76% / top 5.53% / bottom 5.99%.
 * Order: $ plate + leading empty digit wells + amount + narrow punct.
 * Dividers are flex siblings under plates (z-index).
 */
.ux-jackpot-meter__cells {
  position: absolute;
  z-index: 1;
  left: var(--ux-jm-well-left, 1.27%);
  right: var(--ux-jm-well-right, 1.76%);
  top: var(--ux-jm-well-top, 5.53%);
  bottom: var(--ux-jm-well-bottom, 5.99%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
}

/*
 * Dark translucent plate-gap rules — between wells (including after $).
 * Sit under digit/punct plates (cell z-index > divider).
 */
.ux-jackpot-meter__divider {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 2px;
  flex: 0 0 2px;
  position: relative;
  z-index: 0;
  width: 2px;
  min-width: 2px;
  max-width: 2px;
  height: 100%;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: none;
  pointer-events: none;
}

.ux-jackpot-meter__cell {
  /* Equal share of runway — digit + leading empty wells */
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100%;
  width: auto;
  min-width: 0;
  overflow: hidden;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.92em;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ux-js-gold-hi);
  text-shadow: none;
}

/* Unused leading wells — dark plate read, no digit img */
.ux-jackpot-meter__cell.is-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: rgba(0, 0, 0, 0.28);
  font-size: 0;
  color: transparent;
}

/*
 * Luke's 103×200 plates ($ / 0–9 / comma / period) — contain inside each flex cell.
 * Comma/period baselines are baked into their plate canvases (is-comma / is-period).
 */
.ux-jackpot-meter__plate {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.ux-jackpot-meter__cell.has-plate {
  font-size: 0;
  color: transparent;
  background: transparent;
}

/*
 * Odometer digit roll — stacked out/in plates, translateY up (CEF49: transform only).
 * Strip is 200% cell height; is-active shifts by -50% so incoming rises from below.
 */
.ux-jackpot-meter__roll {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 200%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}

.ux-jackpot-meter__roll.is-active {
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.ux-jackpot-meter__roll .ux-jackpot-meter__plate {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  width: 100%;
  height: 50%;
  max-width: 100%;
  max-height: 50%;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center center;
  object-position: center center;
}

/*
 * plateWashHtml wraps each plate — roll flex children are .plate-wash, not .plate.
 * Plates inside a wash must fill the wash (100%), not inherit the old 50% flex rule
 * (that nested to ~25% cell height and made rolling cents look crushed).
 */
.ux-jackpot-meter__roll .ux-jackpot-meter__plate-wash {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  width: 100%;
  height: 50%;
  max-width: 100%;
  max-height: 50%;
}

.ux-jackpot-meter__roll .ux-jackpot-meter__plate-wash .ux-jackpot-meter__plate {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.ux-jackpot-meter__cell.is-rolling {
  overflow: hidden;
}

/* $ plate — same flex share as a digit well (not narrow punct) */
.ux-jackpot-meter__cell.is-dollar {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  background: transparent;
}

/*
 * Punct: narrow bay between digit wells. Plates are 103×200 like digits — size by
 * HEIGHT (not width-contain) so glyphs match digit optical height, then sit on the
 * runway baseline (not floated/centered mid-cell).
 */
.ux-jackpot-meter__cell.is-comma,
.ux-jackpot-meter__cell.is-period,
.ux-jackpot-meter__cell.is-sep {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 5.75%;
  flex: 0 0 5.75%;
  width: 5.75%;
  max-width: 5.75%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  margin-left: 0;
  margin-right: 0;
  background: transparent;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.ux-jackpot-meter__cell.is-comma .ux-jackpot-meter__plate,
.ux-jackpot-meter__cell.is-period .ux-jackpot-meter__plate,
.ux-jackpot-meter__cell.is-sep .ux-jackpot-meter__plate {
  /* Height-match digit plates; width follows aspect (sides may clip in narrow bay) */
  width: auto;
  height: 100%;
  max-width: none;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center bottom;
  object-position: center bottom;
}

.ux-jackpot-meter__cell.is-comma .ux-jackpot-meter__plate-wash,
.ux-jackpot-meter__cell.is-period .ux-jackpot-meter__plate-wash,
.ux-jackpot-meter__cell.is-sep .ux-jackpot-meter__plate-wash {
  width: auto;
  height: 100%;
  max-width: none;
  max-height: 100%;
}

/*
 * Flavor A under-meter gold line — qualify / tagline type (e.g. BET $5.00 TO QUALIFY…):
 * wide/thin geometric sans (URW DIN), moderate tracking, single metallic gradient fill.
 * No stacked drop-shadow bevel (that read as double-stroke / double font).
 * Used by signage tagline, panel YOU BET line, attract strip.
 */
.ux-jackpot-gold-line,
.ux-jackpot-signage__tagline,
.uxc-panel--pulse .uxc-panel-bet {
  font-family: "URW DIN", "Arial Narrow", Arial, Helvetica, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  /* Solid fallback when clip/fill unsupported */
  color: #e0b84a;
  background-image: -webkit-linear-gradient(
    top,
    #fff6c8 0%,
    #ffe9a0 22%,
    #e8c056 55%,
    #b8872e 100%
  );
  background-image: linear-gradient(
    to bottom,
    #fff6c8 0%,
    #ffe9a0 22%,
    #e8c056 55%,
    #b8872e 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Single soft edge — not dual outline */
  -webkit-filter: drop-shadow(0 1px 0 rgba(40, 22, 0, 0.55));
  filter: drop-shadow(0 1px 0 rgba(40, 22, 0, 0.55));
}

/* Cancel tracking inflation around , and . (see formatGoldLine). */
.ux-jackpot-gold-punct {
  display: inline-block;
  letter-spacing: 0;
  margin-left: -0.14em;
  margin-right: -0.1em;
}

/* Marquee / plaque — wide tracking for short progressive line */
.ux-jackpot-signage__tagline {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0;
  max-width: 100%;
  font-size: 0.38em;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

/* Panel under-meter line — slightly tighter tracking; punctuation spans tighten , . */
.uxc-panel--pulse .uxc-panel-bet {
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  white-space: nowrap;
}

/* Need-more-bet cue — solid color so CEF49 can animate gold ↔ red */
@-webkit-keyframes uxc-bet-need-flash {
  0%,
  100% {
    color: #e0b84a;
  }
  50% {
    color: #ff2a2a;
  }
}
@keyframes uxc-bet-need-flash {
  0%,
  100% {
    color: #e0b84a;
  }
  50% {
    color: #ff2a2a;
  }
}

.uxc-panel--pulse .uxc-panel-bet.is-need {
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #e0b84a;
  color: #e0b84a;
  -webkit-filter: none;
  filter: none;
  -webkit-animation: uxc-bet-need-flash 1.1s ease-in-out infinite;
  animation: uxc-bet-need-flash 1.1s ease-in-out infinite;
}

/* Sync slot count from parent signage when nested */
.ux-jackpot-signage .ux-jackpot-meter {
  --ux-jm-slots: var(--ux-js-slots, 9);
}

/*
 * Coming-soon hold — gold label over the meter stage; tick stays alive under a soft dim.
 * Shared by plaque / compact / meter (panel · attract · marquee).
 */
.ux-jackpot-signage__meter-stage {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  overflow: hidden;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.ux-jackpot-signage__meter-stage .ux-jackpot-meter {
  width: 100%;
  margin: 0;
}

/*
 * Full plaque — marquee / attract / TV (landscape wells).
 * IN-FLOW column owns the canvas: brand → JACKPOT → meter → tagline.
 * Logos use the horizontal air (not a tiny centered island); JACKPOT > UltralinX.
 */
.ux-jackpot-signage--plaque,
.ux-jackpot-signage--meter {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  /* Extra air after JACKPOT before the gold frame */
  gap: 3.6%;
  min-height: 100%;
  /* Tighter side pad so marks can breathe wide; keep modest vertical inset */
  padding: 4% 5.5% 3.5%;
  box-sizing: border-box;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.ux-jackpot-signage--meter {
  box-shadow: none;
  font-size: clamp(14px, 6.2cqw, 48px);
  overflow: hidden;
}

/* Pull brand + JACKPOT out of absolute layer so they participate in the column */
.ux-jackpot-signage--plaque .ux-jackpot-signage__brand,
.ux-jackpot-signage--meter .ux-jackpot-signage__brand,
.ux-jackpot-signage--plaque .ux-jackpot-signage__logo,
.ux-jackpot-signage--meter .ux-jackpot-signage__logo {
  position: relative;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  -webkit-transform: none;
  transform: none;
  display: block;
  margin: 0 auto;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.ux-jackpot-signage--plaque .ux-jackpot-signage__brand,
.ux-jackpot-signage--meter .ux-jackpot-signage__brand {
  width: 52%;
  max-width: 720px;
  max-height: 14%;
  object-position: center center;
}

.ux-jackpot-signage--plaque .ux-jackpot-signage__logo,
.ux-jackpot-signage--meter .ux-jackpot-signage__logo {
  width: 88%;
  max-width: 1180px;
  max-height: 30%;
  object-position: center center;
  /* Extra pad between JACKPOT wordmark and gold frame */
  margin-bottom: 2.4%;
}

/* Meter stage widened with the stack — still inset from bezel */
.ux-jackpot-signage--plaque .ux-jackpot-signage__meter-stage,
.ux-jackpot-signage--meter .ux-jackpot-signage__meter-stage {
  width: 78%;
  max-width: none;
  height: auto;
  margin: 0 auto;
}

/* Wells inherit shared --ux-jm-well-* on .ux-jackpot-meter (attract recipe). */

.ux-jackpot-signage--plaque .ux-jackpot-signage__tagline,
.ux-jackpot-signage--meter .ux-jackpot-signage__tagline {
  /* Vertically center between meter bottom and plaque bottom edge */
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 96%;
  font-size: 0.52em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  opacity: 1;
  white-space: nowrap;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

/* Panel banner — same in-flow stack + meter recipe as attract/plaque. */
.ux-jackpot-signage--compact {
  --ux-js-brand-w: 38%;
  --ux-js-brand-top: 1.2%;
  --ux-js-brand-max-h: 11%;
  --ux-js-logo-w: 76%;
  --ux-js-logo-top: 11%;
  --ux-js-logo-max-h: 30%;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  aspect-ratio: 16 / 8.6;
  width: 100%;
  min-width: 100%;
  max-width: none;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 3.2%;
  /* Content inset only — absolute __bg still pins to box edges */
  padding: 2.5% 4% 2.8%;
  font-size: clamp(11px, 6.6cqw, 22px);
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
}

/* Compact joins the in-flow column (same as plaque) so meter proportions match. */
.ux-jackpot-signage--compact .ux-jackpot-signage__brand,
.ux-jackpot-signage--compact .ux-jackpot-signage__logo {
  position: relative;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  -webkit-transform: none;
  transform: none;
  display: block;
  margin: 0 auto;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.ux-jackpot-signage--compact .ux-jackpot-signage__brand {
  width: 42%;
  max-width: 280px;
  max-height: 14%;
}

.ux-jackpot-signage--compact .ux-jackpot-signage__logo {
  width: 78%;
  max-width: 520px;
  max-height: 28%;
  margin-bottom: 2.8%;
}

.ux-jackpot-signage--compact .ux-jackpot-signage__meter-stage {
  width: 78%;
  max-width: none;
  margin: 0 auto;
}

.ux-jackpot-signage--compact .ux-jackpot-signage__tagline {
  display: block;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 94%;
  font-size: 0.4em;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  opacity: 1;
}

/*
 * Attract 1218×686 — stack owns the canvas (Margin ~24 = light content pad only).
 * Bigger UltralinX + JACKPOT + meter; JACKPOT remains the hero mark.
 */
.uxc-attract--pulse .uxc-attract-meter .ux-jackpot-signage,
.uxc-attract--pulse > .ux-jackpot-signage--plaque {
  width: 100%;
  height: 100%;
  box-shadow: none;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 12px;
  padding: 22px 36px 18px;
  box-sizing: border-box;
  font-size: clamp(12px, 4.8cqw, 42px);
  overflow: hidden;
}

.uxc-attract--pulse > .ux-jackpot-signage--plaque .ux-jackpot-signage__brand,
.uxc-attract--pulse .uxc-attract-meter .ux-jackpot-signage .ux-jackpot-signage__brand {
  width: 48%;
  max-width: 560px;
  max-height: 64px;
  margin: 0 auto;
}

.uxc-attract--pulse > .ux-jackpot-signage--plaque .ux-jackpot-signage__logo,
.uxc-attract--pulse .uxc-attract-meter .ux-jackpot-signage .ux-jackpot-signage__logo {
  width: 86%;
  max-width: 980px;
  max-height: 148px;
  margin: 0 auto 14px;
}

.uxc-attract--pulse > .ux-jackpot-signage--plaque .ux-jackpot-signage__meter-stage,
.uxc-attract--pulse .uxc-attract-meter .ux-jackpot-signage .ux-jackpot-signage__meter-stage {
  width: 78%;
  max-width: 920px;
  margin: 0 auto;
}

.uxc-attract--pulse .ux-jackpot-signage__tagline {
  display: block;
  max-width: 920px;
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  opacity: 1;
}

/* ==========================================================================
   Flavor B/C — full GPT Image hero (1920×1080). Not Pulse layers.
   Hero image is the layout; live meter sits in the blank gold-rim strip.
   ========================================================================== */
.ux-jackpot-signage--layout-hero.ux-jackpot-signage--plaque,
.ux-jackpot-signage--layout-hero.ux-jackpot-signage--meter,
.uxc-attract--pulse > .ux-jackpot-signage--layout-hero,
.ux-cab-marquee-face--signage .ux-jackpot-signage--layout-hero {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  background: #000;
}

.ux-jackpot-signage--layout-hero .ux-jackpot-signage__hero {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.ux-jackpot-signage--layout-hero .ux-jackpot-signage__meter-stage {
  position: absolute;
  left: 50%;
  bottom: 11%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 62%;
  max-width: 920px;
  z-index: 2;
  margin: 0;
}

/* Flavor B / C — hero-video attract; live digits only in the blank meter well.
   Keep a true 16:9 plate so % meter insets stay locked to the video art
   at every display size (attract / TV / compact / panel).
   Shared insets 12.9/9.7/55.2/15.0 are B-approved; C overrides below. */
.ux-jackpot-signage--layout-hero-video.ux-jackpot-signage--plaque,
.ux-jackpot-signage--layout-hero-video.ux-jackpot-signage--meter,
.ux-jackpot-signage--layout-hero-video.ux-jackpot-signage--compact,
.uxc-attract--pulse > .ux-jackpot-signage--layout-hero-video,
.ux-cab-marquee-face--signage .ux-jackpot-signage--layout-hero-video {
  position: relative;
  display: block;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #000;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.ux-jackpot-signage--layout-hero-video .ux-jackpot-signage__hero {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* contain = full Luke frame (logo + well) never cropped when parent is 16:9 */
  object-fit: contain;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

/* Blank gold well — nudged to sit inside the rim; digits fill the bay */
.ux-jackpot-signage--layout-hero-video .ux-jackpot-signage__meter-stage {
  position: absolute;
  left: 12.9%;
  right: 9.7%;
  top: 55.2%;
  bottom: 15.0%;
  width: auto;
  height: auto;
  max-width: none;
  -webkit-transform: none;
  transform: none;
  z-index: 2;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  box-sizing: border-box;
}

/* B/C: frameless digits in the baked video well. A keeps Luke digit-frame (below). */
[data-ux-flavor-skin="B"].ux-jackpot-signage--layout-hero-video .ux-jackpot-signage__meter-stage .ux-jackpot-meter,
[data-ux-flavor-skin="C"].ux-jackpot-signage--layout-hero-video .ux-jackpot-signage__meter-stage .ux-jackpot-meter {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none !important;
  aspect-ratio: auto !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  /* Inner pad clears gold bulbs / chevrons; keep digits inside the bay after
     leading empty wells are hidden (they no longer steal flex space). */
  --ux-jm-well-left: 6%;
  --ux-jm-well-right: 6%;
  --ux-jm-well-top: 11%;
  --ux-jm-well-bottom: 11%;
}

/*
 * Flavor A hero-video — keep digit-frame chrome over the lower cradle.
 * Brand/JACKPOT are baked into the hero video (no plate overlays).
 */
[data-ux-flavor-skin="A"].ux-jackpot-signage--layout-hero-video .ux-jackpot-signage__meter-stage,
[data-ux-flavor-skin="A"].ux-jackpot-signage--layout-hero-video.ux-jackpot-signage--compact .ux-jackpot-signage__meter-stage,
.uxc-attract--pulse > [data-ux-flavor-skin="A"].ux-jackpot-signage--layout-hero-video .ux-jackpot-signage__meter-stage,
.uxc-attract--pulse .uxc-attract-meter [data-ux-flavor-skin="A"].ux-jackpot-signage--layout-hero-video .ux-jackpot-signage__meter-stage,
.uxc-marquee--signage [data-ux-flavor-skin="A"].ux-jackpot-signage--layout-hero-video .ux-jackpot-signage__meter-stage {
  left: 11% !important;
  right: 11% !important;
  top: 62% !important;
  bottom: 12% !important;
}

[data-ux-flavor-skin="A"].ux-jackpot-signage--layout-hero-video .ux-jackpot-signage__meter-stage .ux-jackpot-meter {
  position: relative;
  width: 100%;
  height: auto;
  max-width: none !important;
  max-height: 100%;
  aspect-ratio: 1024 / 217 !important;
  background-color: transparent !important;
  background-image: url("/ultralinx/assets/signage/flavor-a-digit-frame.png?v=jackpot-signage102") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  border: 0 !important;
  box-shadow: none !important;
  /* Attract-recipe runway insets inside the frame */
  --ux-jm-well-left: 2.2%;
  --ux-jm-well-right: 2.4%;
  --ux-jm-well-top: 9%;
  --ux-jm-well-bottom: 9.5%;
}

/* Stretch like Flavor A — center was shrinking cells and unevenly clipping plates. */
.ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__cells {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/*
 * Natural 103×200 wells (not flex-grow fill). Equal optical size; group stays
 * centered so end digits don't crash into Luke's decorative rim jewels.
 */
.ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__cell.has-plate:not(.is-comma):not(.is-period):not(.is-sep) {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  max-height: 100%;
  aspect-ratio: 103 / 200;
}

.ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__cell,
.ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__plate {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* C wash keeps its gradient; do not let the transparent shorthand wipe it. */
[data-ux-flavor-skin="C"].ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__plate-wash {
  background: -webkit-linear-gradient(top, #fa8b1b 0%, #f2783a 22%, #e05648 48%, #c02848 74%, #a1033c 100%) !important;
  background: linear-gradient(180deg, #fa8b1b 0%, #f2783a 22%, #e05648 48%, #c02848 74%, #a1033c 100%) !important;
}

/*
 * Uniform optical size (match Flavor A): fill the cell, contain the 103×200 plate.
 * Prior width:auto + height:100% overflow-clipped wider glyphs (0/2/$) and
 * compressed cents when the runway was crowded.
 */
.ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__plate-wash,
.ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__plate {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center center;
  object-position: center center;
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
}

/* Keep odometer roll geometry when hero-video forces wash/plate to 100%. */
.ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__roll .ux-jackpot-meter__plate-wash {
  width: 100%;
  height: 50%;
  max-width: 100%;
  max-height: 50%;
}

.ux-jackpot-signage--layout-hero-video
  .ux-jackpot-meter__roll
  .ux-jackpot-meter__plate-wash
  .ux-jackpot-meter__plate {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* Punct keeps height-matched bay sizing (narrow flex); wash follows plate. */
.ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__cell.is-comma .ux-jackpot-meter__plate-wash,
.ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__cell.is-period .ux-jackpot-meter__plate-wash,
.ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__cell.is-sep .ux-jackpot-meter__plate-wash,
.ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__cell.is-comma .ux-jackpot-meter__plate,
.ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__cell.is-period .ux-jackpot-meter__plate,
.ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__cell.is-sep .ux-jackpot-meter__plate {
  width: auto;
  height: 100%;
  max-width: none;
  max-height: 100%;
  -o-object-position: center bottom;
  object-position: center bottom;
}

/*
 * Flavor B hero-video plates — light gold tint only.
 * No soft bloom drop-shadows (those read as $ orange glow + uneven weight).
 * Thin 1px bottom bevel kept on digits; $ is color-only (no bevel bloom).
 */
[data-ux-flavor-skin="B"].ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__plate {
  -webkit-filter:
    sepia(0.22)
    saturate(1.45)
    hue-rotate(-10deg)
    brightness(1.02)
    contrast(1.08);
  filter:
    sepia(0.22)
    saturate(1.45)
    hue-rotate(-10deg)
    brightness(1.02)
    contrast(1.08);
}

[data-ux-flavor-skin="B"].ux-jackpot-signage--layout-hero-video
  .ux-jackpot-meter__cell.is-dollar
  .ux-jackpot-meter__plate {
  /* No color filter — Luke $ plate already has a soft outer fringe; filters bloom it. */
  -webkit-filter: none !important;
  filter: none !important;
}

.ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__divider {
  display: none !important;
}

/* Hero-video has no gold odometer frame — leading empty wells only steal flex
   space and make live digits / cents look undersized vs the blank bay. */
.ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__cell.is-empty {
  display: none !important;
}

/* Compact used to inherit Flavor A Pulse 16/8.x + padded stack; that skews
   % well coords. Keep the same plaque insets once the plate is locked 16:9. */
.ux-jackpot-signage--layout-hero-video.ux-jackpot-signage--compact .ux-jackpot-signage__meter-stage {
  left: 12.9%;
  right: 9.7%;
  top: 55.2%;
  bottom: 15.0%;
  width: auto;
  height: auto;
  max-width: none;
  margin: 0;
}

/*
 * Flavor C hero-video — exact Luke insets (14.5 / 15.1 / 55.2 / 17.4).
 * !important beats attract/plaque Pulse width:78% + margin:auto leftovers.
 * B stays on shared 12.9 / 9.7 / 55.2 / 15.0 above.
 */
[data-ux-flavor-skin="C"].ux-jackpot-signage--layout-hero-video .ux-jackpot-signage__meter-stage,
[data-ux-flavor-skin="C"].ux-jackpot-signage--layout-hero-video.ux-jackpot-signage--compact .ux-jackpot-signage__meter-stage,
.uxc-attract--pulse > [data-ux-flavor-skin="C"].ux-jackpot-signage--layout-hero-video .ux-jackpot-signage__meter-stage,
.uxc-attract--pulse .uxc-attract-meter [data-ux-flavor-skin="C"].ux-jackpot-signage--layout-hero-video .ux-jackpot-signage__meter-stage,
.uxc-marquee--signage [data-ux-flavor-skin="C"].ux-jackpot-signage--layout-hero-video .ux-jackpot-signage__meter-stage {
  left: 14.5% !important;
  right: 15.1% !important;
  top: 55.2% !important;
  bottom: 17.4% !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-transform: none !important;
  transform: none !important;
}

/*
 * Flavor C hero-video plates — Luke ticker wash (vertical):
 * top #fa8b1b → bottom #a1033c via masked .plate-wash (B gold imgs untouched).
 * No CSS filter/drop-shadow on washes — those alias hard at attract scale and
 * re-bloom the baked $ fringe. Soft AA comes from the plate alpha alone.
 */
.ux-jackpot-meter__plate-wash {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.ux-jackpot-meter__roll .ux-jackpot-meter__plate-wash {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  width: 100%;
  height: 50%;
  max-width: 100%;
  max-height: 50%;
}

[data-ux-flavor-skin="C"].ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__plate-wash {
  background: -webkit-linear-gradient(top, #fa8b1b 0%, #f2783a 22%, #e05648 48%, #c02848 74%, #a1033c 100%) !important;
  background: linear-gradient(180deg, #fa8b1b 0%, #f2783a 22%, #e05648 48%, #c02848 74%, #a1033c 100%) !important;
  -webkit-filter: none !important;
  filter: none !important;
}

[data-ux-flavor-skin="C"].ux-jackpot-signage--layout-hero-video .ux-jackpot-meter__plate {
  opacity: 0 !important;
  -webkit-filter: none !important;
  filter: none !important;
}

/* C $ — clip Luke plate's baked soft outer fringe (no glow filter). */
[data-ux-flavor-skin="C"].ux-jackpot-signage--layout-hero-video
  .ux-jackpot-meter__cell.is-dollar {
  overflow: hidden;
}

[data-ux-flavor-skin="C"].ux-jackpot-signage--layout-hero-video
  .ux-jackpot-meter__cell.is-dollar
  .ux-jackpot-meter__plate-wash {
  -webkit-filter: none !important;
  filter: none !important;
  -webkit-mask-size: 86% !important;
  mask-size: 86% !important;
}

/* B $ — slight optical shrink (Luke $ glyph reads heavy vs digits). */
[data-ux-flavor-skin="B"].ux-jackpot-signage--layout-hero-video
  .ux-jackpot-meter__cell.is-dollar {
  overflow: hidden;
}

[data-ux-flavor-skin="B"].ux-jackpot-signage--layout-hero-video
  .ux-jackpot-meter__cell.is-dollar
  .ux-jackpot-meter__plate-wash {
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
}

.ux-jackpot-signage--layout-hero-video .ux-jackpot-signage__bg,
.ux-jackpot-signage--layout-hero-video .ux-jackpot-signage__brand,
.ux-jackpot-signage--layout-hero-video .ux-jackpot-signage__logo,
.ux-jackpot-signage--layout-hero-video .ux-jackpot-signage__tagline {
  display: none !important;
}

.ux-jackpot-signage--layout-hero[data-ux-flavor-skin="C"] .ux-jackpot-signage__meter-stage {
  bottom: 28%;
  width: 48%;
  max-width: 720px;
}

.ux-jackpot-signage--layout-hero .ux-jackpot-signage__tagline {
  position: absolute;
  left: 50%;
  bottom: 3.5%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 80%;
  z-index: 2;
  margin: 0;
  text-align: center;
  font-size: clamp(10px, 1.4vw, 16px);
  letter-spacing: 0.14em;
}

.ux-jackpot-signage--layout-hero.ux-jackpot-signage--compact .ux-jackpot-signage__meter-stage {
  bottom: 18%;
  width: 70%;
  left: 50%;
}

.ux-jackpot-signage--layout-hero.ux-jackpot-signage--compact .ux-jackpot-signage__tagline {
  display: none;
}

/* Hide Pulse-only layers if any leak into hero markup */
.ux-jackpot-signage--layout-hero .ux-jackpot-signage__bg,
.ux-jackpot-signage--layout-hero .ux-jackpot-signage__brand,
.ux-jackpot-signage--layout-hero .ux-jackpot-signage__logo {
  display: none !important;
}

/* ==========================================================================
   Legacy Noir Mirror / Chandelier Night layouts — unused (B/C use hero renders).
   Kept so old markup with --layout-noir-mirror / --layout-chandelier still paints.
   ========================================================================== */
.ux-jackpot-signage--layout-noir-mirror.ux-jackpot-signage--plaque,
.ux-jackpot-signage--layout-noir-mirror.ux-jackpot-signage--meter,
.uxc-attract--pulse > .ux-jackpot-signage--layout-noir-mirror,
.ux-cab-marquee-face--signage .ux-jackpot-signage--layout-noir-mirror {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  gap: 2.2%;
  padding: 5.5% 7% 4.5%;
  /* Inset black-mirror card frame */
  box-shadow:
    inset 0 0 0 1px rgba(200, 210, 230, 0.22),
    inset 0 0 0 3px rgba(8, 10, 14, 0.85),
    0 12px 36px rgba(0, 0, 0, 0.55);
}

.ux-jackpot-signage--layout-noir-mirror .ux-jackpot-signage__brand {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
  width: 38%;
  max-width: 420px;
  max-height: 12%;
  margin: 0 auto 0 0;
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
  object-position: left center;
}

.ux-jackpot-signage--layout-noir-mirror .ux-jackpot-signage__meter-stage {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  width: 92%;
  max-width: none;
  margin: 2% 0 0;
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
}

.ux-jackpot-signage--layout-noir-mirror .ux-jackpot-signage__logo {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  width: 72%;
  max-width: 860px;
  max-height: 26%;
  margin: 1% 0 0 auto;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  object-position: right center;
}

.ux-jackpot-signage--layout-noir-mirror .ux-jackpot-signage__tagline {
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
  order: 3;
  margin-top: auto;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: auto;
  max-width: 88%;
  font-size: 0.55em;
  letter-spacing: 0.16em;
  text-align: left;
  color: #e8d9b0;
}

.uxc-attract--pulse > .ux-jackpot-signage--layout-noir-mirror .ux-jackpot-signage__brand,
.uxc-attract--pulse .uxc-attract-meter .ux-jackpot-signage--layout-noir-mirror .ux-jackpot-signage__brand {
  width: 36%;
  max-width: 400px;
  max-height: 56px;
  margin: 0 auto 0 0;
}

.uxc-attract--pulse > .ux-jackpot-signage--layout-noir-mirror .ux-jackpot-signage__logo,
.uxc-attract--pulse .uxc-attract-meter .ux-jackpot-signage--layout-noir-mirror .ux-jackpot-signage__logo {
  width: 70%;
  max-width: 820px;
  max-height: 120px;
  margin: 8px 0 0 auto;
}

.uxc-attract--pulse > .ux-jackpot-signage--layout-noir-mirror .ux-jackpot-signage__meter-stage,
.uxc-attract--pulse .uxc-attract-meter .ux-jackpot-signage--layout-noir-mirror .ux-jackpot-signage__meter-stage {
  width: 94%;
  max-width: none;
  margin: 10px 0 0;
}

/* Compact panel banner — Noir: meter-forward, brand left */
.ux-jackpot-signage--layout-noir-mirror.ux-jackpot-signage--compact {
  gap: 2%;
  padding: 2.4% 4% 2.6%;
  box-shadow: inset 0 0 0 1px rgba(200, 210, 230, 0.18);
}

.ux-jackpot-signage--layout-noir-mirror.ux-jackpot-signage--compact .ux-jackpot-signage__brand {
  width: 42%;
  max-height: 18%;
  margin: 0 auto 0 0;
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.ux-jackpot-signage--layout-noir-mirror.ux-jackpot-signage--compact .ux-jackpot-signage__meter-stage {
  width: 94%;
  margin: 0;
}

.ux-jackpot-signage--layout-noir-mirror.ux-jackpot-signage--compact .ux-jackpot-signage__logo {
  width: 68%;
  max-height: 28%;
  margin: 0 0 0 auto;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

/* ==========================================================================
   Flavor C · Chandelier Night — floating expanse, brand top-right, airy stack
   ========================================================================== */
.ux-jackpot-signage--layout-chandelier.ux-jackpot-signage--plaque,
.ux-jackpot-signage--layout-chandelier.ux-jackpot-signage--meter,
.uxc-attract--pulse > .ux-jackpot-signage--layout-chandelier,
.ux-cab-marquee-face--signage .ux-jackpot-signage--layout-chandelier {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 4.8%;
  padding: 6% 10% 5%;
  box-shadow: none;
}

.ux-jackpot-signage--layout-chandelier .ux-jackpot-signage__brand {
  width: 28%;
  max-width: 360px;
  max-height: 10%;
  margin: 0 0 0 auto;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  object-position: right center;
}

.ux-jackpot-signage--layout-chandelier .ux-jackpot-signage__logo {
  width: 78%;
  max-width: 1040px;
  max-height: 34%;
  margin: 2% auto 0;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.ux-jackpot-signage--layout-chandelier .ux-jackpot-signage__meter-stage {
  width: 62%;
  max-width: 720px;
  margin: 3% auto 0;
}

.ux-jackpot-signage--layout-chandelier .ux-jackpot-signage__tagline {
  margin-top: 2%;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 70%;
  font-size: 0.52em;
  letter-spacing: 0.2em;
  text-align: center;
  color: #f0d4a8;
  opacity: 0.95;
}

.uxc-attract--pulse > .ux-jackpot-signage--layout-chandelier .ux-jackpot-signage__brand,
.uxc-attract--pulse .uxc-attract-meter .ux-jackpot-signage--layout-chandelier .ux-jackpot-signage__brand {
  width: 30%;
  max-width: 340px;
  max-height: 52px;
  margin: 0 0 0 auto;
}

.uxc-attract--pulse > .ux-jackpot-signage--layout-chandelier .ux-jackpot-signage__logo,
.uxc-attract--pulse .uxc-attract-meter .ux-jackpot-signage--layout-chandelier .ux-jackpot-signage__logo {
  width: 82%;
  max-width: 960px;
  max-height: 150px;
  margin: 12px auto 0;
}

.uxc-attract--pulse > .ux-jackpot-signage--layout-chandelier .ux-jackpot-signage__meter-stage,
.uxc-attract--pulse .uxc-attract-meter .ux-jackpot-signage--layout-chandelier .ux-jackpot-signage__meter-stage {
  width: 64%;
  max-width: 700px;
  margin: 16px auto 0;
}

.ux-jackpot-signage--layout-chandelier.ux-jackpot-signage--compact {
  gap: 3.2%;
  padding: 3% 6% 3.2%;
}

.ux-jackpot-signage--layout-chandelier.ux-jackpot-signage--compact .ux-jackpot-signage__brand {
  width: 32%;
  max-height: 16%;
  margin: 0 0 0 auto;
}

.ux-jackpot-signage--layout-chandelier.ux-jackpot-signage--compact .ux-jackpot-signage__logo {
  width: 80%;
  max-height: 34%;
  margin: 0 auto;
}

.ux-jackpot-signage--layout-chandelier.ux-jackpot-signage--compact .ux-jackpot-signage__meter-stage {
  width: 70%;
  margin: 0 auto;
}

/* Smooth upscale of digit plates on large faces (never nearest-neighbor) */
.ux-jackpot-signage--plaque .ux-jackpot-meter__plate,
.ux-jackpot-signage--meter .ux-jackpot-meter__plate,
.ux-cab-marquee-face--signage .ux-jackpot-meter__plate {
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
}

/*
 * Expanded panel only — hide signage tagline (qualify copy lives in .uxc-panel-qual).
 * Attract / marquee / plaque keep the tagline.
 */
.uxc-panel--pulse .ux-jackpot-signage__tagline,
.uxc-panel--pulse .ux-jackpot-signage--compact .ux-jackpot-signage__tagline {
  display: none !important;
}

/* Panel banner host — edge-to-edge Flavor A video; enlarge brand/JACKPOT/meter.
 * Attract fills the banner; ticker overlays — do not reserve bottom margin. */
.uxc-panel--pulse .uxc-panel-banner .ux-jackpot-signage--compact {
  margin: 0;
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 8.2;
  gap: 2%;
  padding: 2% 3% 2.2%;
}

.uxc-panel--pulse .uxc-panel-banner .ux-jackpot-signage--compact .ux-jackpot-signage__brand {
  width: 48%;
  max-width: 320px;
  max-height: 16%;
}

.uxc-panel--pulse .uxc-panel-banner .ux-jackpot-signage--compact .ux-jackpot-signage__logo {
  width: 88%;
  max-width: 560px;
  max-height: 34%;
  margin-bottom: 1.5%;
}

.uxc-panel--pulse .uxc-panel-banner .ux-jackpot-signage--compact .ux-jackpot-signage__meter-stage {
  width: 92%;
  max-width: none;
}

/*
 * Flavor B panel banner — do not reuse Pulse compact 16/8.2 + width:92%.
 * Hero-video % insets are authored against a true 16:9 Luke plate (same as plaque).
 */
.uxc-panel--pulse .uxc-panel-banner > .ux-jackpot-signage--layout-hero-video.ux-jackpot-signage--compact,
.uxc-panel--pulse .uxc-panel-banner .ux-jackpot-signage--layout-hero-video.ux-jackpot-signage--compact {
  aspect-ratio: 16 / 9;
  padding: 0;
  gap: 0;
  display: block;
  position: relative;
  overflow: hidden;
  background: #000;
  height: auto;
  min-height: 0;
}

.uxc-panel--pulse .uxc-panel-banner .ux-jackpot-signage--layout-hero-video.ux-jackpot-signage--compact .ux-jackpot-signage__hero {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

.uxc-panel--pulse .uxc-panel-banner .ux-jackpot-signage--layout-hero-video.ux-jackpot-signage--compact .ux-jackpot-signage__meter-stage {
  left: 12.9%;
  right: 9.7%;
  top: 55.2%;
  bottom: 15.0%;
  width: auto;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  -webkit-transform: none;
  transform: none;
}

/* Flavor C panel banner — same Luke C insets on locked 16:9 plate */
.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-panel-banner .ux-jackpot-signage--layout-hero-video.ux-jackpot-signage--compact .ux-jackpot-signage__meter-stage,
.uxc-panel--pulse .uxc-panel-banner > [data-ux-flavor-skin="C"].ux-jackpot-signage--layout-hero-video.ux-jackpot-signage--compact .ux-jackpot-signage__meter-stage,
.uxc-panel--pulse .uxc-panel-banner [data-ux-flavor-skin="C"].ux-jackpot-signage--layout-hero-video.ux-jackpot-signage--compact .ux-jackpot-signage__meter-stage {
  left: 14.5% !important;
  right: 15.1% !important;
  top: 55.2% !important;
  bottom: 17.4% !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-transform: none !important;
  transform: none !important;
}

/*
 * Flavor A panel banner only — lift gold digit-frame off the racebar and tighten
 * air under baked JACKPOT. Qual ticker pins to banner bottom (against STATS·RACE).
 * Attract / marquee / Hub plaques stay at A cradle insets (top 62% / bottom 12%).
 */
.uxc-panel--pulse[data-ux-flavor-skin="A"] .uxc-panel-banner > [data-ux-flavor-skin="A"].ux-jackpot-signage--layout-hero-video.ux-jackpot-signage--compact .ux-jackpot-signage__meter-stage,
.uxc-panel--pulse[data-ux-flavor-skin="A"] .uxc-panel-banner [data-ux-flavor-skin="A"].ux-jackpot-signage--layout-hero-video.ux-jackpot-signage--compact .ux-jackpot-signage__meter-stage {
  top: 58% !important;
  bottom: 16% !important;
}

.uxc-panel--pulse[data-ux-flavor-skin="A"] .uxc-panel-banner > .uxc-panel-qual--ticker,
.uxc-panel--pulse[data-ux-flavor-skin="A"] .uxc-panel-qual.uxc-panel-qual--ticker {
  bottom: 0;
}

.uxc-panel--pulse .uxc-panel-banner > .ux-jackpot-signage--compact .ux-jackpot-signage__bg {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center top;
  object-position: center top;
}

.uxc-panel--pulse .uxc-panel-well:has(.ux-jackpot-signage),
.uxc-panel--pulse .uxc-panel-banner > .ux-jackpot-signage--compact {
  height: auto;
  min-height: 0;
  border: none;
  border-image: none;
  background-color: #08090c;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
}

.uxc-panel--pulse .uxc-panel-well:has(.ux-jackpot-signage)::before {
  display: none;
}

/* Hub marquee stage for CSS plaque */
.uxc-marquee--signage {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: 16 / 9;
  min-height: 160px;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  box-sizing: border-box;
  background: #08090c;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0;
  outline: none !important;
  box-shadow: none !important;
}

.uxc-marquee--signage .ux-jackpot-signage--plaque {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 4% 5% 3.5%;
  gap: 3.2%;
  font-size: clamp(12px, 5cqw, 40px);
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  border: 0 !important;
  border-radius: 0;
  outline: none !important;
  box-shadow: none !important;
}


/* ── Flavor B/C theme modifiers on shared Pulse geometry ───────────────────
 * Same DOM/classes as Flavor A (--pulse). data-ux-flavor-skin swaps chrome colors.
 * Magenta remains chroma-only; never use as panel fill.
 */

/*
 * Flavor B outer stroke — metallic gold (Vault). Solid borders only so the stroke
 * tracks border-radius like Flavor A (border-box gradient strips cut the TR curve).
 */
.uxc-bug--pulse[data-ux-flavor-skin="B"],
.uxc-panel--pulse[data-ux-flavor-skin="B"] {
  border-top-color: #e8c040;
  border-right-color: #c88a28;
  box-shadow:
    0 0 0 6px #1a1008,
    0 8px 24px rgba(0, 0, 0, 0.65);
  background: linear-gradient(180deg, #0a1a12 0%, #04140c 100%);
}

/* Standalone / hub panel — same gold on thin left/bottom Pulse edges */
.uxc-panel--pulse[data-ux-flavor-skin="B"] {
  border-bottom-color: #c88a28;
  border-left-color: #c88a28;
}

/*
 * Flavor C outer stroke — soft orange→deep-red (Grandstand).
 * Transparent border + border-box gradient tracks radius; wide stops avoid
 * hard orange→pink / orange→black steps at TR/BR corners.
 */
.uxc-bug--pulse[data-ux-flavor-skin="C"],
.uxc-panel--pulse[data-ux-flavor-skin="C"] {
  --uxc-c-stroke: linear-gradient(
    145deg,
    #fa8b1b 0%,
    #f2783a 18%,
    #e85a58 36%,
    #d03a68 54%,
    #c01850 72%,
    #a1033c 86%,
    #9f0137 100%
  );
  --uxc-c-stroke-h: linear-gradient(
    90deg,
    #9f0137 0%,
    #a82048 12%,
    #c04058 28%,
    #e06a40 44%,
    #fa8b1b 58%,
    #f9a040 74%,
    #f5b868 88%,
    #ffe8cc 100%
  );
  --uxc-c-digit: linear-gradient(
    180deg,
    #fa8b1b 0%,
    #f2783a 22%,
    #e05648 48%,
    #c02848 74%,
    #a1033c 100%
  );
  border-style: solid;
  border-color: transparent;
  border-top-width: 4px;
  border-right-width: 4px;
  /* L-frame only (top+right), same open left/bottom as Flavor A */
  border-bottom-width: 0;
  border-left-width: 0;
  background:
    #0a090c padding-box,
    var(--uxc-c-stroke) border-box;
  -webkit-background-clip: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 0 0 6px #0a090c,
    0 8px 24px rgba(0, 0, 0, 0.7);
}

/* Standalone / hub panel — keep L-frame open on left/bottom */
.uxc-panel--pulse[data-ux-flavor-skin="C"] {
  border-bottom-width: 0;
  border-left-width: 0;
}

.uxc-bug--pulse[data-ux-flavor-skin="C"] {
  border-bottom-width: 0;
  border-left-width: 0;
}

.uxc-panel--pulse[data-ux-flavor-skin="B"] .uxc-panel-meter-fill {
  background: linear-gradient(90deg, #1a8a5c, #e8c547);
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-panel-meter-fill {
  background: linear-gradient(
    90deg,
    #fa8b1b 0%,
    #f2783a 28%,
    #e85a68 55%,
    #e8488a 78%,
    #d03878 100%
  );
}

.uxc-panel--pulse[data-ux-flavor-skin="B"] .uxc-panel-bet,
.uxc-attract--pulse[data-ux-flavor-skin="B"] .ux-jackpot-signage__tagline {
  color: #e8c547;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-panel-bet,
.uxc-attract--pulse[data-ux-flavor-skin="C"] .ux-jackpot-signage__tagline {
  color: #ffe8cc;
}

/* C panel banner shelf — soft red→orange ticker stroke */
.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-panel-banner {
  background:
    var(--uxc-c-stroke-h) left bottom / 100% 2px no-repeat,
    linear-gradient(180deg, #1a1014 0%, #121018 55%, #0e0c10 100%);
}

/* C HHR chrome — soft red→orange ticker strokes */
.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-panel-content,
.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-panel-content--hhr {
  border-color: transparent;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(159, 1, 55, 0.12) 0%, transparent 42%) padding-box,
    linear-gradient(#0a090c, #0a090c) padding-box,
    var(--uxc-c-stroke-h) border-box;
  -webkit-background-clip: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-racebar {
  border-bottom: 0;
  background:
    var(--uxc-c-stroke-h) left bottom / 100% 1px no-repeat,
    linear-gradient(180deg, #161018 0%, #0e0c10 100%);
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-racebar-btn,
.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-racebar-race {
  color: #ffc08a;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-racebar-btn {
  color: #c87868;
  border-right-color: rgba(159, 1, 55, 0.35);
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-racebar-btn:last-child {
  border-left-color: rgba(159, 1, 55, 0.35);
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-racebar-btn:hover,
.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-racebar-btn:focus-visible {
  color: #ffe8cc;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-racebar-btn.is-active {
  color: #ffe8cc;
  background: rgba(159, 1, 55, 0.18);
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-racebar-race {
  color: #ffe8cc;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-racebar-race .uxc-hhr-nav {
  color: #ffc08a;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-racebar-race .uxc-hhr-nav:hover,
.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-racebar-race .uxc-hhr-nav:focus-visible {
  color: #fa8b1b;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-stats {
  border-bottom: 0;
  background:
    var(--uxc-c-stroke-h) left bottom / 100% 1px no-repeat,
    linear-gradient(180deg, #1a1014 0%, #0e0c10 100%);
  color: #ffc08a;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-stats strong {
  color: #ffe8cc;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-pick-row {
  border-color: rgba(159, 1, 55, 0.28);
  border-bottom-color: transparent;
  background:
    var(--uxc-c-stroke-h) left bottom / 100% 1px no-repeat,
    linear-gradient(180deg, #121018 0%, #0c0a0e 100%);
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-pick-row:hover {
  border-color: rgba(250, 139, 27, 0.45);
  border-bottom-color: transparent;
  background:
    linear-gradient(
      90deg,
      #c92040 0%,
      #e04848 28%,
      #f07038 58%,
      #ff9a3c 100%
    ) left bottom / 100% 1px no-repeat,
    linear-gradient(180deg, #161218 0%, #100c10 100%);
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-pick-row.is-selected {
  border-color: transparent;
  box-shadow: none;
  background:
    linear-gradient(180deg, #1a1014 0%, #120c10 100%) padding-box,
    var(--uxc-c-stroke-h) border-box;
  -webkit-background-clip: padding-box, border-box;
  background-clip: padding-box, border-box;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-place {
  color: #c87868;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-pick-row.is-selected .uxc-hhr-place {
  color: #ffe8cc;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-letter {
  color: #ffc08a;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-pick-row.is-selected .uxc-hhr-letter {
  color: #fa8b1b;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-dots,
.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-grip {
  background-image: radial-gradient(#fa8b1b 1.1px, transparent 1.2px);
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-dots:hover,
.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-grip:hover,
.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-dots:focus-visible,
.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-grip:focus-visible {
  color: #ffe8cc;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-pick-row.is-dragging {
  box-shadow: 0 0 0 1px rgba(159, 1, 55, 0.55);
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-hhr-hint {
  color: #ffc08a;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-panel-cta {
  border-color: transparent;
  color: #ffe8cc;
  background:
    linear-gradient(#141018, #141018) padding-box,
    var(--uxc-c-stroke-h) border-box;
  -webkit-background-clip: padding-box, border-box;
  background-clip: padding-box, border-box;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-panel-cta--wager {
  border: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  background: linear-gradient(
    90deg,
    #e8488a 0%,
    #ee6a58 22%,
    #f48a38 48%,
    #fa8b1b 62%,
    #fcc878 82%,
    #ffe8cc 100%
  );
  color: #1a0a10;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-panel-hhr-keys {
  border-color: transparent;
  background:
    linear-gradient(180deg, #1a1218, #100c10) padding-box,
    var(--uxc-c-stroke-h) border-box;
  -webkit-background-clip: padding-box, border-box;
  background-clip: padding-box, border-box;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-panel-hhr-btn {
  color: #ffc08a;
  border-right-color: rgba(159, 1, 55, 0.35);
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-panel-hhr-btn--back {
  color: #ffe8cc;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-panel-hhr-btn.is-active {
  background: linear-gradient(180deg, #e8488a, #fa8b1b);
  color: #fff;
}

.uxc-panel--pulse[data-ux-flavor-skin="C"] .uxc-panel-hhr-value b {
  color: #ffc08a;
}

.ux-jackpot-signage[data-ux-flavor-skin="B"] {
  background-color: #04140c;
}

.ux-jackpot-signage[data-ux-flavor-skin="C"] {
  background-color: #0a090c;
}

/*
 * Flavor B bug CSS digits — metallic gold, thin bevel only (no LED bloom).
 */
[data-ux-flavor-skin="B"] .ux-jackpot-meter--bug .ux-jackpot-meter__text,
.uxc-bug--pulse[data-ux-flavor-skin="B"] .ux-jackpot-meter__text,
.ux-jackpot-signage[data-ux-flavor-skin="B"] .ux-jackpot-meter--bug .ux-jackpot-meter__text {
  color: #ffd24a;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #ffd24a;
  text-shadow:
    0 -1px 0 rgba(255, 248, 210, 0.85),
    0 1px 0 #6a3a08;
  -webkit-filter: none;
  filter: none;
}

/*
 * Flavor C bug digits — Luke exact ticker stops (vertical top→bottom).
 * Bevel via filter drop-shadow (clip+transparent kills text-shadow); 0.5–1px.
 * No outer glow / bloom on the amount string (includes leading $).
 */
[data-ux-flavor-skin="C"] .ux-jackpot-meter--bug .ux-jackpot-meter__text,
.uxc-bug--pulse[data-ux-flavor-skin="C"] .ux-jackpot-meter__text,
.ux-jackpot-signage[data-ux-flavor-skin="C"] .ux-jackpot-meter--bug .ux-jackpot-meter__text {
  color: #fa8b1b;
  background-image: -webkit-linear-gradient(top, #fa8b1b 0%, #f2783a 22%, #e05648 48%, #c02848 74%, #a1033c 100%);
  background-image: linear-gradient(180deg, #fa8b1b 0%, #f2783a 22%, #e05648 48%, #c02848 74%, #a1033c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  -webkit-filter:
    drop-shadow(0 -0.5px 0 rgba(255, 200, 150, 0.4))
    drop-shadow(0 1px 0 rgba(50, 0, 20, 0.5));
  filter:
    drop-shadow(0 -0.5px 0 rgba(255, 200, 150, 0.4))
    drop-shadow(0 1px 0 rgba(50, 0, 20, 0.5));
}

.uxc-attract--pulse[data-ux-flavor-skin="B"] .ux-jackpot-signage__bg,
.uxc-marquee--signage[data-ux-flavor-skin="B"] .ux-jackpot-signage__bg,
.uxc-panel--pulse[data-ux-flavor-skin="B"] .ux-jackpot-signage__bg {
  opacity: 1;
}

.uxc-attract--pulse[data-ux-flavor-skin="C"] .ux-jackpot-signage__bg,
.uxc-marquee--signage[data-ux-flavor-skin="C"] .ux-jackpot-signage__bg,
.uxc-panel--pulse[data-ux-flavor-skin="C"] .ux-jackpot-signage__bg {
  opacity: 1;
}

/* Legacy B/C image-only stills — kept for moodboard / review refs only */

.uxc-skin-still {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.uxc-marquee--still,
.uxc-attract--still {
  max-width: 960px;
  padding: 0;
  background: #050608;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
}

.uxc-attract--still {
  max-width: 1218px;
}

.uxc-bug--still {
  width: 206px;
  height: 63px;
  padding: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #050608;
  line-height: 0;
}

.uxc-bug--still .uxc-skin-still--bug {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.uxc-panel--still {
  width: 339px;
  max-width: 100%;
  min-height: 420px;
  padding: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #050608;
  line-height: 0;
}

.uxc-panel--still .uxc-skin-still--panel {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: center top;
}

.ux-stage--overlay .uxc-attract--still,
.ux-stage--marquee .uxc-marquee--still {
  width: 100%;
  max-width: 100%;
}