/* Every rule is scoped to detected handheld clients; desktop stays unchanged. */
body.mobile-client { min-height: 0; height: var(--app-height); width: var(--mobile-viewport-width, 100%); right: auto; bottom: auto; }
body.mobile-client main { width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; overflow: auto; }
body.mobile-client #login-panel { margin: auto; padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left)); width: min(30rem, 100%); border-radius: 24px; border: 1px solid #283750; background: linear-gradient(145deg, #182339, #101722); }
body.mobile-client input { font-size: 16px; min-height: 50px; }
body.mobile-client #control-panel { position: relative; width: 100%; min-width: 0; height: var(--app-height); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; overflow: hidden; }
body.mobile-client #control-panel > header { position: static; border: 0; border-radius: 0; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); font-size: 12px; gap: 8px; background: #101724; }
body.mobile-client header strong { display: block; }
body.mobile-client #status { flex: 1; min-width: 0; }
body.mobile-client #audio-status { max-width: 32%; font-size: 11px; }
body.mobile-client #viewer { border-radius: 0; min-width: 0; min-height: 0; }
/* Remove intrinsic image dimensions from grid sizing. The image always fits
   the viewer's final box, including Safari's reduced landscape viewport. */
body.mobile-client #screen-stage { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; display: block; }
body.mobile-client #remote-screen { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
body.mobile-client #touch-help { white-space: normal; text-align: center; width: max-content; max-width: 90%; bottom: 12px; font-size: 11px; }
body.mobile-client #mobile-dock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: #101724; z-index: 8; }
body.mobile-client #mobile-dock button { min-width: 0; padding: 6px 2px; min-height: 52px; font-size: 12px; }
body.mobile-client #mobile-key-accessories { display: none; grid-column: 1 / -1; gap: 6px; }
body.mobile-client.keyboard-open #mobile-key-accessories { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
body.mobile-client #mobile-key-accessories button { min-height: 44px; }
body.mobile-client #mobile-tools { position: absolute; bottom: calc(var(--mobile-dock-height, 76px) + 8px); left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); max-height: min(65%, calc(100% - var(--mobile-dock-height, 76px) - 16px)); overflow: auto; z-index: 10; padding: 12px; border: 1px solid #38445c; border-radius: 18px; background: #141c2b; box-shadow: 0 8px 40px #000a; }
body.mobile-client #mobile-tools h2 { margin: 0; font-size: 16px; }
body.mobile-client .mobile-tools-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
body.mobile-client #mobile-tools nav { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; gap: 8px; }
body.mobile-client #mobile-tools nav .tool-button { width: 100%; max-width: none; min-width: 0; min-height: 54px; padding: 6px; flex-direction: column; font-size: 11px; }
body.mobile-client #mobile-tools .tool-label { display: block; }
body.mobile-client #mobile-tools #monitor-buttons { position: static; grid-column: 1 / -1; border-radius: 8px; max-width: 100%; overflow: auto; padding: 0; }
body.mobile-client #monitor-buttons button { min-height: 44px; flex-shrink: 0; }
body.mobile-client #game-mode { display: none !important; }
body.mobile-client .mobile-key-row { display: flex; overflow: auto; gap: 6px; margin-top: 12px; }
body.mobile-client .mobile-key-row button { flex-shrink: 0; min-width: 44px; padding: 8px; }
body.mobile-client #mobile-tools p { color: #aabbd4; font-size: 12px; line-height: 1.5; margin-bottom: 0; }
body.mobile-client #mobile-cursor { position: absolute; width: 14px; height: 14px; border: 2px solid white; border-radius: 50%; background: #3978f6; box-shadow: 0 0 0 1px #000; transform: translate(-50%, -50%); pointer-events: none; z-index: 4; }
body.mobile-client.keyboard-open #control-panel > header { display: none; }
body.mobile-client.keyboard-open #control-panel { grid-template-rows: minmax(0, 1fr) auto; }
body.mobile-client.keyboard-open #keyboard-done { display: none; }
body.mobile-client.controller-mode #gamepad-overlay { padding: 12px; }
body.mobile-client .gamepad-actions { width: 132px; height: 132px; }
body.mobile-client .gamepad-actions button { width: 44px; height: 44px; }
body.mobile-client .virtual-stick { width: clamp(64px, 20vw, 112px); }
body.mobile-client button:focus-visible { outline: 2px solid #99bcff; outline-offset: 2px; }
body.mobile-client button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body.mobile-client button:active { background: #3978f6; }
body.mobile-client #mobile-dock button[aria-pressed="true"], body.mobile-client #mobile-dock button[aria-expanded="true"] { background: #265ac0; border-color: #578bf2; }
@media (orientation: landscape) and (max-height: 550px) {
  body.mobile-client #control-panel { grid-template-columns: minmax(0, 1fr) 104px; grid-template-rows: auto minmax(0, 1fr); padding-bottom: env(safe-area-inset-bottom); }
  body.mobile-client #control-panel > header { grid-column: 1; padding: 6px 12px; }
  body.mobile-client #viewer { grid-column: 1; }
  body.mobile-client #mobile-dock { min-width: 0; min-height: 0; overflow-y: auto; grid-column: 2; grid-row: 1 / -1; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, minmax(52px, 1fr)); padding: 6px; }
  body.mobile-client #mobile-dock > button { width: 100%; min-width: 44px; min-height: 52px; font-size: 13px; overflow-wrap: anywhere; }
  body.mobile-client #mobile-tools { right: calc(112px + env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom)); max-height: calc(100% - 16px - env(safe-area-inset-bottom)); }
  body.mobile-client.keyboard-open #control-panel { grid-template-rows: minmax(0, 1fr); }
  body.mobile-client.keyboard-open #mobile-key-accessories { display: flex; flex-direction: column; }
  body.mobile-client.keyboard-open #mobile-dock { overflow-y: auto; display: flex; flex-direction: column; }
  body.mobile-client.keyboard-open #mobile-dock button { min-height: 44px; flex-shrink: 0; }
}