/* ==========================================
   JGCMS 前台首页 — 韩式活泼风格
   ========================================== */

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:#f8f9ff;
  color:#2d3436;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ===== Header ===== */
.site-header{
  background:#fff;
  border-bottom:1px solid #f0f0f5;
  position:sticky;top:0;z-index:100;
  box-shadow:0 1px 4px rgba(124,77,255,0.04);
}
.header-inner{
  max-width:1200px;margin:0 auto;padding:0 24px;
  height:64px;display:flex;align-items:center;justify-content:space-between;
}
.logo{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  color:#2d3436;
}
.logo-icon{font-size:32px}
.logo-text{font-size:22px;font-weight:800;letter-spacing:1px;color:#2d3436}
.site-nav{display:flex;gap:28px}
.nav-link{
  text-decoration:none;color:#636e72;font-size:15px;font-weight:600;
  padding:6px 0;border-bottom:2px solid transparent;transition:all .2s;
}
.nav-link:hover,.nav-link.active{color:#7c4dff;border-color:#7c4dff}
.nav-link.nav-admin{color:#ff6b9d}
.nav-link.nav-admin:hover{color:#ff6b9d;border-color:#ff6b9d}
.nav-link.disabled{color:#cbd5e1;cursor:not-allowed}
.nav-link.disabled:hover{color:#cbd5e1;border-color:transparent}

/* ===== Hero ===== */
.hero{
  background:linear-gradient(135deg,#7c4dff 0%,#ff6b9d 50%,#00bcd4 100%);
  padding:64px 24px;text-align:center;color:#fff;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:-50%;right:-20%;
  width:500px;height:500px;border-radius:50%;
  background:rgba(255,255,255,0.06);
}
.hero::after{
  content:'';position:absolute;bottom:-30%;left:-10%;
  width:300px;height:300px;border-radius:50%;
  background:rgba(255,255,255,0.06);
}
.hero-inner{max-width:800px;margin:0 auto;position:relative;z-index:1}
.hero h1{font-size:34px;font-weight:900;margin-bottom:12px;letter-spacing:1px}
.hero p{font-size:17px;opacity:.9;margin-bottom:32px}
.hero-stats{
  display:flex;justify-content:center;gap:56px;
  flex-wrap:wrap;
}
.stat-item{text-align:center}
.stat-num{display:block;font-size:36px;font-weight:900}
.stat-label{font-size:13px;opacity:.75;margin-top:4px}

/* ===== Sections Common ===== */
.section-inner{max-width:1200px;margin:0 auto;padding:0 24px}
.section-title{font-size:26px;font-weight:800;text-align:center;margin-bottom:8px;color:#2d3436}
.section-desc{text-align:center;color:#b2bec3;margin-bottom:40px;font-size:15px}

/* ===== Games Grid ===== */
.games-section{padding:60px 0}
.games-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:24px;
}

.game-card{
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 2px 12px rgba(124,77,255,0.04);text-decoration:none;
  transition:all .25s;display:flex;flex-direction:column;
  border:1px solid #f0f0f5;
}
.game-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(124,77,255,0.1)}
.game-card.coming-soon{opacity:.7;cursor:default}
.game-card.coming-soon:hover{transform:none;box-shadow:0 2px 12px rgba(124,77,255,0.04)}

.game-banner{
  height:120px;display:flex;align-items:center;justify-content:center;
  position:relative;
}
.game-icon{font-size:52px}
.game-badge{
  position:absolute;top:12px;right:12px;
  padding:3px 12px;border-radius:12px;font-size:11px;
  font-weight:700;color:#fff;
}
.game-badge.hot{background:#ff6b9d}
.game-badge.new{background:#7c4dff}

.game-info{padding:20px;flex:1;display:flex;flex-direction:column}
.game-info h3{font-size:17px;font-weight:700;margin-bottom:8px;color:#2d3436}
.game-info p{font-size:13px;color:#636e72;line-height:1.6;margin-bottom:12px}
.game-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tag{
  display:inline-block;padding:3px 10px;border-radius:10px;
  font-size:11px;font-weight:700;background:#ede7ff;color:#7c4dff;
}
.game-enter{
  margin-top:auto;color:#7c4dff;font-weight:700;font-size:14px;
  display:flex;align-items:center;gap:4px;
}
.game-enter.disabled{color:#cbd5e1}

/* ===== Features ===== */
.features-section{padding:60px 0;background:#fff}
.features-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:24px;margin-top:40px;
}
.feature-card{
  text-align:center;padding:32px 20px;border-radius:18px;
  background:#f8f9ff;transition:all .2s;
}
.feature-card:hover{background:#ede7ff;transform:translateY(-2px)}
.feature-icon{font-size:44px;display:block;margin-bottom:12px}
.feature-card h4{font-size:17px;font-weight:700;margin-bottom:6px;color:#2d3436}
.feature-card p{font-size:13px;color:#636e72;line-height:1.6}

/* ===== Footer ===== */
.site-footer{
  background:#2d3436;color:#b2bec3;text-align:center;
  padding:32px 24px;margin-top:60px;
}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-sub{font-size:12px;margin-top:6px;color:#636e72}

/* ===== Leaderboard ===== */
.leaderboard-section{
  padding:60px 0;background:linear-gradient(180deg,#f8f9ff 0%,#ede7ff 100%);
}
.leaderboard-wrap{
  max-width:600px;margin:0 auto;
}
.leaderboard-loading{
  text-align:center;padding:40px;color:#b2bec3;font-size:15px;
}
.leaderboard-list{ }
.leaderboard-item{
  display:flex;align-items:center;gap:14px;padding:16px 20px;
  background:#fff;border-radius:14px;margin-bottom:8px;
  box-shadow:0 2px 8px rgba(124,77,255,0.04);
  transition:all .2s;
}
.leaderboard-item:hover{transform:translateX(4px)}
.leaderboard-item.top1{background:linear-gradient(135deg,#fff9e1,#fef3c7);border:2px solid #f59e0b}
.leaderboard-item.top2{background:linear-gradient(135deg,#f5f5f5,#e8e8e8);border:2px solid #b0b0b0}
.leaderboard-item.top3{background:linear-gradient(135deg,#fef9f0,#fde8d0);border:2px solid #d97706}
.leaderboard-rank{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:900;font-size:16px;flex-shrink:0;
  background:#f1f5f9;color:#64748b;
}
.top1 .leaderboard-rank{background:#f59e0b;color:#fff;font-size:20px}
.top2 .leaderboard-rank{background:#94a3b8;color:#fff;font-size:18px}
.top3 .leaderboard-rank{background:#d97706;color:#fff;font-size:18px}
.leaderboard-info{flex:1;min-width:0}
.leaderboard-name{font-weight:700;font-size:15px;color:#2d3436}
.leaderboard-meta{font-size:12px;color:#b2bec3;margin-top:2px}
.leaderboard-stars{
  font-weight:800;font-size:18px;color:#f59e0b;flex-shrink:0;
  display:flex;align-items:center;gap:4px;
}
.leaderboard-empty{text-align:center;padding:40px;color:#b2bec3;font-size:14px}

/* ===== Responsive ===== */
@media(max-width:768px){
  .hero h1{font-size:24px}
  .hero p{font-size:14px}
  .hero-stats{gap:24px}
  .stat-num{font-size:28px}
  .section-title{font-size:22px}
  .games-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
  .site-nav{gap:14px}
  .nav-link{font-size:13px}
  .header-inner{padding:0 16px}
}