@font-face {
    font-family: 'Han Zi';
    src: url('font/HanZi.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

:root {
    --bg-deep: #06060c;
    --surface-glass: rgba(12, 12, 24, 0.7);
    --surface-border: rgba(255, 255, 255, 0.06);
    --neon-cyan: #00e5ff;
    --neon-purple: #b347ea;
    --neon-pink: #ff4081;
    --neon-gold: #ffd740;
    --text-primary: #f5f5ff;
    --text-secondary: #b0b0cc;
    --font-display: 'Han Zi', 'Montserrat', sans-serif;
    --font-body: 'Han Zi', 'Inter', system-ui, sans-serif;
    --transition-smooth: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    --card-radius: 16px;
}

body {
    background: var(--bg-deep);
    background-image: radial-gradient(ellipse at 20% 50%, rgba(0, 229, 255, 0.03) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(179, 71, 234, 0.03) 0%, transparent 60%), radial-gradient(ellipse at 50% 80%, rgba(255, 64, 129, 0.02) 0%, transparent 60%);
    font-family: var(--font-body);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    font-size: 14px;
    cursor: url('../images/cursor.png'), auto;
}

a:hover, button:hover, .btn:hover, .nav-link:hover, .glass-card:hover, .server-card:hover, select:hover, .forum-category-card:hover, .lang-switch select:hover, .news-card:hover, .forum-thread-card:hover {
    cursor: url('../images/cursor2.png'), pointer;
}

input, textarea, select {
    background: rgba(20, 20, 30, 0.9);
    color: white;
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: all 0.3s;
    box-sizing: border-box;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
}

input::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(20, 20, 30, 0.9) inset !important;
    -webkit-text-fill-color: white !important;
    caret-color: white !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: 10px !important;
    transition: background-color 5000s ease-in-out 0s;
}

.sakura-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }

.petal {
    position: absolute; top: -12%;
    background: radial-gradient(circle at 25% 30%, rgba(255, 200, 220, 0.7), rgba(255, 130, 170, 0.4));
    width: 16px; height: 16px; border-radius: 80% 0 75% 0; transform: rotate(35deg); opacity: 0.6;
    animation: fall linear infinite, wobble ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(255, 105, 180, 0.45)); will-change: transform;
}

.petal:nth-child(even) { background: radial-gradient(circle at 30% 25%, rgba(255, 240, 250, 0.75), rgba(255, 160, 200, 0.5)); border-radius: 0 82% 0 72%; }
.petal:nth-child(3n) { background: radial-gradient(circle at 20% 35%, rgba(255, 180, 210, 0.65), rgba(255, 110, 160, 0.45)); border-radius: 70% 0 80% 0; }

@keyframes fall { 0% { transform: translateY(-5vh) rotate(0deg) scale(0.9); opacity: 0.75; } 100% { transform: translateY(112vh) rotate(720deg) scale(1.05); opacity: 0.12; } }
@keyframes wobble { 0%, 100% { margin-left: 0px; } 25% { margin-left: 20px; } 50% { margin-left: -16px; } 75% { margin-left: 14px; } }

@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes linkPulse { 0%, 100% { box-shadow: 0 0 4px var(--neon-cyan); } 50% { box-shadow: 0 0 8px var(--neon-cyan); } }
@keyframes fadeUpBlur { 0% { opacity: 0; filter: blur(8px); transform: translateY(25px); } 100% { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } }
@keyframes loadingPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes titleGlow { 0% { filter: drop-shadow(0 0 18px rgba(0, 229, 255, 0.5)); } 100% { filter: drop-shadow(0 0 30px rgba(179, 71, 234, 0.7)); } }
@keyframes cardPop { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }
@keyframes discordPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(114, 137, 218, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(114, 137, 218, 0); } }
@keyframes discordIconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

.logo-container { display: flex; align-items: center; gap: 0.5rem; }
.logo-icon { width: 48px; height: 48px; object-fit: contain; }
.font-roboto { font-family: 'Roboto', 'Segoe UI', 'Arial', sans-serif; }
.yen-sign { font-family: 'Roboto', 'Segoe UI', 'Arial', sans-serif; }

.video-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; user-select: none; opacity: 1; transition: opacity 1s ease-in-out; }
.video-background::-webkit-media-controls, .video-background::-webkit-media-controls-panel, .video-background::-webkit-media-controls-play-button, .video-background::-webkit-media-controls-start-playback-button { display: none !important; }
.video-background.active { opacity: 1; }
.video-background.inactive { opacity: 0; pointer-events: none; }
.video-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 0; pointer-events: none; }

#app { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100vh; backdrop-filter: blur(1px); }
.page { display: none; padding: 1.8rem 2.5rem; flex: 1; animation: fadeUpBlur 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
.page.active { display: block; position: relative; z-index: 5; }
.page.active input, .page.active textarea, .page.active select, .page.active button, .page.active .glass-card, .page.active .forum-category-card, .page.active form { position: relative; z-index: 10; }

.navbar { display: flex; align-items: center; justify-content: center; padding: 0.6rem 2rem; background: rgba(8, 8, 16, 0.9); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0, 229, 255, 0.15); position: sticky; top: 0; z-index: 100; flex-wrap: wrap; gap: 1rem; }
.logo { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: 1px; background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple), var(--neon-pink)); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientShift 4s ease infinite; filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.35)); }
.nav-links { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.nav-link { color: var(--text-secondary); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.8px; transition: all var(--transition-smooth); padding: 0.35rem 0.6rem; border-radius: 8px; position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80%; height: 2px; background: var(--neon-cyan); box-shadow: 0 0 4px var(--neon-cyan); animation: linkPulse 2s ease-in-out infinite; opacity: 0; transition: opacity var(--transition-smooth); }
.nav-link:hover { color: #ffffff; text-shadow: 0 0 10px var(--neon-cyan); background: rgba(0, 229, 255, 0.06); }
.nav-link:hover::after { opacity: 1; }
.nav-link.active { color: #ffffff; text-shadow: 0 0 10px var(--neon-cyan); background: rgba(0, 229, 255, 0.06); }
.nav-link.active::after { opacity: 1; }
.admin-link { color: var(--neon-gold) !important; border: 1px solid rgba(255, 215, 64, 0.3); }
.admin-link:hover { box-shadow: 0 0 15px rgba(255, 215, 64, 0.3); }

.user-controls { display: flex; align-items: center; gap: 0.8rem; }
.user-profile { display: flex; align-items: center; gap: 0.8rem; background: var(--surface-glass); padding: 0.4rem 1.2rem; border-radius: 30px; border: 1px solid var(--surface-border); }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--neon-purple); object-fit: cover; }
.user-details { display: flex; flex-direction: column; }
.user-name { color: var(--neon-cyan); font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; }
.user-auth-status { color: #4cff4c; font-size: 0.65rem; font-family: var(--font-display); }
.user-balance { color: var(--neon-gold); font-size: 0.7rem; margin-top: 0.1rem; font-family: var(--font-display); }
.steam-login-btn { display: flex; align-items: center; }
.steam-login-btn img { height: 34px; border-radius: 4px; transition: transform 0.3s; }
.steam-login-btn:hover img { transform: scale(1.05); }

.lang-switch select { background: rgba(18, 18, 30, 0.9); border: 1px solid rgba(255, 255, 255, 0.18); color: white; padding: 0.4rem 1.8rem 0.4rem 0.8rem; border-radius: 20px; font-weight: 600; font-size: 0.8rem; backdrop-filter: blur(10px); transition: all var(--transition-smooth); cursor: pointer; font-family: var(--font-display); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='white'/></svg>"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 10px; }
.lang-switch select:hover { border-color: var(--neon-purple); box-shadow: 0 0 14px rgba(179, 71, 234, 0.4); }
.lang-switch select option { background: rgba(18, 18, 30, 0.95); color: white; }

footer { margin-top: auto; padding: 1.5rem; text-align: center; background: rgba(4, 4, 12, 0.65); backdrop-filter: blur(14px); border-top: 1px solid rgba(255, 255, 255, 0.04); font-family: var(--font-display); letter-spacing: 1.5px; color: var(--text-secondary); font-size: 0.8rem; }
.footer-small { font-size: 0.7rem; opacity: 0.5; margin-top: 0.3rem; }

@media (max-width: 768px) {
    body { font-size: 13px; cursor: auto; }
    a:hover, button:hover, .btn:hover, .nav-link:hover, .glass-card:hover, .server-card:hover, select:hover, .forum-category-card:hover, .lang-switch select:hover, .news-card:hover, .forum-thread-card:hover { cursor: pointer; }

    .navbar { padding: 0.4rem 0.8rem; gap: 0.4rem; }
    .logo { font-size: 1rem; }
    .logo-icon { width: 32px; height: 32px; }
    .nav-links { gap: 0.4rem; justify-content: center; }
    .nav-link { font-size: 0.7rem; padding: 0.25rem 0.4rem; white-space: nowrap; }
    .nav-link::after { display: none; }

    .user-controls { flex-wrap: wrap; justify-content: center; width: 100%; gap: 0.4rem; }
    .user-profile { padding: 0.3rem 0.6rem; gap: 0.4rem; }
    .user-avatar { width: 24px; height: 24px; }
    .user-name { font-size: 0.7rem; }
    .user-balance { font-size: 0.6rem; }
    .steam-login-btn img { height: 24px; }

    .page { padding: 1rem 0.8rem; }

    .lang-switch select { font-size: 0.7rem; padding: 0.3rem 1.4rem 0.3rem 0.5rem; }

    footer { padding: 1rem; font-size: 0.7rem; }
    .footer-small { font-size: 0.6rem; }
}

@media (max-width: 480px) {
    .logo { font-size: 0.85rem; }
    .nav-link { font-size: 0.6rem; padding: 0.2rem 0.3rem; }
    .page { padding: 0.8rem 0.5rem; }
}