/* =============================================================================
   FortuneX — UI/UX Audit follow-up (2026-05-13)
   Addresses the 105-issue audit in report.pdf. Loaded LAST so its rules win
   the cascade without us having to edit page-level CSS. Grouped by issue
   number from the audit; identical class targets are merged where possible.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   #1  Hero CTAs — primary already uses btn-primary; bump emphasis with size
       and shadow so it visually dominates the ghost "Browse Games" sibling.
   -------------------------------------------------------------------------- */
.hero-cta .btn-primary.btn-lg {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset,
              0 8px 26px rgba(225,29,46,0.42);
}
.hero-cta .btn-ghost.btn-lg {
  background: transparent;
  border-color: rgba(229, 197, 71, 0.45);
  color: var(--gold-300);
}
.hero-cta .btn-ghost.btn-lg:hover {
  background: rgba(229, 197, 71, 0.06);
  border-color: var(--gold-400);
  color: var(--gold-300);
}
.hero-cta { gap: 16px; margin-bottom: 8px; }

/* -----------------------------------------------------------------------------
   #2, #5  Cookie banner — make sure it never overlaps the game grid or
           interactive CTAs. Mobile clearance for the last row of cards.
   -------------------------------------------------------------------------- */
.fx-cookie-bar { z-index: 70; }  /* sits BELOW any modal (z=100+) */
@media (max-width: 720px) {
  /* When the cookie bar is showing, the last row of game tiles needs
     extra bottom padding so nothing hides behind it. */
  body.fx-cookie-bar-open .games,
  body.fx-cookie-bar-open #games { padding-bottom: 180px; }
}

/* -----------------------------------------------------------------------------
   #3, #102  PWA install banner — never overlay primary content. Force it to
             dock to the bottom and respect cookie banner + sticky CTA.
   -------------------------------------------------------------------------- */
#fx-install-banner {
  position: fixed !important;
  bottom: 16px !important;
  z-index: 60 !important;
}

/* -----------------------------------------------------------------------------
   #4  Games section tabs — were decorative <span>; the audit-fixes JS swaps
       them to real buttons with a single-click filter. Style them as proper
       tabs with clear active state.
   -------------------------------------------------------------------------- */
.fx-tabs-wrap {
  display: inline-flex !important;
  align-items: center;
  gap: 4px !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: rgba(45,10,20,0.5);
  border: 1px solid rgba(139, 105, 20, 0.25);
}
.fx-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 18px;
  min-height: 36px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}
.fx-tab:hover { color: var(--gold-300); }
.fx-tab[aria-selected="true"] {
  background: rgba(212, 175, 55, 0.12);
  color: var(--gold-400);
  box-shadow: inset 0 0 0 1px rgba(212,175,55,0.35);
}
.fx-tab:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   #7, #29  Top-nav spacing — keep nav items breathable, primary CTA distinct.
   -------------------------------------------------------------------------- */
nav.top .links { gap: 28px !important; }
nav.top .cta   { gap: 12px !important; }

/* -----------------------------------------------------------------------------
   #8, #33  Language dropdown — show a check on the currently selected lang.
            i18n.js already toggles a .active class on the chosen item; the
            check ::after below makes it visually obvious.
   -------------------------------------------------------------------------- */
.fx-lang-menu button { position: relative; padding-right: 28px !important; }
.fx-lang-menu button.active::after {
  content: "✓";
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--gold-400);
  font-weight: 700;
  font-size: 12px;
}

/* -----------------------------------------------------------------------------
   #9   Smooth scroll already on landing.html; reinforce reduced-motion fallback
        so users who opted out aren't surprised by anchored jumps.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* -----------------------------------------------------------------------------
   #10  "Welcome Stack" promo card — contrast: ensure title + CTA stay legible
        even when the page-level red gradient is bright.
   -------------------------------------------------------------------------- */
.promo-card .promo-title { text-shadow: 0 1px 0 rgba(0,0,0,0.20); }

/* -----------------------------------------------------------------------------
   #11  FAQ accordion — make sure single-click toggles and the +/- swaps state.
        Page CSS uses <details>/<summary> which is native single-click; ensure
        the indicator is visible.
   -------------------------------------------------------------------------- */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary .faq-icon::after { content: "+"; }
.faq-item[open] summary .faq-icon::after { content: "−"; }

/* -----------------------------------------------------------------------------
   #12, #22, #87  Footer link sizing + hover/focus states.
   -------------------------------------------------------------------------- */
footer a,
.foot-bar a,
footer.legal-foot a {
  display: inline-block;
  padding: 4px 2px;
  min-height: 32px;
  line-height: 1.4;
}
footer a:hover,
.foot-bar a:hover,
footer.legal-foot a:hover { color: var(--gold-300); text-decoration: underline; text-decoration-color: rgba(212,175,55,0.5); }
footer a:focus-visible,
.foot-bar a:focus-visible,
footer.legal-foot a:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
  border-radius: 4px;
}

/* -----------------------------------------------------------------------------
   #13, #14, #15  Game tiles — uniform hover, click-feedback, label clamp.
   -------------------------------------------------------------------------- */
.game-tile { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.game-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -16px rgba(212,175,55,0.30), 0 0 0 1px rgba(212,175,55,0.45);
}
.game-tile:active { transform: translateY(0) scale(0.985); }
.game-tile .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* -----------------------------------------------------------------------------
   #16, #17, #88  Provably-fair / RTP tables — alternating rows, more padding,
                   responsive horizontal scroll for narrow screens.
   -------------------------------------------------------------------------- */
table.legal-table,
table.fx-table,
.legal-shell table,
.verify-section table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.legal-table th,
table.fx-table th,
.legal-shell table th,
.verify-section table th {
  padding: 10px 14px;
  text-align: left;
  color: var(--gold-400);
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(139, 105, 20, 0.40);
}
table.legal-table td,
table.fx-table td,
.legal-shell table td,
.verify-section table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(139, 105, 20, 0.14);
  color: var(--cream);
}
table.legal-table tbody tr:nth-child(odd),
table.fx-table tbody tr:nth-child(odd),
.legal-shell table tbody tr:nth-child(odd),
.verify-section table tbody tr:nth-child(odd) {
  background: rgba(212, 175, 55, 0.04);
}

/* -----------------------------------------------------------------------------
   #18, #20, #51, #56, #65, #82  Feature/grid/quick-select buttons — uniform
                                   sizing + gridline layout.
   -------------------------------------------------------------------------- */
.feature, .trust-points li { align-items: flex-start; }
.feature .icon, .trust-points .num { flex: 0 0 auto; }
.feature h3 { line-height: 1.3; }

/* -----------------------------------------------------------------------------
   #23, #24, #25  Sign-in modal — larger close button, validation styling,
                    explanation of guest vs persistent.
   -------------------------------------------------------------------------- */
.modal-close,
button.modal-close,
.fx-modal-close,
[data-close],
#fx-ib-dismiss {
  min-width: 40px !important;
  min-height: 40px !important;
  width: 40px !important;
  height: 40px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(212, 175, 55, 0.08) !important;
  border: 1px solid rgba(212, 175, 55, 0.30) !important;
  color: var(--ivory, #FFF8E7) !important;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.modal-close:hover,
button.modal-close:hover,
.fx-modal-close:hover,
[data-close]:hover {
  background: rgba(212, 175, 55, 0.18) !important;
  border-color: var(--gold-400, #E5C547) !important;
  color: var(--gold-300, #F0D77E) !important;
}
.modal-close:focus-visible,
[data-close]:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
}

/* Inline validation hint surfaces under inputs */
.modal-body input.fx-invalid,
.modal-body input:invalid:not(:placeholder-shown) {
  border-color: rgba(255, 87, 102, 0.85);
  box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.15);
}
.fx-input-hint {
  display: block;
  margin-top: -8px;
  margin-bottom: 12px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
.fx-input-hint.fx-error { color: #FF8895; }

/* -----------------------------------------------------------------------------
   #26, #28  Play sidebar — preserve scroll position via JS; this just fixes
              spacing/legibility so long game lists are scannable.
   -------------------------------------------------------------------------- */
.sidebar .game-list a,
.sidebar .game-row,
.sidebar [data-game] {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  min-height: 36px;
  padding: 6px 10px !important;
}

/* -----------------------------------------------------------------------------
   #27  Search bar — bigger clear icon, accessible target.
   -------------------------------------------------------------------------- */
.fx-search-clear,
.search-clear,
input[type="search"] + .clear-btn {
  min-width: 32px;
  min-height: 32px;
  padding: 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease;
}
.fx-search-clear:hover,
.search-clear:hover { background: rgba(212, 175, 55, 0.12); }

/* -----------------------------------------------------------------------------
   #29  Header icon row spacing.
   -------------------------------------------------------------------------- */
.nav-right { gap: 10px !important; }
.icon-btn {
  min-width: 38px;
  min-height: 38px;
  padding: 6px;
  border-radius: 8px;
}

/* -----------------------------------------------------------------------------
   #30  Faucet button — needs a confirmation tooltip. Tooltip styling here;
         JS attaches the behavior. Plus a small "next claim in …" pill.
   -------------------------------------------------------------------------- */
.fx-tip {
  position: relative;
}
.fx-tip[data-tip]:hover::after,
.fx-tip[data-tip]:focus::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: rgba(26, 5, 10, 0.96);
  color: var(--cream);
  border: 1px solid rgba(212, 175, 55, 0.35);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  z-index: 200;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.55);
}

/* -----------------------------------------------------------------------------
   #31  Notifications panel — unread dot + bigger Clear All target.
   -------------------------------------------------------------------------- */
.notif-row.is-unread::before {
  content: "";
  position: absolute;
  left: 4px; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-400, #E5C547);
  transform: translateY(-50%);
  box-shadow: 0 0 0 2px rgba(229,197,71,0.20);
}
.notif-row { position: relative; padding-left: 18px; }
.notif-clearall,
#notif-clear,
[data-notif-clear] {
  min-height: 32px;
  padding: 6px 12px !important;
  border-radius: 8px;
  font-size: 12px !important;
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
   #34, #35  Settings modal — clearer toggle on/off, larger close, "Done" CTA.
   -------------------------------------------------------------------------- */
.fx-switch input + .slider,
.fx-toggle input + .slider {
  /* off state — clearer grey background */
  background: rgba(120, 100, 80, 0.35);
}
.fx-switch input:checked + .slider,
.fx-toggle input:checked + .slider,
input[type="checkbox"]:checked + .slider {
  background: var(--gold-leaf, linear-gradient(135deg, #F0D77E 0%, #D4AF37 50%, #8B6914 100%));
}

/* -----------------------------------------------------------------------------
   #36  Wallet modal — disabled SOON options. Real disable so users can't click
        and feel like the page is broken.
   -------------------------------------------------------------------------- */
.wallet-opt {
  position: relative;
  opacity: 0.66;
  cursor: not-allowed !important;
}
.wallet-opt:hover { transform: none !important; }
.wallet-opt-soon {
  background: rgba(229, 197, 71, 0.18);
  color: var(--gold-300);
  border: 1px solid rgba(229, 197, 71, 0.40);
  padding: 3px 9px;
  border-radius: 999px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wallet-opt[aria-disabled="true"]::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: auto;
  border-radius: inherit;
}

/* -----------------------------------------------------------------------------
   #38, #39, #81, #83  Profile widgets — explainer text + tooltip targets.
   -------------------------------------------------------------------------- */
.vip-progress-label,
.equity-empty,
.daily-rakeback small {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

/* -----------------------------------------------------------------------------
   #40, #41  Wager Race / Hall of Fame tables — row padding + alternating rows
              + better empty-state copy.
   -------------------------------------------------------------------------- */
.race-table tr,
.hof-row {
  padding: 10px 12px !important;
  align-items: center;
}
.race-table tr:nth-child(even),
.hof-row:nth-child(even) {
  background: rgba(212, 175, 55, 0.04);
}
.hof-empty {
  padding: 18px 20px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed rgba(139, 105, 20, 0.35);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
}

/* -----------------------------------------------------------------------------
   #42, #52, #56, #57, #74  Game CTAs — unify primary action color (gold).
        Red is reserved for destructive/cancel. Targets common selectors used
        across the in-game panels.
   -------------------------------------------------------------------------- */
.bet-controls .btn-bet,
.bet-controls #bet-place,
.bet-controls .btn-primary,
[data-action="place-bet"],
[data-action="spin"],
[data-action="deal"],
[data-action="start-round"],
[data-action="start-climb"],
[data-action="take-off"],
[data-action="pump"] {
  background: var(--gold-leaf, linear-gradient(135deg, #F0D77E 0%, #D4AF37 50%, #8B6914 100%)) !important;
  color: #1A050A !important;
  border-color: #8B6914 !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.bet-controls .btn-bet:hover,
.bet-controls #bet-place:hover,
.bet-controls .btn-primary:hover,
[data-action="place-bet"]:hover,
[data-action="spin"]:hover,
[data-action="deal"]:hover,
[data-action="start-round"]:hover,
[data-action="start-climb"]:hover,
[data-action="take-off"]:hover,
[data-action="pump"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(212, 175, 55, 0.35);
}

/* Cancel / cashout — keep red as destructive intent */
[data-action="cashout"] {
  background: var(--red-ember, linear-gradient(180deg, #FF2E4C, #E11D2E)) !important;
}

/* -----------------------------------------------------------------------------
   #43, #44, #45, #47, #75  Sliders / numeric inputs — bigger thumb, proper
                              focus, mobile-friendly steppers.
   -------------------------------------------------------------------------- */
input[type="range"].fx-slider,
.fx-slider input[type="range"],
.bet-slider input[type="range"] {
  height: 6px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.18);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
input[type="range"].fx-slider::-webkit-slider-thumb,
.fx-slider input[type="range"]::-webkit-slider-thumb,
.bet-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F0D77E 0%, #D4AF37 50%, #8B6914 100%);
  border: 2px solid #1A050A;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  transition: transform 140ms ease;
}
input[type="range"].fx-slider::-webkit-slider-thumb:hover,
.fx-slider input[type="range"]::-webkit-slider-thumb:hover,
.bet-slider input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); }
input[type="range"].fx-slider::-moz-range-thumb,
.fx-slider input[type="range"]::-moz-range-thumb,
.bet-slider input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F0D77E 0%, #D4AF37 50%, #8B6914 100%);
  border: 2px solid #1A050A;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

/* Stepper +/- buttons */
.fx-stepper,
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(139, 105, 20, 0.35);
  border-radius: 8px;
  background: rgba(45, 10, 20, 0.4);
}
.fx-stepper button,
.stepper button {
  min-width: 36px;
  min-height: 36px;
  background: transparent;
  border: 0;
  color: var(--gold-300);
  font-size: 18px;
  cursor: pointer;
  font-weight: 700;
  transition: background 140ms ease, color 140ms ease;
}
.fx-stepper button:hover,
.stepper button:hover {
  background: rgba(212, 175, 55, 0.10);
  color: var(--gold-400);
}
.fx-stepper input,
.stepper input {
  border: 0;
  background: transparent;
  text-align: center;
  width: 60px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  color: var(--ivory);
}

/* -----------------------------------------------------------------------------
   #46, #77  Crash + game loading — skeleton/spinner.
   -------------------------------------------------------------------------- */
.fx-loading,
.game-loading {
  display: inline-block;
  width: 22px; height: 22px;
  border: 2px solid rgba(212,175,55,0.30);
  border-top-color: var(--gold-400, #E5C547);
  border-radius: 50%;
  animation: fxSpin 700ms linear infinite;
}
@keyframes fxSpin { to { transform: rotate(360deg); } }
.fx-skeleton {
  background: linear-gradient(90deg, rgba(212,175,55,0.04) 25%, rgba(212,175,55,0.12) 50%, rgba(212,175,55,0.04) 75%);
  background-size: 200% 100%;
  animation: fxShimmer 1.5s linear infinite;
  border-radius: 6px;
}
@keyframes fxShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* -----------------------------------------------------------------------------
   #48, #49  Plinko risk buttons + board text — larger chips, readable nums.
   -------------------------------------------------------------------------- */
.plinko-risk .chip,
.plinko-row .chip,
.risk-chip,
.row-chip {
  min-height: 36px;
  padding: 8px 14px !important;
  border-radius: 999px;
  border: 1px solid rgba(139, 105, 20, 0.35);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 140ms ease;
}
.plinko-risk .chip.active,
.plinko-row .chip.active,
.risk-chip.active,
.row-chip.active {
  background: rgba(212, 175, 55, 0.18);
  border-color: var(--gold-500);
  color: var(--gold-300);
}
.plinko-board .slot-num,
.fx-multiplier-cell { font-size: 12px !important; font-weight: 700; }

/* -----------------------------------------------------------------------------
   #50  Mines grid — visible borders + long-press flag affordance hint.
   -------------------------------------------------------------------------- */
.mines-grid .cell,
.mines-cell {
  border: 1px solid rgba(212, 175, 55, 0.20) !important;
  background: rgba(45, 10, 20, 0.55);
  border-radius: 8px;
}
.mines-grid .cell:hover,
.mines-cell:hover {
  border-color: rgba(212, 175, 55, 0.45) !important;
  background: rgba(212, 175, 55, 0.05);
}

/* -----------------------------------------------------------------------------
   #52, #53  Wheel — segment chip buttons + position overlay text.
   -------------------------------------------------------------------------- */
.wheel-segments .chip,
.wheel-segments button {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(139, 105, 20, 0.35);
  font-weight: 600;
}
.wheel-overlay { pointer-events: none; }

/* -----------------------------------------------------------------------------
   #54, #55  Hi-Lo — payout ratios alignment + step explanation.
   -------------------------------------------------------------------------- */
.hilo-ratios {
  display: flex;
  justify-content: space-around;
  font-size: 13px;
  gap: 16px;
}

/* -----------------------------------------------------------------------------
   #58, #59  Coin Flip — clear toggle state, larger streak indicator.
   -------------------------------------------------------------------------- */
.coinflip-side[aria-pressed="true"],
.coinflip-side.active {
  background: rgba(212, 175, 55, 0.18);
  border-color: var(--gold-500);
  color: var(--gold-300);
}
.coinflip-streak,
#coinflip-streak {
  font-size: 14px !important;
  font-weight: 700;
  color: var(--gold-400);
}

/* -----------------------------------------------------------------------------
   #60, #61  Roulette — table sizing + button grouping.
   -------------------------------------------------------------------------- */
.roulette-table .num,
.roulette-cell {
  min-width: 28px;
  min-height: 36px;
  padding: 6px;
  font-weight: 700;
}

/* -----------------------------------------------------------------------------
   #62  Blackjack — consistent action buttons.
   -------------------------------------------------------------------------- */
.bj-actions button,
.blackjack-actions button {
  min-height: 40px;
  padding: 8px 18px !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* -----------------------------------------------------------------------------
   #63, #64  Baccarat — equal-size bet boxes + readable payout label.
   -------------------------------------------------------------------------- */
.baccarat-bets {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.baccarat-bets .bet-box {
  padding: 14px;
  border: 1px solid rgba(139, 105, 20, 0.35);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 140ms ease;
}
.baccarat-bets .bet-box.active,
.baccarat-bets .bet-box[aria-pressed="true"] {
  border-color: var(--gold-500);
  background: rgba(212, 175, 55, 0.10);
}
.baccarat-bets .bet-payout {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--gold-300);
  margin-top: 4px;
  font-weight: 700;
}

/* -----------------------------------------------------------------------------
   #65, #66  Keno grid + disabled play explainer.
   -------------------------------------------------------------------------- */
.keno-grid {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(36px, 1fr));
  gap: 6px;
}
.keno-grid .num,
.keno-num {
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(139, 105, 20, 0.30);
  cursor: pointer;
  font-weight: 700;
}
.keno-grid .num.selected,
.keno-num.selected,
.keno-num[aria-pressed="true"] {
  background: rgba(212, 175, 55, 0.20);
  border-color: var(--gold-500);
  color: var(--gold-300);
}
button[disabled],
button:disabled,
.btn[disabled],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed !important;
  filter: grayscale(0.4);
}

/* -----------------------------------------------------------------------------
   #67  Slots paytable — readable, separated.
   -------------------------------------------------------------------------- */
.slots-paytable,
.paytable {
  font-size: 12px !important;
  line-height: 1.65;
}
.slots-paytable-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid rgba(139, 105, 20, 0.35);
  background: transparent;
  color: var(--gold-300);
  border-radius: 8px;
  cursor: pointer;
}

/* -----------------------------------------------------------------------------
   #68  RPS — illustrated buttons (svg fallback to color emoji).
   -------------------------------------------------------------------------- */
.rps-choice {
  font-size: 22px;
  min-width: 64px;
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}
.rps-choice[aria-pressed="true"],
.rps-choice.active {
  border-color: var(--gold-500);
  background: rgba(212, 175, 55, 0.12);
  transform: scale(1.05);
}

/* -----------------------------------------------------------------------------
   #71, #72  Sic Bo — custom select styling + visible selection.
   -------------------------------------------------------------------------- */
.fx-select,
select.fx-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 36px 10px 14px;
  background: rgba(45, 10, 20, 0.55)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
    no-repeat right 10px center / 16px;
  border: 1px solid rgba(139, 105, 20, 0.40);
  border-radius: 8px;
  color: var(--ivory);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 13px;
  min-height: 40px;
  cursor: pointer;
}
.fx-select:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.15);
}

/* -----------------------------------------------------------------------------
   #84  Search empty state — quick "Clear" affordance.
   -------------------------------------------------------------------------- */
.fx-empty-state {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.fx-empty-state .fx-empty-action {
  display: inline-block;
  margin-top: 10px;
  color: var(--gold-400);
  text-decoration: underline;
  text-decoration-color: rgba(212,175,55,0.5);
  cursor: pointer;
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
   #86  Legal pages — larger body type, more line-height, better list spacing.
        legal.css already has mobile breakpoints; this nudges desktop too.
   -------------------------------------------------------------------------- */
.legal-shell p.legal-p,
.legal-shell ul.legal-list li,
.legal-shell ol.legal-list li {
  font-size: 15.5px;
  line-height: 1.7;
}
.legal-shell ul.legal-list,
.legal-shell ol.legal-list {
  padding-left: 26px;
  margin-bottom: 18px;
}
.legal-shell ul.legal-list li,
.legal-shell ol.legal-list li { margin-bottom: 10px; }

/* -----------------------------------------------------------------------------
   #98, #103  General color contrast + button consistency. Already nudged
              via specific selectors above; this is the broad sweep.
   -------------------------------------------------------------------------- */
.muted, .text-muted { color: var(--muted) !important; }
/* Disabled visible state — see #66 above.
   Small fonts in paytables / footers nudged for legibility. */
.legal-shell footer.legal-foot,
.foot-bar { font-size: 12.5px !important; }

/* -----------------------------------------------------------------------------
   #99  Responsive breakpoints — finer-grained mobile rules.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn-lg { width: 100%; }
  nav.top .cta .btn { padding: 8px 14px !important; }
  .modal, .modal-back .modal {
    max-width: calc(100% - 24px) !important;
    margin: 12px;
  }
  .baccarat-bets { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .games { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .keno-grid { grid-template-columns: repeat(5, minmax(32px, 1fr)) !important; }
}

/* -----------------------------------------------------------------------------
   #101  Accessibility — visible focus ring on every interactive surface.
   -------------------------------------------------------------------------- */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-400, #E5C547);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Skip link — keyboard accessibility */
.fx-skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 9999;
  background: var(--wine-950, #2A0F18);
  color: var(--gold-300, #F0D77E);
  padding: 10px 16px;
  border: 1px solid var(--gold-500, #D4AF37);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: top 180ms ease;
}
.fx-skip-link:focus { top: 12px; outline: none; }

/* Visually-hidden helper for offscreen labels */
.fx-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------------------------------------
   #104  Dead clicks — only show pointer cursor on actually clickable things.
   -------------------------------------------------------------------------- */
.game-tile,
.btn,
[role="button"],
[data-action],
a[href],
button { cursor: pointer; }
[aria-disabled="true"],
[disabled],
:disabled,
.is-disabled { cursor: not-allowed !important; }

/* -----------------------------------------------------------------------------
   #105  Achievements — small history badge so toasts can be revisited.
   -------------------------------------------------------------------------- */
.fx-ach-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.30);
  color: var(--gold-300);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* Light-theme touchups (mirrors play/landing light-theme overrides) */
:root[data-theme="light"] .modal-close,
:root[data-theme="light"] button.modal-close,
:root[data-theme="light"] [data-close],
:root[data-theme="light"] #fx-ib-dismiss {
  color: #2A0F18 !important;
  background: rgba(168, 132, 26, 0.10) !important;
  border-color: rgba(139, 105, 20, 0.40) !important;
}
:root[data-theme="light"] .fx-tab[aria-selected="true"] {
  background: rgba(168, 132, 26, 0.16);
  color: #6B5210;
  box-shadow: inset 0 0 0 1px rgba(139, 105, 20, 0.45);
}
:root[data-theme="light"] .fx-cookie-bar { color: #2A0F18; }