.region-switcher {
    position: fixed;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.55rem;
    border: 1px solid rgba(15,23,42,0.1);
    border-radius: 999px;
    background: rgba(255,255,255,0.82);
    box-shadow: 0 20px 55px rgba(15,23,42,0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .region-button {
    position: relative;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,0.1);
    background: #fff;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }
  .region-button:hover,
  .region-button:focus-visible {
    transform: translateX(3px);
    border-color: rgba(15,118,110,0.38);
    box-shadow: 0 12px 30px rgba(15,23,42,0.14);
    outline: 3px solid #0F766E;
    outline-offset: 2px;
  }
  .region-button::after {
    content: attr(aria-label);
    position: absolute;
    left: calc(100% + 0.65rem);
    top: 50%;
    transform: translateY(-50%);
    width: max-content;
    max-width: 190px;
    padding: 0.45rem 0.62rem;
    border-radius: 8px;
    background: #0B1220;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .region-button:hover::after,
  .region-button:focus-visible::after {
    opacity: 1;
    transform: translate(2px, -50%);
  }
  .flag-icon {
    width: 28px;
    height: 20px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,0.16);
  }
  .flag-de { background: linear-gradient(180deg, #111827 0 33.33%, #DD0000 33.33% 66.66%, #FFCE00 66.66% 100%); }
  .flag-sg { position: relative; background: linear-gradient(180deg, #EF3340 0 50%, #fff 50% 100%); }
  .flag-sg::before { content: ''; position: absolute; left: 5px; top: 4px; width: 7px; height: 7px; border-radius: 50%; box-shadow: -2px 0 0 1px #fff; }
  .flag-in { position: relative; background: linear-gradient(180deg, #FF9933 0 33.33%, #fff 33.33% 66.66%, #138808 66.66% 100%); }
  .flag-in::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border: 1.4px solid #000080; border-radius: 50%; transform: translate(-50%, -50%); }
  .flag-us { background: linear-gradient(90deg, #3C3B6E 0 42%, transparent 42% 100%), repeating-linear-gradient(180deg, #B22234 0 7.69%, #fff 7.69% 15.38%); }
  .flag-fr { background: linear-gradient(90deg, #0055A4 0 33.33%, #fff 33.33% 66.66%, #EF4135 66.66% 100%); }
  .flag-ae { background: linear-gradient(90deg, #FF0000 0 28%, transparent 28% 100%), linear-gradient(180deg, #009739 0 33.33%, #fff 33.33% 66.66%, #000 66.66% 100%); }
  .flag-uk {
    background:
      linear-gradient(180deg, transparent 0 38%, #fff 38% 45%, #CF142B 45% 55%, #fff 55% 62%, transparent 62%),
      linear-gradient(90deg, transparent 0 40%, #fff 40% 46%, #CF142B 46% 54%, #fff 54% 60%, transparent 60%),
      linear-gradient(33deg, transparent 0 43%, #fff 43% 48%, #CF142B 48% 52%, #fff 52% 57%, transparent 57%),
      linear-gradient(147deg, transparent 0 43%, #fff 43% 48%, #CF142B 48% 52%, #fff 52% 57%, transparent 57%),
      #00247D;
  }
  .region-button { flex: 0 0 44px; }
  .region-switcher .flag-jp { position: relative; background: #fff; }
  .region-switcher .flag-jp::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    top: 4px;
    left: 8px;
    border-radius: 50%;
    background: #BC002D;
  }
  @media (max-width: 1280px), (max-height: 620px) {
    body { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
    .region-switcher {
      left: 10px;
      right: 10px;
      top: auto;
      bottom: calc(12px + env(safe-area-inset-bottom, 0px));
      transform: none;
      width: max-content;
      max-width: calc(100% - 20px);
      flex-direction: row;
      gap: 6px;
      padding: 8px;
      overflow-x: auto;
      scroll-padding-inline: 8px;
      overscroll-behavior-x: contain;
      scrollbar-width: thin;
      border-radius: 32px;
    }
    .region-button::after { display: none; }
    .region-button:hover, .region-button:focus-visible { transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .region-button, .region-button::after { transition: none; }
  }
  @media print {
    .region-switcher { display: none; }
    body { padding-bottom: 0; }
  }