/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

 /* ================== 网页背景 ================== */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: auto;
  min-height: 100%;
  background-image: url('resources/eyes.png'); /* PNG眼珠 */
  background-repeat: repeat;
  background-size:950px 950px;    /* 保持原大小 */
  animation: waveFast 7s linear infinite;     /* 背景动画 */
}

/* 背景动画 */
@keyframes waveFast {
  0%   { background-position: 0 0; }
  25%  { background-position: 30px 15px; }
  50%  { background-position: 0 30px; }
  75%  { background-position: -30px 15px; }
  100% { background-position: 0 0; }
}

/* ================== 页面容器（GBA） ================== */
/* 整个 GBA 框 */
.gba-frame {
  position: relative;
  width: 80vw;
  max-width: 600px;
  margin: 0 auto;
}

/* 背景图片（GBA SP） */
.gba-bg {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/* GBA 屏幕文字 */
.gba-screen {
  position: absolute;
  top: 8%;
  left: 15%;
  width: 74%;
  height: 27%;
  background: black;
  color: #00ffea;
  font-size: 3vw;
  overflow-y: scroll;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 4px;
}

/* ================== 字体 ================== */
/* 大标题 */
.rubik-80s-fade-regular {
  font-family: "Rubik 80s Fade", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 250px;
  color: #ff00ff;
  text-shadow: 4px 4px 10px rgba(0,0,0,0.5);
  margin: 0 auto;
  text-align: center;
  animation: floatTitle 3s ease-in-out infinite alternate;
}

/* 正文 */
.press-start-2p-regular {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
  color: #00ffff;
  font-size: 1.5vw;
  text-shadow:
    1px 0 0 black, -1px 0 0 black,
    0 1px 0 black, 0 -1px 0 black;
}

/* ================== 宝剑/chess分割线 ================== */
/* 分割线容器 */
.divider-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vw;  /* 三个图之间的间距 */
}

/* 宝剑 */
.sword {
  width: 50vw;       /* 响应式宽度 */
  max-width: 40vw;   /* 可选，防止太大 */
  height: auto;
}

/* 左右两侧 chess.gif */
.side-gif {
  width: 10vw;        /* 响应式大小 */
  max-width: 6vw;    /* 防止太大 */
  height: auto;
}

/* ================== 左右 GIF ================== */
.side-container {
  position: absolute;
  top: 72%;
  left: 8vw;
  width: 20vw;
  height: auto;
  transform: translateY(-50%);
}

.side-img {
  width: 100%;
  padding: 10px;
  height: auto;
  display: block;
}

/* ================== 邮票 ================== */
.stamp-wrapper {
  width: 100vw;
  height: 120px;
  overflow: hidden;
  background: transparent;
  position: relative;
}

.stamps {
  display: flex;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.stamps img {
  width: 100px;
  margin-right: 5px;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* ================== 跳转gif================== */
.jump-gif {
  position: absolute;   /* 可以自由定位 */
  bottom: -10vw;         /* 离底部 20px，可调 */
  left:17vw;           /* 离左边 20px，可调 */
  width: 13vw;         /* 宽度，可调 */
  height: auto;         /* 高度自动按比例 */
  z-index: 1000;        /* 确保在最上层，不被覆盖 */
  cursor: pointer;      /* 鼠标变手指，提示可点击 */
}

.jump-gif:hover {
  animation: rotate360 1.2s linear infinite;
}

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

  
}

/* ==================vent网页跳转gif================== */
.smoke-gif {
  position: absolute;   /* 自由定位 */
  top: 64vw;            /* 自己改 */
  left: 8.5vw;           /* 自己改 */
  width: 20vw;
  height: auto;
  cursor: pointer;
}


/* ================== 箭头gif================== */
/* 箭头 gif */
.jump-arrow {
  width: 8vw;          /* 箭头大小，可调 */
  height: auto;
  cursor: pointer;
  position: absolute;   /* 绝对定位 */
  top: 54vw;             /* 根据需要上下调整 */
  left: 9vw;             /* 根据需要左右调整 */
  z-index: 1001;        /* 确保在跳转 gif 上层 */
}

/* ================== 别人家网站================== */
      .external-links{
  position: absolute;   /* 可以自由定位整个容器 */
  bottom:7vw;          /* 距离底部 */
  left: 1.5vw;             /* 距离左边 */
  display: flex;        /* 横向排列所有链接 */
  flex-direction:column;
  gap: 0.5vw;             /* 链接之间间距 */
  z-index: 1000;        /* 放在最上层 */
  transform: translateX(0);  /* 可以用 JS 或动画改变 translateX 移动 */

 
}

 /* ================== 网站动画================== */
/* ================== 外链图标 hover 动画 ================== */
.external-links img {
  width:auto;
  transition: transform 0.25s ease;
  display: block;   /* 防止 inline 元素导致 hover 区域错乱 */
  height: auto;
}

/* hover 时旋转 + 放大 */
.external-links img:hover {
  transform: rotate(-10deg) scale(1.18);
}



/* ================== 响应式 ================== */

/* ---------- 平板（<800px） ---------- */
@media (max-width: 800px) {
  .gba-screen.press-start-2p-regular {
    font-size: 3vw;
  }

  .rubik-80s-fade-regular {
    font-size: 180px;
  }

  .side-container {
    width: 25vw;
    left: 50vw;
    top: 70%;
    transform: translateY(-50%);
  }

  .side-img {
    width: 100%;
  }

  .sword {
    width: 70vw;
  }

  .side-gif {
    width: 20vw;
  }
  
  .page-background {
    background-size: contain;
    background-position: top center;
  }
}

/* ---------- 手机端 (<1000px) ---------- */
@media (max-width: 1000px) {

  /* 整个页面固定宽度：390px（iPhone 默认宽度） */
  body {
    width: 1000px;
    margin: 0 auto;
    padding: 0;
    overflow-x: hidden;
    background-color: #000;
  }

  /* 所有内容的容器——关键！所有元素都必须放进这个容器 */
  .mobile-wrapper {
    width: 420px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
  }

  /* 大标题 */
  .rubik-80s-fade-regular {
    font-size: 130px;
    text-align: center;
  }

  /* GBA 文字 */
  .gba-screen.press-start-2p-regular {
    font-size: 12px;
   
  }

 /* 左边gif*/
  .side-container {
    position: absolute;
    top: 380px;      /* 固定位置，不再用百分比 */
    left: 120px;
    width: 150px;
  }

  .side-img {
    width: 190px;
  }

  /* 宝剑 */
  .sword {
    width: 350px;
    margin: 8px ;
     max-width: none;
     height: auto;
    display: block;
  }

  /* side-gif */
  .side-gif {
    width: 70px;
     max-width: none;
     height: auto;
    display: block;
  }

  /* 底部邮票栏 */
  .stamp-wrapper {
    width: 1000px;
    height: 100px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 5px;
  }

  .stamps img {
    width: 90px;
  }

  /* 跳转gif */
  .jump-gif {
    position: absolute;
    top: 490px;   /* 固定，不漂移 */
    left: 209px;
    width: 120px;
     }
   
   /* hover 和 active 时动画 */
.jump-gif:hover,
.jump-gif:active {
  animation: rotate360 1s linear infinite;
}


  
 /* 吐槽gif */
  .smoke-gif {
    top: 620px;           /* 你可以改：越大越靠下 */
    left: 140px;          /* 你可以改：越大越靠右 */
    width: 180px;         /* 手机更大一点比较好看 */
    height: auto;
    z-index: 999999;     /* 保证永远在最上 */
  }

  /* 左箭头 */
  .jump-arrow {
    position: absolute;
    top: 520px;
    left: 130px;
    width: 90px;
  }

  /* 外部图标 */
  .external-links {
    position: absolute;
    top: 285px;
    left: 17px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .external-links img {
    width: auto;
  }
}