:root {
    --bg: #09090b;
    --neon-pink: #f0f;
    --neon-blue: #0ff;
    --text: #fff;
    --font-head: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); overflow-x: hidden; }

.nav { padding: 2rem 5%; display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: var(--font-head); font-size: 2rem; font-weight: 900; color: var(--neon-blue); text-shadow: 0 0 10px var(--neon-blue); text-decoration: none; }
.links a { color: var(--text); text-decoration: none; font-size: 1.2rem; font-weight: 600; margin-left: 2rem; text-transform: uppercase; transition: color 0.3s; padding-bottom: 5px; }
.links a:hover, .links a.active { color: var(--neon-pink); text-shadow: 0 0 10px var(--neon-pink); border-bottom: 2px solid var(--neon-pink); }

.hero { display: flex; align-items: center; justify-content: space-between; padding: 5rem 5%; min-height: 80vh; }
.hero-content { flex: 1; }
.live-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,0,0,0.2); border: 1px solid red; color: red; padding: 5px 15px; font-weight: bold; font-family: var(--font-head); margin-bottom: 2rem; border-radius: 4px; cursor: pointer; }
.dot { width: 10px; height: 10px; background: red; border-radius: 50%; animation: pulse 1s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }

.hero-content h1 { font-family: var(--font-head); font-size: 5rem; line-height: 1.1; margin-bottom: 0; text-transform: uppercase; }
.hero-content h1.outline { -webkit-text-stroke: 2px var(--neon-blue); color: transparent; text-shadow: none; margin-bottom: 1rem; }
.hero-content p { font-size: 1.5rem; color: #aaa; margin-bottom: 2rem; }

.btn-cyber { background: transparent; color: var(--neon-pink); border: 2px solid var(--neon-pink); padding: 1rem 2rem; font-family: var(--font-head); font-size: 1.2rem; font-weight: bold; cursor: pointer; position: relative; overflow: hidden; transition: 0.3s; box-shadow: 0 0 15px rgba(255,0,255,0.3); text-decoration: none; display: inline-block; }
.btn-cyber:hover { background: var(--neon-pink); color: var(--bg); box-shadow: 0 0 30px var(--neon-pink); transform: scale(1.05); }

/* 3D Image Card */
.hero-image3d { flex: 1; perspective: 1000px; display: flex; justify-content: flex-end; }
.card3d { width: 100%; max-width: 500px; height: 600px; transform-style: preserve-3d; transition: transform 0.1s ease; border: 4px solid var(--neon-blue); box-shadow: 0 0 30px rgba(0,255,255,0.2); cursor: crosshair; }
.card3d img { width: 100%; height: 100%; object-fit: cover; }

/* Stats */
.stats { display: flex; justify-content: center; gap: 4rem; padding: 5rem 5%; border-top: 1px solid #333; background: #050505; }
.stat-box { text-align: center; cursor: pointer; }
.stat-box h3 { font-family: var(--font-head); font-size: 3.5rem; color: var(--neon-blue); text-shadow: 0 0 15px rgba(0,255,255,0.5); }
.stat-box span { font-size: 1.2rem; letter-spacing: 2px; color: #888; }

/* Shake on Hover */
.shake-hover:hover { animation: shake 0.5s; }
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* Glitch text effect */
.glitch { position: relative; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; }
.glitch::before { left: 2px; text-shadow: -2px 0 var(--neon-pink); clip: rect(24px, 550px, 90px, 0); animation: glitch-anim 3s infinite linear alternate-reverse; }
.glitch::after { left: -2px; text-shadow: -2px 0 var(--neon-blue); clip: rect(85px, 550px, 140px, 0); animation: glitch-anim 2.5s infinite linear alternate-reverse; }
@keyframes glitch-anim {
  0% { clip: rect(10px, 9999px, 86px, 0); }
  20% { clip: rect(69px, 9999px, 21px, 0); }
  40% { clip: rect(41px, 9999px, 11px, 0); }
  60% { clip: rect(98px, 9999px, 60px, 0); }
  80% { clip: rect(32px, 9999px, 83px, 0); }
  100% { clip: rect(14px, 9999px, 47px, 0); }
}

/* --- STREAM PAGE SPECIFIC STYLES --- */
.stream-layout { display: flex; padding: 2rem 5%; gap: 2rem; min-height: 60vh; }
.video-container-cyber { flex: 3; display: flex; flex-direction: column; }
.video-placeholder { position: relative; aspect-ratio: 16/9; background: #000; border: 3px solid var(--neon-blue); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(0,255,255,0.1); }
.video-placeholder img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: grayscale(1); }
.overlay-msg { position: absolute; text-align: center; z-index: 5; }
.overlay-msg h3 { font-family: var(--font-head); font-size: 2.5rem; margin: 1rem 0; color: white; letter-spacing: 2px; }
.overlay-msg p { color: #888; font-size: 1.1rem; }
.live-pulse { display: inline-block; font-size: 2.5rem; animation: pulse 1s infinite alternate; }

.stream-info-bar { display: flex; gap: 1.5rem; padding: 1.5rem; background: #0c0c0e; border: 1px solid #1a1a1e; border-top: none; }
.stream-avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--neon-pink); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 900; font-size: 1.5rem; color: black; box-shadow: 0 0 15px var(--neon-pink); }
.stream-title-text h2 { font-size: 1.4rem; color: #fff; margin-bottom: 0.3rem; font-weight: 600; }
.stream-title-text p { color: #888; font-size: 1rem; }

/* Chat Box */
.chat-container { flex: 1.2; display: flex; flex-direction: column; background: #0c0c0e; border: 3px solid var(--neon-pink); height: 500px; box-shadow: 0 0 20px rgba(255,0,255,0.1); }
.chat-header { background: #141417; padding: 1rem; font-family: var(--font-head); border-bottom: 2px solid var(--neon-pink); text-align: center; letter-spacing: 1px; font-weight: bold; }
.chat-messages { flex: 1; padding: 1.2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.8rem; font-size: 1.1rem; }
.chat-msg { line-height: 1.4; word-break: break-all; }
.chat-msg span.user { font-weight: bold; color: var(--neon-blue); margin-right: 5px; }
.chat-msg span.mod { color: #2ecc71; }
.chat-input-area { display: flex; border-top: 1px solid #1a1a1e; padding: 0.8rem; background: #141417; }
.chat-input-area input { flex: 1; background: #000; border: 1px solid #333; padding: 0.8rem; color: white; font-family: var(--font-body); font-size: 1.1rem; }
.chat-input-area input:focus { outline: none; border-color: var(--neon-pink); }
.chat-input-area button { background: var(--neon-pink); color: black; border: none; padding: 0.8rem 1.5rem; font-family: var(--font-head); cursor: pointer; font-weight: bold; transition: 0.3s; }
.chat-input-area button:hover { background: white; }

/* Schedule & Rules */
.schedule-section { display: flex; gap: 3rem; padding: 4rem 5% 6rem; }
.schedule-card, .rules-card { flex: 1; background: #0c0c0e; border: 1px solid #1a1a1e; padding: 3rem; }
.schedule-card h2, .rules-card h2 { font-family: var(--font-head); color: var(--neon-blue); margin-bottom: 2rem; font-size: 2rem; border-bottom: 1px solid #222; padding-bottom: 0.8rem; }
.schedule-grid { display: flex; flex-direction: column; gap: 1.2rem; }
.sched-day { font-size: 1.2rem; }
.sched-day span { font-weight: bold; color: var(--neon-pink); width: 80px; display: inline-block; }
.rules-list { padding-left: 1.5rem; line-height: 2.2; font-size: 1.2rem; }
.rules-list li { margin-bottom: 0.5rem; }

/* --- MERCH PAGE SPECIFIC STYLES --- */
.merch-header { text-align: center; padding: 6rem 5% 2rem; }
.merch-header h1 { font-size: 4rem; color: var(--neon-blue); text-shadow: 0 0 10px var(--neon-blue); }
.merch-header p { font-size: 1.3rem; color: #888; margin-top: 1rem; }

.merch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 3rem; padding: 2rem 5% 8rem; }
.merch-card { background: #0c0c0e; border: 2px solid #1a1a1e; transition: border-color 0.3s, transform 0.3s; }
.merch-card:hover { border-color: var(--neon-pink); transform: translateY(-5px); }
.merch-img { aspect-ratio: 1; overflow: hidden; border-bottom: 1px solid #1a1a1e; }
.merch-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.merch-card:hover .merch-img img { transform: scale(1.05); }
.merch-info { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.merch-info h3 { font-family: var(--font-head); font-size: 1.2rem; color: white; }
.merch-price { color: var(--neon-blue); font-weight: bold; font-size: 1.4rem; font-family: var(--font-head); }
.btn-buy { background: transparent; color: var(--neon-blue); border: 2px solid var(--neon-blue); padding: 0.8rem; font-family: var(--font-head); cursor: pointer; transition: 0.3s; font-weight: bold; letter-spacing: 1px; }
.btn-buy:hover { background: var(--neon-blue); color: black; box-shadow: 0 0 15px var(--neon-blue); }

.cart-notif { position: fixed; bottom: 30px; right: -450px; background: #0c0c0e; border: 2px solid var(--neon-pink); color: white; padding: 1.5rem 3rem; font-family: var(--font-head); z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.8); transition: right 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.cart-notif.show { right: 30px; }

/* --- SETUP PAGE SPECIFIC STYLES --- */
.setup-header { text-align: center; padding: 6rem 5% 2rem; }
.setup-header h1 { font-size: 4rem; color: var(--neon-blue); text-shadow: 0 0 10px var(--neon-blue); }
.setup-header p { font-size: 1.3rem; color: #888; margin-top: 1rem; }

.setup-container { display: flex; gap: 3rem; padding: 2rem 5% 8rem; }
.setup-section-box { flex: 1; background: #0c0c0e; border: 2px solid #1a1a1e; padding: 3rem; transition: border-color 0.3s; }
.setup-section-box:hover { border-color: var(--neon-blue); }
.setup-section-box h2 { font-family: var(--font-head); color: var(--neon-pink); margin-bottom: 2.5rem; text-shadow: 0 0 10px rgba(255,0,255,0.2); border-bottom: 1px solid #1a1a1e; padding-bottom: 1rem; }
.specs-list { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; }
.specs-list li { border-bottom: 1px solid #1a1a1e; padding-bottom: 0.8rem; font-size: 1.2rem; }
.specs-list li span { color: var(--neon-blue); font-weight: bold; width: 150px; display: inline-block; }

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 992px) {
    .stream-layout { flex-direction: column; }
    .chat-container { height: 450px; }
    .schedule-section { flex-direction: column; }
    .setup-container { flex-direction: column; }
}

@media (max-width: 900px) {
    .hero { flex-direction: column; text-align: center; }
    .hero-image3d { justify-content: center; margin-top: 4rem; }
    .stats { flex-direction: column; align-items: center; }
}