/* 马里奥蘑菇 */

/* 游戏按钮样式 - 仅作用于带有 .game-button 类的按钮 */
.game-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 10px;
  color: white;
  text-shadow: 2px 2px rgb(116, 116, 116);
  text-transform: uppercase;
  cursor: pointer;
  border: solid 2px black;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 17px;
  background-color: hsl(49deg 98% 60%);
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
}

.game-button:active {
  transform: scale(0.9);
  transition: all 100ms ease;
}

.game-button svg {
  transition: all 0.5s ease;
  z-index: 2;
}

.game-button .play {
  transition: all 0.5s ease;
  transition-delay: 300ms;
}

.game-button:hover svg {
  transform: scale(3) translate(50%);
}

.game-button .now {
  position: absolute;
  left: 0;
  transform: translateX(-100%);
  transition: all 0.5s ease;
  z-index: 2;
}

.game-button:hover .now {
  transform: translateX(10px);
  transition-delay: 300ms;
}

.game-button:hover .play {
  transform: translateX(200%);
  transition-delay: 300ms;
}


/* 滚带图 */
/*第三个*/
/* From Uiverse.io by augustin_4687 */
.pill-button {
  --stone-50: #fafaf9;
  --stone-800: #292524;
  --yellow-400: #facc15;

  font-family: "Rubik", sans-serif;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  line-height: 1;
  font-size: 1rem;
  border-radius: 1rem;
  outline: 2px solid transparent;
  outline-offset: 6px;
  color: var(--stone-50);

  &:active {
    outline-color: var(--yellow-400);
  }

  &:focus-visible {
    outline-color: var(--yellow-400);
    outline-style: dashed;
  }

  &::before {
    content: "";
    position: absolute;
    z-index: 0;
    height: 200%;
    max-height: 100px;
    aspect-ratio: 1;
    margin: auto;
    background: white;
    clip-path: polygon(
      100% 50%,
      91.48% 56.57%,
      97.55% 65.45%,
      87.42% 69.07%,
      90.45% 79.39%,
      79.7% 79.7%,
      79.39% 90.45%,
      69.07% 87.42%,
      65.45% 97.55%,
      56.57% 91.48%,
      50% 100%,
      43.43% 91.48%,
      34.55% 97.55%,
      30.93% 87.42%,
      20.61% 90.45%,
      20.3% 79.7%,
      9.55% 79.39%,
      12.58% 69.07%,
      2.45% 65.45%,
      8.52% 56.57%,
      0% 50%,
      8.52% 43.43%,
      2.45% 34.55%,
      12.58% 30.93%,
      9.55% 20.61%,
      20.3% 20.3%,
      20.61% 9.55%,
      30.93% 12.58%,
      34.55% 2.45%,
      43.43% 8.52%,
      50% 0%,
      56.57% 8.52%,
      65.45% 2.45%,
      69.07% 12.58%,
      79.39% 9.55%,
      79.7% 20.3%,
      90.45% 20.61%,
      87.42% 30.93%,
      97.55% 34.55%,
      91.48% 43.43%
    );

    animation: star-rotate 4s linear infinite;
    opacity: 0.1;
  }

  &:hover::before {
    opacity: 1;
  }

  & > div {
    padding: 2px;
    border-radius: 1rem;
    background-color: var(--yellow-400);
    transform: translate(-4px, -4px);
    transition: all 150ms ease;
    box-shadow:
      0.5px 0.5px 0 0 var(--yellow-400),
      1px 1px 0 0 var(--yellow-400),
      1.5px 1.5px 0 0 var(--yellow-400),
      2px 2px 0 0 var(--yellow-400),
      2.5px 2.5px 0 0 var(--yellow-400),
      3px 3px 0 0 var(--yellow-400),
      0 0 0 2px var(--stone-800),
      0.5px 0.5px 0 2px var(--stone-800),
      1px 1px 0 2px var(--stone-800),
      1.5px 1.5px 0 2px var(--stone-800),
      2px 2px 0 2px var(--stone-800),
      2.5px 2.5px 0 2px var(--stone-800),
      3px 3px 0 2px var(--stone-800),
      3.5px 3.5px 0 2px var(--stone-800),
      4px 4px 0 2px var(--stone-800),
      0 0 0 4px var(--stone-50),
      0.5px 0.5px 0 4px var(--stone-50),
      1px 1px 0 4px var(--stone-50),
      1.5px 1.5px 0 4px var(--stone-50),
      2px 2px 0 4px var(--stone-50),
      2.5px 2.5px 0 4px var(--stone-50),
      3px 3px 0 4px var(--stone-50),
      3.5px 3.5px 0 4px var(--stone-50),
      4px 4px 0 4px var(--stone-50);

    .button:hover & {
      transform: translate(0, 0);
      box-shadow:
        0 0 0 0 var(--yellow-400),
        0 0 0 0 var(--yellow-400),
        0 0 0 0 var(--yellow-400),
        0 0 0 0 var(--yellow-400),
        0 0 0 0 var(--yellow-400),
        0 0 0 0 var(--yellow-400),
        0 0 0 2px var(--stone-800),
        0 0 0 2px var(--stone-800),
        0 0 0 2px var(--stone-800),
        0 0 0 2px var(--stone-800),
        0 0 0 2px var(--stone-800),
        0 0 0 2px var(--stone-800),
        0 0 0 2px var(--stone-800),
        0 0 0 2px var(--stone-800),
        0 0 0 2px var(--stone-800),
        0 0 0 4px var(--stone-50),
        0 0 0 4px var(--stone-50),
        0 0 0 4px var(--stone-50),
        0 0 0 4px var(--stone-50),
        0 0 0 4px var(--stone-50),
        0 0 0 4px var(--stone-50),
        0 0 0 4px var(--stone-50),
        0 0 0 4px var(--stone-50),
        0 0 0 4px var(--stone-50);
    }

    & > div {
      position: relative;
      pointer-events: none;
      border-radius: calc(1rem - 2px);
      background-color: var(--stone-800);

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 1rem;
        opacity: 0.1;
        background-image: radial-gradient(
            rgb(255 255 255 / 80%) 20%,
            transparent 20%
          ),
          radial-gradient(rgb(255 255 255 / 100%) 20%, transparent 20%);
        background-position:
          0 0,
          4px 4px;
        background-size: 8px 8px;
        mix-blend-mode: hard-light;
        box-shadow: inset 0 0 0 1px var(--stone-800);
        animation: dots 0.4s infinite linear;
        transition: opacity 150ms ease;
      }

      & > div {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0.75rem 1.25rem;
        gap: 0.25rem;
        filter: drop-shadow(0 -1px 0 var(--stone-800));

        &:hover {
          filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.1));
        }

        &:active {
          transform: translateY(2px);
        }
      }
    }
  }
}

@keyframes star-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes dots {
  0% {
    background-position:
      0 0,
      4px 4px;
  }
  100% {
    background-position:
      8px 0,
      12px 4px;
  }
}

@media (prefers-color-scheme: dark) {
  .button {
    &:active,
    &:focus-visible {
      outline-color: var(--yellow-400);
    }
  }
}





/*第五个*/
/*红色章鱼*/
/* From Uiverse.io by BlackisPlay */
#ghost {
  position: relative;
  scale: 0.8;
}

#red {
  animation: upNDown infinite 0.5s;
  position: relative;
  width: 140px;
  height: 140px;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(14, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "a1  a2  a3  a4  a5  top0  top0  top0  top0  a10 a11 a12 a13 a14"
    "b1  b2  b3  top1 top1 top1 top1 top1 top1 top1 top1 b12 b13 b14"
    "c1 c2 top2 top2 top2 top2 top2 top2 top2 top2 top2 top2 c13 c14"
    "d1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 d14"
    "e1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 e14"
    "f1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 f14"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "st0 st0 an4 st1 an7 st2 an10 an10 st3 an13 st4 an16 st5 st5"
    "an1 an2 an3 an5 an6 an8 an9 an9 an11 an12 an14 an15 an17 an18";
}

@keyframes upNDown {
  0%,
  49% {
    transform: translateY(0px);
  }
  50%,
  100% {
    transform: translateY(-10px);
  }
}

#top0,
#top1,
#top2,
#top3,
#top4,
#st0,
#st1,
#st2,
#st3,
#st4,
#st5 {
  background-color: red;
}

#top0 {
  grid-area: top0;
}

#top1 {
  grid-area: top1;
}

#top2 {
  grid-area: top2;
}

#top3 {
  grid-area: top3;
}

#top4 {
  grid-area: top4;
}

#st0 {
  grid-area: st0;
}

#st1 {
  grid-area: st1;
}

#st2 {
  grid-area: st2;
}

#st3 {
  grid-area: st3;
}

#st4 {
  grid-area: st4;
}

#st5 {
  grid-area: st5;
}

#an1 {
  grid-area: an1;
  animation: flicker0 infinite 0.5s;
}

#an18 {
  grid-area: an18;
  animation: flicker0 infinite 0.5s;
}

#an2 {
  grid-area: an2;
  animation: flicker1 infinite 0.5s;
}

#an17 {
  grid-area: an17;
  animation: flicker1 infinite 0.5s;
}

#an3 {
  grid-area: an3;
  animation: flicker1 infinite 0.5s;
}

#an16 {
  grid-area: an16;
  animation: flicker1 infinite 0.5s;
}

#an4 {
  grid-area: an4;
  animation: flicker1 infinite 0.5s;
}

#an15 {
  grid-area: an15;
  animation: flicker1 infinite 0.5s;
}

#an6 {
  grid-area: an6;
  animation: flicker0 infinite 0.5s;
}

#an12 {
  grid-area: an12;
  animation: flicker0 infinite 0.5s;
}

#an7 {
  grid-area: an7;
  animation: flicker0 infinite 0.5s;
}

#an13 {
  grid-area: an13;
  animation: flicker0 infinite 0.5s;
}

#an9 {
  grid-area: an9;
  animation: flicker1 infinite 0.5s;
}

#an10 {
  grid-area: an10;
  animation: flicker1 infinite 0.5s;
}

#an8 {
  grid-area: an8;
  animation: flicker0 infinite 0.5s;
}

#an11 {
  grid-area: an11;
  animation: flicker0 infinite 0.5s;
}

@keyframes flicker0 {
  0%,
  49% {
    background-color: red;
  }
  50%,
  100% {
    background-color: transparent;
  }
}

@keyframes flicker1 {
  0%,
  49% {
    background-color: transparent;
  }
  50%,
  100% {
    background-color: red;
  }
}

#eye {
  width: 40px;
  height: 50px;
  position: absolute;
  top: 30px;
  left: 10px;
}

#eye::before {
  content: "";
  background-color: white;
  width: 20px;
  height: 50px;
  transform: translateX(10px);
  display: block;
  position: absolute;
}

#eye::after {
  content: "";
  background-color: white;
  width: 40px;
  height: 30px;
  transform: translateY(10px);
  display: block;
  position: absolute;
}

#eye1 {
  width: 40px;
  height: 50px;
  position: absolute;
  top: 30px;
  right: 30px;
}

#eye1::before {
  content: "";
  background-color: white;
  width: 20px;
  height: 50px;
  transform: translateX(10px);
  display: block;
  position: absolute;
}

#eye1::after {
  content: "";
  background-color: white;
  width: 40px;
  height: 30px;
  transform: translateY(10px);
  display: block;
  position: absolute;
}

#pupil {
  width: 20px;
  height: 20px;
  background-color: blue;
  position: absolute;
  top: 50px;
  left: 10px;
  z-index: 1;
  animation: eyesMovement infinite 3s;
}

#pupil1 {
  width: 20px;
  height: 20px;
  background-color: blue;
  position: absolute;
  top: 50px;
  right: 50px;
  z-index: 1;
  animation: eyesMovement infinite 3s;
}

@keyframes eyesMovement {
  0%,
  49% {
    transform: translateX(0px);
  }
  50%,
  99% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0px);
  }
}

#shadow {
  background-color: black;
  width: 140px;
  height: 140px;
  position: absolute;
  border-radius: 50%;
  transform: rotateX(80deg);
  filter: blur(20px);
  top: 80%;
  animation: shadowMovement infinite 0.5s;
}

@keyframes shadowMovement {
  0%,
  49% {
    opacity: 0.5;
  }
  50%,
  100% {
    opacity: 0.2;
  }
}



/*仓鼠代码*/
/* From Uiverse.io by Nawsome */
.wheel-and-hamster {
  --dur: 1s;
  position: relative;
  width: 12em;
  height: 12em;
  font-size: 14px;
}

.wheel,
.hamster,
.hamster div,
.spoke {
  position: absolute;
}

.wheel,
.spoke {
  border-radius: 50%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wheel {
  background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%);
  z-index: 2;
}

.hamster {
  animation: hamster var(--dur) ease-in-out infinite;
  top: 50%;
  left: calc(50% - 3.5em);
  width: 7em;
  height: 3.75em;
  transform: rotate(4deg) translate(-0.8em,1.85em);
  transform-origin: 50% 0;
  z-index: 1;
}

.hamster__head {
  animation: hamsterHead var(--dur) ease-in-out infinite;
  background: hsl(30,90%,55%);
  border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
  box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,
		0.75em -1.55em 0 hsl(30,90%,90%) inset;
  top: 0;
  left: -2em;
  width: 2.75em;
  height: 2.5em;
  transform-origin: 100% 50%;
}

.hamster__ear {
  animation: hamsterEar var(--dur) ease-in-out infinite;
  background: hsl(0,90%,85%);
  border-radius: 50%;
  box-shadow: -0.25em 0 hsl(30,90%,55%) inset;
  top: -0.25em;
  right: -0.25em;
  width: 0.75em;
  height: 0.75em;
  transform-origin: 50% 75%;
}

.hamster__eye {
  animation: hamsterEye var(--dur) linear infinite;
  background-color: hsl(0,0%,0%);
  border-radius: 50%;
  top: 0.375em;
  left: 1.25em;
  width: 0.5em;
  height: 0.5em;
}

.hamster__nose {
  background: hsl(0,90%,75%);
  border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
  top: 0.75em;
  left: 0;
  width: 0.2em;
  height: 0.25em;
}

.hamster__body {
  animation: hamsterBody var(--dur) ease-in-out infinite;
  background: hsl(30,90%,90%);
  border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
  box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset,
		0.15em -0.5em 0 hsl(30,90%,80%) inset;
  top: 0.25em;
  left: 2em;
  width: 4.5em;
  height: 3em;
  transform-origin: 17% 50%;
  transform-style: preserve-3d;
}

.hamster__limb--fr,
.hamster__limb--fl {
  clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
  top: 2em;
  left: 0.5em;
  width: 1em;
  height: 1.5em;
  transform-origin: 50% 0;
}

.hamster__limb--fr {
  animation: hamsterFRLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);
  transform: rotate(15deg) translateZ(-1px);
}

.hamster__limb--fl {
  animation: hamsterFLLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%);
  transform: rotate(15deg);
}

.hamster__limb--br,
.hamster__limb--bl {
  border-radius: 0.75em 0.75em 0 0;
  clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
  top: 1em;
  left: 2.8em;
  width: 1.5em;
  height: 2.5em;
  transform-origin: 50% 30%;
}

.hamster__limb--br {
  animation: hamsterBRLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%);
  transform: rotate(-25deg) translateZ(-1px);
}

.hamster__limb--bl {
  animation: hamsterBLLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%);
  transform: rotate(-25deg);
}

.hamster__tail {
  animation: hamsterTail var(--dur) linear infinite;
  background: hsl(0,90%,85%);
  border-radius: 0.25em 50% 50% 0.25em;
  box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset;
  top: 1.5em;
  right: -0.5em;
  width: 1em;
  height: 0.5em;
  transform: rotate(30deg) translateZ(-1px);
  transform-origin: 0.25em 0.25em;
}

.spoke {
  animation: spoke var(--dur) linear infinite;
  background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%),
		linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat;
}

/* Animations */
@keyframes hamster {
  from, to {
    transform: rotate(4deg) translate(-0.8em,1.85em);
  }

  50% {
    transform: rotate(0) translate(-0.8em,1.85em);
  }
}

@keyframes hamsterHead {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(8deg);
  }
}

@keyframes hamsterEye {
  from, 90%, to {
    transform: scaleY(1);
  }

  95% {
    transform: scaleY(0);
  }
}

@keyframes hamsterEar {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(12deg);
  }
}

@keyframes hamsterBody {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-2deg);
  }
}

@keyframes hamsterFRLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(50deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-30deg) translateZ(-1px);
  }
}

@keyframes hamsterFLLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(-30deg);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(50deg);
  }
}

@keyframes hamsterBRLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(-60deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(20deg) translateZ(-1px);
  }
}

@keyframes hamsterBLLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(20deg);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-60deg);
  }
}

@keyframes hamsterTail {
  from, 25%, 50%, 75%, to {
    transform: rotate(30deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(10deg) translateZ(-1px);
  }
}

@keyframes spoke {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(-1turn);
  }
}


/*仓鼠章鱼向右*/
.animal-container {
    display: flex; /* 使用 flexbox 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    gap: 40vw; /* 两个元素之间的间距为视口宽度的 10% */
}

/*星球大战黑武士*/
/* From Uiverse.ioby csemszepp */
::-moz-selection {
  background: #2D3363;
  color: #FAEECF
}

::selection {
  background: #2D3363;
  color: #FAEECF
}

.text {
  position: absolute;
  bottom: 20px;
  left: 25px;
  color: black;
  font-family: Arial,sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 28px;
  font-weight: bold;
  letter-spacing: 2px;
  z-index: 99
}


.vader {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%)
}

.vader .head {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: -10px;
  z-index: 1
}

.vader .helmet {
  position: absolute;
  top: 0;
  left: 5px;
  width: 90px;
  height: 80px;
  background: #222222;
  border-radius: 80px 80px 0 0
}

.vader .helmet::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 50px;
  height: 8px;
  margin-left: -25px;
  background: #040507;
  border-radius: 25px 25px 0 0 / 8px 8px 0 0
}

.vader .helmet::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 8px;
  left: 50%;
  margin-left: -25px;
  height: 0;
  width: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 24px solid #040507
}

.vader .helmet span {
  position: absolute;
  top: 50%;
  width: 35px;
  height: 55px;
  background: #040507
}

.vader .helmet .left {
  left: -6px;
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg)
}

.vader .helmet .right {
  right: -6px;
  -webkit-transform: rotate(-25deg);
  transform: rotate(-25deg)
}

.vader .helmet span::before {
  content: '';
  position: absolute;
  top: -5px;
  width: 8px;
  height: 55px;
  background: #222222
}

.vader .helmet .left::before {
  left: 0
}

.vader .helmet .right::before {
  right: 0
}

.vader .line {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 38px;
  margin-left: -3px;
  background: #343434
}

.vader .line::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: -4px;
  bottom: 0;
  width: 4px;
  height: 12px;
  background: #040507
}

.vader .line::after {
  content: '';
  display: inline-block;
  position: absolute;
  right: -4px;
  bottom: 0;
  width: 4px;
  height: 12px;
  background: #040507
}

.vader .mask {
  position: absolute;
  bottom: 19px;
  left: 50%
}

.vader .mask span {
  position: absolute;
  top: 0;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #C6C6C6
}

.vader .mask .top {
  left: 50%;
  margin-top: -16px;
  margin-left: -2px
}

.vader .mask .top::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: -7px;
  top: -2px;
  width: 4px;
  height: 24px;
  background: #040507;
  border-radius: 4px;
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg)
}

.vader .mask .top::after {
  content: '';
  display: inline-block;
  position: absolute;
  right: -7px;
  top: -2px;
  width: 4px;
  height: 24px;
  background: #040507;
  border-radius: 4px;
  -webkit-transform: rotate(-40deg);
  transform: rotate(-40deg)
}

.vader .mask .left {
  left: 12px
}

.vader .mask .center {
  left: 50%;
  margin-top: -16px;
  margin-left: -2px
}

.vader .mask .right {
  right: 12px
}

.vader .grill {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 20px;
  margin-left: -10px
}

.vader .grill span {
  position: absolute;
  bottom: -5px;
  width: 2px;
  margin-left: -1px;
  background: #C6C6C6
}

.vader .grill .left {
  left: 4px;
  height: 10px
}

.vader .grill .center {
  left: 50%;
  height: 17px
}

.vader .grill .right {
  right: 2px;
  height: 10px
}

.vader .eyes {
  position: absolute;
  top: 35px;
  left: 10px;
  width: 80px;
  height: 40px;
  border-radius: 40px;
  background: #343434
}

.vader .eyes::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 33px;
  left: 5px;
  height: 0;
  width: 0;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-top: 30px solid #343434
}

.vader .eyes span {
  position: absolute;
  top: 5px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background: #010000;
  -webkit-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out
}

.vader .eyes .left {
  left: 7px
}

.vader .eyes .right {
  right: 7px
}

.vader .torso {
  position: relative;
  width: 60px;
  height: 80px;
  border-radius: 50px 50px 0 0;
  margin: 0 auto;
  background: #222222
}

.vader .torso::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: -20px;
  top: -15px;
  width: 100px;
  height: 115px;
  border-radius: 50px 50px 0 0;
  margin: 0 auto;
  background: #040507;
  z-index: -1
}

.vader .belt {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10px;
  background: #040507
}

.vader .belt span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 20px;
  height: 10px;
  border-radius: 10px;
  margin-left: -10px;
  background: #C6C6C6
}

.vader .neck {
  position: absolute;
  left: 6px;
  top: 3px;
  width: 48px;
  height: 8px;
  background: #010000;
  z-index: 5
}

.vader .neck::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 8px;
  width: 32px;
  height: 10px;
  background: #222222;
  border-radius: 0 0 4px 4px
}

.vader .neck::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 8px;
  width: 32px;
  height: 1px;
  background: #666666
}

.vader .neck span {
  position: absolute;
  top: 0;
  width: 6px;
  height: 125%;
  margin-left: -3px;
  background: #434343
}

.vader .neck .left {
  left: 6px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  border-radius: 5px 0 0 0
}

.vader .neck .center {
  left: 50%;
  top: 2px
}

.vader .neck .right {
  right: 3px;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
  border-radius: 0 5px 0 0
}

.vader .neck .bottom {
  position: absolute;
  top: 8px;
  left: 4px;
  width: 46px;
  height: 5px;
  background: #222222
}

.vader .plate {
  position: absolute;
  left: 15px;
  top: 25px;
  width: 30px;
  height: 32px;
  background: #343434
}

.vader .plate .red_top {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 12px;
  height: 18px;
  background: #d81f27
}

.vader .plate .red_top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: rgba(0,0,0,0.2)
}

.vader .plate .red_top::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #343434
}

.vader .plate .red_center {
  position: absolute;
  right: 2px;
  top: 12px;
  width: 12px;
  height: 8px;
  background: #d81f27
}

.vader .plate .red_center::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 100%;
  height: 4px;
  background: rgba(0,0,0,0.2)
}

.vader .plate .red_center::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  width: 2px;
  height: 100%;
  background: #343434
}

.vader .plate .red_bottom {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 4px;
  height: 8px;
  background: #d81f27
}

.vader .plate .blue {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 12px;
  height: 8px;
  background: #455caa
}

.vader .plate .blue::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #343434
}

.vader .plate .gray {
  position: absolute;
  left: 2px;
  bottom: 2px;
  width: 20px;
  height: 8px;
  background: #9f9fa1
}

.vader .plate .gray::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  width: 2px;
  height: 100%;
  background: #343434
}

.vader .plate .gray::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: rgba(0,0,0,0.2)
}

.vader .legs {
  position: relative;
  width: 50px;
  height: 20px;
  margin: 0 auto;
  background: #222222
}

.vader .legs::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 20px;
  height: 100%;
  margin-left: -10px;
  background: #040507
}

.vader .boots {
  position: absolute;
  bottom: 0;
  left: 50%
}

.vader .boots span {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  width: 30px;
  height: 10px;
  background: #040507
}

.vader .boots .left {
  left: 10px;
  border-radius: 0 15px 0 0
}

.vader .boots .right {
  right: 10px;
  border-radius: 15px 0 0 0
}

.vader .hand {
  position: absolute;
  top: 60%;
  z-index: 2
}

.vader .hand.left {
  left: -2px;
  top: 82%
}

.vader .hand.right {
  right: -20px
}

.vader .hand .hand {
  position: absolute;
  top: 0;
  width: 11px;
  height: 22px;
  margin-top: -12px;
  margin-left: -12px;
  background: #040507
}

.vader .hand.left .hand {
  left: 0;
  border-radius: 22px 0 0 22px
}

.vader .hand.right .hand {
  right: 0;
  width: 22px;
  border-radius: 22px
}

.vader .sword {
  position: absolute;
  top: 50%;
  left: -20px;
  z-index: 10
}

.vader .sword .handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 30px;
  margin-left: -3px;
  background: #343434
}

.vader .sword .handle::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 100%;
  height: 5px;
  background: #888888
}

.vader .sword .handle::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 5px;
  width: 4px;
  height: 5px;
  background: #343434
}

.vader .sword .light {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 120px;
  margin-left: -10px;
  background: rgba(248,80,50,0);
  background: -moz-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);
  background: -webkit-gradient(left top, right top, color-stop(10%, rgba(248,80,50,0)), color-stop(20%, rgba(247,67,37,0)), color-stop(40%, rgba(246,41,12,0.67)), color-stop(50%, rgba(255,176,166,1)), color-stop(60%, rgba(246,41,12,0.67)), color-stop(80%, rgba(236,51,30,0)), color-stop(90%, rgba(231,56,39,0)));
  background: -webkit-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);
  background: -o-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);
  background: -ms-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);
  background: linear-gradient(to right, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);
}

.vader .sword .light::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 3px;
  height: 120px;
  margin-left: -1px;
  background: rgba(248,80,50,1);
  z-index: -1
}

.vader .shadow {
  position: absolute;
  bottom: -17px;
  left: -25px;
  display: block;
  width: 150px;
  height: 14px;
  background: rgba(0,0,0,0.15);
  border-radius: 50%
}

.animation-right {
  -webkit-animation: animationHandRight 1.5s linear infinite;
  animation: animationHandRight 1.5s linear infinite
}

@-webkit-keyframes animationHandRight {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes animationHandRight {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

.animation-left {
  -webkit-animation: animationHandLeft 3s ease-in-out infinite;
  animation: animationHandLeft 3s ease-in-out infinite
}

@-webkit-keyframes animationHandLeft {
  0%, 100% {
    -webkit-transform: translateX(0) rotate(-25deg);
    transform: translateX(0) rotate(-25deg)
  }

  50% {
    -webkit-transform: translateX(150px) rotate(25deg);
    transform: translateX(150px) rotate(25deg)
  }
}

@keyframes animationHandLeft {
  0%, 100% {
    -webkit-transform: translateX(0) rotate(-25deg);
    transform: translateX(0) rotate(-25deg)
  }

  50% {
    -webkit-transform: translateX(150px) rotate(25deg);
    transform: translateX(150px) rotate(25deg)
  }
}

.vader:hover .eyes .left {
  background: #d81f27
}

.vader:hover .eyes .right {
  background: #455caa
}


/*吃逗人*/

/*精灵球*/
/* From Uiverse.io by doniaskima */
/* HTML: <div class="loader"></div> */
.loader {
height: 60px;
aspect-ratio: 1;
position: relative;
}

.loader::before,
.loader::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
transform-origin: bottom;
}

.loader::after {
background: radial-gradient(at 75% 15%,#fffb,#0000 35%),
    radial-gradient(at 80% 40%,#0000,#0008),
    radial-gradient(circle  5px,#fff 94%,#0000),
    radial-gradient(circle 10px,#000 94%,#0000),
    linear-gradient(#F93318 0 0) top   /100% calc(50% - 5px),
    linear-gradient(#fff    0 0) bottom/100% calc(50% - 5px)
    #000;
background-repeat: no-repeat;
animation: l20 1s infinite cubic-bezier(0.5,120,0.5,-120);
}

.loader::before {
background: #ddd;
filter: blur(8px);
transform: scaleY(0.4) translate(-13px, 0px);
}

@keyframes l20 {

30%,70% {
    transform: rotate(0deg)
}

49.99% {
    transform: rotate(0.2deg)
}

50% {
    transform: rotate(-0.2deg)
}
}


/*黄色格子*/
/* From Uiverse.io by adamgiebl */
.button_x {
  background: #fbca1f;
  font-family: inherit;
  padding: 0.6em 1.3em;
  font-weight: 900;
  font-size: 18px;
  border: 3px solid black;
  border-radius: 0.4em;
  box-shadow: 0.1em 0.1em;
  cursor: pointer;
}

.button_x:hover {
  transform: translate(-0.05em, -0.05em);
  box-shadow: 0.15em 0.15em;
}

.button_x:active {
  transform: translate(0.05em, 0.05em);
  box-shadow: 0.05em 0.05em;
}

/*黄色格子2*/
/* From Uiverse.io by augustin_4687 */
.button_x2 {
  --stone-50: #fafaf9;
  --stone-800: #292524;
  --yellow-400: #facc15;

  font-size: 1rem;
  cursor: pointer;
  position: relative;
  font-family: "Rubik", sans-serif;
  font-weight: bold;
  line-height: 1;
  padding: 1px;
  transform: translate(-4px, -4px);
  outline: 2px solid transparent;
  outline-offset: 5px;
  border-radius: 9999px;
  background-color: var(--stone-800);
  color: var(--stone-800);
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
  text-align: center;
  box-shadow:
    0.5px 0.5px 0 0 var(--stone-800),
    1px 1px 0 0 var(--stone-800),
    1.5px 1.5px 0 0 var(--stone-800),
    2px 2px 0 0 var(--stone-800),
    2.5px 2.5px 0 0 var(--stone-800),
    3px 3px 0 0 var(--stone-800),
    0 0 0 2px var(--stone-50),
    0.5px 0.5px 0 2px var(--stone-50),
    1px 1px 0 2px var(--stone-50),
    1.5px 1.5px 0 2px var(--stone-50),
    2px 2px 0 2px var(--stone-50),
    2.5px 2.5px 0 2px var(--stone-50),
    3px 3px 0 2px var(--stone-50),
    3.5px 3.5px 0 2px var(--stone-50),
    4px 4px 0 2px var(--stone-50);

  &:hover {
    transform: translate(0, 0);
    box-shadow: 0 0 0 2px var(--stone-50);
  }

  &:active,
  &:focus-visible {
    outline-color: var(--yellow-400);
  }

  &:focus-visible {
    outline-style: dashed;
  }

  & > div {
    position: relative;
    pointer-events: none;
    background-color: var(--yellow-400);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 9999px;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 9999px;
      opacity: 0.5;
      background-image: radial-gradient(
          rgb(255 255 255 / 80%) 20%,
          transparent 20%
        ),
        radial-gradient(rgb(255 255 255 / 100%) 20%, transparent 20%);
      background-position:
        0 0,
        4px 4px;
      background-size: 8px 8px;
      mix-blend-mode: hard-light;
      animation: dots 0.5s infinite linear;
    }

    & > span {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem 1.25rem;
      gap: 0.25rem;
      filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.25));

      &:active {
        transform: translateY(2px);
      }
    }
  }
}

@keyframes dots {
  0% {
    background-position:
      0 0,
      4px 4px;
  }
  100% {
    background-position:
      8px 0,
      12px 4px;
  }
}







/*地球*/
/* From Uiverse.io by Novaxlo */
.earth-loader {
  --watercolor: #3344c1;
  --landcolor: #7cc133;
  width: 7.5em;
  height: 7.5em;
  background-color: var(--watercolor);
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  box-shadow:
    inset 0em 0.5em rgb(255, 255, 255, 0.25),
    inset 0em -0.5em rgb(0, 0, 0, 0.25);
  border: solid 0.15em white;
  animation: startround 1s;
  animation-iteration-count: 1;
}

.earth p {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.25em;
  font-size: 1.25em;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.earth-loader svg:nth-child(1) {
  position: absolute;
  bottom: -2em;
  width: 7em;
  height: auto;
  animation: round1 5s infinite linear 0.75s;
}

.earth-loader svg:nth-child(2) {
  position: absolute;
  top: -3em;
  width: 7em;
  height: auto;
  animation: round1 5s infinite linear;
}
.earth-loader svg:nth-child(3) {
  position: absolute;
  top: -2.5em;
  width: 7em;
  height: auto;
  animation: round2 5s infinite linear;
}
.earth-loader svg:nth-child(4) {
  position: absolute;
  bottom: -2.2em;
  width: 7em;
  height: auto;
  animation: round2 5s infinite linear 0.75s;
}

@keyframes startround {
  0% {
    filter: brightness(500%);
    box-shadow: none;
  }
  75% {
    filter: brightness(500%);
    box-shadow: none;
  }
  100% {
    filter: brightness(100%);
    box-shadow:
      inset 0em 0.5em rgb(255, 255, 255, 0.25),
      inset 0em -0.5em rgb(0, 0, 0, 0.25);
  }
}

@keyframes round1 {
  0% {
    left: -2em;
    opacity: 100%;
    transform: skewX(0deg) rotate(0deg);
  }
  30% {
    left: -6em;
    opacity: 100%;
    transform: skewX(-25deg) rotate(25deg);
  }
  31% {
    left: -6em;
    opacity: 0%;
    transform: skewX(-25deg) rotate(25deg);
  }
  35% {
    left: 7em;
    opacity: 0%;
    transform: skewX(25deg) rotate(-25deg);
  }
  45% {
    left: 7em;
    opacity: 100%;
    transform: skewX(25deg) rotate(-25deg);
  }
  100% {
    left: -2em;
    opacity: 100%;
    transform: skewX(0deg) rotate(0deg);
  }
}

@keyframes round2 {
  0% {
    left: 5em;
    opacity: 100%;
    transform: skewX(0deg) rotate(0deg);
  }
  75% {
    left: -7em;
    opacity: 100%;
    transform: skewX(-25deg) rotate(25deg);
  }
  76% {
    left: -7em;
    opacity: 0%;
    transform: skewX(-25deg) rotate(25deg);
  }
  77% {
    left: 8em;
    opacity: 0%;
    transform: skewX(25deg) rotate(-25deg);
  }
  80% {
    left: 8em;
    opacity: 100%;
    transform: skewX(25deg) rotate(-25deg);
  }
  100% {
    left: 5em;
    opacity: 100%;
    transform: skewX(0deg) rotate(0deg);
  }
}


/*地球居中*/
/* 让地球整体在卡片里水平居中 */
.earth{
    display:flex;
    flex-direction:column;
    align-items:center;   /* 水平居中 */
}

/* 保持原来的大小与动画 */
.earth-loader{
    width:7.5em;          /* 恢复原来的尺寸 */
    height:7.5em;
    margin:0 auto;        /* 水平居中 */
    /* 其余属性保持不动，不要加 position:relative 以外的 flex 布局 */
}


/*按钮*/
/* From Uiverse.io by arthur_6104 */
/* 专用按钮样式 - 添加特定前缀避免冲突 */

/* 其余原有样式保持不变... */
.uiverse-button-inner {
  background-color: #ff8300;
  border: 4px solid #dae1dd;
  padding: 3px 8px;
}

.uiverse-button-text {
  font-size: 1.2em;
  letter-spacing: 1px;
  font-family: inherit; /* 继承字体 */
}

/* 点击效果 */
.uiverse-push-button:active {
  padding: 0;
  margin-bottom: 10px;
  transform: translateY(10px);
}

/* 悬停效果增强 */
.uiverse-push-button:hover {
  filter: brightness(95%);
}

/* 新增容器样式 */
.button-container {
  display: flex;
  justify-content: flex-end; /* 将内容推到右侧 */
  width: 100%;
  padding: 20px; /* 可根据需要调整 */
}

/* 原有按钮样式保持不变 */
.uiverse-push-button {
  cursor: pointer;
  border: 4px solid black;
  background-color: gray;
  padding-bottom: 10px;
  transition: 0.1s ease-in-out;
  user-select: none;
  display: inline-block;
}




/*横线按钮open AI*/
/* 专一化OpenAI按钮样式 - 所有类名添加oa-前缀防止冲突 */
.oa-brutalist-button {
  --oa-primary-color: #1c5749;
  --oa-hover-color: #301140;
  --oa-text-color: #dadada;
  --oa-accent-color: #2eae7f;
  --oa-border-color: #000;
  --oa-shadow-color: #000;
  --oa-active-shadow: #020504;

  display: flex;
  align-items: center;
  width: 240px;
  height: 70px;
  background-color: var(--oa-primary-color);
  color: var(--oa-text-color);
  text-decoration: none;
  font-weight: bold;
  border: 3px solid var(--oa-border-color);
  padding: 0 12px;
  box-sizing: border-box;
  position: relative;
  box-shadow: 5px 5px 0 var(--oa-shadow-color);
  overflow: hidden;
  transition: all 0.3s ease;
  font-family: inherit;
  margin: 0;
}

.oa-brutalist-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: all 0.6s ease;
}

.oa-brutalist-button:hover::before {
  left: 100%;
}

.oa-brutalist-button:hover {
  background-color: var(--oa-hover-color);
  border: 3px solid var(--oa-border-color);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--oa-active-shadow);
}

.oa-brutalist-button:active {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--oa-shadow-color);
}

@keyframes oa-spin-zoom {
  0% {
    transform: rotate(0deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1.1);
  }
}

.oa-brutalist-button:hover .oa-icon {
  animation: oa-spin-zoom 1s linear infinite;
}

.oa-logo-container {
  display: flex;
  align-items: center;
  margin-right: 16px;
}

.oa-icon {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  margin-bottom: 2px;
  fill: var(--oa-border-color);
  transition: all 0.3s ease;
}

.oa-logo-text {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--oa-text-color);
  transition: all 0.3s ease;
}

.oa-button-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.oa-powered-by {
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.oa-gpt-text {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.oa-brutalist-button:hover .oa-gpt-text {
  color: var(--oa-accent-color);
}


/* 添加容器样式使按钮居中 */
.oa-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  margin: 0 auto;
}

/* 修改按钮宽度并保持其他样式 */
.oa-brutalist-button {
  --oa-primary-color: #1c5749;
  --oa-hover-color: #301140;
  --oa-text-color: #dadada;
  --oa-accent-color: #2eae7f;
  --oa-border-color: #000;
  --oa-shadow-color: #000;
  --oa-active-shadow: #020504;

  display: flex;
  align-items: center;
  width: 1300px; /* 从240px增加到400px */
  height: 70px;
  background-color: var(--oa-primary-color);
  color: var(--oa-text-color);
  text-decoration: none;
  font-weight: bold;
  border: 3px solid var(--oa-border-color);
  padding: 0 20px; /* 增加内边距以适应更大宽度 */
  box-sizing: border-box;
  position: relative;
  box-shadow: 5px 5px 0 var(--oa-shadow-color);
  overflow: hidden;
  transition: all 0.3s ease;
  font-family: inherit;
  margin: 0;
}

/* 调整logo和文本间距以适应更大宽度 */
.oa-logo-container {
  margin-right: 30px; /* 从16px增加到30px */
}

/* 保持其他样式不变 */



/*横线按钮2*/

/* 按钮容器 - 用于居中 */
.brutal-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 40px 0;
}

/* 专一化按钮样式 */
.brutal-btn {
  --brutal-btn-radius: 0.75em;
  --brutal-btn-color: #e8e8e8;
  --brutal-btn-outline: #000000;
  --brutal-hover-offset: 4px;
  --brutal-active-offset: 2px;
  --brutal-shadow-color: rgba(0, 0, 0, 0.5);
  --brutal-glitch-offset: 2px;

  font-size: 17px;
  font-weight: bold;
  border: none;
  width: 1300px; /* 设置为1000px宽度 */
  border-radius: var(--brutal-btn-radius);
  background: var(--brutal-btn-outline);
  position: relative;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: inherit;
}

.brutal-btn-top {
  display: block;
  box-sizing: border-box;
  border: 5px solid var(--brutal-btn-outline);
  border-radius: var(--brutal-btn-radius);
  padding: 0.75em 1.5em;
  background: var(--brutal-btn-color);
  color: var(--brutal-btn-outline);
  transform: translateY(-0.2em);
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.brutal-btn:hover {
  box-shadow: var(--brutal-hover-offset) var(--brutal-hover-offset) 0 var(--brutal-shadow-color);
  transform: translate(
    calc(-1 * var(--brutal-hover-offset)),
    calc(-1 * var(--brutal-hover-offset))
  );
}

.brutal-btn:hover .brutal-btn-top {
  transform: translateY(-0.33em);
}

.brutal-btn:active .brutal-btn-top {
  transform: translateY(0);
}

.brutal-btn:active {
  box-shadow: var(--brutal-active-offset) var(--brutal-active-offset) 0 var(--brutal-shadow-color);
  transform: translate(
    calc(-1 * var(--brutal-active-offset)),
    calc(-1 * var(--brutal-active-offset))
  );
}

.brutal-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--brutal-btn-outline),
    inset 0 0 0 2px var(--brutal-btn-color);
}

/* Brutalist hover effect */
.brutal-btn::before,
.brutal-btn::after {
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--brutal-btn-color);
  color: var(--brutal-btn-outline);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
  border-radius: var(--brutal-btn-radius);
  opacity: 0;
}

/* Brutalist active effect */
.brutal-btn:active::before,
.brutal-btn:active::after {
  transform: none;
}

/* 重命名动画 */
@keyframes brutal-btn-shake {
  0%,
  100% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(-2px) translateY(-2px) rotate(-1deg);
  }
  75% {
    transform: translateX(2px) translateY(2px) rotate(1deg);
  }
}

.brutal-btn:hover {
  animation: brutal-btn-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}



/*超级马里奥*/
/* From Uiverse.io by Pinparker */
.brick {
  height: 2px;
  width: 2px;
  box-shadow: 2px 2px 0px #ff9999, 4px 2px 0px #ff9999, 6px 2px 0px #ff9999,
    8px 2px 0px #ff9999, 10px 2px 0px #ff9999, 12px 2px 0px #ff9999,
    14px 2px 0px #ff9999, 16px 2px 0px #ff9999, 18px 2px 0px #ff9999,
    20px 2px 0px #ff9999, 22px 2px 0px #ff9999, 24px 2px 0px #ff9999,
    26px 2px 0px #ff9999, 28px 2px 0px #ff9999, 30px 2px 0px #ff9999,
    32px 2px 0px #ff9999, 2px 4px 0px #cc3300, 4px 4px 0px #cc3300,
    6px 4px 0px #cc3300, 8px 4px 0px #cc3300, 10px 4px 0px #cc3300,
    12px 4px 0px #cc3300, 14px 4px 0px #cc3300, 16px 4px 0px #000,
    18px 4px 0px #cc3300, 20px 4px 0px #cc3300, 22px 4px 0px #cc3300,
    24px 4px 0px #cc3300, 26px 4px 0px #cc3300, 28px 4px 0px #cc3300,
    30px 4px 0px #cc3300, 32px 4px 0px #000, 2px 6px 0px #cc3300,
    4px 6px 0px #cc3300, 6px 6px 0px #cc3300, 8px 6px 0px #cc3300,
    10px 6px 0px #cc3300, 12px 6px 0px #cc3300, 14px 6px 0px #cc3300,
    16px 6px 0px #000, 18px 6px 0px #cc3300, 20px 6px 0px #cc3300,
    22px 6px 0px #cc3300, 24px 6px 0px #cc3300, 26px 6px 0px #cc3300,
    28px 6px 0px #cc3300, 30px 6px 0px #cc3300, 32px 6px 0px #000,
    2px 8px 0px #000, 4px 8px 0px #000, 6px 8px 0px #000, 8px 8px 0px #000,
    10px 8px 0px #000, 12px 8px 0px #000, 14px 8px 0px #000, 16px 8px 0px #000,
    18px 8px 0px #000, 20px 8px 0px #000, 22px 8px 0px #000, 24px 8px 0px #000,
    26px 8px 0px #000, 28px 8px 0px #000, 30px 8px 0px #000, 32px 8px 0px #000,
    2px 10px 0px #cc3300, 4px 10px 0px #cc3300, 6px 10px 0px #cc3300,
    8px 10px 0px #000, 10px 10px 0px #cc3300, 12px 10px 0px #cc3300,
    14px 10px 0px #cc3300, 16px 10px 0px #cc3300, 18px 10px 0px #cc3300,
    20px 10px 0px #cc3300, 22px 10px 0px #cc3300, 24px 10px 0px #000,
    26px 10px 0px #cc3300, 28px 10px 0px #cc3300, 30px 10px 0px #cc3300,
    32px 10px 0px #cc3300, 2px 12px 0px #cc3300, 4px 12px 0px #cc3300,
    6px 12px 0px #cc3300, 8px 12px 0px #000, 10px 12px 0px #cc3300,
    12px 12px 0px #cc3300, 14px 12px 0px #cc3300, 16px 12px 0px #cc3300,
    18px 12px 0px #cc3300, 20px 12px 0px #cc3300, 22px 12px 0px #cc3300,
    24px 12px 0px #000, 26px 12px 0px #cc3300, 28px 12px 0px #cc3300,
    30px 12px 0px #cc3300, 32px 12px 0px #cc3300, 2px 14px 0px #cc3300,
    4px 14px 0px #cc3300, 6px 14px 0px #cc3300, 8px 14px 0px #000,
    10px 14px 0px #cc3300, 12px 14px 0px #cc3300, 14px 14px 0px #cc3300,
    16px 14px 0px #cc3300, 18px 14px 0px #cc3300, 20px 14px 0px #cc3300,
    22px 14px 0px #cc3300, 24px 14px 0px #000, 26px 14px 0px #cc3300,
    28px 14px 0px #cc3300, 30px 14px 0px #cc3300, 32px 14px 0px #cc3300,
    2px 16px 0px #000, 4px 16px 0px #000, 6px 16px 0px #000, 8px 16px 0px #000,
    10px 16px 0px #000, 12px 16px 0px #000, 14px 16px 0px #000,
    16px 16px 0px #000, 18px 16px 0px #000, 20px 16px 0px #000,
    22px 16px 0px #000, 24px 16px 0px #000, 26px 16px 0px #000,
    28px 16px 0px #000, 30px 16px 0px #000, 32px 16px 0px #000,
    2px 18px 0px #cc3300, 4px 18px 0px #cc3300, 6px 18px 0px #cc3300,
    8px 18px 0px #cc3300, 10px 18px 0px #cc3300, 12px 18px 0px #cc3300,
    14px 18px 0px #cc3300, 16px 18px 0px #000, 18px 18px 0px #cc3300,
    20px 18px 0px #cc3300, 22px 18px 0px #cc3300, 24px 18px 0px #cc3300,
    26px 18px 0px #cc3300, 28px 18px 0px #cc3300, 30px 18px 0px #cc3300,
    32px 18px 0px #000, 2px 20px 0px #cc3300, 4px 20px 0px #cc3300,
    6px 20px 0px #cc3300, 8px 20px 0px #cc3300, 10px 20px 0px #cc3300,
    12px 20px 0px #cc3300, 14px 20px 0px #cc3300, 16px 20px 0px #000,
    18px 20px 0px #cc3300, 20px 20px 0px #cc3300, 22px 20px 0px #cc3300,
    24px 20px 0px #cc3300, 26px 20px 0px #cc3300, 28px 20px 0px #cc3300,
    30px 20px 0px #cc3300, 32px 20px 0px #000, 2px 22px 0px #cc3300,
    4px 22px 0px #cc3300, 6px 22px 0px #cc3300, 8px 22px 0px #cc3300,
    10px 22px 0px #cc3300, 12px 22px 0px #cc3300, 14px 22px 0px #cc3300,
    16px 22px 0px #000, 18px 22px 0px #cc3300, 20px 22px 0px #cc3300,
    22px 22px 0px #cc3300, 24px 22px 0px #cc3300, 26px 22px 0px #cc3300,
    28px 22px 0px #cc3300, 30px 22px 0px #cc3300, 32px 22px 0px #000,
    2px 24px 0px #000, 4px 24px 0px #000, 6px 24px 0px #000, 8px 24px 0px #000,
    10px 24px 0px #000, 12px 24px 0px #000, 14px 24px 0px #000,
    16px 24px 0px #000, 18px 24px 0px #000, 20px 24px 0px #000,
    22px 24px 0px #000, 24px 24px 0px #000, 26px 24px 0px #000,
    28px 24px 0px #000, 30px 24px 0px #000, 32px 24px 0px #000,
    2px 26px 0px #cc3300, 4px 26px 0px #cc3300, 6px 26px 0px #cc3300,
    8px 26px 0px #000, 10px 26px 0px #cc3300, 12px 26px 0px #cc3300,
    14px 26px 0px #cc3300, 16px 26px 0px #cc3300, 18px 26px 0px #cc3300,
    20px 26px 0px #cc3300, 22px 26px 0px #cc3300, 24px 26px 0px #000,
    26px 26px 0px #cc3300, 28px 26px 0px #cc3300, 30px 26px 0px #cc3300,
    32px 26px 0px #cc3300, 2px 28px 0px #cc3300, 4px 28px 0px #cc3300,
    6px 28px 0px #cc3300, 8px 28px 0px #000, 10px 28px 0px #cc3300,
    12px 28px 0px #cc3300, 14px 28px 0px #cc3300, 16px 28px 0px #cc3300,
    18px 28px 0px #cc3300, 20px 28px 0px #cc3300, 22px 28px 0px #cc3300,
    24px 28px 0px #000, 26px 28px 0px #cc3300, 28px 28px 0px #cc3300,
    30px 28px 0px #cc3300, 32px 28px 0px #cc3300, 2px 30px 0px #cc3300,
    4px 30px 0px #cc3300, 6px 30px 0px #cc3300, 8px 30px 0px #000,
    10px 30px 0px #cc3300, 12px 30px 0px #cc3300, 14px 30px 0px #cc3300,
    16px 30px 0px #cc3300, 18px 30px 0px #cc3300, 20px 30px 0px #cc3300,
    22px 30px 0px #cc3300, 24px 30px 0px #000, 26px 30px 0px #cc3300,
    28px 30px 0px #cc3300, 30px 30px 0px #cc3300, 32px 30px 0px #cc3300,
    2px 32px 0px #000, 4px 32px 0px #000, 6px 32px 0px #000, 8px 32px 0px #000,
    10px 32px 0px #000, 12px 32px 0px #000, 14px 32px 0px #000,
    16px 32px 0px #000, 18px 32px 0px #000, 20px 32px 0px #000,
    22px 32px 0px #000, 24px 32px 0px #000, 26px 32px 0px #000,
    28px 32px 0px #000, 30px 32px 0px #000, 32px 32px 0px #000;
}
.brick.one {
  transform: translateX(-60px);
}
.mush {
  height: 2px;
  width: 2px;
  transform: translate(-0px, -0px);
  z-index: -1;
  opacity: 0;
}
.box {
  position: absolute;
  background-color: rgba(46, 37, 37, 0);
  z-index: 3;
  width: 34px;
  height: 34px;
}
.box:hover + .mush {
  animation: mush 0.5s linear forwards;
  opacity: 1;
}
@keyframes mush {
  0% {
    transform: scale(0.8) translate(-8px, -0px);
  }
  50% {
    transform: scale(1.1) translate(-8px, -80px);
  }
  100% {
    transform: scale(1.1) translate(-8px, -45px);
  }
}
.tooltip-mario-container {
  height: 2px;
  width: 2px;
  box-shadow: 4px 2px 0px #ce3100, 6px 2px 0px #ce3100, 8px 2px 0px #ce3100,
    10px 2px 0px #ce3100, 12px 2px 0px #ce3100, 14px 2px 0px #ce3100,
    16px 2px 0px #ce3100, 18px 2px 0px #ce3100, 20px 2px 0px #ce3100,
    22px 2px 0px #ce3100, 24px 2px 0px #ce3100, 26px 2px 0px #ce3100,
    28px 2px 0px #ce3100, 30px 2px 0px #ce3100, 2px 4px 0px #ce3100,
    4px 4px 0px #ff9c31, 6px 4px 0px #ff9c31, 8px 4px 0px #ff9c31,
    10px 4px 0px #ff9c31, 12px 4px 0px #ff9c31, 14px 4px 0px #ff9c31,
    16px 4px 0px #ff9c31, 18px 4px 0px #ff9c31, 20px 4px 0px #ff9c31,
    22px 4px 0px #ff9c31, 24px 4px 0px #ff9c31, 26px 4px 0px #ff9c31,
    28px 4px 0px #ff9c31, 30px 4px 0px #ff9c31, 32px 4px 0px #000,
    2px 6px 0px #ce3100, 4px 6px 0px #ff9c31, 6px 6px 0px #000,
    8px 6px 0px #ff9c31, 10px 6px 0px #ff9c31, 12px 6px 0px #ff9c31,
    14px 6px 0px #ff9c31, 16px 6px 0px #ff9c31, 18px 6px 0px #ff9c31,
    20px 6px 0px #ff9c31, 22px 6px 0px #ff9c31, 24px 6px 0px #ff9c31,
    26px 6px 0px #ff9c31, 28px 6px 0px #000, 30px 6px 0px #ff9c31,
    32px 6px 0px #000, 2px 8px 0px #ce3100, 4px 8px 0px #ff9c31,
    6px 8px 0px #ff9c31, 8px 8px 0px #ff9c31, 10px 8px 0px #ff9c31,
    12px 8px 0px #ce3100, 14px 8px 0px #ce3100, 16px 8px 0px #ce3100,
    18px 8px 0px #ce3100, 20px 8px 0px #ce3100, 22px 8px 0px #ff9c31,
    24px 8px 0px #ff9c31, 26px 8px 0px #ff9c31, 28px 8px 0px #ff9c31,
    30px 8px 0px #ff9c31, 32px 8px 0px #000, 2px 10px 0px #ce3100,
    4px 10px 0px #ff9c31, 6px 10px 0px #ff9c31, 8px 10px 0px #ff9c31,
    10px 10px 0px #ce3100, 12px 10px 0px #ce3100, 14px 10px 0px #000,
    16px 10px 0px #000, 18px 10px 0px #000, 20px 10px 0px #ce3100,
    22px 10px 0px #ce3100, 24px 10px 0px #ff9c31, 26px 10px 0px #ff9c31,
    28px 10px 0px #ff9c31, 30px 10px 0px #ff9c31, 32px 10px 0px #000,
    2px 12px 0px #ce3100, 4px 12px 0px #ff9c31, 6px 12px 0px #ff9c31,
    8px 12px 0px #ff9c31, 10px 12px 0px #ce3100, 12px 12px 0px #ce3100,
    14px 12px 0px #000, 16px 12px 0px #ff9c31, 18px 12px 0px #ff9c31,
    20px 12px 0px #ce3100, 22px 12px 0px #ce3100, 24px 12px 0px #000,
    26px 12px 0px #ff9c31, 28px 12px 0px #ff9c31, 30px 12px 0px #ff9c31,
    32px 12px 0px #000, 2px 14px 0px #ce3100, 4px 14px 0px #ff9c31,
    6px 14px 0px #ff9c31, 8px 14px 0px #ff9c31, 10px 14px 0px #ce3100,
    12px 14px 0px #ce3100, 14px 14px 0px #000, 16px 14px 0px #ff9c31,
    18px 14px 0px #ff9c31, 20px 14px 0px #ce3100, 22px 14px 0px #ce3100,
    24px 14px 0px #000, 26px 14px 0px #ff9c31, 28px 14px 0px #ff9c31,
    30px 14px 0px #ff9c31, 32px 14px 0px #000, 2px 16px 0px #ce3100,
    4px 16px 0px #ff9c31, 6px 16px 0px #ff9c31, 8px 16px 0px #ff9c31,
    10px 16px 0px #ff9c31, 12px 16px 0px #000, 14px 16px 0px #000,
    16px 16px 0px #ff9c31, 18px 16px 0px #ce3100, 20px 16px 0px #ce3100,
    22px 16px 0px #ce3100, 24px 16px 0px #000, 26px 16px 0px #ff9c31,
    28px 16px 0px #ff9c31, 30px 16px 0px #ff9c31, 32px 16px 0px #000,
    2px 18px 0px #ce3100, 4px 18px 0px #ff9c31, 6px 18px 0px #ff9c31,
    8px 18px 0px #ff9c31, 10px 18px 0px #ff9c31, 12px 18px 0px #ff9c31,
    14px 18px 0px #ff9c31, 16px 18px 0px #ce3100, 18px 18px 0px #ce3100,
    20px 18px 0px #000, 22px 18px 0px #000, 24px 18px 0px #000,
    26px 18px 0px #ff9c31, 28px 18px 0px #ff9c31, 30px 18px 0px #ff9c31,
    32px 18px 0px #000, 2px 20px 0px #ce3100, 4px 20px 0px #ff9c31,
    6px 20px 0px #ff9c31, 8px 20px 0px #ff9c31, 10px 20px 0px #ff9c31,
    12px 20px 0px #ff9c31, 14px 20px 0px #ff9c31, 16px 20px 0px #ce3100,
    18px 20px 0px #ce3100, 20px 20px 0px #000, 22px 20px 0px #ff9c31,
    24px 20px 0px #ff9c31, 26px 20px 0px #ff9c31, 28px 20px 0px #ff9c31,
    30px 20px 0px #ff9c31, 32px 20px 0px #000, 2px 22px 0px #ce3100,
    4px 22px 0px #ff9c31, 6px 22px 0px #ff9c31, 8px 22px 0px #ff9c31,
    10px 22px 0px #ff9c31, 12px 22px 0px #ff9c31, 14px 22px 0px #ff9c31,
    16px 22px 0px #ff9c31, 18px 22px 0px #000, 20px 22px 0px #000,
    22px 22px 0px #ff9c31, 24px 22px 0px #ff9c31, 26px 22px 0px #ff9c31,
    28px 22px 0px #ff9c31, 30px 22px 0px #ff9c31, 32px 22px 0px #000,
    2px 24px 0px #ce3100, 4px 24px 0px #ff9c31, 6px 24px 0px #ff9c31,
    8px 24px 0px #ff9c31, 10px 24px 0px #ff9c31, 12px 24px 0px #ff9c31,
    14px 24px 0px #ff9c31, 16px 24px 0px #ce3100, 18px 24px 0px #ce3100,
    20px 24px 0px #ff9c31, 22px 24px 0px #ff9c31, 24px 24px 0px #ff9c31,
    26px 24px 0px #ff9c31, 28px 24px 0px #ff9c31, 30px 24px 0px #ff9c31,
    32px 24px 0px #000, 2px 26px 0px #ce3100, 4px 26px 0px #ff9c31,
    6px 26px 0px #ff9c31, 8px 26px 0px #ff9c31, 10px 26px 0px #ff9c31,
    12px 26px 0px #ff9c31, 14px 26px 0px #ff9c31, 16px 26px 0px #ce3100,
    18px 26px 0px #ce3100, 20px 26px 0px #000, 22px 26px 0px #ff9c31,
    24px 26px 0px #ff9c31, 26px 26px 0px #ff9c31, 28px 26px 0px #ff9c31,
    30px 26px 0px #ff9c31, 32px 26px 0px #000, 2px 28px 0px #ce3100,
    4px 28px 0px #ff9c31, 6px 28px 0px #000, 8px 28px 0px #ff9c31,
    10px 28px 0px #ff9c31, 12px 28px 0px #ff9c31, 14px 28px 0px #ff9c31,
    16px 28px 0px #ff9c31, 18px 28px 0px #000, 20px 28px 0px #000,
    22px 28px 0px #ff9c31, 24px 28px 0px #ff9c31, 26px 28px 0px #ff9c31,
    28px 28px 0px #000, 30px 28px 0px #ff9c31, 32px 28px 0px #000,
    2px 30px 0px #ce3100, 4px 30px 0px #ff9c31, 6px 30px 0px #ff9c31,
    8px 30px 0px #ff9c31, 10px 30px 0px #ff9c31, 12px 30px 0px #ff9c31,
    14px 30px 0px #ff9c31, 16px 30px 0px #ff9c31, 18px 30px 0px #ff9c31,
    20px 30px 0px #ff9c31, 22px 30px 0px #ff9c31, 24px 30px 0px #ff9c31,
    26px 30px 0px #ff9c31, 28px 30px 0px #ff9c31, 30px 30px 0px #ff9c31,
    32px 30px 0px #000, 2px 32px 0px #000, 4px 32px 0px #000, 6px 32px 0px #000,
    8px 32px 0px #000, 10px 32px 0px #000, 12px 32px 0px #000,
    14px 32px 0px #000, 16px 32px 0px #000, 18px 32px 0px #000,
    20px 32px 0px #000, 22px 32px 0px #000, 24px 32px 0px #000,
    26px 32px 0px #000, 28px 32px 0px #000, 30px 32px 0px #000,
    32px 32px 0px #000;
  position: absolute;
  transform: translate(-30px);
  z-index: 3;
}



/* 让 CYBER 自己居中，并留上下间距 */
.cyber-glitch {
  position: relative;
  font-family: "Orbitron", sans-serif;
  font-size: 40px;
  font-weight: 900;
  text-transform: uppercase;
  color: #00ffff;

  /* 关键：撑满一行，文字居中 */
  display: block;
  text-align: center;
  margin: 35px auto;   /* 上下间距 */

  /* 原有 glitch 阴影 */
  text-shadow:
    0.05em 0 0 #ff00ff,
    -0.03em -0.04em 0 #ffff00,
    0.025em 0.04em 0 #00ffff;
  animation: cyber-glitch-anim 725ms infinite;
}

/* 两层残影：先水平居中，再分别微调 */
.cyber-glitch-layer {
  position: absolute;
  top: 0;
  left: 50%;                /* 拉到中心线 */
  transform: translateX(-50%); /* 真正居中 */
  width: max-content;       /* 保证裁切后宽度不变 */
}

.cyber-glitch-layer:first-child {
  animation: cyber-glitch-anim 500ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  /* 上下/左右微抖 */
  transform: translateX(-50%) translate(-0.04em, -0.03em);
  opacity: 0.75;
}

.cyber-glitch-layer:last-child {
  animation: cyber-glitch-anim 375ms infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translateX(-50%) translate(0.04em, 0.03em);
  opacity: 0.75;
}
/* ========= 结束 ========= */

@keyframes cyber-glitch-anim {
  0% {
    text-shadow:
      0.05em 0 0 #ff00ff,
      -0.03em -0.04em 0 #ffff00,
      0.025em 0.04em 0 #00ffff;
  }
  15% {
    text-shadow:
      0.05em 0 0 #ff00ff,
      -0.03em -0.04em 0 #ffff00,
      0.025em 0.04em 0 #00ffff;
  }
  16% {
    text-shadow:
      -0.05em -0.025em 0 #ff00ff,
      0.025em 0.035em 0 #ffff00,
      -0.05em -0.05em 0 #00ffff;
  }
  49% {
    text-shadow:
      -0.05em -0.025em 0 #ff00ff,
      0.025em 0.035em 0 #ffff00,
      -0.05em -0.05em 0 #00ffff;
  }
  50% {
    text-shadow:
      0.05em 0.035em 0 #ff00ff,
      0.03em 0 0 #ffff00,
      0 -0.04em 0 #00ffff;
  }
  99% {
    text-shadow:
      0.05em 0.035em 0 #ff00ff,
      0.03em 0 0 #ffff00,
      0 -0.04em 0 #00ffff;
  }
  100% {
    text-shadow:
      -0.05em 0 0 #ff00ff,
      -0.025em -0.04em 0 #ffff00,
      -0.04em -0.025em 0 #00ffff;
  }
}