html:has(body.gym-mode),
body.gym-mode,
body.gym-mode dialog,
body.gym-mode #gym,
body.gym-mode #gym button {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

body.gym-mode #scene canvas,
body.gym-mode .movement-joystick {
  touch-action: none;
}

.movement-joystick {
  display: none;
  position: absolute;
  z-index: 24;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(132px + env(safe-area-inset-bottom));
  width: 108px;
  height: 108px;
  border: 2px solid #a9d2bd99;
  border-radius: 50%;
  background: radial-gradient(circle, #d2f6df24 24%, #112e2be8 25%, #142e2ac9 65%, #35655bba);
  box-shadow: 0 5px 18px #081e1b66;
  place-items: center;
}

.joystick-knob {
  display: block;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  background: #d9f5d8;
  border: 2px solid #f0fff0;
  pointer-events: none;
}

.movement-joystick.dragging .joystick-knob { background: #c8f36b; }

@media (pointer: coarse), (max-width: 760px) {
  body.gym-mode .movement-joystick { display: grid; }
  body.gym-mode .scene-help { display: none; }
  body.gym-mode .game-controls { bottom: max(10px, env(safe-area-inset-bottom)); }
  body.gym-mode .nearby-hint { display: none; }
}

@media (max-width: 600px) {
  body.gym-mode #gym {
    --mobile-top: max(8px, env(safe-area-inset-top));
  }
  body.gym-mode .game-toolbar {
    top: calc(var(--mobile-top) + 49px);
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    display: grid;
    grid-template-columns: 44px repeat(3, minmax(0, 1fr));
  }
  body.gym-mode .game-toolbar button { min-height: 44px; padding: 5px; font-size: 11px; }
  body.gym-mode .room-bar { top: var(--mobile-top); right: max(10px, env(safe-area-inset-right)); }
  body.gym-mode .room-bar button { min-height: 44px; }
  body.gym-mode .game-hud {
    top: var(--mobile-top);
    left: max(10px, env(safe-area-inset-left));
    max-width: calc(100% - 120px);
    min-height: 44px;
    align-content: center;
  }
  body.gym-mode .scene-location { top: calc(var(--mobile-top) + 106px); }
  body.gym-mode .level-track { top: calc(var(--mobile-top) + 142px); }
  body.gym-mode .camera-controls { top: calc(var(--mobile-top) + 142px); right: max(10px, env(safe-area-inset-right)); }
  body.gym-mode .camera-controls button { min-width: 36px; min-height: 40px; }
  body.gym-mode .campus-map { bottom: calc(142px + env(safe-area-inset-bottom)); }
  body.gym-mode .game-controls { padding: 8px 12px; }
  body.gym-mode .game-action .primary { min-height: 46px; }
  body.gym-mode .upgrades { top: calc(var(--mobile-top) + 99px); bottom: calc(120px + env(safe-area-inset-bottom)); }
  dialog input, dialog select, dialog textarea { font-size: 16px; }
}

@media (max-width: 380px) {
  body.gym-mode .game-hud #online-count,
  body.gym-mode .game-hud #boost-status { display: none; }
  body.gym-mode .camera-controls button { padding-inline: 6px; }
  body.gym-mode .level-track { width: 112px; }
}

@media (max-height: 520px) and (pointer: coarse) {
  body.gym-mode .movement-joystick { bottom: max(14px, env(safe-area-inset-bottom)); }
  body.gym-mode .campus-map { display: none; }
  body.gym-mode .game-controls { width: min(56%, 440px); }
}

#gym-chat-dialog {
  width: min(470px, calc(100vw - 24px));
  max-height: min(580px, calc(100dvh - 26px));
  padding: 14px;
  box-sizing: border-box;
}
#gym-chat-dialog[open] { display: flex; flex-direction: column; gap: 8px; }
#gym-chat-dialog header { height: auto; border: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#gym-chat-dialog h2 { margin: 3px 0; font-size: 18px; }
#gym-chat-dialog .chat-status { margin: 0; min-height: 14px; font-size: 12px; }
#gym-chat-dialog form { display: flex; gap: 8px; }
#gym-chat-dialog input { flex: 1; min-width: 0; font-size: 16px; }
#gym-chat-dialog button { min-height: 36px; touch-action: manipulation; }
.player-speech {
  position: absolute;
  z-index: 21;
  transform: translate(-50%,calc(-100% - 28px));
  width: max-content;
  max-width: min(320px,70vw);
  padding: 9px 13px;
  border-radius: 11px;
  background: #f2fff1;
  color: #173c31;
  box-shadow: 0 3px 12px #10251c50;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.player-speech::after {
  content: '';
  position: absolute;
  left: calc(50% - 5px);
  bottom: -5px;
  border-inline: 5px solid transparent;
  border-top: 5px solid #f2fff1;
}

@media (max-width: 600px) {
  body.gym-mode .game-toolbar {
    top: calc(var(--mobile-top) + 38px);
    grid-template-columns: 34px repeat(5, minmax(0, 1fr));
  }
  body.gym-mode .game-toolbar button,
  body.gym-mode .room-bar button { min-height: 34px; font-size: 10px; }
  body.gym-mode .game-hud { min-height: 32px; flex-wrap: nowrap; gap: 3px; }
  body.gym-mode .game-hud > span { padding: 5px 6px; }
  body.gym-mode .game-hud #avatar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70px; }
  body.gym-mode .game-hud #boost-status,
  body.gym-mode .scene-location { display: none; }
  body.gym-mode .level-track { top: calc(var(--mobile-top) + 79px); padding: 5px 7px; width: 108px; }
  body.gym-mode .level-track > div:first-child span + span { display: none; }
  body.gym-mode .camera-controls { top: calc(var(--mobile-top) + 78px); gap: 4px; }
  body.gym-mode .camera-controls button { min-width: 30px; min-height: 32px; height: 32px; padding-inline: 6px; }
  body.gym-mode .upgrades { top: calc(var(--mobile-top) + 77px); }
  body.gym-mode .campus-map { width: 90px !important; height: 68px !important; bottom: calc(101px + env(safe-area-inset-bottom)); }
  body.gym-mode .movement-joystick { width: 90px; height: 90px; bottom: calc(101px + env(safe-area-inset-bottom)); }
  body.gym-mode .joystick-knob { width: 32px; height: 32px; }
  body.gym-mode .game-controls { padding: 5px 9px; gap: 3px; width: min(330px,calc(100% - 24px)); }
  body.gym-mode .game-status h2 { font-size: 12px; margin: 0; }
  body.gym-mode .game-action { min-height: 40px; }
  body.gym-mode .game-action .primary { min-height: 40px; min-width: 0; padding: 6px 9px; font-size: 12px; }
}

@media (max-width: 600px) and (max-height: 460px) {
  body.gym-mode .movement-joystick { bottom: max(12px,env(safe-area-inset-bottom)); }
  body.gym-mode .game-controls { width: min(54%,330px); }
}

body.gym-mode .game-toolbar #gym-upgrades.has-points {
  color: #172211;
  background: #d0f896;
  box-shadow: 0 0 10px #b8f06980;
}
#emote-dialog {
  width: min(29rem, calc(100vw - 24px));
}
.emote-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
  margin: 1rem 0;
}
.emote-options button { padding: .55rem .3rem; }
#avatar-dialog select {
  width: 100%;
  padding: .5rem;
  font: inherit;
}
@media (max-width: 600px) {
  .emote-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}