/* style.css - The Master Theme */
:root { 
    --sidebar-width: 260px; 
    --accent: #6366f1; 
    --bg: #f8fafc; 
    --text: #1e293b; 
}

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

body { 
    font-family: 'Inter', system-ui, sans-serif; 
    background-color: var(--bg); 
    color: var(--text); 
    display: flex; 
    min-height: 100vh; 
}

/* Sidebar Navigation */
nav { 
    width: var(--sidebar-width); 
    background: #ffffff; 
    border-right: 1px solid #e2e8f0; 
    padding: 2.5rem; 
    position: fixed; 
    height: 100vh; 
    z-index: 100;
}

nav h2 { font-size: 0.85rem; text-transform: uppercase; color: #94a3b8; margin-bottom: 2rem; }
nav ul { list-style: none; }
nav li { margin-bottom: 1.2rem; }
nav a { text-decoration: none; color: #64748b; font-weight: 600; transition: 0.2s; }
nav a:hover, nav a.active { color: var(--accent); }

/* Main Content Area */
main { 
    margin-left: var(--sidebar-width); 
    flex-grow: 1; 
    padding: 3rem; 
    max-width: 1200px;
}

h1 { font-size: 2.5rem; color: #0f172a; margin-bottom: 1rem; }
p { line-height: 1.6; color: #475569; margin-bottom: 1rem; }

/* Game Canvas & Containers */
canvas { 
    background: #000; 
    border: 4px solid var(--accent); 
    border-radius: 12px; 
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.2);
    max-width: 100%;
}

.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.back-link { display: inline-block; margin-top: 2rem; color: #64748b; text-decoration: none; font-weight: bold; }
.back-link:hover { color: var(--accent); }

/* Mobile Response */
@media (max-width: 768px) {
    body { flex-direction: column; }
    nav { 
        width: 100%; height: auto; position: relative; 
        padding: 1rem; border-right: none; border-bottom: 1px solid #e2e8f0; 
    }
    nav ul { display: flex; flex-wrap: wrap; gap: 15px; }
    main { margin-left: 0; padding: 1.5rem; width: 100%; }
}