/* IMPORT DEFAULT FONT */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* --- GLOBAL VARS --- */
:root {
    /* BRICKROAD CORE PALETTE */
    --desktop-bg: #2b2b2b;
    
    /* UI ELEMENTS */
    --ui-face: #d35400;         
    --ui-light: #e67e22;
    --ui-dark: #a04000;
    --ui-text: #ffffff; 
    
    /* WINDOWS */
    --win-bg: #f5cba7;
    --win-text: #000000;
    --title-grad-1: #d35400;
    --title-grad-2: #2b2b2b;
    --title-text: #ffffff;
    
    /* FONT SETTINGS (Controlled by Tools) */
    --user-font: 'Courier New', monospace; /* New Default */
    --font-size: 12px; /* Standard size for non-pixel fonts */
}

/* GLOBAL RESET */
* {
    box-sizing: border-box;
    user-select: none;
    font-family: var(--user-font); 
}

/* Apply dynamic size to all text elements */
body, button, input, select, textarea, .brick, .window, .menu-item {
    font-size: var(--font-size);
}

body {
    margin: 0;
    overflow: hidden;
    background-color: var(--desktop-bg);
    /* Corrected to .com */
    background-image: url('https://brickroad.neocities.com/images/wallpapers/BrickroadOS.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    image-rendering: pixelated;
    height: 100vh;
    color: var(--ui-text);
}

/* 3D BEVEL UTILITY */
.bevel-out {
    border-top: 2px solid var(--ui-light);
    border-left: 2px solid var(--ui-light);
    border-right: 2px solid var(--ui-dark);
    border-bottom: 2px solid var(--ui-dark);
    background: var(--ui-face);
    color: var(--ui-text);
}

.bevel-in {
    border-top: 2px solid var(--ui-dark);
    border-left: 2px solid var(--ui-dark);
    border-right: 2px solid var(--ui-light);
    border-bottom: 2px solid var(--ui-light);
    background: var(--win-bg); 
}

/* --- DESKTOP ICONS --- */
.desktop-icon {
    position: absolute; 
    width: 90px;       
    padding: 5px;
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    
    color: white; 
    text-shadow: 2px 2px 0px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-weight: bold;
    cursor: default;
    border: 1px solid transparent;
    z-index: 1;
    line-height: 1.4;

    /* MOBILE FIX: Prevents pulling page down while dragging icons */
    touch-action: none; 
}

.desktop-icon img {
    /* INCREASED DESKTOP ICON SIZE */
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    pointer-events: none; 
    /* Standard Shadow */
    filter: drop-shadow(3px 3px 0px rgba(0,0,0,0.8));
}

.desktop-icon:hover {
    background: rgba(0, 0, 128, 0.5);
    border: 1px dotted rgba(255, 255, 255, 0.8);
}

.desktop-icon.selected {
    background: rgba(0, 0, 128, 0.8);
    border: 1px dotted white;
}

/* RED GLOW ANIMATION */
@keyframes pulse-red-anim {
    0% { filter: drop-shadow(3px 3px 0px rgba(0,0,0,0.8)) drop-shadow(0 0 0 rgba(255, 0, 0, 0)); }
    50% { filter: drop-shadow(3px 3px 0px rgba(0,0,0,0.8)) drop-shadow(0 0 8px rgba(255, 0, 0, 1)); transform: scale(1.05); }
    100% { filter: drop-shadow(3px 3px 0px rgba(0,0,0,0.8)) drop-shadow(0 0 0 rgba(255, 0, 0, 0)); }
}
.pulse-red img {
    animation: pulse-red-anim 1.5s infinite ease-in-out;
}

/* --- VOLUME POPUP --- */
#volume-popup {
    display: none;
    position: fixed;
    bottom: 55px; 
    right: 5px; 
    width: 40px;
    height: 120px;
    background: var(--ui-face);
    border: 2px solid var(--ui-text);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
    z-index: 6000;
    padding: 10px 0;
    justify-content: center;
}

input[type=range][orient=vertical] {
    writing-mode: bt-lr; 
    -webkit-appearance: slider-vertical; 
    width: 8px;
    height: 90px;
    padding: 0 5px;
}

/* CRT Effect */
#crt-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 9999;
}
.crt-off { display: none; }
.crt-on {
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    display: block;
}

#tools-drawer, #doodletop-drawer {
    /* Set this to a very high number to stay above windows (which start at 100) */
    z-index: 999999 !important; 
}

/* Ensure the canvas for DoodleTop also stays above everything when active */
#doodletop-canvas {
    z-index: 999998 !important;
}

/* CONTAINER FIXES */
#desktop-environment { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#window-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }
.window { pointer-events: auto; }

/* Hard hide for drawers when system is busy */
body.system-busy #tools-drawer, 
body.system-busy #doodletop-drawer,
body.system-busy #doodletop-canvas {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}