/* Scoped polish after responsive.css. Preserve the two translucent HUD slices,
 * their hidden defaults, and the renderer's full-bleed aspect-ratio ownership. */
#citadel[data-ui-layout] {
  --hud-left: max(8px, env(safe-area-inset-left));
  --hud-right: max(8px, env(safe-area-inset-right));
  --hud-top: max(8px, env(safe-area-inset-top));
}
#citadel[data-ui-layout][data-view=game] #hud-top-slice {
  width: min(430px, calc(100% - var(--hud-left) - var(--hud-right))) !important;
  grid-template-columns: minmax(0, 1fr) 76px 76px 52px 36px 28px !important;
  background: linear-gradient(120deg, color-mix(in srgb, var(--ink2) 48%, transparent), color-mix(in srgb, var(--ink2) 30%, transparent)) !important;
  border-color: color-mix(in srgb, var(--paper) 25%, transparent) !important;
  box-shadow: inset 0 1px color-mix(in srgb, var(--paper) 10%, transparent), 0 4px 16px #0002;
}
#citadel[data-ui-layout] #hud-top-slice :is(.hud-operation, .hud-wave, .core-health, .view-toggle, #pause) {
  filter: none;
  text-shadow: 0 1px 3px var(--ink);
}
#citadel[data-ui-layout] #hud-top-slice .hud-operation strong {
  font-size: 11px !important;
  line-height: 1.2;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
#citadel[data-ui-layout] #hud-top-slice .hud-operation .micro { font-size: 8px !important; line-height: 1.2; }
#citadel[data-ui-layout] #hud-top-slice .hud-wave { font-size: 8px !important; line-height: 1.3; white-space: normal; }
#citadel[data-ui-layout] #hud-top-slice .core-health > span { font-size: 8px !important; line-height: 1.3; }
#citadel[data-ui-layout] #hud-top-slice .core-health i { height: 4px !important; }
#citadel[data-ui-layout] #hud-top-slice #view-toggle { width: 52px; min-width: 52px; height: 36px; min-height: 36px; font-size: 8px; }
#citadel[data-ui-layout] #hud-top-slice #pause { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
#citadel[data-ui-layout] #hud-top-slice #hud-top-hide { width: 28px; min-width: 28px; height: 32px; min-height: 32px; }
#citadel[data-ui-layout] .hud-slice-trigger { font-size: 9px; min-height: 36px; height: 36px; }
#citadel[data-ui-layout] #hud-bottom-slice {
  width: min(360px, calc(100% - var(--hud-left) - var(--hud-right)));
  background: linear-gradient(135deg, color-mix(in srgb, var(--ink2) 65%, transparent), color-mix(in srgb, var(--ink2) 42%, transparent));
  border-color: color-mix(in srgb, var(--paper) 24%, transparent);
}
#citadel[data-ui-layout] #hud-bottom-slice .hud-bottom-hide { position: sticky; top: 0; right: 0; float: right; z-index: 2; margin-bottom: -44px; }
#citadel[data-ui-layout][data-view=game] #hud-bottom-slice .mobile-status { font-size: 10px !important; line-height: 1.45 !important; padding-right: 40px !important; }
#citadel[data-ui-layout] #hud-bottom-slice .mobile-status span { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
#citadel[data-ui-layout][data-view=game] #hud-bottom-slice :is(#objective-status, #power-status, #boss-warning) { font-size: 10px !important; line-height: 1.45 !important; max-height: none; }
#citadel[data-ui-layout] #hud-bottom-slice #boss-warning span { font-size: 10px; }
#citadel[data-ui-layout] #hud-bottom-slice #control-legend { font-size: 10px; line-height: 1.45; }
#citadel[data-ui-layout] #hud-bottom-slice #control-legend > span { font-size: inherit; letter-spacing: 0; }
#citadel[data-ui-layout] #hud-bottom-slice #control-legend > b { font-size: 8px; white-space: normal; }
#citadel[data-ui-layout] :is(.hud-slice-close, #hud-top-slice button, #hud-bottom-slice button) { backdrop-filter: none; }

/* Dialogs must own the hit plane, even while the HUD remains rendered beneath. */
#citadel[data-ui-layout] .overlay-screen { z-index: 40; }
#citadel[data-ui-layout] :is(.dispatch-card, #dialog) { box-shadow: inset 0 1px color-mix(in srgb, var(--paper) 12%, transparent), 0 20px 60px #0005; }
#citadel[data-ui-layout][data-view=menu] #menu-screen .launch-panel {
  background: linear-gradient(145deg, color-mix(in srgb, var(--ink2) 92%, var(--mint) 8%), var(--ink2));
  box-shadow: inset 0 1px color-mix(in srgb, var(--paper) 10%, transparent), 0 16px 36px #0003;
}
#citadel[data-ui-layout] .mode-tabs button[aria-selected=true] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ink2) 84%, var(--orange) 16%), var(--ink2));
  color: var(--paper);
}
#citadel[data-ui-layout] .primary { background: linear-gradient(115deg, color-mix(in srgb, var(--orange) 90%, white), var(--orange)); }
#citadel[data-ui-layout] :is(#support, #fortify).ready { border-color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint), 0 0 12px color-mix(in srgb, var(--mint) 22%, transparent); }
#citadel[data-ui-layout] .coop-team-status :is(b, span) { font-size: 8px; line-height: 1.35; }

/* Reflow, not scaling: physical touch targets get their own complete grid cells. */
@media (pointer: coarse), (max-width: 900px) {
  #citadel[data-ui-layout][data-view=game] #hud-top-slice {
    width: min(360px, calc(100% - var(--hud-left) - var(--hud-right))) !important;
    grid-template-columns: minmax(0, 1fr) 44px 44px 44px !important;
    grid-template-areas: "op view pause hide" "wave core core core";
    gap: 4px !important;
  }
  #citadel[data-ui-layout] #hud-top-slice .hud-operation { grid-area: op; }
  #citadel[data-ui-layout] #hud-top-slice .hud-wave { grid-area: wave; }
  #citadel[data-ui-layout] #hud-top-slice #core-health-block { grid-area: core; display: block !important; }
  #citadel[data-ui-layout] #hud-top-slice #view-toggle { grid-area: view !important; }
  #citadel[data-ui-layout] #hud-top-slice #pause { grid-area: pause !important; }
  #citadel[data-ui-layout] #hud-top-slice #hud-top-hide { grid-area: hide !important; }
  #citadel[data-ui-layout] #hud-top-slice :is(#view-toggle, #pause, #hud-top-hide),
  #citadel[data-ui-layout] .hud-slice-close,
  #citadel[data-ui-layout] .hud-slice-trigger {
    width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  }
  #citadel[data-ui-layout] #hud-bottom-slice #control-legend > button { height: 44px; min-height: 44px; }
  #citadel[data-ui-layout][data-view=game] #hud-bottom-slice .mobile-status { padding-right: 48px !important; }
  #citadel[data-ui-layout] #hud-bottom-slice { bottom: calc(156px + env(safe-area-inset-bottom)); max-height: min(40dvh, calc(100dvh - 250px - env(safe-area-inset-bottom))); }
  #citadel[data-ui-layout] :is(#hud-top-slice, #hud-bottom-slice) { backdrop-filter: blur(4px); }
}
@media (max-width: 600px) {
  #citadel[data-ui-layout] :is(#coop-minimap, #immersive-minimap) { top: calc(var(--hud-top) + 94px); }
  #citadel[data-ui-layout] .coop-team-status { top: calc(var(--hud-top) + 180px); }
}
@media (max-width: 900px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  #citadel[data-ui-layout] .hud-bottom-toggle,
  #citadel[data-ui-layout] #hud-bottom-slice { left: calc(max(12px, env(safe-area-inset-left)) + 92px); }
  #citadel[data-ui-layout] #hud-bottom-slice { bottom: calc(58px + env(safe-area-inset-bottom)); width: min(300px, calc(100% - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)) - 190px)); max-height: calc(100dvh - var(--hud-top) - 160px - env(safe-area-inset-bottom)); }
  #citadel[data-ui-layout].left-handed .hud-bottom-toggle,
  #citadel[data-ui-layout].left-handed #hud-bottom-slice { left: auto; right: calc(max(12px, env(safe-area-inset-right)) + 92px); }
}
@media (max-width: 600px) and (orientation: landscape) {
  #citadel[data-ui-layout] .hud-bottom-toggle { left: max(12px, env(safe-area-inset-left)); bottom: calc(94px + env(safe-area-inset-bottom)); }
  #citadel[data-ui-layout].left-handed .hud-bottom-toggle { left: auto; right: max(12px, env(safe-area-inset-right)); }
}
/* Short phones have room beside the slice, not beneath the radar. Reserve its
 * column so co-op status cannot collide with the fire button in landscape. */
@media (min-width: 464px) and (max-width: 600px) {
  #citadel[data-ui-layout][data-view=game] #hud-top-slice { width: min(360px, calc(100% - var(--hud-left) - var(--hud-right) - 98px)) !important; }
  #citadel[data-ui-layout] :is(#coop-minimap, #immersive-minimap) { top: var(--hud-top); }
  #citadel[data-ui-layout] .coop-team-status { top: calc(var(--hud-top) + 86px); }
}
@media (prefers-reduced-transparency: reduce) {
  #citadel[data-ui-layout][data-view=game] #hud-top-slice,
  #citadel[data-ui-layout] :is(#hud-bottom-slice, .hud-slice-trigger) { background: var(--ink2) !important; backdrop-filter: none; }
}
@media (forced-colors: active) {
  #citadel[data-ui-layout][data-view=game] #hud-top-slice,
  #citadel[data-ui-layout] #hud-bottom-slice { background: Canvas !important; color: CanvasText; border: 1px solid CanvasText !important; }
}