/* The action buttons share the mobile recovery rings and input controllers. */
.action-key { display: none; }

/* A successfully captured desktop view owns mouse clicks. */
.game-card.desktop-looking,
.game-card.desktop-looking * { cursor: none !important; }
.game-card.desktop-looking .game-tools,
.game-card.desktop-looking .game-tools *,
.game-card.desktop-looking .mobile-actions,
.game-card.desktop-looking .mobile-actions * { pointer-events: none !important; }

@media (pointer: fine) {
  .in-match #game-shell:fullscreen .game-card {
    position: fixed; inset: 0; width: 100%; height: 100%; max-height: none;
    aspect-ratio: auto; border: 0; border-radius: 0; z-index: 20;
  }
}

@media (min-width: 851px) and (pointer: fine) {
  :is(.in-match, .match-results) {
    --desktop-tool-size: clamp(48px, min(3.333vw, 6vh), 64px);
    --desktop-attack-size: clamp(112px, min(8vw, 14.3vh), 154px);
    --desktop-dash-size: clamp(92px, min(6.5vw, 11.7vh), 126px);
  }
  :is(.in-match, .match-results) .game-tools { gap: clamp(8px, .6vw, 12px); }
  :is(.in-match, .match-results) .game-tools .icon-button {
    width: var(--desktop-tool-size); height: var(--desktop-tool-size);
    min-width: var(--desktop-tool-size); min-height: var(--desktop-tool-size);
    border: 1px solid #fff7df99; border-radius: 10px;
  }
  :is(.in-match, .match-results) .game-tools .icon-button svg { width: clamp(24px, 1.67vw, 32px); height: clamp(24px, 1.67vw, 32px); }
  .in-match .kill-feed { top: calc(30px + var(--desktop-tool-size)); }
  :is(.in-match, .match-results) .hud-center { gap: 15px; min-height: 50px; padding: 9px 17px; }
  :is(.in-match, .match-results) .hud-center > span { font-size: 12px; }
  :is(.in-match, .match-results) .hud-center strong { font-size: 30px; }
  :is(.in-match, .match-results) .hud-location { font-size: 11px; padding: 12px 14px; letter-spacing: .6px; }
  :is(.in-match, .match-results) .zone-status { top: 84px; min-width: 244px; padding: 11px 15px; }
  :is(.in-match, .match-results) .zone-status span:not(.zone-arrow) { font-size: 12px; }
  :is(.in-match, .match-results) .zone-status strong { font-size: 34px; }
  :is(.in-match, .match-results) .zone-status small { font-size: 11px; }
  :is(.in-match, .match-results) .zone-arrow { font-size: 32px; }
  .in-match .event-feed { top: 191px; }
  .in-match .event-item { font-size: 12px; padding: 8px 10px; }
  .in-match .self-status { font-size: 12px; line-height: 1.5; padding: 9px 12px; max-width: 230px; }
  .in-match .controls-bar { font-size: 12px; }
  .in-match .controls-bar kbd { min-width: 25px; height: 27px; font-size: 11px; padding: 3px 7px; }
  .in-match .control-tip { font-size: 11px; }
  .in-match .control-mouse { width: 21px; height: 21px; }
  .in-match .look-hint {
    max-width: min(480px, calc(100% - 600px));
    font-size: 13px; line-height: 1.5; white-space: normal; text-align: center;
  }

  #attack-status { display: none !important; }
  #mobile-controls {
    display: flex; left: auto; right: clamp(28px, 2.2vw, 44px); bottom: clamp(54px, 5.5vh, 72px);
    width: max-content; align-items: flex-end; justify-content: flex-end;
  }
  #mobile-controls .joystick { display: none; }
  #mobile-controls .mobile-actions { align-items: flex-end; gap: clamp(26px, 1.7vw, 32px); }
  #touch-attack {
    width: var(--desktop-attack-size); height: var(--desktop-attack-size);
    min-height: var(--desktop-attack-size); flex: 0 0 var(--desktop-attack-size);
    border-width: 3px; gap: 5px;
  }
  #touch-attack > svg { width: clamp(50px, 3.5vw, 66px); height: clamp(50px, 3.5vw, 66px); }
  #touch-attack > span { font-size: clamp(17px, 1.15vw, 22px); }
  #touch-dash {
    width: var(--desktop-dash-size); height: var(--desktop-dash-size);
    min-height: var(--desktop-dash-size); flex: 0 0 var(--desktop-dash-size);
    border-width: 3px; gap: 3px;
  }
  #touch-dash > svg { width: clamp(30px, 2.2vw, 42px); height: clamp(30px, 2.2vw, 42px); }
  #touch-dash > span { font-size: clamp(15px, 1.05vw, 20px); }
  #touch-dash > small { display: none; }
  #mobile-controls .action-key {
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: max-content; min-height: 25px; height: auto; padding: 5px 8px;
    border: 1px solid #fff1d277; border-bottom-width: 2px; border-radius: 5px;
    background: #243335e8; color: #fff5df; font-size: clamp(11px, .73vw, 14px); font-weight: 750;
    line-height: 1; letter-spacing: .2px; pointer-events: none;
  }
}

@media (min-width: 851px) and (max-width: 1100px) and (pointer: fine) {
  :is(.in-match, .match-results) .hud-location { display: none; }
  :is(.in-match, .match-results) .game-hud { gap: 14px; }
  :is(.in-match, .match-results) .hud-center { margin-right: auto; }
}