/* Keep the mobile movement area clear of passive HUD panels. */
.touch-controls { position: absolute; inset: 0; pointer-events: none; }
.ability-name > span, .ability-status > span { font: inherit; }
.touch-joystick {
  position: absolute;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(24px, env(safe-area-inset-bottom));
  width: 136px; height: 136px; border-radius: 50%;
  border: 3px ridge #b3a17a;
  background: radial-gradient(circle, #332e2399 42%, #75684c88 43%, #2b281fb3 70%);
  box-shadow: 0 2px 10px #0006, inset 0 0 0 5px #211e1966;
  pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.touch-joystick::before {
  content: '▲'; position: absolute; inset: 8px 0 auto; text-align: center;
  color: #dac9a0aa; font: 12px monospace;
}
.touch-joystick::after {
  content: 'MOVE'; position: absolute; inset: auto 0 9px; text-align: center;
  color: #e4d7b7; font: 12px 'OSRS Small', monospace; text-shadow: 1px 1px #000;
}
.touch-stick-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px;
  transform: translate(calc(-50% + var(--stick-x, 0px)), calc(-50% + var(--stick-y, 0px)));
  border: 3px outset #aa9870; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #938365, #4d4433 75%);
  box-shadow: 0 3px 5px #0007; pointer-events: none;
}
.touch-joystick[data-active=true] { border-color: #ead08a; background-color: #40382255; }
.touch-joystick[data-active=true] .touch-stick-knob { border-color: #d4bd7e; }
.hud .touch-pause-button {
  position: absolute; left: max(12px, env(safe-area-inset-left)); top: 153px;
  min-width: 64px; min-height: 46px; padding: 8px 10px;
  background: #4a4437; border: 3px outset #9d8d68; color: #ffff00;
  font: 16px var(--rs-font); text-shadow: 1px 1px #000; border-radius: 2px;
  pointer-events: auto; touch-action: manipulation;
}
body[data-touch-controls=true] .keyboard-only { display: none; }
body:not([data-touch-controls=true]) .touch-only { display: none; }
body[data-touch-controls=true] .game-chat { display: none; }
body[data-touch-controls=true] .osrs-sidebar {
  right: max(8px, env(safe-area-inset-right));
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 112px);
  width: min(234px, calc(100vw - 178px - env(safe-area-inset-left) - env(safe-area-inset-right)));
}
body[data-touch-controls=true] #sidebar-toggle { min-width: 44px; min-height: 36px; }
body[data-touch-controls=true] .keyboard-notice { display: block; }
body[data-touch-controls=true] .sidebar-tabs button { min-height: 44px; }
body[data-touch-controls=true] .sidebar-content { height: min(290px, calc(100dvh - 435px)); min-height: 120px; }
body[data-touch-controls=true] .ability-hud {
  left: auto; right: max(8px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom)); transform: none;
  width: min(330px, calc(100vw - 178px - env(safe-area-inset-left) - env(safe-area-inset-right))); max-width: none;
}
body[data-touch-controls=true] .ability-heading { font-size: 11px; }
body[data-touch-controls=true] .ability-slot { height: 82px; min-height: 82px; padding: 5px 1px 9px; gap: 3px; border-width: 2px; }
body[data-touch-controls=true] .ability-name { font-size: 12px; min-height: 14px; }
body[data-touch-controls=true] .ability-status { font-size: 10px; }
body[data-touch-controls=true] .ability-rank { font-size: 10px; }
body[data-touch-controls=true] .ability-icon { width: 24px; height: 22px; background-size: auto 22px; }
body[data-touch-controls=true] .toast {
  bottom: calc(max(24px, env(safe-area-inset-bottom)) + 220px);
  left: max(9px, env(safe-area-inset-left)); right: max(9px, env(safe-area-inset-right));
  width: auto; max-width: none; transform: none; font-size: 14px;
}
body[data-touch-controls=true] .fps-counter { left: max(9px, env(safe-area-inset-left)); bottom: 2px; }
@media (max-width: 600px) {
  body[data-touch-controls=true] .osrs-sidebar:not(.is-collapsed) { bottom: max(12px, env(safe-area-inset-bottom)); }
  body[data-touch-controls=true] .sidebar-content {
    height: clamp(60px, calc(100dvh - 435px), 290px);
    min-height: 0; max-height: calc(100dvh - 340px);
  }
  body[data-touch-controls=true] .boss-hud { top: 166px; left: 102px; }
  body[data-touch-controls=true] .skill-level-up { top: 213px; }
  body[data-touch-controls=true]:has(#boss-hud:not([hidden])) .skill-level-up { top: 225px; }
}
@media (min-width: 601px) {
  body[data-touch-controls=true] .ability-hud { right: 254px; width: min(330px, calc(100vw - 438px)); }
  body[data-touch-controls=true] .osrs-sidebar { bottom: max(12px, env(safe-area-inset-bottom)); }
  body[data-touch-controls=true] .sidebar-content { height: min(290px, calc(100dvh - 360px)); }
}
@media (max-height: 500px) and (min-width: 601px) {
  .touch-joystick { width: 120px; height: 120px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .touch-stick-knob { width: 46px; height: 46px; }
  .hud .touch-pause-button { top: 12px; left: auto; right: calc(max(0px, env(safe-area-inset-right)) + 210px); }
  body[data-touch-controls=true] .sidebar-content { height: 160px; min-height: 100px; }
  body[data-touch-controls=true] .toast { left: 180px; right: 254px; bottom: 126px; }
  body[data-touch-controls=true] .boss-hud { top: 90px; left: 180px; right: 254px; width: auto; max-width: none; transform: none; }
}
@media (max-width: 360px) {
  .touch-joystick { width: 116px; height: 116px; left: max(12px, env(safe-area-inset-left)); }
  .touch-stick-knob { width: 46px; height: 46px; }
  body[data-touch-controls=true] .ability-hud,
  body[data-touch-controls=true] .osrs-sidebar { width: calc(100vw - 148px - env(safe-area-inset-right)); }
}