/* MEEZ ROYALE - commandes tactiles (sticks flottants, boutons, ramasser, spectateur, gaucher, tailles) : charge SEULEMENT sur telephone (device.js). Voir mobile/controls.js. */
/* ---------------------------------------------------------------- commandes tactiles */
#hud.in-lobby #touchUi, #hud.in-ins #touchUi { display: none; }

#touchUi.dead .t-zone, #touchUi.dead .t-stick, #touchUi.dead .t-fire, #touchUi.dead .t-side, #touchUi.dead .t-pick { display: none; }

/* zones tactiles (invisibles) : on pose le pouce n'importe ou dans la moitie, le stick apparait sous lui (mobile/controls.js). La barre d'armes passe AU-DESSUS (z-index) pour rester touchable. */
.t-zone { position: absolute; top: 14%; bottom: 0; pointer-events: auto; touch-action: none; }

.t-move { left: 0; width: 46%; }

.t-aim { right: 0; width: 46%; }

body.lefty .t-move { left: auto; right: 0; }

body.lefty .t-aim { right: auto; left: 0; }

body.tf-button .t-aim, body.tf-button #tAimBase { display: none; }

.t-stick { position: absolute; left: 80px; top: 300px; width: calc(var(--r, 58px) * 2); height: calc(var(--r, 58px) * 2); margin: calc(var(--r, 58px) * -1) 0 0 calc(var(--r, 58px) * -1); border-radius: 50%; pointer-events: none;
  opacity: .4; transition: opacity .15s, left .2s var(--ease, ease-out), top .2s var(--ease, ease-out); border: 2px solid rgba(255,255,255,.3);
  background: radial-gradient(circle, rgba(255,255,255,.04), rgba(255,255,255,.13)); box-shadow: inset 0 0 22px rgba(0,0,0,.4); }

.t-stick.on { opacity: 1; transition: opacity .1s; }

.t-knob { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; margin: -23% 0 0 -23%; border-radius: 50%; transform: translate(var(--kx, 0px), var(--ky, 0px));
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.62), rgba(255,255,255,.24)); border: 2px solid rgba(255,255,255,.55); box-shadow: 0 4px 14px rgba(0,0,0,.4); }

.t-stick-aim { border-color: rgba(255,150,120,.45); background: radial-gradient(circle, rgba(255,120,90,.06), rgba(229,72,77,.2)); }

.t-stick-aim.on { border-color: rgba(255,170,140,.75); }

.t-stick-aim.fire { border-color: #ff8a70; box-shadow: 0 0 26px rgba(255,100,70,.55), inset 0 0 22px rgba(229,72,77,.4); }

.t-stick-aim.fire .t-knob { background: radial-gradient(circle at 35% 30%, rgba(255,210,180,.92), rgba(255,100,70,.55)); border-color: #ffd0b0; }

.t-stick-aim.arm { border-color: #ff6a55; box-shadow: 0 0 30px rgba(255,90,60,.65), inset 0 0 24px rgba(229,72,77,.5); animation: armPulse .7s ease-in-out infinite alternate; }

.t-stick-aim.arm .t-knob { background: radial-gradient(circle at 35% 30%, rgba(255,230,210,.95), rgba(255,70,50,.7)); border-color: #fff; }

@keyframes armPulse { to { box-shadow: 0 0 40px rgba(255,90,60,.9), inset 0 0 28px rgba(229,72,77,.65); } }

.t-aim-ico { position: absolute; left: 50%; top: 50%; margin: -15px 0 0 -15px; opacity: .6; pointer-events: none; color: #fff; }

.t-stick-aim.on .t-aim-ico { opacity: 0; }

.t-fire { position: absolute; right: calc(26px + var(--sar)); bottom: calc(86px + var(--sab)); width: 124px; height: 124px; border-radius: 50%; pointer-events: auto; touch-action: none;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 40% 32%, rgba(255,140,100,.55), rgba(229,72,77,.34) 62%, rgba(229,72,77,.22)); border: 2px solid rgba(255,150,120,.6); box-shadow: 0 6px 22px rgba(0,0,0,.4); }

.t-fire-ring { position: absolute; inset: 7px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.28); pointer-events: none; }

.t-fire-knob { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; pointer-events: none; transform: translate(var(--fx, 0px), var(--fy, 0px));
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.4), rgba(255,255,255,.1)); border: 2px solid rgba(255,255,255,.4); }

.t-fire-ico { position: relative; pointer-events: none; opacity: .95; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }

.t-fire { display: none; }

body.tf-button .t-fire { display: grid; }

.t-fire.on { background: radial-gradient(circle at 40% 32%, rgba(255,190,120,.8), rgba(229,72,77,.6) 62%, rgba(229,72,77,.4)); border-color: #ffd0b0; transform: scale(.96); }

.t-side { position: absolute; right: calc(14px + var(--sar)); bottom: calc(14px + var(--sab)); display: flex; flex-direction: column; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 12px; max-height: calc(100% - 126px - var(--sab)); }

body.lefty .t-side { right: auto; left: calc(14px + var(--sal)); flex-wrap: wrap; max-height: calc(100% - 140px - var(--sab)); }       /* gaucher : sous la minicarte et la vie */

body.tf-button .t-side { bottom: calc(94px + var(--sab)); right: calc(164px + var(--sar)); flex-direction: row; flex-wrap: nowrap; max-height: none; }

body.tf-button.lefty .t-side { left: calc(164px + var(--sal)); right: auto; }

body.tsz-0 { --tsz: .86; }

body.tsz-1 { --tsz: 1; }

body.tsz-2 { --tsz: 1.18; }

.t-btn { width: calc(54px * var(--tsz, 1)); height: calc(54px * var(--tsz, 1)); padding: 0; border-radius: 50%; pointer-events: auto; touch-action: none; display: grid; place-items: center; color: #fff; cursor: pointer;
  background: rgba(20,17,14,.62); border: 2px solid rgba(255,255,255,.3); box-shadow: 0 4px 14px rgba(0,0,0,.4); }

.t-btn.on { background: rgba(255,255,255,.28); transform: scale(.94); }

/* telephone en paysage : jusqu'a 4 boutons dans la colonne (recharger, grenade, bouclier, soin), collee en bas a droite sous le flux d'eliminations : colonne plus serree pour tenir sur 360 px de haut */
@media (max-height: 430px) { .t-side { gap: 9px; } .t-btn { width: calc(50px * var(--tsz, 1)); height: calc(50px * var(--tsz, 1)); } }

/* 4 boutons a la fois (recharger + grenade + bouclier + soin) sur ecran bas : un peu plus petits pour que la colonne reste sous le flux d'eliminations (TOUCH.sync pose `many`) */
@media (max-height: 430px) { .t-side.many { gap: 6px; } .t-side.many .t-btn { width: calc(42px * var(--tsz, 1)); height: calc(42px * var(--tsz, 1)); } }

.t-pick { position: absolute; right: calc(104px + var(--sar)); bottom: calc(158px + var(--sab)); min-width: 150px; max-width: 230px; height: calc(58px * var(--tsz, 1)); padding: 0 18px 0 8px; border-radius: 30px; pointer-events: auto; touch-action: none;
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; color: #1a1108; cursor: pointer; font: 800 14px var(--ui); letter-spacing: .3px; text-align: left;
  background: linear-gradient(90deg, #ffe38a, var(--pc, #f0c869)); border: 2px solid rgba(255,255,255,.6); box-shadow: 0 6px 20px rgba(0,0,0,.45), 0 0 18px color-mix(in srgb, var(--pc, #f0c869) 60%, transparent);
  animation: pickPop .25s var(--ease); }

.tp-ico { flex: none; width: calc(40px * var(--tsz, 1)); height: calc(40px * var(--tsz, 1)); border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 20px; background: rgba(26,17,8,.16); }

.tp-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }

.tp-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }

.tp-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 11px var(--ui); opacity: .72; letter-spacing: .2px; }

.tp-txt small.hidden { display: none; }

.t-pick.hidden { display: none; }

body.lefty .t-pick { right: auto; left: calc(104px + var(--sal)); }

body.tf-button .t-pick { right: calc(20px + var(--sar)); bottom: calc(14px + var(--sab)); }

body.tf-button.lefty .t-pick { right: auto; left: calc(20px + var(--sal)); }

.t-pick.on { transform: scale(.95); }

@keyframes pickPop { from { transform: scale(.7); opacity: 0; } }

.t-spec { position: absolute; right: calc(26px + var(--sar)); bottom: calc(40px + var(--sab)); height: 56px; padding: 0 22px; border-radius: 28px; pointer-events: auto; touch-action: none; color: #fff; cursor: pointer;
  font: 800 15px var(--ui); background: rgba(20,17,14,.7); border: 2px solid rgba(255,255,255,.35); }

.t-spec.hidden { display: none; }

body.lefty.tf-button .t-fire { right: auto; left: calc(26px + var(--sal)); }