.region-notice {
  width: min(440px, calc(100% - 48px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 28px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 28px;
  color: #f5f5f7;
  background: linear-gradient(145deg,rgba(38,38,42,.96),rgba(18,19,23,.96));
  box-shadow: 0 28px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(30px) saturate(145%);
  -webkit-backdrop-filter: blur(30px) saturate(145%);
}
.region-notice[open] { animation: region-notice-rise .38s cubic-bezier(.16,1,.3,1) both; }
.region-notice::backdrop {
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  animation: region-notice-fade .28s ease both;
}
body:has(.region-notice[open]) { overflow: hidden; }
.region-notice h2 { margin: 0 0 14px; font-size: clamp(24px,5vw,32px); line-height: 1.1; letter-spacing: -.045em; }
.region-notice p { margin: 0; color: rgba(235,235,245,.72); font-size: 15px; line-height: 1.75; }
.region-notice .region-notice-kicker { margin: 0 0 12px; color: rgba(235,235,245,.56); font: 700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .14em; }
.region-notice button {
  width: 100%;
  min-height: 48px;
  margin-top: 24px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #fff;
  background: #2997ff;
  box-shadow: 0 10px 28px rgba(41,151,255,.24),inset 0 1px 0 rgba(255,255,255,.2);
  font: 600 15px/1 -apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC",sans-serif;
  cursor: pointer;
}
.region-notice button:hover { filter: brightness(1.08); }
.region-notice button:focus-visible { outline: 2px solid rgba(143,202,255,.95); outline-offset: 3px; }
@keyframes region-notice-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes region-notice-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .region-notice { width: calc(100% - 36px); max-height: calc(100dvh - 36px); padding: 24px 20px; border-radius: 24px; }
  .region-notice p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .region-notice[open], .region-notice::backdrop { animation: none; }
}