body { margin: 0; font-family: 'Segoe UI', sans-serif; background-color: #0d1117; color: #c9d1d9; line-height: 1.6; }
header { background-image: url('banner.WebP'); background-size: cover; background-position: center; padding: 4rem 2rem; text-align: center; color: white; position: relative; }
header::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 0; }

header * { position: relative; z-index: 1; }
header img.logo { width: 180px; max-width: 80%; height: auto; margin-bottom: 1rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); transition: transform 0.3s ease; }
header img.logo:hover { transform: scale(1.05); }
header h1 { margin: 0; font-size: 3rem; }
main { max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
section { margin-bottom: 2rem; }
code { background-color: #161b22; color: #58a6ff; padding: 0.2em 0.4em; border-radius: 4px; font-family: monospace; }
footer { text-align: center; padding: 1rem; background-color: #0d1117; color: #8b949e; font-size: 0.9rem; }
a { color: #58a6ff; text-decoration: none; }
a:hover { text-decoration: underline; }
#status { font-weight: bold; margin-top: 1rem; font-size: 1.2rem; color: #79c0ff; }

.tabs { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.tab-button { background-color: #161b22; color: #c9d1d9; border: 1px solid #30363d; padding: 0.5rem 1.2rem; border-radius: 8px; cursor: pointer; font-size: 1rem; transition: all 0.2s ease; }
.tab-button:hover { background-color: #21262d; transform: scale(1.05); }
.tab-button.active { background-color: #58a6ff; color: #0d1117; font-weight: bold; border-color: #58a6ff; }
.tab-content.hidden { display: none; }
.shop-button { display: inline-block; margin-top: 1.5rem; padding: 0.75rem 1.5rem; background-color: #58a6ff; color: #0d1117; text-decoration: none; font-weight: bold; border-radius: 8px; transition: background-color 0.2s ease; }
.shop-button:hover { background-color: #79c0ff; }
.discord-button { position: absolute; top: 1.5rem; right: 1.5rem; background-color: #5865F2; padding: 0.6rem 0.9rem; border-radius: 8px; display: flex; align-items: center; transition: background-color 0.2s ease; z-index: 2; }
.discord-button:hover { background-color: #4752c4; }
.discord-button img { width: 24px; height: 24px; }
.tab-content { opacity: 1; transition: opacity 0.4s ease; }
.tab-content.hidden { opacity: 0; pointer-events: none; position: absolute; }
.logo { animation: slideDown 0.8s ease-out; }
@keyframes slideDown { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
header h1 { animation: slideInLeft 0.8s ease-out; }
@keyframes slideInLeft { from { transform: translateX(-40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.online-glow { animation: glowIn 0.5s ease; }
@keyframes glowIn { from { transform: scale(0.95); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
.shop { background-color: #161b22; border-left: 4px solid #58a6ff; padding: 1rem; margin: 1rem 0; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.shop h3 { margin-top: 0; color: #a5d6ff; }
.shop ul { padding-left: 1.5rem; margin: 0.5rem 0; }
.shop li { margin-bottom: 0.3rem; }