/* touch controls */
#touch{position:absolute;inset:0;z-index:6;display:none;pointer-events:none}
#touch.on{display:block}
/* While a conversation is up it covers the bottom of the screen — and with it
   the pad. Hide the controls so they are not showing through as dead buttons. */
body.talking #touch.on{display:none}
/* Hidden under full-screen overlays too; a faint pad behind one if :has() is
   missing is harmless. */
#app:has(#combat.on) #touch.on,
#app:has(#panel.on) #touch.on,
#app:has(#ending.on) #touch.on{display:none}
/* The stick's catchment: an invisible zone claiming the corner the thumb
   rests in; the stick springs to where you land. It stops short of E's side,
   and its 244px height is where the prompt starts, so the stick never covers
   it. */
#stickZone{position:absolute;left:0;bottom:0;width:min(58%,340px);height:min(50%,244px);
  pointer-events:auto;touch-action:none}
/* The base rests here and moves to the thumb by inline left/top, cleared on
   release, so the resting position (and southpaw mirroring) stays in CSS. */
.stick{position:absolute;left:calc(18px + env(safe-area-inset-left));
  bottom:calc(84px + env(safe-area-inset-bottom));width:132px;height:132px;border-radius:50%;
  pointer-events:none;opacity:.42;transition:opacity .18s}
.stick::before{content:'';position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);background:rgba(9,12,18,.34)}
/* The knob moves by transform every frame, never eased. */
#stickKnob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;
  border-radius:50%;background:radial-gradient(circle at 50% 32%,rgba(255,111,145,.62),rgba(255,111,145,.3));
  border:2px solid var(--brand);box-shadow:0 8px 20px -10px rgba(255,111,145,.9);will-change:transform}
.stick.grab{opacity:.96}
body.southpaw .stick{left:auto;right:calc(18px + env(safe-area-inset-right))}
/* ---- the aim stick ----
   Read as a bearing; past half fires. Only with a gun drawn, and never in a
   car. */
#aimZone{display:none;position:absolute;right:0;bottom:0;
  width:min(50%,340px);height:min(50%,244px);pointer-events:auto;touch-action:none}
body.armed #aimZone{display:block}
body.driving #aimZone{display:none}
/* Both catchments tile the bottom of the screen exactly:
   the movement zone gives back the width it only has while the other corner is
   empty. */
body.armed #stickZone{width:min(50%,340px)}
/* D-pad players still aim with a stick: aiming needs analogue. */
body.dpad-controls.armed #aimZone{display:block}
#aim,#aimHint{left:auto;right:calc(98px + env(safe-area-inset-right));
  bottom:calc(38px + env(safe-area-inset-bottom))}
body.southpaw #aim,body.southpaw #aimHint{right:auto;left:calc(98px + env(safe-area-inset-left))}
/* Red, and nothing like the walk stick: a scope. A crimson base with
   crosshair ticks at the four points, a dashed ring turning slowly round it,
   and a reticle for a knob. While it is firing (past half a push,
   Guns.point()) the lot goes hot: the ring spins up and the base throbs. */
#aim.stick{background:none!important;border:0!important;opacity:.78}
#aim.grab{opacity:1}
#aim::before{border:2px solid rgba(255,59,59,.55)!important;
  background:
    radial-gradient(circle,rgba(255,40,40,.0) 0 30%,rgba(255,59,59,.28) 31% 32%,transparent 33%),
    conic-gradient(from -3deg,#ff4040 0 6deg,transparent 6deg 90deg,#ff4040 90deg 96deg,transparent 96deg 180deg,
      #ff4040 180deg 186deg,transparent 186deg 270deg,#ff4040 270deg 276deg,transparent 276deg) ,
    radial-gradient(circle at 50% 42%,rgba(120,8,16,.62),rgba(36,4,10,.55) 70%)!important;
  box-shadow:0 0 26px -8px rgba(255,40,40,.75),inset 0 0 22px rgba(255,30,30,.25)!important}
#aim .aim-ring{position:absolute;inset:-9px;border-radius:50%;pointer-events:none;
  border:2px dashed rgba(255,72,72,.6);animation:aimSpin 9s linear infinite}
#aimKnob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;
  border-radius:50%;border:2px solid #ff3b3b;will-change:transform;
  background:radial-gradient(circle at 50% 30%,#ff8a7a,#e01b2b 52%,#6e0712);
  box-shadow:0 0 18px rgba(255,40,40,.75),0 8px 20px -8px rgba(120,0,0,.9),inset 0 2px 6px rgba(255,255,255,.35)}
/* The reticle: a ring, a cross with a gap in the middle, and a dot. */
#aimKnob::before{content:'';position:absolute;inset:10px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.9);
  background:
    linear-gradient(#fff,#fff) 50% 0/1.5px 32% no-repeat,linear-gradient(#fff,#fff) 50% 100%/1.5px 32% no-repeat,
    linear-gradient(#fff,#fff) 0 50%/32% 1.5px no-repeat,linear-gradient(#fff,#fff) 100% 50%/32% 1.5px no-repeat}
#aimKnob::after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;
  border-radius:50%;background:#fff;box-shadow:0 0 6px #fff}
#aim.firing .aim-ring{border-color:#ff5050;border-style:solid dashed;animation-duration:.9s}
#aim.firing::before{animation:aimThrob .16s ease-in-out infinite alternate}
#aim.firing #aimKnob{border-color:#fff;
  box-shadow:0 0 28px 4px rgba(255,40,40,.95),0 0 60px 8px rgba(255,0,0,.35),inset 0 2px 6px rgba(255,255,255,.45)}
@keyframes aimSpin{to{transform:rotate(360deg)}}
@keyframes aimThrob{from{box-shadow:0 0 26px -6px rgba(255,40,40,.8),inset 0 0 22px rgba(255,30,30,.3)}
  to{box-shadow:0 0 44px 2px rgba(255,30,30,.95),inset 0 0 36px rgba(255,40,40,.55)}}
@media (prefers-reduced-motion:reduce){#aim .aim-ring,#aim.firing::before{animation:none}}
/* What it is for, on the resting stick, gone the moment a thumb is on it. */
#aimHint{position:absolute;width:132px;height:132px;display:flex;align-items:flex-end;justify-content:center;
  transform:translateY(25px);
  font-family:var(--display);font-weight:700;font-size:9px;letter-spacing:.14em;color:#ff6b6b;
  text-shadow:0 0 8px rgba(255,40,40,.8);pointer-events:none;transition:opacity .18s}
#aimZone:has(.stick.grab) #aimHint{opacity:0}

/* Getting out is E, relabelled and unmoved. */
body.driving #touchE{font-size:12px;letter-spacing:.06em}
/* D-pad mode. Same footprint, same corner — for anyone who would rather have
   four edges to find by feel than an analogue stick. */
.dpad{display:none;position:absolute;left:calc(14px + env(safe-area-inset-left));
  bottom:calc(76px + env(safe-area-inset-bottom));width:150px;height:150px;pointer-events:auto;touch-action:none}
.dpad button{position:absolute;width:50px;height:50px;background:rgba(34,43,59,.8);border:1px solid var(--line);
  border-radius:10px;color:var(--text);font-size:16px;touch-action:none}
.dpad button:active{background:rgba(255,111,145,.35);border-color:var(--brand)}
.dpad .u{left:50px;top:0}.dpad .d{left:50px;top:100px}.dpad .l{left:0;top:50px}.dpad .r{left:100px;top:50px}
/* Exactly one of the two is ever on screen. Both live in the markup so the
   switch is a class rather than a rebuild — see Hand.apply(). */
body.dpad-controls #stickZone{display:none}
body.dpad-controls .dpad{display:block}
#touchE{position:absolute;right:calc(18px + env(safe-area-inset-right));
  bottom:calc(96px + env(safe-area-inset-bottom));width:74px;height:74px;border-radius:50%;
  background:rgba(255,111,145,.25);border:2px solid var(--brand);color:#fff;font-size:15px;
  pointer-events:auto;font-family:var(--mono);touch-action:none}
#touchE:active{background:rgba(255,111,145,.5)}
#hudBottom{padding-bottom:env(safe-area-inset-bottom)}
#hudTL{top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left))}
#hudTR{top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right))}
#touchMenu{position:absolute;right:calc(18px + env(safe-area-inset-right));
  bottom:calc(182px + env(safe-area-inset-bottom));width:54px;height:54px;border-radius:50%;
  background:rgba(21,27,37,.88);border:1px solid var(--line);color:var(--text);font-size:20px;
  pointer-events:auto;touch-action:none}
#touchMenu:active{border-color:var(--brand);background:rgba(255,111,145,.3)}
/* Southpaw mirrors the whole layout off a body class (Hand.apply()). */
body.southpaw #stickZone{left:auto;right:0}
body.southpaw .dpad{left:auto;right:calc(14px + env(safe-area-inset-right))}
body.southpaw #touchE{right:auto;left:calc(18px + env(safe-area-inset-left))}
body.southpaw #touchMenu{right:auto;left:calc(18px + env(safe-area-inset-left))}
/* ---- driving ----
   The left stick is the wheel: arrowheads ◀▶ on its ring say so (the .arr it
   adds to itself, engine/controls.js), breathing outwards while it rests and
   brighter under a thumb, and its knob moves only sideways. The right corner
   is the pedals; E and the throttle stick are not needed, and getting out is
   the small door up by the menu. */
.stick .arr{display:none;position:absolute;width:0;height:0;border:10px solid transparent;
  filter:drop-shadow(0 0 4px rgba(255,111,145,.85));animation:arrNudge 1.8s ease-in-out infinite}
.stick .arr.l{left:-14px;top:50%;margin-top:-10px;border-left-width:0;border-right:13px solid #ff6f91;--nx:-3px;--ny:0}
.stick .arr.r{right:-14px;top:50%;margin-top:-10px;border-right-width:0;border-left:13px solid #ff6f91;--nx:3px;--ny:0}
@keyframes arrNudge{0%,100%{transform:translate(0,0)}50%{transform:translate(var(--nx),var(--ny))}}
.stick.grab .arr{animation:none;filter:drop-shadow(0 0 7px rgba(255,111,145,1))}
body.driving #stick .arr.l,body.driving #stick .arr.r{display:block}
@media (prefers-reduced-motion: reduce){.stick .arr{animation:none}}
body.driving #stickZone{width:min(58%,340px)}
body.driving #touchE{display:none!important}
#touchGas,#touchBrake,#touchOut,#touchGun{display:none;position:absolute;pointer-events:auto;touch-action:none;
  font-family:var(--display);color:#fff;-webkit-tap-highlight-color:transparent}
body.driving #touchGas,body.driving #touchBrake,body.driving #touchOut{display:flex}
/* Pedals: one column at the thumb's edge, GO above BRAKE, so the thumb rocks
   between them without leaving the line. */
#touchGas,#touchBrake{flex-direction:column;align-items:center;justify-content:center;gap:2px;
  right:calc(18px + env(safe-area-inset-right));width:84px;border-radius:20px;
  border:2px solid rgba(255,255,255,.3);font-weight:700;font-size:11px;letter-spacing:.12em;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.8),inset 0 2px 0 rgba(255,255,255,.18);transition:transform .08s,filter .08s}
#touchGas{bottom:calc(112px + env(safe-area-inset-bottom));height:104px;
  background:linear-gradient(180deg,rgba(72,214,140,.62),rgba(22,140,84,.62))}
#touchBrake{bottom:calc(26px + env(safe-area-inset-bottom));height:76px;
  background:linear-gradient(180deg,rgba(255,120,90,.6),rgba(190,40,40,.6))}
#touchGas .pd-i,#touchBrake .pd-i{font-size:22px;line-height:1;text-shadow:0 0 10px rgba(255,255,255,.5)}
#touchGas.down,#touchBrake.down{transform:scale(.94) translateY(2px);filter:brightness(1.25)}
/* Out of the car, and the gun: small round buttons above the menu. */
#touchOut,#touchGun{align-items:center;justify-content:center;right:calc(24px + env(safe-area-inset-right));
  bottom:calc(246px + env(safe-area-inset-bottom));width:44px;height:44px;border-radius:50%;
  background:rgba(21,27,37,.82);border:1px solid var(--line);font-size:19px}
#touchOut:active,#touchGun:active{border-color:var(--brand);background:rgba(255,111,145,.3)}
body.has-gun #touchGun{display:flex}
body.armed #touchGun{border-color:rgba(255,120,120,.7);background:rgba(80,20,24,.82)}
body.southpaw #touchGas,body.southpaw #touchBrake{right:auto;left:calc(18px + env(safe-area-inset-left))}
body.southpaw #touchOut,body.southpaw #touchGun{right:auto;left:calc(24px + env(safe-area-inset-left))}
/* While driving the pedals take the menu's corner, so it moves up beside the door. */
body.driving #touchMenu{right:calc(80px + env(safe-area-inset-right));bottom:calc(241px + env(safe-area-inset-bottom))}
body.southpaw.driving #touchMenu{right:auto;left:calc(80px + env(safe-area-inset-left))}
/* ---- the aim stick, quieter ----
   Only with a gun drawn (body.armed). A thin ring with four ticks and a
   small reticle, faint at rest; the red only comes up while it fires. */
#aim.stick{opacity:.5!important;width:112px;height:112px}
#aim.grab{opacity:.9!important}
#aim::before{border:1.5px solid rgba(255,255,255,.28)!important;box-shadow:none!important;animation:none!important;
  background:
    conic-gradient(from -2deg,rgba(255,255,255,.55) 0 4deg,transparent 4deg 90deg,rgba(255,255,255,.55) 90deg 94deg,transparent 94deg 180deg,
      rgba(255,255,255,.55) 180deg 184deg,transparent 184deg 270deg,rgba(255,255,255,.55) 270deg 274deg,transparent 274deg),
    rgba(9,12,18,.3)!important}
#aim .aim-ring{display:none}
#aimHint{display:none!important}
#aimKnob{width:42px!important;height:42px!important;margin:-21px 0 0 -21px!important;
  background:rgba(20,24,32,.55)!important;border:1.5px solid rgba(255,255,255,.75)!important;box-shadow:none!important}
#aimKnob::before{inset:7px!important}
#aim.firing #aimKnob{border-color:#ff6b6b!important;box-shadow:0 0 10px rgba(255,60,60,.6)!important}
#aim.firing::before{border-color:rgba(255,107,107,.55)!important}
/* A passenger has nothing to press or steer: "Here's fine" is in the cab's
   bar. The menu stays. */
body.in-cab #touchE,body.in-cab #touchJ,body.in-cab #touchHit,body.in-cab #stickZone,body.in-cab .dpad{display:none!important}
/* The on-foot guide talks about walking; in a car it is only in the way. */
body.driving #guide{display:none!important}