:root {
    --key-base-size: 24px; /* Adjusted for better fit within keyboard */
    --key-gap: 4px;
}

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Silkscreen', 'Chicago', sans-serif; /* Added Chicago fallback */
    font-size: 14px;
    background-color: #3d3d3d; /* Fallback */
    background-image: url('vintage_background.png'); /* New background */
    background-size: cover; /* or contain, or repeat based on asset */
    background-repeat: repeat; /* If it's a pattern */
    overflow: hidden; /* Changed to hidden to prevent scrollbars */
    user-select: none;
    cursor: none; /* Hide default cursor */
    display: flex; /* Changed to flex to stack elements */
    flex-direction: column; /* Stack desk-surface and footer vertically */
    font-smooth: never;
    -webkit-font-smoothing: none;
}

/* NEW: Ensure footer buttons are clickable during boot */
#footer-buttons {
    pointer-events: auto;
}

img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

#custom-cursor {
    position: absolute;
    width: 32px; /* Made cursor bigger */
    height: 32px; /* Made cursor bigger */
    background-image: url('Normal-Select.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none; /* Allows clicks to pass through */
    z-index: 99999; /* Ensure it's always on top */
    /* Default transform for arrow cursor (hotspot at 0,0) */
    transform: translate(0, 0); 
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

#custom-cursor.hand {
    background-image: url('Link-Select.png');
    /* Adjust transform for hand cursor (hotspot near finger tip) */
    transform: translate(-10px, -5px);
}

#custom-cursor.help {
    background-image: url('Help-Select.png');
    /* Adjust transform for help cursor (hotspot near center) */
    transform: translate(-16px, -16px);
}

#custom-cursor.busy {
    background-image: url('Busy.gif');
    /* Adjust transform for busy cursor (hotspot near center) */
    transform: translate(-16px, -16px);
}

#desk-surface {
    flex-grow: 1; /* Allow desk-surface to take up remaining vertical space */
    width: 100%; /* Changed from 100vw to 100% */
    display: flex; /* Make it a flex container to hold the screen */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, #5a5a5a, #2a2a2a); /* This will be behind the new body background image */
    position: relative; /* For positioning wires absolutely within it */
    padding: 0; /* Remove any padding that might prevent full screen */
}

#screen {
    position: absolute; /* Position within #desk-surface */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
    border: none; /* Removed physical border */
    border-radius: 0; /* No rounded corners for full screen */
    filter: contrast(1.05) brightness(1.05); /* Subtle glow/bloom */
}

#screen::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.2) 50%);
    background-size: 100% 4px;
    z-index: 10001;
    pointer-events: none;
    animation: flicker 0.15s infinite;
    border-radius: 0; /* No rounded corners */
}

#screen::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Combined vignette and subtle curvature hint */
    box-shadow: 
        inset 0 0 50px 15px rgba(0,0,0,0.6), /* Stronger vignette */
        inset 0 0 20px 5px rgba(0,0,0,0.2), /* Softer inner shadow for depth */
        0 0 15px rgba(255,255,255,0.1) inset; /* Very subtle light fall-off */
    z-index: 10002;
    pointer-events: none;
    border-radius: 0; /* No rounded corners */
}

@keyframes flicker {
    0% { opacity: 0.9; }
    50% { opacity: 1; }
    100% { opacity: 0.9; }
}

#menubar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    background-color: #fff;
    border-bottom: 2px solid #000;
    display: flex;
    align-items: center;
    padding: 0 5px;
    box-sizing: border-box;
    z-index: 10000;
}

.menu {
    position: relative;
}

.menu-item {
    padding: 2px 8px;
    white-space: nowrap;
}

.menu-item.active, .menu-item:hover {
    background-color: #000;
    color: #fff;
}

.menu-apple {
    padding: 0 8px;
    display: flex;
    align-items: center;
    height: 22px;
}

.apple-logo {
    width: 12px;
    height: 14px;
}

.menu-item.active .apple-logo, .menu-item:hover .apple-logo {
   filter: invert(1);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 22px;
    left: 0;
    background-color: #fff;
    border: 2px solid #000;
    box-shadow: 2px 2px 0px rgba(0,0,0,1);
    min-width: 150px;
    z-index: 10001;
    padding: 2px 0;
}

.dropdown-item:not(.disabled):hover {
    background-color: #000;
    color: #fff;
}

.dropdown-item.disabled {
    color: #888;
}

/* New style for selected view mode */
.dropdown-item.selected-view {
    background-color: #000;
    color: #fff;
}

hr {
    border: 0;
    border-top: 1px solid #000;
    margin: 4px 0;
}

#desktop {
    position: absolute; /* Changed to absolute */
    top: 24px; /* Positioned directly below the menubar */
    left: 0; /* Aligned to the left edge of #screen */
    height: calc(100% - 24px); /* Fills remaining height */
    width: 100%;
    background-color: white;
    background-image: url('desktop_pattern.png'); /* Using asset */
    background-repeat: repeat;
    background-size: 2px 2px; /* Ensure 2x2 pattern */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.desktop-icon {
    position: absolute;
    width: 48px; /* Reduced width for smaller icons */
    text-align: center;
    padding: 5px;
    z-index: 1; /* Changed from 50 to 1 for clearer distinction */
}

.desktop-icon img {
    max-width: 100%; /* Prevent stretching */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
    margin: 0 auto 5px auto; /* Center image and add bottom margin */
}

.desktop-icon:hover {
    background-color: rgba(0,0,0,0.1);
}
.desktop-icon.selected {
    background-color: #000;
    color: #fff;
}

.desktop-icon.selected img {
    filter: invert(1);
}

.desktop-icon span {
    display: inline-block;
    padding: 2px 4px;
    font-size: 8px; /* Smaller font size for icon text */
}

/* Window Styles */
.window {
    position: absolute;
    background-color: #fff;
    border: 2px solid #000;
    box-shadow: 3px 3px 0px rgba(0,0,0,1);
    /* Responsive defaults for windows */
    min-width: 150px;
    min-height: 100px;
    width: clamp(200px, 80vw, 450px);
    height: clamp(120px, 70vh, 400px);
    z-index: 100; /* Ensure this is higher than desktop-icon z-index */
    box-sizing: border-box; /* Crucial for responsive layouts */
    overflow: hidden; /* Hide overflow by default for windows */
}

/* Specific overrides for windows that need different max sizes or aspect ratios */
#macwrite-window,
#macpaint-window,
#nekopfp-window {
    width: clamp(300px, 90vw, 450px);
    height: clamp(250px, 85vh, 400px);
}
#calculator-window {
    width: clamp(180px, 50vw, 220px);
    height: clamp(240px, 60vh, 280px);
}
#alarm-clock-window {
    width: clamp(160px, 40vw, 200px);
    height: clamp(130px, 30vh, 180px);
}
#key-caps-window {
    width: clamp(350px, 90vw, 500px);
    height: clamp(150px, 40vh, 200px);
}
#about-window {
    width: clamp(280px, 70vw, 350px);
    height: clamp(150px, 40vh, 200px);
}
#hd-window, #disk-window, #trash-window, #empty-folder-window, #open-window {
    width: clamp(200px, 60vw, 300px);
    height: clamp(100px, 50vh, 400px); /* HD window has more content */
}
#notepad-window {
    width: clamp(250px, 70vw, 350px);
    height: clamp(180px, 50vh, 300px);
}
#scrapbook-window {
    width: clamp(280px, 80vw, 380px);
    height: clamp(200px, 60vh, 300px);
}
#application-window, #document-window {
    width: clamp(250px, 70vw, 350px);
    height: clamp(100px, 30vh, 180px);
}
#game-window {
    width: clamp(280px, 80vw, 350px);
    height: clamp(150px, 50vh, 250px);
}
#preferences-window, #community-tools-window {
    width: clamp(250px, 70vw, 320px);
    height: clamp(150px, 40vh, 220px);
}

.window.active {
    /* z-index: 500; */ /* REMOVED: Managed dynamically by JavaScript's bringToFront function */
}

.window-titlebar {
    background: #fff;
    height: 20px;
    padding: 0 4px;
    border-bottom: 2px solid #000;
    display: flex;
    align-items: center;
    cursor: default; /* Keep arrow for dragging */
}

.window.active .window-titlebar {
    background: repeating-linear-gradient(
        #fff,
        #fff 2px,
        #000 2px,
        #000 3px
    );
    background-size: 100% 3px;
    color: white; /* Make title text visible on active window */
}

.close-box-container {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.close-box {
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    background-color: #fff;
    margin-right: 5px;
}
.window.active .close-box {
    background-color: #fff;
    border-color: #fff;
}
.close-box:active {
    background-color: #000;
}

.title-text {
    flex-grow: 1;
    text-align: center;
    color: #000;
    padding-right: 20px; /* balance close box */
}

.window-content {
    /* For windows with scrollable content */
    overflow: auto; /* Allow content to scroll within the window */
    flex-grow: 1; /* Allow content to fill available space in flex containers */
    padding: 10px; /* Default padding for content */
}

.window-content p {
    margin: 4px 0;
}

.window-content .fs-item {
    display: flex;
    align-items: center;
    padding: 4px;
}

.window-content .fs-item img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

/* Buttons in dialog windows */
.dialog-button {
    padding: 5px 10px;
    font-family: 'Silkscreen', 'Chicago', sans-serif;
    font-size: 10px;
    background-color: #f0f0f0;
    border: 2px solid #000;
    box-shadow: 2px 2px 0px rgba(0,0,0,1);
    cursor: pointer;
}

.dialog-button:active {
    box-shadow: inset 1px 1px 0px rgba(0,0,0,1);
    transform: translate(1px, 1px);
}

#logo-area {
    width: 36px;
    height: 36px;
    background: #b0a89c;
    border: 1px solid #777;
    border-radius: 4px;
    box-shadow: inset 1px 1px 4px rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}

#mac-container {
    position: absolute; /* Position within the 3D scene */
    width: 560px; /* Match #macintosh-computer width */
    height: 705px; /* macintosh-computer height (680) + mac-base height (45) - overlap (2) */
    transform-style: preserve-3d; /* Keep for internal Mac faces */
    z-index: 20; /* Ensure it's above peripherals for front view */
    transform: translateY(-50px) translateZ(10px); /* Lift slightly and bring forward in Z space */
}

#mac-front-face {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align content to the top */
    transform: rotateY(0deg);
}

#screen-bezel {
    background: #333;
    padding: 15px 20px; /* Reduced padding */
    border: 2px solid #222;
    box-shadow: inset 2px 2px 8px rgba(0,0,0,0.8);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent it from shrinking */
}

#mac-chin {
    height: auto;
    flex-grow: 1;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start; /* Align logo to the left */
    margin-top: 15px;
    padding: 0 40px 45px 25px; /* Add padding for content */
    box-sizing: border-box;
    position: relative;
    padding-bottom: 25px; /* Adjust padding to move logo/floppy up from the new base */
}

#floppy-drive-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    pointer-events: none;
    box-sizing: border-box;
    padding-right: 35px;
    padding-top: 45px;
}

#floppy-drive-recess {
    width: 140px;
    height: 22px;
    background: #C8C0B4; /* Darker part of mac body gradient */
    border: 1px solid;
    border-color: #888 #fff #fff #888; /* Inset effect */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}

#floppy-drive-slot-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#floppy-drive-slot {
    width: 125px;
    height: 8px;
    background: #333;
    border-top: 1px solid #222;
    border-left: 1px solid #222;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.6);
    pointer-events: auto; /* Enable click for floppy slot */
    cursor: pointer;
}

#floppy-drive-slot-detail {
    width: 20px;
    height: 3px;
    background: #333;
    border-left: 1px solid #222;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
    box-shadow: inset 0px -1px 1px rgba(0,0,0,0.4);
}

#mac-branding {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align text left */
}

#mac-logo {
    position: absolute;
    bottom: 25px;
    left: 45px;
    display: flex;
    align-items: baseline;
}

.mac-logo-img {
    width: 24px;
    height: 24px;
}

.mac-logo-text {
    font-family: 'Garamond', serif;
    font-size: 24px;
    color: #4a4a4a; /* Darker grey for debossed look */
    font-weight: 600;
    letter-spacing: -1px;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.5); /* Debossed effect */
    line-height: 1;
}

#mac-base, #mac-base-back {
    position: relative;
    width: 520px; /* Shorter in width */
    height: 45px; /* Longer in height */
    margin-top: -2px; /* Pull it up to overlap the bottom border of the main unit */
    background: linear-gradient(to bottom, #8A827B 0%, #686058 100%); /* Darker beige/grey for the base */
    border-top: 2px solid #555;
    border-left: 2px solid #555;
    border-right: 2px solid #555;
    border-bottom: 4px solid #444; /* Thicker bottom border for depth */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.4), 0 5px 15px rgba(0,0,0,0.4);
    box-sizing: border-box;
    flex-shrink: 0; /* Prevent it from shrinking */
}

/* Power Switch (moved to front chin) */
.power-switch {
    width: 30px; /* Slightly wider for a clearer rocker */
    height: 15px; /* Taller */
    background-color: #222; /* Darker background for the recessed area */
    border: 1px solid #111; /* Darker border for depth */
    border-radius: 3px; /* Slightly more rounded corners for the housing */
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.8); /* Stronger inset shadow for the housing */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 5px;
    position: absolute; /* Position it relative to mac-chin */
    bottom: 25px; /* Aligned with floppy area bottom */
    right: 40px; /* Positioned to the right */
    cursor: pointer; /* Make power switch clickable */
    pointer-events: auto; /* Ensure it's clickable during boot */
}

.power-switch::before {
    content: '';
    width: 20px; /* Width of the rocker part */
    height: 10px; /* Height of the rocker part */
    background: linear-gradient(to bottom, #777 0%, #555 100%);
    border: 1px solid #444;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Clearer raised effect for the rocker */
    transition: transform 0.1s ease-out; /* Smooth press effect if interactive */
}

.power-switch.on::before {
    transform: translateY(-2px); /* Simulate switch being "up" or "on" */
}
.power-switch.off::before {
    transform: translateY(2px); /* Simulate switch being "down" or "off" */
}

/* New Peripheral Styles */
#macintosh-keyboard {
    width: 550px;
    height: 150px; /* Adjusted height to fit keys */
    background: linear-gradient(to bottom, #E0D8C8 0%, #C8C0B4 100%);
    border: 2px solid #444;
    border-radius: 5px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4), inset 0 2px 2px rgba(255,255,255,0.5);
    position: absolute; /* Position relative to #system-setup-3d */
    padding: 5px; /* Adjust padding to fit keys */
    box-sizing: border-box;
    z-index: 10;
    cursor: grab;
    /* Position relative to the main setup, moved from % to px for consistency */
    top: calc(50% + 220px); /* Position below the mac */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%) translateZ(0px); /* Adjust for true centering and z-depth */
}

#macintosh-keyboard:active {
    cursor: grabbing;
}

.keyboard-grid {
    display: flex;
    flex-wrap: wrap; /* Allow keys to wrap on small screens */
    gap: var(--key-gap);
    justify-content: flex-start; /* Align keys to the left */
    align-items: flex-start;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.key {
    background: #D0D0D0; /* Uniform gray key color */
    border: 1px solid #999;
    border-radius: 2px;
    box-shadow: 1px 1px 0px rgba(0,0,0,0.2), inset 1px 1px 2px rgba(255,255,255,0.7);
    width: var(--key-base-size); /* Base unit size for keys */
    height: var(--key-base-size);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    user-select: none; /* Prevent text selection inside keys */
    flex-shrink: 0; /* Prevent keys from shrinking */
}

.key:active, .key.pressed {
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3), 0 0 0 rgba(255,255,255,0.7); /* Pressed effect */
    transform: translateY(1px); /* Slight downward movement */
    background: #B0B0B0; /* Darker when pressed */
}

/* Specific key sizes using calc() based on base size, letting gap handle spacing */
/* Adjusted layout to be more accurate */
.delete-key { width: calc(var(--key-base-size) * 1.5 + var(--key-gap)); } /* Make it stretch across 1.5 units plus gap */
.tab-key { width: calc(var(--key-base-size) * 1.5 + var(--key-gap)); }
.caps-lock-key { width: calc(var(--key-base-size) * 1.75 + var(--key-gap) * 0.75); } /* Approx 1.75 units */
.return-key { width: calc(var(--key-base-size) * 2.75 + var(--key-gap) * 1.75); } /* Approx 2.75 units */
.shift-key:first-of-type { width: calc(var(--key-base-size) * 2.25 + var(--key-gap) * 1.25); } /* Left Shift */
.shift-key:last-of-type { width: calc(var(--key-base-size) * 2.75 + var(--key-gap) * 1.75); } /* Right Shift */
.ctrl-key, .opt-key, .cmd-key { width: calc(var(--key-base-size) * 1.25 + var(--key-gap) * 0.25); }
.space-key { flex-grow: 1; min-width: calc(var(--key-base-size) * 6); } /* Make spacebar flexible */


#macintosh-mousepad {
    position: absolute;
    width: 200px;
    height: 150px;
    background: #2a2a2a; /* Dark mousepad color */
    border: 2px solid #1a1a1a;
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    z-index: 9; /* Below keyboard and mouse */
    cursor: grab;
    /* Position relative to the main setup, adjusted to be to the right of keyboard */
    top: calc(50% + 220px); 
    left: calc(50% + 295px); /* Position to the right of the keyboard relative to the center */
    transform: translateZ(0px); /* Set z-depth */
}

#macintosh-mousepad:active {
    cursor: grabbing;
}

#macintosh-mouse {
    width: 80px;
    height: 100px;
    background: linear-gradient(to bottom, #E0D8C8 0%, #C8C0B4 100%);
    border: 2px solid #444;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2), inset 0 2px 2px rgba(255,255,255,0.5);
    position: absolute; /* Position relative to mousepad */
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;
    z-index: 10;
    cursor: grab; /* Cursor for dragging the mouse */
    transform: translateZ(0); /* Add a 3D transform to enable backface-visibility */
}

#macintosh-mouse:active {
    cursor: grabbing;
}

.mouse-button {
    width: 60px;
    height: 30px;
    background: #E0D8C8;
    border: 1px solid #A0988C;
    border-radius: 5px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.2);
    cursor: pointer; /* Pointer cursor for the button */
}
.mouse-button.active {
    background: #c9c9c9;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
    transform: translateY(1px);
}

/* Calculator Styles */
#calculator-display {
    background-color: #eee;
    border: 1px solid #999;
    padding: 10px;
    margin-bottom: 5px;
    text-align: right;
    font-size: 20px;
    font-family: 'Silkscreen', monospace;
    overflow: hidden; /* Prevent display from breaking layout */
    white-space: nowrap;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
    min-height: 20px; /* Ensure it has a minimum height */
    box-sizing: border-box;
}

#calculator-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    flex-grow: 1; /* Allow buttons to take up remaining vertical space */
}

#calculator-buttons .calc-row {
    display: contents; /* Allows buttons to directly participate in the grid */
}

#calculator-buttons button {
    width: 100%;
    height: 35px;
    min-width: 35px; /* Ensure buttons don't get too small */
    font-size: 14px;
    font-family: 'Silkscreen', monospace;
    background-color: #D0D0D0;
    border: 1px solid #999;
    border-radius: 2px;
    box-shadow: 1px 1px 0px rgba(0,0,0,0.2), inset 1px 1px 2px rgba(255,255,255,0.7);
    cursor: pointer;
    user-select: none;
    box-sizing: border-box; /* Include padding/border in element's total width/height */
}

#calculator-buttons button:active {
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3), 0 0 0 rgba(255,255,255,0.7);
    transform: translateY(1px);
    background-color: #B0B0B0;
}

#calculator-buttons button[data-action]:not([data-action="equals"]):not([data-action="clear"]):not([data-action="negate"]):not([data-action="percent"]) {
    background-color: #A0A0A0; /* Operator buttons */
}

#calculator-buttons .zero-btn {
    grid-column: span 2; /* Make zero button span two columns */
}

#calculator-buttons .equals-btn {
    background-color: #666; /* Equals button darker */
    color: white;
}

/* Temporary message div style */
#temp-message {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border: 2px solid #000;
    box-shadow: 3px 3px 0px rgba(0,0,0,1);
    padding: 10px 15px;
    font-family: 'Silkscreen', monospace;
    font-size: 12px;
    z-index: 10000;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* Make it non-interactive */
}

/* --- Boot Sequence Styles --- */
.boot-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; /* For stacking content like logo + text */
    justify-content: center;
    align-items: center;
    z-index: 10003; /* Higher than screen effects, menubar, desktop */
    background-color: white; /* Default background for boot screens (not black) */
    background-image: url('desktop_pattern.png');
    background-repeat: repeat;
    background-size: 2px 2px;
    color: black; /* Default text color for non-black boot screens */
    font-size: 12px;
    text-align: center;
}

.boot-layer.hidden {
    display: none;
}

#boot-screen-black {
    background-color: black;
    background-image: none; /* Override pattern for black screen */
}

#boot-screen-welcome {
    background-color: white; /* White background for welcome screen */
    color: black;
    font-size: 24px;
    font-weight: bold;
}

.boot-icon {
    width: 64px; /* Standard icon size for boot */
    height: 64px;
    image-rendering: pixelated;
    margin-bottom: 10px;
}

/* New: Sad Mac icon style for kernel panic */
.sad-mac-icon {
    width: 80px; /* Slightly larger for emphasis */
    height: 80px;
}

/* New: Kernel Panic screen styling */
#boot-screen-dead-mac {
    background-color: black;
    background-image: none;
    background-repeat: no-repeat;
    color: white;
}

/* MacPaint Canvas */
#macpaint-canvas {
    display: block;
    background-color: white;
    border: 1px solid black;
    cursor: crosshair; /* New: MacPaint cursor */
    position: relative; /* Changed to relative to be flex item */
    image-rendering: pixelated; /* Ensures pixel perfect drawing */
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    /* Ensure it fills its flex container and scales correctly */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Scales content down to fit */
    margin: auto; /* Center within flex container */
}

/* MacPaint Toolbar Buttons */
.macpaint-tool-btn.active {
    background-color: #000;
    color: #fff;
    box-shadow: inset 1px 1px 0px rgba(0,0,0,1); /* Inset shadow to show active */
    transform: translate(1px, 1px);
}

/* Footer Buttons */
#footer-buttons {
    width: 100%;
    padding: 10px;
    background-color: #3d3d3d; /* Match body background for seamless look */
    border-top: 1px solid #1a1a1a;
    display: flex;
    justify-content: center;
    gap: 15px;
    box-sizing: border-box;
    z-index: 9999; /* Ensure it's above other elements if something overlaps */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

#desktop, #menubar {
    transition: opacity 0.3s ease-in-out; /* Smooth transition for appearance */
}

.hidden-on-boot {
    opacity: 0 !important; /* Force hide with opacity for smooth transition */
    pointer-events: none !important; /* Disable interaction */
}