/* WRS GEMPA UI polish: fixed page headers, contained scrolling and cleaner mobile controls. */

/* WRS GEMPA UI hotfix 2 — short headers and restore visible mini/ShakeMaps.
   The :not(#mobilePageMap) legacy selector has an ID-level specificity, so these
   selectors deliberately use the active page state to override its 58px top inset. */
@media (max-width: 1200px) {
  #mobilePageDetail.active:not(#mobilePageMap),
  #mobilePageAlerts.active:not(#mobilePageMap) {
    padding-top: calc(4px + env(safe-area-inset-top, 0px)) !important;
  }

  #mobilePageDetail.active:not(#mobilePageMap) > .mobile-page-title,
  #mobilePageAlerts.active:not(#mobilePageMap) > .mobile-page-title {
    flex: 0 0 auto !important;
    padding: 5px 4px 8px !important;
    margin: 0 !important;
    font-size: 19px !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
  }
  #mobilePageDetail.active:not(#mobilePageMap) > .mobile-page-title small,
  #mobilePageAlerts.active:not(#mobilePageMap) > .mobile-page-title small {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 550 !important;
    letter-spacing: 0 !important;
  }
  #mobilePageDetail.active:not(#mobilePageMap) > .mobile-page-title::after,
  #mobilePageAlerts.active:not(#mobilePageMap) > .mobile-page-title::after {
    margin-top: 7px !important;
    height: 2px !important;
    width: 42px !important;
  }

  /* Restore the small locator map, whose Leaflet container had no reliable height
     once the detail card moved into its own scroll area. */
  #mobilePageDetail.active:not(#mobilePageMap) #rightPanel #miniFocus.rp-mini-map {
    display: block !important;
    position: relative !important;
    width: auto !important;
    height: 168px !important;
    min-height: 168px !important;
    max-height: 168px !important;
    margin: 8px 10px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    contain: layout paint !important;
  }

  /* Keep ShakeMap readable and within the detail scroll container. */
  #mobilePageDetail.active:not(#mobilePageMap) #rightPanel #shakemapBox:not(.hidden) {
    display: block !important;
    width: auto !important;
    margin: 10px 10px 12px !important;
    overflow: visible !important;
  }
  #mobilePageDetail.active:not(#mobilePageMap) #rightPanel #shakemapBox:not(.hidden) .rp-shakemap-h {
    position: relative !important;
    display: block !important;
    padding: 8px 10px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }
  #mobilePageDetail.active:not(#mobilePageMap) #rightPanel #shakemapBox:not(.hidden) #shakemapImg {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 180px !important;
    object-fit: contain !important;
    background: #0a1525 !important;
  }
}

@media (max-width: 1200px) {
  /* The bell belongs to the live-monitoring utility rail, not over every page's content. */
  #mobileNotificationBtn { display: none !important; }
  body[data-mobile-page="map"] #mobileNotificationBtn {
    display: grid !important;
    position: fixed !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    right: 64px !important;
    z-index: 70 !important;
  }

  /* Replace the cramped dark three-line rail with a clear, touch-friendly control. */
  #vToolbar.is-collapsed {
    width: 54px !important;
    min-width: 54px !important;
    padding: 4px !important;
    gap: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #vToolbar .tb-rail-toggle {
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(109, 217, 244, .32) !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg, rgba(9, 34, 52, .96), rgba(4, 15, 27, .96)) !important;
    color: #b9f2ff !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .34), inset 0 1px rgba(255,255,255,.06) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }
  #vToolbar .tb-rail-toggle svg {
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  #vToolbar .tb-rail-toggle:active { transform: scale(.95) !important; }

  /* Detail page has a fixed title; only the actual earthquake detail card scrolls. */
  #mobilePageDetail {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    box-sizing: border-box !important;
    display: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    -webkit-overflow-scrolling: auto !important;
    overscroll-behavior: none !important;
  }
  #mobilePageDetail.active {
    display: flex !important;
  }
  #mobilePageDetail > .mobile-page-title {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 8px 4px 14px !important;
    background: linear-gradient(180deg, #07111f 0%, rgba(7,17,31,.98) 88%, rgba(7,17,31,0) 100%) !important;
  }
  #mobilePageDetail #rightPanel {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    z-index: 1 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 14px !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }
  #mobilePageDetail #rightPanel .rp-sheet-handle { display: none !important; }

  /* Notification content scrolls underneath its own stationary title, without sticky tabs
     floating on top of the BMKG warning text. */
  #mobilePageAlerts {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    box-sizing: border-box !important;
    display: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #mobilePageAlerts.active { display: flex !important; }
  #mobilePageAlerts > .mobile-page-title {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 8px 4px 14px !important;
    background: linear-gradient(180deg, #07111f 0%, rgba(7,17,31,.98) 88%, rgba(7,17,31,0) 100%) !important;
  }
  #mobilePageAlerts .notification-center-scroll {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 0 12px !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }
  #mobilePageAlerts .notification-center-tabs {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    margin: 0 0 12px !important;
  }
  #mobilePageAlerts .notification-center-panel { min-width: 0 !important; }
  #mobilePageAlerts .notification-center-push-head h3 { font-size: 18px !important; }
}
@media (max-width: 480px) {
  #mobilePageDetail > .mobile-page-title,
  #mobilePageAlerts > .mobile-page-title {
    padding-bottom: 12px !important;
  }
  #mobilePageDetail > .mobile-page-title span,
  #mobilePageAlerts > .mobile-page-title span { display: block !important; }
}
@media (prefers-reduced-motion: reduce) {
  #vToolbar .tb-rail-toggle { transition: none !important; }
}


/* WRS GEMPA live monitoring redesign — parameter values and official tsunami status. */
#cardRealtime {
  border-radius: 23px !important;
  overflow: hidden !important;
  border: 1px solid rgba(70, 184, 225, .34) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .36), inset 0 1px rgba(255,255,255,.045) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}
#cardRealtime .panel-header {
  min-height: 43px !important;
  padding: 0 15px !important;
  letter-spacing: .13em !important;
  font-weight: 850 !important;
}
#rtPlace {
  color: #f0f7ff !important;
  font-weight: 780 !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}
.rt-tsunami-status {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 8px 0 7px !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(148, 163, 184, .3) !important;
  border-radius: 10px !important;
  background: rgba(30, 41, 59, .52) !important;
  color: #cbd5e1 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}
.rt-tsunami-indicator {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 15px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  transform-origin: center !important;
}
.rt-tsunami-potential {
  background: linear-gradient(100deg, rgba(127, 29, 29, .27), rgba(45, 12, 22, .62)) !important;
  border-color: rgba(255, 67, 87, .62) !important;
  color: #ff7b88 !important;
}
.rt-tsunami-potential .rt-tsunami-indicator {
  color: #ff4059 !important;
  animation: wrs-tsunami-pulse 1.05s ease-in-out infinite !important;
}
.rt-tsunami-no-potential {
  background: linear-gradient(100deg, rgba(5, 70, 44, .35), rgba(4, 35, 27, .62)) !important;
  border-color: rgba(45, 212, 121, .52) !important;
  color: #6ff0a7 !important;
}
.rt-tsunami-no-potential .rt-tsunami-indicator {
  color: #2ee879 !important;
  text-shadow: 0 0 10px rgba(46, 232, 121, .8) !important;
  animation: wrs-tsunami-pulse 1.35s ease-in-out infinite !important;
}
.rt-tsunami-unknown {
  border-color: rgba(245, 181, 72, .35) !important;
  background: rgba(67, 48, 15, .25) !important;
  color: #e7c98d !important;
}
.rt-tsunami-unknown .rt-tsunami-indicator { color: #f2c363 !important; }

@keyframes wrs-tsunami-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .48; transform: scale(1.12); }
}

/* Three-column panel: WIB, UTC, and the latest quake parameters. */
#worldClockPanel { padding: 10px 11px !important; }
#worldClockContent { display: block !important; }
#worldClockContent[hidden], #worldClockRevision[hidden] { display: none !important; }
#worldClockRevision { display: none !important; }
.world-clock-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .98fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  min-width: 0 !important;
}
.world-clock-grid > .world-clock-time,
.world-clock-grid > .world-clock-param {
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.world-clock-grid > .world-clock-time {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  padding: 1px 10px !important;
  border-right: 1px solid rgba(90, 169, 208, .23) !important;
}
.world-clock-grid > .world-clock-time:first-child { padding-left: 1px !important; }
.world-clock-grid > .world-clock-time:nth-child(2) { border-right: 0 !important; }
.world-clock-grid > .world-clock-param {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 4px !important;
  padding: 1px 0 1px 10px !important;
  border: 0 !important;
  border-left: 1px solid rgba(90, 169, 208, .23) !important;
  background: transparent !important;
  color: #d9ecff !important;
  overflow: hidden !important;
}
.world-clock-grid > .world-clock-time small,
.world-clock-grid > .world-clock-param small {
  display: block !important;
  margin: 0 !important;
  color: #70dffa !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .045em !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}
.world-clock-grid > .world-clock-time strong {
  display: block !important;
  margin: 0 !important;
  color: #e9f7ff !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
  white-space: nowrap !important;
}
.world-clock-grid > .world-clock-time time {
  display: block !important;
  color: #90abc4 !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}
.world-clock-grid > .world-clock-param strong {
  color: #f7fbff !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -.03em !important;
  overflow-wrap: anywhere !important;
}
#rtParamDepth {
  color: #a9c3dc !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}
.rt-param-revision {
  display: -webkit-box !important;
  max-width: 100% !important;
  color: #88a8c4 !important;
  font-size: 8px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}
.rt-param-revision.is-revision-small { color: #70dffa !important; }
.rt-param-revision.is-revision-large { color: #ff7f8b !important; }

@media (max-width: 480px) {
  #worldClockPanel { padding: 9px 8px !important; }
  .world-clock-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .96fr) !important; }
  .world-clock-grid > .world-clock-time { padding-right: 6px !important; padding-left: 6px !important; }
  .world-clock-grid > .world-clock-time:first-child { padding-left: 0 !important; }
  .world-clock-grid > .world-clock-param { padding-left: 7px !important; }
  .world-clock-grid > .world-clock-time small,
  .world-clock-grid > .world-clock-param small { font-size: 8px !important; letter-spacing: 0 !important; }
  .world-clock-grid > .world-clock-time strong { font-size: 15px !important; }
  .world-clock-grid > .world-clock-param strong { font-size: 17px !important; }
  .world-clock-grid > .world-clock-time time { font-size: 8px !important; }
  #rtParamDepth { font-size: 9px !important; }
  .rt-param-revision { font-size: 7px !important; }
  .rt-tsunami-status { font-size: 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-tsunami-potential .rt-tsunami-indicator,
  .rt-tsunami-no-potential .rt-tsunami-indicator { animation: none !important; }
}


/* Mobile live-monitoring mockup: real app header, wide event card, controls and statistics. */
@media(max-width:1200px) {
  #mobilePageMap .wrs-mobile-live-header{position:fixed!important;top:calc(6px + env(safe-area-inset-top,0px))!important;left:10px!important;right:10px!important;z-index:55!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:6px!important;width:auto!important;min-height:46px!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;pointer-events:none!important}
  #mobilePageMap .wrs-mobile-live-header *{box-sizing:border-box!important}
  #mobilePageMap .wrs-mobile-brand{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;pointer-events:auto!important}
  #mobilePageMap .wrs-mobile-brand img{display:block!important;flex:0 0 38px!important;width:38px!important;height:38px!important;object-fit:contain!important;border-radius:50%!important;padding:3px!important;border:1px solid rgba(86,190,244,.7)!important;background:rgba(4,19,34,.76)!important}
  #mobilePageMap .wrs-mobile-brand-copy{display:flex!important;flex-direction:column!important;gap:1px!important;min-width:0!important}
  #mobilePageMap .wrs-mobile-brand-copy strong{display:block!important;color:#f2f7ff!important;font-size:15px!important;font-weight:950!important;line-height:1!important;letter-spacing:-.045em!important;white-space:nowrap!important}
  #mobilePageMap .wrs-mobile-brand-copy strong span{color:#ff405d!important}
  #mobilePageMap .wrs-mobile-brand-copy small{display:block!important;color:#b6d5ef!important;font-size:6.5px!important;font-weight:800!important;line-height:1.25!important;letter-spacing:.06em!important;white-space:nowrap!important}
  #mobilePageMap .wrs-mobile-header-right{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:5px!important;min-width:0!important;pointer-events:auto!important}
  #mobilePageMap .wrs-mobile-connection{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important;max-width:124px!important;padding:7px 8px!important;border:1px solid rgba(66,171,229,.62)!important;border-radius:22px!important;background:linear-gradient(140deg,rgba(7,29,47,.96),rgba(4,16,30,.95))!important;box-shadow:0 8px 22px rgba(0,0,0,.26)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;color:#ebf8ff!important}
  #mobilePageMap .wrs-mobile-connection-led{display:block!important;flex:0 0 10px!important;width:10px!important;height:10px!important;border-radius:50%!important;background:#35d8ad!important;box-shadow:0 0 0 4px rgba(33,211,164,.12),0 0 13px rgba(33,211,164,.48)!important}
  #mobilePageMap .wrs-mobile-connection-copy{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}
  #mobilePageMap .wrs-mobile-connection-copy strong{display:block!important;color:#f1f8ff!important;font-size:8px!important;font-weight:900!important;line-height:1.1!important;letter-spacing:.02em!important;white-space:nowrap!important}
  #mobilePageMap .wrs-mobile-connection-copy small{display:block!important;color:#86d9f3!important;font-size:6px!important;line-height:1.2!important;white-space:normal!important}
  #mobilePageMap .wrs-mobile-connection.is-warning{border-color:rgba(245,183,74,.6)!important}
  #mobilePageMap .wrs-mobile-connection.is-warning .wrs-mobile-connection-led{background:#f5bf55!important;box-shadow:0 0 0 4px rgba(245,191,85,.13)!important}
  #mobilePageMap .wrs-mobile-connection.is-error{border-color:rgba(255,73,92,.66)!important}
  #mobilePageMap .wrs-mobile-connection.is-error .wrs-mobile-connection-led{background:#ff4c62!important;box-shadow:0 0 0 4px rgba(255,76,98,.12)!important}
  #mobilePageMap .wrs-mobile-connection.is-loading .wrs-mobile-connection-led{background:#66a9d5!important;box-shadow:0 0 0 4px rgba(102,169,213,.12)!important}
  #mobilePageMap .wrs-live-header-actions{display:flex!important;align-items:center!important;gap:4px!important}
  #mobilePageMap #mobileNotificationBtn,#mobilePageMap .wrs-header-icon{position:relative!important;inset:auto!important;display:grid!important;place-items:center!important;flex:0 0 36px!important;width:36px!important;min-width:36px!important;height:38px!important;min-height:38px!important;margin:0!important;padding:0!important;border:1px solid rgba(75,179,227,.4)!important;border-radius:13px!important;color:#e5f7ff!important;background:rgba(4,18,32,.94)!important;box-shadow:0 8px 22px rgba(0,0,0,.24)!important;backdrop-filter:blur(13px)!important}
  #mobilePageMap #mobileNotificationBtn svg,#mobilePageMap .wrs-header-icon svg{display:block!important;width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  #mobilePageMap #mobileNotificationBtn .mobile-notification-badge{top:-4px!important;right:-4px!important;min-width:16px!important;height:16px!important;display:grid!important;place-items:center!important;padding:0 4px!important;border:1.5px solid #061321!important;border-radius:99px!important;background:#fb4053!important;color:white!important;font-size:8px!important;font-weight:900!important}
  #mobilePageMap #mobileNotificationBtn .mobile-notification-badge[hidden]{display:none!important}
  
  #mobilePageMap .left-top{position:fixed!important;top:calc(62px + env(safe-area-inset-top,0px))!important;left:10px!important;right:10px!important;width:auto!important;max-width:none!important;max-height:min(455px,calc(100dvh - 285px - env(safe-area-inset-bottom,0px)))!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;scrollbar-width:none!important;z-index:25!important;border-radius:22px!important}
  #mobilePageMap .left-top::-webkit-scrollbar{display:none!important}
  #mobilePageMap #cardRealtime .panel-header{display:flex!important;align-items:center!important;gap:9px!important;min-height:42px!important;padding:10px 13px!important;border-bottom:1px solid rgba(99,188,231,.24)!important;background:linear-gradient(105deg,rgba(17,54,77,.96),rgba(7,25,41,.96))!important;color:#e7f7ff!important;font-size:11px!important;font-weight:900!important;letter-spacing:.13em!important;line-height:1.25!important}
  #mobilePageMap #cardRealtime .pulse-dot{flex:0 0 7px!important;width:7px!important;height:7px!important}
  #mobilePageMap #cardRealtime .panel-sub{margin:0!important;padding:8px 12px 2px!important;color:#a7bfd4!important;font-size:9px!important;line-height:1.3!important}
  #mobilePageMap #cardRealtime .rt-filter{display:none!important}
  #mobilePageMap #cardRealtime .rt-row{display:flex!important;align-items:center!important;gap:10px!important;padding:8px 12px 7px!important}
  #mobilePageMap #cardRealtime .rt-mag{display:grid!important;place-items:center!important;flex:0 0 58px!important;width:58px!important;height:58px!important;border-radius:15px!important;font-size:25px!important;font-weight:950!important;line-height:1!important;box-shadow:inset 0 1px rgba(255,255,255,.22),0 5px 16px rgba(0,0,0,.18)!important}
  #mobilePageMap #cardRealtime .rt-meta{min-width:0!important;flex:1 1 auto!important;color:#e5eef9!important;font-size:11px!important;line-height:1.4!important}
  #mobilePageMap #cardRealtime #rtDate{color:#dce9f8!important;font-size:11.5px!important;line-height:1.35!important;overflow-wrap:anywhere!important}
  #mobilePageMap #cardRealtime .rt-ago{margin-top:3px!important;color:#ffb477!important;font-size:10px!important;font-weight:800!important}
  #mobilePageMap #cardRealtime .rt-coord{padding:2px 12px 5px!important;color:#a9bfd4!important;font-size:10.5px!important;font-weight:750!important;line-height:1.35!important;overflow-wrap:anywhere!important}
  #mobilePageMap #cardRealtime .rt-dist{display:none!important}
  #mobilePageMap #cardRealtime .rt-place{padding:0 12px 5px!important;color:#f0f7ff!important;font-size:11.5px!important;font-weight:850!important;line-height:1.35!important}
  #mobilePageMap #cardRealtime .rt-tsunami-status{margin:4px 10px 6px!important;width:calc(100% - 20px)!important;padding:6px 8px!important;border-radius:9px!important;font-size:9px!important;line-height:1.3!important}
  #mobilePageMap #cardRealtime .rt-src{padding:0 12px 7px!important;color:#839ab1!important;font-size:9px!important;line-height:1.3!important}
  #mobilePageMap #worldClockPanel{display:block!important;margin:0 10px 10px!important;padding:8px!important;border:1px solid rgba(36,151,207,.54)!important;border-radius:14px!important;background:linear-gradient(140deg,rgba(4,24,43,.94),rgba(5,18,33,.96))!important;box-shadow:none!important;overflow:hidden!important}
  #mobilePageMap .world-clock-head{margin:0 0 6px!important;color:#70dff4!important;font-size:8px!important;font-weight:900!important;letter-spacing:.09em!important}
  #mobilePageMap .world-clock-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.95fr)!important;gap:0!important;min-width:0!important}
  #mobilePageMap .world-clock-grid>.world-clock-time{display:flex!important;flex-direction:column!important;gap:3px!important;min-width:0!important;padding:0 6px!important;border-right:1px solid rgba(82,153,195,.27)!important}
  #mobilePageMap .world-clock-grid>.world-clock-time:first-child{padding-left:0!important}
  #mobilePageMap .world-clock-grid>.world-clock-time:nth-child(2){border-right:0!important}
  #mobilePageMap .world-clock-grid>.world-clock-param{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:3px!important;min-width:0!important;overflow:hidden!important;padding:0 0 0 7px!important;border:0!important;border-left:1px solid rgba(82,153,195,.27)!important;background:transparent!important}
  #mobilePageMap .world-clock-grid small,#mobilePageMap .world-clock-grid time{display:block!important;margin:0!important;font-size:7px!important;line-height:1.25!important;letter-spacing:0!important;overflow-wrap:anywhere!important}
  #mobilePageMap .world-clock-grid small{color:#67d8f5!important;font-weight:850!important}
  #mobilePageMap .world-clock-grid time{color:#8faecb!important}
  #mobilePageMap .world-clock-grid>.world-clock-time strong{display:block!important;color:#eaf8ff!important;font-size:13px!important;font-weight:900!important;letter-spacing:-.02em!important;line-height:1.1!important;white-space:nowrap!important}
  #mobilePageMap .world-clock-grid>.world-clock-param strong{display:block!important;color:#f7fbff!important;font-size:16px!important;font-weight:950!important;line-height:1.05!important}
  #mobilePageMap #rtParamDepth{color:#a9c3dc!important;font-size:8px!important;line-height:1.2!important;overflow-wrap:anywhere!important}
  #mobilePageMap .rt-param-revision{display:-webkit-box!important;max-width:100%!important;color:#86a7c4!important;font-size:6px!important;font-weight:750!important;line-height:1.2!important;overflow:hidden!important;overflow-wrap:anywhere!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important}
  #mobilePageMap .rt-param-revision.is-revision-small{color:#70dffa!important}
  #mobilePageMap .rt-param-revision.is-revision-large{color:#ff7f8b!important}
  
  #mobilePageMap .wrs-mobile-map-quicktools,#mobilePageMap .wrs-mobile-map-quicktools *{box-sizing:border-box!important}
  #mobilePageMap .wrs-mobile-map-quicktools{position:fixed!important;right:10px!important;bottom:calc(226px + env(safe-area-inset-bottom,0px))!important;z-index:32!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:9px!important;width:54px!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;pointer-events:auto!important}
  #mobilePageMap .wrs-mobile-map-quicktools>button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;width:42px!important;min-width:42px!important;height:49px!important;min-height:49px!important;padding:5px 0!important;border:1px solid rgba(78,176,225,.42)!important;border-radius:13px!important;background:rgba(4,18,33,.94)!important;color:#ddecff!important;box-shadow:0 8px 20px rgba(0,0,0,.32)!important;backdrop-filter:blur(13px)!important}
  #mobilePageMap .wrs-mobile-map-quicktools>button svg{width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  #mobilePageMap .wrs-mobile-map-quicktools>button span{color:#d4e4f7!important;font-size:7px!important;line-height:1.1!important;white-space:nowrap!important}
  #mobilePageMap .wrs-mobile-zoom-stack{display:flex!important;flex-direction:column!important;overflow:hidden!important;width:40px!important;border:1px solid rgba(78,176,225,.42)!important;border-radius:13px!important;background:rgba(4,18,33,.95)!important;box-shadow:0 8px 20px rgba(0,0,0,.32)!important}
  #mobilePageMap .wrs-mobile-zoom-stack button{display:grid!important;place-items:center!important;width:38px!important;height:34px!important;min-height:34px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#edf8ff!important;font-size:22px!important;font-weight:500!important}
  #mobilePageMap .wrs-mobile-zoom-stack button+button{border-top:1px solid rgba(116,172,209,.22)!important}
  
  #mobilePageMap .map-stats{position:fixed!important;left:10px!important;right:10px!important;bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;transform:none!important;z-index:40!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:stretch!important;width:auto!important;max-width:none!important;min-width:0!important;padding:8px!important;gap:6px!important;border:1px solid rgba(64,164,218,.42)!important;border-radius:19px!important;background:rgba(4,17,31,.94)!important;box-shadow:0 12px 30px rgba(0,0,0,.4)!important;backdrop-filter:blur(17px)!important;overflow:hidden!important}
  #mobilePageMap .map-stats-toggle{grid-column:1/-1!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-height:17px!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;color:#9cb8d1!important;font-size:8px!important;font-weight:850!important;letter-spacing:.06em!important}
  #mobilePageMap .stats-toggle-chevron{color:#61d7f5!important;font-size:12px!important;line-height:1!important}
  #mobilePageMap .map-stats .stat-btn{display:grid!important;grid-template-columns:22px minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;align-items:center!important;justify-content:stretch!important;gap:1px 4px!important;min-width:0!important;min-height:60px!important;padding:6px 5px!important;margin:0!important;overflow:hidden!important;border:1px solid rgba(63,113,158,.25)!important;border-radius:12px!important;background:linear-gradient(145deg,rgba(14,39,62,.96),rgba(7,23,40,.96))!important;color:#e3f2ff!important;text-align:left!important;box-shadow:none!important}
  #mobilePageMap .map-stats .stat-btn.stat-tsunami{border-color:rgba(208,65,88,.32)!important;background:linear-gradient(145deg,rgba(56,23,40,.92),rgba(25,15,29,.97))!important}
  #mobilePageMap .map-stats.is-collapsed .wrs-mobile-mag-filters{display:none!important}
  #mobilePageMap .wrs-stat-icon{grid-column:1!important;grid-row:1/4!important;display:grid!important;place-items:center!important;align-self:start!important;width:22px!important;height:22px!important;border-radius:50%!important;background:rgba(20,152,221,.17)!important;color:#3dc5ff!important}
  #mobilePageMap .stat-btn[data-stat="strong"] .wrs-stat-icon{background:rgba(245,176,45,.15)!important;color:#ffc23c!important}
  #mobilePageMap .stat-btn[data-stat="tsunami"] .wrs-stat-icon{background:rgba(249,63,87,.16)!important;color:#ff5368!important}
  #mobilePageMap .wrs-stat-icon svg{display:block!important;width:19px!important;height:19px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  #mobilePageMap .map-stats .stat-btn b{grid-column:2!important;grid-row:1!important;display:block!important;font-size:15px!important;font-weight:950!important;line-height:1.1!important}
  #mobilePageMap .map-stats .stat-btn span:not(.wrs-stat-icon){grid-column:2!important;grid-row:2!important;display:block!important;margin:1px 0 0!important;color:#a9c3dc!important;font-size:7px!important;font-weight:850!important;line-height:1.2!important;letter-spacing:.02em!important;white-space:nowrap!important}
  #mobilePageMap .map-stats .stat-btn .wrs-stat-extra{grid-column:2!important;grid-row:3!important;display:block!important;margin:1px 0 0!important;color:#7f9ab5!important;font-size:6px!important;font-weight:650!important;line-height:1.1!important;white-space:normal!important}
  #mobilePageMap .wrs-mobile-mag-filters{grid-column:1/-1!important;display:flex!important;align-items:center!important;gap:5px!important;width:100%!important;min-width:0!important;padding:1px 0 0!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;overscroll-behavior-x:contain!important}
  #mobilePageMap .wrs-mobile-mag-filters::-webkit-scrollbar{display:none!important}
  #mobilePageMap .wrs-mag-filter-chip{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;flex:0 0 auto!important;min-width:55px!important;min-height:27px!important;padding:5px 7px!important;border:1px solid rgba(67,118,163,.28)!important;border-radius:10px!important;background:rgba(9,28,48,.94)!important;color:#c8d9ee!important;font-size:8px!important;font-weight:850!important;line-height:1!important;white-space:nowrap!important}
  #mobilePageMap .wrs-mag-filter-chip.is-active{border-color:#19c8f1!important;background:linear-gradient(135deg,rgba(11,91,126,.56),rgba(8,43,70,.92))!important;color:#f2fbff!important}
  #mobilePageMap .wrs-mag-filter-chip i{display:inline-block!important;flex:0 0 8px!important;width:8px!important;height:8px!important;border:1px solid rgba(255,255,255,.55)!important;border-radius:50%!important;background:#fa304c!important}
  #mobilePageMap .wrs-mag-filter-chip .all-dot{background:linear-gradient(135deg,#10c2ee,#67d4ff)!important;border:0!important;border-radius:2px!important}
  #mobilePageMap .wrs-mag-filter-chip .mag-orange{background:#fa7d32!important}
  #mobilePageMap .wrs-mag-filter-chip .mag-yellow{background:#ffd12e!important}
  #mobilePageMap .wrs-mag-filter-chip .mag-blue{background:#3297f6!important}
  #mobilePageMap .wrs-mag-filter-chip .mag-grey{background:#92a8c2!important}
  #mobilePageMap #vToolbar{position:fixed!important;top:calc(62px + env(safe-area-inset-top,0px))!important;right:8px!important;left:auto!important;bottom:auto!important;z-index:34!important;display:flex!important;flex-direction:column!important;gap:5px!important}
  #mobilePageMap #vToolbar .tb-rail-toggle{display:none!important}
  #mobilePageMap #vToolbar.is-collapsed{width:0!important;min-width:0!important;height:0!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
  #mobilePageMap #vToolbar.is-collapsed .tb-btn:not(#tbRailToggle){display:none!important}
  #mobilePageMap #vToolbar:not(.is-collapsed) .tb-btn{width:39px!important;height:39px!important;min-width:39px!important;min-height:39px!important}
}
@media(max-width:430px){
  #mobilePageMap .wrs-mobile-live-header{left:8px!important;right:8px!important;gap:4px!important}
  #mobilePageMap .wrs-mobile-brand{gap:5px!important}
  #mobilePageMap .wrs-mobile-brand img{flex-basis:33px!important;width:33px!important;height:33px!important}
  #mobilePageMap .wrs-mobile-brand-copy strong{font-size:13px!important}
  #mobilePageMap .wrs-mobile-brand-copy small{font-size:5.5px!important;letter-spacing:.035em!important}
  #mobilePageMap .wrs-mobile-connection{max-width:98px!important;padding:6px!important;gap:4px!important}
  #mobilePageMap .wrs-mobile-connection-copy strong{font-size:7px!important}
  #mobilePageMap .wrs-mobile-connection-copy small{display:none!important}
  #mobilePageMap .wrs-mobile-connection-led{flex-basis:8px!important;width:8px!important;height:8px!important}
  #mobilePageMap #mobileNotificationBtn,#mobilePageMap .wrs-header-icon{flex-basis:32px!important;width:32px!important;min-width:32px!important;height:34px!important;min-height:34px!important;border-radius:11px!important}
  #mobilePageMap #mobileNotificationBtn svg,#mobilePageMap .wrs-header-icon svg{width:18px!important;height:18px!important}
  #mobilePageMap .left-top{top:calc(55px + env(safe-area-inset-top,0px))!important;left:8px!important;right:8px!important;max-height:min(440px,calc(100dvh - 268px - env(safe-area-inset-bottom,0px)))!important}
  #mobilePageMap #cardRealtime .rt-row{padding:7px 10px 6px!important}
  #mobilePageMap #cardRealtime .rt-mag{flex-basis:54px!important;width:54px!important;height:54px!important;font-size:23px!important}
  #mobilePageMap #cardRealtime .panel-sub{padding-left:10px!important;padding-right:10px!important}
  #mobilePageMap #cardRealtime .rt-coord,#mobilePageMap #cardRealtime .rt-place{padding-left:10px!important;padding-right:10px!important}
  #mobilePageMap #worldClockPanel{margin-left:8px!important;margin-right:8px!important}
  #mobilePageMap .map-stats{left:8px!important;right:8px!important;bottom:calc(74px + env(safe-area-inset-bottom,0px))!important;padding:7px!important;gap:5px!important}
  #mobilePageMap .map-stats .stat-btn{grid-template-columns:18px minmax(0,1fr)!important;min-height:56px!important;padding:5px 3px!important;gap:1px 3px!important}
  #mobilePageMap .wrs-stat-icon{width:20px!important;height:20px!important}
  #mobilePageMap .wrs-stat-icon svg{width:17px!important;height:17px!important}
  #mobilePageMap .map-stats .stat-btn b{font-size:14.5px!important}
  #mobilePageMap .map-stats .stat-btn span:not(.wrs-stat-icon){font-size:7.5px!important}
  #mobilePageMap .map-stats .stat-btn .wrs-stat-extra{font-size:6px!important}
  #mobilePageMap .wrs-mag-filter-chip{min-width:55px!important;padding:5px 6px!important;font-size:8px!important}
  #mobilePageMap .wrs-mobile-map-quicktools{right:8px!important;bottom:calc(205px + env(safe-area-inset-bottom,0px))!important}
}
@media(max-width:360px){
  #mobilePageMap .wrs-mobile-brand-copy small{display:none!important}
  #mobilePageMap .wrs-mobile-connection{max-width:88px!important}
  #mobilePageMap #mobileNotificationBtn,#mobilePageMap .wrs-header-icon{flex-basis:29px!important;width:29px!important;min-width:29px!important}
  #mobilePageMap .wrs-mobile-map-quicktools{bottom:calc(190px + env(safe-area-inset-bottom,0px))!important}
}
@media(prefers-reduced-motion:reduce){
  #mobilePageMap .wrs-mobile-connection-led{box-shadow:none!important}
  #mobilePageMap .wrs-mobile-map-quicktools button{transition:none!important}
}


/* Mobile compact mode: prioritize more visible satellite map without hiding seismic data. */
@media (max-width: 1200px) {
  #mobilePageMap .left-top {
    top: calc(52px + env(safe-area-inset-top,0px)) !important;
    max-height: min(400px, calc(100dvh - 240px - env(safe-area-inset-bottom,0px))) !important;
    border-radius: 18px !important;
  }
  #mobilePageMap #cardRealtime .panel-header {
    min-height: 34px !important;
    padding: 7px 11px !important;
    gap: 7px !important;
    font-size: 10px !important;
    letter-spacing: .11em !important;
  }
  #mobilePageMap #cardRealtime .panel-sub {
    padding: 5px 10px 1px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
  }
  #mobilePageMap #cardRealtime .rt-row {
    gap: 8px !important;
    padding: 5px 10px 4px !important;
  }
  #mobilePageMap #cardRealtime .rt-mag {
    flex-basis: 48px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 13px !important;
    font-size: 21px !important;
  }
  #mobilePageMap #cardRealtime .rt-meta { font-size: 10px !important; line-height: 1.25 !important; }
  #mobilePageMap #cardRealtime #rtDate { font-size: 10.5px !important; line-height: 1.25 !important; }
  #mobilePageMap #cardRealtime .rt-ago { margin-top: 2px !important; font-size: 9px !important; }
  #mobilePageMap #cardRealtime .rt-coord {
    padding: 1px 10px 4px !important;
    font-size: 9.5px !important;
    line-height: 1.25 !important;
  }
  #mobilePageMap #cardRealtime .rt-place {
    padding: 0 10px 3px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }
  #mobilePageMap #cardRealtime .rt-tsunami-status {
    margin: 3px 8px 4px !important;
    width: calc(100% - 16px) !important;
    padding: 4px 7px !important;
    gap: 5px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
  }
  #mobilePageMap #cardRealtime .rt-tsunami-indicator { min-width: 12px !important; font-size: 12px !important; }
  #mobilePageMap #cardRealtime .rt-src {
    padding: 0 10px 5px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
  }
  #mobilePageMap #worldClockPanel {
    margin: 0 8px 7px !important;
    padding: 6px !important;
    border-radius: 12px !important;
  }
  #mobilePageMap .world-clock-head {
    margin: 0 0 4px !important;
    font-size: 7.5px !important;
  }
  #mobilePageMap .world-clock-grid > .world-clock-time { gap: 2px !important; padding: 0 5px !important; }
  #mobilePageMap .world-clock-grid > .world-clock-time:first-child { padding-left: 0 !important; }
  #mobilePageMap .world-clock-grid small,
  #mobilePageMap .world-clock-grid time { font-size: 6.5px !important; line-height: 1.15 !important; }
  #mobilePageMap .world-clock-grid > .world-clock-time strong { font-size: 12px !important; line-height: 1.05 !important; }
  #mobilePageMap .world-clock-grid > .world-clock-param { gap: 2px !important; padding-left: 6px !important; }
  #mobilePageMap .world-clock-grid > .world-clock-param strong { font-size: 14px !important; line-height: 1.02 !important; }
  #mobilePageMap #rtParamDepth { font-size: 7px !important; line-height: 1.15 !important; }
  #mobilePageMap .rt-param-revision { font-size: 5.5px !important; line-height: 1.1 !important; -webkit-line-clamp: 1 !important; }
  
  #mobilePageMap .map-stats {
    bottom: calc(72px + env(safe-area-inset-bottom,0px)) !important;
    padding: 5px !important;
    gap: 4px !important;
    border-radius: 16px !important;
  }
  #mobilePageMap .map-stats-toggle { min-height: 13px !important; font-size: 7px !important; }
  #mobilePageMap .map-stats .stat-btn {
    min-height: 48px !important;
    padding: 4px !important;
    grid-template-columns: 19px minmax(0,1fr) !important;
    gap: 1px 3px !important;
    border-radius: 10px !important;
  }
  #mobilePageMap .wrs-stat-icon { width: 19px !important; height: 19px !important; }
  #mobilePageMap .wrs-stat-icon svg { width: 16px !important; height: 16px !important; }
  #mobilePageMap .map-stats .stat-btn b { font-size: 13px !important; }
  #mobilePageMap .map-stats .stat-btn span:not(.wrs-stat-icon) { font-size: 6.5px !important; }
  #mobilePageMap .map-stats .stat-btn .wrs-stat-extra { font-size: 5.5px !important; }
  #mobilePageMap .wrs-mag-filter-chip { min-height: 23px !important; padding: 4px 6px !important; font-size: 7px !important; }
}
@media (max-width: 430px) {
  #mobilePageMap .left-top {
    top: calc(48px + env(safe-area-inset-top,0px)) !important;
    left: 7px !important; right: 7px !important;
    max-height: min(385px, calc(100dvh - 224px - env(safe-area-inset-bottom,0px))) !important;
  }
  #mobilePageMap #cardRealtime .rt-mag { flex-basis: 46px !important; width: 46px !important; height: 46px !important; font-size: 20px !important; }
  #mobilePageMap #cardRealtime .rt-row { padding: 4px 9px 3px !important; }
  #mobilePageMap #cardRealtime .panel-sub { padding-left: 9px !important; padding-right: 9px !important; }
  #mobilePageMap #cardRealtime .rt-coord,
  #mobilePageMap #cardRealtime .rt-place { padding-left: 9px !important; padding-right: 9px !important; }
  #mobilePageMap #worldClockPanel { margin-left: 7px !important; margin-right: 7px !important; padding: 5px !important; }
  #mobilePageMap .map-stats { left: 7px !important; right: 7px !important; bottom: calc(70px + env(safe-area-inset-bottom,0px)) !important; padding: 5px !important; gap: 4px !important; }
  #mobilePageMap .map-stats .stat-btn { grid-template-columns: 17px minmax(0,1fr) !important; min-height: 45px !important; padding: 3px !important; }
  #mobilePageMap .wrs-stat-icon { width: 17px !important; height: 17px !important; }
  #mobilePageMap .wrs-stat-icon svg { width: 14px !important; height: 14px !important; }
  #mobilePageMap .map-stats .stat-btn b { font-size: 12px !important; }
  #mobilePageMap .map-stats .stat-btn span:not(.wrs-stat-icon) { font-size: 6px !important; }
  #mobilePageMap .map-stats .stat-btn .wrs-stat-extra { font-size: 5px !important; }
  #mobilePageMap .wrs-mobile-map-quicktools { bottom: calc(190px + env(safe-area-inset-bottom,0px)) !important; }
}


/* OPTION 1 — focused map home: compact event card, expandable parameters, slim stats shelf. */
@media (max-width: 1200px) {
  #mobilePageMap #cardRealtime .panel-header {
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;
    min-height:34px!important;padding:7px 10px!important;
  }
  #mobilePageMap #cardRealtime .panel-header-title {
    display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;
    color:#e7f7ff!important;font-size:10px!important;font-weight:900!important;letter-spacing:.1em!important;
  }
  #mobilePageMap #cardRealtime .panel-sub { display:none!important; }
  #mobilePageMap #cardRealtime .rt-filter { display:none!important; }
  #mobilePageMap #cardRealtime .rt-details-toggle {
    display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:2px!important;
    flex:0 0 auto!important;min-width:53px!important;height:24px!important;min-height:24px!important;
    padding:3px 6px!important;margin:0!important;border:1px solid rgba(51,190,232,.32)!important;
    border-radius:8px!important;background:rgba(9,48,71,.72)!important;color:#80e5fb!important;
    font:800 8px/1 system-ui,sans-serif!important;letter-spacing:.04em!important;box-shadow:none!important;
  }
  #mobilePageMap #cardRealtime .rt-details-toggle svg {
    display:block!important;width:12px!important;height:12px!important;fill:none!important;stroke:currentColor!important;
    stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;transition:transform .18s ease!important;
  }
  #mobilePageMap #cardRealtime .rt-details-toggle.is-expanded svg { transform:rotate(180deg)!important; }
  /* Hide the extended clock/parameter block by default; the button opens it on demand. */
  #mobilePageMap #cardRealtime #worldClockPanel { display:none!important; }
  #mobilePageMap #cardRealtime.details-expanded #worldClockPanel { display:block!important; }
  #mobilePageMap #cardRealtime .rt-row { padding:5px 10px 3px!important;gap:8px!important; }
  #mobilePageMap #cardRealtime .rt-mag { flex-basis:47px!important;width:47px!important;height:47px!important;font-size:21px!important;border-radius:12px!important; }
  #mobilePageMap #cardRealtime .rt-meta { font-size:10px!important;line-height:1.25!important; }
  #mobilePageMap #cardRealtime #rtDate { font-size:10.5px!important;line-height:1.25!important; }
  #mobilePageMap #cardRealtime .rt-ago { font-size:9px!important;margin-top:2px!important; }
  #mobilePageMap #cardRealtime .rt-coord { padding:1px 10px 3px!important;font-size:9px!important;line-height:1.2!important; }
  #mobilePageMap #cardRealtime .rt-place { padding:0 10px 3px!important;font-size:10.5px!important;line-height:1.2!important; }
  #mobilePageMap #cardRealtime .rt-tsunami-status {
    margin:3px 8px 4px!important;width:calc(100% - 16px)!important;padding:4px 7px!important;
    gap:5px!important;border-radius:8px!important;font-size:8px!important;line-height:1.2!important;
  }
  #mobilePageMap #cardRealtime .rt-src { padding:0 10px 5px!important;font-size:8px!important;line-height:1.15!important; }
  #mobilePageMap .map-stats.is-collapsed .wrs-mobile-mag-filters { display:none!important; }
  #mobilePageMap .map-stats:not(.is-collapsed) .wrs-mobile-mag-filters { display:flex!important; }
  #mobilePageMap .map-stats-toggle { min-height:14px!important;font-size:7px!important;letter-spacing:.07em!important; }
  #mobilePageMap .map-stats.is-collapsed { padding-bottom:5px!important; }
  #mobilePageMap .map-stats.is-collapsed .stat-btn { min-height:42px!important; }
  #mobilePageMap .map-stats.is-collapsed .wrs-stat-extra { display:none!important; }
  #mobilePageMap .map-stats.is-collapsed .stat-btn { grid-template-rows:auto auto!important; }
}
@media (min-width: 1201px) {
  #cardRealtime .rt-details-toggle { display:none!important; }
}
@media (max-width: 430px) {
  #mobilePageMap .left-top { top:calc(52px + env(safe-area-inset-top,0px))!important;left:7px!important;right:7px!important;max-height:min(360px,calc(100dvh - 210px - env(safe-area-inset-bottom,0px)))!important; }
  #mobilePageMap #cardRealtime .panel-header { min-height:32px!important;padding:6px 9px!important; }
  #mobilePageMap #cardRealtime .panel-header-title { font-size:9px!important;letter-spacing:.085em!important;gap:6px!important; }
  #mobilePageMap #cardRealtime .rt-details-toggle { min-width:49px!important;height:22px!important;min-height:22px!important;font-size:7px!important; }
  #mobilePageMap #cardRealtime .rt-mag { flex-basis:44px!important;width:44px!important;height:44px!important;font-size:20px!important; }
  #mobilePageMap #cardRealtime .rt-row { padding:4px 9px 3px!important; }
  #mobilePageMap #cardRealtime .rt-coord,#mobilePageMap #cardRealtime .rt-place { padding-left:9px!important;padding-right:9px!important; }
  #mobilePageMap #cardRealtime .rt-tsunami-status { margin:3px 7px 4px!important;width:calc(100% - 14px)!important;font-size:7.5px!important; }
  #mobilePageMap #cardRealtime .rt-src { padding-left:9px!important;padding-right:9px!important; }
  #mobilePageMap .map-stats.is-collapsed .stat-btn { min-height:39px!important; }
  #mobilePageMap .map-stats.is-collapsed .map-stats-toggle { min-height:12px!important; }
}


/* Statistics stay visible on map-focus home; only magnitude chips collapse. */
@media (max-width: 1200px) {
  #mobilePageMap .map-stats.filters-collapsed .wrs-mobile-mag-filters { display:none!important; }
  #mobilePageMap .map-stats:not(.filters-collapsed) .wrs-mobile-mag-filters { display:flex!important; }
  #mobilePageMap .map-stats.filters-collapsed .stat-btn { display:grid!important; }
  #mobilePageMap .map-stats.filters-collapsed { padding:5px!important; }
  #mobilePageMap .map-stats.filters-collapsed .stat-btn { min-height:39px!important; }
  #mobilePageMap .map-stats.filters-collapsed .wrs-stat-extra { display:none!important; }
}


/* Restore the realtime catalog card to the user's reference layout. */
@media (max-width: 1200px) {
  #mobilePageMap .left-top {
    position:fixed!important;top:calc(56px + env(safe-area-inset-top,0px))!important;
    left:8px!important;right:8px!important;width:auto!important;max-width:none!important;
    max-height:min(440px,calc(100dvh - 245px - env(safe-area-inset-bottom,0px)))!important;
    overflow-x:hidden!important;overflow-y:auto!important;border-radius:22px!important;
  }
  #mobilePageMap #cardRealtime .panel-header {
    display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;
    min-height:44px!important;padding:11px 14px!important;
    border-bottom:1px solid rgba(91,176,218,.28)!important;
    background:linear-gradient(105deg,rgba(18,54,77,.97),rgba(7,24,40,.97))!important;
    color:#e8f7ff!important;font-size:11px!important;font-weight:900!important;
    letter-spacing:.14em!important;line-height:1.25!important;
  }
  #mobilePageMap #cardRealtime .panel-header .pulse-dot { flex:0 0 8px!important;width:8px!important;height:8px!important; }
  #mobilePageMap #cardRealtime .rt-details-toggle { display:none!important; }
  #mobilePageMap #cardRealtime .panel-sub {
    display:block!important;margin:0!important;padding:9px 14px 2px!important;
    color:#aabfd2!important;font-size:10px!important;line-height:1.3!important;
  }
  #mobilePageMap #cardRealtime .rt-filter {
    display:block!important;margin:0!important;padding:0 14px 4px!important;
    color:#809ab3!important;font-size:9px!important;line-height:1.25!important;letter-spacing:.035em!important;
  }
  #mobilePageMap #cardRealtime .rt-row { display:flex!important;align-items:center!important;gap:11px!important;padding:7px 12px!important; }
  #mobilePageMap #cardRealtime .rt-mag {
    display:grid!important;place-items:center!important;flex:0 0 62px!important;width:62px!important;height:62px!important;
    border-radius:16px!important;font-size:27px!important;font-weight:950!important;line-height:1!important;
  }
  #mobilePageMap #cardRealtime .rt-meta { flex:1 1 auto!important;min-width:0!important;color:#e7f1fb!important;font-size:12px!important;line-height:1.35!important; }
  #mobilePageMap #cardRealtime #rtDate { color:#e4eef9!important;font-size:12px!important;line-height:1.35!important;overflow-wrap:anywhere!important; }
  #mobilePageMap #cardRealtime .rt-ago { margin-top:3px!important;color:#ffb477!important;font-size:10px!important;font-weight:850!important;line-height:1.3!important; }
  #mobilePageMap #cardRealtime .rt-coord { padding:2px 13px 5px!important;color:#afc4d9!important;font-size:10.5px!important;font-weight:750!important;line-height:1.35!important;overflow-wrap:anywhere!important; }
  #mobilePageMap #cardRealtime .rt-dist { display:none!important; }
  #mobilePageMap #cardRealtime .rt-place { padding:0 13px 6px!important;color:#f2f7ff!important;font-size:12px!important;font-weight:850!important;line-height:1.35!important;overflow-wrap:anywhere!important; }
  #mobilePageMap #cardRealtime .rt-tsunami-status {
    display:flex!important;align-items:center!important;gap:6px!important;
    margin:2px 11px 5px!important;width:calc(100% - 22px)!important;padding:5px 8px!important;
    border-radius:9px!important;font-size:8.5px!important;font-weight:800!important;line-height:1.3!important;
  }
  #mobilePageMap #cardRealtime .rt-src { padding:0 13px 7px!important;color:#8fa5ba!important;font-size:9px!important;line-height:1.25!important; }
  #mobilePageMap #cardRealtime #worldClockPanel {
    display:block!important;margin:0 10px 10px!important;padding:8px 9px!important;
    border:1px solid rgba(37,156,209,.66)!important;border-radius:16px!important;
    background:linear-gradient(145deg,rgba(4,25,44,.97),rgba(5,19,34,.97))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.035)!important;overflow:hidden!important;
  }
  #mobilePageMap #cardRealtime #worldClockContent { display:block!important; }
  #mobilePageMap #cardRealtime #worldClockRevision { display:none!important; }
  #mobilePageMap .world-clock-head {
    display:flex!important;align-items:center!important;gap:7px!important;margin:0 0 7px!important;
    color:#69def5!important;font-size:10px!important;font-weight:900!important;letter-spacing:.12em!important;
  }
  #mobilePageMap .world-clock-grid {
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:0!important;min-width:0!important;
  }
  #mobilePageMap .world-clock-grid>.world-clock-time {
    display:flex!important;flex-direction:column!important;gap:3px!important;min-width:0!important;padding:2px 9px!important;
    border-right:1px solid rgba(91,157,194,.28)!important;
  }
  #mobilePageMap .world-clock-grid>.world-clock-time:first-child { padding-left:1px!important; }
  #mobilePageMap .world-clock-grid>.world-clock-time:nth-child(2) { border-right:0!important; }
  #mobilePageMap .world-clock-grid>.world-clock-param {
    grid-column:1/-1!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;
    align-items:center!important;justify-content:flex-start!important;gap:4px 9px!important;
    min-width:0!important;margin-top:7px!important;padding:7px 1px 1px!important;
    border:0!important;border-top:1px solid rgba(91,157,194,.23)!important;background:transparent!important;overflow:hidden!important;
  }
  #mobilePageMap .world-clock-grid>.world-clock-time small,
  #mobilePageMap .world-clock-grid>.world-clock-param small {
    display:block!important;margin:0!important;color:#65d9f4!important;font-size:8px!important;
    font-weight:850!important;letter-spacing:.04em!important;line-height:1.25!important;overflow-wrap:anywhere!important;
  }
  #mobilePageMap .world-clock-grid>.world-clock-time strong {
    display:block!important;margin:0!important;color:#eaf8ff!important;font-size:17px!important;
    font-weight:900!important;letter-spacing:-.02em!important;line-height:1.15!important;white-space:nowrap!important;
  }
  #mobilePageMap .world-clock-grid>.world-clock-time time {
    display:block!important;color:#91acc5!important;font-size:9px!important;line-height:1.3!important;overflow-wrap:anywhere!important;
  }
  #mobilePageMap .world-clock-grid>.world-clock-param strong { display:inline-block!important;color:#f5fbff!important;font-size:12px!important;font-weight:900!important;line-height:1.2!important; }
  #mobilePageMap #rtParamDepth { color:#b4cbe0!important;font-size:9px!important;line-height:1.25!important; }
  #mobilePageMap .rt-param-revision { display:inline!important;max-width:100%!important;color:#8daac4!important;font-size:8px!important;font-weight:750!important;line-height:1.25!important;overflow-wrap:anywhere!important; }
}
@media (max-width: 430px) {
  #mobilePageMap .left-top { top:calc(52px + env(safe-area-inset-top,0px))!important;left:7px!important;right:7px!important;max-height:min(450px,calc(100dvh - 225px - env(safe-area-inset-bottom,0px)))!important; }
  #mobilePageMap #cardRealtime .panel-header { min-height:40px!important;padding:10px 11px!important; }
  #mobilePageMap #cardRealtime .panel-sub { padding:7px 11px 2px!important;font-size:9px!important; }
  #mobilePageMap #cardRealtime .rt-filter { padding:0 11px 4px!important;font-size:8px!important; }
  #mobilePageMap #cardRealtime .rt-row { gap:9px!important;padding:6px 10px!important; }
  #mobilePageMap #cardRealtime .rt-mag { flex-basis:56px!important;width:56px!important;height:56px!important;font-size:25px!important;border-radius:14px!important; }
  #mobilePageMap #cardRealtime .rt-meta,#mobilePageMap #cardRealtime #rtDate { font-size:11px!important; }
  #mobilePageMap #cardRealtime .rt-ago { font-size:9px!important; }
  #mobilePageMap #cardRealtime .rt-coord { padding:1px 11px 4px!important;font-size:9.5px!important; }
  #mobilePageMap #cardRealtime .rt-place { padding:0 11px 5px!important;font-size:11px!important; }
  #mobilePageMap #cardRealtime .rt-tsunami-status { margin:2px 8px 4px!important;width:calc(100% - 16px)!important;font-size:8px!important; }
  #mobilePageMap #cardRealtime .rt-src { padding:0 11px 6px!important;font-size:8px!important; }
  #mobilePageMap #cardRealtime #worldClockPanel { margin:0 8px 8px!important;padding:7px!important; }
  #mobilePageMap .world-clock-head { font-size:9px!important;margin-bottom:6px!important; }
  #mobilePageMap .world-clock-grid>.world-clock-time { padding:2px 7px!important; }
  #mobilePageMap .world-clock-grid>.world-clock-time:first-child { padding-left:1px!important; }
  #mobilePageMap .world-clock-grid>.world-clock-time strong { font-size:15px!important; }
  #mobilePageMap .world-clock-grid>.world-clock-time small { font-size:7px!important; }
  #mobilePageMap .world-clock-grid>.world-clock-time time { font-size:8px!important; }
}


/* Compact floating realtime catalog: preserve contents while returning map area. */
@media (max-width: 1200px) {
  #mobilePageMap .left-top {
    position: fixed !important;
    top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    left: 12px !important;
    right: auto !important;
    width: min(440px, calc(100vw - 24px)) !important;
    max-width: 440px !important;
    max-height: min(390px, calc(100dvh - 250px - env(safe-area-inset-bottom, 0px))) !important;
    border-radius: 19px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  #mobilePageMap #cardRealtime .panel-header {
    min-height: 37px !important;
    padding: 8px 11px !important;
    gap: 8px !important;
    font-size: 10px !important;
    letter-spacing: .11em !important;
  }
  #mobilePageMap #cardRealtime .panel-sub {
    padding: 6px 11px 1px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }
  #mobilePageMap #cardRealtime .rt-filter {
    padding: 0 11px 2px !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
  }
  #mobilePageMap #cardRealtime .rt-row {
    gap: 8px !important;
    padding: 4px 10px 3px !important;
  }
  #mobilePageMap #cardRealtime .rt-mag {
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 13px !important;
    font-size: 23px !important;
  }
  #mobilePageMap #cardRealtime .rt-meta,
  #mobilePageMap #cardRealtime #rtDate {
    font-size: 10.5px !important;
    line-height: 1.23 !important;
  }
  #mobilePageMap #cardRealtime .rt-ago {
    margin-top: 2px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }
  #mobilePageMap #cardRealtime .rt-coord {
    padding: 1px 11px 3px !important;
    font-size: 9.5px !important;
    line-height: 1.22 !important;
  }
  #mobilePageMap #cardRealtime .rt-place {
    padding: 0 11px 4px !important;
    font-size: 11px !important;
    line-height: 1.24 !important;
  }
  #mobilePageMap #cardRealtime .rt-tsunami-status {
    margin: 2px 9px 4px !important;
    width: calc(100% - 18px) !important;
    padding: 4px 7px !important;
    gap: 5px !important;
    border-radius: 8px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
  }
  #mobilePageMap #cardRealtime .rt-tsunami-indicator {
    min-width: 12px !important;
    font-size: 12px !important;
  }
  #mobilePageMap #cardRealtime .rt-src {
    padding: 0 11px 5px !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
  }
  #mobilePageMap #cardRealtime #worldClockPanel {
    margin: 0 8px 8px !important;
    padding: 6px 7px !important;
    border-radius: 13px !important;
  }
  #mobilePageMap .world-clock-head {
    margin: 0 0 5px !important;
    font-size: 9px !important;
    letter-spacing: .1em !important;
  }
  #mobilePageMap .world-clock-grid > .world-clock-time {
    gap: 2px !important;
    padding: 1px 7px !important;
  }
  #mobilePageMap .world-clock-grid > .world-clock-time:first-child {
    padding-left: 1px !important;
  }
  #mobilePageMap .world-clock-grid > .world-clock-time small {
    font-size: 7px !important;
    line-height: 1.15 !important;
  }
  #mobilePageMap .world-clock-grid > .world-clock-time strong {
    font-size: 15px !important;
    line-height: 1.07 !important;
  }
  #mobilePageMap .world-clock-grid > .world-clock-time time {
    font-size: 8px !important;
    line-height: 1.2 !important;
  }
  #mobilePageMap .world-clock-grid > .world-clock-param {
    gap: 3px 7px !important;
    margin-top: 5px !important;
    padding: 5px 1px 0 !important;
  }
  #mobilePageMap .world-clock-grid > .world-clock-param small {
    font-size: 7px !important;
    line-height: 1.15 !important;
  }
  #mobilePageMap .world-clock-grid > .world-clock-param strong {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }
  #mobilePageMap #rtParamDepth {
    font-size: 8px !important;
    line-height: 1.15 !important;
  }
  #mobilePageMap .rt-param-revision {
    font-size: 7px !important;
    line-height: 1.15 !important;
  }
}
@media (max-width: 430px) {
  #mobilePageMap .left-top {
    top: calc(52px + env(safe-area-inset-top, 0px)) !important;
    left: 7px !important;
    width: min(440px, calc(100vw - 14px)) !important;
    max-width: 440px !important;
    max-height: min(385px, calc(100dvh - 220px - env(safe-area-inset-bottom, 0px))) !important;
  }
  #mobilePageMap #cardRealtime .panel-header {
    min-height: 35px !important;
    padding: 7px 9px !important;
    font-size: 9px !important;
    letter-spacing: .09em !important;
  }
  #mobilePageMap #cardRealtime .panel-sub { padding: 5px 9px 1px !important; font-size: 8px !important; }
  #mobilePageMap #cardRealtime .rt-filter { padding: 0 9px 2px !important; font-size: 7px !important; }
  #mobilePageMap #cardRealtime .rt-row { padding: 4px 8px 3px !important; gap: 7px !important; }
  #mobilePageMap #cardRealtime .rt-mag {
    flex-basis: 48px !important; width: 48px !important; height: 48px !important;
    font-size: 21px !important; border-radius: 12px !important;
  }
  #mobilePageMap #cardRealtime .rt-meta,
  #mobilePageMap #cardRealtime #rtDate { font-size: 10px !important; }
  #mobilePageMap #cardRealtime .rt-coord { padding: 1px 9px 3px !important; font-size: 9px !important; }
  #mobilePageMap #cardRealtime .rt-place { padding: 0 9px 4px !important; font-size: 10px !important; }
  #mobilePageMap #cardRealtime .rt-tsunami-status {
    margin: 2px 7px 4px !important; width: calc(100% - 14px) !important; font-size: 7.5px !important;
  }
  #mobilePageMap #cardRealtime .rt-src { padding: 0 9px 5px !important; font-size: 7.5px !important; }
  #mobilePageMap #cardRealtime #worldClockPanel { margin: 0 7px 7px !important; padding: 5px 6px !important; }
  #mobilePageMap .world-clock-grid > .world-clock-time { padding: 1px 5px !important; }
  #mobilePageMap .world-clock-grid > .world-clock-time strong { font-size: 14px !important; }
  #mobilePageMap .world-clock-grid > .world-clock-time small { font-size: 6.5px !important; }
  #mobilePageMap .world-clock-grid > .world-clock-time time { font-size: 7.5px !important; }
}


/* Mini floating catalog — noticeably smaller on phone screens, map remains the focus. */
@media (max-width: 1200px) {
  #mobilePageMap .left-top {
    left: 10px !important;
    right: auto !important;
    width: min(270px, calc(100vw - 72px)) !important;
    max-width: 270px !important;
    max-height: min(330px, calc(100dvh - 225px - env(safe-area-inset-bottom, 0px))) !important;
    border-radius: 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  #mobilePageMap #cardRealtime .panel-header {
    min-height: 31px !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    font-size: 8px !important;
    letter-spacing: .065em !important;
  }
  #mobilePageMap #cardRealtime .panel-header .pulse-dot {
    flex-basis: 6px !important;
    width: 6px !important;
    height: 6px !important;
  }
  #mobilePageMap #cardRealtime .panel-sub {
    padding: 5px 8px 1px !important;
    font-size: 7px !important;
    line-height: 1.15 !important;
  }
  #mobilePageMap #cardRealtime .rt-filter {
    padding: 0 8px 2px !important;
    font-size: 6.5px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }
  #mobilePageMap #cardRealtime .rt-row {
    gap: 6px !important;
    padding: 4px 7px 2px !important;
  }
  #mobilePageMap #cardRealtime .rt-mag {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
    font-size: 19px !important;
  }
  #mobilePageMap #cardRealtime .rt-meta,
  #mobilePageMap #cardRealtime #rtDate {
    font-size: 8px !important;
    line-height: 1.17 !important;
  }
  #mobilePageMap #cardRealtime .rt-ago {
    margin-top: 2px !important;
    font-size: 7.5px !important;
    line-height: 1.15 !important;
  }
  #mobilePageMap #cardRealtime .rt-coord {
    padding: 1px 8px 3px !important;
    font-size: 7.5px !important;
    line-height: 1.18 !important;
  }
  #mobilePageMap #cardRealtime .rt-place {
    padding: 0 8px 3px !important;
    font-size: 8.5px !important;
    line-height: 1.18 !important;
  }
  #mobilePageMap #cardRealtime .rt-tsunami-status {
    margin: 2px 6px 3px !important;
    width: calc(100% - 12px) !important;
    padding: 3px 5px !important;
    gap: 4px !important;
    border-radius: 7px !important;
    font-size: 6.5px !important;
    line-height: 1.15 !important;
  }
  #mobilePageMap #cardRealtime .rt-tsunami-indicator {
    min-width: 10px !important;
    font-size: 10px !important;
  }
  #mobilePageMap #cardRealtime .rt-src {
    padding: 0 8px 4px !important;
    font-size: 7px !important;
    line-height: 1.15 !important;
  }
  #mobilePageMap #cardRealtime #worldClockPanel {
    margin: 0 6px 6px !important;
    padding: 5px !important;
    border-radius: 10px !important;
  }
  #mobilePageMap .world-clock-head {
    margin: 0 0 4px !important;
    font-size: 7px !important;
    letter-spacing: .07em !important;
  }
  #mobilePageMap .world-clock-grid > .world-clock-time {
    gap: 2px !important;
    padding: 1px 4px !important;
  }
  #mobilePageMap .world-clock-grid > .world-clock-time:first-child { padding-left: 0 !important; }
  #mobilePageMap .world-clock-grid > .world-clock-time small {
    font-size: 5.8px !important;
    line-height: 1.12 !important;
  }
  #mobilePageMap .world-clock-grid > .world-clock-time strong {
    font-size: 11px !important;
    line-height: 1.05 !important;
  }
  #mobilePageMap .world-clock-grid > .world-clock-time time {
    font-size: 6.3px !important;
    line-height: 1.12 !important;
  }
  #mobilePageMap .world-clock-grid > .world-clock-param {
    gap: 2px 4px !important;
    margin-top: 3px !important;
    padding: 3px 0 0 !important;
  }
  #mobilePageMap .world-clock-grid > .world-clock-param small {
    font-size: 5.8px !important;
    line-height: 1.1 !important;
  }
  #mobilePageMap .world-clock-grid > .world-clock-param strong {
    font-size: 8px !important;
    line-height: 1.1 !important;
  }
  #mobilePageMap #rtParamDepth {
    font-size: 6.3px !important;
    line-height: 1.12 !important;
  }
  #mobilePageMap .rt-param-revision {
    font-size: 5.8px !important;
    line-height: 1.1 !important;
  }
}
@media (max-width: 430px) {
  #mobilePageMap .left-top {
    top: calc(52px + env(safe-area-inset-top, 0px)) !important;
    left: 8px !important;
    right: auto !important;
    width: min(270px, calc(100vw - 66px)) !important;
    max-width: 270px !important;
    max-height: min(315px, calc(100dvh - 215px - env(safe-area-inset-bottom, 0px))) !important;
  }
  #mobilePageMap #cardRealtime .panel-header {
    min-height: 29px !important;
    padding: 5px 7px !important;
    font-size: 7.5px !important;
  }
  #mobilePageMap #cardRealtime .panel-sub { padding: 4px 7px 1px !important; font-size: 6.7px !important; }
  #mobilePageMap #cardRealtime .rt-filter { padding: 0 7px 2px !important; font-size: 6px !important; }
  #mobilePageMap #cardRealtime .rt-row { padding: 3px 6px 2px !important; gap: 5px !important; }
  #mobilePageMap #cardRealtime .rt-mag {
    flex-basis: 39px !important; width: 39px !important; height: 39px !important;
    font-size: 17px !important; border-radius: 10px !important;
  }
  #mobilePageMap #cardRealtime .rt-meta,
  #mobilePageMap #cardRealtime #rtDate { font-size: 7.5px !important; }
  #mobilePageMap #cardRealtime .rt-coord { padding: 1px 7px 2px !important; font-size: 7px !important; }
  #mobilePageMap #cardRealtime .rt-place { padding: 0 7px 3px !important; font-size: 8px !important; }
  #mobilePageMap #cardRealtime .rt-tsunami-status {
    margin: 2px 5px 3px !important; width: calc(100% - 10px) !important; font-size: 6.1px !important;
  }
  #mobilePageMap #cardRealtime .rt-src { padding: 0 7px 3px !important; font-size: 6.5px !important; }
  #mobilePageMap #cardRealtime #worldClockPanel { margin: 0 5px 5px !important; padding: 4px !important; }
  #mobilePageMap .world-clock-grid > .world-clock-time { padding: 1px 3px !important; }
  #mobilePageMap .world-clock-grid > .world-clock-time strong { font-size: 10px !important; }
  #mobilePageMap .world-clock-grid > .world-clock-time small { font-size: 5.5px !important; }
  #mobilePageMap .world-clock-grid > .world-clock-time time { font-size: 6px !important; }
}


/* Final micro-card override requested from the device screenshot: target ~60% width. */
@media (max-width: 1200px) {
  #mobilePageMap .left-top {
    left: 9px !important;
    right: auto !important;
    width: min(240px, calc(100vw - 84px)) !important;
    max-width: 240px !important;
    max-height: min(300px, calc(100dvh - 230px - env(safe-area-inset-bottom, 0px))) !important;
    border-radius: 15px !important;
  }
  #mobilePageMap #cardRealtime .panel-header {
    min-height: 28px !important;
    padding: 5px 7px !important;
    font-size: 7.2px !important;
    letter-spacing: .045em !important;
  }
  #mobilePageMap #cardRealtime .panel-sub {
    padding: 4px 7px 1px !important;
    font-size: 6.4px !important;
  }
  #mobilePageMap #cardRealtime .rt-filter {
    padding: 0 7px 1px !important;
    font-size: 5.7px !important;
  }
  #mobilePageMap #cardRealtime .rt-row {
    padding: 3px 6px 2px !important;
    gap: 5px !important;
  }
  #mobilePageMap #cardRealtime .rt-mag {
    flex-basis: 37px !important;
    width: 37px !important;
    height: 37px !important;
    font-size: 16px !important;
    border-radius: 9px !important;
  }
  #mobilePageMap #cardRealtime .rt-meta,
  #mobilePageMap #cardRealtime #rtDate { font-size: 7px !important; line-height: 1.12 !important; }
  #mobilePageMap #cardRealtime .rt-ago { font-size: 6.6px !important; margin-top: 1px !important; }
  #mobilePageMap #cardRealtime .rt-coord { padding: 1px 7px 2px !important; font-size: 6.6px !important; }
  #mobilePageMap #cardRealtime .rt-place { padding: 0 7px 2px !important; font-size: 7.4px !important; }
  #mobilePageMap #cardRealtime .rt-tsunami-status {
    margin: 2px 5px 2px !important;
    width: calc(100% - 10px) !important;
    padding: 3px 4px !important;
    gap: 3px !important;
    font-size: 5.8px !important;
    line-height: 1.1 !important;
  }
  #mobilePageMap #cardRealtime .rt-src { padding: 0 7px 3px !important; font-size: 6px !important; }
  #mobilePageMap #cardRealtime #worldClockPanel { margin: 0 4px 4px !important; padding: 3px !important; border-radius: 8px !important; }
  #mobilePageMap .world-clock-head { margin: 0 0 3px !important; font-size: 6px !important; }
  #mobilePageMap .world-clock-grid > .world-clock-time { padding: 1px 2px !important; gap: 1px !important; }
  #mobilePageMap .world-clock-grid > .world-clock-time small { font-size: 5px !important; }
  #mobilePageMap .world-clock-grid > .world-clock-time strong { font-size: 9px !important; }
  #mobilePageMap .world-clock-grid > .world-clock-time time { font-size: 5.2px !important; }
  #mobilePageMap .world-clock-grid > .world-clock-param { margin-top: 2px !important; padding-top: 2px !important; gap: 1px 3px !important; }
  #mobilePageMap .world-clock-grid > .world-clock-param small { font-size: 5px !important; }
  #mobilePageMap .world-clock-grid > .world-clock-param strong { font-size: 7px !important; }
  #mobilePageMap #rtParamDepth { font-size: 5.4px !important; }
  #mobilePageMap .rt-param-revision { font-size: 5px !important; }
}
@media (max-width: 430px) {
  #mobilePageMap .left-top {
    left: 8px !important;
    width: min(240px, calc(100vw - 78px)) !important;
    max-width: 240px !important;
    max-height: min(285px, calc(100dvh - 220px - env(safe-area-inset-bottom, 0px))) !important;
  }
}


/* Readability balance for the mini catalog: still small, but text stays usable. */
@media (max-width: 1200px) {
  #mobilePageMap .left-top { width:min(250px,calc(100vw - 84px))!important;max-width:250px!important; }
  #mobilePageMap #cardRealtime .panel-header { font-size:7.8px!important;letter-spacing:.055em!important; }
  #mobilePageMap #cardRealtime .panel-sub { font-size:6.9px!important; }
  #mobilePageMap #cardRealtime .rt-filter { font-size:6.1px!important; }
  #mobilePageMap #cardRealtime .rt-meta,
  #mobilePageMap #cardRealtime #rtDate { font-size:7.8px!important;line-height:1.16!important; }
  #mobilePageMap #cardRealtime .rt-ago { font-size:7.1px!important; }
  #mobilePageMap #cardRealtime .rt-coord { font-size:7.1px!important; }
  #mobilePageMap #cardRealtime .rt-place { font-size:8px!important; }
  #mobilePageMap #cardRealtime .rt-tsunami-status { font-size:6.2px!important;line-height:1.14!important; }
  #mobilePageMap #cardRealtime .rt-src { font-size:6.5px!important; }
  #mobilePageMap .world-clock-head { font-size:6.4px!important; }
  #mobilePageMap .world-clock-grid>.world-clock-time small { font-size:5.4px!important; }
  #mobilePageMap .world-clock-grid>.world-clock-time strong { font-size:10.2px!important; }
  #mobilePageMap .world-clock-grid>.world-clock-time time { font-size:5.7px!important; }
  #mobilePageMap .world-clock-grid>.world-clock-param small { font-size:5.3px!important; }
  #mobilePageMap .world-clock-grid>.world-clock-param strong { font-size:7.3px!important; }
  #mobilePageMap #rtParamDepth { font-size:5.8px!important; }
  #mobilePageMap .rt-param-revision { font-size:5.3px!important; }
}
@media (max-width: 430px) {
  #mobilePageMap .left-top { width:min(250px,calc(100vw - 78px))!important;max-width:250px!important; }
}