/* On-screen controls of a touch device (js/ui/touch.js builds #touch): geometry only, the skin of the buttons is css/ag-win-touch.css. Landscape and portrait share one DOM; every
   control is >= 44 CSS px. What is visible depends on where the player is (foot.js sets body.on-foot):
     on foot : stick (walk) bottom left, attack (big) bottom right with next-target and get-in beside it, chat button
     in a car: stick (steering) bottom left, gas (big) bottom right, brake, handbrake, bonus, get-out, camera / reset / pause / garage row
   #touch sits inside the safe area (--ins-*: notch, home bar). The windows around it (status, target, map, menu, shortcut bar, chat) are placed by css/ag-win-touch.css. */
body.touch{--bar-b:6px}   /* where the shortcut bar stands above the bottom edge; the speedometer rides on it */
#touch{--tb:48px;--tbig:76px;--tstk:132px;--tg:10px;--edge:14px;--tbtn:52px}
#touch>*{position:absolute}
#tStick{left:0;bottom:0;width:var(--tstk);height:var(--tstk);margin:var(--edge)}
#tStick::before{content:"";position:absolute;inset:-18px}   /* the finger may start a little outside the ring */
#tRing{position:absolute;inset:0;display:block;border-radius:50%;pointer-events:none}
#tKnob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;display:block;border-radius:50%;pointer-events:none}
.tBtn{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:var(--tb);height:var(--tb);user-select:none;-webkit-user-select:none;overflow:hidden}
.tBtn .ti{display:block;pointer-events:none;position:absolute}
.tBtn .tg{position:relative;z-index:1;pointer-events:none;line-height:1;font-size:26px;font-weight:700}
.tBtn .ti[data-ok="1"]~.tg{display:none}   /* a skin icon replaces the glyph */
/* in a car / on foot */
body.on-foot #tGas,body.on-foot #tBrake,body.on-foot #tHand,body.on-foot #tItem,body.on-foot #tCam,body.on-foot #tReset,body.on-foot #tPause,body.on-foot #tGarage{display:none}
body:not(.on-foot) #tAtk,body:not(.on-foot) #tNext,body:not(.on-foot) #tForce{display:none}
body:not(.touch) #tChat{display:none}
/* the right-hand corner: every button is placed from the bottom-right corner */
#tAtk{right:var(--edge);bottom:var(--edge);width:var(--tbig);height:var(--tbig)}
#tNext{right:calc(var(--edge) + var(--tbig) + var(--tg));bottom:var(--edge);width:var(--tbtn);height:var(--tbtn)}
#tCar{right:var(--edge);bottom:calc(var(--edge) + var(--tbig) + var(--tg));width:var(--tbtn);height:var(--tbtn)}
#tForce{right:calc(var(--edge) + var(--tbig) + var(--tg));bottom:calc(var(--edge) + var(--tbtn) + var(--tg));width:var(--tbtn);height:var(--tbtn)}   /* above next target: forced attack (Ctrl + click) */
#tGas{right:var(--edge);bottom:var(--edge);width:84px;height:84px}
#tBrake{right:calc(var(--edge) + 84px + var(--tg));bottom:var(--edge);width:64px;height:64px}
#tHand{right:calc(var(--edge) + 84px + var(--tg));bottom:calc(var(--edge) + 64px + var(--tg));width:var(--tbtn);height:var(--tbtn)}
#tItem{right:var(--edge);bottom:calc(var(--edge) + 84px + var(--tg));width:var(--tbtn);height:var(--tbtn)}
body:not(.on-foot) #tCar{right:calc(var(--edge) + 84px + var(--tg) + 64px + var(--tg));bottom:var(--edge)}   /* in a car: get-out stands left of the brake */
/* the camera / reset / pause / garage row of a car, under the menu strip */
#tPause,#tReset,#tCam,#tGarage{top:70px;width:var(--tb);height:var(--tb)}
#tPause{right:var(--edge)}
#tReset{right:calc(var(--edge) + var(--tb) + 6px)}
#tCam{right:calc(var(--edge) + 2*(var(--tb) + 6px))}
#tGarage{right:calc(var(--edge) + 3*(var(--tb) + 6px))}
#touch.tilt #tStick{display:none}
body.on-foot #touch.tilt #tStick{display:block}
body.ptr-only #tStick,body.ptr-only #tGas,body.ptr-only #tBrake{display:none}
/* chat on a phone: a button opens the whole window (tap again to close); the button stands left of the menu strip (landscape) / under the status window (portrait) */
body.touch:not(.chat-open) #chatWin{display:none!important}
body.touch.chat-open #chatWin{z-index:6}
body.chat-open #tStick{visibility:hidden}   /* the chat covers the corner: its list must not show a stick under it */
#tChat{top:8px;right:calc(173px*1.35 + 8px)}
/* the speedometer sits above the shortcut bar */
body.touch #tacho{right:auto;left:50%;transform:translateX(-50%);bottom:calc(var(--bar-b) + 64px + var(--ins-b));width:110px;height:110px}
@media (orientation: portrait){
  body.touch{--bar-b:162px}   /* above the stick (14 + 132) and the right-hand buttons */
  #tPause,#tReset,#tCam,#tGarage{top:296px}
  #tChat{top:128px;left:6px;right:auto}
}
/* the full-screen toggle (js/ui/fullscreen.js builds #fsBtn only on a touch device whose browser can do element full screen): one small corner button on every screen. It is a body child, not part of
   #touch, so the safe area is added here. Entry screens (login / lobby / character select): the top-right corner is free. In the game that corner is the menu strip's: the button takes the fifth place of the
   camera / reset / pause / garage row (the same top as #tPause) in a car, and the row's right-hand end on foot, where the row is empty (the menu window is shown only in the game). */
/* (it carries the .tBtn class: the same skin and centring as the other mobile buttons, the corner-bracket icon is drawn in currentColor = the gold of the skin's text) */
#fsBtn{position:fixed;z-index:var(--z-hud-win);display:flex;width:44px;height:44px;top:calc(var(--ins-t) + 8px);right:calc(var(--ins-r) + 8px);touch-action:manipulation}
#fsBtn svg{display:block;pointer-events:none}
body:has(#menuWnd:not(.hidden)) #fsBtn{top:calc(var(--ins-t) + 70px + 2px);right:calc(var(--ins-r) + 14px + 4*54px + 2px)}   /* (+2: the 44 px button centred on the 48 px row) */
body.on-foot:has(#menuWnd:not(.hidden)) #fsBtn{right:calc(var(--ins-r) + 14px + 2px)}
@media (orientation: portrait){
  body:has(#menuWnd:not(.hidden)) #fsBtn{top:calc(var(--ins-t) + 296px + 2px)}
}