/* 右上角语言胶囊。三个页面（首页 / 私服页 / 看板）共用，
   所以样式独立成文件，不依赖各自的设计变量。 */

.lang-switch {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 60;
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  /* 两个选项等宽，滑块才能用 translateX(100%) 精确对齐 */
  --opt-w: 58px;
}

/* 滑块单独一层：位移动画只跑在 transform 上，不触发重排 */
.lang-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: var(--opt-w);
  height: calc(100% - 6px);
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7a45 0%, #ff2d78 100%);
  box-shadow: 0 3px 12px rgba(255, 76, 97, 0.4);
  transition: transform 0.42s cubic-bezier(0.34, 1.4, 0.5, 1);
  will-change: transform;
}

.lang-opt {
  position: relative;
  width: var(--opt-w);
  padding: 7px 0;
  border: none;
  background: transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(235, 235, 245, 0.6);
  cursor: pointer;
  transition: color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.lang-opt:hover { color: rgba(255, 255, 255, 0.85); }
.lang-opt.on { color: #fff; }
.lang-opt:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; }

/* 浅色页面（未来若有）也能看清 */
@media (prefers-color-scheme: light) {
  .lang-switch { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); }
}

@media (max-width: 560px) {
  .lang-switch { top: 10px; right: 10px; --opt-w: 50px; }
  .lang-opt { font-size: 12px; padding: 6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lang-thumb { transition: none; }
}