/* Thumbsticks, action pads and the phone layout. */

/* ---------------- touch controls ---------------- */
  .pads{position:fixed;inset:0;z-index:6;pointer-events:none;display:none}
  body.touch .pads.on{display:block}
  .pad{position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;
    border-radius:50%;border:1.5px solid var(--edge);background:rgba(17,28,51,.55);
    backdrop-filter:blur(6px);color:var(--ink);font-weight:800;letter-spacing:.06em;
    font-family:inherit;font-size:12px;transition:transform .08s,background .12s;
    box-shadow:0 6px 18px rgba(0,0,0,.4)}
  .pad:active,.pad.hit{transform:scale(.92);background:rgba(255,226,92,.22);border-color:var(--neon)}
  /* action pads live in the bottom-right corner, where the right thumb rests */
  .pad.dash{right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));
    width:60px;height:60px}
  .pad.rel {right:calc(80px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));
    width:52px;height:52px;font-size:10px}
  .pad small{font-size:9px;opacity:.6;display:block;letter-spacing:.1em}
  .pad.cool{opacity:.35}

  /* rotate prompt — the WHOLE GAME is landscape now, menu included. Shown on
     any touch device held upright, and only as a fallback: where the platform
     allows it (the Android shell, or a fullscreen browser) the game rotates
     itself and this is never seen. The boot loader sits above it, so a cold
     start never opens on a nag. */
  .rotate{position:fixed;inset:0;z-index:40;display:none;flex-direction:column;gap:14px;
    align-items:center;justify-content:center;background:var(--bg);text-align:center;padding:30px}
  .rotate svg{width:74px;height:74px;color:var(--neon);animation:tip 1.6s ease-in-out infinite}
  @keyframes tip{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(76deg)}}
  .rotate b{font-size:20px;letter-spacing:.16em;font-weight:800}
  .rotate span{font-size:13px;color:var(--dim);letter-spacing:.1em;max-width:280px}
  @media (orientation:portrait){body.touch .rotate{display:flex}}

  /* tighter HUD on short screens so panes stay clear of the thumbs */
  @media (max-height:560px),(max-width:820px){
    .vitals{bottom:10px;left:10px;padding:0 0 0 9px;min-width:0}
    .vitals .hpn{font-size:21px}
    .bar{width:130px;height:8px}
    .arms{bottom:10px;right:10px;padding:0 9px 0 0;min-width:0}
    .arms .num{font-size:26px}
    .arms .wn{font-size:10px;letter-spacing:.16em}
    .pip{height:8px}
    .board{top:8px;right:8px;padding:7px 10px 6px 21px;min-width:130px;transform:scale(.86);
      transform-origin:top right;clip-path:polygon(12px 0,100% 0,100% 100%,0 100%)}
    .brow{font-size:11px}
    .feed{top:8px;left:8px;font-size:11px;max-width:44vw}
    .mini canvas{width:180px;height:38px}
    .mini{padding:4px;top:8px}
    .respawn .n{font-size:44px}
    .announce{font-size:24px;top:19%}
    .hint{bottom:78px;font-size:10px;padding:0 12px;text-align:center}
  }
  /* ---- touch HUD layout: keep every pane out of the pads and the thumbs ---- */
  body.touch .keys{display:none}
  /* The feed had been pushed 54px in and squeezed to 38vw to dodge the gear
     button that used to sit in this corner, and it STILL sat under it. The
     button is gone (the back gesture opens the match menu), so the kill list
     gets the corner and its width back. */
  body.touch .feed{left:calc(8px + env(safe-area-inset-left));font-size:11px;max-width:52vw}
  /* The angled leading corner is 18px on desktop; at this size that diagonal
     ate the rank column. Shallower angle, and keep enough left padding to clear
     what is left of it. */
  body.touch .board{top:8px;right:8px;min-width:120px;padding:6px 9px 5px 20px;
    transform:scale(.9);transform-origin:top right;
    clip-path:polygon(11px 0,100% 0,100% 100%,0 100%)}
  body.touch .board h4{font-size:8px;letter-spacing:.16em;margin-bottom:4px}
  body.touch .brow{font-size:11px;padding:1px 0}
  body.touch .mini canvas{width:150px;height:32px}
  /* ammo moves to the bottom centre so the pads own the corner */
  /* Ammo sits bottom-CENTRE on a phone so the pads own the corner, and a
     right-hand accent edge on a centred block reads as a stray line. Move the
     accent underneath it instead. */
  body.touch .arms{left:50%;right:auto;transform:translateX(-50%);
    bottom:calc(8px + env(safe-area-inset-bottom));padding:3px 14px 5px;text-align:center;
    min-width:0;border-right:none;border-bottom:2px solid var(--neon)}
  body.touch .arms.dry{border-bottom-color:var(--red)}
  body.touch .arms .num{transform-origin:50% 50%}
  body.touch .arms .num{font-size:17px;line-height:1}
  body.touch .arms .num small{font-size:9px}
  body.touch .arms .wn{font-size:9px;letter-spacing:.12em}
  body.touch .arms .rel{font-size:8px;height:10px}
  body.touch .pips{justify-content:center;height:5px}
  body.touch .pip{width:5px;height:5px}
  body.touch .vitals{bottom:calc(8px + env(safe-area-inset-bottom));
    left:calc(8px + env(safe-area-inset-left));padding:0 0 0 9px;min-width:0}
  body.touch .vitals .hpn{font-size:20px}
  body.touch .bar{width:96px;height:6px}
  body.touch .micro{font-size:8px;letter-spacing:.14em}
  body.touch .buffs{min-height:0;margin-top:4px}
  body.touch .buff{font-size:8px;padding:1px 6px}
  body.touch .hpn{font-size:15px}
  body.touch .respawn{top:34%}
  body.touch .respawn .n{font-size:38px}
  body.touch .swap div{font-size:10px;padding:6px 10px}
  body.touch .announce{font-size:22px;top:16%}
  body.touch .hint{bottom:auto;top:70%;font-size:10px}

  .hide{display:none!important}

  /* class ability pad: above DASH, wearing the class icon and colour */
  .pad.ab{right:calc(24px + env(safe-area-inset-right));bottom:calc(86px + env(safe-area-inset-bottom));
    width:50px;height:50px}
  .pad.ab .ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}
  .pad.ab b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink);
    text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none}