/* ===================== THE TABLET MENUS (split from mobile-menu.css 2026-10-15, PHONE UI lane 0 FOUNDATION) ==========
   Josh 2026-10-15 ~00:15 ICT: "Do not change the UI at all for desktop or Tablet as those are laid out correctly as we
   want them." This file is every rule of the wave-7 client/css/mobile-menu.css (lane MENU, 2026-10-14) that a TABLET
   can match, in the original order, with the original declarations, byte for byte. The one edit: a rule the wave-7
   file scoped to html.is-touch (phones AND tablets) is scoped to html.is-tablet here (the same specificity, and a
   tablet always carries both classes: platform.js applyFormFactorClasses), so no rule in this file reaches a phone.
   Rules keyed on html.touch-tabs / html.touch-rail and the unscoped #touch-tabbar / #touch-more rules are tablet-only
   now because client/js/touchnav.js builds its bar and sheet on tablets only; the phone has its own shell
   (client/js/phone/shell.js + client/css/phone-ui.css). The comments below are wave 7's and still speak of phones
   where a rule once served both: they describe why each tablet rule exists.
   Proof: the tablet profiles of tools/_mobileui.mjs (iPad mini / Air / Pro 11 / Pro 13, Galaxy Tab S, upright and
   sideways) fingerprint-identical to 77da9cc9, and every desktop scene pixel-identical (tools/_desktopsame.mjs).
   THE ROTATION TRAP (memory menu-rebuild-halo.md): under html.tablet-landscape the app is CSS-rotated 90 degrees, and
   @media still measures the PHYSICAL portrait viewport, so orient.js has rotatedmedia.js rewrite every stylesheet's
   width/height/orientation queries to the turned box, and the box's own viewport units are swapped below. */

/* ------------------------------------------------------------------------------------- 1. THE TURNED TABLET
   A tablet held upright carries html.tablet-landscape (orient.js) and is turned exactly as a phone in a match is
   (style.css MOBILE FORCE-LANDSCAPE: the math is mirrored in orient.js viewport / rotateDelta / rotatePoint), but
   none of the phone's force-landscape rules apply to it: it lays out as the tablet held sideways does.
   The turned box is the VISIBLE viewport on its side: 100dvh wide (iPadOS Safari's 100vh is the large viewport,
   taller than what is shown while its toolbar is up, which cut off the turned app's right edge) by 100dvw tall.
   dvh/dvw: Safari 15.4+, Chrome 108+ (web.dev/blog/viewport-units); the vh/vw line before each is the fallback. */
html.tablet-landscape, html.tablet-landscape body { overflow: hidden; }
html.tablet-landscape body {
  position: fixed;
  top: 0; left: 0;
  width: 100vh; width: 100dvh;
  height: 100vw; height: 100dvw;
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100vw);
  transform: rotate(90deg) translateY(-100dvw);
}
/* every viewport-relative length in style.css goes through --vw / --vh (style.css :root, THE MENUS FOLLOW THE
   SCREEN): turned, the app's width is the screen's height, so the two swap at every root that defines them */
html.tablet-landscape { --vw: 1dvh; --vh: 1dvw; }
html.tablet-landscape #menu { --vw: calc(1dvh / var(--ui-s)); --vh: calc(1dvw / var(--ui-s)); }
html.tablet-landscape :is(.overlay, #top-pills, #friends-fab, #wallet-cta, #friends-panel, #invite-toast,
  #death-screen, #pause-loadouts, #ingame-chat, #pause-challenges, #ingame-chat-fab, #chat-log, #chat-entry, #menu-chat,
  #mobile-chat-btn, #controller-indicator, #cpad, #match-loading, #rank-box, #party-widget, #vault-meter, #streak-meter) {
  --vw: calc(1dvh / var(--ui-s)); --vh: calc(1dvw / var(--ui-s));
}
html.tablet-landscape #hud-frame { --vw: calc(1dvh / var(--hud-s)); --vh: calc(1dvw / var(--hud-s)); }
/* A TURNED SCROLLER MUST NOT HIDE ITS X OVERFLOW. Chromium (every Android tablet browser) decides whether a touch
   drag may start scrolling a box by testing the drag's SCREEN direction against the box's own per-axis
   scrollability, before it turns the drag into the box's axes. Turned 90 degrees, a drag along the box's vertical
   is a screen-horizontal drag, so a box with overflow-x: hidden + overflow-y: auto refuses it and never scrolls
   (measured in a bare page, a 4000 px list in a rotate(90deg) body, one CDP touch drag: overflow-x hidden scrolled
   0 px, auto 385 px; touch-action pan-x / pan-y does not help). Customize's .custom-scroll was the one the rail met first; these are
   every such scroller in the app (style.css). They hold no content wider than themselves (the rail's sideways check),
   so auto adds no sideways scrolling; tools/_mobileui.mjs fails any visible hidden-x scroller on a turned tablet. */
html.tablet-landscape :is(.screen, #menu.halo #menu-custom .custom-scroll, .ch-body, .ws-rail, .ws-pane, .ksrv, .unlockrv,
  .tourcv, .me-tablewrap) { overflow-x: auto; }
/* A TURNED SLIDER IS A VERTICAL SLIDER TURNED BACK. Chromium gives a range input its own touch-action from its
   writing mode (pan-y for a horizontal slider, pan-x for a vertical one) and applies it in SCREEN axes. Turned, a
   plain horizontal slider therefore did neither job: a drag along it (screen-vertical) was handed to scrolling and
   never moved the thumb, and a drag across it (the page's vertical, screen-horizontal) was refused, so every slider
   row of SETTINGS was a dead zone for scrolling (measured in a bare rotate(90deg) page, one CDP touch drag each:
   plain - along 50 -> 50, across 0 px; vertical slider turned back - along 50 -> 69, across 285 px). A vertical
   slider rotated back a quarter is horizontal to the player and vertical to the screen, so both gestures land as
   on an unturned page. Its layout box is the visual box turned (44 x --rl); the margins hand the row the visual box
   (--rl x 44) around the same centre. Only where the engine draws a vertical range input (orient.js sets
   html.turn-vrange: writing-mode on form controls: Chrome 123, Safari 17.4); the menu only - a
   match's sliders (the pause menu) are lane PLAY's. --rl is the slider's length where it lived (the 200 px column
   of a settings row). The turn is the individual rotate property, not transform: rotate(): in the app (not in a bare
   page) a drag that started in the gap between two such sliders scrolled nothing with transform and scrolls with
   rotate (tools/_mobileui.mjs settings-panel touch-scroll + slider on a turned iPad Air; both are rails). */
html.turn-vrange body:not(.in-match) input[type="range"] {
  --rl: 160px;
  writing-mode: vertical-lr; direction: ltr;
  width: 44px; height: var(--rl); min-width: 0; min-height: 0; flex: none; justify-self: start; align-self: center;
  margin: calc((44px - var(--rl)) / 2) calc((var(--rl) - 44px) / 2);
  rotate: -90deg;
}
html.turn-vrange body:not(.in-match) #settings-panel .setting-row input[type="range"] { --rl: 200px; }

#touch-tabbar, #touch-more, #touch-more-scrim { display: none; }

#touch-tabbar .pt-tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; min-height: 48px; padding: 6px 2px 4px; background: none; border: 0; cursor: pointer;
  color: #6fb8ee; font-family: var(--font-head); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
#touch-tabbar .pt-tab.hidden { display: none; }
#touch-tabbar .pt-tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
#touch-tabbar .pt-tab .pt-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#touch-tabbar .pt-tab.active { color: #e4f3ff; text-shadow: 0 0 8px rgba(150, 205, 255, 0.7); }
#touch-tabbar .pt-tab.active::before {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px;
  background: #37bdf2; box-shadow: 0 0 10px #37bdf2;
}
#touch-tabbar .pt-tab:active { background: rgba(55, 189, 242, 0.12); }
#touch-tabbar .pt-tab:focus-visible { outline: 2px solid #37bdf2; outline-offset: -4px; }
#touch-tabbar .pt-badge {
  position: absolute; top: 4px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--orange); color: #fff; font-size: 12px; line-height: 18px; letter-spacing: 0;
}
#touch-tabbar .pt-badge.hidden { display: none; }

#touch-more .pm-grip { width: 40px; height: 4px; border-radius: 2px; background: rgba(160, 200, 235, 0.45); margin: 4px auto 8px; flex: none; }
#touch-more .pm-head { font-family: var(--font-head); font-size: 13px; letter-spacing: 0.32em; color: #37bdf2; padding: 2px 6px 8px; border-bottom: 1px solid rgba(110, 190, 250, 0.3); margin-bottom: 4px; }
#touch-more .pm-item {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  min-height: 56px; padding: 8px 10px; background: none; border: 0; border-bottom: 1px solid rgba(110, 190, 250, 0.12);
  text-align: left; cursor: pointer; color: #e4f3ff; -webkit-tap-highlight-color: transparent;
}
#touch-more .pm-item.hidden { display: none; }
#touch-more .pm-item:active { background: rgba(55, 189, 242, 0.14); }
#touch-more .pm-lbl { font-family: var(--font-head); font-size: 17px; letter-spacing: 0.12em; }
#touch-more .pm-sub { font-size: 13px; color: #6fa3cc; letter-spacing: 0.03em; }
#touch-more .pm-danger .pm-lbl { color: #ff8a7a; }

/* every control in a page or sheet is a thumb's size, on a phone and a tablet alike; a text field is set at 16 px, the
   size under which iOS Safari zooms the page into a focused field and leaves it zoomed (css-tricks.com "16px or Larger
   Text Prevents iOS Form Zoom"; Rick Strahl, "Preventing iOS Textbox Auto Zooming") */
html.is-tablet body:not(.in-match) :is(input[type="text"], input[type="search"], input[type="number"], input[type="email"],
  input[type="password"], input:not([type]), select, textarea) { font-size: max(16px, 1em); }
html.is-tablet body:not(.in-match) :is(.overlay, #friends-panel) :is(button, .btn, select, input[type="text"], input[type="search"], input[type="number"]) { min-height: 44px; }
html.is-tablet:not(.turn-vrange) body:not(.in-match) :is(.overlay, #friends-panel) input[type="range"] { height: 44px; }
/* a checkbox is a 44 px target drawn as a 26 px box (the drawn box alone was 22 px) */
html.is-tablet body:not(.in-match) :is(.overlay, #friends-panel) input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; width: 44px; height: 44px; margin: 0 -9px 0 0; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Crect x='1' y='1' width='24' height='24' rx='5' fill='rgba(10,20,34,0.92)' stroke='%2337bdf2' stroke-width='2'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
}
html.is-tablet body:not(.in-match) :is(.overlay, #friends-panel) input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Crect x='1' y='1' width='24' height='24' rx='5' fill='%2337bdf2' stroke='%2337bdf2' stroke-width='2'/%3E%3Cpath d='M6.5 13.5l4.5 4.5 8.5-9' fill='none' stroke='%2304101c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html.is-tablet body:not(.in-match) :is(.overlay, #friends-panel) input[type="checkbox"]:focus-visible { outline: 2px solid #37bdf2; outline-offset: -6px; }

html.is-tablet #menu.halo .tour-chip { min-width: 44px; }

/* the largest 380:440 box the stage holds (container units: Safari 16+, Chrome 105+): never stretched, never cut */
html.is-tablet #menu.halo #menu-custom:not(.show-class) #preview-canvas { width: min(100cqw, 100cqh * 380 / 440); height: auto; max-height: none; margin: 0;
  background: none; border: 0; }   /* the soldier stands in the stage, not in a framed box inside it */

html.is-tablet #menu.halo #menu-custom :is(.hc-card .hc-name, .hc-lock, .fine-print) { font-size: 12px; }


html.is-tablet #menu.halo #menu-custom:not(.show-class) :is(.custom-left, #custom-sub-look, #custom-sub-look .custom-fields) { display: contents; }
html.is-tablet #menu.halo #menu-custom:not(.show-class) .custom-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr); column-gap: 24px; row-gap: 14px; align-items: start;
}
html.is-tablet #menu.halo #custom-sub-look .cl-group { grid-column: 1; min-width: 0; }
html.is-tablet #menu.halo #menu-custom:not(.show-class) .custom-right {
  grid-column: 2; grid-row: 1 / span 3; align-self: stretch; container-type: size; min-height: 240px; width: auto;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 56% 62% at 50% 64%, rgba(55, 189, 242, 0.16), rgba(55, 189, 242, 0) 72%);
  border-radius: 6px;
}
html.is-tablet #menu.halo #custom-sub-look .cl-wide { grid-column: 2; grid-row: 4; min-width: 0; }
html.is-tablet #menu.halo #menu-custom .hc-card { width: 84px; padding: 4px 4px 5px; }
html.is-tablet #menu.halo #menu-custom .hc-card img { height: 84px; }
html.is-tablet #menu.halo #menu-custom .swatches.trim-swatches { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)) !important; gap: 6px !important; }

html.is-tablet #menu.halo #menu-custom .hc-arrow { display: none; }
html.is-tablet #menu.halo #menu-custom .hc-strip {
  scroll-snap-type: x mandatory; scroll-padding-inline: 12px; overscroll-behavior-x: contain;
  gap: 10px; padding: 6px 12px 10px; scrollbar-width: none;
}
html.is-tablet #menu.halo #menu-custom .hc-strip::-webkit-scrollbar { display: none; }
html.is-tablet body:not(.gp-nav) #menu.halo #menu-custom .hc-card:hover { transform: none; }
html.is-tablet body:not(.gp-nav) #menu.halo #menu-custom .hc-card:not(.active):hover { border-color: rgba(255, 255, 255, 0.08); }
html.is-tablet #menu.halo #menu-custom .hc-card:active { transform: scale(0.96); }
html.is-tablet #menu.halo #menu-custom .hc-card.active {
  border-color: #37bdf2; box-shadow: 0 0 0 2px rgba(55, 189, 242, 0.45), 0 0 16px rgba(55, 189, 242, 0.45);
}

/* ------------------------------------------------------------------------------------- 6. THE NAVIGATION RAIL
   A tablet (always landscape here) and a phone held sideways navigate from a RAIL down the left edge instead of the
   bottom bar (Material 3: a navigation bar for compact widths, a navigation rail for medium and expanded ones; on a
   landscape phone a bottom bar would take 58 of its 393 px of height). Same five destinations, same MORE list, which
   slides out beside the rail as a side sheet. html.touch-rail is put on by touchnav.js (tablet, or a phone whose
   viewport is wider than tall: its menus are never turned). --rail-w is the room the rail takes, for every page and
   docked control beside it. Insets are the app's own (--sa-*: hudscale.js, turned with a turned tablet). */
html.touch-rail.touch-tabs { --rail-w: 88px; --tabs-h: 0px; --rail-top: 64px; }

html.touch-rail.touch-tabs #touch-tabbar {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px;
  position: fixed; left: 0; top: calc(var(--rail-top) + var(--sa-t, 0px)); bottom: 0; right: auto; z-index: 178;
  overflow-y: auto; overscroll-behavior: contain; width: calc(var(--rail-w) + var(--sa-l, 0px)); height: auto;
  padding: 6px 0 calc(10px + var(--sa-b, 0px)) var(--sa-l, 0px); border-radius: 0 12px 0 0; border-top: 1px solid rgba(110, 190, 250, 0.32);
  background: linear-gradient(90deg, rgba(3, 8, 16, 0.98), rgba(8, 16, 28, 0.96));
  border-right: 1px solid rgba(110, 190, 250, 0.32); box-shadow: 12px 0 28px rgba(0, 0, 0, 0.45);
}
html.touch-rail #touch-tabbar .pt-tab { flex: 0 0 auto; min-height: 64px; padding: 8px 4px; font-size: 12px; }
html.touch-rail #touch-tabbar .pt-tab.active::before { top: 18%; bottom: 18%; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
html.touch-rail #touch-tabbar .pt-badge { top: 6px; }
html.touch-rail #touch-more-scrim {
  display: block; position: fixed; inset: 0; z-index: 177; background: rgba(0, 4, 10, 0.55);
  opacity: 0; pointer-events: none; transition: opacity 0.18s ease;
}
html.touch-rail #touch-more-scrim.open { opacity: 1; pointer-events: auto; }
html.touch-rail #touch-more {
  display: flex; flex-direction: column; position: fixed; z-index: 177; overflow-y: auto; overscroll-behavior: contain;
  left: calc(var(--rail-w) + var(--sa-l, 0px)); right: auto; top: 0; bottom: 0; width: min(360px, calc(100% - var(--rail-w) - 24px)); max-height: none;
  padding: calc(var(--rail-top) + var(--sa-t, 0px)) 14px calc(12px + var(--sa-b, 0px));
  background: linear-gradient(100deg, rgba(10, 24, 40, 0.99), rgba(5, 13, 24, 0.99));
  border: 0; border-right: 1px solid rgba(110, 190, 250, 0.36); border-radius: 0 14px 14px 0; box-shadow: 18px 0 40px rgba(0, 0, 0, 0.6);
  transform: translateX(-105%); visibility: hidden; transition: transform 0.22s cubic-bezier(.22, .9, .3, 1), visibility 0s linear 0.22s;
}
html.touch-rail #touch-more.open { transform: none; visibility: visible; transition: transform 0.22s cubic-bezier(.22, .9, .3, 1); }
html.touch-rail #touch-more .pm-grip { display: none; }
@media (prefers-reduced-motion: reduce) {
  html.touch-rail #touch-more, html.touch-rail #touch-more.open, html.touch-rail #touch-more-scrim { transition: none; }
}


/* ------------------------------------------------------------------------------------- 7. THE TABLET SHELL
   A tablet keeps the desktop's landscape menu (the panes, the rank box, the docked global chat), laid out for a
   finger: the rail replaces the 312 px nav column (the marketplace is the SHOP tab, the daily contracts are MORE >
   CHALLENGES), so a pane gets about 740 px on an iPad Air instead of 450; the big logo and the contract banner give
   their 200 px of height to the panes (as on a phone); the floating gear / edit / SWAP corner is in the rail and its
   sheet. The menu is drawn at its full size (the desktop's 0.9 zoom shrank 44 px targets to 40, and its 10 px small
   print to 9): every control is 44 px, the smallest text 12 px (Apple HIG: 44 x 44 pt targets on iPad as on iPhone). */
html.is-tablet #menu { --menu-zoom: 1; --fmin: 12px; }
html.is-tablet :is(.overlay, #top-pills, #friends-fab, #friends-panel, #rank-box, #party-widget, #vault-meter, #streak-meter, #menu-chat) { --fmin: 12px; }
html.is-tablet.touch-tabs #menu.halo #menu-nav { display: none !important; }
html.is-tablet.touch-tabs #menu.halo :is(.halo-left, #menu-logo, #contract-banner, .halo-hints) { display: none; }
html.is-tablet.touch-tabs #menu-tools { display: none; }
html.is-tablet.touch-tabs #menu.halo .menu-content {
  grid-template-columns: 0 minmax(0, 1fr); grid-template-rows: 0 0 auto minmax(0, 1fr) auto; column-gap: 0;
  padding: var(--rail-top) 24px 0 calc(var(--rail-w) + 24px);
}
html.is-tablet body:not(.in-match) :is(#menu, .overlay, #friends-panel, #menu-chat) :is(button, .btn, .seg-btn, select,
  input[type="text"], input[type="search"], input[type="number"]) { min-height: 44px; }
html.is-tablet #top-pills .x-pill { min-height: 44px; min-width: 44px; }
html.is-tablet #top-pills .res-strip { height: 44px; }
html.is-tablet #top-pills .gift-pill { width: 44px; height: 44px; }
html.is-tablet #friends-fab { min-height: 44px; }
html.is-tablet #menu.halo input[type="color"].inline-color { width: 48px; height: 44px; }
/* a tablet under 900 px tall (iPad mini 744, Galaxy Tab 800, iPad Air 820, iPad Pro 11 834; an iPad Pro 13 is 1024) cannot
   hold the match lobby in one screen once its READY / CANCEL / LEAVE row wraps, so the menu scrolls:
   its roster then flows in the page instead of scrolling inside it (one scroller, as on a phone). A turned tablet's
   queries are turned with it (rotatedmedia.js), so this reads the landscape box's height held either way. */
@media (max-height: 900px) {
  html.is-tablet #menu.halo #stage-roster { max-height: none; overflow: visible; height: auto; }
}
/* a 48/64-seat lobby is taller than the pane, and a centred overflow runs UP past the scroll top: START / LEAVE unreachable */
html.is-tablet #menu.halo .halo-panes:has(#menu-staging:not(.hidden)) { justify-content: flex-start; }
/* the lobby's READY / CANCEL / LEAVE row wraps inside its column (on an iPad mini LEAVE ran out of it, under the party list) */
html.is-tablet #menu.halo #menu-staging .row-btns { flex-wrap: wrap; }

/* the friends list drops from its button over the rail, as a popover (on a phone it is a page beside the rail) */
html.is-tablet.touch-tabs .friends-dd { z-index: 180; }
html.is-tablet body:not(.in-match) :is(#vault-meter, #streak-meter) button { min-height: 44px; }
html.is-tablet #vault-meter .vm-box { height: 44px; }
html.is-tablet #streak-meter { width: auto; }
html.is-tablet #streak-meter .ksm-seg { min-width: 44px; }

/* ------------------------------------------------------------------------------------- 8. TOUCH FLOORS (phone + tablet)
   What the rail still found under a finger's size or the readable floor on both kinds of device. */
html.is-tablet #top-pills .rs-item[role="button"] { align-self: stretch; min-height: 44px; padding: 0 4px; }
html.is-tablet body:not(.in-match) #menu.halo .seg-btn { min-width: 44px; }
html.is-tablet body:not(.in-match) #menu.halo .cm-more-below { pointer-events: none; }   /* a hint over the list's foot; a finger scrolls */
html.is-tablet body:not(.in-match) #menu.halo #landing-signin .fine-print a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
html.is-tablet body:not(.in-match) #menu .menu-footer #powered-by { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
html.is-tablet body:not(.in-match) #menu.halo .tour-chip { min-height: 44px; }
html.is-tablet body:not(.in-match) :is(#leaderboard-screen th, #leaderboard-screen .lb-field, #fr-mic, #fr-muteall, #ftab-friends, #ftab-messages, #ftab-invites,
  #rank-box-next, .gift-badge, #mp-sub, #mp-fund-note, .mp-crate-blurb, .mp-crate-own, #ch-reset, #ch-reset b, #challenges-screen .c, .chc-prog,
  #stage-mic-status, .access-help-i, .vm-label, .ksm-label) { font-size: 12px; }
html.is-tablet body:not(.in-match) #menu.halo :is(.field-label, .field-label .dim, .fine-print, .askin-btn-go, .seg-btn, .slot-btn, .cac-comp-lbl,
  .cac-comp-go, #xp-bar-text, .ksx-desc, .ksx-slot-label, .ksx-slot-tier, .ksx-state, .ksx-tier, .ksx-sub, .ksx-tokens, .halo-stat .l,
  .sc-meta, .sc-players, .sc-cta, .sc-arena, .sc-state, .cm-prev-lbl, .cm-list-head, .tour-pick-lab, .tour-chip, .tour-lobby-sub, .btxt,
  .tour-lane-copy, .tour-lane-shape, .xb-tier) { font-size: 12px; }
html.is-tablet body:not(.in-match) #menu.halo :is(#menu-career .l, #menu-tournaments .l, #menu-tournaments .x, #menu-tournaments span:not([class])) { font-size: 12px; }

/* the panes start at the top of their row (a desktop centres a short pane; a taller one ran up under the pill row);
   the kill-streak and vault meters hang in the top band at 66-136 px, so a pane starts below them while they show;
   the footer (powered by, social) stays on PLAY, as on a phone */
html.is-tablet.touch-tabs #menu.halo .halo-panes { align-self: start; }
html.is-tablet.touch-tabs body:has(#streak-meter.in-pregame:not(.hidden)) #menu.halo .menu-content { padding-top: 140px; }
@media (min-width: 1241px) {   /* where style.css shows the meters on every pane (a turned tablet's query is turned) */
  html.is-tablet.touch-tabs body:has(#streak-meter:not(.hidden)) #menu.halo .menu-content { padding-top: 140px; }
}
html.is-tablet.touch-tabs #menu.halo .menu-footer { display: none; }
html.is-tablet.touch-tabs #menu.halo:has(#menu-lobby:not(.hidden)) .menu-footer { display: flex; }
html.is-tablet #top-pills .rs-item[role="button"] { min-width: 44px; justify-content: center; }
html.is-tablet body:not(.in-match) #menu.halo :is(.lobby-tab, .lobby-invite-btn) { min-height: 44px; font-size: 12px; }
html.is-tablet body:not(.in-match) #menu.halo .tour-chip { display: inline-flex; align-items: center; justify-content: center; }
html.is-tablet body:not(.in-match) #menu .fine-print a { display: inline-flex; align-items: center; min-height: 44px; }
html.is-tablet body:not(.in-match) :is(#crates-screen .seg-btn, #crates-screen span) { font-size: max(12px, 1em); }
html.is-tablet body:not(.in-match) #menu.halo :is(.stage-row .s-dep, #menu-tournaments .tour-legend b, #menu-tournaments .tour-legend span) { font-size: 12px; }
/* Customize on a tablet: the four sub-views in one row of 44 px tabs, and the foot in one row (wallet, then the two
   buttons), so callsign to HEAD fit the pane's height when it opens on an iPad Air held either way */
html.is-tablet #menu.halo #custom-subtab { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
html.is-tablet #menu.halo #custom-subtab .seg-btn { white-space: normal; line-height: 1.15; letter-spacing: 0.08em; padding: 4px 8px; }
html.is-tablet #menu.halo #menu-custom .custom-foot { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
html.is-tablet #menu.halo #menu-custom .custom-foot .wallet-badge { flex: 1 1 220px; min-width: 0; margin: 0; }
html.is-tablet #menu.halo #menu-custom .custom-foot .deploy-row { flex: 0 1 auto; width: auto; margin: 0 0 0 auto; }
html.is-tablet #menu.halo #menu-custom .custom-foot .deploy-row #deploy-btn { flex: none; min-width: 260px; }

/* the store's bonus badges carry their size inline (main.js renderShop: font 800 10px), so only !important reaches them */
html.is-tablet body:not(.in-match) #crates-screen span[style*="font:800 10px"] { font-size: 12px !important; }