/* pack19 AA (2026-11-05): the mobile-native shell. Loaded after main.css. Everything here applies to screens up to
   1024 px wide (phones and portrait tablets); desktop output is untouched. Plan: audit19/AA-mobile-sound-plan.md */
:root {
  --m-gutter: 16px; --m-topbar: 56px; --m-tabbar: 64px;
  --m-safe-b: env(safe-area-inset-bottom, 0px); --m-safe-t: env(safe-area-inset-top, 0px);
  --m-radius: 16px; --m-radius-sm: 12px; --m-cta: 52px; --m-sticky: 0px;
  --m-surface: rgba(255,255,255,.04); --m-surface-2: rgba(255,255,255,.07); --m-line: rgba(255,255,255,.08);
  --m-gold: #FFD80A; --m-green: #4AF65B; --m-bg: #0d0d0d;
}
@media (max-width: 1024px) {
  html { -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
  body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
  button, a, [role="button"], .ripple-button, .kd-cursor { touch-action: manipulation; }
  /* iOS zooms into inputs under 16 px */
  input, select, textarea, .form-control { font-size: 16px !important; }
  input[type="number"] { -moz-appearance: textfield; }
  img, video, canvas, svg { max-width: 100%; }

  /* ---- shell: top bar + tab bar ---- */
  #app { padding-bottom: calc(var(--m-tabbar) + var(--m-safe-b) + var(--m-sticky)) !important; min-height: 100dvh; }
  .kd-main-nav { position: sticky; top: 0; z-index: 1200; min-height: calc(var(--m-topbar) + var(--m-safe-t)); padding-top: var(--m-safe-t) !important; padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; background: rgba(13,13,13,.92); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--m-line); }
  .kd-main-nav .kd-logo { width: 132px; height: auto; }
  /* the old 7-item phone bar, its deposit bar and the drawer are replaced by the tab bar (MobileNav.vue) */
  .kd-bt-nav-wrap, .kd-mobile-deposit-bar, .kd-mobile-bt-nav { display: none !important; }
  .kd-main-nav-sect-left > .d-flex { display: none !important; }
  /* the compact balance pill */
  .kd-balance-box { gap: 8px; }
  .kd-balance-box .kd-balance-wrap { margin-right: 0 !important; }
  .kd-balance-box .kd-btn-small { min-height: 40px; padding: 0 14px !important; border-radius: 12px !important; }

  /* ---- content width & gutters ---- */
  .kd-content-max, .container-fluid.kd-page-opening { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }
  .kd-app-side { padding-bottom: 8px; }

  /* ---- Bootstrap modals become bottom sheets ---- */
  .modal { padding: 0 !important; }
  .modal .modal-dialog { position: fixed; left: 0; right: 0; bottom: 0; top: auto; margin: 0 !important; width: 100% !important; max-width: none !important; transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.9,.3,1) !important; display: flex; align-items: flex-end; min-height: 0; }
  .modal.show .modal-dialog, .modal.in .modal-dialog { transform: none; }
  .modal .modal-content { width: 100%; max-height: 92dvh; display: flex; flex-direction: column; border-radius: 22px 22px 0 0 !important; border: 1px solid var(--m-line) !important; border-bottom: 0 !important; padding-bottom: calc(var(--m-safe-b) + 6px) !important; overflow: hidden; box-shadow: 0 -20px 60px rgba(0,0,0,.6); }
  .modal .modal-content::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); margin: 10px auto 2px; flex: none; }
  .modal .modal-header { flex: none; padding: 8px 16px 10px !important; }
  .modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 16px 16px !important; }
  .modal .modal-footer { flex: none; padding: 10px 16px !important; }
  .modal .close, .modal [data-dismiss="modal"] { min-width: 44px; min-height: 44px; }
  .modal-open { overflow: hidden; } /* no position:fixed here: it would scroll the page to the top behind every sheet */
  .modal-backdrop { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

  /* ---- chat and rewards as full-height sheets (components keep their markup) ---- */
  .kd-chatright:not(.kd-hidechatd) { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; height: 92dvh !important; max-height: 92dvh; z-index: 1950 !important; border-radius: 22px 22px 0 0; overflow: hidden; box-shadow: 0 -20px 60px rgba(0,0,0,.6); padding-bottom: var(--m-safe-b); background: #121016; }
  .kd-chat { height: 100% !important; display: flex; flex-direction: column; }
  .kd-chat-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .kd-chat-box-wrap { flex: none; padding-bottom: calc(var(--m-safe-b) + 6px); }
  .kd-chat-input { font-size: 16px !important; min-height: 44px; }

  /* ---- toasts above the tab bar ---- */
  .tst-stack, .p19-toasts, .kd-toasts, #toast-container { bottom: calc(var(--m-tabbar) + var(--m-safe-b) + 12px) !important; top: auto !important; left: var(--m-gutter) !important; right: var(--m-gutter) !important; width: auto !important; max-width: none !important; }

  /* ---- generic helpers pages may use ---- */
  .m-scroll-x { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .m-scroll-x::-webkit-scrollbar { display: none; }
  .m-scroll-x > * { scroll-snap-align: start; flex: none; }
  .m-sticky-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--m-tabbar) + var(--m-safe-b)); z-index: 1100; padding: 10px var(--m-gutter) 10px; background: linear-gradient(180deg, rgba(13,13,13,0), rgba(13,13,13,.96) 30%); display: flex; gap: 10px; align-items: center; }
  .m-sticky-bar > .kd-btn-primary, .m-sticky-bar > button, .m-sticky-bar > a { flex: 1; min-height: var(--m-cta); border-radius: 14px; font-weight: 800; }
  .m-card { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-radius); padding: 14px; }
  .m-row { display: flex; align-items: center; gap: 12px; min-height: 48px; }
  .m-seg { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
  .m-seg::-webkit-scrollbar { display: none; }
  .m-seg > * { flex: none; scroll-snap-align: start; min-height: 40px; padding: 0 14px; border-radius: 10px; }
  .m-hide { display: none !important; }
  .m-show { display: block !important; }
  .kd-btn-primary, .kd-btn-green, .kd-btn-small, .btn { min-height: 44px; }
  .kd-btn-primary:active, .kd-btn-green:active, .btn:active, .ripple-button:active { transform: scale(.97); transition: transform .12s; }

  /* ---- tables degrade to stacked rows unless a page opts out with .m-table-keep ---- */
  table.kd-table:not(.m-table-keep), .table-responsive table:not(.m-table-keep) { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 767px) {
  :root { --m-topbar: 52px; }
  .kd-main-nav .kd-logo { width: 116px; }
  .modal .modal-content { max-height: 94dvh; }
  h1 { font-size: 24px; } h2 { font-size: 20px; } h3 { font-size: 17px; }
}
@media (max-width: 400px) {
  :root { --m-gutter: 12px; }
  .kd-main-nav .kd-logo { width: 104px; }
}
/* landscape phones: keep the tab bar but tighten it */
@media (max-width: 1024px) and (max-height: 480px) and (orientation: landscape) {
  :root { --m-tabbar: 52px; --m-topbar: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .modal .modal-dialog { transition: none !important; }
  .kd-btn-primary:active, .kd-btn-green:active, .btn:active, .ripple-button:active { transform: none; }
}
/* standalone (home-screen) mode: no browser chrome, give the top bar a little more room */
@media all and (display-mode: standalone) and (max-width: 1024px) {
  .kd-main-nav { padding-top: max(var(--m-safe-t), 8px) !important; }
}

/* ---- compact top bar (the tab bar owns Rewards / Me / Games; the header keeps logo, balance, Deposit, Chat) ---- */
@media (max-width: 1024px) {
  .kd-main-nav-sect-right { display: flex; align-items: center; gap: 8px; }
  .kd-main-nav-sect-right .kd-btn-green { display: none !important; }          /* Inventory lives in the Me sheet */
  .kd-main-nav-sect-right .rw-bell, .kd-main-nav-sect-right .kd-sound-toggle { display: none !important; } /* Rewards tab + Me sheet */
  .kd-balance-box { margin: 0 !important; padding: 0 !important; }
  .kd-balance-wrap { margin: 0 !important; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
  .kd-balance-wrap .kd-vs-color { display: none; }
  .kd-balance-stacked { margin-right: 8px !important; }
  .kd-balance-money { font-size: 14px !important; }
  .kd-main-nav-sect-right .kd-btn-primary.kd-btn-small { min-width: 0; }
  .kd-main-nav-sect-right .kd-btn-primary.kd-btn-small p { font-size: 13px; }
  .kd-main-nav-sect-right .kd-notify-bell { margin-left: 0 !important; }
  .kd-main-nav-sect-right .kd-notification { width: 40px; height: 40px; }
}
@media (max-width: 400px) {
  .kd-balance-stacked { display: none !important; }   /* points / diamonds stay in the Me sheet and the Quests hub */
  .kd-balance-wrap { padding: 6px 8px; }
}

/* ---- rewards drawer as a full-height sheet on mobile (same hide class as the chat: .kd-hidechatd) ---- */
@media (max-width: 1024px) {
  .kd-rewardsright { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; height: 92dvh !important; max-height: 92dvh; z-index: 1950 !important; border-radius: 22px 22px 0 0; overflow: hidden; box-shadow: 0 -20px 60px rgba(0,0,0,.6); padding-bottom: var(--m-safe-b) !important; transition-property: transform, opacity; }
  .kd-rewardsright.kd-hidechatd, .kd-chatright.kd-hidechatd { transform: translateY(100%); opacity: 1; }
  .kd-rewardsright > * { max-height: 100%; }
  /* a dim backdrop behind an open chat / rewards sheet */
}

/* ---- the page-in keyframe (main.css) scales the page container for 0.6 s; while it runs, every fixed bar inside the
   page is positioned against the scaled container. On mobile the page just fades in. ---- */
@media (max-width: 1024px) {
  .kd-page-opening { animation-name: m-page-fade !important; animation-duration: .18s !important; transform: none !important; }
  @keyframes m-page-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ---- late fixes from the review pass ---- */
@media (max-width: 1024px) {
  .kd-main-nav-sect-right .kd-notify-bell { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  /* toasts rise above a page's sticky action bar so they never cover the primary button */
  body:has(.m-sticky-bar) .tst-stack, body:has(.m-sticky-bar) .p19-toasts, body:has(.m-sticky-bar) .kd-toasts, body:has(.m-sticky-bar) #toast-container { bottom: calc(var(--m-tabbar) + var(--m-safe-b) + 88px) !important; }
}