/* Touch controls + touch HUD fit for Koloss.
   Everything here is scoped to `body.touch-device` / `body.touch-playing`, both
   of which js/main.js sets only when js/touch.js' coarse-pointer test passes —
   so a desktop page never renders, and never even hit-tests, one pixel of it. */

/* ------------------------------------------------------------------ layer */
#touch-controls {
  position: fixed;
  inset: 0;
  /* JUST BELOW the HUD (30), not above it. #gameAudioControls declares z-index
     40, but it lives inside #hud — which is itself a z-index:30 stacking
     context — so 40 only orders it within the HUD. A look pad at 35 therefore
     covered the five house audio controls and swallowed every tap on them
     (caught by the probe: "#tc-look intercepts pointer events"). At 29 the pad
     sits under the whole HUD, which is pointer-events:none apart from exactly
     that strip, so the strip gets its taps back and everything else still
     falls through to the controls. */
  z-index: 29;
  pointer-events: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--f-mono, monospace);
}
#touch-controls.hidden { display: none; }

/* The canvas must not scroll, pinch-zoom or double-tap-zoom under a thumb that
   is trying to aim. Only while a match is live — the lobby stays pinchable. */
body.touch-playing,
body.touch-playing #game-canvas { touch-action: none; overscroll-behavior: none; }

/* ------------------------------------------------------------------ zones */
/* Look pad: everything not covered by the stick or a button. Painted first and
   given the lowest z, so any touch that lands on a control goes to the control. */
#tc-look {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
}

#tc-move {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(46vw, 300px);
  height: min(42vh, 300px);
  z-index: 2;
  pointer-events: auto;
}
#tc-stick {
  position: absolute;
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  border-radius: 50%;
  border: 1px solid rgba(232, 228, 216, 0.22);
  background: radial-gradient(circle, rgba(10, 14, 20, 0.34), rgba(10, 14, 20, 0.14) 70%, transparent);
  opacity: 0;
  transition: opacity 0.12s ease-out;
}
#tc-stick.live { opacity: 1; }
#tc-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(200, 135, 58, 0.36);
  border: 1px solid rgba(232, 228, 216, 0.5);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
/* Resting hint so the stick is discoverable before it is first touched. */
#tc-move::after {
  content: '';
  position: absolute;
  left: 78px;
  bottom: 78px;
  width: 104px;
  height: 104px;
  margin: -52px 0 -52px -52px;
  border-radius: 50%;
  border: 1px dashed rgba(232, 228, 216, 0.16);
}
#tc-move.live::after { opacity: 0; }

/* ---------------------------------------------------------------- buttons */
.tc-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 54px;
  padding: 0 6px;
  border-radius: 50%;
  border: 1px solid rgba(232, 228, 216, 0.3);
  background: rgba(8, 12, 18, 0.5);
  color: rgba(232, 228, 216, 0.9);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px #000;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.tc-btn.pressed {
  background: rgba(200, 135, 58, 0.42);
  border-color: rgba(232, 228, 216, 0.75);
  color: #fff;
}
.tc-btn .tc-ico { font-size: 19px; line-height: 1; }
.tc-btn.tc-small { min-width: 46px; min-height: 46px; font-size: 10px; }

#tc-fire {
  min-width: 92px;
  min-height: 92px;
  font-size: 13px;
  background: rgba(150, 40, 26, 0.42);
  border-color: rgba(255, 160, 110, 0.55);
}
#tc-fire.pressed { background: rgba(214, 74, 40, 0.62); }

/* right cluster: three rows, bottom-anchored under the firing thumb */
#tc-right {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
#tc-right .tc-row { display: flex; align-items: flex-end; gap: 10px; }

/* Left edge, below the vitals column and above the stick. NOT the top bar:
   the minimap owns top-left and the house audio strip owns top-right, and a
   third thing up there is what made the first pass unreadable. */
#tc-top {
  position: absolute;
  left: max(10px, env(safe-area-inset-left));
  top: 54%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#tc-top .tc-btn { min-width: 46px; min-height: 34px; border-radius: 4px; font-size: 10px; }

/* ------------------------------------------------------- HUD fit on touch */
body.touch-playing #hud {
  --hud-pad-x: max(10px, env(safe-area-inset-left));
  --hud-pad-y: max(10px, env(safe-area-inset-top));
  --map-size: 92px;
}
/* Vitals/round/points and the ammo block are lifted clear of the thumb zones:
   the stick owns the bottom-left ~300px and the fire cluster the bottom-right. */
body.touch-playing #bottom-left {
  bottom: auto;
  top: calc(max(10px, env(safe-area-inset-top)) + 116px);
  gap: 2px;
  /* Upstream's HUD type is sized for a 27" monitor; at 390 CSS px the points
     readout alone was a third of the screen width. */
  transform: scale(0.62);
  transform-origin: top left;
}
body.touch-playing #bottom-right {
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 296px);
  transform: scale(0.72);
  transform-origin: bottom right;
}
body.touch-playing #wave-progress,
body.touch-playing #pap-notice { top: calc(max(10px, env(safe-area-inset-top)) + 44px); }
body.touch-playing #pap-notice { top: calc(max(10px, env(safe-area-inset-top)) + 68px); }
/* The audio strip is top-right in a match; keep the drop timers under it. */
body.touch-playing #drop-timers { top: calc(max(10px, env(safe-area-inset-top)) + 82px); }
body.touch-playing #multiplayer-roster { top: calc(max(10px, env(safe-area-inset-top)) + 82px); }
/* Interact prompts sit just under the crosshair rather than low on the screen:
   at 34% they landed on the top row of the action pad. */
body.touch-playing #prompt-wrap { bottom: 42%; }
/* #toast is a plain fixed div at bottom-centre with default pointer-events, so
   in a match it would sit in thumb space and eat touches for 3.2s at a time. */
body.touch-playing #toast { pointer-events: none; bottom: auto; top: 24%; max-width: 86vw; font-size: 12px; padding: 8px 12px; }
body.touch-playing #lock-hint { display: none; }  /* nothing to click: no pointer lock on touch */
body.touch-playing #minimap-frame { opacity: 0.92; }

/* landscape phones: only ~390px of height, so everything compresses */
@media (orientation: landscape) and (max-height: 560px) {
  #tc-move { width: min(38vw, 300px); height: min(64vh, 240px); }
  #tc-fire { min-width: 72px; min-height: 72px; font-size: 11px; }
  .tc-btn { min-width: 46px; min-height: 44px; font-size: 10px; }
  .tc-btn.tc-small { min-width: 40px; min-height: 38px; font-size: 9px; }
  #tc-right { gap: 6px; }
  #tc-right .tc-row { gap: 6px; }
  /* Landscape is ~390px tall: the vitals move up beside the minimap (below),
     the audio strip owns the top right, and the only band left for SCORE/pause
     is directly under the minimap — the top centre collided with the strip. */
  #tc-top {
    /* clears the minimap frame: --map-size 72 + 10 padding + the caption line */
    top: calc(max(8px, env(safe-area-inset-top)) + 106px);
    left: max(10px, env(safe-area-inset-left));
    transform: none;
    flex-direction: row;
  }
  body.touch-playing #hud { --map-size: 72px; }
  /* Vitals go beside the minimap rather than under it — there is no "under". */
  body.touch-playing #bottom-left {
    top: max(10px, env(safe-area-inset-top));
    left: calc(max(10px, env(safe-area-inset-left)) + 88px);
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    transform: scale(0.62);
  }
  body.touch-playing #bottom-right { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 236px); transform: scale(0.62); }
  body.touch-playing #prompt-wrap { bottom: 44%; }
}

/* ------------------------------- house audio strip: thumb-sized on touch -- */
body.touch-device .audio-controls button { min-height: 40px; padding: 8px 12px; font-size: 13px; }
body.touch-device .audio-controls .volume-slider { width: 92px; height: 30px; }
body.touch-device #gameAudioControls {
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
}
body.touch-device #gameAudioControls .audio-controls {
  transform: none;
  max-width: min(56vw, 300px);
  padding: 4px;
  gap: 4px;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.55);
}
/* Still 30px+ tall — above the 24px that reads as a mis-tap on a phone — but
   small enough that two rows of five controls do not own the top of the HUD. */
body.touch-device #gameAudioControls .audio-controls button { min-height: 30px; font-size: 10px; padding: 4px 7px; }
body.touch-device #gameAudioControls .audio-controls .volume-slider { width: 56px; height: 26px; }

/* ------------------------------------------- lobby usability on a phone --- */
/* #menu already scrolls below 700px (style.css). These are the touch-target
   sizes and the landscape case, where the card is taller than the viewport. */
body.touch-device .site-lobby .mbtn,
body.touch-device .site-lobby .toggle-btn,
body.touch-device .site-lobby .team-select { min-height: 44px; font-size: 15px; }
body.touch-device .site-lobby .name-input { min-height: 46px; }
body.touch-device .site-lobby .lobby-actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
body.touch-device .site-lobby .lobby-actions-row .mbtn { flex: 1 1 44%; }

@media (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  #menu {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-block: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-bottom));
  }
  #menu .title-block { display: none; }         /* the wordmark alone is 40vh here */
  .site-lobby { width: min(96vw, 560px); }
  body.touch-device .site-lobby .lobby-actions-row .mbtn { flex: 1 1 22%; }
}

/* The controls reference in the field manual: touch players need the touch
   legend, not the WASD one. */
.kp-set.kp-desktop { display: contents; }
.kp-set.kp-touch { display: none; }
body.touch-device .kp-set.kp-desktop { display: none; }
body.touch-device .kp-set.kp-touch { display: contents; }