/* ==============================
   Language Switch
============================== */

.language-switch {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  width: fit-content;
  margin: 18px auto 28px;
  padding: 7px;

  border-radius: 999px;
  background: rgba(3, 16, 26, 0.86);
  border: 1px solid rgba(80, 190, 230, 0.35);
  box-shadow:
    0 0 16px rgba(0, 180, 255, 0.18),
    inset 0 0 12px rgba(80, 200, 255, 0.06);
}

.language-switch-btn {
  min-width: 92px;
  padding: 9px 18px;

  border-radius: 999px;
  border: 1px solid rgba(120, 220, 255, 0.45);
  background: rgba(5, 24, 38, 0.72);

  color: #dff8ff;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;

  box-shadow:
    inset 0 0 10px rgba(0, 180, 255, 0.08),
    0 0 8px rgba(0, 180, 255, 0.12);

  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease;
}

.language-switch-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(160, 240, 255, 0.75);
  box-shadow:
    inset 0 0 12px rgba(0, 200, 255, 0.12),
    0 0 12px rgba(0, 200, 255, 0.24);
}

.language-switch-btn.active {
  color: #03131f;
  background: linear-gradient(135deg, #8ff2ff, #3acbff);
  border-color: rgba(220, 255, 255, 0.95);
  box-shadow:
    0 0 14px rgba(80, 220, 255, 0.45),
    inset 0 0 8px rgba(255, 255, 255, 0.35);
}

.language-switch-btn:focus-visible {
  outline: 2px solid rgba(220, 250, 255, 0.95);
  outline-offset: 3px;
}

/* 初期状態：日本語表示 */
.lang-en {
  display: none;
}

/* 英語表示時 */
body.show-en .lang-ja {
  display: none;
}

body.show-en .lang-en {
  display: block;
}

body.show-en li.lang-en {
  display: list-item;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .language-switch {
    gap: 6px;
    padding: 6px;
    margin: 16px auto 24px;
  }

  .language-switch-btn {
    min-width: 82px;
    padding: 8px 14px;
    font-size: 0.85rem;
  }
}