/* Home CSS */
.hero { position: relative; width: 100%; height: 480px; overflow: hidden; background: #0d0d1a; }
.hero-slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-bg { position: absolute; inset: 0; display: flex; }
.hero-bg-img { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #2a2a3a; background-size: cover; background-position: center; }
.hero-bg-img-real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hero-bg-img.s1 { background: linear-gradient(135deg, #0d0d1a 0%, #1a0a2e 40%, #0a1a2e 100%); }
.hero-bg-img.s2 { background: linear-gradient(135deg, #0d1a0a 0%, #1a2e0a 40%, #0a2e1a 100%); }
.hero-bg-img.s3 { background: linear-gradient(135deg, #1a0a0a 0%, #2e0a0a 40%, #1a0a2e 100%); }
.hero-gradient { position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,10,16,0.95) 0%, rgba(10,10,16,0.7) 50%, rgba(10,10,16,0.2) 100%); }
.hero-content { position: relative; z-index: 2; padding: 0 48px; max-width: 1400px; margin: 0 auto; width: 100%; }
.hero-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: #fca5a5; background: rgba(239,68,68,0.15); border: 0.5px solid rgba(239,68,68,0.3); border-radius: 4px; padding: 4px 10px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; }
.hero-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.hero-title { font-family: 'Rajdhani', sans-serif; font-size: 52px; font-weight: 700; color: var(--text); line-height: 1.05; letter-spacing: -0.5px; margin-bottom: 10px; max-width: 560px; }
.hero-subtitle { font-size: 14px; color: var(--text2); margin-bottom: 24px; max-width: 400px; line-height: 1.6; }
.hero-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 24px; }
.hero-price { font-family: 'Rajdhani', sans-serif; font-size: 36px; font-weight: 700; color: var(--text); }
.hero-price-orig { font-size: 18px; color: #555; text-decoration: line-through; }
.hero-disc { font-size: 14px; font-weight: 500; padding: 4px 10px; border-radius: 5px; background: #7c1d1d; color: #fca5a5; }
.hero-btn { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 13px 28px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.hero-btn:hover { background: var(--accent-h); }
.hero-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.hero-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); cursor: pointer; transition: all 0.2s; }
.hero-dot.active { background: #fff; width: 20px; border-radius: 3px; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 0.5px solid rgba(255,255,255,0.15); color: var(--text2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.15s; backdrop-filter: blur(4px); }
.hero-arrow:hover { background: rgba(255,255,255,0.15); color: var(--text); }
.hero-arrow.prev { left: 20px; }
.hero-arrow.next { right: 20px; }

.section { padding: 40px 0; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.section-title { font-family: 'Rajdhani', sans-serif; font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: 0.3px; display: flex; align-items: center; gap: 8px; }
.section-icon { font-size: 16px; }
.see-all { font-size: 12px; color: #94a3b8; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s; }
.see-all:hover { color: var(--text); }

.scroll-wrap { position: relative; }
.scroll-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--surface2); border: 0.5px solid var(--border2); color: var(--text2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; z-index: 2; transition: all 0.15s; }
.scroll-arrow:hover { background: var(--surface3); color: var(--text); border-color: var(--border-hover); }
.scroll-arrow.left { left: -17px; }
.scroll-arrow.right { right: -17px; }

.game-card { flex: 0 0 calc(20% - 10px); min-width: 160px; background: var(--surface); border: 0.5px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color 0.15s, transform 0.15s; position: relative; text-decoration: none; display: block; scroll-snap-align: start; }
.game-card:hover { border-color: rgba(100,116,139,0.4); transform: translateY(-3px); }
.gc-art { aspect-ratio: 16/9; background: #1a1a2a; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #3a3a5a; position: relative; overflow: hidden; }
.gc-art img { width: 100%; height: 100%; object-fit: cover; }
.gc-new-badge { position: absolute; top: 8px; left: 8px; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 3px; background: var(--accent); color: #fff; letter-spacing: 0.5px; text-transform: uppercase; }
.gc-disc { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 500; padding: 3px 7px; border-radius: 4px; background: #7c1d1d; color: #fca5a5; }
.gc-launcher { position: absolute; top: 8px; right: 8px; font-size: 9px; font-weight: 500; padding: 2px 6px; border-radius: 3px; background: rgba(0,0,0,0.72); color: #93c5fd; border: 0.5px solid rgba(147,197,253,0.2); text-transform: uppercase; }
.gc-info { padding: 10px 12px 12px; }
.gc-name { font-size: 12px; color: var(--text2); line-height: 1.3; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-price-row { display: flex; align-items: baseline; gap: 6px; }
.gc-price { font-size: 15px; font-weight: 500; color: var(--text); }
.gc-price-orig { font-size: 11px; color: #555; text-decoration: line-through; }
.gc-add { position: absolute; bottom: 10px; right: 10px; width: 26px; height: 26px; border-radius: 6px; background: var(--accent); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0; transition: opacity 0.15s; }
.game-card:hover .gc-add { opacity: 1; }

.fd-card { flex: 0 0 calc(20% - 10px); min-width: 180px; background: var(--surface); border: 0.5px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color 0.15s, transform 0.15s; position: relative; text-decoration: none; display: block; scroll-snap-align: start; }
.fd-card:hover { border-color: rgba(100,116,139,0.4); transform: translateY(-3px); }
.fd-card:hover .gc-add { opacity: 1; }
.fd-art { aspect-ratio: 16/9; background: #1a1a2a; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #3a3a5a; position: relative; overflow: hidden; }
.fd-art img { width: 100%; height: 100%; object-fit: cover; }
.fd-disc { position: absolute; top: 0; left: 0; font-size: 11px; font-weight: 700; padding: 5px 10px; background: var(--red); color: #fff; }
.fd-info { padding: 10px 12px 12px; }
.fd-name { font-size: 12px; color: var(--text2); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fd-price { font-size: 15px; font-weight: 600; color: var(--text); }
.fd-price-orig { font-size: 11px; color: #555; text-decoration: line-through; }
.fd-disc-inline { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: #7c1d1d; color: #fca5a5; white-space: nowrap; }

.charts-card { background: var(--surface); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.charts-title { font-family: 'Rajdhani', sans-serif; font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: 0.3px; padding: 16px 20px; border-bottom: 0.5px solid var(--border); display: flex; align-items: center; gap: 8px; }
.chart-item { display: flex; align-items: center; gap: 14px; padding: 11px 20px; border-bottom: 0.5px solid var(--border); cursor: pointer; transition: background 0.15s; text-decoration: none; }
.chart-item:last-child { border-bottom: none; }
.chart-item:hover { background: rgba(255,255,255,0.02); }
.chart-rank { font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; color: var(--muted); width: 28px; flex-shrink: 0; text-align: center; }
.chart-rank.top3 { color: var(--gold); }
.chart-art { width: 40px; height: 40px; background: #1a1a2a; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #3a3a5a; overflow: hidden; }
.chart-art img { width: 100%; height: 100%; object-fit: cover; }
.chart-name { flex: 1; font-size: 13px; color: var(--text2); line-height: 1.3; }
.chart-price { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }

.section-divider { height: 0.5px; background: var(--border); margin: 0 48px; }

/* Light mode: keep hero text white since bg is always dark */
html.light-mode .hero-title,
html.light-mode .hero-price,
html.light-mode .hero-subtitle,
html.light-mode .hero-label,
html.light-mode .hero-arrow { color: #f0f0f8; }
html.light-mode .hero-subtitle { color: #a0a0b0; }