/* ============================================================
   Controles de toque + editor do HUD
   ============================================================ */
body.touch-play, body.touch-play #app canvas { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.touch { -webkit-tap-highlight-color: transparent; }

.tc-root { position: fixed; inset: 0; z-index: 20; pointer-events: none; --tc-op: 0.85; }
.tc-root.hidden { display: none; }
.tc-ctl {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto; touch-action: none;
  opacity: var(--tc-op); -webkit-user-select: none; user-select: none;
}
.tc-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2%;
  border-radius: 50%; padding: 0; color: #fff; cursor: pointer;
  background: radial-gradient(circle at 50% 35%, rgba(40, 46, 60, 0.62), rgba(6, 8, 14, 0.58));
  border: 2px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.08s, background 0.12s, border-color 0.12s;
}
.tc-btn svg { width: 44%; height: 44%; fill: currentColor; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.tc-btn small, .tc-joy > small {
  font: 700 clamp(7px, 1.5vmin, 11px)/1 var(--ld-body, Rajdhani, system-ui, sans-serif); letter-spacing: 0.6px;
  text-shadow: 0 1px 2px #000; white-space: nowrap;
}
.tc-btn.on { transform: translate(-50%, -50%) scale(0.92); background: rgba(255, 170, 40, 0.45); border-color: #ffc21a; }
.tc-btn.lit { background: rgba(255, 170, 40, 0.38); border-color: #ffc21a; box-shadow: 0 0 18px rgba(255, 180, 40, 0.45); }
.tc-btn.tc-off { display: none; }
.tc-root.editing .tc-btn.tc-off { display: flex; }

.tc-fire {
  background: radial-gradient(circle at 50% 35%, rgba(255, 96, 60, 0.6), rgba(120, 18, 10, 0.6));
  border-color: rgba(255, 150, 120, 0.7);
}
.tc-fire svg { width: 40%; height: 40%; }
.tc-fireL { background: radial-gradient(circle at 50% 35%, rgba(255, 96, 60, 0.5), rgba(120, 18, 10, 0.5)); border-color: rgba(255, 150, 120, 0.55); }
.tc-fireL small, .tc-fire small { display: none; }
.tc-pick { background: radial-gradient(circle at 50% 35%, rgba(255, 200, 60, 0.6), rgba(120, 80, 10, 0.6)); border-color: #ffd36a; animation: tcPulse 1.2s ease-in-out infinite; }
.tc-pause { border-radius: 12px; }
.tc-pause small { display: none; }
@keyframes tcPulse { 50% { box-shadow: 0 0 22px rgba(255, 210, 90, 0.75); } }
.tc-root.dead .tc-ctl:not(.tc-jump):not(.tc-pause):not(.tc-map) { display: none; }
.tc-root.dead .tc-jump small { font-size: 0; }
.tc-root.dead .tc-jump small::after { content: 'TROCAR'; font-size: clamp(7px, 1.5vmin, 11px); }

/* analógico */
.tc-joy { display: flex; flex-direction: column; align-items: center; }
.tc-joy-base {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 14, 24, 0.25) 40%, rgba(10, 14, 24, 0.55));
  border: 2px solid rgba(255, 255, 255, 0.28);
}
.tc-joy-base::before {
  content: ''; position: absolute; inset: 18%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.18);
}
.tc-joy-knob {
  position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 35%, #fff, #c9ccd6 55%, #8d919e);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.tc-joy.on .tc-joy-base { border-color: rgba(255, 194, 26, 0.6); }
.tc-run {
  position: absolute; left: 50%; top: -14%; transform: translateX(-50%); padding: 2px 8px; border-radius: 99px;
  font: 800 clamp(8px, 1.6vmin, 12px)/1.4 var(--ld-body, Rajdhani, sans-serif); letter-spacing: 1px;
  background: #ffc21a; color: #1a1205; opacity: 0; transition: opacity 0.15s;
}
.tc-joy.run .tc-run { opacity: 1; }
.tc-joy > small { position: absolute; bottom: -9%; opacity: 0; }
.tc-root.editing .tc-joy > small { opacity: 1; }

/* girar o celular */
#tcRotate { display: none; }
@media (orientation: portrait) {
  body.touch #tcRotate {
    position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: radial-gradient(circle at 50% 40%, #1d1608, #050608 70%); color: #fff; text-align: center; padding: 24px;
  }
}
#tcRotate b { font: 700 30px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 2px; color: #ffc21a; }
#tcRotate span { font: 600 14px/1.3 var(--ld-body, Rajdhani, sans-serif); color: #b9bcc6; }
.tc-rot-phone {
  width: 56px; height: 96px; border: 4px solid #fff; border-radius: 12px; margin-bottom: 16px; position: relative;
  animation: tcRot 2s ease-in-out infinite;
}
.tc-rot-phone::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 14px; height: 4px; border-radius: 2px; background: #fff; transform: translateX(-50%); }
@keyframes tcRot { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* HUD compacto no celular */
body.touch #hudTopLeft, body.touch #hudTopCenter, body.touch #hudTopRight, body.touch #weaponBar,
body.touch #inventoryPanel, body.touch #bigmap, body.touch #scoreboard, body.touch #hud .ds-card,
body.touch #prompt, body.touch #progress, body.touch #center-msg { zoom: var(--tc-hud-zoom, 1); }
body.touch #hud #weaponBar { right: auto; left: 50%; bottom: 6px; transform: translateX(-50%); }
body.touch #hud #inventoryPanel { right: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: 82vh; }
body.touch #hud #killfeed { display: none; }
body.touch #weaponBar .slot, body.touch #minimapWrap, body.touch #prompt, body.touch #bigmap { pointer-events: auto; cursor: pointer; }
body.touch #prompt kbd, body.touch #minimapWrap .map-key, body.touch #deathLobbyBtn kbd { display: none; }
body.touch #prompt { top: 70%; padding: 12px 22px; }
body.touch #weaponBar .slot-num { display: none; }
body.touch #clickToPlay { display: none !important; }
body.touch .pause-hint { display: none; }
body.touch-play #hud { touch-action: none; }

/* editor */
.tc-editor {
  position: fixed; inset: 0; z-index: 9400; pointer-events: auto; touch-action: none;
  background: linear-gradient(rgba(4, 6, 10, 0.45), rgba(4, 6, 10, 0.55)), url('/assets/site/feat-combat.jpg') center / cover;
}
.tc-editor.in-match { background: rgba(4, 6, 10, 0.35); }
.tc-root.editing { z-index: 9500; }
.tc-root.editing .tc-ctl { opacity: var(--tc-op); outline: 1px dashed rgba(255, 255, 255, 0.35); outline-offset: 3px; cursor: grab; }
.tc-root.editing .tc-joy { border-radius: 50%; }
.tc-root.editing .tc-ctl.sel { outline: 2px solid #ffc21a; outline-offset: 4px; }
.tc-root.editing.dead .tc-ctl { display: flex; }
.tc-ed-bar {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); pointer-events: auto;
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; max-width: calc(100vw - 20px); flex-wrap: wrap; justify-content: center;
  background: rgba(10, 12, 18, 0.92); border: 1px solid rgba(255, 194, 26, 0.35); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-family: var(--ld-body, Rajdhani, sans-serif); color: #fff; z-index: 9600;
}
.tc-ed-bar > b { font: 700 20px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 1.5px; color: #ffc21a; }
.tc-ed-sl { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; color: #b9bcc6; }
.tc-ed-sl em { font-style: normal; color: #ffc21a; margin-left: 4px; }
.tc-ed-sl input { width: 130px; accent-color: #ffc21a; }
.tc-ed-bar button {
  font: 700 13px/1 var(--ld-body, Rajdhani, sans-serif); letter-spacing: 1px; padding: 9px 14px; border-radius: 6px; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18);
}
.tc-ed-bar .tc-ed-save { background: linear-gradient(180deg, #ffd34a, #f0a800); color: #1a1205; border-color: #ffd34a; }
.tc-ed-hint { flex-basis: 100%; margin: 0; text-align: center; font: 600 12px/1.2 var(--ld-body, Rajdhani, sans-serif); color: rgba(255, 255, 255, 0.55); }

/* configurações */
.hb-touch-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hb-touch-row .hb-seg { grid-template-columns: repeat(3, 1fr); flex: 1; min-width: 260px; }
.hb-edit-hud { margin-top: 6px; }
.tc-ed-title { cursor: pointer; }
.tc-ed-bar.low { top: auto; bottom: 10px; }
@media (max-height: 520px) {
  .tc-ed-bar { gap: 8px; padding: 6px 10px; top: 6px; }
  .tc-ed-bar.low { bottom: 6px; }
  .tc-ed-bar > b { font-size: 16px; }
  .tc-ed-sl input { width: 96px; }
  .tc-ed-bar button { padding: 7px 10px; font-size: 12px; }
  .tc-ed-hint { display: none; }
}