/* MOBILE BOTTOM NAV */
.mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-width: 393px; margin: 0 auto; height: calc(72px + env(safe-area-inset-bottom, 0px)); align-items: center; justify-content: center; gap: 21px; padding: 10px 24px calc(10px + env(safe-area-inset-bottom, 0px)); background-color: var(--bg-secondary); border-top: 1px solid var(--border-color); z-index: 1000; }
.mobile-bottom-nav__inner { display: flex; width: 100%; max-width: 357px; align-items: stretch; justify-content: space-between; position: relative; margin-left: -6px; margin-right: -6px; }
.mobile-bottom-nav__item { display: flex; flex-direction: column; width: 52.2px; align-items: center; justify-content: space-between; gap: 6px; position: relative; background: none; border: none; cursor: pointer; padding: 4px 0; color: inherit; text-decoration: none; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: opacity 0.2s, color 0.2s; height: 100%; }
/* Every item blue-grey; the current one (--active: the page you are on, or the open menu / chat / account sheet) a gold
   icon, bright words and a small gold block under them (owner 2026-10-16, a reference bar: "do something similiar with
   the yellow colour on our site and our buttons"). Icons are masks painted in the item's colour (MobileBottomNav.tsx
   NavIcon), Font Awesome ones take it as their colour. Undo ../removed-features-backup/crisp-icons-2026-10-16/README.txt */
.mobile-bottom-nav__item { color: var(--text-dim); }
/* every icon the same 22 px box: inline SVG in the item's colour, each trimmed to its own drawing (SiteIcon), so they
   all reach the same size (owner 2026-10-16: "Make sure all icons on site are even in length and size"); never a CSS
   mask here — iPhone Safari stopped painting them while the page scrolled ("Bottom footer icons randomly disapeer") */
.mobile-bottom-nav__icon { position: relative; display: block; flex-shrink: 0; width: 24px; height: 24px; color: inherit; fill: currentColor; overflow: visible; }
.mobile-bottom-nav__label { position: relative; align-self: stretch; font-family: "RM Neue-Bold", Helvetica, sans-serif; font-weight: 700; color: var(--text-dim); font-size: 10px; text-align: center; letter-spacing: 0; line-height: 11px; }
.mobile-bottom-nav__item--active { color: var(--accent); }
.mobile-bottom-nav__item--active .mobile-bottom-nav__label { color: var(--text-bright); }
/* the gold block under the current item: a tiny castle block (light top edge, dark bottom edge), grown in from the middle */
.mobile-bottom-nav__item::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; width: 22px; height: 4px; margin-left: -11px;
  border-radius: 1px; background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  transform: scaleX(0); opacity: 0; transition: transform 0.2s var(--ease-out, ease-out), opacity 0.2s;
  pointer-events: none;
}
.mobile-bottom-nav__item--active::after { transform: scaleX(1); opacity: 1; }
@media (hover: hover) {
  .mobile-bottom-nav__item:not(.mobile-bottom-nav__item--active):hover { color: var(--text-primary); }
  .mobile-bottom-nav__item:not(.mobile-bottom-nav__item--active):hover .mobile-bottom-nav__label { color: var(--text-primary); }
}
/* Tap/press feedback — bottom bar is fixed (never scrolls), so :active is safe here */
.mobile-bottom-nav__item { transition: color 0.18s, transform 0.12s ease; }
.mobile-bottom-nav__label { transition: color 0.18s; }
.mobile-bottom-nav__item:active { transform: scale(0.9); }
@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav__item, .mobile-bottom-nav__item::after, .mobile-bottom-nav__label { transition: none; }
}

/* Unread notifications: a dot on the Account icon (phones have no bell in the header) */
.mobile-bottom-nav__icon-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.mobile-bottom-nav__dot { position: absolute; top: -1px; right: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--bg-secondary); pointer-events: none; }

/* The menu's music note (owner 2026-10-24: "Audio button shouldn't show on games on mobile it should show that's it's in
   menu at the bottom maybe on the top right of the menu icon in footer is a little music thing just to let them know"):
   a game has no sound button on a phone, sound and music are the menu's switches — the pixel note (the side menu's own
   music icon) in gold on a small block of the bar's colour at the Menu icon's top-right corner, 12 px = one screen px a
   block of its 12 x 12 grid (crisp). Decoration only; it never moves. Undo
   ../removed-features-backup/phone-sound-in-menu-2026-10-24/README.txt */
.mobile-bottom-nav__music { position: absolute; top: -6px; right: -11px; display: flex; padding: 2px; border-radius: 2px; background: var(--bg-secondary); box-shadow: 0 0 0 1px var(--border-color); color: var(--accent); pointer-events: none; }
.mobile-bottom-nav__music svg.is-px { width: 12px !important; height: 12px !important; display: block; }

/* MOBILE ACCOUNT MENU */
.mobile-account-menu-wrap { position: fixed; inset: 0; z-index: 10002; pointer-events: none; background: rgba(0,0,0,0); transition: background 0.3s ease, visibility 0s 0.35s; visibility: hidden; }
.mobile-account-menu-wrap.open { pointer-events: auto; background: rgba(0,0,0,0.45); visibility: visible; transition: background 0.3s ease, visibility 0s 0s; }
.mobile-account-menu { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; margin: 0; background: var(--bg-popup); border-radius: 16px 16px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,0.4); padding: 0 0 calc(12px + env(safe-area-inset-bottom,0px)); max-height: min(78vh,520px); overflow-y: auto; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); }
.mobile-account-menu-wrap.open .mobile-account-menu { transform: translateY(0); }
.mobile-account-menu__handle-zone { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px 0 8px; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mobile-account-menu__handle { width: 44px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255,0.25); pointer-events: none; }
.mobile-account-menu__handle-zone:active .mobile-account-menu__handle { background: rgba(255, 255, 255,0.4); }
.mobile-account-menu__sections { padding: 4px 0 0; }
.mobile-account-menu__section { padding: 4px 14px; }
.mobile-account-menu__section + .mobile-account-menu__section { border-top: 1px solid rgba(255, 255, 255,0.06); margin-top: 2px; padding-top: 6px; }
.mobile-account-menu__section-title { padding: 6px 14px 2px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255, 255, 255,0.3); font-family: "RM Neue-Bold", Helvetica, Arial, sans-serif; }
.mobile-account-menu__group { background: rgba(255, 255, 255,0.03); border-radius: var(--radius-lg); overflow: hidden; }
.mobile-account-menu__group + .mobile-account-menu__group { margin-top: 6px; }
.mobile-account-menu__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; box-sizing: border-box; font-size: var(--fs-sm); font-family: inherit; text-align: left; text-decoration: none; cursor: pointer; border: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; margin: 0; border-radius: 0; }
.mobile-account-menu__item--default { background: rgba(255, 255, 255,0.04); color: rgba(255, 255, 255,0.85); }
@media (hover: hover) {
  .mobile-account-menu__item--default { transition: background 0.15s; }
  .mobile-account-menu__item--default:hover { background: rgba(255, 255, 255,0.06); }
}
.mobile-account-menu__item--default:active { background: rgba(255, 255, 255,0.08); }
.mobile-account-menu-wrap .mobile-account-menu .user-menu-icon { width: 20px; color: #fff; flex-shrink: 0; font-size: 15px; text-align: center; }
.mobile-account-menu__item--danger { background: transparent; color: var(--danger); }
@media (hover: hover) {
  .mobile-account-menu__item--danger { transition: background 0.15s; }
  .mobile-account-menu__item--danger:hover { background: rgba(var(--danger-rgb),0.08); }
}
.mobile-account-menu__item--danger:active { background: rgba(var(--danger-rgb),0.1); }
@media (min-width: 769px) { .mobile-account-menu-wrap { display: none !important; visibility: hidden !important; } }

@media (max-width: 768px) {
    .mobile-bottom-nav { display: flex; max-width: none; width: 100%; height: calc(70px + env(safe-area-inset-bottom, 0px)); padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); gap: 0; justify-content: stretch; z-index: 1002; touch-action: manipulation; }
    /* pinned to the screen's bottom edge (owner 2026-10-23: the bar "sometimes moved to the middle of the screen and
       stayed there"): its own layer, so iPhone Safari moves it with the screen while the address bar slides, and the
       iPhone's side insets (a phone held sideways) inside it; while the on-screen keyboard is up it steps aside
       (html.kb-open, lib/phoneBar.ts). Undo ../removed-features-backup/mobile-list-2026-10-23/README.txt (item 8) */
    .mobile-bottom-nav { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
    html.kb-open .mobile-bottom-nav { visibility: hidden; }
    .mobile-bottom-nav__inner { max-width: none; width: 100%; min-width: 0; margin: 0; padding: 0; align-items: stretch; justify-content: space-between; }
    .mobile-bottom-nav__item { flex: 1; min-width: 0; width: auto; max-width: none; justify-content: center; align-items: center; }
    .mobile-bottom-nav__label { white-space: nowrap; }
}
@media (max-width: 480px) {
    .mobile-bottom-nav { height: calc(66px + env(safe-area-inset-bottom, 0px)); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
    .mobile-bottom-nav__label { font-size: 10px; }
}

/* Short phones (iPhone SE …): the account sheet holds 10 rows since Bet History + Transactions were added
   (site-UI audit 2026-10-09) — slightly tighter rows and a taller sheet so Logout is still on screen. */
@media (max-height: 700px) {
  .mobile-account-menu { max-height: min(90vh, 520px); }
  .mobile-account-menu__item { padding-top: 10px; padding-bottom: 10px; }
  .mobile-account-menu__group + .mobile-account-menu__group { margin-top: 4px; }
}

/* ── Small tablets held upright (601–768px, e.g. iPad mini; owner 2026-10-10, same pattern as the menu and
   Rewards panels): the Account sheet is a 420px panel on the right (under the Account button) between the
   header and the bottom bar, the page visible and dimmed behind it (the wrap); a tap on the page or on the
   Account button closes it. No drag-down handle (MobileAccountMenu.tsx skips the gesture here).
   Undo: ../removed-features-backup/site-answers-2026-10-10/README.txt ── */
@media (min-width: 601px) and (max-width: 768px) and (orientation: portrait) {
  .mobile-account-menu-wrap { top: 62px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .mobile-account-menu {
    top: 62px;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    left: auto;
    right: 0;
    width: min(420px, 100%);
    max-height: none;
    padding: 12px 0 12px;
    border-radius: 0;
    border-left: 1px solid var(--border-color);
    box-shadow: var(--shadow-xl);
    /* !important: the phone drag gesture writes an inline translateY */
    transform: translateX(100%) !important;
  }
  .mobile-account-menu-wrap.open .mobile-account-menu { transform: none !important; }
  .mobile-account-menu__handle-zone { display: none; }
}
@media (min-width: 601px) and (max-width: 768px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
  .mobile-account-menu-wrap, .mobile-account-menu { transition: none; }
}

/* ── Phones: the account sheet stops at the bottom bar (owner 2026-10-17: "on mobile theres a bug when you try switch
   from chat back to lobby via the bottom footer" — and with the account sheet open the bar was under it, so a tap on
   Chat / Menu hit the sheet instead). Like the chat, the sheet now ends on the bar's top edge: the bar stays visible
   and every item works (since 2026-10-23 the sheet opens from the phone header's Account button, MobileHeader.tsx; its
   backdrop covers the header, so a tap there just closes it); the sheet slides up out of the bar and back into it
   (clip-path on the wrap). Tablets held upright keep their side panel (601–768 px block above). Undo
   ../removed-features-backup/chat-to-lobby-2026-10-17/README.txt ── */
@media (max-width: 768px) { :root { --mbn-h: calc(70px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 480px) { :root { --mbn-h: calc(66px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 600px), (max-width: 768px) and (orientation: landscape) {
  .mobile-account-menu-wrap { bottom: var(--mbn-h); clip-path: inset(0); }
  .mobile-account-menu {
    bottom: var(--mbn-h);
    padding-bottom: 12px;
    max-height: min(78vh, 580px, calc(100vh - var(--mbn-h) - 64px));   /* 580: every row incl. Logout on a 390 x 844 phone */
  }
}
@media (max-width: 600px) and (max-height: 700px), (max-width: 768px) and (orientation: landscape) and (max-height: 700px) {
  .mobile-account-menu { max-height: min(90vh, 580px, calc(100vh - var(--mbn-h) - 64px)); }
}