/* Keep informational overlays from capturing a tap intended for a control. */
#attack-alert[hidden], #scene-badge[hidden], #btn-exit-presenter[hidden] { display: none !important; }
.attack-alert, .scene-badge { pointer-events: none; }
.hud { z-index: 20; }
.insights, .feed { z-index: 15; }
.mobile-views { display: none; }
.exit-presenter { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; min-height: 48px; padding: 12px 24px; background: var(--gb-bg0); border-color: var(--gb-aqua); font-size: 16px; box-shadow: var(--shadow); }
.exit-presenter:hover { transform: translateX(-50%); background: var(--gb-bg1); }
.btn:focus-visible, .mobile-view:focus-visible { outline: 3px solid var(--gb-aqua); outline-offset: 3px; }
.btn[aria-pressed="true"] { color: var(--gb-yellow); border-color: var(--gb-yellow); background: rgba(250,189,47,.1); }

@media (max-width: 960px) {
  html, body { overflow: hidden; height: 100dvh; }
  #map { height: 100dvh; }
  body[data-mobile-page="map"] .hud { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); width: auto; max-height: none; overflow: visible; padding: 14px; border-color: var(--gb-bg2); background: rgba(40,40,40,.96); border-radius: 16px; backdrop-filter: none; }
  .hud-header { margin-bottom: 12px; }
  .hud-title { font-size: 17px; line-height: 1.35; letter-spacing: 0; }
  .hud-sub { margin-top: 4px; color: var(--gb-aqua); font-size: 14px; }
  body[data-mobile-page="map"] .stats { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; margin: 0; }
  body[data-mobile-page="map"] .stat { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; min-width: 0; padding: 9px 3px; border-radius: 10px; }
  .stat > :is(i,svg) { display: none; }
  body[data-mobile-page="map"] .stat .label { margin: 0; font-size: 12px; line-height: 1.4; white-space: nowrap; }
  .stat .value { min-width: 0; max-width: 100%; font-size: 20px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
  .mobile-views { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 12px; }
  .mobile-view { appearance: none; min-height: 44px; border: 1px solid var(--gb-bg2); border-radius: 10px; padding: 8px; background: transparent; color: var(--gb-fg-dim); font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1.3; cursor: pointer; touch-action: manipulation; }
  .mobile-view.active { color: var(--gb-aqua); border-color: var(--gb-aqua); background: rgba(142,192,124,.1); }
  .hud-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 35; margin: 0; padding: 12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background: rgba(40,40,40,.98); border-top: 1px solid var(--gb-bg2); box-shadow: 0 -8px 28px rgba(0,0,0,.25); }
  .hud-controls .btn { min-width: 0; min-height: 46px; padding: 10px; font: 700 16px/1.3 ui-sans-serif,system-ui,-apple-system,sans-serif; touch-action: manipulation; white-space: normal; }
  #btn-present { color: var(--gb-aqua); border-color: rgba(142,192,124,.65); }
  #btn-present[aria-pressed="true"] { color: var(--gb-yellow); border-color: var(--gb-yellow); }
  body[data-mobile-page="map"] :is(.insights,.feed) { display: none; left: max(12px,env(safe-area-inset-left)); right: max(12px,env(safe-area-inset-right)); top: auto; bottom: calc(var(--mobile-controls-height,124px) + 12px); width: auto; max-height: min(52dvh,calc(100dvh - var(--mobile-hud-bottom,220px) - var(--mobile-controls-height,124px) - 36px)); overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  body:not(.present)[data-mobile-view="insights"] .insights { display: grid; }
  body:not(.present)[data-mobile-view="feed"] .feed { display: block; background: rgba(40,40,40,.97); border-color: var(--gb-bg2); padding: 12px; }
  .insights .panel { min-width: 0; background: rgba(40,40,40,.97); border-color: var(--gb-bg2); padding: 14px; }
  .panel-title { font-size: 17px; margin-bottom: 12px; }
  .kpis { gap: 6px; }
  .kpi { min-width: 0; padding: 10px 6px; }
  .kpi-label { font-size: 12px; line-height: 1.4; }
  .kpi-value { font-size: 20px; }
  .list-title { font-size: 15px; }
  .row-head { gap: 12px; font-size: 14px; }
  .row-head .label { min-width: 0; overflow-wrap: anywhere; }
  .row-head .num { flex-shrink: 0; }
  .country-meta { min-width: 0; }
  .country-meta .name { font-size: 15px; overflow-wrap: anywhere; }
  .country-meta .sub { font-size: 13px; }
  .country-chip .donut { flex-shrink: 0; }
  .feed .event { margin-bottom: 10px; padding: 12px; }
  .feed::before { content: "Attack details"; position: sticky; top: -12px; z-index: 1; display: block; padding: 4px 0 12px; margin-bottom: 10px; border-bottom: 1px solid var(--gb-bg2); background: #282828; color: var(--gb-fg); font-size: 17px; font-weight: 800; }
  .event .head { align-items: flex-start; gap: 10px; font-size: 13px; }
  .event .head > div:first-child { min-width: 0; overflow-wrap: anywhere; }
  .event .sev { flex-shrink: 0; }
  .event .main { font-size: 16px; }
  .event .key { font-size: 13px; }
  .event .badge { max-width: 100%; margin-bottom: 5px; font-size: 12px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
  .feed:empty::before { content: "Attack details will appear here as activity arrives."; position: static; padding: 12px; margin: 0; border: 0; font-size: 16px; color: var(--gb-fg-dim); }
  .attack-alert { top: calc(var(--mobile-hud-bottom,220px) + 12px); left: 12px; right: 12px; width: auto; transform: none; padding: 10px 12px; font-size: 13px; line-height: 1.5; letter-spacing: .1px; }
  .attack-alert .dot { flex-shrink: 0; }
  .attack-alert #attack-text { min-width: 0; overflow-wrap: anywhere; }
  .mapboxgl-ctrl-top-right { top: calc(var(--mobile-hud-bottom,220px) + 12px); right: 4px; margin: 0; }
  .mapboxgl-ctrl-group button { width: 44px; height: 44px; }
  .mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right { bottom: var(--mobile-controls-height,124px); }
  .mapboxgl-marker { pointer-events: none; }
  body.present .hud { display: block; top: auto; bottom: 0; left: 0; right: 0; height: 0; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
  body.present .hud :is(.hud-header,.stats,.mobile-views) { display: none; }
  body.present .hud-controls { grid-template-columns: minmax(0,1fr); }
  body.present .hud-controls .btn:not(#btn-present) { display: none; }
  body.present .exit-presenter { display: none; }
  body.present .scene-badge { top: max(12px,env(safe-area-inset-top)); max-width: calc(100% - 24px); text-align: center; font-size: 15px; }
  body.present .attack-alert { top: calc(max(12px,env(safe-area-inset-top)) + 46px); }
  body.present .mapboxgl-ctrl-top-right { top: calc(max(12px,env(safe-area-inset-top)) + 130px); }
}

@media (max-width: 600px) {
  .list.two-col, .countries-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 960px) and (max-height: 500px) {
  body[data-mobile-page="map"] .hud { padding: 10px; display: flex; align-items: center; gap: 12px; }
  .hud-header { display: none; }
  body[data-mobile-page="map"] .stats { flex: 1; }
  body[data-mobile-page="map"] .stat { padding: 4px; gap: 2px; }
  .mobile-views { width: 42%; min-width: 220px; margin: 0; }
  .hud-controls { grid-template-columns: repeat(4,minmax(0,1fr)); padding-top: 8px; }
  .hud-controls .btn { min-height: 44px; }
  .attack-alert { font-size: 12px; }
}
@media (max-width: 500px) and (max-height: 500px) {
  .mobile-views { width: 100%; min-width: 0; }
  body[data-mobile-page="map"] .hud { display: block; }
  body[data-mobile-page="map"] .stats { display: none; }
  .hud-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .blink, .focus-ring::after { animation: none; }
}