.screen[data-v-27880acf] {
  min-height: 0 !important;
  overflow: visible !important;
}

.screen-bd[data-v-27880acf] {
  min-height: 0 !important;
  align-content: start !important;
  grid-auto-rows: auto !important;
}

@media (max-width: 1024px) {
  .screen-bd[data-v-27880acf] {
    min-height: 0 !important;
    align-content: start !important;
  }

  .map-panel[data-v-27880acf] {
    min-height: 258px !important;
  }

  #chart-map[data-v-27880acf] {
    height: 258px !important;
    min-height: 258px !important;
  }

  .state-panel[data-v-27880acf] {
    min-height: 350px !important;
  }

  .state-earth-wrap[data-v-27880acf] {
    min-height: 314px !important;
  }

  .state-earth-stage[data-v-27880acf] {
    transform: scale(0.86) !important;
    transform-origin: center center !important;
  }
}

@media (max-width: 768px) {
  .screen-bd[data-v-27880acf] {
    gap: 8px !important;
    padding: 8px !important;
  }

  .panel-column[data-v-27880acf] {
    gap: 8px !important;
  }

  .map-panel[data-v-27880acf] {
    min-height: 248px !important;
  }

  #chart-map[data-v-27880acf] {
    height: 248px !important;
    min-height: 248px !important;
  }

  .legend-container[data-v-27880acf] {
    bottom: 4px !important;
  }

  .state-panel[data-v-27880acf] {
    min-height: 340px !important;
  }

  .state-earth-wrap[data-v-27880acf] {
    min-height: 304px !important;
  }

  .state-earth-stage[data-v-27880acf] {
    transform: scale(0.82) !important;
    transform-origin: center center !important;
  }
}

/* Mobile Case Map visual alignment. These selectors target the dynamically
   created bubble DOM, so they must stay global rather than scoped. */
@media (max-width: 768px) {
  .col-r .panel:has(.state-bubble-panel),
  .col-r .panel:nth-of-type(1) {
    height: 262px !important;
    min-height: 262px !important;
  }

  .state-bubble-panel {
    height: 218px !important;
    min-height: 218px !important;
    overflow: hidden !important;
  }

  .state-bubble-wrap {
    height: 218px !important;
    min-height: 218px !important;
    background:
      radial-gradient(ellipse at 52% 62%, rgba(0, 125, 255, 0.24), rgba(4, 15, 44, 0) 58%),
      linear-gradient(180deg, rgba(9, 14, 35, 0.15), rgba(9, 14, 35, 0.35));
    background-size: 100% 100%;
  }

  .state-bubble-inner::before {
    content: "";
    position: absolute;
    left: -18%;
    right: -18%;
    top: 63%;
    height: 42px;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(45, 192, 255, 0.18), rgba(16, 83, 180, 0.1) 44%, rgba(7, 22, 58, 0) 74%),
      linear-gradient(90deg, rgba(8, 28, 70, 0), rgba(32, 156, 255, 0.24), rgba(35, 207, 255, 0.12), rgba(8, 28, 70, 0));
    border-top: 1px solid rgba(74, 195, 255, 0.18);
    border-bottom: 1px solid rgba(74, 195, 255, 0.12);
    border-radius: 50%;
    transform: translateY(-50%) rotate(-3deg);
    filter: blur(0.35px);
  }

  .state-bubble {
    overflow: visible !important;
    border-color: rgba(55, 210, 255, 0.95) !important;
    background:
      radial-gradient(circle at 50% 94%, rgba(125, 255, 255, 0.95) 0 3px, rgba(125, 255, 255, 0) 7px),
      radial-gradient(circle at 27% 13%, rgba(255, 255, 255, 0.95) 0 5px, rgba(92, 219, 255, 0.45) 8px, rgba(92, 219, 255, 0) 24px),
      radial-gradient(circle at 52% 52%, rgba(15, 126, 232, 0.92) 0%, rgba(7, 62, 179, 0.9) 54%, rgba(2, 24, 90, 0.96) 100%) !important;
    box-shadow:
      inset 0 0 10px rgba(130, 235, 255, 0.74),
      inset 0 0 26px rgba(18, 112, 255, 0.7),
      0 0 12px rgba(28, 178, 255, 0.72),
      0 0 28px rgba(8, 74, 196, 0.42) !important;
  }

  .state-bubble::before {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: 0;
    pointer-events: none;
    border: 2px solid rgba(92, 221, 255, 0.88);
    border-radius: 50%;
    box-shadow:
      inset 0 0 10px rgba(255, 255, 255, 0.34),
      0 0 11px rgba(39, 188, 255, 0.72);
    opacity: 0.95;
  }

  .state-bubble::after {
    content: "";
    position: absolute;
    left: 15%;
    right: 15%;
    top: 9%;
    height: 14%;
    z-index: 1;
    pointer-events: none;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
    filter: blur(1px);
    opacity: 0.75;
  }

  .state-bubble .sb-val {
    position: relative;
    z-index: 2;
    color: #a8e3ff !important;
    text-shadow:
      0 0 7px rgba(88, 221, 255, 0.95),
      0 0 14px rgba(34, 140, 255, 0.76);
  }

  .bubble-name-above {
    z-index: 4 !important;
    color: #8fd1ff !important;
    text-shadow: 0 0 7px rgba(52, 175, 255, 0.82);
  }
}