/* ==========================================================
   Nksocial — Games Hub
   Base stylesheet (style.css)
   Light theme, independent of the sidebar/hamburger's dark UI.
   Palette taken from the page's own meta theme-color gradient
   and the logo's cyan/pink identity — no neon green, no dark bg.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Inter:wght@400;500;600&display=swap');

:root {
    --bg-start: #e0eafc;
    --bg-end: #cfdef3;
    --surface: #ffffff;
    --text: #22293b;
    --text-muted: #64708a;
    --accent-cyan: #00b4d8;
    --accent-pink: #ff5d8f;
    --border: rgba(34, 41, 59, 0.10);
    --shadow: 0 8px 24px rgba(79, 172, 254, 0.15);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);
    background-attachment: fixed;
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    padding-bottom: 40px;
}

a {
    color: inherit;
}

/* --- HERO / HEADER --- */
.hero {
    text-align: center;
    padding: 50px 20px 30px;
    max-width: 640px;
    margin: 0 auto;
}

.hero p {
    color: var(--text-muted);
    font-size: 15px;
    margin: 16px 0 20px;
}

.live-counter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-muted);
}

.live-counter .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 8px rgba(0, 180, 216, 0.6);
}

.live-counter #live-count {
    color: var(--accent-cyan);
    font-weight: 600;
}


/* --- GAMES HUB HEADING --- */
h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 1px;
    margin: 30px 0 25px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- GAME LINKS (overrides inline dark card look) --- */
.game {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.game:hover {
    background: #f5f9ff;
}

.poster-link {
    background: var(--surface);
    border: 2px solid var(--border);
}

.poster-link:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 15px rgba(0, 180, 216, 0.35);
}

/* --- FOOTERS --- */
footer {
    border-top: 1px solid var(--border);
    margin-top: 40px;
}

footer a {
    text-decoration: none;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

footer a:hover {
    color: var(--accent-pink);
}

.seo-content {
    border-top: none;
    padding: 10px 20px 30px;
}

.seo-content .content-box {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.seo-content h4 {
    color: var(--text);
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
    margin-bottom: 8px;
}

.seo-content b {
    color: var(--accent-pink);
    font-weight: 600;
}

/* --- RESPONSIVE --- */
@media (max-width: 480px) {
    .hero {
        padding: 40px 16px 20px;
    }

    h1 {
        font-size: 21px;
    }
}