:root {
    --bg-color: #f4f7f6;
    --card-bg: #ffffff;
    --primary-color: #2e4088;
    --accent-color: #ef4f23;
    --text-color: #2d3436;
    --text-muted: #636e72;
    --font-main: 'Outfit', sans-serif;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
header {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 15px 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo img {
    height: 50px;
    width: auto;
}

/* Hide text if logo has text, or keep it if logo is just icon. 
   Assuming logo has text based on "PIXEL BYTE" in image. 
   Let's hide the h1 text visually but keep for SEO if needed, 
   or just remove it if the logo is full. 
   For now, I'll remove the h1 styling and let the image take over. */
.logo h1 {
    display: none;
    /* Hiding text as logo image likely contains it */
}

nav ul {
    display: flex;
    gap: 30px;
}

nav a {
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.8;
}

nav a:hover,
nav a.active {
    opacity: 1;
    color: var(--primary-color);
}

/* Hero Section */
.hero-simple {
    text-align: center;
    padding: 100px 0;
    background: linear-gradient(135deg, #ffffff 0%, #eef2f3 100%);
}

.hero-simple h2 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    color: var(--primary-color);
}

.hero-simple p {
    font-size: 1.3rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Games Section */
.games-section {
    padding: 60px 0 100px;
}

.games-section h3 {
    font-size: 2.2rem;
    margin-bottom: 50px;
    border-left: 5px solid var(--accent-color);
    padding-left: 20px;
    color: var(--primary-color);
}

.category-filter {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 25px;
    border: 2px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    border-radius: 30px;
    font-family: var(--font-main);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: var(--primary-color);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(46, 64, 136, 0.2);
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.game-card {
    background-color: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.game-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(46, 64, 136, 0.15);
    border-color: var(--primary-color);
}

.card-image {
    height: 220px;
    background-size: cover;
    background-position: center;
}

.card-content {
    padding: 25px;
}

.card-content h4 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--text-color);
}

.card-content p {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.tag {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(239, 79, 35, 0.1);
    /* Accent color low opacity */
    color: var(--accent-color);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

/* Privacy Policy Page */
.policy-page {
    padding: 80px 0;
    background-color: #ffffff;
}

.policy-page h2 {
    font-size: 2.8rem;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.last-updated {
    color: var(--text-muted);
    margin-bottom: 50px;
    font-style: italic;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    display: inline-block;
}

.policy-section {
    margin-bottom: 50px;
}

.policy-section h3 {
    font-size: 1.6rem;
    margin-bottom: 20px;
    color: var(--primary-color);
}

.policy-section p {
    margin-bottom: 15px;
    color: var(--text-muted);
    line-height: 1.8;
}

.policy-section ul {
    list-style: disc;
    padding-left: 25px;
    color: var(--text-muted);
    line-height: 1.8;
}

.policy-section li {
    margin-bottom: 10px;
}

/* Footer */
footer {
    background-color: var(--primary-color);
    padding: 50px 0;
    color: #ffffff;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.footer-links {
    display: flex;
    gap: 25px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.footer-links a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 20px;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}