/* ======= a70 語言選擇 Modal：背景遮罩 ======= */
.a70-modal {
  display: none;                     /* 由 JS 加 .open 切顯示 */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  z-index: 1100;
  align-items: center;
  justify-content: center;
  /* 左右保留距離（含 iOS 安全區域） */
  padding-left:  calc(env(safe-area-inset-left) + 12px);
  padding-right: calc(env(safe-area-inset-right) + 12px);
  animation: a70-fadeIn 0.4s ease-out both;
}
.a70-modal.open { display: flex; }

@keyframes a70-fadeIn {
  from { background: rgba(0, 0, 0, 0); }
  to   { background: rgba(0, 0, 0, 0.85); }
}

/* ======= a70 Modal 內容卡片 ======= */
.a70-modal-content {
  position: relative;
  box-sizing: border-box;
  /* 改為響應式：確保左右至少各 12px 留白 */
  width: min(340px, calc(100vw - 24px));
  max-width: 100%;
  margin: 0 auto;

  padding: 28px 32px 32px;
  background: rgba(15, 15, 35, 0.96);
  border: 2px solid transparent;
  border-image: linear-gradient(135deg, #00ffff, #ff00ff, #00ffff) 1;
  border-radius: 14px;
  box-shadow:
    0 0 14px rgba(0, 255, 255, 0.5),
    0 0 28px rgba(255, 0, 255, 0.35),
    inset 0 0 10px rgba(0, 255, 255, 0.25);
  overflow: hidden;
  font-family: 'Orbitron', sans-serif;
  animation: a70-pulse 3.2s ease-in-out infinite alternate;
}
@keyframes a70-pulse {
  from {
    box-shadow:
      0 0 14px rgba(0, 255, 255, 0.45),
      0 0 28px rgba(255, 0, 255, 0.25);
  }
  to {
    box-shadow:
      0 0 26px rgba(0, 255, 255, 0.85),
      0 0 52px rgba(255, 0, 255, 0.65),
      inset 0 0 14px rgba(0, 255, 255, 0.35);
  }
}

/* 科幻網格 Overlay */
.a70-modal-content::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0,
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0;
  background-size: 22px 22px;
  mix-blend-mode: overlay;
}

/* ======= 標題 ======= */
.a70-modal-title {
  margin: 0 0 20px;
  font-size: 1.35rem;
  color: #0ff;
  text-align: center;
  text-shadow:
    0 0 8px #0ff,
    0 0 18px #f0f;
  letter-spacing: .6px;
  animation: a70-titleGlow 1.6s ease-in-out infinite alternate;
}
@keyframes a70-titleGlow {
  from { text-shadow: 0 0 6px #0ff, 0 0 14px #f0f; }
  to   { text-shadow: 0 0 12px #0ff, 0 0 26px #f0f; }
}

/* ======= 關閉按鈕 (×) ======= */
.a70-close {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 26px;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: color .25s, transform .25s;
}
.a70-close:hover { color: #fff; transform: rotate(90deg); }

/* ======= 語言按鈕網格 ======= */
.a70-lang-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
}

/* ======= 語言單一按鈕 ======= */
#a70-lang-modal .a70-lang-btn,
button.a70-lang-btn {
  padding: 10px 0;
  width: 100%;
  border: 2px solid transparent !important;
  border-image: linear-gradient(135deg, #00ffff, #ff00ff) 1 !important;
  border-radius: 6px;

  /* 文字與底色（預設狀態） */
  background: rgba(0, 0, 0, 0.25) !important;
  background-clip: padding-box !important; /* 避免 UA 白底滲到邊框裡 */
  color: #00ffff !important;
  text-shadow: 0 0 6px #0ff;

  font-family: 'Orbitron', sans-serif;
  font-size: 0.95rem;
  cursor: pointer;

  /* 關閉 UA 樣式 */
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;

  transition:
    background .25s,
    border-image .35s,
    box-shadow .35s,
    transform .25s,
    color .25s;

  box-shadow:
    0 0 6px rgba(0, 255, 255, 0.4),
    inset 0 0 4px rgba(0, 255, 255, 0.2);
}
/* Firefox 內邊距修正 */
.a70-lang-btn::-moz-focus-inner { border:0; padding:0; }

.a70-lang-btn:hover {
  color: #fff !important;
  transform: translateY(-2px);
  background: rgba(0, 255, 255, 0.08) !important;
  box-shadow:
    0 0 10px rgba(0, 255, 255, 0.7),
    0 0 18px rgba(255, 0, 255, 0.55),
    inset 0 0 6px rgba(0, 255, 255, 0.3) !important;
}

/* ======= 當前語言 (已選) 樣式 ======= */
.a70-lang-btn.active {
  color: #ff00ff !important;
  border-image: linear-gradient(135deg, #ff00ff, #00ffff) 1 !important;
  text-shadow: 0 0 6px #f0f, 0 0 12px #0ff;
  box-shadow:
    0 0 12px rgba(255, 0, 255, 0.75),
    inset 0 0 6px rgba(255, 0, 255, 0.35) !important;
  cursor: default;
  pointer-events: none;
}

/* ✅ 修正：focus/active 不要變白底（未選中者） */
.a70-lang-btn:not(.active):focus,
.a70-lang-btn:not(.active):focus-visible,
.a70-lang-btn:not(.active):active {
  outline: none !important;
  background: rgba(0, 255, 255, 0.08) !important;
  color: #fff !important;
  box-shadow:
    0 0 10px rgba(0, 255, 255, 0.7),
    0 0 18px rgba(255, 0, 255, 0.55),
    inset 0 0 6px rgba(0, 255, 255, 0.3) !important;
}

/* ======= 手機向下收斂 ======= */
@media (max-width: 380px) {
  .a70-modal-content {
    width: calc(100vw - 24px);  /* 與遮罩 padding 對齊，至少左右 12px */
    padding: 24px 20px 28px;
  }
  .a70-lang-grid { gap: 12px 14px; }
}