/* Keep the current perspective legible beside the fullscreen control. */
.game-tools .camera-view-button {
  position: relative; align-content: center; gap: 3px; padding: 0; font: 800 12px/1 system-ui, sans-serif;
  white-space: nowrap; letter-spacing: -.5px;
}
.game-tools .camera-view-button[hidden] { display: none !important; }
.game-tools .camera-view-button:disabled { opacity: .55; cursor: default; }
.camera-view-shortcut { display: none; }
.camera-distance-note { display: none; }
/* The renderer already reports when collision pulls the camera inside the
   followed wolf. Explain that case in the existing button without covering play. */
.game-card:has(> canvas[data-camera-distance][data-own-body-hidden="true"]:is([data-camera="third-person"], [data-camera="spectator-third"]))
  #view-mode-button:enabled .camera-distance-note {
  display: block; font: 700 10px/1 system-ui, sans-serif;
}

@media (min-width: 851px) and (pointer: fine) {
  .in-match .game-tools .camera-view-button {
    font-size: clamp(13px, 1vw, 17px);
  }
  .in-match .camera-view-shortcut {
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center; gap: 4px;
    width: max-content; padding: 4px 6px; border: 1px solid #fff1d277;
    background: #183e34ed; color: #fff5df; font: 700 10px/1 system-ui, sans-serif;
    letter-spacing: 0; pointer-events: none;
  }
  .in-match .camera-view-shortcut kbd {
    min-width: 14px; height: 15px; padding: 0 2px;
    border: 1px solid #fff1d277; border-bottom-width: 2px; border-radius: 2px;
    background: #fff9e91a; color: inherit; font: inherit; font-size: 11px; font-weight: 800;
  }
  .in-match .kill-feed { top: calc(54px + var(--desktop-tool-size)); }
}

/* Five touch targets need two rows on the narrowest landscape screens. */
@media (max-width: 740px) {
  .in-match .game-tools {
    display: grid; grid-template-columns: repeat(3, 44px); gap: 4px;
  }
  .in-match #rules-button { grid-column: 2; }
  .in-match #leave-match-button { grid-column: 3; }
  .in-match .kill-feed { top: calc(108px + env(safe-area-inset-top, 0px)); }
}

@media (min-width: 741px) and (max-width: 850px), (min-width: 741px) and (pointer: coarse) {
  .death-replay {
    width: min(580px, calc(100% - 272px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  }
}