/* On-screen controls. Hidden entirely unless the game mounts them, so desktop
   pays nothing — not even a hit-test region. */

#touch-ui { display: none; }
#touch-ui.on { display: block; }

#touch-ui .tc-zone {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 55;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
/* The move zone stops short of the buttons so a stray thumb cannot grab both. */
#touch-ui #tc-move { left: 0; width: 46vw; }
#touch-ui #tc-look { right: 0; width: 54vw; }

/* ---- floating thumbstick ---- */
#tc-stick {
  position: fixed;
  z-index: 56;
  width: 132px; height: 132px;
  margin: -66px 0 0 -66px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
}
#tc-stick.on { opacity: 1; }
#tc-stick-base {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(226, 220, 202, .28);
  background: radial-gradient(circle, rgba(10,12,14,.34), rgba(10,12,14,.12) 70%, transparent 72%);
  box-shadow: 0 2px 14px rgba(0,0,0,.5);
}
#tc-stick-knob {
  position: absolute; left: 50%; top: 50%;
  width: 58px; height: 58px;
  margin: 0; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 38% 32%, rgba(232,226,208,.82), rgba(120,116,104,.6));
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 3px 12px rgba(0,0,0,.6);
}

/* ---- action buttons ---- */
/* Fixed slots. Every control has a permanent home in the grid so that a button
   which is currently hidden still holds its place — a control that shifts under
   your thumb between presses is worse than one that is simply not lit, and the
   whole value of a fixed pad is muscle memory.

       col 1     col 2     col 3
   r1  .         monkey    .
   r2  swap      nade      FIRE
   r3  use       reload    FIRE
   r4  jump      crouch    knife       <- jump/crouch only in the tray
*/
#tc-buttons {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 57;
  display: grid;
  grid-template-columns: repeat(3, 58px);
  grid-template-rows: repeat(4, auto);
  gap: 8px;
  justify-items: end; align-items: end;
  pointer-events: none;
}
#touch-ui .tc-monkey { grid-area: 1 / 1; }
#touch-ui .tc-swap   { grid-area: 1 / 2; }
#touch-ui .tc-ads    { grid-area: 2 / 1; }
#touch-ui .tc-nade   { grid-area: 2 / 2; }
#touch-ui .tc-fire   { grid-area: 2 / 3 / span 2 / span 1; }
#touch-ui .tc-use    { grid-area: 3 / 1; }
#touch-ui .tc-reload { grid-area: 3 / 2; }
#touch-ui .tc-knife  { grid-area: 4 / 3; }
#touch-ui .tc-jump   { grid-area: 4 / 1; }
#touch-ui .tc-crouch { grid-area: 4 / 2; }

#touch-ui .tc-btn {
  pointer-events: auto;
  /* 60px keeps every control above the 44px minimum touch target with room
     for an imprecise thumb. */
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(226, 220, 202, .3);
  background: rgba(14, 16, 18, .48);
  color: #ddd6c6;
  font: 700 13px/1 "Trebuchet MS", "Segoe UI", sans-serif;
  letter-spacing: .04em;
  text-shadow: 0 1px 2px #000;
  backdrop-filter: none;               /* deliberately not blurred: too costly */
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s, background .1s, opacity .18s ease;
}
#touch-ui .tc-btn.down {
  background: rgba(150, 30, 20, .6);
  border-color: rgba(255, 120, 100, .55);
  transform: scale(.94);
}

/* Contextual controls: present in the layout, invisible and untouchable until
   they can actually do something. */
#touch-ui .tc-btn.ctx { opacity: 0; pointer-events: none; transform: scale(.86); }
#touch-ui .tc-btn.ctx.live { opacity: 1; pointer-events: auto; transform: none; }
/* USE is the one worth drawing the eye to — it is how you buy, open and repair. */
#touch-ui .tc-use.live {
  border-color: rgba(240, 200, 120, .85);
  background: rgba(120, 92, 20, .5);
  animation: tcPulse 1.1s ease-in-out infinite;
}

/* Jump and crouch, behind the tray. */
#touch-ui .tc-btn.xtra { display: none; }
#touch-ui.show-xtra .tc-btn.xtra { display: block; }
/* Kept low and tight against the pad. It used to sit ~200px up the right edge,
   which is exactly where a thumb starts a look drag. */
#tc-more {
  position: fixed; z-index: 57;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 196px);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(226,220,202,.22);
  background: rgba(14,16,18,.42);
  color: #b9b2a2; font: 700 17px/1 "Trebuchet MS", sans-serif;
  pointer-events: auto; touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#touch-ui.show-xtra #tc-more { background: rgba(120,92,20,.45); color: #f0e6cc; }

/* Fire is the one control that earns extra size and a fixed home. */
#touch-ui .tc-fire {
  width: 88px; height: 88px;
  font-size: 15px;
  background: rgba(120, 22, 16, .42);
  border-color: rgba(226, 120, 100, .4);
}

@keyframes tcPulse { 50% { box-shadow: 0 0 16px rgba(240,200,120,.5); } }

#tc-pause {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 59;                 /* above the relocated points box, see below */
  touch-action: none;
  width: 46px; height: 46px;   /* 42 was under the 44px minimum target */
  border-radius: 8px;
  border: 1px solid rgba(226,220,202,.25);
  background: rgba(12,14,16,.5);
  color: #cfc8b6;
  font: 700 14px/1 "Trebuchet MS", sans-serif;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* Landscape phones are short: shrink so the controls do not eat the view. */
@media (orientation: landscape) and (max-height: 460px) {
  #touch-ui .tc-btn { width: 50px; height: 50px; font-size: 11px; }
  #touch-ui .tc-fire { width: 72px; height: 72px; font-size: 13px; }
  /* the columns are fixed-width, so they have to shrink with the buttons or
     the pad keeps its full-size footprint and the slots stop lining up */
  #tc-buttons { gap: 6px; grid-template-columns: repeat(3, 48px); }
  #tc-more { width: 40px; height: 40px; font-size: 15px;
             bottom: calc(max(14px, env(safe-area-inset-bottom)) + 176px); }
  #tc-stick { width: 108px; height: 108px; margin: -54px 0 0 -54px; }
  #tc-stick-knob { width: 48px; height: 48px; }
}

/* Portrait: the game is playable but cramped, so nudge the player to rotate. */
#rotate-hint {
  position: fixed; inset: 0; z-index: 90;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
  background: rgba(4, 5, 7, .93);
  color: #ddd6c6;
  font: 700 15px/1.5 "Trebuchet MS", sans-serif;
  letter-spacing: .12em; text-transform: uppercase; text-align: center;
  padding: 30px;
}
#rotate-hint .glyph { font-size: 46px; animation: rotNudge 1.8s ease-in-out infinite; }
@keyframes rotNudge { 40% { transform: rotate(-90deg); } 100% { transform: rotate(-90deg); } }
html.is-touch.portrait-block #rotate-hint { display: flex; }
/* The way out for a player whose device has rotation locked in the OS, where
   the instruction above is impossible to follow from inside the page. */
#rotate-anyway {
  margin-top: 6px; padding: 13px 22px; min-height: 46px;
  cursor: pointer; pointer-events: auto;
  background: rgba(14,17,20,.9); border: 1px solid rgba(190,160,110,.45);
  border-radius: 3px; color: #ddd6c6;
  font: 700 12px/1 "Courier New", monospace; letter-spacing: .16em; text-transform: uppercase;
}
#rotate-anyway:active { background: rgba(120,25,18,.6); }

/* ---------------------------------------------------------------------------
   HUD layout for touch. The action buttons own the bottom-right corner, so the
   readouts that normally live there move to the top edge where nothing occludes
   them and no thumb rests.
   --------------------------------------------------------------------------- */
html.is-touch #points-box {
  left: max(12px, env(safe-area-inset-left)) !important;
  right: auto !important;
  top: max(10px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
  width: 168px !important; height: 54px !important;
}
html.is-touch #points { font-size: 25px !important; }

html.is-touch #ammo-box {
  right: max(64px, calc(env(safe-area-inset-right) + 64px)) !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
}
html.is-touch #ammo-mag { font-size: 32px !important; }
html.is-touch #ammo-res { font-size: 21px !important; }
html.is-touch #wpn-name { font-size: 12px !important; }
/* Sits under the ammo block, which is also top-anchored on touch. The old flat
   84px was measured when the ammo block was shorter and now lands inside it —
   ammo runs 12..100 at 844x390. The offset has to grow with the ammo block, and
   that block is sized by the same vw clamps in hud-responsive.css, so track vw
   rather than guessing a constant. */
html.is-touch #nade-box {
  right: max(64px, calc(env(safe-area-inset-right) + 64px));
  bottom: auto;
  top: calc(max(12px, env(safe-area-inset-top)) + clamp(96px, 8vw, 136px));
}
html.is-touch #alt-wpns { display: none !important; }   /* the swap button says it instead */

/* The short-viewport rules in hud-responsive.css move the points box and the
   perk row to the TOP edge, which is where #mission already lived. They
   overlapped. Mission text is the least urgent of the three, so it moves down
   under the crosshair where nothing else sits. */
html.is-touch #mission {
  top: auto !important; left: 50% !important; right: auto !important;
  transform: translateX(-50%);
  bottom: 22% !important;
  max-width: 74vw; text-align: center;
}
html.is-touch #perks {
  left: max(12px, env(safe-area-inset-left)) !important;
  top: 70px !important; bottom: auto !important;
}
html.is-touch .perk-chip { width: 28px !important; height: 28px !important; font-size: 12px !important; }

html.is-touch #round-box {
  left: max(12px, env(safe-area-inset-left)) !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
}
html.is-touch #round-tally { transform: rotate(-2deg) scale(.72) !important; transform-origin: left bottom }
html.is-touch #round-num { font-size: 46px !important; }

html.is-touch #stam-box { left: max(12px, env(safe-area-inset-left)) !important; bottom: 104px !important; }
html.is-touch #hp-box   { display: none !important; }   /* blood on the lens covers it */
html.is-touch #prompt   { bottom: 30% !important; }
html.is-touch #reload-tip { bottom: 42% !important; }

/* Pointer-lock hint is meaningless without a mouse. */
html.is-touch #lockhint { display: none !important; }

/* Menus need bigger hit targets and to fit a short landscape viewport. */
html.is-touch .mbtn { min-height: 46px; font-size: 14px; }
html.is-touch .diff-btn { min-height: 40px; padding: 10px 16px; }
/* This used to be `display:none`, which left the Controls page as three tabs
   and a Back button over an empty space — the page rendered no content at all
   on the one device whose controls most need explaining. The reason it was
   hidden is that theme.css turns .controls-panel into a fixed-position floating
   card 350px wide, which does not fit a phone. Re-flow it instead. */
html.is-touch .controls-panel {
  position: static !important;
  width: auto !important; max-width: 92vw;
  right: auto !important; bottom: auto !important;
  grid-template-columns: auto 1fr;
  gap: 6px 14px; font-size: 12px;
}
html.is-touch .slider-row input { height: 30px; }

/* ---- persona picker on the title screen ---- */
#persona-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; justify-content: flex-start; }
.persona-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 13px; cursor: pointer; pointer-events: auto;
  background: rgba(10,13,16,.72); border: 1px solid rgba(150,150,150,.22); border-radius: 3px;
  color: #8f8a7e; font: 700 11px/1 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase;
  transition: color .15s, border-color .15s, background .15s;
}
.persona-btn:hover { color: #d6cfbd; border-color: #7d746a; }
.persona-btn.sel { color: #f0e6cc; background: rgba(120,25,18,.42); border-color: #b0453a; }
.pb-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.6) inset; }
#callsign-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
#callsign { color: #c7bfa9; font: 700 12px/1 "Courier New", monospace; letter-spacing: .16em; }
#callsign-reroll {
  cursor: pointer; pointer-events: auto;
  /* 24px here used to beat menu.css's 44px minimum purely because touch.css
     loads later. Sized correctly at source instead. */
  width: 44px; height: 44px; border-radius: 3px;
  background: rgba(10,13,16,.72); border: 1px solid rgba(150,150,150,.22);
  color: #9a9384; font-size: 13px; line-height: 1;
}
#callsign-reroll:hover { color: #e6dcc4; border-color: #7d746a; }
html.is-touch .persona-btn { padding: 11px 15px; font-size: 12px; }
/* 24x24 is far under the 44px minimum — this is a thumb, not a cursor. */
html.is-touch #callsign-reroll { width: 44px; height: 44px; font-size: 18px; }
html.is-touch .ctl-tab { min-height: 44px; }
html.is-touch #coop-input { min-height: 48px; }

/* ---------------------------------------------------------------------------
   Pause / game-over panels on a phone.

   The .panel is a desktop dialog: 38px/48px padding, a two-column stats grid and
   180px sliders. On a 390px-tall landscape phone that is taller than the viewport
   and wider than is comfortable, which is the "funky" look. Reflow rather than
   just shrink — a scaled-down desktop dialog still reads as a desktop dialog.
   --------------------------------------------------------------------------- */
html.is-touch .panel {
  padding: 18px 20px;
  max-width: min(560px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 5px;
}
html.is-touch .panel h2 { font-size: clamp(22px, 6vw, 34px); }
html.is-touch .panel .subtitle { margin-top: 8px; font-size: 11px; letter-spacing: .2em; }

/* Stats read better as rows than as a squeezed two-column grid. */
html.is-touch .panel .stats {
  grid-template-columns: 1fr auto;
  gap: 7px 14px; margin: 14px 0 6px; max-width: none; padding: 12px 0;
}
html.is-touch .panel .stats span { font-size: 10px; }
html.is-touch .panel .stats b { font-size: 14px; }

/* Sliders: full width, and a thumb-sized track. */
html.is-touch .slider-row {
  display: grid; grid-template-columns: 92px 1fr 40px;
  align-items: center; gap: 10px; margin-top: 11px; font-size: 10px;
}
html.is-touch .slider-row input { width: 100%; height: 34px; }
html.is-touch .slider-row .val { text-align: right; }

/* Buttons stack full width so they are unmissable with a thumb. */
html.is-touch .panel .menu-col { margin-top: 16px; gap: 8px; width: 100%; }
html.is-touch .panel .mbtn {
  min-width: 0; width: 100%; min-height: 48px;
  justify-content: center; font-size: 16px;
}
/* The graphics-tier row wraps instead of overflowing. */
html.is-touch .panel .diff-row,
html.is-touch .panel [data-q] { flex-wrap: wrap; }
html.is-touch .panel [data-q] { min-height: 44px; padding: 10px 16px; }

/* The touch pad must not sit on top of an open panel. */
html.is-touch #pause-screen.active ~ #touch-ui,
html.is-touch #gameover-screen.active ~ #touch-ui { display: none; }