/* v3.7 touch controls (public/js/touch.js). The HUD keeps the --tc-* zones free while body.touch-play is set. */
:root {
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --tz: 1;
  --tc-left-w: calc(210px * var(--tz) + var(--sal));
  --tc-left-h: calc(200px * var(--tz) + var(--sab));
  --tc-right-w: calc(292px * var(--tz) + var(--sar));
  --tc-right-h: calc(212px * var(--tz) + var(--sab));
  --tc-top-w: calc(166px * var(--tz) + var(--sal));
  --tc-top-h: calc(56px * var(--tz) + var(--sat));
}
@media (max-width: 720px) and (max-height: 420px) { :root { --tz: 0.9; } }   /* small phones (iPhone SE…): leave more of the view free */
@media (min-height: 560px) { :root { --tz: 1.12; } }
@media (min-height: 760px) { :root { --tz: 1.25; } }
/* The layer sits between the game canvas and the DOM UI: the HUD draws over it (pointer-events: none lets fingers through),
   menus and overlays (o-settings, o-draft…) stay on top and take their own taps. */
#ui { z-index: 2; }
#touch { position: fixed; inset: 0; z-index: 1; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; font-family: var(--font-body); --tc-alpha: 0.7; }
#touch * { touch-action: none; -webkit-user-select: none; user-select: none; }
.tc-zone { position: absolute; top: var(--tc-top-h); bottom: 0; }
.tc-zl { left: 0; width: 48%; }
.tc-zr { right: 0; width: 52%; }
/* --- move stick: rests bottom-left, jumps under the thumb --- */
.tc-stick { position: absolute; left: 0; top: 0; width: calc(124px * var(--tz)); height: calc(124px * var(--tz)); margin: calc(-62px * var(--tz)) 0 0 calc(-62px * var(--tz));
  border-radius: 50%; pointer-events: none; opacity: calc(var(--tc-alpha) * 0.75);
  translate: calc(var(--sal) + 92px * var(--tz)) calc(100dvh - var(--sab) - 96px * var(--tz));
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0 52%, rgba(255,255,255,0.13) 53% 56%, rgba(255,255,255,0.04) 57%);
  border: 2px solid rgba(255,255,255,0.22); box-shadow: 0 0 0 1px rgba(0,0,0,0.35), inset 0 0 22px rgba(0,0,0,0.35); }
.tc-stick.on { translate: none; opacity: var(--tc-alpha); border-color: rgba(126,249,163,0.55); }
.tc-stick i { position: absolute; left: 50%; top: 50%; width: calc(54px * var(--tz)); height: calc(54px * var(--tz)); margin: calc(-27px * var(--tz)) 0 0 calc(-27px * var(--tz)); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f6fff8, #b9c7d6 60%, #7d8b9b); box-shadow: 0 4px 10px rgba(0,0,0,0.45); }
.tc-stick.on i { background: radial-gradient(circle at 40% 35%, #f3fff6, #7ef9a3 62%, #2f9c5a); }
/* --- floating aim pad (a drag on the free right half) --- */
.tc-aimpad { position: absolute; left: 0; top: 0; width: calc(104px * var(--tz)); height: calc(104px * var(--tz)); margin: calc(-52px * var(--tz)) 0 0 calc(-52px * var(--tz));
  border-radius: 50%; pointer-events: none; display: none; border: 2px dashed rgba(255,77,109,0.6); background: rgba(255,77,109,0.08); }
.tc-aimpad.on { display: block; }
.tc-aimpad i { position: absolute; left: 50%; top: 50%; width: calc(40px * var(--tz)); height: calc(40px * var(--tz)); margin: calc(-20px * var(--tz)) 0 0 calc(-20px * var(--tz)); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #ff4d6d 65%, #a0182f); }
/* --- buttons --- */
.tc-btn { position: absolute; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; color: #fff; opacity: var(--tc-alpha);
  background: radial-gradient(circle at 50% 35%, rgba(52,64,80,0.9), rgba(18,24,32,0.88)); border: 2px solid rgba(255,255,255,0.28);
  box-shadow: 0 5px 0 rgba(0,0,0,0.45), 0 8px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform .06s, box-shadow .06s, filter .1s; }
.tc-btn.down { transform: translateY(3px) scale(0.95); box-shadow: 0 2px 0 rgba(0,0,0,0.45), 0 3px 8px rgba(0,0,0,0.35); filter: brightness(1.35); opacity: 1; }
.tc-btn b { font: 400 calc(15px * var(--tz))/1 var(--font-head); letter-spacing: 1px; text-shadow: 0 2px 0 #000; }
.tc-btn svg { width: 46%; height: 46%; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.6)); }
.tc-ic { font-style: normal; font-size: calc(24px * var(--tz)); line-height: 1; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.6)); position: relative; }
.tc-jump { right: calc(var(--sar) + 22px * var(--tz)); bottom: calc(var(--sab) + 20px * var(--tz)); width: calc(88px * var(--tz)); height: calc(88px * var(--tz));
  background: radial-gradient(circle at 50% 35%, rgba(70,170,110,0.95), rgba(22,86,48,0.92)); border-color: rgba(126,249,163,0.7); }
.tc-fire { right: calc(var(--sar) + 122px * var(--tz)); bottom: calc(var(--sab) + 18px * var(--tz)); width: calc(92px * var(--tz)); height: calc(92px * var(--tz));
  background: radial-gradient(circle at 50% 35%, rgba(200,70,90,0.95), rgba(110,20,38,0.92)); border-color: rgba(255,140,160,0.75); }
.tc-fire.lock { border-color: #ffd166; box-shadow: 0 5px 0 rgba(0,0,0,0.45), 0 0 18px rgba(255,209,102,0.65); }
.tc-fire .tc-dir { position: absolute; inset: -9px; border-radius: 50%; display: none; pointer-events: none; }
.tc-fire .tc-dir::after { content: ''; position: absolute; right: -3px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #ffd166; box-shadow: 0 0 10px #ffd166; }
.tc-fire.drag .tc-dir { display: block; }
.tc-dash { right: calc(var(--sar) + 34px * var(--tz)); bottom: calc(var(--sab) + 120px * var(--tz)); width: calc(64px * var(--tz)); height: calc(64px * var(--tz));
  background: radial-gradient(circle at 50% 35%, rgba(70,120,200,0.95), rgba(22,44,96,0.92)); border-color: rgba(110,198,255,0.7); }
.tc-dash b { font-size: calc(12px * var(--tz)); }
.tc-dash.empty { filter: grayscale(0.8) brightness(0.7); }
.tc-pips { position: absolute; bottom: calc(-9px * var(--tz)); display: flex; gap: 3px; }
.tc-pips i { width: calc(9px * var(--tz)); height: calc(5px * var(--tz)); border-radius: 3px; background: rgba(255,255,255,0.25); }
.tc-pips i.on { background: #6ec6ff; box-shadow: 0 0 6px #6ec6ff; }
.tc-ab { right: calc(var(--sar) + 132px * var(--tz)); bottom: calc(var(--sab) + 126px * var(--tz)); width: calc(58px * var(--tz)); height: calc(58px * var(--tz)); --ac: #7ef9a3; --cd: 0; border-color: var(--ac); overflow: hidden; }
.tc-ab .tc-cd { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(0,0,0,0.68) calc(var(--cd) * 360deg), transparent 0); }
.tc-ab.ready { box-shadow: 0 5px 0 rgba(0,0,0,0.45), 0 0 14px var(--ac); }
.tc-ul { right: calc(var(--sar) + 204px * var(--tz)); bottom: calc(var(--sab) + 120px * var(--tz)); width: calc(56px * var(--tz)); height: calc(56px * var(--tz)); --p: 0; overflow: hidden; }
.tc-ul .tc-meter { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(255,209,102,0.55) calc(var(--p) * 360deg), transparent 0); }
.tc-ul .tc-pct { position: relative; font: 900 calc(10px * var(--tz))/1 var(--font-body); margin-top: 1px; text-shadow: 0 1px 0 #000; }
.tc-ul.ready { border-color: #ffd166; animation: tcUlt 1s ease-in-out infinite; opacity: 1; }
.tc-ul.on { border-color: #ff7a3a; background: radial-gradient(circle, rgba(255,122,58,0.9), rgba(120,40,10,0.9)); }
@keyframes tcUlt { 50% { box-shadow: 0 5px 0 rgba(0,0,0,0.45), 0 0 26px rgba(255,209,102,0.95); transform: scale(1.06); } }
.tc-sw { right: calc(var(--sar) + 228px * var(--tz)); bottom: calc(var(--sab) + 22px * var(--tz)); width: calc(52px * var(--tz)); height: calc(52px * var(--tz)); }
.tc-sw .tc-ic { font-size: calc(20px * var(--tz)); }
.tc-sw .tc-alt { font-size: calc(13px * var(--tz)); line-height: 1; margin-top: 1px; }
.tc-sw.dim { opacity: calc(var(--tc-alpha) * 0.5); }
/* --- top-left: pause, emotes, scores --- */
.tc-top { position: absolute; left: calc(var(--sal) + 8px); top: calc(var(--sat) + 8px); display: flex; gap: calc(8px * var(--tz)); }
.tc-sbtn { width: calc(44px * var(--tz)); height: calc(44px * var(--tz)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: calc(19px * var(--tz)); color: #fff;
  background: rgba(14,19,27,0.78); border: 1px solid rgba(255,255,255,0.18); opacity: max(0.75, var(--tc-alpha)); }
.tc-sbtn.down { filter: brightness(1.5); transform: scale(0.94); }
.tc-sbtn img { width: 70%; height: 70%; object-fit: contain; pointer-events: none; }
.tc-sbtn b { font: 400 calc(16px * var(--tz))/1 var(--font-head); }
.tc-scores { display: none; }
#touch.arena .tc-scores { display: flex; }
.tc-emotes { position: absolute; left: calc(var(--sal) + 8px); top: calc(var(--sat) + 60px * var(--tz)); display: flex; gap: 8px; padding: 6px; border-radius: 14px; background: rgba(10,14,20,0.85); border: 1px solid rgba(255,255,255,0.14); }
.tc-emotes .tc-sbtn { width: calc(52px * var(--tz)); height: calc(52px * var(--tz)); opacity: 1; }
/* an on-screen button named in a hint (tutorial, tips) */
.tc-word { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #2a3546; border: 1px solid rgba(255,255,255,0.28); font: 400 13px/1.3 var(--font-head); letter-spacing: 1px; color: #fff; }
/* Settings: the touch rows only where they matter — all of them with touch on, just the on/off switch on a touch-screen
   laptop, none on a mouse-only desktop (the panel keeps its 3.6 size there). */
body:not(.touch) .tc-row-more { display: none !important; }
@media not (any-pointer: coarse) { body:not(.touch) .tc-row { display: none !important; } }
/* auto-shoot on: FIRE says so (it still shoots by hand, and lights up gold while the aim has a target) */
.tc-fire .tc-auto { display: none; margin-top: 2px; font: 900 calc(9px * var(--tz))/1 var(--font-body); letter-spacing: 1px; padding: 2px 5px; border-radius: 999px; background: rgba(0,0,0,0.45); color: #ffd166; }
#touch.autofire .tc-fire .tc-auto { display: block; }
#touch.autofire .tc-fire svg { width: 40%; height: 40%; }
/* Settings → Arrange buttons: the layer comes up over everything, buttons drag, a bar on top (size, reset, done) */
#touch.edit { z-index: 60; background: rgba(5,8,12,0.62); }
#touch.edit .tc-zone, #touch.edit .tc-top, #touch.edit .tc-emotes { visibility: hidden; }
#touch.edit .tc-btn { opacity: 1; outline: 2px dashed rgba(255,255,255,0.55); outline-offset: 4px; cursor: grab; }
#touch.edit .tc-btn.down { outline-color: #7ef9a3; filter: brightness(1.2); }
#touch.edit .tc-stick { opacity: 0.9; }
.tc-editbar { position: absolute; left: 50%; top: calc(var(--sat) + 8px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 14px;
  background: rgba(10,14,20,0.94); border: 1px solid rgba(255,255,255,0.18); white-space: nowrap; color: #fff; }
.tc-editbar b { font: 400 18px/1 var(--font-head); letter-spacing: 1px; color: var(--green, #7ef9a3); }
.tc-editbar span { font-size: 12px; color: #cfd8e3; font-weight: 700; }
.tc-editbar i { font-style: normal; font-weight: 900; font-size: 13px; padding: 8px 12px; border-radius: 10px; background: #2a3546; border: 1px solid rgba(255,255,255,0.2); min-width: 36px; text-align: center; }
.tc-editbar i.on { background: #1d6a3e; border-color: #7ef9a3; }
.tc-editbar .tc-ed-size { display: flex; gap: 4px; }
.tc-editbar .tc-ed-done { background: #1d6a3e; border-color: #7ef9a3; }
@media (max-width: 760px) { .tc-editbar > span:not(.tc-ed-size) { display: none; } }

/* ---------- v3.7.1 phone HUD: less on screen ----------
   The playfield comes first on a 6" screen: no dark boxes across the top, the objective one slim line, the left column just
   HP, the gun + ammo and the crew's health; the radio is a subtitle (story.js). Everything else shows up when it matters. */
body.touch .camp-top { width: clamp(180px, calc(100vw - 2 * (max(var(--sal), var(--sar)) + var(--hud-col) + 18px)), 300px); }
body.touch .camp-obj { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 7px; padding: 2px 10px 3px; border-top-width: 0;
  background-color: rgba(10,14,20,0.5); box-shadow: none; }
body.touch .camp-obj small, body.touch .camp-obj .obj-seeds { display: none; }   /* chapter · clock and the seed dots: in the menu */
body.touch .camp-obj b { font-size: 15px; letter-spacing: 1px; line-height: 1.15; }
body.touch .camp-obj span { font-size: 12px; line-height: 1.15; }
body.touch .camp-obj .obj-hp, body.touch .camp-obj .obj-warn { flex-basis: 100%; }
body.touch .camp-obj .obj-warn { font-size: 13px; }
/* left column: HP · gun icon + ammo (the holstered gun is on the ⇄ button) · the crew as portraits with health bars */
body.touch .hp-wrap, body.touch .weapon-box, body.touch .cm, body.touch .sb { background: rgba(10,14,20,0.5); box-shadow: none; }
body.touch, body.touch #hud:has(#vibe:not(.hidden)) { --vit-h: 56px; }
body.touch #hud:has(#vibe:not(.hidden):not(.t0)) { --vit-h: 78px; }
body.touch .weapon-box { width: auto; max-width: 100%; align-self: flex-start; height: 28px; }
body.touch .weapon-box canvas { width: 24px; height: 24px; }
body.touch #weapon-name, body.touch .wb-alt { display: none !important; }
body.touch #weapon-ammo { font-size: 13px; font-weight: 900; }
body.touch .vibe.t0 { display: none; }   /* CHILL (nothing going on): no meter */
body.touch .crew-panel { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
body.touch .cm { padding: 2px; gap: 3px; }
body.touch .cm-name, body.touch .cm-state:empty { display: none; }
body.touch .cm canvas { width: 18px; height: 18px; }
body.touch .cm .sb-hp { margin-top: 0; }
body.touch .cm-state { font-size: 10px; }
/* top right: a smaller, see-through minimap; no killfeed in co-op (two in the arena) */
body.touch #minimap { width: min(120px, 16vw); opacity: 0.8; }
body.touch #hud.camp .killfeed { display: none; }
body.touch .kf:nth-last-child(n+3) { display: none; }