/* ====================== MOBILE MATCH (lane PLAY, 2026-10-14) ======================
   Everything a phone or tablet shows INSIDE a match: the on-screen touch controls (client/js/touch.js), the HUD's
   touch arrangement, the touch settings and the HUD LAYOUT editor (client/js/touchsettings.js), and the in-match
   screens in the landscape box.

   SCOPE, so a desktop, a console and a pad never change:
     #touch-overlay ...       exists only while the touch controls are on (touch.js builds it)
     html.tb-touch ...        set by touch.js show() and removed by hide(): the touch controls are up in a match
     html.force-landscape ... a phone or tablet held upright with the app turned (orient.js)
   NEVER an @media width / height / orientation query: under force-landscape the app is rotated 90 degrees while
   every media query still measures the PHYSICAL portrait viewport (memory menu-rebuild-halo: THE ROTATION TRAP).
   Sizes are CSS px of the content box (the overlay lives in the rotated <body>, so its px are the box's own). */

/* ---------------------------------------------------------------- the overlay */
#touch-overlay {
  position: fixed; inset: 0; z-index: 35;
  touch-action: none;                      /* no pan, no pinch, no double-tap zoom on the play area */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;             /* no long-press callout (iOS) */
  -webkit-tap-highlight-color: transparent;
  --tc-opacity: 0.85;
}
#touch-overlay.hidden { display: none; }
#touch-overlay.tc-none { pointer-events: none; }   /* dead / the match over: the card on screen owns every touch */

.tc-btn {
  position: absolute; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(150, 200, 255, 0.55);
  background: radial-gradient(circle at 50% 38%, rgba(30, 46, 74, 0.62), rgba(10, 16, 30, 0.55));
  color: rgba(225, 240, 255, 0.95);
  opacity: var(--tc-opacity);
  font-family: var(--font-head, inherit); font-weight: 700;
  pointer-events: none;                    /* hit-testing is touch.js's own (the resolved layout), never the DOM's */
  transition: transform 60ms ease-out, background-color 60ms;
}
.tc-btn.hidden { display: none; }
.tc-btn svg { width: 46%; height: 46%; }
.tc-word { font-size: 13px; letter-spacing: 1.2px; line-height: 1; }
.tc-btn.pressed { transform: scale(0.93); background: rgba(70, 130, 255, 0.55); border-color: rgba(190, 225, 255, 0.95); }
.tc-btn.active { border-color: #2bff88; color: #2bff88; box-shadow: 0 0 10px rgba(43, 255, 136, 0.45); }

/* FIRE: the warm, biggest target */
.tc-fire, .tc-lfire { border-color: rgba(255, 128, 88, 0.75); color: #ffd2c2;
  background: radial-gradient(circle at 50% 38%, rgba(96, 36, 22, 0.6), rgba(30, 10, 8, 0.55)); }
.tc-fire .tc-word { font-size: 16px; letter-spacing: 2px; }
.tc-fire.pressed, .tc-lfire.pressed { background: rgba(255, 110, 60, 0.5); }
/* the contextual verbs (BOARD / EXIT / TAKE / OPEN) and the orbital drop: amber, so they read as "something here" */
.tc-use { border-color: rgba(255, 210, 90, 0.85); color: #ffe7a6; }
.tc-use .tc-word { font-size: 12px; letter-spacing: 1px; }
.tc-drop { border-color: rgba(255, 190, 60, 0.8); color: #ffd27a; }
/* vehicle verbs */
.tc-brake, .tc-boost, .tc-alt { border-color: rgba(120, 220, 255, 0.7); color: #c8f1ff; }
.tc-brake .tc-word, .tc-boost .tc-word { font-size: 12px; letter-spacing: 1px; }
.tc-up, .tc-down { border-color: rgba(90, 200, 255, 0.7); color: #bfeaff; }
/* PAUSE: a quiet rounded square at the top edge (fires on a clean tap only) */
.tc-pause { border-radius: 12px; background: rgba(10, 16, 30, 0.5); border-color: rgba(150, 200, 255, 0.4); }
.tc-pause svg { width: 52%; height: 52%; }
/* the grenade's type chip */
.tc-nade { flex-direction: column; }
.tc-nade svg { width: 40%; height: 40%; }
.tc-chip { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);
  padding: 1px 6px; border-radius: 8px; font-size: 12px; letter-spacing: 0.6px; line-height: 15px;
  background: rgba(8, 14, 26, 0.85); border: 1px solid rgba(150, 200, 255, 0.45); color: #cfe6ff; white-space: nowrap; }

/* ---------------------------------------------------------------- the stick */
.tc-stick-rest {
  position: absolute; box-sizing: border-box; border-radius: 50%;
  border: 2px dashed rgba(160, 200, 255, 0.28);
  opacity: var(--tc-opacity); pointer-events: none;
}
.tc-stick-rest.hidden { display: none; }
.tc-stick {
  position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px;
  border-radius: 50%; box-sizing: border-box;
  border: 2px solid rgba(160, 200, 255, 0.5);
  background: rgba(16, 26, 46, 0.3);
  opacity: var(--tc-opacity); pointer-events: none;
}
.tc-stick.hidden { display: none; }
.tc-nub {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px;
  transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(170, 205, 255, 0.6);
  box-shadow: 0 0 12px rgba(120, 170, 255, 0.5);
  will-change: transform;
}
/* SPRINT lock line: shown faint above the ring, bright while the thumb holds it out (armed) and when it latched */
.tc-lock {
  position: absolute; left: 50%; top: -42px; transform: translateX(-50%);
  padding: 3px 9px; border-radius: 10px; font-size: 12px; letter-spacing: 1.4px; font-weight: 700;
  color: rgba(200, 225, 255, 0.55); border: 1px solid rgba(160, 200, 255, 0.3); background: rgba(8, 14, 26, 0.45);
}
.tc-lock.armed { color: #fff; border-color: rgba(255, 255, 255, 0.8); }
.tc-lock.on { color: #2bff88; border-color: #2bff88; box-shadow: 0 0 10px rgba(43, 255, 136, 0.45); }

/* ---------------------------------------------------------------- the page, while the touch controls are up */
/* no pull-to-refresh / overscroll bounce, no long-press callout or text loupe on the HUD (chat keeps its text) */
html.tb-touch, html.tb-touch body { overscroll-behavior: none; }
html.tb-touch body { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
html.tb-touch input, html.tb-touch textarea { -webkit-user-select: text; user-select: text; }
html.tb-touch #game-canvas { touch-action: none; }

/* THE HUD'S TOUCH ARRANGEMENT. The left thumb lives bottom-left, so the tracker moves to the top left under the
   grenade chips (CoD Mobile keeps its minimap top-left for the same reason); the medals that sat above it pop under the
   score panel instead, and the power-up column sits under the tracker. The killfeed keeps the top right and shows its
   newest four rows (the right-hand cluster starts under them). Reference px of the HUD frame, like the rules they
   override (style.css #radar-wrap / #medals / #powerup-timers). */
html.tb-touch #hud-frame #radar-wrap { top: 64px; bottom: auto; }
html.tb-touch #hud-frame #medals { left: 50%; bottom: auto; top: 186px; transform: translateX(-50%); }
html.tb-touch #hud-frame #powerup-timers { top: 258px; bottom: auto; }
html.tb-touch #killfeed { --tc-feed-rows: 4; }
html.tb-touch #killfeed .feed-row:nth-child(n+5) { display: none; }
/* the ammo readout is the weapon SWAP button: a swap mark on its left edge says so */
html.tb-touch #hud-frame #weapon-hud::before {
  content: ''; position: absolute; left: -44px; top: 50%; width: 38px; height: 38px; margin-top: -19px;
  background: center / 70% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfe6ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14l-4-4M20 16H6l4 4'/%3E%3C/svg%3E");
  border: 2px solid rgba(150, 200, 255, 0.45); border-radius: 50%; opacity: 0.8;
}

/* touch.js measureReadouts: the readouts that come and go, laid out for one synchronous instant (never painted) so
   the layout can read where they appear */
#hud.tc-measure #killfeed, #hud.tc-measure #medals, #hud.tc-measure #powerup-timers, #hud.tc-measure #voice-indicators,
#hud.tc-measure #streak-ready, #hud.tc-measure #xp-feed, #hud.tc-measure #pickup-toast, #hud.tc-measure #seat-take,
#hud.tc-measure #lives { display: flex !important; visibility: hidden !important; }
/* the voice chips (MIC LIVE, who is talking) sat at the tracker's new place: under the power-up column on touch */
html.tb-touch #hud-frame #voice-indicators { top: 384px; }

/* ---------------------------------------------------------------- TOUCH SETTINGS (client/js/touchsettings.js) */
#touch-settings { z-index: 82; min-width: 0; width: min(560px, 94%); gap: 10px; }
#touch-settings .setting-row { grid-template-columns: minmax(0, 1fr) minmax(120px, 190px) 64px; gap: 10px; font-size: 13px; min-height: 44px; }
#touch-settings .setting-row input[type="range"] { width: 100%; height: 32px; }
#touch-settings .setting-row input[type="checkbox"] { width: 26px; height: 26px; }
#touch-settings .setting-row select { min-height: 40px; }
#touch-settings .ts-note { font-size: 12px; color: var(--dim, #8aa); letter-spacing: 0.5px; }
#touch-settings .ts-help { font-size: 12px; line-height: 1.5; color: var(--dim, #8aa); margin: 2px 0; text-align: left; }
#touch-settings .ts-foot { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
#touch-settings .ts-foot .btn { flex: 1 1 140px; min-height: 44px; }
#open-touch-settings { width: 100%; min-height: 44px; }
/* in the turned (or native) landscape box the panel uses two columns, like the settings panel does there */
html.force-landscape #touch-settings, html.tablet-landscape #touch-settings, html.tb-touch #touch-settings {
  width: min(860px, 96%); max-height: 94%;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 6px; align-items: center; padding: 18px 22px;
}
html.force-landscape #touch-settings h3, html.tablet-landscape #touch-settings h3, html.tb-touch #touch-settings h3,
html.force-landscape #touch-settings .ts-help, html.tablet-landscape #touch-settings .ts-help, html.tb-touch #touch-settings .ts-help,
html.force-landscape #touch-settings .ts-foot, html.tablet-landscape #touch-settings .ts-foot, html.tb-touch #touch-settings .ts-foot { grid-column: 1 / -1; }
html.force-landscape #touch-settings h3, html.tablet-landscape #touch-settings h3, html.tb-touch #touch-settings h3 { margin: 0; }

/* ---------------------------------------------------------------- THE HUD LAYOUT EDITOR */
html.tc-editing #pause-menu, html.tc-editing #settings-panel, html.tc-editing #touch-settings,
html.tc-editing .ingame-left, html.tc-editing .ingame-right, html.tc-editing #ingame-chat-fab { visibility: hidden; }
#touch-overlay.te-editing { visibility: hidden; }
#touch-editor {
  position: fixed; left: 0; top: 0; z-index: 95;
  background: rgba(4, 8, 16, 0.35);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#touch-editor .te-readout { position: absolute; border: 1px dashed rgba(255, 196, 80, 0.7); background: rgba(255, 196, 80, 0.08); pointer-events: none; }
#touch-editor .te-ctrls { position: absolute; inset: 0; }
#touch-editor .te-ctrl {
  position: absolute; box-sizing: border-box; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 2px solid rgba(150, 200, 255, 0.8); background: rgba(16, 28, 50, 0.75); color: #e8f2ff;
  font: 700 12px/1.1 var(--font-head, sans-serif); letter-spacing: 0.6px;
}
#touch-editor .te-ctrl span { padding: 0 2px; }
#touch-editor .te-ctrl.te-move { border-style: dashed; background: rgba(16, 28, 50, 0.4); }
#touch-editor .te-ctrl.te-mine { border-color: #7fe6ff; }
#touch-editor .te-ctrl.te-sel { border-color: #2bff88; box-shadow: 0 0 12px rgba(43, 255, 136, 0.6); }
#touch-editor .te-bar {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);   /* over the shield bar, where no control goes */
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
  max-width: 56%; padding: 10px 12px; border-radius: 10px;
  background: rgba(6, 12, 24, 0.9); border: 1px solid rgba(120, 180, 255, 0.4);
}
#touch-editor .te-bar.te-bar-low { top: auto; bottom: 8px; }
#touch-editor .te-bar .btn { min-height: 44px; padding: 8px 12px; font-size: 12px; }
#touch-editor .te-bar .te-set.active { border-color: #2bff88; color: #2bff88; }
#touch-editor .te-size { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #cfe6ff; }
#touch-editor .te-size input { width: 140px; height: 32px; }

/* ====================================================================================================================
   THE IN-MATCH SCREENS ON A PHONE OR TABLET (lane PLAY item 4). html.tb-touch = in a match with the touch controls;
   html.tb-short = its box is a phone's (under 520 px tall: touch.js relayout). Measured by tools/_mobilematch.mjs:
   pause items were 40 px tall, the death card and the scoreboards had 10-11 px text, and a turned phone clipped the
   match-end report out of the box. */

/* no pinch zoom and no double-tap zoom anywhere in a match (lists still scroll): the page zoomed under the pause menu */
html.tb-touch { touch-action: pan-x pan-y; }

/* every in-match tap target at least 44 px (Apple HIG), every text at least 12 px */
html.tb-touch #pause-menu .hp-item { min-height: 44px; }
html.tb-touch #bots-popup .btn, html.tb-touch #death-screen .btn, html.tb-touch #match-end .btn,
html.tb-touch #ui-confirm .btn { min-height: 44px; }
html.tb-touch .overlay th, html.tb-touch #death-screen th { font-size: 12px; }
html.tb-touch .death-loadouts-lbl, html.tb-touch .death-hint, html.tb-touch .dl-sub { font-size: 12px; }
html.tb-touch .dl-card { min-height: 48px; }
html.tb-touch #death-screen .death-hint { display: none; }   /* "arrows / W S select loadout": keys a phone does not have */
/* the pause menu's music player: 44 px transport buttons; its 4 px volume bar cannot be hit with a thumb, so on touch the
   music volume lives where every other volume does (SETTINGS > MUSIC VOLUME) */
html.tb-touch #pause-menu .hpm-btn { width: 44px; height: 44px; }
html.tb-touch #pause-menu .hpm-volicon, html.tb-touch #pause-menu .hpm-volbar { display: none; }
html.tb-touch #pause-menu .hpm-now { font-size: 12px; }

/* THE PAUSE MENU ON A PHONE: up to eight items (a host's team match with bots) do not fit one 44 px column in a 375 px
   box, so they stand in two columns, to the right of the loadout list, under the music player (made compact). */
html.tb-touch.tb-short #pause-menu { height: 94%; justify-content: flex-end; align-items: flex-end; padding: 8px 18px 12px; }
html.tb-touch.tb-short #pause-menu .hp-head { display: none; }
html.tb-touch.tb-short #pause-menu .hp-menu { display: grid; grid-template-columns: repeat(2, minmax(150px, 186px)); gap: 6px 8px; width: auto; }
html.tb-touch.tb-short #pause-menu .hp-item { padding: 6px 18px 6px 12px; }
html.tb-touch.tb-short #pause-menu .hp-music { position: absolute; margin: 0; top: 10px; right: 14px; padding: 7px; gap: 8px; width: min(46%, 230px); }
html.tb-touch.tb-short #pause-menu .hpm-art { flex-basis: 40px; width: 40px; height: 40px; }
html.tb-touch.tb-short #pause-menu .pause-hint { display: none; }
html.tb-touch.tb-short #pause-menu:not(.hidden) ~ #ingame-chat-fab { bottom: auto; top: 10px; right: auto; left: calc(50% - 60px); }

/* THE REPORT ON A TURNED PHONE: style.css caps it at 100vh minus the lifted score panel, but under force-landscape a vh
   is the phone's long side (the rotation trap), so the report ran 616 px tall in a 393 px box and its title went off
   screen. The same cap in the box's own height. */
html.force-landscape body:has(#match-bar.mb-over-end) #match-end.overlay,
html.tablet-landscape body:has(#match-bar.mb-over-end) #match-end.overlay {
  max-height: calc(100% - 2 * (var(--hud-ft) + 180px * var(--hud-s)) / var(--ui-s));
}

/* A FINGER SCROLLS A LIST IN A TURNED BOX (lane MENU's finding, 2026-10-14): Chromium decides whether a touch drag can
   scroll a box in SCREEN axes before it maps the drag to the box's own, so in the turned app a drag along the app's
   vertical is a horizontal screen drag, and a list with overflow-x: hidden never starts. The in-match lists that set
   it scroll on both axes while the app is turned (they have no horizontal overflow, so nothing else changes). */
html.force-landscape .me-tablewrap, html.tablet-landscape .me-tablewrap,
html.force-landscape .ksrv, html.tablet-landscape .ksrv,
html.force-landscape .unlockrv, html.tablet-landscape .unlockrv { overflow-x: auto; }

/* A TURNED TABLET MATCH'S SLIDERS (wave-7 integration, lane MENU's note): a horizontal range input in the turned box
   neither slides nor lets a drag across it scroll, as in the menus. Where the engine draws a vertical range input
   (html.turn-vrange, client/js/orient.js; mobile-menu.css draws the menus' the same way) the pause menu's SETTINGS and
   TOUCH SETTINGS sliders are drawn as a vertical slider turned back a quarter, at the length they have in their row. */
html.tablet-landscape.turn-vrange body.in-match :is(#settings-panel, #touch-settings) .setting-row input[type="range"] {
  --rl: 200px;
  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;
}