/* shared/mobile.css — phone/tablet layout + touch controls (only active with body.is-mobile) */

/* Use the visible screen height (mobile browser bars shrink 100vh unpredictably) */
html:has(body.is-mobile), body.is-mobile { height: 100dvh; }
body.is-mobile #stage, body.is-mobile #panel { height: 100dvh; }

body.is-mobile { overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.is-mobile #stage, body.is-mobile #viewport, body.is-mobile canvas { touch-action: none; }
body.is-mobile input { -webkit-user-select: text; user-select: text; font-size: 16px; } /* 16px stops iOS zooming in */

/* Streamer panel → full-screen menu opened with ☰ */
body.is-mobile:not(.panel-hidden) #panel {
  position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  border: none; -webkit-overflow-scrolling: touch;
}
body.is-mobile #show-panel-btn {
  top: calc(8px + env(safe-area-inset-top)); right: 8px; z-index: 40;
  width: 44px; height: 44px; font-size: 20px; opacity: 0.55; border-radius: 10px;
}
body.is-mobile .panel-header .small { padding: 8px 12px; font-size: 14px; }
body.is-mobile #panel button { min-height: 40px; }

/* ---------- Touch controls ---------- */
.touch-ui { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
body:not(.panel-hidden) .touch-ui, body.touch-blocked .touch-ui { display: none !important; }
.touch-ui.mode-fps { display: none; }
body.touch-playing.panel-hidden .touch-ui.mode-fps { display: block; }

.tz-left { position: absolute; left: 0; bottom: 0; width: 45%; height: 70%; pointer-events: auto; touch-action: none; }
.tz-look { position: absolute; right: 0; top: 0; width: 55%; height: 100%; pointer-events: auto; touch-action: none; }

.tj-base {
  position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); border: 2px solid rgba(255, 255, 255, 0.35);
  opacity: 0; transition: opacity 0.1s; pointer-events: none;
}
.tj-base.on { opacity: 1; }
.tj-knob {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
/* Hint where the joystick lives until it's first used */
.tz-left::after {
  content: "move"; position: absolute; left: 40px; bottom: calc(40px + env(safe-area-inset-bottom));
  width: 100px; height: 100px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.25);
  display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.35);
  font: 600 13px "Segoe UI", system-ui, sans-serif;
}

.tpad.right {
  position: absolute; right: calc(18px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(3, auto); gap: 12px; align-items: end; pointer-events: none;
}
.tbtn {
  width: 58px; height: 58px; border-radius: 50%; pointer-events: auto; touch-action: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 22, 32, 0.45); border: 2px solid rgba(255, 255, 255, 0.4); color: #fff;
  font: 800 18px "Segoe UI", system-ui, sans-serif; text-shadow: 0 1px 3px #000;
}
.tbtn:active { background: rgba(255, 255, 255, 0.3); }
.tbtn.big { width: 84px; height: 84px; font-size: 16px; }
.tbtn.small { width: 46px; height: 46px; font-size: 18px; }
.tbtn.fire { grid-column: 3; grid-row: 1 / span 2; background: rgba(254, 44, 85, 0.45); border-color: #fe2c55; font-size: 30px; }
.tbtn.scope { grid-column: 2; grid-row: 1; }
.tbtn.jump { grid-column: 2; grid-row: 2; }
.tbtn.reload { grid-column: 1; grid-row: 2; }
.tbtn.swap { grid-column: 1; grid-row: 1; }
.tbtn.pause { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 50%; margin-left: -23px; }

/* ---------- Rotate hint (racing / shooter, phone held upright) ---------- */
.rotate-hint { display: none; }
@media (orientation: portrait) {
  body.is-mobile:not(.rotate-dismissed) .rotate-hint {
    position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    background: rgba(5, 6, 10, 0.92); color: #fff; text-align: center; padding: 24px;
    font: 700 18px "Segoe UI", system-ui, sans-serif;
  }
}
.rh-phone { font-size: 56px; animation: rh-turn 1.6s ease-in-out infinite; }
.rotate-hint button { padding: 10px 18px; border-radius: 8px; border: 1px solid #25f4ee; background: transparent; color: #25f4ee; font-size: 15px; }
@keyframes rh-turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }