/* --- 1. GLOBAL RESET & FONTS --- */
* { box-sizing: border-box; }

body { 
    margin: 0; padding: 0;
    font-family: 'VT323', monospace; 
    font-size: 24px;
    background-color: #87CEEB; /* Default Light Sky */
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.6) 0%, transparent 35%),
        radial-gradient(circle at 85% 85%, rgba(255, 255, 255, 0.4) 0%, transparent 40%),
        linear-gradient(180deg, #87CEEB 0%, #E0F7FA 100%);
    background-attachment: fixed;
    color: #5D4037; 
    display: flex; flex-direction: column; min-height: 100vh;
    overflow-x: hidden;
}

/* --- 2. SNOW CANVAS (Fixed Background) --- */
#snowCanvas { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    pointer-events: none; z-index: -1; display: block; 
}

/* --- 3. NAVBAR STYLES --- */
.navbar { 
    background: #A1887F; border-bottom: 5px solid #6D4C41; width: 100%; 
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    padding: 15px 0; box-shadow: 0px 6px 0px rgba(93, 64, 55, 0.3);
    position: sticky; top: 0; z-index: 100; transition: all 0.3s ease;
}

.navbar a.nav-link { 
    display: block; color: #5D4037; background: #FFF8E1; text-align: center; 
    padding: 10px 25px; margin: 5px 10px; font-size: 1.6rem; 
    border-radius: 20px; border: 3px solid #8D6E63; text-decoration: none;
    transition: 0.2s; font-weight: bold; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.05);
}
.navbar a.nav-link:hover { background: #ffffff; transform: translateY(-3px); }
.navbar a.nav-link.active { background: #FFECB3; color: #C79607; border-color: #C79607; box-shadow: 0 4px 0 #C79607; }

/* Control Buttons (Dark Mode & Minimize) */
.nav-controls { display: flex; gap: 10px; margin-left: 15px; align-items: center; }
.icon-btn {
    background: #FFF8E1; color: #5D4037; border: 3px solid #8D6E63;
    border-radius: 12px; width: 45px; height: 45px;
    font-family: 'VT323', monospace; font-size: 1.8rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: 0.2s; padding-bottom: 4px;
}
.icon-btn:hover { background: #ffffff; transform: translateY(-2px); }

/* Minimized Navbar State */
.navbar.minimized { height: 20px; padding: 0; background: #8D6E63; border-bottom: 4px solid #6D4C41; overflow: hidden; }
.navbar.minimized a.nav-link, .navbar.minimized #theme-toggle { display: none; }
.navbar.minimized .nav-controls { position: absolute; right: 10px; top: -8px; }
.navbar.minimized #nav-minimize { height: 25px; width: 40px; font-size: 1.2rem; border: none; background: transparent; color: #FFF; }

/* --- 4. MOBILE OPTIMIZATION --- */
@media (max-width: 950px) {
    .container { 
        display: flex; flex-direction: column; align-items: center; 
        max-width: 500px; gap: 20px; 
    }
    
    /* Reorder: Menu First, then Widgets */
    .menu-panel { order: 1; width: 100%; margin-bottom: 10px; }
    .left-col { order: 2; width: 100%; margin-top: 0; }
    .right-col { order: 3; width: 100%; margin-top: 0; }
    
    /* Blog specific mobile adjustments */
    .sidebar { display: none; } 
    .container.devlog-container { grid-template-columns: 1fr; } 

    h1 { font-size: 4rem; }
    .navbar { padding: 10px 0; }
    .navbar a.nav-link { font-size: 1.3rem; padding: 8px 15px; margin: 5px; }
}

/* --- 5. DARK MODE OVERRIDES --- */
body.dark-mode {
    background-color: #1a1a2e;
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.1) 0%, transparent 35%),
        radial-gradient(circle at 85% 85%, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
        linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    color: #e0e0e0;
}

/* Dark Navbar */
body.dark-mode .navbar { background: #2D2420; border-bottom-color: #1a1512; }
body.dark-mode .navbar a.nav-link { background: #3E2723; color: #FFF8E1; border-color: #5D4037; }
body.dark-mode .navbar a.nav-link:hover { background: #4E342E; }
body.dark-mode .navbar a.nav-link.active { background: #FFB300; color: #3E2723; }
body.dark-mode .icon-btn { background: #3E2723; color: #FFB300; border-color: #5D4037; }

/* Dark Cards & Text - Global */
body.dark-mode .card, body.dark-mode .menu-panel, body.dark-mode main, 
body.dark-mode .osrs-interface, body.dark-mode .year-section, 
body.dark-mode .rewind-card, body.dark-mode .char-card, 
body.dark-mode .project-card, body.dark-mode .arcade-cabinet {
    background: #263238; border-color: #37474F; box-shadow: 10px 10px 0 rgba(0,0,0,0.5); color: #ECEFF1;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
body.dark-mode .time-display, body.dark-mode .year-label,
body.dark-mode .wc-header, body.dark-mode .post-title,
body.dark-mode .header-text h1 { 
    color: #FFD54F !important; text-shadow: 2px 2px 0 #000; 
}

/* Specific Widget Backgrounds */
body.dark-mode .lore-box, body.dark-mode .weather-display, 
body.dark-mode .feed-content, body.dark-mode .task-item, 
body.dark-mode .stat-item, body.dark-mode .bio-text {
    background: #37474F; color: #ECEFF1; border-color: #546E7A;
}

/* Devlog & Post Specifics */
body.dark-mode .post-card { background: #263238; border-color: #37474F; color: #ECEFF1; }
body.dark-mode .info-panel { background: #263238; border-color: #37474F; }
body.dark-mode .paper-widget { 
    background-color: #37474F; border-color: #546E7A; 
    background-image: repeating-linear-gradient(#37474F 0px, #37474F 24px, #455A64 25px);
}
body.dark-mode .paper-item { color: #ECEFF1; }
body.dark-mode .paper-item.done { color: #546E7A; }

/* Stats & Input Specifics */
body.dark-mode .goals-widget { background: #37474F; border-color: #546E7A; }
body.dark-mode .task-input { background: #37474F; color: #ECEFF1; border-color: #546E7A; }
body.dark-mode .task-input:focus { outline-color: #FFD54F; background: #263238; }
body.dark-mode .goal-row { background: rgba(0, 0, 0, 0.3); border-color: #546E7A; color: #ECEFF1; }
body.dark-mode .goal-row.done { background: rgba(76, 175, 80, 0.2); border-color: #81C784; }
body.dark-mode .goal-row.done span { color: #A5D6A7; }

/* Game Canvas Fix */
body.dark-mode canvas#wcCanvas { 
    background-color: #1a237e; border-color: #546E7A; 
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.1); 
}