@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700;900&family=ZCOOL+KuaiLe&display=swap');

:root {
    --tech-cyan: #00f2ff;
    --gold-shine: #ffd700;
}

body {
    font-family: 'Noto Sans SC', sans-serif;
    background-color: #020617;
    color: #e2e8f0;
    overflow: hidden; 
    margin: 0;
    scroll-behavior: smooth;
}

.royal-font { font-family: 'ZCOOL KuaiLe', cursive; letter-spacing: 2px; }

#env-bgs {
    position: fixed; inset: 0; z-index: -20;
    opacity: 0; transition: opacity 1.5s ease-in-out; pointer-events: none;
}

#clear-bg, #blur-bg {
    position: absolute; inset: 0;
}

#blur-bg {
    filter: blur(40px) brightness(0.2);
    opacity: 0; will-change: opacity;
}

.bg-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 2s ease-in-out; will-change: opacity;
}
.bg-slide.active { opacity: 1; }

#game-gate {
    position: fixed; inset: 0; z-index: 100;
    background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: transform 1.2s cubic-bezier(0.86, 0, 0.07, 1);
}

#game-container {
    position: relative; width: 90%; max-width: 850px; height: 480px;
    background: #0f172a; border: 8px solid #2563eb; border-radius: 45px;
    overflow: hidden; transform: translateZ(0); 
    box-shadow: 0 0 40px rgba(0, 242, 255, 0.15), 0 14px 0 #1e40af, 0 40px 80px rgba(0,0,0,0.9);
}

.btn-glory {
    background: linear-gradient(to bottom, #facc15, #eab308); color: #78350f;
    border: none; border-bottom: 8px solid #a16207; border-radius: 20px; 
    font-family: 'ZCOOL KuaiLe', cursive; font-weight: 900; 
    box-shadow: 0 10px 30px rgba(234, 179, 8, 0.3); transition: all 0.1s;
}
.btn-glory:active { transform: translateY(4px); border-bottom-width: 2px; }

#friend-modal {
    position: absolute; inset: 0; background: rgba(2, 6, 23, 0.98); z-index: 150;
    display: none; flex-direction: column; align-items: center; justify-content: center;
}

@keyframes pulse-glow {
    0%, 100% { text-shadow: 0 0 15px rgba(0, 242, 255, 0.4); }
    50% { text-shadow: 0 0 35px rgba(0, 242, 255, 0.9); }
}
.glow-text { animation: pulse-glow 3s infinite; }

@keyframes bounce-subtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(15px); }
}
.animate-bounce-subtle { animation: bounce-subtle 2s infinite ease-in-out; }

#main-content {
    opacity: 0; transition: opacity 1.5s ease-in-out; pointer-events: none;
}

body.unlocked { overflow-y: auto; overflow-x: hidden; }
body.unlocked #game-gate { transform: translateY(-100%); }
body.unlocked #main-content { opacity: 1; pointer-events: auto; }
body.unlocked #env-bgs { opacity: 1; }

#top-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    transition: background-color 0.5s ease;
}

#hero-spacer {
    height: 100vh; width: 100%; display: flex; align-items: flex-end;
    justify-content: center; padding-bottom: 3rem; position: relative; z-index: 10;
}

.glass-card {
    background: rgba(4, 9, 20, 0.3);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05); border-top: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px; padding: 3.5rem 2.5rem;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; overflow: hidden;
}
.glass-card:hover { 
    transform: translateY(-12px); background: rgba(4, 9, 20, 0.6);
    border-top: 2px solid var(--tech-cyan); 
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 242, 255, 0.1);
}
.glass-card i { transition: all 0.5s; color: rgba(255, 255, 255, 0.6); }
.glass-card:hover i { color: var(--tech-cyan); transform: scale(1.15); }
.glass-card .accent-line { 
    width: 0; height: 2px; background: var(--tech-cyan); 
    transition: width 0.6s ease; margin-top: 1.5rem; 
}
.glass-card:hover .accent-line { width: 50px; }