/* ── Homepage extras ── */
.home-page{padding-bottom:12px;}
/* Homepage H1 — section heading above the featured area */
.home-h1 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: -6px 0 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--card-border);
  position: relative;
  letter-spacing: 0.02em;
}
.home-h1::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 64px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

/* Featured section: 3-column layout — carousel | ranking | hot tags */
.home-feat{display:grid;grid-template-columns:1.1fr 1fr 0.35fr;gap:22px;margin-bottom:28px;}

/* ── Carousel (banner style) ── */
.feat-carousel{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);min-height:340px;width:100%;}
.feat-carousel .mc-track,
.feat-carousel .mc-slide{width:100%;height:100%;}
.feat-slide-link{display:block;position:relative;width:100%;height:100%;overflow:hidden;text-decoration:none;}

/* Full-area background image */
.fs-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:blur(8px) brightness(0.35);transform:scale(1.1);
  transition:transform 0.6s;
}
.feat-slide-link:hover .fs-bg{transform:scale(1.15);}

/* Dark gradient overlay for text readability */
.fs-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.05) 100%);
  z-index:1;
}

/* Content at bottom */
.fs-body{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  display:flex;align-items:flex-end;gap:18px;
  padding:28px 32px;color:#fff;
}
.fs-body-center{justify-content:center;align-items:center;text-align:center;}

/* Game icon — 60px in banner */
.fs-icon-wrap{flex-shrink:0;}
.fs-icon{
  width:60px;height:60px;border-radius:var(--radius-sm);
  box-shadow:0 2px 16px rgba(0,0,0,0.5);display:block;
  object-fit:cover;border:2px solid rgba(255,255,255,0.1);
}

/* Game info */
.fs-info{flex:1;min-width:0;}
.fs-name{font-size:20px;font-weight:700;margin-bottom:4px;line-height:1.3;letter-spacing:0.02em;}
.fs-meta{font-size:12px;color:rgba(255,255,255,0.5);margin-bottom:6px;}
.fs-desc{font-size:13px;color:rgba(255,255,255,0.65);line-height:1.5;margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* CTA button */
.fs-btn{
  display:inline-block;padding:6px 20px;border-radius:var(--radius-xl);
  background:var(--accent);color:#fff;font-size:12px;font-weight:700;
  transition:all 0.3s;flex-shrink:0;
}
.fs-btn:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(249,115,22,0.4);}

/* Carousel dots */
.fc-dots2{
  position:absolute;bottom:12px;right:28px;z-index:3;
  display:flex;gap:6px;
}
.fc-dots2 span{
  width:8px;height:8px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,0.35);transition:all 0.35s;
}
.fc-dots2 span.active{background:var(--accent);width:28px;border-radius:4px;}

/* Placeholder when no sliders */
.feat-placeholder{
  border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-800));
  display:flex;align-items:center;justify-content:center;min-height:340px;
}
.fp-content{text-align:center;color:rgba(255,255,255,0.35);}
.fp-content .fp-icon{font-size:48px;display:block;margin-bottom:12px;}
.fp-content span{font-size:15px;}

/* Ranking card */
.rank-card{margin-bottom:0;padding:18px 20px;}
.rank-card .section-header{margin-bottom:12px;padding-bottom:10px;}
.rank-card .section-header h2{font-size:15px;letter-spacing:0.02em;}
.rank-card .rank-item{padding:10px 0;}
.rank-card .rank-item-inner{display:flex;align-items:center;gap:12px;flex:1;text-decoration:none;color:inherit;min-width:0;}
.rank-card .rank-item .rank-dl{margin-left:auto;padding:4px 14px;border-radius:10px;font-size:11px;background:var(--accent);color:#fff;font-weight:600;text-decoration:none;flex-shrink:0;transition:all 0.2s;}
.rank-card .rank-item .rank-dl:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:0 3px 10px rgba(249,115,22,0.3);}
.rank-card .rank-item .rank-img{width:42px;height:42px;}

/* ── Hot Tags Sidebar ── */
.rank-tags{margin-bottom:0;padding:18px 20px;}
.rank-tags .section-header{margin-bottom:12px;padding-bottom:10px;}
.rank-tags .section-header h2{font-size:15px;letter-spacing:0.02em;}
.rt-wrap{display:flex;flex-wrap:wrap;gap:7px;align-content:start;}
.rt-item{
  display:inline-block;padding:5px 14px;border-radius:14px;font-size:12px;
  background:var(--slate-100);color:var(--accent-dark);text-decoration:none;
  transition:all 0.25s;line-height:1.5;font-weight:500;
}
.rt-item:hover{background:var(--accent);color:#fff;transform:translateY(-1px);}

/* News grid: 2 column */
.news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.news-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:var(--radius-sm);
  text-decoration:none;color:inherit;transition:all 0.2s;
}
.news-item:hover{background:var(--slate-100);}
.news-item .ni-img{width:72px;height:54px;flex-shrink:0;border-radius:6px;overflow:hidden;}
.news-item .ni-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s;}
.news-item:hover .ni-img img{transform:scale(1.05);}
.news-item .ni-body{flex:1;min-width:0;}
.news-item .ni-body .ni-title{
  font-size:14px;font-weight:500;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  line-height:1.4;margin-bottom:5px;
}
.news-item .ni-body .ni-meta{
  display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-light);
}
.news-item .ni-body .ni-meta .cat-badge{
  background:var(--slate-100);color:var(--accent-dark);
  padding:1px 8px;border-radius:6px;font-size:10px;font-weight:500;
}

/* ── Category Row Layout ── */
.home-cat-rows{display:flex;flex-direction:column;gap:14px;margin-bottom:28px;}
.hcr-row{display:flex;gap:16px;background:var(--card);border-radius:var(--radius-md);border:1px solid var(--card-border);padding:14px 16px;box-shadow:var(--shadow-sm);}
.hcr-side{width:100px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--card-border);padding-right:16px;}
.hcr-cat-link{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:inherit;padding:8px 4px;border-radius:var(--radius-sm);transition:all 0.2s;}
.hcr-cat-link:hover{background:var(--slate-100);}
.hcr-icon{font-size:28px;line-height:1;}
.hcr-name{font-size:13px;font-weight:700;color:var(--text);text-align:center;letter-spacing:0.02em;}
.hcr-more{font-size:11px;color:var(--accent);font-weight:500;margin-top:2px;}
.hcr-games{flex:1;display:grid;grid-template-columns:repeat(8,1fr);gap:8px;}
.hcr-game{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 2px;border-radius:var(--radius-sm);position:relative;
  text-decoration:none;color:var(--text);font-size:11px;font-weight:500;
  transition:all 0.2s;text-align:center;
}
.hcr-game:hover{background:var(--slate-100);}
.hcr-gicon{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hcr-gimg{width:96px;height:96px;border-radius:10px;object-fit:cover;display:block;transition:transform 0.3s;}
.hcr-game:hover .hcr-gimg{transform:scale(1.06);}
.hcr-gimg-placeholder{display:flex;align-items:center;justify-content:center;font-size:28px;background:var(--slate-100);border-radius:10px;}
.hcr-gname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;line-height:1.3;}

/* ── QR Code Popup ── */
.hcr-qr-popup{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) scale(0.9);
  background:#fff;border-radius:12px;padding:12px;box-shadow:0 6px 24px rgba(0,0,0,0.18);
  opacity:0;visibility:hidden;transition:all 0.25s;z-index:10;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  pointer-events:none;
}
.hcr-qr-popup::before{
  content:'';position:absolute;
  top:-8px;left:50%;transform:translateX(-50%);
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:8px solid #fff;
}
.hcr-qr-popup img{width:120px;height:120px;display:block;border-radius:6px;max-width:none;}
.hcr-qr-popup span{font-size:11px;color:var(--text-light);white-space:nowrap;}
.hcr-game:hover .hcr-qr-popup{
  opacity:1;visibility:visible;transform:translateX(-50%) scale(1);
}
/* ── Tabbed sections (news / knowledge) ── */
.tab-section .section-header{flex-wrap:wrap;gap:8px;}
.tab-section .section-header h2{flex-shrink:0;}
.tab-nav{display:flex;gap:3px;flex-wrap:wrap;flex:1;}
.tab-nav .tab-item{
  display:inline-block;padding:4px 14px;font-size:12px;border-radius:10px;
  cursor:pointer;color:var(--text-secondary);font-weight:500;
  transition:all 0.2s;user-select:none;white-space:nowrap;
}
.tab-nav .tab-item:hover{color:var(--accent-dark);background:var(--slate-100);}
.tab-nav .tab-item.active{background:var(--accent);color:#fff;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.tab-more{margin-left:auto;}

/* ── Knowledge List ── */
.hk-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.hk-list a{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:var(--radius-md);
  border:1px solid var(--card-border);
  text-decoration:none;color:inherit;
  transition:all 0.25s;box-shadow:var(--shadow-sm);
  background:var(--card);
}
.hk-list a:hover{
  border-color:var(--accent);box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.hk-list a .hk-cat{
  font-size:11px;color:var(--accent-dark);background:var(--slate-100);
  padding:2px 10px;border-radius:6px;white-space:nowrap;font-weight:600;flex-shrink:0;
}
.hk-list a span:last-child{
  font-size:13px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.hk-list a:hover span:last-child{color:var(--accent-dark);}
@media(max-width:768px){
  .hk-list{grid-template-columns:minmax(0,1fr);}
}

/* Responsive */
@media(max-width:1024px){
  .home-feat{grid-template-columns:1fr;gap:18px;}
  .feat-carousel{min-height:260px;}
  .feat-placeholder{min-height:260px;}
  .news-grid{grid-template-columns:minmax(0,1fr);}
  .home-cat-rows{gap:12px;}
  .hcr-row{flex-direction:column;padding:14px 16px;}
  .hcr-side{width:100%;flex-direction:row;justify-content:flex-start;padding:0 0 10px 0;border-right:none;border-bottom:1px solid var(--card-border);}
  .hcr-cat-link{flex-direction:row;gap:10px;padding:6px 10px;}
  .hcr-games{grid-template-columns:repeat(4,1fr);}
  .hcr-qr-popup{display:none;}
  .hcr-gicon{width:80px;height:80px;}
  .hcr-gimg{width:80px;height:80px;}
}
@media(max-width:768px){
  .feat-carousel{min-height:220px;}
  .feat-placeholder{min-height:220px;}
  .fp-content .fp-icon{font-size:36px;}
  .news-item{padding:8px 0;}
  .news-item .ni-body .ni-title{font-size:13px;}
  .hcr-games{grid-template-columns:repeat(4,1fr);gap:6px;}
  .hcr-gicon{width:64px;height:64px;}
  .hcr-gimg{width:64px;height:64px;}
  .hcr-game{padding:4px 2px;}
}
@media(max-width:480px){
  .feat-carousel{min-height:200px;}
  .feat-placeholder{min-height:200px;}
}