/* ============================================================================
   StarRex mobile layer — phones & small tablets, portrait AND landscape.
   Loaded last on every public page. It only adds rules inside the media query below,
   so desktop is untouched. Pairs with mobile.js (bottom tab bar + "More" sheet).
   ============================================================================ */

/* the tab bar / sheet exist in the DOM only on phones (mobile.js), hidden everywhere else */
.m-tabbar,.m-sheet{display:none}

@media (max-width:900px), (hover:none) and (max-height:520px){
  html,body{max-width:100%;overflow-x:hidden}
  body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  img,canvas,video,svg{max-width:100%}
  *{-webkit-tap-highlight-color:transparent}
  /* inputs at 16px stop iOS from zooming the page when you tap them */
  input,select,textarea{font-size:16px!important;min-width:0;max-width:100%}
  .btn,button{min-height:40px}
  .card,.terminal>*,.exchange-terminal>*,.forex-workspace>*,.forex-lower-grid>*,.crash-layout>*{min-width:0}

  /* ---------- page frame ---------- */
  .wrap,.exchange-wrap{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .exchange-hero{padding:16px;gap:10px;margin-bottom:14px}
  .exchange-hero h1{font-size:26px;line-height:1.15}
  .exchange-hero p{font-size:14px;line-height:1.5}
  .card{padding:16px;border-radius:16px}
  footer{flex-direction:column;gap:6px;text-align:center;padding-bottom:12px}

  /* ---------- top bar: brand + account + ambient on ONE row; the page links move to the bottom tab bar ---------- */
  body.has-mtabs{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  body.has-mtabs .exchange-nav{position:sticky;top:0;z-index:800;padding:8px max(12px,env(safe-area-inset-left));flex-wrap:nowrap;gap:8px}
  body.has-mtabs .exchange-nav .exchange-main-links{flex:1;min-width:0;justify-content:flex-end;flex-wrap:nowrap;gap:8px!important;margin:0}
  body.has-mtabs .exchange-nav .exchange-main-links>a{display:none!important}
  body.has-mtabs .exchange-brand-link span{display:none}
  body.has-mtabs .exchange-nav [data-auth-slot]{margin-left:0;min-width:0}
  .exchange-menu,.member-dropdown{max-width:calc(100vw - 20px)}

  /* ---------- bottom tab bar ---------- */
  .m-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900;gap:2px;justify-content:space-around;align-items:stretch;
    padding:6px max(6px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom,0px));
    background:rgba(6,10,16,.93);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -10px 30px rgba(0,0,0,.35)}
  .m-tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;border-radius:12px;border:0;background:none;
    color:#8a94a6;font:600 10px/1.1 'Sora','Inter',system-ui,sans-serif;text-decoration:none;cursor:pointer}
  .m-tab i{font-style:normal;font-size:20px;line-height:1}
  .m-tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .m-tab.is-active{color:#fff;background:rgba(var(--amb-tint,25,230,240),.18);box-shadow:inset 0 0 0 1px rgba(var(--amb-tint,25,230,240),.38)}
  .m-sheet{position:fixed;inset:0;z-index:950}
  .m-sheet:not([hidden]){display:block}
  .m-sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .m-sheet-body{position:absolute;left:0;right:0;bottom:0;padding:14px 14px calc(84px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0;
    background:linear-gradient(180deg,#101826,#0a0f18);border:1px solid rgba(255,255,255,.1);border-bottom:0;max-height:75vh;overflow:auto}
  .m-sheet-body h4{margin:2px 4px 10px;font:700 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#7f8da3}
  .m-sheet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .m-sheet-grid a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:14px;background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);color:#e9edf4;text-decoration:none;font:600 12px 'Sora',system-ui,sans-serif}
  .m-sheet-grid a i{font-style:normal;font-size:22px}
  .m-sheet-grid a.is-active{border-color:rgba(var(--amb-tint,25,230,240),.6);background:rgba(var(--amb-tint,25,230,240),.14)}

  /* ---------- Forex ---------- */
  .forex-workspace,.forex-lower-grid,.exchange-terminal{grid-template-columns:minmax(0,1fr)!important}
  .chart-toolbar{flex-direction:column;align-items:stretch;gap:10px}
  .chart-meta{width:100%;flex-wrap:wrap;gap:6px}
  .chart-meta span,.chart-meta button{font-size:10px}
  .chart-zoom-help{flex:1 1 100%}
  .chart-size-group{flex:0 0 auto}
  .forex-chart-card{min-height:0!important}
  body.site-page.forex-pro .mc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .forex-order-ticket,.forex-watchlist{width:100%}

  /* ---------- Crash ---------- */
  .crash-shell{padding:14px}
  .crash-stage{aspect-ratio:auto!important;width:100%;max-width:100%;min-height:min(300px,64vw)!important}
  .crash-controls{grid-template-columns:1fr 1fr!important}
  .crash-controls .stake-input,.crash-controls>:first-child{grid-column:1/-1}
  .crash-layout{gap:14px}
  .crash-status-row{grid-template-columns:1fr 1fr!important}

  /* ---------- Profile ---------- */
  .pf-banner{padding:16px 14px;gap:12px}
  .pf-avatar{width:60px;height:60px}
  .pf-ident h2{font-size:20px;white-space:normal;overflow:visible;word-break:break-word}
  .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .pf-tile{padding:10px 12px}
  .pf-tile b{font-size:15px;word-break:break-word}
  .pf-customize{width:100%;text-align:center}

  /* ---------- Market / inventory / economy / lists ---------- */
  .market-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
  .inventory-layout,.server-grid{grid-template-columns:1fr!important}
  .wallet-row,.bank-row{flex-wrap:wrap}
  .wallet-row input,.bank-row input{flex:1 1 100%}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  pre,code{white-space:pre-wrap;word-break:break-word}
}

/* ---------- landscape phones: short screens — keep content visible, shrink chrome ---------- */
@media (hover:none) and (max-height:520px) and (orientation:landscape){
  body.has-mtabs{padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))}
  .m-tabbar{padding-top:3px;padding-bottom:calc(3px + env(safe-area-inset-bottom,0px))}
  .m-tab{flex-direction:row;gap:6px;padding:5px 4px;font-size:11px}
  .m-tab i{font-size:16px}
  .m-sheet-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .m-sheet-body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px));max-height:80vh}
  .exchange-hero{padding:10px 14px}
  .exchange-hero h1{font-size:20px}
  .exchange-hero p,.exchange-hero .exchange-status{display:none}
  .crash-stage{min-height:200px!important}
  .forex-workspace{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)!important}
  .forex-workspace>.forex-watchlist{display:none}
  .pf-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}