/* ═══════════ Controles de toque (GOD) — joystick + botão de menu ═══════════ */
#touchctl { position: absolute; inset: 0; z-index: 45; pointer-events: none; touch-action: none; }
#touchctl.hidden { display: none !important; }

/* joystick (direita) */
.tc-stick {
  position: absolute;
  right: max(4vw, env(safe-area-inset-right, 0px)); bottom: max(6vh, env(safe-area-inset-bottom, 0px));
  width: 132px; height: 132px; border-radius: 50%;
  pointer-events: auto; touch-action: none;
  background: radial-gradient(circle at 50% 42%, rgba(40,34,22,.5), rgba(8,7,5,.55));
  border: 2px solid rgba(217,178,76,.35);
  box-shadow: 0 8px 30px rgba(0,0,0,.5), inset 0 0 22px rgba(0,0,0,.4);
  backdrop-filter: blur(2px);
  display: grid; place-items: center;
  opacity: .82; transition: opacity .15s, border-color .15s;
}
.tc-ring { position: absolute; inset: 20px; border-radius: 50%; border: 1px dashed rgba(217,178,76,.22); pointer-events: none; }
.tc-nub {
  width: 58px; height: 58px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 42% 36%, #f0d488, #b98f2e 70%, #7a5e1e);
  border: 1px solid rgba(0,0,0,.4);
  box-shadow: 0 4px 12px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,255,255,.35);
  will-change: transform;
}
#touchctl.tc-on .tc-stick { opacity: 1; border-color: rgba(217,178,76,.6); }

/* botão de menu (esquerda) */
.tc-btn {
  position: absolute; pointer-events: auto; touch-action: manipulation;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(12,10,8,.72); border: 1.5px solid rgba(217,178,76,.4);
  color: #e8c877; font-size: 24px; line-height: 1;
  box-shadow: 0 6px 20px rgba(0,0,0,.5); backdrop-filter: blur(2px);
}
.tc-btn:active { background: rgba(217,178,76,.22); transform: scale(.95); }
.tc-menu { left: max(4vw, env(safe-area-inset-left, 0px)); bottom: max(6vh, env(safe-area-inset-bottom, 0px)); }

/* em telas de toque, esconde a dica de teclado (WASD/M/G) — não serve p/ celular */
@media (pointer: coarse) { #hint { display: none; } }

/* ── Bloqueio de orientação: obriga PAISAGEM no celular (retrato mostra "gire o aparelho") ── */
#rotate-lock { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate-lock {
    display: flex; position: fixed; inset: 0; z-index: 9999;
    align-items: center; justify-content: center; text-align: center;
    background: #0a0806; color: #e7d9a8; font-family: var(--game-font); padding: 8vw;
  }
  #rotate-lock .rl-in { display: flex; flex-direction: column; align-items: center; gap: 3vh; }
  #rotate-lock .rl-ico { font-size: 20vw; line-height: 1; animation: rl-rock 2s ease-in-out infinite; }
  #rotate-lock b { font-family: var(--font-title); font-size: 6vw; letter-spacing: .04em; text-transform: uppercase; }
  #rotate-lock small { font-size: 4.5vw; color: #b89355; }
}
@keyframes rl-rock { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(80deg); } }