/* ===== 基础重置 ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "idolFont";
  src: url("/assets/font/IrisIdol.ttf") format("truetype");
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* ===== 背景 ===== */
#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* ===== 漂浮图案 ===== */
.shape {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 50px;
    background:#1f1f1f;
}

/* logo */
.logo img{
    height:50px;
    transition:0.3s;
}

.logo img:hover{
    transform:scale(1.1);
}

/* 导航容器 */
.navbar nav{
    display:flex;
}

/* 导航链接 */
.navbar a{
    color:white;
    margin-left:20px;
    text-decoration:none;
    font-size:16px;
}
/* ===== 标题 ===== */
h1 {
  text-align: center;
  padding: 15px;
  font-size: clamp(14px, 5vw, 65px);
  background: linear-gradient(90deg, #7e6ca8, #e75bec);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitle {
  text-align: center;
  color: #999;
  font-size: 20px;
  margin-bottom: 15px;
}

/* ===== 卡片区域 ===== */
.game-card-section {
    display: flex;
    justify-content: center;
    margin: 40px 10px;
}

/* ===== 卡片（移动优先：竖排）===== */
.game-card {
    display: flex;
    flex-direction: column;   /* 👈 手机竖排 */
    align-items: center;
    width: 100%;
    max-width: 600px;
    padding: 15px;
    border-radius: 16px;
    text-decoration: none;
    background: linear-gradient(90deg, #6495cf, #d7385f);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transition: 0.3s;
}

.game-card:hover {
    transform: translateY(-5px) scale(1.02);
}

/* 图片 */
.game-avatar img {
    width: 100%;
    height: auto;          /* 👈 等比例缩放 */
    border-radius: 10px;
    display: block;
}

/* 文本 */
.game-intro {
    margin-top: 15px;
    text-align: center;
    color: #333;
}

.game-intro p {
    font-size: clamp(12px, 4vw, 18px);
    color: #555;
}

.game-info {
    margin-top: 10px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

/* ===== Footer ===== */
footer {
  background: #1f1f1f;
  color: white;
  text-align: center;
  padding: 20px;
}

/* ========================= */
/* ===== 平板及以上 ===== */
/* ========================= */

@media (min-width: 600px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}
}

/* ========================= */
/* ===== 大屏（PC） ===== */
/* ========================= */

@media (min-width: 768px) {
.navbar{
        flex-direction:column;        /* 👈 变竖排 */
        align-items:center;
    }

    .navbar nav{
        flex-wrap:wrap;              /* 👈 允许换行 */
        justify-content:center;
        margin-top:10px;
    }

    .navbar a{
        margin:6px 10px;             /* 👈 改成上下间距 */
        font-size:14px;
    }

    .logo img{
        height:40px;                 /* 👈 小屏缩小一点 */
    }

}

/* ========================= */
/* ===== 更大屏 ===== */
/* ========================= */

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    padding: 20px;
  }
}