/* ======= 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-btn {
  padding: 10px 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid #00ffff;
  border-radius: 6px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.95rem;
  color: #00ffff;
  text-shadow: 0 0 6px #0ff;
  cursor: pointer;
  transition:
    background .25s,
    border-image .35s,
    box-shadow .35s,
    transform .25s,
    color .25s;
  border-image: linear-gradient(135deg, #00ffff, #ff00ff) 1;
  box-shadow:
    0 0 6px rgba(0, 255, 255, 0.4),
    inset 0 0 4px rgba(0, 255, 255, 0.2);
}
.a70-lang-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  background: rgba(0, 255, 255, 0.08);
  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);
}

/* ======= 當前語言 (已選) 樣式 ======= */
.a70-lang-btn.active {
  color: #ff00ff;
  border-image: linear-gradient(135deg, #ff00ff, #00ffff) 1;
  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);
  cursor: default;
  pointer-events: none;
}

/* ======= 手機向下收斂 ======= */
@media (max-width: 380px) {
  .a70-modal-content {
    width: calc(100vw - 24px);  /* 與遮罩 padding 對齊，至少左右 12px */
    padding: 24px 20px 28px;
  }
  .a70-lang-grid {
    gap: 12px 14px;
  }
}
