/* zamn-mobile.css — mobile/touch polish (mobile QA 2026-10-13). Scoped to touch/narrow screens. */
@media (pointer: coarse) {
  /* Dashboard footer: keyboard keycaps mean nothing on a phone; keep one row of labels. */
  ._footer_157tm_760 ._keycap_157tm_1379 { display: none !important; }
  ._footer_157tm_760 { flex-wrap: nowrap; justify-content: space-around; gap: 4px; }
  ._footer_157tm_760 button { min-height: 44px; min-width: 44px; padding: 0 6px; white-space: nowrap; }
  /* Hide the dashboard footer while the Friends guide is open (it showed through under the guide's own footer). */
  body:has(.gfx-box) ._footer_157tm_760 { visibility: hidden; }
  /* Tiles: Pin button was 33px wide. */
  ._pin_157tm_228 { min-width: 44px; min-height: 44px; }
  /* Game menus: keyboard key hints (Enter / Esc) are meaningless on touch. */
  ._key_t1xch_174 { display: none !important; }
  /* Leaderboards: tabs were ~24px tall. */
  ._tab_6rf5v_62, ._tabOn_6rf5v_63 { min-height: 44px; }
}
@media (max-width: 900px) {
  /* Nav pills: one swipeable row instead of two wrapped rows (frees ~70px on phones). */
  ._nav_157tm_113 { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none;
    padding-left: max(12px, env(safe-area-inset-left)) !important; padding-right: max(12px, env(safe-area-inset-right)) !important; }
  ._nav_157tm_113::-webkit-scrollbar { display: none; }
  ._nav_157tm_113 > button { flex: none; min-height: 44px; }
  ._body_157tm_158 { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  /* Settings notes were grey-on-green (and one at 70% opacity): unreadable. */
  ._note_157tm_440 { color: var(--dash-ink) !important; opacity: .9 !important; }
  /* Sign-up / sign-in fields were 34px tall. */
  ._screen_157tm_1 input:not([type=checkbox]):not([type=radio]), ._screen_157tm_1 select { min-height: 44px; }
  /* Leaderboards: 11px header with wide tracking ran RANK into GAMERTAG. */
  ._head_6rf5v_27 { font-size: 12px !important; letter-spacing: .04em !important; }
  ._head_6rf5v_27, ._row_6rf5v_96, ._you_6rf5v_97 { grid-template-columns: 40px minmax(0,1fr) 64px 48px !important; }
  ._live_6rf5v_19 { font-size: 12px; }
  ._board_6rf5v_1 { padding-top: max(20px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}
@media (max-width: 500px) {
  ._clock_157tm_121 { display: none; } /* the phone already shows the time */
  /* Friends guide: the active tab label was clipped ("Friends (0 Onlin"). */
  .gfx-tab.on { flex-grow: 3.3 !important; font-size: 14px !important; min-width: 0; }
  .gfx-tab.on .tx { overflow: hidden; text-overflow: ellipsis; }
}
/* Messenger full-screen on phones: keep the header clear of the notch / home bar. */
@media (max-width: 720px) {
  #zim { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }
}
/* In-game HUD, landscape phones: name/health card sat under CROUCH/USE and the
   equipment counters under SPRINT/LETHAL/TAC. Lift them above the touch controls. */
@media (pointer: coarse) and (max-height: 500px) {
  body:has(.tctl) ._bottomLeft_ovi1k_40 { bottom: calc(158px + env(safe-area-inset-bottom)) !important; }
  body:has(.tctl) ._bottomRight_ovi1k_54 { bottom: calc(178px + env(safe-area-inset-bottom)) !important; }
}
@media (pointer: coarse) {
  /* Friends guide footer: hide keyboard keycaps on touch. */
  .gfx-foot .gfx-kc { display: none !important; }
}

/* zamn-mobile-ios.css — append to /shared/zamn-mobile.css (bump to ?v=2) or load separately.
   Fix: the "Your match is still running / Rejoin match" banner (#zamn-rejoin, inline-styled in the bundle)
   is left:50% + translateX(-50%) with no width, so on a 390px phone it shrink-wraps to ~half the screen and
   the text wraps one word per line (seen in WebKit iPhone 14 run). Pin it edge to edge on narrow screens. */
@media (max-width: 600px) {
  #zamn-rejoin {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    transform: none !important;
    max-width: none !important;
    justify-content: space-between;
  }
  #zamn-rejoin > span { flex: 1 1 auto; min-width: 0; }
  #zamn-rejoin > button { flex: none; }
}

/*zmobl*/ /* ===== zmobl v1 (grokbot 2026-10-21): iPhone touch HUD + phone menus =====
   Everything below is scoped to html.zmobl, which /shared/zamn-mobile-layout.js sets only when the client
   picked the phone/touch UI (html[data-ui-mode=mobile]). Desktop and Xbox never get the class.
   Kill switch: localStorage.setItem('zamn:mobilelayout','off') (or ?mobilelayout=0) -> none of this applies. */
html.zmobl{--zsl:max(14px,env(safe-area-inset-left,0px));--zsr:max(14px,env(safe-area-inset-right,0px));
  --zsb:max(10px,env(safe-area-inset-bottom,0px));--zst:max(6px,env(safe-area-inset-top,0px));--u:1;
  --zg:#5DC21E;--zgd:#107C10;--zink:#eef6ea;--zglass:rgba(10,16,10,.40);--zedge:rgba(226,242,218,.42)}
@media (max-height:360px){html.zmobl{--u:.86}}
@media (max-height:335px){html.zmobl{--u:.8}}
@media (min-height:600px) and (min-width:900px){html.zmobl{--u:1.18}} /* tablets */

/* ---------- touch controls (in-game) ---------- */
html.zmobl .tctl{padding:0}
html.zmobl .tctl-side,html.zmobl .tctl-cluster{position:static;display:block;width:0;height:0}
html.zmobl .tctl .tctl-btn{position:fixed!important;margin:0;padding:0;min-width:0;min-height:0;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:50%;
  background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.13),var(--zglass) 68%);
  border:1.5px solid var(--zedge);color:var(--zink);
  font:700 calc(10px*var(--u))/1 "Segoe UI",system-ui,-apple-system,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.9);box-shadow:0 2px 10px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .07s ease-out,background-color .07s,box-shadow .07s;touch-action:none;-webkit-tap-highlight-color:transparent;
  z-index:2;overflow:visible}
html.zmobl .tctl .tctl-btn::before{display:block;font-size:calc(17px*var(--u));line-height:1;font-weight:700;letter-spacing:0;margin-bottom:1px}
html.zmobl .tctl .tctl-btn[data-down=true]{background:radial-gradient(circle at 50% 30%,#9be86a,var(--zg) 55%,var(--zgd));
  border-color:#d4ffb5;color:#fff;transform:scale(.92);box-shadow:0 0 16px rgba(93,194,30,.75),inset 0 1px 0 rgba(255,255,255,.4)}
/* Fire: the big one, green ring */
html.zmobl .tctl .tctl-btn.tctl-fire{border:2.5px solid rgba(124,214,62,.92);font-size:calc(13px*var(--u));letter-spacing:.08em;
  background:radial-gradient(circle at 50% 30%,rgba(140,230,90,.30),rgba(16,124,16,.30) 60%,rgba(8,20,8,.45));
  box-shadow:0 0 0 4px rgba(93,194,30,.16),0 3px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2)}
html.zmobl .tctl .tctl-btn.tctl-fire::before{content:"";width:calc(22px*var(--u));height:calc(22px*var(--u));margin-bottom:3px;border-radius:50%;
  border:2px solid currentColor;box-sizing:border-box;
  background:linear-gradient(currentColor,currentColor) center/2px 60% no-repeat,linear-gradient(currentColor,currentColor) center/60% 2px no-repeat}
html.zmobl .tctl .tctl-btn.tctl-fire[data-down=true]{background:radial-gradient(circle at 50% 30%,#a6f075,var(--zg) 55%,var(--zgd))}
html.zmobl .tctl .tctl-btn[data-action=ads]{border-color:rgba(226,242,218,.6)}
/* secondary buttons a touch quieter so the primary ones read first */
html.zmobl .tctl .tctl-btn[data-action=tactical],html.zmobl .tctl .tctl-btn[data-action=melee],
html.zmobl .tctl .tctl-btn[data-action=swap],html.zmobl .tctl .tctl-btn[data-action=grenade],html.zmobl .tctl .tctl-btn[data-action=use],
html.zmobl .tctl .tctl-btn[data-action=run]{font-size:calc(9.5px*var(--u));background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.10),rgba(10,16,10,.32) 68%)}
html.zmobl .tctl .tctl-btn.tctl-plate{background:radial-gradient(circle at 50% 30%,rgba(120,170,255,.35),rgba(20,70,160,.55) 70%)!important;border-color:rgba(170,205,255,.75)}
html.zmobl .tctl .gf-badge{top:-3px;right:-3px;background:var(--zgd);border:1px solid #bff59a;font:700 11px/16px system-ui;padding:0 5px;min-width:16px;box-sizing:border-box;text-align:center}
/* top pills */
html.zmobl .tctl .tctl-top{position:fixed;top:calc(var(--zst) + 2px);left:var(--zsl);right:var(--zsr)}
html.zmobl .tctl .tctl-top .tctl-btn{position:relative!important;width:auto;height:44px;min-width:70px;border-radius:22px;padding:0 14px;
  font-size:11px;letter-spacing:.1em;background:rgba(10,16,10,.38);border-color:rgba(226,242,218,.30)}
html.zmobl .tctl .tctl-top .tctl-btn[data-action=menu]::before{content:"";width:12px;height:9px;margin:0 0 3px;
  background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
/* movement stick (zamn-mobile-layout.js makes it float to where the left thumb lands) */
html.zmobl .tctl .tctl-stick{position:fixed;left:calc(var(--zsl) + 22px*var(--u));bottom:calc(var(--zsb) + 14px*var(--u));
  width:calc(128px*var(--u));height:calc(128px*var(--u));
  background:radial-gradient(circle,rgba(10,16,10,.10) 0 38%,rgba(10,16,10,.34) 70%);border:1.5px solid var(--zedge);
  box-shadow:inset 0 0 0 calc(18px*var(--u)) rgba(255,255,255,.035),0 2px 10px rgba(0,0,0,.25);transition:opacity .15s}
html.zmobl .tctl .tctl-stick::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgba(226,242,218,.22);pointer-events:none}
html.zmobl .tctl .tctl-knob{width:calc(56px*var(--u));height:calc(56px*var(--u));margin:calc(-28px*var(--u)) 0 0 calc(-28px*var(--u));
  background:radial-gradient(circle at 50% 32%,#ffffff,#d6e2cf 60%,#a9b8a1);box-shadow:0 2px 8px rgba(0,0,0,.45),inset 0 -2px 3px rgba(0,0,0,.2)}
html.zmobl .tctl .tctl-stick.zm-on{border-color:rgba(124,214,62,.9);box-shadow:0 0 0 3px rgba(93,194,30,.18),0 2px 10px rgba(0,0,0,.25)}
html.zmobl .tctl .tctl-stick.zm-on .tctl-knob{background:radial-gradient(circle at 50% 32%,#e9ffd9,#9be86a 60%,var(--zg))}
html.zmobl .tctl .tctl-stick.zm-float{transition:none}
html.zmobl .tctl .tctl-btn[data-action="fire"]{width:calc(84px*var(--u));height:calc(84px*var(--u));right:calc(var(--zsr) + 29px*var(--u));bottom:calc(var(--zsb) + 29px*var(--u))}
html.zmobl .tctl .tctl-btn[data-action="ads"]{width:calc(66px*var(--u));height:calc(66px*var(--u));right:calc(var(--zsr) + 150px*var(--u));bottom:calc(var(--zsb) + -4px*var(--u))}
html.zmobl .tctl .tctl-btn[data-action="ads"]::before{content:"\25CE"}
html.zmobl .tctl .tctl-btn[data-action="reload"]{width:calc(58px*var(--u));height:calc(58px*var(--u));right:calc(var(--zsr) + 119px*var(--u));bottom:calc(var(--zsb) + 82px*var(--u))}
html.zmobl .tctl .tctl-btn[data-action="reload"]::before{content:"\21BB"}
html.zmobl .tctl .tctl-btn[data-action="jump"]{width:calc(62px*var(--u));height:calc(62px*var(--u));right:calc(var(--zsr) + 44px*var(--u));bottom:calc(var(--zsb) + 138px*var(--u))}
html.zmobl .tctl .tctl-btn[data-action="jump"]::before{content:"\2191"}
html.zmobl .tctl .tctl-btn[data-action="crouch"]{width:calc(56px*var(--u));height:calc(56px*var(--u));right:calc(var(--zsr) + 249px*var(--u));bottom:calc(var(--zsb) + 11px*var(--u))}
html.zmobl .tctl .tctl-btn[data-action="crouch"]::before{content:"\2193"}
html.zmobl .tctl .tctl-btn[data-action="grenade"]{width:calc(52px*var(--u));height:calc(52px*var(--u));right:calc(var(--zsr) + 235px*var(--u));bottom:calc(var(--zsb) + 74px*var(--u))}
html.zmobl .tctl .tctl-btn[data-action="tactical"]{width:calc(52px*var(--u));height:calc(52px*var(--u));right:calc(var(--zsr) + 206px*var(--u));bottom:calc(var(--zsb) + 131px*var(--u))}
html.zmobl .tctl .tctl-btn[data-action="swap"]{width:calc(52px*var(--u));height:calc(52px*var(--u));right:calc(var(--zsr) + 165px*var(--u));bottom:calc(var(--zsb) + 179px*var(--u))}
html.zmobl .tctl .tctl-btn[data-action="swap"]::before{content:"\21C4"}
html.zmobl .tctl .tctl-btn[data-action="melee"]{width:calc(52px*var(--u));height:calc(52px*var(--u));right:calc(var(--zsr) + 114px*var(--u));bottom:calc(var(--zsb) + 216px*var(--u))}
html.zmobl .tctl .tctl-btn[data-action="use"]{width:calc(56px*var(--u));height:calc(56px*var(--u));left:calc(var(--zsl) + 168px*var(--u));bottom:calc(var(--zsb) + 12px*var(--u))}
html.zmobl .tctl .tctl-btn[data-action="run"]{width:calc(54px*var(--u));height:calc(54px*var(--u));left:calc(var(--zsl) + 157px*var(--u));bottom:calc(var(--zsb) + 101px*var(--u))}
html.zmobl .tctl .tctl-btn[data-action="run"]::before{content:"\00BB"}
html.zmobl .tctl .tctl-btn[data-action="plate"]{width:calc(54px*var(--u));height:calc(54px*var(--u));left:calc(var(--zsl) + 241px*var(--u));bottom:calc(var(--zsb) + 95px*var(--u))}

/* ---------- in-game HUD pieces: keep them clear of the controls (landscape phone) ---------- */
@media (orientation:landscape){
  html.zmobl [data-region=top-left]{top:calc(var(--zst) + 54px)!important;left:var(--zsl)!important}
  html.zmobl [data-region=top-right]{top:calc(var(--zst) + 54px)!important;right:var(--zsr)!important;gap:6px}
  html.zmobl [data-region=top-center]{top:var(--zst)!important}
  html.zmobl [data-testid=hud-compass]{width:min(340px,38vw)}
  html.zmobl [data-testid=minimap]{width:calc(96px*var(--u))}
  html.zmobl [data-testid=minimap]>div:first-child{border-width:12px}
  /* kill feed moves next to the minimap so the whole right side below the score is free for the thumb */
  html.zmobl [data-testid=kill-feed]{position:fixed;top:calc(var(--zst) + 58px);left:calc(var(--zsl) + 112px*var(--u));align-items:flex-start;max-width:min(270px,calc(50vw - var(--zsl) - 112px*var(--u) - 44px))}
  html.zmobl [data-testid=kill-feed] li{font-size:13px}
  html.zmobl [data-testid=kill-feed] li:nth-child(n+4){display:none}
  html.zmobl body [data-region=bottom-left]{bottom:calc(var(--zsb) + 168px*var(--u))!important;left:var(--zsl)!important}
  html.zmobl [data-region=bottom-left] [data-testid=hud-player-card]:not(:has([data-testid=hud-points])){display:none}
  html.zmobl body [class*=_vitals_o8hst_]{bottom:calc(var(--zsb) + 168px*var(--u))!important;left:var(--zsl)!important}
  html.zmobl body [data-region=bottom-right]{bottom:calc(var(--zsb) + 4px)!important;right:calc(var(--zsr) + 346px*var(--u))!important}
  html.zmobl [data-testid=hud-equipment]{display:none}  /* keyboard keys; the Lethal/Tac buttons carry the counts */
  html.zmobl [data-testid=hud-ammo-count]{font-size:30px}
  html.zmobl #ksh .bar{right:calc(var(--zsr) + 346px*var(--u));bottom:calc(var(--zsb) + 74px)}
  html.zmobl #ksh .cash{right:var(--zsr);top:calc(var(--zst) + 90px)}
  html.zmobl #ksh canvas{width:120px;height:120px;left:var(--zsl);top:calc(var(--zst) + 54px);transform:none}
}
@media (orientation:landscape) and (max-height:360px){
  html.zmobl [data-testid=kill-feed] li:nth-child(n+3){display:none}
  html.zmobl [data-testid=minimap]{width:84px}
}

/* ---------- portrait during gameplay: rotate prompt (the bundle's #gf-land, restyled) ---------- */
html.zmobl #gf-land{flex-direction:column;gap:18px;background:radial-gradient(ellipse at 50% 40%,#16300f,#040804 75%);
  color:var(--zink);font:600 19px/1.35 "Segoe UI",system-ui,-apple-system,sans-serif;letter-spacing:.02em;
  padding:max(24px,env(safe-area-inset-top)) 28px max(24px,env(safe-area-inset-bottom))}
html.zmobl #gf-land::before{content:"";width:46px;height:80px;border:3px solid var(--zg);border-radius:10px;box-sizing:border-box;
  box-shadow:0 0 18px rgba(93,194,30,.45),inset 0 -8px 0 -5px var(--zg);animation:zmoblRot 2.4s ease-in-out infinite}
html.zmobl #gf-land::after{content:"Menus work in portrait \2014  matches need landscape.";font-size:14px;font-weight:400;opacity:.7}
@keyframes zmoblRot{0%,20%{transform:rotate(0)}45%,75%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){html.zmobl #gf-land::before{animation:none;transform:rotate(-90deg)}}

/* ---------- dashboard + menus on phone ---------- */
/* dashboard footer: clear the home indicator / rounded corners; slimmer in landscape */
html.zmobl ._footer_157tm_760{padding-bottom:max(6px,env(safe-area-inset-bottom));padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
@media (orientation:landscape) and (max-height:500px){
  html.zmobl ._footer_157tm_760{padding-top:2px;padding-bottom:max(2px,calc(env(safe-area-inset-bottom) - 10px))}
  html.zmobl ._footer_157tm_760 button{min-height:44px}
  html.zmobl ._nav_157tm_113{padding-top:max(6px,env(safe-area-inset-top))!important;padding-bottom:6px!important}
}
html.zmobl ._pin_157tm_228{font-size:14px}
html.zmobl ._media_157tm_429 span{font-size:14px}
html.zmobl ._time_19j3o_176{font-size:14px}
html.zmobl ._dockBtn_19j3o_279{min-width:44px}
/* game menus: mode tabs (Multiplayer / Battle Royale / Zombies) spilled off the left edge under the notch */
html.zmobl ._tabs_16ood_5{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding-left:var(--zsl);gap:2px}
html.zmobl ._tabs_16ood_5::-webkit-scrollbar{display:none}
html.zmobl ._tab_16ood_5{flex:none;padding:10px 10px;letter-spacing:.08em}
/* leaderboards: 11-13px labels -> 14px */
html.zmobl ._live_6rf5v_19,html.zmobl ._filter_6rf5v_48{font-size:14px!important;letter-spacing:.08em}
html.zmobl ._tab_6rf5v_62,html.zmobl ._tabOn_6rf5v_63{font-size:14px;letter-spacing:.06em;min-height:44px}
html.zmobl ._head_6rf5v_27{font-size:13px!important}
html.zmobl ._switch_6rf5v_56{overflow-x:auto;scrollbar-width:none}
html.zmobl ._board_6rf5v_1{padding-left:max(16px,var(--zsl));padding-right:max(16px,var(--zsr));padding-bottom:max(16px,var(--zsb))}
/* landscape phone: the desktop menu layout, tightened so more than 3 items fit and nothing sits under the notch */
@media (orientation:landscape) and (max-height:500px){
  html.zmobl ._screen_t1xch_3{--top:max(8px,var(--zst));--pad:20px;--column:calc(max(36vw,290px) + var(--zsl) - 14px)}
  html.zmobl ._column_t1xch_18{padding-left:var(--zsl)}
  html.zmobl ._heading_t1xch_33{font-size:24px;padding-bottom:6px}
  html.zmobl ._item_t1xch_76{min-height:44px;padding-top:9px;padding-bottom:9px;font-size:19px}
  html.zmobl ._description_t1xch_128{font-size:15px;padding-top:6px;padding-bottom:6px}
  html.zmobl ._foot_t1xch_141{padding-bottom:var(--zsb)}
  html.zmobl ._panel_t1xch_152{right:max(4vw,var(--zsr));bottom:calc(var(--zsb) + 52px)}
  html.zmobl ._corner_t1xch_180{right:max(4vw,var(--zsr));bottom:max(2vh,var(--zsb))}
  html.zmobl ._tab_16ood_5{min-height:44px;padding:8px 10px}
}
html.zmobl ._submit_1mcuj_75{min-height:46px}
html.zmobl ._appNote_157tm_428,html.zmobl ._note_157tm_440,html.zmobl ._groupTitle_157tm_392{font-size:14px}
/* social tab (phone): the two grid rows were fixed-height, so the 5th green tile ran under "Not signed in" */
@media (max-width:900px){
  html.zmobl ._social_157tm_180{grid-template-rows:auto;grid-auto-rows:auto;align-content:start}
  html.zmobl ._socialMain_157tm_180{overflow:visible}
  html.zmobl ._social_157tm_180>*{min-height:auto}
}