/* Card styles adapted to primary color #9fdc39, responsive and stretched */

.outer {
  /* Make the card container responsive with aspect ratio */
  width: 90vw;          /* 90% of viewport width */
  max-width: 400px;     /* cap at 400px for large screens */
  margin: 0 auto;       /* center horizontally */
  aspect-ratio: 5 / 3;   /* flatter horizontal ratio (width/height) */
  background: radial-gradient(circle 230px at 0% 0%, #ffffff, #9fdc39);
  position: relative;
  border-radius: 10px;
}

.dot {
  width: 5px; aspect-ratio: 1; position: absolute;
  background-color: #fff; box-shadow: 0 0 10px #ffffff; border-radius: 100%;
  z-index: 2;left: calc(10% - 2.5px); top: 10%; animation: moveDot 6s linear infinite;
}

@keyframes moveDot {
  0%, 100% {left: calc(10% - 2.5px); top: 10%;}
  25% {left: calc(100% - 40px); top: 10%;}
  50% {left: calc(100% - 40px); top: calc(100% - 30px);}
  75% {left: calc(10% - 2.5px); top: calc(100% - 30px);}}

.card {
  z-index: 1; width: 100%; height: 100%; border-radius: 9px;
  opacity: 0.8; /* 半透明 */
  border: solid 1px #202222; background-size: 20px 20px;
  background: radial-gradient(circle 280px at 0% 0%, #9fdc39, #0c0d0d);
  display: flex; align-items: center; justify-content: center; position: relative;
  flex-direction: column; color: #fff;
}

.ray {
  width: 220px; height: 45px; border-radius: 100px; position: absolute;
  background-color: #c7c7c7; opacity: 0.4; box-shadow: 0 0 50px #fff; filter: blur(10px);
  transform-origin: 10%; top: 0; left: 0; transform: rotate(40deg);
}

.card .text {
  font-weight: bolder;
  font-size: clamp(1rem, 5vw, 3rem); /* responsive size, smaller on narrow screens */
  background: linear-gradient(45deg, #9fdc39 0%, #fff 50%, #9fdc39 100%);
  background-clip: text; color: transparent;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
}

.line { width: 100%; height: 1px; position: absolute; background-color: #2c2c2c; }
.topl { top: 10%; background: linear-gradient(90deg, #888888 30%, #1d1f1f 70%); }
.bottoml { bottom: 10%; }
.leftl { left: 9%; width: 1px; height: 100%; background: linear-gradient(180deg, #747474 30%, #222424 70%); }
.rightl {
    right: 9%; width: 1px; height: 100%;
    background: linear-gradient(180deg, #747474 30%, #222424 70%); /* 与左侧相同 */
}