/* ================================================
   PRIME LOUNGE — ALL UI FIXES (all breakpoints)
   v3 — fixes:
     • .jackpot-title selector (img IS the element, not a child)
     • 1500px tier added between 1200 and 1920
     • .status-bar prefix bumps specificity over status-bar.css
   ================================================ */

.status-bar { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; padding: 4px 12px !important; gap: 0 !important; height: 64px !important; }
@media (min-width: 1500px) { .status-bar { height: 64px !important; } }
@media (min-width: 1920px) { .status-bar { height: 70px !important; } }
@media (min-width: 2560px) { .status-bar { height: 84px !important; } body, .casino-root, .lobby-body { padding-bottom: 92px !important; } }
@media (max-width: 1023.98px) { .status-bar { padding: 5px 12px max(5px,env(safe-area-inset-bottom)) !important; height: auto !important; min-height: unset !important; gap: 0 !important; } }
.status-top-left { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; flex-shrink: 0 !important; }
.status-left-top { display: flex !important; flex-direction: row !important; gap: 12px !important; margin-bottom: 3px !important; }
.status-left-bottom { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; }
@media (max-width: 1023.98px) { .status-top-left { flex-direction: row !important; flex: 1 1 0% !important; align-items: center !important; gap: 6px !important; } .status-left-top { margin-bottom: 0 !important; } }
.icon-controls { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important; margin-left: 14px !important; }
@media (max-width: 1023.98px) { .icon-controls { margin-left: 6px !important; gap: 4px !important; } }

/* === BALANCE / CASHBACK BOXES — muted earthy tones, no digital glow ===
   2026-05-09: less saturation, no box-shadow halos, no inset glow strips.
   Colors evoke aged copper / weathered brass instead of bright neon. */
/* === BALANCE / CASHBACK BOXES — premium arcade-cabinet feel ===
   2026-05-09 reference-match: deep navy inset boxes, GOLD label on top,
   WHITE value below. Bevel + subtle cyan rim glow = premium not generic. */
.status-bar .balance-box, .balance-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  /* layered: outer dark, inner subtle cyan highlight on top edge */
  background:
    linear-gradient(180deg, #08111E 0%, #050912 100%) !important;
  border: 1px solid #1F3A55 !important;
  box-shadow:
    0 1px 0 rgba(110, 200, 250, 0.08) inset,
    0 -1px 0 rgba(0, 0, 0, 0.6) inset,
    0 2px 6px rgba(0, 0, 0, 0.5) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
}
.status-bar .cashback-box, .cashback-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  background:
    linear-gradient(180deg, #0E1018 0%, #07090E 100%) !important;
  border: 1px solid #3D3422 !important;
  box-shadow:
    0 1px 0 rgba(212, 181, 106, 0.10) inset,
    0 -1px 0 rgba(0, 0, 0, 0.6) inset,
    0 2px 6px rgba(0, 0, 0, 0.5) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
}
.status-bar .cashback-box .bonus-val, .cashback-box .bonus-val {
  color: #FFFFFF !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  background: none !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
@media (max-width: 375px) { .status-bar .balance-box, .balance-box { font-size: 11px !important; } .status-bar .cashback-box, .cashback-box { font-size: 11px !important; } }
@media (max-width: 1023.98px) { .status-bar .balance-box, .balance-box { font-size: 13px !important; } .status-bar .cashback-box, .cashback-box { font-size: 13px !important; } }
/* 1024-1499 tier (was 1200-, now extended to 1499.98) */
/* cashback box widened so the English label "CASHBACK BONUS" fits on one line */
@media (min-width: 1024px) and (max-width: 1499.98px) { .status-bar .balance-box, .balance-box { width: 110px !important; height: 30px !important; font-size: 1.05rem !important; } .status-bar .cashback-box, .cashback-box { width: 130px !important; height: 30px !important; font-size: 1.05rem !important; } }
@media (min-width: 1500px) and (max-width: 1919.98px) { .status-bar .balance-box, .balance-box { width: 130px !important; height: 32px !important; font-size: 1.15rem !important; } .status-bar .cashback-box, .cashback-box { width: 150px !important; height: 32px !important; font-size: 1.15rem !important; } }
@media (min-width: 1920px) { .status-bar .balance-box, .balance-box { width: 150px !important; height: 36px !important; font-size: 1.3rem !important; } .status-bar .cashback-box, .cashback-box { width: 170px !important; height: 36px !important; font-size: 1.3rem !important; } }
@media (min-width: 2560px) { .status-bar .balance-box, .balance-box { width: 190px !important; height: 46px !important; font-size: 1.7rem !important; } .status-bar .cashback-box, .cashback-box { width: 210px !important; height: 46px !important; font-size: 1.7rem !important; } }

/* === LABELS ABOVE BOXES (specificity bumped) === */
.status-bar .balance-title, .balance-title { font-size: clamp(9px, 0.7vw, 12px) !important; letter-spacing: 1px !important; color: #a0b4c8 !important; text-transform: uppercase !important; white-space: nowrap !important; }
.status-bar .bonus-label, .bonus-label { font-size: clamp(9px, 0.7vw, 12px) !important; letter-spacing: 1px !important; color: #c8a040 !important; text-transform: uppercase !important; white-space: nowrap !important; }
@media (min-width: 1500px) { .status-bar .balance-title, .balance-title, .status-bar .bonus-label, .bonus-label { font-size: 11px !important; } }
@media (min-width: 1920px) { .status-bar .balance-title, .balance-title, .status-bar .bonus-label, .bonus-label { font-size: 13px !important; } }
@media (min-width: 2560px) { .status-bar .balance-title, .balance-title, .status-bar .bonus-label, .bonus-label { font-size: 15px !important; } }

.status-top-right { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; margin-left: auto !important; }
.status-right-bottom { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; }
@media (max-width: 1200px) { .status-top-right { min-width: 180px !important; } }
@media (max-width: 1023.98px) { .status-top-right { flex-direction: row !important; padding: 0 !important; } }
/* Username — premium dark plaque, gold text (matches reference "PC01" style) */
.username-display { display: flex !important; align-items: center !important; justify-content: center !important; height: 28px !important; padding: 0 16px !important; border-radius: 6px !important; background: linear-gradient(180deg, #0E1A28 0%, #050912 100%) !important; border: 1px solid #1F3A55 !important; box-shadow: 0 1px 0 rgba(110, 200, 250, 0.08) inset, 0 -1px 0 rgba(0, 0, 0, 0.6) inset, 0 2px 6px rgba(0, 0, 0, 0.5) !important; color: #D4B568 !important; font-size: clamp(11px, 0.9vw, 14px) !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 160px !important; margin-bottom: 0 !important; flex-shrink: 1 !important; text-shadow: 0 -1px 0 rgba(0,0,0,0.7) !important; }
.username-display .username-val { color: #D4B568 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
@media (max-width: 1023.98px) { .username-display { height: 28px !important; padding: 0 8px !important; font-size: 10px !important; max-width: 100px !important; margin-right: 4px !important; } }
@media (max-width: 375px) { .username-display { max-width: 65px !important; font-size: 9px !important; padding: 0 5px !important; } }
@media (min-width: 1500px) { .username-display { height: 32px !important; font-size: 1.0rem !important; max-width: 160px !important; padding: 0 12px !important; } }
@media (min-width: 1920px) { .username-display { height: 36px !important; font-size: 1.1rem !important; max-width: 180px !important; padding: 0 14px !important; } }
@media (min-width: 2560px) { .username-display { height: 44px !important; font-size: 1.3rem !important; max-width: 220px !important; padding: 0 16px !important; } }
/* Exit — dark premium button, deep red text (subtle danger, not glowing red) */
.exit-btn { border-radius: 6px !important; background: linear-gradient(180deg, #0E1A28 0%, #050912 100%) !important; border: 1px solid #4A2128 !important; box-shadow: 0 1px 0 rgba(255, 200, 200, 0.06) inset, 0 -1px 0 rgba(0, 0, 0, 0.6) inset, 0 2px 6px rgba(0, 0, 0, 0.5) !important; color: #C95A6A !important; font-weight: 700 !important; letter-spacing: 1.5px !important; cursor: pointer !important; text-shadow: 0 -1px 0 rgba(0,0,0,0.7) !important; }
.exit-btn:hover { border-color: #C03A4A !important; color: #E8788A !important; box-shadow: 0 1px 0 rgba(255, 200, 200, 0.1) inset, 0 -1px 0 rgba(0, 0, 0, 0.6) inset, 0 0 12px rgba(192, 58, 74, 0.3), 0 2px 6px rgba(0, 0, 0, 0.5) !important; }
@media (min-width: 1500px) { .exit-btn { min-width: 90px !important; height: 32px !important; font-size: 1.0rem !important; } }
@media (min-width: 1920px) { .exit-btn { min-width: 110px !important; height: 36px !important; font-size: 1.1rem !important; } }
@media (min-width: 2560px) { .exit-btn { min-width: 140px !important; height: 44px !important; font-size: 1.3rem !important; } }
.pager { margin-top: 0 !important; align-self: center !important; gap: 5px !important; }

/* Pager dots — red inactive (original style), GOLD active for premium accent (2026-05-10) */
.pager .dot {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 auto !important;
  border-radius: 999px !important;
  border: 1px solid #222 !important;
  color: #fff !important;
  background: linear-gradient(180deg, #cc0000 0%, #880000 100%) !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  font-family: var(--font-heading), sans-serif !important;
  line-height: 1 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.2) inset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
.pager .dot.active {
  width: 32px !important;
  height: 32px !important;
  background: linear-gradient(180deg, #FAE28E 0%, #D4B568 50%, #8B6F3A 100%) !important;
  color: #2A1A08 !important;
  border: 2px solid #FAE28E !important;
  transform: none !important;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(212, 181, 106, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  text-shadow: 0 1px 1px rgba(255, 220, 100, 0.5) !important;
}

/* === GOLD UNIFYING ACCENT (2026-05-10) ===
   Apply premium gold accent line + subtle hover/focus gold across the page. */
.jackpot-strip, .jackpot-bar {
  border-bottom: 1px solid rgba(212, 181, 106, 0.35) !important;
}
.status-bar {
  border-top: 1px solid rgba(212, 181, 106, 0.4) !important;
}
.find-input:focus,
.find-input:focus-visible,
.find-group input:focus,
.find-group input:focus-visible {
  border-color: #D4B568 !important;
  outline-color: #D4B568 !important;
  box-shadow: 0 0 8px rgba(212, 181, 106, 0.4) !important;
}

/* === JACKPOT STRIP — fixed selector (.jackpot-title IS the img) === */
.jackpot-strip, .jackpot-bar { display: flex !important; align-items: center !important; justify-content: center !important; gap: clamp(8px, 1.2vw, 24px) !important; padding: clamp(4px, 0.6vw, 12px) clamp(8px, 1vw, 20px) !important; width: 100% !important; box-sizing: border-box !important; }
.jackpot-strip .meter, .jackpot-bar .meter { font-size: clamp(14px, 1.6vw, 28px) !important; line-height: 1 !important; }
.jackpot-title, .jackpot-strip .jackpot-title, .game-top-bar__brand img { flex: 0 0 auto !important; display: block !important; height: clamp(28px, 3vw, 56px) !important; width: auto !important; background: transparent !important; }
@media (max-width: 1023.98px) { .jackpot-strip, .jackpot-bar { flex-wrap: wrap !important; gap: 6px !important; } .jackpot-title, .jackpot-strip .jackpot-title, .game-top-bar__brand img { height: 26px !important; } .jackpot-strip .meter, .jackpot-bar .meter { font-size: 14px !important; } }
@media (max-width: 375px) { .jackpot-title, .jackpot-strip .jackpot-title, .game-top-bar__brand img { height: 22px !important; } .jackpot-strip .meter, .jackpot-bar .meter { font-size: 12px !important; } }
@media (min-width: 1500px) { .jackpot-title, .jackpot-strip .jackpot-title, .game-top-bar__brand img { height: 48px !important; } .jackpot-strip .meter, .jackpot-bar .meter { font-size: 26px !important; } }
@media (min-width: 1920px) { .jackpot-title, .jackpot-strip .jackpot-title, .game-top-bar__brand img { height: 56px !important; } .jackpot-strip .meter, .jackpot-bar .meter { font-size: 30px !important; } }
@media (min-width: 2560px) { .jackpot-title, .jackpot-strip .jackpot-title, .game-top-bar__brand img { height: 72px !important; } .jackpot-strip .meter, .jackpot-bar .meter { font-size: 40px !important; } }
.find-input::placeholder, input.find-input::placeholder { font-size: clamp(11px, 0.9vw, 14px) !important; }
footer, .footer { font-size: clamp(10px, 0.8vw, 14px) !important; }

/* === LABELS INSIDE BOXES (added 2026-05-09) ===
   Desktop only: visually merge each label into the top of its box.
   Uses display:contents on the row wrappers + 2-row grid on the parent so
   each label sits directly above its corresponding value box, sharing the
   same gradient and merging into one continuous shape. */
@media (min-width: 1024px) {
  /* Stick the bar to the very bottom of the viewport with a continuous
     dark background that runs behind ALL children (BALANCE/CASHBACK boxes
     sit on top of this strip). */
  .status-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 50 !important;
    background: linear-gradient(180deg, #0A111E 0%, #050912 100%) !important;
    border-top: 1px solid #1F3A55 !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.6) !important;
  }

  /* Reserve space at the bottom of the page so the fixed bar doesn't cover
     the last row of game cards. Three selectors as a safety net since the
     lobby root class isn't 100% certain. */
  body,
  .casino-root,
  .lobby-body {
    padding-bottom: 74px !important;       /* bumped from 64 to match taller status bar */
  }

  .status-bar .status-top-left {
    display: grid !important;
    grid-template-columns: auto auto auto !important;
    grid-template-rows: auto auto !important;
    align-items: stretch !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
  }
  .status-bar .status-left-top { display: contents !important; }
  .status-bar .status-left-bottom { display: contents !important; }

  /* Labels: GOLD on dark navy — premium plaque feel matching the reference.
     Engraved-look text-shadow gives it real depth, not flat AI gradient. */
  .status-bar .balance-title, .balance-title {
    grid-column: 1; grid-row: 1;
    padding: 5px 14px 1px !important;
    background: linear-gradient(180deg, #0E1A28 0%, #08111E 100%) !important;
    border: 1px solid #1F3A55 !important;
    border-bottom: 0 !important;
    border-radius: 6px 6px 0 0 !important;
    box-shadow: 0 1px 0 rgba(110, 200, 250, 0.08) inset !important;
    color: #D4B568 !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px !important;
    text-shadow:
      0 -1px 0 rgba(0, 0, 0, 0.7),
      0 1px 0 rgba(212, 181, 106, 0.12) !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
  .status-bar .bonus-label, .bonus-label {
    grid-column: 2; grid-row: 1;
    padding: 5px 10px 1px !important;
    background: linear-gradient(180deg, #15161E 0%, #0E1018 100%) !important;
    border: 1px solid #3D3422 !important;
    border-bottom: 0 !important;
    border-radius: 6px 6px 0 0 !important;
    box-shadow: 0 1px 0 rgba(212, 181, 106, 0.10) inset !important;
    color: #D4B568 !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;          /* tighter so longer words like CASHBACK BONUS fit */
    white-space: nowrap !important;            /* never wrap onto two lines */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow:
      0 -1px 0 rgba(0, 0, 0, 0.7),
      0 1px 0 rgba(212, 181, 106, 0.12) !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
  .status-bar .balance-box, .balance-box {
    grid-column: 1; grid-row: 2;
    border-radius: 0 0 6px 6px !important;
    border-top: 0 !important;
    box-shadow: none !important;
  }
  .status-bar .cashback-box, .cashback-box {
    grid-column: 2; grid-row: 2;
    border-radius: 0 0 6px 6px !important;
    border-top: 0 !important;
    box-shadow: none !important;
  }
  .icon-controls {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    margin-left: 14px !important;
  }
}

/* === JACKPOT BAR — bring meters closer together (2026-05-10) ===
   Desktop only. Override the spread-out grid (repeat(3, 1fr)) with a tight
   flex row so BRONZE/SILVER/GOLD cluster instead of stretching across the bar.
   No padding changes — only gap + flex (per the no-padding-on-containers rule). */
@media (min-width: 1024px) {
  .jackpot-strip, .jackpot-bar {
    gap: clamp(4px, 0.4vw, 10px) !important;       /* was clamp(8, 1.2vw, 24) — tighter outer gap */
  }
  .meter-row {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    gap: clamp(4px, 0.4vw, 10px) !important;        /* tight inter-meter gap */
    align-items: center !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;         /* kill the 1fr-1fr-1fr spread */
  }
  .meter {
    gap: clamp(4px, 0.4vw, 8px) !important;          /* tight gap between plate image and digit box */
  }
}

/* ===========================================================
   2026-05-10 — JACKPOT BAR POLISH + MOBILE PORTRAIT FIXES
   =========================================================== */

/* (1) Desktop v3 (2026-05-10): SPREAD across full bar width + BIGGER */
@media (min-width: 1024px) {
  /* Spread content using space-around so meters fill the gaps left/right */
  .jackpot-strip, .jackpot-bar {
    justify-content: space-around !important;   /* was center — spread across full width */
    gap: 12px !important;
    padding: 6px 32px !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* Plates: shrunk back ~halfway from BIG (2026-05-10 v3) */
  .meter img {
    height: 38px !important;
    max-height: 38px !important;
    width: 130px !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  /* (2026-05-11) Removed asymmetric clip-path on bronze/silver — was cropping
     10px from each edge while gold rendered at full size, making bronze/silver
     visually smaller than gold. All three plates now render at full canvas. */
  /* Premium polish on plates + tier-colored breathing pulse (aggressive + catchy).
     Each plate pulses staggered 1s apart so they cascade Bronze→Silver→Gold. */
  /* CRISP plate styling — box-shadow only (never blurs the image content) */
  .meter img {
    border-radius: 8px !important;
    outline: none !important;
    box-shadow:
      0 0 0 1px rgba(212, 181, 106, 0.3),
      0 3px 6px rgba(0, 0, 0, 0.55) !important;
    filter: saturate(1.1) !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    image-rendering: -webkit-optimize-contrast !important;
  }
  .meter.meter-bronze img {
    animation: plate-glow-bronze 2.4s ease-in-out infinite !important;
  }
  .meter.meter-silver img {
    animation: plate-glow-silver 2.4s ease-in-out infinite !important;
    animation-delay: 0.8s !important;
  }
  .meter.meter-gold img {
    animation: plate-glow-gold 2.4s ease-in-out infinite !important;
    animation-delay: 1.6s !important;
  }
  /* Metal shimmer sweep on the parent .meter (overlays only the plate region) */
  .meter {
    position: relative !important;
    overflow: visible !important;
  }
  .meter.meter-bronze::before,
  .meter.meter-silver::before,
  .meter.meter-gold::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 130px !important;
    height: 38px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: linear-gradient(115deg,
      transparent 35%,
      rgba(255, 255, 255, 0.45) 50%,
      transparent 65%) !important;
    background-size: 250% 100% !important;
    background-position: -100% 0 !important;
    pointer-events: none !important;
    z-index: 5 !important;
    mix-blend-mode: overlay !important;
    animation: plate-shimmer 4s ease-in-out infinite !important;
  }
  .meter.meter-silver::before { animation-delay: 1.3s !important; }
  .meter.meter-gold::before { animation-delay: 2.6s !important; }
}

/* === PROVIDER BAR — sized + visible color (2026-05-10 v2) === */
@media (min-width: 1024px) {
  /* Visible background + border on every provider button so they actually pop */
  .provider-btn {
    background: linear-gradient(180deg, #14202F 0%, #0A111E 100%) !important;
    border: 1px solid #1F3A55 !important;
    box-shadow:
      inset 0 1px 0 rgba(110, 200, 250, 0.08),
      0 1px 3px rgba(0, 0, 0, 0.4) !important;
    color: #B8C5D8 !important;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease !important;
  }
  .provider-btn::before {
    color: #B8C5D8 !important;
  }
  .provider-btn:hover {
    background: linear-gradient(180deg, #1F2D3F 0%, #14202F 100%) !important;
    border-color: #2F5275 !important;
    color: #FFFFFF !important;
  }
  .provider-btn:hover::before { color: #FFFFFF !important; }
  /* Active provider — gold-tinted to make selection obvious */
  .provider-btn.active {
    background: linear-gradient(180deg, #2A2014 0%, #1A1408 100%) !important;
    border-color: #C9A55A !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 220, 100, 0.15),
      0 0 12px rgba(201, 165, 90, 0.3),
      0 1px 3px rgba(0, 0, 0, 0.4) !important;
    color: #D4B568 !important;
  }
  .provider-btn.active::before {
    color: #D4B568 !important;
    text-shadow: 0 0 8px rgba(212, 181, 106, 0.55) !important;
  }
}
@media (min-width: 1920px) {
  .provider-btn {
    width: 120px !important;        /* bumped from 110 */
    height: 40px !important;         /* bumped from 36 */
    min-height: 40px !important;
    font-size: 0.95rem !important;
    border-radius: 6px !important;
  }
  .provider-btn::before {
    font-size: 13px !important;      /* bumped from 12 */
  }
  .provider-bar {
    padding: 12px 14px 8px !important;
  }
  .provider-track {
    gap: 7px !important;
  }
}
@media (min-width: 2560px) {
  .provider-btn {
    width: 150px !important;
    height: 48px !important;
    min-height: 48px !important;
    font-size: 1.15rem !important;
  }
  .provider-btn::before { font-size: 16px !important; }
  .provider-bar { padding: 16px 18px 10px !important; }
  .provider-track { gap: 9px !important; }
}

/* shimmer sizes scale up with breakpoints (match the smaller halfway plates) */
@media (min-width: 1500px) {
  .meter.meter-bronze::before, .meter.meter-silver::before, .meter.meter-gold::before {
    width: 150px !important; height: 46px !important;
  }
}
@media (min-width: 1920px) {
  .meter.meter-bronze::before, .meter.meter-silver::before, .meter.meter-gold::before {
    width: 180px !important; height: 54px !important;
  }
}
@media (min-width: 2560px) {
  .meter.meter-bronze::before, .meter.meter-silver::before, .meter.meter-gold::before {
    width: 230px !important; height: 70px !important;
  }
}

/* New crisp keyframes — box-shadow only, no filter/transform = no blur (2026-05-10 v3) */
@keyframes plate-glow-bronze {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(176, 122, 72, 0.35),
      0 3px 6px rgba(0, 0, 0, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255, 180, 100, 0.95),
      0 0 24px rgba(255, 140, 60, 0.7),
      0 3px 6px rgba(0, 0, 0, 0.55);
  }
}
@keyframes plate-glow-silver {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(184, 188, 196, 0.35),
      0 3px 6px rgba(0, 0, 0, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.95),
      0 0 24px rgba(232, 240, 255, 0.7),
      0 3px 6px rgba(0, 0, 0, 0.55);
  }
}
@keyframes plate-glow-gold {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(212, 181, 106, 0.35),
      0 3px 6px rgba(0, 0, 0, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255, 235, 100, 1),
      0 0 28px rgba(255, 220, 80, 0.8),
      0 3px 6px rgba(0, 0, 0, 0.55);
  }
}
/* Metal shimmer sweep — moves the gradient across the plate */
@keyframes plate-shimmer {
  0%, 30% { background-position: -100% 0; }
  50% { background-position: 200% 0; }
  100% { background-position: 200% 0; }
}

/* placeholder (avoid empty media block above) */
@media (min-width: 1024px) {
  .meter img { will-change: filter, outline-color; }
  /* Digit box: shrunk back ~halfway */
  .meter strong {
    height: 38px !important;
    padding: 0 14px !important;
    font-size: 22px !important;
  }
  /* JACKPOT logo: shrunk back ~halfway */
  .jackpot-title, .jackpot-strip .jackpot-title {
    height: 48px !important;
  }
  /* meter-row spreads to also fill, with wider gaps between meters */
  .meter-row {
    flex: 1 !important;
    justify-content: space-around !important;
    gap: 16px !important;
  }
  .meter {
    gap: 6px !important;
    padding: 0 4px !important;
    min-height: 0 !important;
  }
}
@media (min-width: 1500px) {
  .meter img { height: 46px !important; max-height: 46px !important; width: 150px !important; }
  .meter strong { height: 46px !important; font-size: 26px !important; padding: 0 16px !important; }
  .jackpot-title, .jackpot-strip .jackpot-title { height: 54px !important; }
}
@media (min-width: 1920px) {
  .meter img { height: 54px !important; max-height: 54px !important; width: 180px !important; }
  .meter strong { height: 54px !important; font-size: 30px !important; padding: 0 20px !important; }
  .jackpot-title, .jackpot-strip .jackpot-title { height: 54px !important; }
  .jackpot-strip, .jackpot-bar { height: 60px !important; padding: 4px 48px !important; }
}
@media (min-width: 2560px) {
  .meter img { height: 70px !important; max-height: 70px !important; width: 230px !important; }
  .meter strong { height: 70px !important; font-size: 40px !important; padding: 0 26px !important; }
  .jackpot-title, .jackpot-strip .jackpot-title { height: 84px !important; }
  .jackpot-strip, .jackpot-bar { padding: 12px 60px !important; }
}

/* (2) Mobile portrait: hide JACKPOT logo so digits get the space */
@media (max-width: 1023.98px) {
  .jackpot-strip .jackpot-title,
  .jackpot-title {
    display: none !important;
  }
}

/* (3) Mobile: bring back the LANGUAGE flag (only — grid/mute stay hidden) */
@media (max-width: 1023.98px) {
  .status-bar .icon-controls {
    display: flex !important;
    gap: 6px !important;
    margin-left: 4px !important;
  }
  .status-bar .icon-controls .grid-btn,
  .status-bar .icon-controls .mute-btn {
    display: none !important;
  }
  .status-bar .icon-controls .flag-btn {
    display: flex !important;
    width: 28px !important;
    height: 28px !important;
  }
}

/* (4) Mobile: search is JUST an icon by default. Tap → expands to a pill input.
 *     Tap outside → input loses focus → collapses back to the icon automatically.
 *     If the user typed something, the input keeps the expanded state via
 *     .find-input.active (the JSX sets that class while searchTerm is non-empty)
 *     and also via input:not(:placeholder-shown) as a wider-supported fallback.
 *
 *     The flex shorthand is needed because the base .find-group rule sets
 *     `flex: 1 1 0%` which would stretch the element regardless of `width`. */
@media (max-width: 1023.98px) {
  .status-bar .find-group {
    display: flex !important;
    flex: 0 0 36px !important;
    align-items: center !important;
    width: 36px !important;
    height: 36px !important;
    margin-left: 4px !important;
    transition: flex-basis 220ms ease, width 220ms ease !important;
    overflow: hidden !important;
  }
  .status-bar .find-group input {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 0 0 32px !important;
    color: transparent !important;
    background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8C5DB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") 8px center / 20px no-repeat !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    cursor: pointer !important;
    caret-color: transparent !important;
    transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, caret-color 220ms ease !important;
  }
  /* Hide the native placeholder while collapsed (icon-only). It will reveal
     again when the input expands because the override below resets the color. */
  .status-bar .find-group input::placeholder {
    color: transparent !important;
  }
  /* Expanded: focused, OR input has text. Two selectors so we cover both
     :has() (parent-based) and an inner-element fallback used inside flex. */
  .status-bar .find-group:focus-within,
  .status-bar .find-group:has(.find-input.active),
  .status-bar .find-group:has(input:not(:placeholder-shown)) {
    flex: 0 0 220px !important;
    width: 220px !important;
  }
  .status-bar .find-group:focus-within input,
  .status-bar .find-group:has(.find-input.active) input,
  .status-bar .find-group input:not(:placeholder-shown) {
    color: #F0F9FF !important;
    background-color: #131C2E !important;
    border-color: #2A3650 !important;
    cursor: text !important;
    caret-color: #06B6D4 !important;
  }
  /* Restore the placeholder once expanded so the user sees the search prompt. */
  .status-bar .find-group:focus-within input::placeholder,
  .status-bar .find-group:has(.find-input.active) input::placeholder {
    color: rgba(184, 197, 219, 0.55) !important;
  }

  /* When the search is open, the 220 px input has nowhere to go on a 390 px phone —
     it overlaps the balance / username / exit buttons. Hide the other parts of the
     status bar while search is active and let the input take the whole row. */
  .status-bar:has(.find-input:focus) > .status-top-left,
  .status-bar:has(.find-input.active) > .status-top-left,
  .status-bar:has(.find-input:not(:placeholder-shown)) > .status-top-left,
  .status-bar:has(.find-input:focus) > .status-center,
  .status-bar:has(.find-input.active) > .status-center,
  .status-bar:has(.find-input:not(:placeholder-shown)) > .status-center,
  .status-bar:has(.find-input:focus) .username-display,
  .status-bar:has(.find-input.active) .username-display,
  .status-bar:has(.find-input:not(:placeholder-shown)) .username-display,
  .status-bar:has(.find-input:focus) .exit-btn,
  .status-bar:has(.find-input.active) .exit-btn,
  .status-bar:has(.find-input:not(:placeholder-shown)) .exit-btn {
    display: none !important;
  }
  /* Let the right column + find-group grow into the freed space. */
  .status-bar:has(.find-input:focus) .status-top-right,
  .status-bar:has(.find-input.active) .status-top-right,
  .status-bar:has(.find-input:not(:placeholder-shown)) .status-top-right {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .status-bar:has(.find-input:focus) .status-top-right .find-group,
  .status-bar:has(.find-input.active) .status-top-right .find-group,
  .status-bar:has(.find-input:not(:placeholder-shown)) .status-top-right .find-group {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* The × close button. Only rendered by JSX while the input is focused or has
     a search term, but we also style it so the search input has trailing padding
     to keep typed text from sliding under the button. */
  .status-bar .search-wrap {
    position: relative !important;
  }
  .status-bar .find-input {
    padding-right: 38px !important;
  }
  .status-bar .search-clear-btn {
    position: absolute !important;
    top: 50% !important;
    right: 4px !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #B8C5DB !important;
    font-size: 20px !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }
  .status-bar .search-clear-btn:hover,
  .status-bar .search-clear-btn:focus-visible {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #F0F9FF !important;
    outline: none !important;
  }
}

/* Desktop sizing for the clear button (smaller). */
@media (min-width: 1024px) {
  .status-bar .search-wrap {
    position: relative;
  }
  .status-bar .find-input.active {
    padding-right: 30px;
  }
  .status-bar .search-clear-btn {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #B8C5DB;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .status-bar .search-clear-btn:hover,
  .status-bar .search-clear-btn:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    color: #F0F9FF;
    outline: none;
  }
}

/* ===========================================================
 * Make the in-game wrapper jackpot bar (.game-top-bar) the same
 * size as the lobby jackpot bar (.jackpot-strip).
 * Measured 2026-05-13:
 *   Lobby @1920: 81 px tall (padding 8px 28px). Game @1920: 56 px.
 *   Lobby mobile: 65 px tall. Game mobile portrait: 34 px.
 * =========================================================== */
@media (min-width: 1024px) {
  .game-top-bar {
    height: 60px !important;
    padding: 4px 48px !important;
    gap: 16px !important;
  }
  /* Bar slimmed 81px -> 60px [2026-05-30 bar-shrink] to give games more
     height. Works now that the --jackpot-h height-sync in page.tsx fires
     on data load (dep [launchQuery.data]). */
  .game-top-bar__brand {
    padding: 0 !important;
    height: auto !important;
  }
  .game-top-bar__brand img {
    max-width: 320px !important;
    height: 54px !important;
    width: auto !important;
  }
}
@media (min-width: 1920px) {
  .game-top-bar {
    height: 60px !important;
    padding: 4px 48px !important;
    gap: 16px !important;
  }
  .game-top-bar__brand img {
    max-width: 370px !important;
    height: 54px !important;
  }
}
@media (min-width: 2560px) {
  .game-top-bar {
    height: 100px !important;
    padding: 10px 56px !important;
    gap: 20px !important;
  }
  .game-top-bar__brand img {
    max-width: 430px !important;
    height: 80px !important;
  }
}

/* Mobile — match lobby strip height (65 px) and rebuild meters so they
 * mirror the lobby meters (compact pill with B/S/G letter + digits). */
@media (max-width: 1023.98px) {
  .game-top-bar {
    height: 65px !important;
    padding: 4px 8px !important;
    gap: 6px !important;
  }
  .game-top-bar .meter-row {
    flex: 1 1 auto !important;
    width: 100% !important;
    gap: 6px !important;
  }
  .game-top-bar .meter {
    flex: 1 !important;
    grid-template-columns: 18px 1fr !important;
    gap: 5px !important;
    padding: 5px 6px !important;
    border-radius: 6px !important;
    border-left-width: 2px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    overflow: visible !important;
  }
  .game-top-bar .meter img { display: none !important; }
  .game-top-bar .meter-bronze::after,
  .game-top-bar .meter-silver::after,
  .game-top-bar .meter-gold::after {
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 12px !important;
    text-align: center !important;
    font-family: var(--font-condensed), 'Roboto Condensed', sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    grid-column: unset !important;
  }
  .game-top-bar .meter-bronze::after { content: 'B' !important; color: var(--bronze-tier) !important; }
  .game-top-bar .meter-silver::after { content: 'S' !important; color: var(--silver-tier) !important; }
  .game-top-bar .meter-gold::after   { content: 'G' !important; color: var(--gold-tier) !important; }
  .game-top-bar .meter strong {
    grid-column: 2 !important;
    display: block !important;
    height: auto !important;
    padding: 4px 4px !important;
    background: #050608 !important;
    border: 1.5px solid !important;
    border-radius: 6px !important;
    font-family: var(--font-digital), 'Orbitron', monospace !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 13px !important;
    letter-spacing: -0.3px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-shadow: none !important;
    text-overflow: clip !important;
  }
  .game-top-bar .meter.meter-bronze strong { border-color: var(--bronze-tier) !important; color: #d4a96a !important; }
  .game-top-bar .meter.meter-silver strong { border-color: var(--silver-tier) !important; color: #dde2ea !important; }
  .game-top-bar .meter.meter-gold   strong { border-color: var(--gold-tier) !important; color: #f5d06e !important; }
  /* Show all digits (game-top-bar.css hides leading zeros & last digit via
     :nth-child / :last-child — re-apply with matching specificity to undo). */
  .game-top-bar .meter-digit,
  .game-top-bar .meter-digit:nth-child(-n+2),
  .game-top-bar .meter-digit:last-child {
    display: inline !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  .game-top-bar .meter-separator { min-width: 0 !important; padding: 0 !important; }
  .game-top-bar__brand { display: none !important; }
}
@media (max-width: 410px) {
  .game-top-bar .meter strong { font-size: 12px !important; padding: 3px 3px !important; }
}
@media (max-width: 360px) {
  .game-top-bar .meter strong { font-size: 11px !important; }
}

/* Login card scaling for Android phones in the 401–760 px range.
 * Existing @media (max-width: 400px) in globals.css caps the card at 300 px
 * for small phones, but devices like Pixel 7 (412 px) skip that rule and
 * end up with a full-viewport card (width: 100%, no margin), which makes
 * the inputs and ENTER button look huge. Constrain the card and centre it. */
@media (min-width: 401px) and (max-width: 760px) {
  .auth-card {
    width: 92vw !important;
    max-width: 380px !important;
    margin: 0 auto !important;
  }
  .auth-card input {
    height: 42px !important;
    font-size: 1rem !important;
  }
  .auth-card button[type="submit"] {
    height: 44px !important;
    font-size: 1rem !important;
  }
}

/* Mobile jackpot meter: shrink digits so the cents (.92) don't get cut off.
 * The base rule in src/components/lobby/styles/jackpot-strip.css uses 17 px
 * which only fits 4 digits + "." on a ~120 px meter cell; the trailing two
 * digits get clipped by `overflow: hidden`. Drop the size to fit on phones. */
@media (max-width: 1023.98px) {
  .meter strong {
    font-size: 13px !important;
    padding: 4px 4px !important;
    letter-spacing: -0.3px !important;
  }
  .meter-digit,
  .meter-separator {
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
  }
}
@media (max-width: 410px) {
  .meter strong {
    font-size: 12px !important;
    padding: 3px 3px !important;
  }
}
@media (max-width: 360px) {
  .meter strong {
    font-size: 11px !important;
  }
}

/* ===========================================================
 * Mobile polish (added 2026-05-13)
 * Loaded after the main bundle, so these are the final word
 * for the rules listed below.
 * =========================================================== */

/* A) iOS Safari stops zooming into inputs when font-size >= 16px */
@media (max-width: 1023.98px) {
  .search-input,
  .status-bar .find-group input,
  .find-group input,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"] {
    font-size: 16px !important;
  }
}

/* B) Kill the grey tap-flash + 300 ms tap delay on interactive targets */
* {
  -webkit-tap-highlight-color: transparent;
}
button,
a,
[role="button"],
.game-card,
.provider-tab,
.status-bar-item,
.status-bar button,
.status-bar a {
  touch-action: manipulation;
}

/* C) Block pull-to-refresh + rubber-band bounce on the lobby/play viewport */
html,
body {
  overscroll-behavior-y: contain;
}

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