*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --bg-color: #f2ede5; 
    --text-color: #242424; 
}

/* Dark mode */
html.dark :root {
    --bg-color: #111111;
    --text-color: #e5e3df;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Roboto Mono', monospace;
    display: block; 
    box-sizing: border-box;
    transition: background-color 0.3s, color 0.3s;
}

.layout-container {
    width: 100%;
}

/* Dance Mode Implementation */
.dance-overlay { 
    display: none; 
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    z-index: 10001; 
    cursor: crosshair;
}
body.dance-mode .dance-overlay { display: block; }
body.dance-mode .dance-overlay::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 300px; height: 300px; 
    background: url('DANCE.png') center/contain no-repeat;
    opacity: 0;
    animation: fade-in-disco 1s ease-out forwards, disco-spin 1.5s linear infinite alternate;
    z-index: 10002;
    pointer-events: none;
}
body.dance-mode::after {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 9998; 
    background: radial-gradient(circle, rgba(200,0,255,0.4) 10%, transparent 60%),
                radial-gradient(circle, rgba(0,255,200,0.4) 10%, transparent 60%),
                radial-gradient(circle, rgba(255,255,0,0.4) 10%, transparent 60%);
    background-size: 200% 200%;
    animation: dance-lights 2s ease-in-out infinite alternate;
}
@keyframes dance-lights {
    0% { background-position: 0% 0%, 100% 0%, 50% 100%; }
    50% { background-position: 100% 100%, 0% 50%, 50% 0%; }
    100% { background-position: 50% 0%, 0% 100%, 100% 50%; }
}
@keyframes disco-spin {
    0% { filter: hue-rotate(0deg) brightness(1); }
    100% { filter: hue-rotate(360deg) brightness(1.5); }
}
@keyframes fade-in-disco {
    from { opacity: 0; transform: translateX(-50%) translateY(-30px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}