/* ================================================================== CELULAR (toque) */
:root { --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); }
html, body { touch-action: none; overscroll-behavior: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.panel, .settings { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
@media (hover: none) { .btn:hover { transform: none; } .card:hover { transform: none; } }

/* camada de botões */
#touch-ui { position: fixed; inset: 0; z-index: 7; touch-action: none; -webkit-user-select: none; user-select: none; --tc: 1; }
#touch-ui.hidden { display: none; }
#touch-ui::before { content: ""; position: absolute; left: calc(23px * var(--tc) + var(--sal)); bottom: calc(23px * var(--tc) + var(--sab)); width: calc(110px * var(--tc)); height: calc(110px * var(--tc)); border-radius: 50%; border: 2px dashed rgba(255,255,255,.16); pointer-events: none; }
.tc-stick { position: absolute; display: none; width: calc(124px * var(--tc)); height: calc(124px * var(--tc)); margin: calc(-62px * var(--tc)) 0 0 calc(-62px * var(--tc)); border-radius: 50%; border: 2px solid rgba(255,255,255,.42); background: rgba(255,255,255,.07); pointer-events: none; }
.tc-stick.run { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(125,255,182,.2); }
.tc-knob { position: absolute; left: 50%; top: 50%; width: calc(54px * var(--tc)); height: calc(54px * var(--tc)); margin: calc(-27px * var(--tc)) 0 0 calc(-27px * var(--tc)); border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: 0 0 0 2px rgba(255,255,255,.65) inset; }
.tc-btn { position: absolute; --s: 56; width: calc(var(--s) * var(--tc) * 1px); height: calc(var(--s) * var(--tc) * 1px); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: rgba(18, 26, 36, .5); border: 2px solid rgba(255,255,255,.38); color: #fff; font: 700 9px var(--font); letter-spacing: .06em; pointer-events: auto; text-shadow: 0 1px 2px #000; }
.tc-btn svg { width: 44%; height: 44%; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-btn span { line-height: 1; }
.tc-btn.down { background: rgba(125,255,182,.38); border-color: var(--accent); transform: scale(.94); }
.tc-btn.on { border-color: #ffd166; color: #ffd166; }
.tc-btn.hidden { display: none; }
.tc-fire { --s: 96; right: calc(30px * var(--tc) + var(--sar)); bottom: calc(34px * var(--tc) + var(--sab)); background: rgba(255, 90, 77, .34); border-color: rgba(255,150,140,.8); }
.tc-fire svg { width: 50%; height: 50%; }
.tc-ads { --s: 62; right: calc(146px * var(--tc) + var(--sar)); bottom: calc(44px * var(--tc) + var(--sab)); }
.tc-jump { --s: 62; right: calc(40px * var(--tc) + var(--sar)); bottom: calc(146px * var(--tc) + var(--sab)); }
.tc-crouch { --s: 54; right: calc(118px * var(--tc) + var(--sar)); bottom: calc(126px * var(--tc) + var(--sab)); }
.tc-reload { --s: 52; right: calc(216px * var(--tc) + var(--sar)); bottom: calc(66px * var(--tc) + var(--sab)); }
.tc-swap { --s: 48; right: calc(26px * var(--tc) + var(--sar)); bottom: calc(226px * var(--tc) + var(--sab)); }
.tc-nade { --s: 48; right: calc(88px * var(--tc) + var(--sar)); bottom: calc(210px * var(--tc) + var(--sab)); }
.tc-score { --s: 40; left: calc(10px + var(--sal)); top: calc(64px + var(--sat)); }
.tc-loadout { --s: 44; left: calc(10px + var(--sal)); top: calc(112px + var(--sat)); }
.tc-pause { --s: 40; right: calc(10px + var(--sar)); top: calc(8px + var(--sat)); }
.tc-use { --s: 60; width: calc(104px * var(--tc)); height: calc(54px * var(--tc)); border-radius: 14px; right: calc(238px * var(--tc) + var(--sar)); bottom: calc(150px * var(--tc) + var(--sab)); background: rgba(255,209,102,.9); color: #1a1200; border-color: #fff3c4; font-size: 13px; text-shadow: none; animation: pulse .5s infinite alternate; }

/* HUD compacto */
body.touch .fps { top: calc(3px + var(--sat)); left: calc(6px + var(--sal)); font-size: 10px; }
body.touch #topbar { top: calc(3px + var(--sat)); transform: translateX(-50%) scale(.62); transform-origin: top center; }
body.touch #objective { top: calc(33px + var(--sat)); font-size: 11px; padding: 2px 10px; max-width: 46vw; text-align: center; }
body.touch #teammates { display: none; }
body.touch #vitals { left: calc(8px + var(--sal)); top: calc(16px + var(--sat)); bottom: auto; gap: 8px; transform: scale(.46); transform-origin: top left; }
body.touch #weapon-box { right: auto; left: 50%; bottom: calc(4px + var(--sab)); min-width: 0; transform: translateX(-50%) scale(.62); transform-origin: bottom center; text-align: center; }
body.touch #slots, body.touch #grenades { justify-content: center; }
body.touch .slot, body.touch .gren { pointer-events: auto; padding: 8px 16px; font-size: 15px; }
body.touch #killfeed { top: calc(8px + var(--sat)); right: calc(66px + var(--sar)); transform: scale(.78); transform-origin: top right; }
body.touch #announce { top: 15%; }
body.touch #announce .a-main { font-size: 30px; }
body.touch #announce .a-sub { font-size: 13px; }
body.touch #interact { top: 60%; }
body.touch #interact-bar { width: 200px; }
body.touch #death-panel { top: 52%; min-width: 300px; padding: 10px 18px; transform: translate(-50%, -50%) scale(.82); }
body.touch #scoreboard { top: 4%; transform: translateX(-50%) scale(.7); transform-origin: top center; }
body.touch .touch-hide { display: none; }

/* aviso para girar o aparelho */
#rotate-hint { display: none; position: fixed; inset: 0; z-index: 70; background: #05080b; color: #e8eef4; align-items: center; justify-content: center; text-align: center; font-size: 18px; letter-spacing: .05em; line-height: 1.5; padding: 24px; }
#rotate-hint svg { color: var(--accent); margin-bottom: 8px; animation: pulse .8s infinite alternate; }
@media (orientation: portrait) { body.touch #rotate-hint { display: flex; } }

/* menus em tela baixa (celular deitado) */
@media (max-height: 560px) {
  .screen { gap: 10px; }
  .brand.big { font-size: 42px; }
  .tagline { font-size: 11px; margin-top: -6px; }
  .menu-col { min-width: 250px; gap: 8px; }
  .btn { padding: 10px 18px; font-size: 14px; }
  .menu-opts { gap: 12px; }
  .panel { padding: 12px 18px; gap: 10px; max-height: 96vh; }
  .panel h2 { font-size: 17px; }
  .set-row { grid-template-columns: 210px 1fr 64px; padding: 4px 0; font-size: 13px; }
  .tab { padding: 6px 10px; font-size: 11px; }
  .card { width: 200px; padding: 10px; }
  .cards { gap: 10px; flex-wrap: wrap; justify-content: center; }
  .ch-preview { height: 70px; }
  #end-score { font-size: 32px; }
  .footer-note { display: none; }
}