/* ======================================================================
   TF2 BOLT — MOBILE EXPERIENCE
   Genuine responsive layout for phones/tablets. The desktop UI remains
   unchanged above these breakpoints; on mobile we reflow rather than zoom
   the desktop layout down. Touch targets follow a ~44px minimum where it
   matters, inputs stay >=16px to prevent iOS focus zoom, and game pages
   use natural document scrolling instead of fragile 100vh/fixed shells.
   ====================================================================== */

.mx-mobile-panel-btn,
.mx-mobile-panel-head,
.mx-mobile-panel-backdrop,
.cr-mobile-odds-btn,
.dc-mobile-drops-btn { display: none; }

@media (max-width: 900px) {
  html { overflow-x: hidden !important; scrollbar-gutter: auto; }
  body { max-width: 100vw; overflow-x: hidden !important; }
  body:not(.login) { margin-left: 0 !important; }
  body > header,
  body > .wrap,
  body > .crafter-page-wrap,
  body.crates-page > header,
  body.crates-page > .wrap,
  body.roulette-page > header,
  body.roulette-page > .wrap,
  body.payload-page > header,
  body.payload-page > .wrap,
  body.coinflip-page > header,
  body.coinflip-page > .wrap { margin-left: 0 !important; }

  .wrap { width: 100%; max-width: 100% !important; padding-left: 14px; padding-right: 14px; }
  img, video, iframe, canvas, svg { max-width: 100%; }
  .panel, .modern-card { max-width: 100%; }
  .row { flex-wrap: wrap; }

  /* Inventory / deposit toolbar becomes a proper stacked control surface. */
  .inv-layout { padding: 14px 14px 24px !important; gap: 12px !important; }
  .inv-side { width: 100% !important; max-width: none !important; }
  .inv-rail { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(150px,.7fr); gap: 8px !important; align-items: center !important; }
  .inv-search, .inv-sort { width: 100% !important; min-width: 0 !important; }
  .inv-row, .dep-availability { min-width: 0; }
  .inv-recent-list { max-height: 300px; }

  /* Matches: filters on top, content below. Keep filters horizontally
     scannable rather than turning the whole page into a long sidebar. */
  .mx-wrap { padding-top: 12px !important; }
  .mx-shell { gap: 12px !important; }
  .mx-sidebar { padding: 12px !important; border-radius: 12px; background: rgba(255,255,255,.018); border: 1px solid var(--border); }
  .mx-title { margin-top: 0 !important; }
  .mx-tabs, .mx-filters { flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 3px; }
  .mx-tabs::-webkit-scrollbar, .mx-filters::-webkit-scrollbar { display: none; }
  .mx-tab, .mx-game-btn { flex: 0 0 auto; min-height: 40px; padding: 9px 12px !important; white-space: nowrap; }
  .mx-filters-label { margin: 8px 0 5px !important; }
  .mx-tournament-list.open { max-height: 180px; overflow-y: auto; }

  /* Public info / terms */
  .public-info-page .public-info-content { margin: 12px auto 30px !important; }
  .public-info-page .wrap { padding-top: 14px !important; padding-bottom: 28px !important; }
  .about-subtabs { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .about-subtabs::-webkit-scrollbar { display: none; }
  .about-subtab-btn { flex: 0 0 auto; min-height: 40px; padding: 8px 13px !important; }

  /* Transaction filters should not remain a skinny 220px desktop rail. */
  body.transactions-page > .wrap > div { flex-direction: column !important; }
  body.transactions-page > .wrap > div > div { width: 100% !important; min-width: 0 !important; }
  body.transactions-page > .wrap > div > div:last-child { order: -1; }
  body.transactions-page .tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  body.transactions-page .tabs::-webkit-scrollbar { display: none; }
  body.transactions-page .tab-btn { flex: 0 0 auto; }

  /* Admin remains usable on a phone: tab strips scroll and large tables
     scroll inside themselves rather than widening the entire document. */
  body.admin-modern-page #adminTabs,
  .admin-workspace-nav { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none; }
  body.admin-modern-page #adminTabs::-webkit-scrollbar,
  .admin-workspace-nav::-webkit-scrollbar { display: none; }
  .admin-modern-tab table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .admin-modern-tab .row { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  :root { --header-h: 96px; --chat-w: 0px !important; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    min-height: 100dvh;
    padding-bottom: max(70px, env(safe-area-inset-bottom));
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: rgba(224,139,63,.16);
  }

  /* ---------- MOBILE HEADER ---------- */
  header.modern-header {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    grid-template-rows: 46px 44px !important;
    align-items: center !important;
    gap: 0 8px !important;
    width: 100% !important;
    min-height: 96px !important;
    padding: max(5px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) 0 max(9px, env(safe-area-inset-left)) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 700 !important;
    background: rgba(12,15,20,.97) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }
  header.modern-header > .brand { grid-column: 1; grid-row: 1; min-width: 0; }
  header.modern-header .brand { font-size: 20px !important; gap: 6px !important; }
  header.modern-header .brand-mark { width: 29px !important; height: 29px !important; flex-basis: 29px !important; }
  header.modern-header > .header-right {
    grid-column: 2; grid-row: 1;
    justify-self: end; margin-left: 0 !important; gap: 5px !important;
    min-width: 0; max-width: 100%;
  }
  header.modern-header > .header-nav {
    grid-column: 1 / -1; grid-row: 2;
    display: flex !important; align-items: stretch !important;
    width: 100%; max-width: 100%; min-width: 0;
    overflow-x: auto !important; overflow-y: hidden !important;
    gap: 2px !important; padding: 0 0 1px !important; border-bottom: 0 !important;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  header.modern-header > .header-nav::-webkit-scrollbar { display: none; }
  header .nav-link {
    flex: 0 0 auto !important; min-height: 42px !important;
    padding: 8px 11px !important; font-size: 11.5px !important;
    gap: 6px !important; border-radius: 9px 9px 0 0 !important;
    scroll-snap-align: center; --nav-scale: 1 !important;
  }
  header .nav-link::after { left: 9px !important; right: 9px !important; }
  header .nav-toggle { display: none !important; }

  header .balance-chip {
    min-width: 0 !important; max-width: 96px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    padding: 4px 7px !important; text-align: center !important; border-radius: 9px !important;
  }
  header .balance-chip .lbl { display: none !important; }
  header .balance-chip .val { font-size: 11.5px !important; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  header .balance-chip .bolt-icon { width: 14px !important; height: 14px !important; }
  header .header-deposit-btn {
    width: 42px !important; height: 42px !important; min-width: 42px !important;
    margin-left: 0 !important; padding: 0 !important; justify-content: center !important;
    font-size: 0 !important; border-radius: 9px !important;
  }
  header .header-deposit-btn i { font-size: 14px !important; }
  header .icon-btn, header .bell-btn, header .sound-toggle-btn { width: 42px !important; height: 42px !important; min-width: 42px !important; padding: 0 !important; display: grid !important; place-items: center; }
  header .profile-btn { width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 3px !important; justify-content: center !important; border-radius: 10px !important; }
  header .profile-btn .nm, header .profile-btn .caret, header .profile-btn .admin-badge { display: none !important; }
  header .profile-btn img, header .guest-steam-avatar { width: 31px !important; height: 31px !important; }
  /* Token counts live behind the balance chip on desktop. On touch, tapping
     the focusable balance wrapper opens the same panel below the header,
     where it cannot be clipped off the right edge of a narrow phone. */
  header .token-hover-panel {
    position: fixed !important; left: auto !important; right: max(8px, env(safe-area-inset-right)) !important;
    top: calc(98px + env(safe-area-inset-top)) !important; transform: none !important; margin-top: 0 !important;
    min-width: 190px !important; max-width: calc(100vw - 16px); z-index: 1250 !important;
  }

  /* Header dropdowns become large touch-friendly bottom sheets. */
  header .profile .menu,
  header .bell .menu {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    max-height: min(72dvh, 560px); overflow-y: auto;
    border-radius: 16px !important; padding: 8px !important;
    z-index: 1200 !important; box-shadow: 0 24px 70px rgba(0,0,0,.72) !important;
  }
  header .menu a { min-height: 46px; display: flex !important; align-items: center; gap: 10px; padding: 11px 13px !important; font-size: 14px !important; }
  header .notif-menu { padding: 0 !important; }
  header .notif-head { position: sticky; top: 0; z-index: 2; background: var(--panel); padding: 13px 14px !important; }
  header .notif-item { min-height: 54px; }

  /* Volume control is still available, but the popup opens upward so it
     cannot fall outside the compact two-row header. */
  header .volume-slider-pop { top: auto !important; bottom: calc(100% + 6px) !important; }

  /* ---------- CHAT AS A MOBILE BOTTOM SHEET ---------- */
  .chat {
    position: fixed !important;
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    width: 100vw !important; height: min(76dvh, 640px) !important;
    border-right: 0 !important; border-top: 1px solid var(--border) !important;
    border-radius: 18px 18px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 1000 !important;
    box-shadow: 0 -24px 65px rgba(0,0,0,.65);
  }
  .chat-resizer { display: none !important; }
  #chatToggle {
    left: auto !important; right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: 50px !important; height: 50px !important;
    border-radius: 50% !important; font-size: 19px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.5) !important;
  }
  #chatToggle:hover { left: auto !important; width: 50px !important; }
  .chat-head { padding: 11px 13px !important; }
  .chat-head-extra { padding: 7px 10px !important; gap: 6px !important; }
  .chat-msgs { padding: 10px !important; }
  .chat-input { padding: 9px max(9px, env(safe-area-inset-right)) max(9px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left)) !important; background: #12151a; }
  .chat-input input { min-width: 0; font-size: 16px !important; min-height: 44px; }
  .chat-input button { min-width: 48px; min-height: 44px; font-size: 0; padding: 0 14px !important; }
  .chat-input button i { font-size: 15px; }

  /* ---------- TOUCH / FORM / MODAL BASELINE ---------- */
  input, select, textarea { font-size: 16px !important; }
  button, a, input, select, textarea { touch-action: manipulation; }
  .btn, .btn-primary, .btn-ghost, .tab-btn, .ptab-btn, .inv-chip { min-height: 42px; }
  .fld, .modern-input { min-height: 44px; }
  .overlay, .cmodal-overlay { align-items: flex-end !important; padding: 8px !important; }
  .modal, .cmodal {
    width: 100% !important; max-width: none !important;
    max-height: min(90dvh, 760px); overflow-y: auto;
    border-radius: 18px 18px 12px 12px !important; padding: 18px !important;
  }
  .modal-actions, .cmodal-actions { gap: 8px !important; }
  .modal-actions a, .modal-actions button, .cmodal-actions button { min-height: 46px; }
  .strange-parts-tip { max-width: calc(100vw - 20px) !important; font-size: 12px; }

  /* ---------- HOME ---------- */
  .home-shell, .home-main { width: 100%; }
  .home-main { padding-left: 12px !important; padding-right: 12px !important; }
  .home-top-grid, .home-games-grid, .home-utility-row { grid-template-columns: 1fr !important; }
  .home-welcome-card, .home-match-card, .home-game-card { min-width: 0 !important; }
  .home-game-card { min-height: 145px; }
  .home-game-copy h3 { font-size: 21px; }
  .hm-actions { grid-template-columns: 1fr 1fr !important; }
  .hm-bet-btn, .home-primary-btn { min-height: 46px; }

  /* ---------- INVENTORY / DEPOSIT ---------- */
  .inv-layout { padding: 10px 10px 26px !important; }
  .inv-main { width: 100%; min-width: 0; }
  .inv-side { order: -1; }
  .inv-rail { grid-template-columns: 1fr !important; }
  .inv-row { display: grid !important; grid-template-columns: 1fr 44px; gap: 8px !important; width: 100%; }
  .inv-total { margin-left: 0 !important; }
  .grid, .dep-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px !important; }
  .item-card { min-width: 0; padding: 9px 6px 8px !important; }
  .item-card .img-wrap { height: 72px; }
  .item-card img { max-width: 68px; max-height: 68px; }
  .item-name { font-size: 10.5px !important; }
  .item-price { font-size: 11px !important; }
  .dep-page-head { padding: 2px 2px 10px !important; align-items: flex-start !important; }
  .dep-page-head h1 { font-size: 22px !important; }
  .dep-page-head p { font-size: 11.5px !important; }
  .dep-preview-row { flex-direction: column; }
  .dep-preview-row > * { width: 100%; }
  .dep-mode-tabs .dep-mode-choice { min-height: 74px; }
  .dep-bulk { max-height: none !important; position: sticky; bottom: 8px; z-index: 25; padding: 10px !important; border-radius: 13px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
  .dep-bulk .inv-chip { min-height: 46px; }

  /* ---------- MATCHES ---------- */
  .mx-sidebar { position: static !important; width: 100% !important; }
  .mx-sub { margin-bottom: 10px !important; }
  .mc { border-radius: 12px !important; }
  .mc-row { padding: 10px !important; gap: 7px !important; flex-wrap: wrap; }
  .mc-tournament { width: 100%; order: -3; }
  .mc-time { order: -2; }
  .mc-teams { width: 100%; order: 1; justify-content: space-between !important; }
  .mc-team { max-width: 42% !important; }
  .mc-badges { margin-left: auto; }
  .mc-pot-mini { width: auto !important; }
  .mc-inline-odds { grid-template-columns: 1fr !important; padding: 9px 10px !important; }
  .mc-inline-odds-box { min-height: 52px; }
  .mc-bet-opt { padding: 11px 10px !important; }
  .btn-bet { min-height: 38px; min-width: 74px; }
  .mc-bets-scroll { max-height: none !important; }
  .bettor-info { min-width: 78px !important; }
  .mxr-multiwatch-overlay { padding: 0 !important; }
  .mxr-multiwatch-grid { grid-template-columns: 1fr !important; }

  /* The desktop right rail is hidden by matches.js below 1180px. On phones it
     becomes an explicit bottom sheet instead, opened from a clear button so
     Bet Slip / Active / History remain reachable without consuming list space. */
  .mx-mobile-panel-btn {
    display: flex !important; width: 100%; min-height: 46px; margin-top: 10px;
    align-items: center; justify-content: center; gap: 8px; padding: 10px 12px;
    border: 1px solid rgba(224,139,63,.32); border-radius: 10px;
    background: rgba(224,139,63,.09); color: var(--accent);
    font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
  }
  .mx-mobile-panel-btn .mxr-count { margin-left: 2px; }
  .mx-mobile-panel-backdrop {
    display: none; position: fixed; inset: 0; z-index: 1090;
    background: rgba(4,6,9,.72); backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .mx-mobile-panel-backdrop.open { display: block; }
  .mx-right { display: none !important; }
  .mx-right.mx-mobile-open {
    display: block !important; position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important; top: auto !important;
    width: auto !important; max-width: none !important; max-height: min(82dvh, 720px);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    z-index: 1100 !important; border: 1px solid var(--border); border-radius: 18px 18px 12px 12px;
    background: var(--panel); box-shadow: 0 26px 80px rgba(0,0,0,.72);
  }
  body.mx-mobile-panel-active { overflow: hidden !important; }
  .mx-mobile-panel-head {
    display: flex !important; min-height: 52px; align-items: center; justify-content: space-between;
    gap: 10px; padding: 8px 10px 8px 14px; position: sticky; top: 0; z-index: 4;
    background: rgba(20,23,29,.98); border-bottom: 1px solid var(--border);
  }
  .mx-mobile-panel-head strong { font-size: 14px; }
  .mx-mobile-panel-close {
    width: 42px; height: 42px; min-width: 42px; border-radius: 10px;
    border: 1px solid var(--border); background: rgba(255,255,255,.04);
    color: var(--text); display: grid; place-items: center; font-size: 16px;
  }
  .mx-right .mxr-tabs {
    position: sticky; top: 52px; z-index: 3; border-radius: 0 !important;
    background: rgba(20,23,29,.98);
  }
  .mx-right .mxr-tab { min-height: 46px; padding: 11px 6px !important; }
  .mx-right .mxr-panel {
    min-height: 0 !important; max-height: none !important; overflow: visible !important;
    padding: 14px !important; border-radius: 0 !important;
  }
  .mx-right .mxr-slip-empty { padding: 30px 14px !important; }
  .mx-right .mx-bet-amount-row { align-items: stretch !important; }
  .mx-right #mxBetAmountInput { min-height: 48px; }
  .mx-right .mx-amount-quick button { min-height: 44px; }
  .mx-right .mx-bet-confirm { min-height: 50px; }
  .mx-right .mxr-watcher { margin: 0 12px 14px !important; }
  .mx-right .mxr-watcher-add, .mx-right .mxr-watch-now-btn { min-height: 44px; }

  /* Match detail: scoreboard stays readable and bet slip becomes a bottom sheet. */
  .md2-wrap { padding-top: 12px !important; }
  .md2-header { padding: 14px 10px !important; }
  .md2-scoreboard { gap: 8px !important; flex-wrap: nowrap !important; }
  .md2-team { min-width: 0 !important; gap: 6px !important; }
  .md2-team img { width: 48px !important; height: 48px !important; }
  .md2-team .nm { font-size: 11.5px !important; }
  .md2-series-score { font-size: 24px !important; gap: 8px !important; }
  .md2-tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .md2-tabs::-webkit-scrollbar { display: none; }
  .md2-tab { flex: 0 0 auto; min-height: 42px; }
  .md2-odds-row { grid-template-columns: 1fr !important; }
  .md2-odds-box { min-height: 58px; }
  .md2-bet-row { flex-wrap: wrap; }
  .md2-bet-actions { width: 100%; }
  .md2-bet-actions button { flex: 1; min-height: 40px; }
  .md2-betslip {
    left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important;
    max-height: 82dvh; overflow-y: auto; border-radius: 18px 18px 0 0 !important;
    padding: 16px max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
    transform: translateY(100%) !important;
  }
  .md2-betslip.open { transform: translateY(0) !important; }
  .md2-betslip-close { width: 42px !important; height: 42px !important; }

  /* ---------- CRAFTER ---------- */
  body.crafter-page,
  body.crates-page,
  body.roulette-page,
  body.payload-page,
  body.coinflip-page,
  body.jackpot-page {
    display: block !important; height: auto !important; min-height: 100dvh !important;
    overflow-x: hidden !important; overflow-y: auto !important; padding-bottom: max(70px, env(safe-area-inset-bottom)) !important;
  }
  .crafter-page-wrap { display: block !important; overflow: visible !important; min-height: 0 !important; }
  body.crafter-page #crafterApp, body.crafter-page .tf2-crafter, body.crafter-page .tf2-main { height: auto !important; min-height: 0 !important; overflow: visible !important; display: block !important; }
  #crafterApp { padding: 10px !important; }
  .tf2-top-bar { min-height: 48px; height: auto !important; flex-wrap: wrap; gap: 8px !important; padding: 9px 10px !important; }
  .tf2-main { display: grid !important; grid-template-columns: 1fr !important; }
  .tf2-inv-panel { width: 100% !important; min-height: 0 !important; max-height: none !important; border: 0 !important; }
  .tf2-item-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; max-height: 330px !important; overflow-y: auto !important; padding: 8px !important; }
  .tf2-centre { width: 100% !important; min-width: 0 !important; padding: 12px 10px !important; border-top: 1px solid var(--tf-border); border-bottom: 1px solid var(--tf-border); }
  .tf2-craft-slots-grid { gap: 6px !important; }
  .tf2-craft-slot { min-width: 0 !important; }
  .tf2-craft-btn { min-height: 48px; }
  .cr-forge-scene { min-height: 190px !important; }
  .tf2-reveal-panel, .tf2-crafting-modal { width: calc(100vw - 16px) !important; max-height: 90dvh; overflow-y: auto; }

  /* ---------- COINFLIP ---------- */
  body.coinflip-page > .wrap { padding: 0 !important; }
  .cf-shell { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  .cf-top-bar { height: auto !important; min-height: 46px; padding: 0 8px !important; overflow-x: auto; }
  .cf-top-bar-brand { display: none !important; }
  .cf-tab-bar { overflow-x: auto; scrollbar-width: none; padding: 0 !important; }
  .cf-tab-bar::-webkit-scrollbar { display: none; }
  .cf-tab { flex: 0 0 auto; min-height: 42px; padding: 0 13px !important; }
  .cf-top-bar-right { flex: 0 0 auto; padding-left: 8px; }
  .cf-tab-panel { min-height: 0 !important; overflow: visible !important; display: none !important; }
  .cf-tab-panel.active { display: block !important; }
  .cf-main { min-height: 0 !important; overflow: visible !important; display: block !important; }
  .cf-create { width: 100% !important; min-width: 0 !important; max-width: none !important; flex: none !important; border-right: 0 !important; border-bottom: 1px solid var(--cf-border); overflow: visible !important; }
  .cf-create.collapsed { margin-left: 0 !important; opacity: 1 !important; pointer-events: auto !important; display: none !important; }
  .cf-create-expand-tab { position: static !important; width: 100% !important; min-height: 44px; margin: 8px 0 !important; border-radius: 8px !important; }
  .cf-create-collapse-tab { min-height: 40px; }
  .cf-picker-scroll { max-height: 360px !important; overflow-y: auto !important; }
  .cf-picker-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 6px !important; }
  .cf-list-scroll { overflow: visible !important; max-height: none !important; padding: 10px !important; }
  .cf-list-grid, .cf-games-grid { grid-template-columns: 1fr !important; }
  .cf-flip-card-top, .cf-game-card-head { flex-wrap: wrap; }
  .cf-modal, .cf-join-modal, .cf-reveal-panel, .cf-joined-popup { width: calc(100vw - 16px) !important; max-width: none !important; max-height: 90dvh; overflow-y: auto; }
  .cf-details-sides, .cf-reveal-sides { grid-template-columns: 1fr !important; }
  .cf-details-item-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }

  /* ---------- CRATES ---------- */
  body.crates-page > .wrap, body.crates-page #cratesApp { display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
  .cr-shell { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  .cr-topbar { height: auto !important; min-height: 50px; flex-wrap: wrap; padding: 9px 10px !important; gap: 6px !important; }
  .cr-topbar-title { font-size: 18px !important; }
  .cr-topbar-sub { width: 100%; margin-left: 0 !important; }
  .cr-filter-bar { height: auto !important; display: grid !important; grid-template-columns: 1fr auto !important; gap: 8px !important; padding: 9px 10px !important; }
  .cr-category-bar { grid-column: 1 / -1; overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  .cr-category-bar::-webkit-scrollbar { display: none; }
  .cr-category-bar button { flex: 0 0 auto; min-height: 40px; }
  .cr-search-bar { min-width: 0 !important; width: 100% !important; }
  .cr-sort-wrap { min-width: 42px; }
  .cr-crate-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 9px !important; padding: 10px !important; overflow: visible !important; }
  .cr-crate-card { min-width: 0; aspect-ratio: .86 !important; }
  .cr-crate-card:hover { transform: none !important; }
  .cr-cc-img { max-width: 76% !important; max-height: 60% !important; }
  .cr-cc-name { font-size: 11.5px !important; }
  .cr-cc-price b { font-size: 13px !important; }
  .cr-mobile-odds-btn {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 5px;
    min-height: 34px; padding: 6px 9px; margin-top: 5px; border-radius: 8px;
    border: 1px solid rgba(224,139,63,.32); background: rgba(224,139,63,.10);
    color: var(--accent,#e08b3f); font: inherit; font-size: 10.5px; font-weight: 800;
    position: relative; z-index: 3;
  }
  .cr-page2-body { overflow: visible !important; height: auto !important; }
  .cr-open-layout { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; padding: 10px !important; }
  .cr-open-options, .cr-info-panel, .cr-unbox-panel { width: 100% !important; max-width: none !important; }
  .cr-hero-wrap { min-height: 220px !important; }
  .cr-qty-btn, .cr-mode-btn { min-height: 42px; }
  .cr-unbox-btn { min-height: 50px; }
  .cr-spin-stats { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .cr-your-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .cr-crate-tooltip { display: none !important; }
  .cr-mobile-odds-overlay { position: fixed; inset: 0; z-index: 5000; background: rgba(5,7,10,.82); backdrop-filter: blur(5px); display: none; align-items: flex-end; padding: 8px; }
  .cr-mobile-odds-overlay.open { display: flex; }
  .cr-mobile-odds-card { width: 100%; max-height: 82dvh; overflow-y: auto; background: var(--cr-panel,#1a1710); border: 1px solid var(--cr-border-hi,#3d3820); border-radius: 18px 18px 12px 12px; padding: 14px; box-shadow: 0 22px 70px rgba(0,0,0,.7); }
  .cr-mobile-odds-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; font-weight:800; }
  .cr-mobile-odds-close { width:44px; height:44px; border-radius:10px; border:1px solid var(--cr-border-hi,#3d3820); background:rgba(255,255,255,.04); color:var(--cr-cream,#eee); font-size:18px; }

  /* ---------- ROULETTE ---------- */
  body.roulette-page > .wrap, body.roulette-page #rouletteApp, .rl-shell { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  .rl-shell { padding: 10px !important; }
  .rl-layout { grid-template-columns: 1fr !important; gap: 10px !important; }
  .rl-banner { padding: 12px !important; }
  .rl-banner-top { align-items: center !important; }
  .rl-banner-title { font-size: 18px !important; }
  .rl-timer-ring { margin-left: auto !important; }
  .rl-reel-wrap { min-height: 150px; }
  .rl-bet-bar { grid-template-columns: 1fr !important; gap: 8px !important; }
  .rl-bet-seg { min-height: 58px; }
  .rl-bettors-row { flex-direction: column !important; }
  .rl-bettor-col { width: 100% !important; }
  .rl-bet-input-row { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px !important; }
  .rl-amount-input { width: 100% !important; grid-column: 1 / -1; }
  .rl-confirm-btn { width: 100%; min-height: 48px; margin-left: 0 !important; grid-column: 1 / -1; }
  .rl-preset-btn { min-height: 42px; }
  .rl-autobet-panel { overflow: visible !important; }
  .rl-verify-card { width: calc(100vw - 16px) !important; max-height: 90dvh; overflow-y: auto; }

  /* ---------- JACKPOT ---------- */
  body.jackpot-page > .wrap { position: static !important; inset: auto !important; overflow: visible !important; }
  body.jackpot-page #jackpotApp, .jp-shell { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  .jp-shell { padding: 10px !important; gap: 10px !important; }
  .jp-topbar { min-height: 0 !important; padding: 10px !important; gap: 7px !important; }
  .jp-tb-sep { display: none !important; }
  .jp-pot-total { margin-left: auto; }
  .jp-main-row { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .jp-col { min-height: 0 !important; max-height: none !important; }
  .jp-col-fill, .jp-col-fill-panel { overflow: visible !important; max-height: none !important; }
  .jp-inv-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; max-height: 330px !important; overflow-y: auto !important; }
  .jp-pot-wrap { min-height: 240px !important; padding: 12px !important; }
  .jp-players { min-height: 190px; }
  .jp-deposit-panel { position: sticky; bottom: 8px; z-index: 25; box-shadow: 0 14px 35px rgba(0,0,0,.5); }
  .jp-deposit-btn { min-height: 48px; }
  .jp-verify-card { width: calc(100vw - 16px) !important; max-height: 90dvh; overflow-y: auto; }

  /* ---------- PAYLOAD ---------- */
  body.payload-page > .wrap, body.payload-page #payloadApp, .pd-shell { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  .pd-shell { padding: 10px !important; }
  .pd-layout { grid-template-columns: 1fr !important; gap: 10px !important; }
  .pd-banner { padding: 12px !important; }
  .pd-banner-title { font-size: 18px !important; }
  .pd-track-wrap { height: 175px !important; }
  .pd-controls { padding: 12px !important; }
  .pd-bet-input-row { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px !important; }
  .pd-num-wrap { width: 100%; grid-column: 1 / -1; }
  .pd-amount-input { width: 100% !important; min-height: 44px; }
  .pd-preset-btn { min-height: 42px; }
  .pd-confirm-btn { width: 100%; min-height: 48px; margin-left: 0 !important; grid-column: 1 / -1; }
  .pd-autoplay-row { display: grid !important; grid-template-columns: 1fr 1fr; }
  .pd-autoplay-field { min-width: 0; }
  .pd-auto-input { width: 100% !important; }
  .pd-autoplay-start, .pd-autoplay-stop { width: 100%; min-height: 44px; }
  .pd-bettors-list { max-height: 280px !important; }
  .pd-verify-card { width: calc(100vw - 16px) !important; max-height: 90dvh; overflow-y: auto; }

  /* ---------- PROFILE / SETTINGS ---------- */
  .profile-page .pf-settings-shell { width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; }
  .profile-page .pf-sidebar-nav-card .ptabs { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .profile-page .ptab-btn { min-height: 46px !important; }
  .profile-page .pf-layout-options { grid-template-columns: 1fr !important; }
  .profile-page .pf-layout-option { min-height: 74px; }
  .profile-page .pf-art-options { grid-template-columns: 1fr !important; }
  .profile-page .pf-modern-footer { padding-left: 10px !important; padding-right: 10px !important; }

  /* Daily-crate contents were desktop hover-only. Phones get an explicit
     disclosure button and a readable bottom sheet with exact equal odds. */
  .dc-mobile-drops-btn {
    display: flex !important; align-items: center; justify-content: center; gap: 6px;
    width: calc(100% - 20px); min-height: 38px; margin: 0 10px 10px;
    border-radius: 9px; border: 1px solid rgba(224,139,63,.26);
    background: rgba(224,139,63,.08); color: var(--accent,#e08b3f);
    font: inherit; font-size: 10.5px; font-weight: 800; position: relative; z-index: 4;
  }
  .dc-mobile-drops-overlay {
    position: fixed; inset: 0; z-index: 5000; display: none; align-items: flex-end;
    padding: 8px; background: rgba(5,7,10,.82); backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  .dc-mobile-drops-overlay.open { display: flex; }
  body.dc-mobile-overlay-open { overflow: hidden !important; }
  .dc-mobile-drops-card {
    width: 100%; max-height: 84dvh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--panel,#171a20); border: 1px solid var(--border,#30343c);
    border-radius: 18px 18px 12px 12px; padding: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.7);
  }
  .dc-mobile-drops-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: sticky; top: -12px; z-index: 2; margin: -12px -12px 8px; padding: 12px;
    background: rgba(23,26,32,.98); border-bottom: 1px solid var(--border,#30343c);
  }
  .dc-mobile-drops-head > div { min-width: 0; }
  .dc-mobile-drops-head strong { display: block; font-size: 14px; }
  .dc-mobile-drops-head small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }
  .dc-mobile-drops-close {
    width: 42px; height: 42px; min-width: 42px; display: grid; place-items: center;
    border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text);
  }
  .dc-mobile-drop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 7px 3px; border-top: 1px solid rgba(255,255,255,.06); }
  .dc-mobile-drop-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .dc-mobile-drop-main img, .dc-mobile-drop-placeholder { width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; display: grid; place-items: center; }
  .dc-mobile-drop-placeholder { border-radius: 8px; background: rgba(255,255,255,.04); color: var(--muted); }
  .dc-mobile-drop-name { min-width: 0; font-size: 11px; font-weight: 700; line-height: 1.25; }
  .dc-mobile-drop-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 10px; color: var(--muted); }
  .dc-mobile-drop-meta b { color: var(--accent); font-size: 11px; }

  /* ---------- TRANSACTIONS ---------- */
  .tx-row { padding: 11px !important; }
  .tx-row-header { align-items: flex-start !important; }
  .tx-right { flex-direction: column !important; align-items: flex-end !important; gap: 3px !important; }
  .tx-expand { padding-left: 0 !important; padding-right: 0 !important; }
  .tx-detail-grid { grid-template-columns: 1fr !important; }
  .tx-item-chip { max-width: 100%; }
}

@media (max-width: 560px) {
  header.modern-header { grid-template-columns: auto 1fr !important; }
  header.modern-header .brand-tf2 { display: none; }
  header.modern-header .brand { font-size: 18px !important; }
  header .balance-chip { max-width: 78px; }
  header .volume-control { display: none !important; }
  header .header-right { gap: 4px !important; }

  .wrap { padding-left: 10px !important; padding-right: 10px !important; }
  .panel { padding: 14px !important; }
  .modal-actions, .cmodal-actions { flex-direction: column; }

  .grid, .dep-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .item-card .img-wrap { height: 62px; }
  .item-card img { max-width: 60px; max-height: 60px; }

  .hm-actions { grid-template-columns: 1fr !important; }
  .home-game-card { min-height: 132px; padding: 15px !important; }

  .mc-team img { width: 18px !important; height: 18px !important; border-radius: 50% !important; }
  .mc-team .tn { font-size: 11px !important; }
  .mc-badges .mc-pill.series { display: none; }
  .bettor-row { flex-wrap: wrap; }
  .bettor-items { width: 100%; }

  .tf2-item-grid, .cf-picker-grid, .jp-inv-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .cr-crate-grid, .cr-your-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .cf-details-item-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }

  .rl-bet-input-row, .pd-bet-input-row { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .rl-amount-input, .pd-num-wrap, .rl-confirm-btn, .pd-confirm-btn { grid-column: 1 / -1 !important; }
  .pd-autoplay-row { grid-template-columns: 1fr !important; }

  .jp-topbar { align-items: flex-start !important; }
  .jp-pot-total { width: 100%; margin-left: 0 !important; }

  .profile-page .pf-sidebar-nav-card .ptabs { grid-template-columns: 1fr !important; }
}

@media (max-width: 380px) {
  header.modern-header { padding-left: 6px !important; padding-right: 6px !important; }
  header .balance-chip { max-width: 70px; padding-left: 5px !important; padding-right: 5px !important; }
  header .nav-link { padding-left: 9px !important; padding-right: 9px !important; font-size: 11px !important; }
  .grid, .dep-grid { gap: 6px !important; }
  .tf2-item-grid, .cf-picker-grid, .jp-inv-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}

@media (max-width: 760px) and (orientation: landscape) and (max-height: 520px) {
  header.modern-header { position: relative !important; }
  .chat { height: 92dvh !important; }
  .modal, .cmodal, .cf-modal, .tf2-reveal-panel, .cr-mobile-odds-card { max-height: 94dvh !important; }
}

@media (hover: none) and (pointer: coarse) {
  .item-card:hover, .cf-slot:hover, .tf2-slot:hover, .jp-inv-item:hover,
  .cr-crate-card:hover, .cf-flip-card:hover, .cf-game-card:hover { transform: none !important; }
  .profile-btn, .nav-link, .item-card, .cf-slot, .tf2-slot, .jp-inv-item, .cr-crate-card { -webkit-user-select: none; user-select: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}


/* ======================================================================
   MOBILE STABILITY PASS 2
   Fixes discovered during real-device/Chrome device-toolbar testing:
   - dynamic game styles that lock html/body to 100vh
   - fixed header descendants being positioned against the blurred header
   - Crates' desktop zoom shrinking the phone UI
   - Jackpot history wrapping into a full-height vertical strip
   ====================================================================== */
@media (max-width: 760px) {
  /* Some game scripts inject desktop-only html/body locks *after* this
     stylesheet loads (Crates in particular sets html,body overflow:hidden).
     !important here deliberately wins over those normal declarations so the
     phone always has one predictable, native page scroller. */
  html {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
  }
  body:not(.login) {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Explicit modal/sheet scroll locks still win when one of our mobile
     sheets is open. */
  body.mx-mobile-panel-active,
  body.dc-mobile-overlay-open { overflow-y: hidden !important; }

  /* backdrop-filter on an ancestor can establish the containing block for a
     position:fixed descendant in Chromium. That made the profile and
     notification "bottom sheets" anchor to the 96px header instead of the
     viewport and appear mostly off-screen. The mobile header is already
     virtually opaque, so dropping the blur costs nothing visually and makes
     fixed descendants truly viewport-fixed. */
  header.modern-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
    overflow: visible !important;
  }
  header .profile,
  header .bell { position: static !important; }
  header .profile .menu,
  header .bell .menu {
    inset: auto max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    transform: none !important;
    margin: 0 !important;
    max-height: min(78dvh, 620px) !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Crates has an old desktop shrink-to-fit routine that writes zoom:.55
     inline on a phone. Mobile is a real reflow now, so never scale the app. */
  body.crates-page #cratesApp { zoom: 1 !important; }
  .cr-crate-grid { gap: 10px !important; padding: 12px 10px 24px !important; }
  .cr-crate-card {
    aspect-ratio: auto !important;
    min-height: 248px !important;
    border-radius: 12px !important;
  }
  .cr-crate-card .cr-cc-img,
  .cr-cc-img {
    width: min(132px, 82%) !important;
    height: 112px !important;
    max-width: none !important;
    max-height: none !important;
    margin-top: 18px !important;
  }
  .cr-crate-card.cr-token-crate .cr-cc-img {
    width: min(144px, 88%) !important;
    height: 126px !important;
    margin-top: 10px !important;
  }
  .cr-crate-card .cr-cc-scrim { padding: 18px 8px 12px !important; gap: 5px !important; }
  .cr-crate-card .cr-cc-name,
  .cr-cc-name { font-size: 16px !important; line-height: 1.15 !important; letter-spacing: .65px !important; }
  .cr-crate-card .cr-cc-series { font-size: 11px !important; }
  .cr-crate-card .cr-cc-price,
  .cr-crate-card .cr-cc-price b { font-size: 15px !important; }
  .cr-crate-card .cr-cc-price .bolt-icon { width: 21px !important; height: 21px !important; }
  .cr-mobile-odds-btn { min-height: 40px !important; padding: 8px 11px !important; font-size: 12px !important; }

  /* Jackpot's desktop topbar lets history chips wrap. On a narrow phone that
     created dozens of chip rows, making the topbar hundreds of pixels tall
     and leaving only a thin strip of the actual game visible. Give history
     its own horizontal swipe row and put the pot before the inventory. */
  .jp-topbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 9px !important;
    row-gap: 8px !important;
    padding: 11px !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  .jp-tb-title { grid-column: 1; grid-row: 1; font-size: 18px !important; }
  .jp-tb-status {
    grid-column: 2; grid-row: 1;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 7px !important;
    white-space: normal !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }
  .jp-pot-total { font-size: 14px !important; white-space: nowrap; }
  .jp-tb-fair { grid-column: 3; grid-row: 1; font-size: 11px !important; }
  .jp-tb-history {
    grid-column: 1 / -1; grid-row: 2;
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    max-height: 34px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 7px !important;
    padding: 1px 1px 3px !important;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .jp-tb-history::-webkit-scrollbar { display: none; }
  .jp-hist-chip {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
  }
  .jp-main-row { display: flex !important; flex-direction: column !important; gap: 10px !important; }
  .jp-col-center { order: 1 !important; }
  .jp-col-inventory { order: 2 !important; overflow: visible !important; }
  .jp-pot-wrap {
    min-height: 360px !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 14px 10px !important;
  }
  .jp-players {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    align-items: start !important;
    align-content: start !important;
    justify-content: stretch !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: 20px 0 8px !important;
  }
  .jp-player {
    min-width: 0 !important;
    width: 100% !important;
    padding: 12px 7px !important;
    gap: 5px !important;
  }
  .jp-player-avatar { width: 64px !important; height: 64px !important; }
  .jp-player-name { max-width: 100% !important; font-size: 12px !important; }
  .jp-player-pct { font-size: 16px !important; }
  .jp-col-head { flex-wrap: wrap !important; gap: 7px !important; padding: 10px !important; }
  .jp-col-head > b { flex: 1 1 auto !important; }
  .jp-inv-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    max-height: 390px !important;
  }
  .jp-winner-banner { left: 10px !important; right: 10px !important; width: auto !important; }
}

@media (max-width: 380px) {
  .cr-crate-card { min-height: 232px !important; }
  .cr-crate-card .cr-cc-img,
  .cr-cc-img { width: min(118px, 80%) !important; height: 100px !important; }
  .cr-crate-card .cr-cc-name,
  .cr-cc-name { font-size: 14.5px !important; }
  .jp-player-avatar { width: 58px !important; height: 58px !important; }
}


/* ======================================================================
   MOBILE STABILITY PASS 3
   Real-device fixes: Coinflip tab exclusivity, Crates opening/reveal flow,
   and one consistent clickable guest balance/login state.
   ====================================================================== */
@media (max-width: 760px) {
  /* Crate opening: the desktop reveal UI deliberately uses absolute layers
     because its four columns have a fixed-height canvas. On a phone that
     canvas becomes a normal vertical document, so those layers overlapped
     the reel, totals and unbox card. During a spin, use document flow and
     show only the information relevant to the current opening. */
  body.crates-page .cr-page2-body {
    display: block !important;
    position: relative !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body.crates-page .cr-reels-section {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 0 10px !important;
  }
  body.crates-page .cr-hero-wrap { min-height: 0 !important; }
  body.crates-page .cr-spin-feed {
    position: static !important;
    inset: auto !important;
    display: none !important;
    width: 100% !important;
    opacity: 0 !important;
    padding: 8px 10px 12px !important;
    gap: 10px !important;
    box-sizing: border-box;
    transform: none !important;
  }
  body.crates-page .cr-spin-mode .cr-spin-feed {
    display: flex !important;
    opacity: 1 !important;
  }
  body.crates-page .cr-spin-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    width: 100% !important;
    max-width: none !important;
    gap: 8px !important;
  }
  body.crates-page .cr-spin-stat {
    width: auto !important;
    min-width: 0 !important;
    padding: 10px 8px !important;
    border-radius: 9px !important;
  }
  body.crates-page .cr-spin-stat-label { font-size: 10px !important; }
  body.crates-page .cr-spin-stat-value { font-size: 23px !important; }
  body.crates-page .cr-win-squares {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    width: 100% !important;
    max-width: none !important;
    gap: 8px !important;
  }
  body.crates-page .cr-win-square {
    width: 100% !important;
    max-width: none !important;
    height: 108px !important;
    transform: none;
  }
  /* The setup/history cards return after Continue. Keeping them mounted but
     invisible during the spin created large blank/overlapping regions. */
  body.crates-page .cr-spin-mode .cr-open-layout { display: none !important; }

  /* Turn the desktop click-anywhere overlay into an explicit bottom continue
     bar. It no longer blankets the vertically-scrolling page. */
  body.crates-page .cr-win-celebration {
    position: fixed !important;
    top: auto !important;
    left: 8px !important;
    right: 8px !important;
    bottom: max(74px, calc(env(safe-area-inset-bottom) + 10px)) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    justify-content: center !important;
    overflow: visible !important;
    z-index: 4500 !important;
  }
  body.crates-page .cr-win-hint {
    width: 100% !important;
    margin: 0 !important;
    padding: 13px 16px !important;
    text-align: center !important;
    font-size: 13px !important;
    color: var(--cr-cream) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.65);
  }
  body.crates-page .cr-reset-totals-btn {
    position: static !important;
    display: none !important;
    margin: 0 auto 10px !important;
    transform: none !important;
  }
  body.crates-page .cr-reset-totals-btn.show {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* The guest balance is intentionally an action, not fake account data. */
  body.guest-mode header .balance-chip { max-width: none !important; }
  body.guest-mode header .balance-chip .val { overflow: visible !important; }
  body.guest-mode .guest-balance-login {
    min-height: 42px !important;
    padding: 6px 9px !important;
    font-size: 10.5px !important;
  }
}

@media (max-width: 380px) {
  body.guest-mode .guest-balance-login span { display: none; }
  body.guest-mode .guest-balance-login { min-width: 42px !important; font-size: 16px !important; }
}


/* Mobile crate opening cleanup: while a spin/result is active, the selected
   crate controls and history panels are intentionally removed from layout. */
@media (max-width: 760px) {
  body.crates-page #crShell.cr-spin-mode .cr-open-layout {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}


@media (max-width: 760px) {
  .admin-activity-toolbar{align-items:flex-start;flex-direction:column;padding:14px;}
  .admin-activity-controls{width:100%;}.admin-activity-controls select{flex:1;min-width:0}.admin-activity-controls .btn{min-height:42px}
  .admin-activity-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.admin-activity-stat{padding:11px}.admin-activity-stat b{font-size:16px}
  .admin-last-deposit{align-items:flex-start}.admin-last-deposit-value b{font-size:14px}
  .admin-activity-grid.two-col,.admin-activity-grid.visitors-feed{grid-template-columns:1fr}
  .admin-game-usage{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}.admin-game-card{min-width:132px;flex:0 0 132px}
  .admin-activity-panel{padding:12px!important}.admin-activity-panel-head.feed-head{flex-direction:column}.admin-activity-filters{justify-content:flex-start}
  .admin-balance-row{grid-template-columns:100px minmax(70px,1fr) 30px}
  .admin-activity-event{grid-template-columns:32px minmax(0,1fr);}.admin-event-side{grid-column:2;text-align:left;display:flex;gap:8px;align-items:center}.admin-event-side b,.admin-event-side time{display:inline}
  .admin-activity-feed{max-height:none;overflow:visible}
}


/* Matches: on narrow phones, give each team its own row instead of forcing
   two long names into a single line. This prevents names/logos from being
   clipped behind the VS marker or the right-side status badges. */
@media (max-width: 700px) {
  .mc-row { align-items: flex-start !important; }
  .mc-teams {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    order: 1 !important;
    justify-content: stretch !important;
  }
  .mc-team {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 2px 0;
  }
  .mc-team .tn {
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    line-height: 1.25 !important;
    font-size: 12px !important;
  }
  .mc-team img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    border-radius: 5px !important;
  }
  .mc-vs {
    display: none !important;
  }
  .mc-badges {
    order: 2 !important;
    margin-left: 0 !important;
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
  }
  .mc-pot-mini {
    order: 2 !important;
    margin-left: auto;
  }
  .mc-chev { order: 2 !important; align-self: center; }
  .mc-tournament {
    white-space: normal !important;
    line-height: 1.3 !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* Match detail: long esports team names must stay fully visible on phones.
   The centered score remains compact while both team columns are allowed to
   shrink and wrap instead of ellipsizing behind it. */
@media (max-width: 700px) {
  .md2-scoreboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: start !important;
    width: 100% !important;
  }
  .md2-team {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .md2-team .nm {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
  }
  .md2-center { min-width: 38px !important; }
  .md2-odds-box .nm {
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
  }
  .md2-market-mode { line-height: 1.4 !important; padding: 0 4px; }
  .md2-bet-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  .md2-scoreboard { gap: 5px !important; }
  .md2-team img { width: 42px !important; height: 42px !important; }
  .md2-team .nm { font-size: 11px !important; }
  .md2-series-score { font-size: 21px !important; gap: 5px !important; }
}

@media (max-width: 700px) {
  .mc-inline-odds-box .nm {
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
  }
  .mc-my-bet-row {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  .mc-my-bet-row > span:first-child {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  .mc-inline-market-mode { line-height: 1.4 !important; }
}

/* ======================================================================
   MOBILE POLISH PASS 4 — Matches + Jackpot
   Keeps match cards readable at true phone widths and turns Jackpot's
   one-player state into an intentional "waiting for challenger" duel.
   ====================================================================== */
@media (max-width: 700px) {
  /* MATCHES — stop the desktop flex row from squeezing team names into a
     tiny right-hand column. The card becomes four clear mobile rows. */
  body.matches-page .mc-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "tournament tournament"
      "meta meta"
      "teams teams"
      "badges pot" !important;
    align-items: center !important;
    gap: 7px 9px !important;
    padding: 11px 11px 10px !important;
  }
  body.matches-page .mc-tournament {
    grid-area: tournament !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    color: var(--muted) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  body.matches-page .mc-time {
    grid-area: meta !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  body.matches-page .mc-game-logo { display: none !important; }
  body.matches-page .mc-teams {
    grid-area: teams !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
    margin: 1px 0 !important;
  }
  body.matches-page .mc-team {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    min-height: 40px !important;
    padding: 6px 8px !important;
    border: 1px solid rgba(255,255,255,.055) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.025) !important;
  }
  body.matches-page .mc-team img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    border-radius: 5px !important;
  }
  body.matches-page .mc-team .tn {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 12.5px !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  body.matches-page .mc-team-odds {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 47px !important;
    min-height: 24px !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(224,139,63,.28) !important;
    background: rgba(224,139,63,.10) !important;
    color: var(--accent) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }
  body.matches-page .mc-vs {
    display: block !important;
    width: 100% !important;
    height: 10px !important;
    margin: -2px 0 !important;
    text-align: center !important;
    color: var(--muted) !important;
    font-size: 8.5px !important;
    line-height: 10px !important;
    text-transform: uppercase !important;
  }
  body.matches-page .mc-badges {
    grid-area: badges !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  body.matches-page .mc-badges .mc-pill.odds { display: none !important; }
  body.matches-page .mc-pill,
  body.matches-page .mc-watch-btn {
    font-size: 9.5px !important;
    min-height: 24px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  body.matches-page .mc-pot-mini {
    grid-area: pot !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: end !important;
    font-size: 9.5px !important;
    white-space: nowrap !important;
  }
  body.matches-page .mc-chev { display: none !important; }
  body.matches-page .match-day-label {
    margin: 14px 0 7px !important;
    font-size: 9.5px !important;
  }

  /* JACKPOT — the arena should fit its actual contents on mobile instead of
     reserving desktop kill-cam height while only one person is in the pot. */
  body.jackpot-page .jp-pot-wrap {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 11px !important;
  }
  body.jackpot-page .jp-pot-wrap.jp-player-count-1 { min-height: 230px !important; }
  body.jackpot-page .jp-pot-wrap.jp-player-count-2 { min-height: 285px !important; }
  body.jackpot-page .jp-pot-wrap.jp-player-count-3,
  body.jackpot-page .jp-pot-wrap.jp-player-count-4 { min-height: 330px !important; }
  body.jackpot-page .jp-players {
    flex: none !important;
    width: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    align-content: center !important;
    gap: 8px !important;
    padding: 14px 0 8px !important;
    overflow: visible !important;
  }
  body.jackpot-page .jp-player,
  body.jackpot-page .jp-challenger-slot {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 164px !important;
    box-sizing: border-box !important;
    padding: 10px 6px !important;
    gap: 5px !important;
  }
  body.jackpot-page .jp-player-avatar {
    width: 68px !important;
    height: 68px !important;
  }
  body.jackpot-page .jp-player-name {
    max-width: 100% !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }
  body.jackpot-page .jp-player-pct { font-size: 17px !important; }
  body.jackpot-page .jp-player-val { font-size: 10.5px !important; }
  body.jackpot-page .jp-challenger-icon {
    width: 58px !important;
    height: 58px !important;
    font-size: 25px !important;
  }
  body.jackpot-page .jp-challenger-slot b { font-size: 11px !important; }
  body.jackpot-page .jp-challenger-slot span {
    max-width: 120px !important;
    font-size: 9.5px !important;
  }

  /* Inventory controls become two intentional rows rather than one cramped
     toolbar. Item cards are larger and easier to tap/read on a phone. */
  body.jackpot-page .jp-col-head {
    display: grid !important;
    grid-template-columns: 34px minmax(0,1fr) !important;
    gap: 7px !important;
    padding: 10px !important;
    align-items: center !important;
  }
  body.jackpot-page .jp-col-head > b {
    grid-column: 1 / -1 !important;
    width: auto !important;
    font-size: 12.5px !important;
  }
  body.jackpot-page .jp-icon-btn {
    grid-column: 1 !important;
    width: 34px !important;
    height: 34px !important;
  }
  body.jackpot-page .jp-sort-wrap {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
  }
  body.jackpot-page .jp-deposit-btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 42px !important;
  }
  body.jackpot-page .jp-deposit-total {
    grid-column: 1 / -1 !important;
    justify-self: end !important;
    margin: -2px 2px 0 0 !important;
    font-size: 13px !important;
  }
  body.jackpot-page .jp-inv-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 7px !important;
    padding: 7px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.jackpot-page .jp-inv-item {
    min-width: 0 !important;
    border-radius: 10px !important;
  }
  body.jackpot-page .jp-note {
    padding: 8px 10px 11px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 360px) {
  body.matches-page .mc-row { padding: 9px !important; }
  body.matches-page .mc-team { grid-template-columns: 25px minmax(0,1fr) auto !important; gap: 6px !important; padding: 5px 6px !important; }
  body.matches-page .mc-team img { width: 25px !important; height: 25px !important; }
  body.matches-page .mc-team .tn { font-size: 11.5px !important; }
  body.matches-page .mc-team-odds { min-width: 44px !important; font-size: 9.5px !important; }
  body.jackpot-page .jp-player-avatar { width: 60px !important; height: 60px !important; }
  body.jackpot-page .jp-player,
  body.jackpot-page .jp-challenger-slot { min-height: 152px !important; }
}


@media (max-width: 700px) {
  body.jackpot-page .jp-topbar {
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
  }
  body.jackpot-page .jp-tb-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }
  body.jackpot-page .jp-tb-fair {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
  body.jackpot-page .jp-tb-status {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  body.jackpot-page .jp-tb-history {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
  body.jackpot-page .jp-deposit-btn:disabled {
    background: rgba(232,200,64,.065) !important;
    border: 1px solid rgba(232,200,64,.16) !important;
    color: var(--jp-muted) !important;
    opacity: 1 !important;
  }
  body.jackpot-page .jp-col-head.jp-deposit-locked .jp-deposit-total {
    display: none !important;
  }
}

@media (max-width: 360px) {
  body.jackpot-page .jp-inv-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

/* ======================================================================
   MOBILE HOTFIX V10 — full-width Matches/Jackpot on classic UI
   The classic Matches stylesheet turns .mx-shell into a column but keeps
   align-items:flex-start, which lets .mx-main shrink to its intrinsic width.
   Force the mobile content columns to stretch across the phone.
   ====================================================================== */
@media (max-width: 900px) {
  body.matches-page .mx-wrap,
  body.matches-page .mx-shell,
  body.matches-page .mx-main,
  body.matches-page #matchList,
  body.jackpot-page .jp-shell,
  body.jackpot-page .jp-main-row,
  body.jackpot-page .jp-col,
  body.jackpot-page .jp-col-center,
  body.jackpot-page .jp-col-inventory {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.matches-page .mx-shell {
    align-items: stretch !important;
  }
  body.matches-page .mx-main {
    align-self: stretch !important;
    flex: none !important;
  }
  body.matches-page .mc {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 700px) {
  body.matches-page .mx-wrap {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  body.matches-page .mx-sidebar,
  body.matches-page .mx-main {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Give Jackpot the same edge-to-edge usable width as the other game pages. */
  body.jackpot-page .jp-shell {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  body.jackpot-page .jp-topbar,
  body.jackpot-page .jp-pot-wrap,
  body.jackpot-page .jp-col-inventory {
    width: 100% !important;
    max-width: 100% !important;
  }
  body.jackpot-page .jp-topbar {
    padding: 10px !important;
  }
  body.jackpot-page .jp-tb-title {
    font-size: 16px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
  body.jackpot-page .jp-tb-status {
    gap: 4px 6px !important;
    font-size: 10.5px !important;
  }
  body.jackpot-page .jp-pot-total {
    font-size: 12px !important;
  }
  body.jackpot-page .jp-tb-fair {
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  /* One-player rounds should read like a duel lobby, not a half-empty arena. */
  body.jackpot-page .jp-pot-wrap.jp-player-count-1 {
    min-height: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  body.jackpot-page .jp-pot-wrap.jp-player-count-1 .jp-players {
    align-content: start !important;
    padding: 8px 0 !important;
  }
  body.jackpot-page .jp-pot-wrap.jp-player-count-1 .jp-player,
  body.jackpot-page .jp-pot-wrap.jp-player-count-1 .jp-challenger-slot {
    min-height: 150px !important;
  }
}

@media (max-width: 360px) {
  body.matches-page .mx-wrap,
  body.jackpot-page .jp-shell {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}


/* ======================================================================
   UX HOTFIX V11 — readable empty-state guidance
   ====================================================================== */
@media (max-width: 700px) {
  body.jackpot-page .jp-challenger-slot b {
    font-size: 13.5px !important;
    line-height: 1.2 !important;
  }
  body.jackpot-page .jp-challenger-slot span {
    max-width: 160px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  body.coinflip-page .cf-empty-steps {
    gap: 7px !important;
  }
  body.coinflip-page .cf-empty-steps span {
    padding: 7px 10px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
}

/* Free-bonus header CTA stays readable in the horizontally scrollable mobile nav. */
@media(max-width:760px){
  header .nav-free-bonus-btn{min-width:max-content!important;color:#ffc765!important;}
  header .nav-free-bonus-btn::before{inset:5px 5px!important;}
  .free-bonus-modal-amount strong{font-size:32px;}
  .free-bonus-modal-rule{padding:9px 10px;}
}


@media (max-width: 640px){
  .home-free-bonus-cta{width:100%;min-height:48px;font-size:12px!important;}
  .free-bonus-modal-rule small{font-size:11px;}
}


@media (max-width:640px){
  .free-bonus-header-bolt{width:14px!important;height:14px!important;}
  .free-bonus-burst-bolt{width:20px!important;height:20px!important;}
  .free-bonus-modal-bolt{width:16px!important;height:16px!important;}
  .home-free-bonus-cta .free-bonus-cta-bolt{width:13px!important;height:13px!important;}
}


@media (max-width:640px){
  .free-bonus-header-bolt{width:14px!important;height:14px!important;}
  .free-bonus-burst-bolt{width:22px!important;height:22px!important;}
  .free-bonus-kicker-bolt{width:10px!important;height:10px!important;}
  .free-bonus-pill-bolt{width:11px!important;height:11px!important;}
  .free-bonus-modal-bolt{width:16px!important;height:16px!important;}
  .home-free-bonus-cta .free-bonus-cta-bolt,.cmodal-btn-confirm .free-bonus-cta-bolt{width:13px!important;height:13px!important;}
}


@media (max-width:640px){
  .free-bonus-header-bolt{width:16px!important;height:16px!important;}
  .free-bonus-burst-bolt{width:28px!important;height:28px!important;}
  .free-bonus-modal-rule small{font-size:12px!important;line-height:1.58!important;}
  .free-bonus-modal-note{font-size:12.5px!important;line-height:1.62!important;}
}


@media (max-width:640px){
  .free-bonus-header-bolt{
    width:19px!important;
    height:19px!important;
    flex-basis:19px!important;
    vertical-align:-4px!important;
  }
  .free-bonus-burst-bolt{
    width:75%!important;
    height:75%!important;
  }
  .free-bonus-modal-bolt{
    width:22px!important;
    height:22px!important;
    flex-basis:22px!important;
  }
  .free-bonus-modal-rule i,
  .free-bonus-rule-steam,
  .free-bonus-rule-bolt{
    width:20px!important;
    min-width:20px!important;
    height:20px!important;
    flex-basis:20px!important;
  }
  .cmodal-btn-confirm .free-bonus-cta-bolt{
    width:15px!important;
    height:15px!important;
  }
}