/* Root Colors */
:root {
    --cs-dark: #0a0a0f;
    --cs-darker: #06060a;
    --cs-accent: #f0a500;
    --cs-accent2: #ff6b35;
    --cs-text: #c8ccd0;
    --cs-muted: #6c757d;
    --cs-card: #12121a;
    --cs-border: #1e1e2a;
}

/* Body */
body {
    background: var(--cs-darker);
    color: var(--cs-text);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* Accent class for guaranteed orange text */
.accent {
    color: var(--cs-accent) !important;
}

/* Navbar */
.navbar .navbar-brand .accent {
    color: var(--cs-accent) !important;
}

.navbar .nav-link {
    color: var(--cs-text);
}

.navbar .nav-link:hover {
    color: var(--cs-accent);
}

#join-btn {
    background: var(--cs-accent);
    color: var(--cs-dark);
    font-weight: 600;
    border: none;
    border-radius: .375rem;
    padding: .5rem 1rem;
    transition: background .2s, color .2s;
}

#join-btn:hover {
    background: var(--cs-accent2);
    color: #fff;
}

/* Hero */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../img/hero-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6,6,10,0.7) 0%, rgba(6,6,10,0.85) 60%, var(--cs-darker) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-title {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: #fff;
    text-shadow: 0 2px 20px rgba(0,0,0,0.6);
    margin-bottom: 1rem;
    opacity: 0;
    animation: heroFadeInUp 1s ease-out forwards;
    animation-delay: 0.3s;
}

.hero-title .accent {
    color: var(--cs-accent) !important;
}

.hero-tagline {
    font-size: 1.25rem;
    color: var(--cs-muted);
    margin-bottom: 2rem;
    line-height: 1.45; /* Micro tweak: better readability */
    opacity: 0;
    animation: heroFadeInUp 1s ease-out forwards;
    animation-delay: 0.6s;
}

/* Server IP Box */
.ip-display {
    background: var(--cs-dark);
    border: 1px solid var(--cs-border);
    border-radius: .375rem;
    padding: .5rem 1rem;
    font-family: 'Consolas', monospace;
    font-size: 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: border-color .2s, background .2s;
    opacity: 0;
    animation: heroFadeInUp 1s ease-out forwards;
    animation-delay: 0.75s;
}

.ip-display:hover {
    border-color: var(--cs-accent);
    background: var(--cs-card);
}

/* Server Status */
#server-status {
    opacity: 0;
    animation: heroFadeInUp 1s ease-out forwards;
    animation-delay: 0.9s;
}

.status-dot.online {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #28a745;
    border-radius: 50%;
    margin-right: .5rem;
}

/* Hero Button */
#join-btn-hero {
    background: var(--cs-accent);
    color: var(--cs-dark);
    font-weight: 600;
    border: none;
    border-radius: .375rem;
    padding: .75rem 2rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    opacity: 0;
    animation: heroFadeInUp 1s ease-out forwards;
    animation-delay: 1.1s;
    transition: background .2s, color .2s, transform .2s; /* Micro tweak: add transform transition */
}

#join-btn-hero:hover {
    background: var(--cs-accent2);
    color: #fff;
    transform: translateY(-1px); /* Micro tweak: subtle lift */
}

/* Fade-in animation */
@keyframes heroFadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Announcements */
.announcements {
    background: #111;
    border: 1px solid #333;
    padding: 15px;
    border-radius: 6px;
}

.announcement {
    padding: 6px 0;
    border-bottom: 1px solid #222;
}

.announcement:last-child {
    border-bottom: none;
}

.announcement.highlight {
    background-color: #1a1a1a;
    border-left: 4px solid #f39c12;
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    animation: pulse-subtle 2.5s ease-in-out infinite; /* Micro tweak: softer pulse */
}

/* Announcement List */
.announcement-list {
    list-style: none;
    padding-left: 0;
}

.announcement-list li {
    margin-bottom: 8px; /* Micro tweak: spacing between items */
}

.announcement-list li i {
    margin-right: 7px; /* Micro tweak: icon spacing */
    font-size: 0.95em; /* Micro tweak: slightly larger for readability */
    vertical-align: middle;
}

/* Announcement Links */
.announcement a {
    color: var(--cs-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

.announcement a:hover {
    color: var(--cs-accent2);
    text-decoration: underline;
}

/* Pulse Animation (subtle) */
@keyframes pulse-subtle {
    0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
    50% { box-shadow: 0 3px 9px rgba(243, 156, 18, 0.35); }
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title { font-size: clamp(2rem, 7vw, 3rem); }
    .hero-tagline { font-size: 1rem; }
}