/* Couche plateforme : partage + contrôles tactiles + HUD compact */
#tc{display:none}

/* ---------- HUD compact (petits écrans) ---------- */
@media (max-width:700px),(max-height:500px){
  #hud{padding:calc(6px + env(safe-area-inset-top,0px)) 8px 0;gap:6px}
  #hud .panel{padding:6px 8px}
  #p-obj{width:auto;flex:1}
  #p-obj .big{font-size:17px}
  #p-time{min-width:60px}
  #p-time .big{font-size:19px}
  #p-gauges{width:auto;flex:1.3}
  .grow .lbl{width:44px;font-size:10px}
  .grow b{width:30px;font-size:11px}
  .lbl{font-size:10px}
  #prompt{top:calc(70px + env(safe-area-inset-top,0px));font-size:13px}
  #msg h2{font-size:26px}
  #msg p{font-size:15px}
}
@media (max-width:500px){
  #p-obj .lbl{display:none}
  #p-obj{flex:0 0 auto}
  #p-obj .big{font-size:20px;white-space:nowrap}
  #p-obj .big small{font-size:0}
  #p-obj .big small span{font-size:13px}
  #p-obj .big small::before{content:'/ ';font-size:13px}
  #p-obj .big small::after{content:' dispersés';font-size:13px}
  .grow .track{min-width:48px}
  #p-obj .track{margin-top:4px}
  .tc-b{font-size:9.5px}
}

/* ---------- Mode tactile (paysage, plein écran) ---------- */
html.touch,html.touch body{touch-action:none;overscroll-behavior:none}
html.touch #help,html.touch #actions,html.touch #squadbar{display:none}
html.touch kbd{display:none}
html.touch #hud{padding-right:calc(70px + env(safe-area-inset-right,0px));padding-left:calc(14px + env(safe-area-inset-left,0px))}
html.touch .ord,html.touch .frm{min-height:44px}

/* Tiroir « Section » : formations, balayage, sélection */
html.touch.tc-squad-open #squadbar{display:flex;position:fixed;right:0;top:0;bottom:0;left:auto;width:min(460px,62vw);
  z-index:6;border-radius:0;overflow:auto;padding:16px calc(18px + env(safe-area-inset-right,0px)) 16px 16px;background:#101622;
  border:0;border-left:1px solid #2c364b;justify-content:center}
html.touch #squadbar .hd span:last-child{display:none}
html.touch #orders{display:none}
#tc-scrim{display:none;position:fixed;inset:0;z-index:5;background:rgba(8,11,18,.5)}
html.tc-squad-open #tc-scrim{display:block}

html.touch #tc.on{display:block}
#tc button{font-family:system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0}
#tc svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Joysticks flottants : la base apparaît sous le doigt */
#tc-stick,#tc-aim{position:fixed;bottom:0;z-index:3;touch-action:none}
#tc-stick{left:0;width:36vw;height:64vh}
#tc-aim{right:0;width:36vw;height:64vh;display:none}
html.touch #tc.truck #tc-aim{display:block}
#tc-base,#tc-abase{position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(14,19,30,.5);
  border:2px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;opacity:.7}
#tc-base{left:calc(36px + env(safe-area-inset-left,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px))}
#tc-abase{right:calc(30px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));border-color:rgba(92,194,255,.5)}
#tc-base.held,#tc-abase.held{opacity:1}
#tc-knob,#tc-aknob{width:54px;height:54px;border-radius:50%;background:rgba(77,163,255,.55);border:2px solid rgba(255,255,255,.5)}
#tc-aknob{background:rgba(92,194,255,.6)}

/* Ordres de la section : barre en haut à gauche */
#tc-orders{position:fixed;left:calc(14px + env(safe-area-inset-left,0px));top:calc(78px + env(safe-area-inset-top,0px));
  z-index:3;display:flex;gap:2px;padding:3px}
.tc-o{width:64px;height:46px;border:0;border-radius:10px;background:transparent;color:#98a5ba;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;font:700 10px system-ui,sans-serif}
.tc-o svg{width:18px!important;height:18px!important}
.tc-o.on{background:#1f3a66;color:#fff}
.tc-more{width:76px;border-left:1px solid #2c364b;border-radius:0;color:#e8edf5}
html.tc-squad-open #tc-orders{display:none}

/* Pouce droit : arc d'actions */
.tc-b{position:fixed;z-index:3;border-radius:50%;border:2px solid rgba(255,255,255,.28);background:rgba(14,19,30,.78);color:#e8edf5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:700 11px system-ui,sans-serif}
.tc-b.down{background:rgba(77,163,255,.55);transform:scale(.94)}
.tc-b span{display:flex;flex-direction:column;align-items:center;gap:2px}
#tc-baton{right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));width:88px;height:88px;
  background:#1f3a66;border-color:#4da3ff;font-size:12px}
#tc-baton svg{width:32px;height:32px}
#tc-shield{right:calc(126px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));width:72px;height:72px}
#tc-ctx{right:calc(30px + env(safe-area-inset-right,0px));bottom:calc(126px + env(safe-area-inset-bottom,0px));width:78px;height:78px;
  background:#4a3a0c;border-color:#f2c230;box-shadow:0 0 0 5px rgba(242,194,48,.25)}
#tc-ctx svg{color:#f2c230}
#tc-equip{right:calc(130px + env(safe-area-inset-right,0px));bottom:calc(104px + env(safe-area-inset-bottom,0px));width:62px;height:62px;font-size:9.5px}
#tc-agent{right:calc(212px + env(safe-area-inset-right,0px));bottom:calc(28px + env(safe-area-inset-bottom,0px));width:58px;height:58px;font-size:10px}
#tc-equip svg,#tc-agent svg{width:22px;height:22px}
#tc.truck #tc-ctx{bottom:calc(168px + env(safe-area-inset-bottom,0px))}
#tc.truck [data-foot]{display:none!important}
#tc.truck #tc-baton,#tc.truck #tc-shield{display:none}

/* Plein écran */
#tc-full{position:fixed;z-index:3;right:calc(14px + env(safe-area-inset-right,0px));top:calc(10px + env(safe-area-inset-top,0px));
  width:48px;height:48px;border-radius:12px;border:1px solid #2c364b;background:rgba(22,29,43,.88);color:#e8edf5;
  display:flex;align-items:center;justify-content:center}

/* Petits écrans en paysage */
@media (max-height:420px){
  #tc-base,#tc-abase{width:108px;height:108px}
  #tc-baton{width:80px;height:80px}
  #tc-shield{right:calc(116px + env(safe-area-inset-right,0px));width:66px;height:66px}
  #tc-ctx{bottom:calc(114px + env(safe-area-inset-bottom,0px));width:70px;height:70px}
  #tc-equip{right:calc(120px + env(safe-area-inset-right,0px));bottom:calc(92px + env(safe-area-inset-bottom,0px));width:56px;height:56px}
  #tc-agent{right:calc(196px + env(safe-area-inset-right,0px));width:54px;height:54px}
  /* panneau de préparation / relève ouvert : le bouton contextuel (Armurerie…) passe à gauche du bouton agent, sous le bouton « Vague N » */
  html.touch:has(#prep[style*="display: block"]) #tc-ctx{right:calc(262px + env(safe-area-inset-right,0px));bottom:calc(30px + env(safe-area-inset-bottom,0px))}
}

/* Portrait : écran de rotation (le jeu est en pause derrière) */
#tc-gate{touch-action:none;display:none;position:fixed;inset:0;z-index:30;background:#0e131e;color:#e8edf5;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:32px;text-align:center;font-family:system-ui,sans-serif}
#tc-gate h2{margin:0;font-size:24px}
#tc-gate p{margin:0;color:#98a5ba;font-size:15px;line-height:1.5;max-width:300px}
#tc-gate button{height:54px;padding:0 26px;border:0;border-radius:12px;background:#2f6fdb;color:#fff;font:700 16px system-ui,sans-serif}
#tc-gate small{color:#98a5ba;font-size:12px;max-width:290px;line-height:1.4}
@media (orientation:portrait){html.touch #tc-gate{display:flex}}

/* ---------- Mégaphone vocal ---------- */
#mic{position:fixed;left:50%;top:calc(150px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:3;
  pointer-events:none;padding:7px 14px;border-radius:999px;font:700 13px system-ui,sans-serif;color:#e8edf5;
  background:rgba(14,19,30,.8);border:1px solid rgba(255,255,255,.15);opacity:0;transition:opacity .2s;white-space:nowrap}
#mic.show{opacity:1}
#mic.hint{opacity:.8;font-weight:600}
#mic.live{background:#b3201a;border-color:#ff6a5c;animation:micPulse .8s infinite}
#mic.warn{background:#5a3a10;border-color:#f5a524}
@keyframes micPulse{50%{box-shadow:0 0 0 6px rgba(255,90,77,.25)}}

/* ---------- Logos des boutons d'action ---------- */
.act .ico{display:inline-flex;width:18px;height:18px;flex:none;color:#f2c230}
.act .ico svg{width:100%;height:100%}