@import url("https://fonts.googleapis.com/css?family=Concert+One&display=swap");

/* 移除全局样式，只保留必要部分以避免与现有样式冲突 */
svg {
  display: none;
}

/* 主切换按钮容器（响应变量 + 默认定位） */
.tabber {
  position: fixed;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  font-family: "Concert One", cursive;
  z-index: 1000;
  /* responsive variables */
  --tab-font: clamp(0.85rem, 2.8vw, 1.05rem);
  --tab-pad-y: clamp(0.38rem, 1.4vw, 1.1rem);
  --tab-pad-x: clamp(0.6rem, 3.2vw, 1.2rem);
  /* 默认固定到右上角（可以由 media queries 覆盖） */
  top: clamp(12px, 2.2vh, 20px);
  right: clamp(12px, 2.2vw, 20px);
  background: transparent;
  padding: 4px;
  border-radius: 12px;
}

/* 标签样式 */
.tabber label {
  user-select: none;
  font-size: var(--tab-font);
  padding: var(--tab-pad-y) var(--tab-pad-x);
  /* 使用响应式内边距 */
  cursor: pointer;
  will-change: transform;
  transform: translateZ(0px);
  transition: transform 125ms ease-in-out, filter 125ms ease-in-out;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  flex: 0 1 auto;
  /* allow shrinking but prevent taking full width */
  white-space: nowrap;
  /* prevent label text wrapping */
}

.tabber label:hover {
  transform: scale(1.12);
}


/* 在小屏幕上限制 hover 缩放，避免触碰时过大 */
@media (max-width: 480px),
(orientation: portrait) {
  .tabber label:hover {
    transform: scale(1.06);
  }
}

/* 将右侧文字微调到液体中间位置 */
.tabber label[for="t2"] {
  position: relative;
  left: -8px;
  /* 向左移动，使文字看起来位于液体中间 */
  transition: left 180ms ease, transform 180ms ease;
}

@media (max-width: 960px) {
  /* Move tabber down for screens <=960px to avoid overlapping the centered title */
  .tabber {
    top: clamp(3px, 2vh, 5px);
  }
  /* On narrow screens avoid nudging the right label which can lead to centering */
  .tabber label[for="t2"] {
    left: 0;
  }

  .tabber {
    justify-content: flex-start;
    /* keep tabs aligned rather than jumping to center */
    gap: 0.5rem;
    padding: 0 0.6rem;
  }

  .tabber label {
    /* slightly reduce padding on small screens to avoid overly large buttons */
    padding: calc(var(--tab-pad-y) * 0.75) calc(var(--tab-pad-x) * 0.75);
    font-size: calc(var(--tab-font) * 0.95);
  }

  /* 在非常窄的屏幕上，将切换按钮竖直堆叠以节省水平空间 */
  @media (max-width: 420px) {
    .tabber {
      /* Keep horizontal but compact for very small screens */
      flex-direction: row;
      align-items: center;
      gap: 0.35rem;
      right: 8px;
      padding: 4px;
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.04);
    }

    .tabber label {
      padding: 0.32rem 0.6rem;
      font-size: calc(var(--tab-font) * 0.6);
      line-height: 1;
    }

    /* Ensure the liquid blob remains visible but scaled down */
    .tabber .blob {
      display: block;
      width: clamp(32%, 42%, 48%);
      height: 100%;
      border-radius: 1rem;
      opacity: 0.98;
      filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" /><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8" result="goo" /><feComposite in="SourceGraphic" in2="goo" operator="atop"/></filter></defs></svg>#goo');
    }
  }
}


/* 隐藏单选按钮 */
.tabber input[type="radio"] {
  display: none;
}

/* 静态样式 */
.tabber input#t1~.blob {
  transform-origin: right center;
}

.tabber input#t2~.blob {
  transform-origin: left center;
}

/* 动画样式 */
.tabber input#t1:checked~.blob {
  background: cornflowerblue;
  animation-name: stretchyRev;
}

.tabber input#t2:checked~.blob {
  background-color: skyblue;
  animation-name: stretchy;
}

/* Blob 样式 */
.tabber .blob {
  top: 0;
  left: 0;
  width: clamp(36%, 46%, 56%);
  /* 响应式宽度，避免在狭窄屏幕上占太多 */
  height: 100%;
  position: absolute;
  z-index: -1;
  border-radius: 1.2rem;
  /* 更适中的圆角 */
  animation-duration: 0.5s;
  animation-direction: forwards;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transition: transform 150ms ease, background 150ms ease;
  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" /><feComposite in="SourceGraphic" in2="goo" operator="atop"/></filter></defs></svg>#goo');
}

.tabber .blob:before,
.tabber .blob:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  background-color: inherit;
  height: 100%;
  width: 50%;
  border-radius: 100%;
  transform: scale(1.15);
  transition: transform 150ms ease;
  animation-name: pulse;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.tabber .blob:before {
  left: 0;
  animation-delay: 0.15s;
}

.tabber .blob:after {
  right: 0;
}

/* 动画关键帧定义 */
@keyframes stretchy {
  0% {
    transform: translateX(0) scaleX(1);
  }

  50% {
    transform: translateX(0) scaleX(2);
  }

  100% {
    transform: translateX(100%) scaleX(1);
  }
}

@keyframes stretchyRev {
  0% {
    transform: translateX(100%) scaleX(1);
  }

  50% {
    transform: translateX(0) scaleX(2);
  }

  100% {
    transform: translateX(0) scaleX(1);
  }
}

@keyframes pulse {

  0%,
  50% {
    transform: scaleX(1);
  }

  25%,
  75% {
    transform: scaleX(1.5);
  }
}

/* 按下效果 */
.tabber label:active {
  transform: scale(0.95);
}

/* 当控件被锁定（动画中）时的样式提示 */
.tabber.controls-disabled label {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(30%);
}

.tabber.controls-disabled .blob {
  filter: grayscale(60%) blur(0.6px);
}