/* ==========================================================================
   首页语言选择层
   替代独立 language-selection.html：先模糊首页，再弹出两粒药丸按钮
   ========================================================================== */

.lang-layer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 42%, rgba(18, 29, 53, 0.72) 0%, rgba(11, 19, 35, 0.88) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
  opacity: 1;
  visibility: visible;
  transition: opacity 380ms ease, visibility 380ms ease;
}

html.lang-ready .lang-layer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 未选择语言时锁住背景滚动 */
html:not(.lang-ready) body {
  overflow: hidden;
}

.lang-layer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
  text-align: center;
  transform: translateY(-2vh);
}

.lang-layer-crest {
  height: 88px;
  width: auto;
  display: block;
  opacity: 0.95;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
}

.lang-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* 与导航栏右上角语言按钮同一套液态玻璃规格：
   半透明白底 + backdrop blur + 1px 浅边框 + inset 顶部高光 */
.lang-pill {
  min-width: 176px;
  padding: 21px 46px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(21, 34, 66, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.32);
  transition: background 250ms ease, border-color 250ms ease,
              box-shadow 250ms ease, transform 250ms ease;
}

.lang-pill:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 12px 38px rgba(21, 34, 66, 0.34),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.lang-pill:active {
  transform: translateY(-1px);
}

.lang-pill:focus-visible {
  outline: 3px solid #a69867;
  outline-offset: 4px;
}

.lang-pill--en {
  font-family: 'Bembo', 'Times New Roman', serif;
  letter-spacing: 0.02em;
}

@media (max-width: 560px) {
  .lang-layer-inner {
    gap: 30px;
    transform: none;
  }
  .lang-layer-crest {
    height: 62px;
  }
  .lang-pills {
    gap: 14px;
  }
  .lang-pill {
    flex: 1 1 0;
    max-width: 168px;
    padding: 18px 24px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-layer,
  .lang-pill {
    transition: none;
  }
  .lang-pill:hover {
    transform: none;
  }
}