/* Loaded last so the compact HUD wins over the original fixed control cards. */
body.playing #hud { display: none !important; }
body.playing #call-controls {
  display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center;
  max-width: min(390px, calc(100vw - 170px)); pointer-events: none;
}
#call-controls > button { pointer-events: auto; cursor: pointer; color: #eee; background: #151c1ced; border: 1px solid #ffffff24; border-radius: 10px; font: 11px/1.4 var(--ocr, monospace); }
#call-menu-toggle { min-width: 44px; height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 10px; }
#call-menu-toggle > span:first-child { font: 19px/1 sans-serif; }
#call-summary { min-height: 44px; min-width: 0; padding: 5px 12px; text-align: left; }
#call-summary small { display: block; color: #e9c994; font-size: 9px; }
#call-summary small[hidden] { display: none; }
#call-controls #ash-status { grid-column: 1 / -1; justify-self: start; padding: 4px 9px; font-size: 10px; background: #151c1cd9; }
#call-screen-live { grid-column: 1 / -1; padding: 7px 10px; color: #c8e2c0 !important; }
#call-screen-live[hidden] { display: none; }
#call-menu {
  box-sizing: border-box; width: min(400px, calc(100vw - 24px)); max-height: calc(100dvh - 32px);
  margin: auto; padding: 20px; background: #141b19; color: #e9e9e3; border: 1px solid #7b91805c;
  border-radius: 16px; box-shadow: 0 24px 80px #0009; overflow: auto; cursor: auto;
  font: 12px/1.55 var(--ocr, monospace); color-scheme: dark; scrollbar-width: thin;
}
#call-menu::backdrop { background: #060c0985; cursor: auto; }
#call-menu [hidden] { display: none !important; }
#call-menu header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
#call-menu header small { color: #8d9c92; font-size: 9px; letter-spacing: .12em; }
#call-menu h2 { margin: 2px 0 0; font-size: 21px; font-weight: 500; }
#call-menu h3 { margin: 18px 0 8px; color: #9da99f; font: inherit; font-size: 10px; }
#call-menu button { color: inherit; font: inherit; cursor: pointer; }
#call-menu .menu-close { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #ffffff24; border-radius: 9px; background: #ffffff06; font: 25px sans-serif; }
.menu-settings, .menu-places { display: grid; gap: 6px; }
#call-menu .call-toggle { width: 100%; max-width: none; min-height: 55px; padding: 10px 12px; background: #ffffff05; border-color: #ffffff18; font-size: 12px; }
#call-menu .call-toggle small { margin-top: 3px; color: #9da99f; }
#call-menu #spatial-audio-toggle[aria-checked="false"] { border-color: #869b7359; }
#call-menu .call-toggle:hover, #call-menu button:hover { background-color: #ffffff0c; }
#call-menu .menu-nearby-hint { color: #8d9c92; font-size: 11px; margin: 4px 0 14px; }
.menu-places:has(> button:not([hidden])) + .menu-nearby-hint { display: none; }
.menu-people { margin: 16px 0; border-top: 1px solid #ffffff18; border-bottom: 1px solid #ffffff18; }
.menu-people > summary { padding: 13px 0; min-height: 20px; cursor: pointer; }
#call-menu #roster, #call-menu #guest-notice, #call-menu #identity-control { position: static; max-width: 100%; padding: 8px 0; margin: 0; background: transparent; border: 0; font: 11px/1.5 var(--ocr, monospace); }
#call-menu #identity-control { display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 14px; }
#call-menu #roster { white-space: normal; overflow-wrap: anywhere; }
#call-menu #identity-control button { min-height: 44px; }
#call-menu #guest-notice[hidden] { display: none; }
.menu-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu-tools > button, #call-menu .menu-back { min-height: 44px; padding: 9px; border: 1px solid #ffffff24; background: transparent; border-radius: 8px; font-size: 11px; }
#call-menu kbd { font: inherit; color: #8d9c92; }
.menu-tools kbd, .menu-resume kbd { margin-left: 8px; }
#call-menu .menu-resume { width: 100%; min-height: 44px; margin-top: 18px; background: #d8ddc7; border: 0; border-radius: 8px; color: #172017; }
#call-menu .menu-resume:hover { background: #e8ecd9; }
.menu-touch-help { color: #b9c3b7; margin: 0 0 18px; }
.menu-guide dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px 10px; margin: 0 0 18px; }
.menu-guide dt, .menu-guide dd { margin: 0; }
#call-menu .menu-guide dt kbd { display: inline-block; border: 1px solid #ffffff26; border-radius: 4px; padding: 0 5px; color: #d8ddc7; }
#call-menu :focus-visible, #call-controls > button:focus-visible, #minimap-toggle:focus-visible { outline: 2px solid #d8ddc7; outline-offset: 3px; }
#minimap { top: calc(16px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); }
#minimap-toggle { display: block; padding: 0; border: 0; border-radius: 50%; background: transparent; pointer-events: auto; cursor: pointer; }
#minimap-canvas { display: block; width: 120px; height: 120px; }
#minimap.expanded #minimap-canvas { width: min(240px, calc(100vw - 32px)); height: min(240px, calc(100vw - 32px)); }
#minimap-heading { font-size: 10px; margin-top: 5px; }
body:has(#minimap.expanded) #call-summary, body:has(#minimap.expanded) #ash-status { display: none; }
body.clean-view #call-summary, body.clean-view #ash-status, body.clean-view #minimap, body.clean-view #selfview, body.clean-view #crosshair { display: none !important; }
@media (max-width: 640px), (pointer: coarse) {
  body.playing #call-controls { top: calc(10px + env(safe-area-inset-top, 0px)); left: calc(10px + env(safe-area-inset-left, 0px)); max-width: calc(100vw - 128px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); gap: 5px; }
  #call-menu-toggle { padding: 0 11px; }
  .menu-button-label { display: none; }
  #call-summary { padding: 5px 9px; font-size: 10px; }
  #call-summary small { font-size: 8px; }
  #call-controls #ash-status { font-size: 9px; }
  #minimap { top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); }
  #minimap-canvas { width: 92px; height: 92px; }
  #minimap.expanded #minimap-canvas { width: 200px; height: 200px; }
  #selfview { width: 72px; height: 54px; }
  #call-menu { padding: 16px; max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}