:root {
    /* Theme */
    --desktop-bg: #008080;
    --window-bg: #c0c0c0;
    --window-border-light: #dfdfdf;
    --window-border-dark: #808080;
    --window-border-darker: #404040;
    --active-titlebar-start: #000080;
    --active-titlebar-end: #0040c0;
    --inactive-titlebar-start: #808080;
    --inactive-titlebar-end: #a0a0a0;
    --taskbar-bg: #c0c0c0;
    --button-bg: #c0c0c0;
    --button-hover: #e0e0e0;
    --button-active: #a0a0a0;
    --text-color-window: #000000;
    --text-color-desk: #ffffff;
    --white: #ffffff;
    --selection-bg: rgba(0, 0, 128, 0.3);
    --selection-border: white;
    --desktop-image: url('/images/SolarSystemV2Pixel.png');
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: inherit;
    
    
}



body {
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 11px;
    overflow: hidden;
    height: 100vh;
    cursor: default;
    color: var(--text-color-window);
}

/* # BACKGROUND AND ICONS # */
#desktop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--desktop-image);
    background-size: cover;
    overflow: hidden;
}

.desktop-icons {
    position: relative;
    top: 10px;
    left: 10px;
    width: 100%;
    height: 100%;
    z-index: 100;
    /* The container spans the full desktop. Without this it blocks every click
       on elements beneath it (action image, bg image). Only .icon children
       should be interactive, so we punch through here and restore below. */
    pointer-events: none;
}

.icon,
.icon * {
    pointer-events: auto;
}

.icon {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70px;
    height: auto;
    cursor: pointer;
    padding: 4px;
    border-radius: 1px;
    transition: background-color 0.1s;
    color: var(--text-color-desk);
}

.icon-image {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-image img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
}

/* ## change position of Icons ## */
/* About me window */
.icon-1 {
  /* 620px */
    top: 57.4074074074%;
    left: 57%;
}

.icon-1 .icon-image {
    width: 48px;
    height: 48px;
}

.icon-1 .icon-image img {
    width: 48px;
    height: 48px;
}

/* chatroom window */
.icon-2 {
    top: 9.25925925926%;
    left: 5.20833333333%;
}

/* Hobbies window */
.icon-3 {
    top: 17.25%;
    left: 31%;
    width: 192px;
}

.icon-3 .icon-image {
    width: 162px;
    height: 162px;
}

.icon-3 .icon-image img {
    width: 192px;
    height: 192px;
}


/* blogging window */
.icon-4 {
    top: 66.5%;
    left: 76.8229166667%;
}

.icon-4 .icon-image {
    width: 48px;
    height: 48px;
}

.icon-4 .icon-image img {
    width: 48px;
    height: 48px;
}


/* Projects window */
.icon-5 {
    top: 60%;
    left: 83.3333333333%;
}

.icon-5 .icon-image {
    width: 48px;
    height: 48px;
}

.icon-5 .icon-image img {
    width: 48px;
    height: 48px;
}


/* Games window */
.icon-6 {
    top: 9.5%;
    left: 22.5%;
    width: 192px;
}

.icon-6 .icon-image {
    width: 162px;
    height: 162px;
}

.icon-6 .icon-image img {
    width: 192px;
    height: 192px;
}

/* Links window */
.icon-7 {
    top: 9.25925925926%;
    left: 13.5416666667%;
}

/* Guestbook window */
.icon-8 {
    top: 16.6666666667%;
    left: 10.4166666667%;
}

.icon:hover {
    background-color: var(--selection-bg);
    outline: 1px dotted var(--selection-border);
}

.icon.selected {
    background-color: var(--selection-bg);
    outline: 1px dotted var(--selection-border);
}


/* ===== WINDOWS ===== */
.window {
    position: absolute;
    background: var(--window-bg);
    border: 2px outset var(--window-bg);
    min-width: 250px;
    min-height: 150px;
    z-index: 1000;
    display: none;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.5);
    resize: both;
    overflow: hidden;
}

/* ===== RESIZE HANDLE ===== */
.window::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    background: var(--window-bg);
    border-left: 1px solid var(--window-border-dark);
    border-top: 1px solid var(--window-border-dark);
    cursor: se-resize;
    background-image: 
        linear-gradient(45deg, transparent 30%, var(--window-border-dark) 30%, var(--window-border-dark) 35%, transparent 35%),
        linear-gradient(45deg, transparent 60%, var(--window-border-dark) 60%, var(--window-border-dark) 65%, transparent 65%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
    z-index: 10;
    color: var(--text-color-window);
}

.window.active {
    z-index: 1001;
}

.window.visible {
    display: block;
}

.window-header {
    background: linear-gradient(45deg, var(--active-titlebar-start) 0%, var(--active-titlebar-end) 100%);
    color: var(--white);
    padding: 2px;
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 18px;
    font-size: 11px;
    font-weight: bold;

}

.window.inactive .window-header {
    background: linear-gradient(90deg, var(--inactive-titlebar-start) 0%, var(--inactive-titlebar-end) 100%);
    color: var(--window-border-light);
}

.window-title {
    font-weight: bold;
    font-size: 11px;
    padding-left: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.window-controls {
    display: flex;
    gap: 0;
    color: var(--text-color-window);
}

.window-button {
    width: 16px;
    height: 14px;
    background: var(--button-bg);
    border: 1px outset var(--button-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: bold;
    text-decoration: none;
    color: var(--text-color-window);
    font-family: 'MS Sans Serif', sans-serif;
}

.window-button:hover {
    background: var(--button-hover);
}

.window-button:active {
    border: 1px inset var(--button-bg);
}

.close-btn:hover {
    background: #ff0000 !important;
    color: var(--text-color-window) !important;
}

.window-content {
    padding: 8px;
    background: var(--window-bg);
    border: 1px inset var(--window-bg);
    margin: 1px;
    height: calc(100% - 24px);
    overflow-y: auto;
    font-size: 11px;
    color: var(--text-color);
}

/* For windows containing iframes — let the iframe handle its own scroll */
.window-content-iframe {
    padding: 0;
    overflow: hidden;
}


/* ===== TASKBAR ===== */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28px;
    background: var(--taskbar-bg);
    border-top: 1px solid var(--window-border-light);
    border-bottom: 1px solid var(--window-border-dark);
    display: flex;
    align-items: center;
    z-index: 9999;
    font-size: 11px;
}

.start-button {
    padding: 2px 8px;
    background: var(--button-bg);
    border: 1px outset var(--button-bg);
    cursor: pointer;
    font-weight: bold;
    margin: 2px;
    height: 22px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-color);
}

.start-button:hover {
    background: var(--button-hover);
}

.start-button.active {
    border: 1px inset var(--button-bg);
    background: var(--button-active);
}

.start-button i {
    font-size: 12px;
    color: var(--text-color);
}

.taskbar-items {
    flex: 1;
    display: flex;
    gap: 2px;
    margin-left: 4px;
}

.taskbar-item {
    padding: 2px 8px;
    background: var(--button-bg);
    border: 1px outset var(--button-bg);
    cursor: pointer;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 22px;
    display: flex;
    align-items: center;
    font-size: 11px;
    color: var(--text-color);
}

.taskbar-item.active {
    border: 1px inset var(--button-bg);
    background: var(--button-active);
}

.taskbar-item:hover {
    background: var(--button-hover);
}

.clock {
    padding: 2px 8px;
    border: 1px inset var(--button-bg);
    margin: 2px;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 11px;
    height: 22px;
    display: flex;
    align-items: center;
    min-width: 60px;
    justify-content: center;
    color: var(--text-color);
}

/* ===== START MENU ===== */
.start-menu {
    position: fixed;
    bottom: 28px;
    left: 0;
    width: 200px;
    background: var(--window-bg);
    border: 2px outset var(--window-bg);
    display: none;
    z-index: 10000;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.5);
}

.start-menu.visible {
    display: block;
}

.start-menu-header {
    background: linear-gradient(90deg, var(--active-titlebar-start) 0%, var(--active-titlebar-end) 100%);
    color: var(--white);
    padding: 4px 8px;
    font-weight: bold;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.start-menu-items {
    padding: 2px 0;
}

.start-menu-item {
    padding: 4px 32px 4px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    position: relative;
    color: var(--text-color);
}

.start-menu-item:hover {
    background: var(--active-titlebar-start);
    color: var(--white);
}

.start-menu-separator {
    height: 1px;
    background: var(--window-border-dark);
    margin: 2px 4px;
    border-top: 1px solid var(--window-border-light);
}

.start-menu-item i {
    width: 16px;
    text-align: center;
    font-size: 14px;
}

/* ===== DIALOG BOXES ===== */
.dialog-button {
    background: var(--button-bg);
    border: 1px outset var(--button-bg);
    padding: 4px 16px;
    cursor: pointer;
    font-size: 11px;
    font-family: 'MS Sans Serif', sans-serif;
    margin: 4px;
    color: var(--text-color);
}

.dialog-button:hover {
    background: var(--button-hover);
}

.dialog-button:active {
    border: 1px inset var(--button-bg);
}

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar {
    width: 16px;
}
 
::-webkit-scrollbar-track {
    background: var(--window-bg);
    border: 1px inset var(--window-bg);
}
 
::-webkit-scrollbar-thumb {
    background: var(--window-bg);
    border: 1px outset var(--window-bg);
}
 
::-webkit-scrollbar-button {
    background: var(--window-bg);
    border: 1px outset var(--window-bg);
    height: 16px;
}
 
::-webkit-scrollbar-button:hover {
    background: var(--button-hover);
}

/* ===== FORM ELEMENTS ===== */
input[type="text"], input[type="email"], textarea {
    border: 1px inset var(--window-bg);
    padding: 2px 4px;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 11px;
    background: var(--white);
    color: var(--text-color);
}

button, input[type="button"], input[type="submit"] {
    background: var(--button-bg);
    border: 1px outset var(--button-bg);
    padding: 4px 12px;
    cursor: pointer;
    font-size: 11px;
    font-family: 'MS Sans Serif', sans-serif;
    color: var(--text-color);
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover {
    background: var(--button-hover);
}

button:active, input[type="button"]:active, input[type="submit"]:active {
    border: 1px inset var(--button-bg);
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet styles (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .desktop-icons {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        top: 8px;
        left: 8px;
    }
 
    .icon {
        width: 60px;
    }
 
    .icon-image {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
 
    .window {
        min-width: 300px;
    }
 
    .start-menu {
        width: 220px;
    }
 
    .taskbar {
        height: 32px;
    }
 
    .start-button {
        height: 26px;
        font-size: 12px;
    }
 
    .taskbar-item {
        height: 26px;
        font-size: 12px;
    }
 
    .clock {
        height: 26px;
        font-size: 12px;
    }
}

/* Mobile styles (up to 768px) */
@media (max-width: 768px) {
    /* Increase base font size for better readability */
    body {
        font-size: 14px;
    }
 
    /* Desktop icons - grid layout for mobile */
    .desktop-icons {
        grid-template-columns: repeat(4, 1fr);
        top: 10px;
        left: 10px;
        right: 10px;
        gap: 15px;
        justify-items: center;
    }
 
    .icon {
        width: 70px;
        padding: 8px;
    }
 
    .icon-image {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
 
    .icon-text {
        font-size: 12px;
        max-width: 70px;
    }
 
    /* Mobile-optimized windows */
    .window {
        min-width: 280px;
        width: 95vw !important;
        height: 85vh !important;
        top: 5vh !important;
        left: 2.5vw !important;
        resize: none; /* Keep disabled on mobile for better UX */
    }
 
    .window.maximized {
        width: 100vw !important;
        height: calc(100vh - 50px) !important;
        top: 0 !important;
        left: 0 !important;
    }
 
    /* Larger window controls for touch */
    .window-header {
        height: 36px;
        padding: 4px;
    }
 
    .window-title {
        font-size: 14px;
        font-weight: bold;
    }
 
    .window-button {
        width: 32px;
        height: 28px;
        font-size: 16px;
        font-weight: bold;
    }
 
    .window-content {
        font-size: 14px;
        padding: 12px;
    }
 
    /* Enhanced taskbar for mobile */
    .taskbar {
        height: 50px;
        padding: 8px;
    }
 
    .start-button {
        height: 36px;
        padding: 4px 12px;
        font-size: 14px;
        margin: 2px;
    }
 
    .start-button i {
        font-size: 16px;
    }
 
    .taskbar-item {
        height: 36px;
        padding: 4px 12px;
        font-size: 12px;
        max-width: 120px;
    }
 
    .clock {
        height: 36px;
        padding: 4px 12px;
        font-size: 14px;
        min-width: 80px;
    }
 
    /* Mobile start menu */
    .start-menu {
        width: 250px;
        bottom: 50px;
    }
 
    .start-menu-header {
        padding: 8px 12px;
        font-size: 14px;
    }
 
    .start-menu-item {
        padding: 12px 16px;
        font-size: 14px;
        min-height: 44px; /* Touch target minimum */
    }
 
    .start-menu-item i {
        font-size: 16px;
        width: 20px;
    }
 
    /* Form elements for touch */
    input[type="text"], 
    input[type="email"], 
    textarea {
        padding: 8px;
        font-size: 14px;
        min-height: 44px;
        border: 2px inset var(--window-bg);
    }
 
    button, 
    input[type="button"], 
    input[type="submit"] {
        padding: 12px 16px;
        font-size: 14px;
        min-height: 44px;
        min-width: 44px;
    }
 
    /* Calculator adjustments for mobile */
    #calculator-window .window-content {
        padding: 8px;
    }
 
    #calc-display {
        font-size: 18px;
        height: 44px;
        margin-bottom: 8px;
    }
 
    #calculator-window button {
        height: 44px;
        font-size: 16px;
        font-weight: bold;
    }
 
    /* Notepad mobile optimization */
    #notepad-text {
        font-size: 14px;
        padding: 8px;
        line-height: 1.4;
    }
 
    /* Themes window mobile layout */
    #themes-window input[type="radio"] {
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }
 
    #themes-window label {
        font-size: 14px;
        line-height: 1.5;
        cursor: pointer;
        display: flex;
        align-items: center;
        min-height: 44px;
    }
 
    /* Remove resize handle on mobile */
    .window::after {
        display: none;
    }
 
    /* Disable text selection on UI elements for better touch */
    .window-header,
    .taskbar,
    .start-menu,
    .icon {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
 
    /* Improve scrolling on mobile */
    .window-content {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
}

/* Small mobile styles (up to 480px) */
@media (max-width: 480px) {
    /* Even more compact layout for small phones */
    .desktop-icons {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        top: 8px;
        left: 8px;
        right: 8px;
    }
 
    .icon {
        width: 80px;
    }
 
    .icon-text {
        font-size: 11px;
        line-height: 1.2;
    }
 
    .window {
        width: 98vw !important;
        height: 90vh !important;
        top: 2vh !important;
        left: 1vw !important;
    }
 
    .start-menu {
        width: 200px;
    }
 
    .taskbar-item {
        max-width: 80px;
        padding: 4px 8px;
    }
 
    /* Hide window titles on very small screens to save space */
    .window-title {
        display: none;
    }
 
    /* Stack calculator buttons more compactly */
    #calculator-window {
        width: 95vw !important;
        height: 400px !important;
    }
 
    /* Make notepad more usable on small screens */
    #notepad-text {
        font-size: 13px;
    }
}
 
/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .desktop-icons {
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
    }
 
    .icon {
        width: 60px;
    }
 
    .icon-image {
        width: 30px;
        height: 30px;
    }
 
    .window {
        height: 80vh !important;
        top: 10vh !important;
    }
 
    .taskbar {
        height: 44px;
    }
 
    .start-button,
    .taskbar-item,
    .clock {
        height: 32px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .icon-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}
 
/* Accessibility improvements for mobile */
@media (max-width: 768px) {
    /* Ensure sufficient color contrast */
    .window-button:focus,
    .start-menu-item:focus,
    .taskbar-item:focus {
        outline: 2px solid var(--active-titlebar-start);
        outline-offset: 2px;
    }
 
    /* Improve touch target sizes for accessibility */
    .icon {
        min-height: 44px;
        min-width: 44px;
    }
 
    /* Better spacing for readability */
    .window-content h3,
    .window-content h4 {
        margin-bottom: 8px;
        line-height: 1.3;
    }
 
    .window-content p {
        margin-bottom: 12px;
        line-height: 1.4;
    }
}
 
/* ===== MOBILE TOUCH DRAG HANDLE ===== */
.touch-drag-hint {
    display: none;
}
 
@media (max-width: 768px) {
    .touch-drag-hint {
        display: block;
        font-size: 9px;
        color: rgba(255,255,255,0.6);
        padding-left: 4px;
        letter-spacing: 1px;
        user-select: none;
    }
 
    /* Mobile window controls - larger tap targets */
    .window-button {
        width: 36px !important;
        height: 32px !important;
        font-size: 14px !important;
        font-weight: bold !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
 
    .window-header {
        height: 40px !important;
        padding: 4px 6px !important;
        touch-action: none; /* required for pointer events on mobile */
    }
 
    .window-title {
        font-size: 13px !important;
    }
 
    /* Windows fill more of screen on mobile */
    .window {
        min-width: 280px;
        width: 92vw !important;
        max-width: 92vw !important;
        height: 80vh !important;
        top: 4vh !important;
        left: 4vw !important;
        resize: none;
    }
 
    .window.maximized {
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100vh - 50px) !important;
        top: 0 !important;
        left: 0 !important;
    }
 
    /* iframe windows: no padding, iframe fills 100% */
    .window-content-iframe {
        height: calc(100% - 48px) !important;
    }
}
 
/* ===== UTILITY CLASSES ===== */
.hidden {
    display: none !important;
}
 
.center {
    text-align: center;
}
 
.bold {
    font-weight: bold;
}
 
/* ===== RETRO EFFECTS ===== */
.crt-effect {
    position: relative;
}
 
.crt-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.03) 2px,
        rgba(0,0,0,0.03) 4px
    );
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════
   PINNED DESKTOP IMAGES
   Both are anchored to the bottom-left of the desktop, sitting above
   the desktop background but below the icon layer (z-index: 100).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Decorative background image (1440×564) ── */
#desktop-pinned-bg-image {
    position: absolute;
    bottom: 28px;          /* sits just above the taskbar */
    left: 0;
    z-index: 50;           /* below icons (z-index 100) and windows (1000+) */
    pointer-events: none;  /* purely decorative — cannot be clicked */
    user-select: none;
    /* Only render if the viewport is wide enough to show it without clipping */
    /* The image itself is 1440px wide; on narrower screens it simply hides */
}

#desktop-pinned-bg-image img {
    display: block;
    width: 1440px;
    max-width: 100vw;      /* don't cause horizontal scroll */
    height: auto;
    image-rendering: pixelated;
    /* Transparent PNG — no background needed */
}

/* Hide the decorative bg image on screens too narrow to benefit from it */
@media (max-width: 900px) {
    #desktop-pinned-bg-image {
        display: none;
    }
}

/* ── Action image (720×361, clickable) ── */
#desktop-action-image-wrap {
    position: absolute;
    bottom: 28px;          /* just above the taskbar */
    left: 0;
    z-index: 60;           /* above bg image (50), below icons (100) */
    user-select: none;
    /* Size the wrapper to exactly match the image so every pixel
       within the bounding box is a click target — including transparent
       PNG pixels that would otherwise pass clicks through to the desktop. */
    width: 720px;
    max-width: 60vw;
    cursor: pointer;
    display: block;
}

#desktop-action-image {
    display: block;
    width: 100%;           /* fills wrapper width */
    height: auto;
    image-rendering: pixelated;
    /* Smooth swap transition */
    transition: opacity 0.15s ease;
    /* Disable native pointer-events on the img itself so the wrapper
       div is the sole click target — avoids double-firing on some browsers */
    pointer-events: none;
}

/* Subtle hover glow on the wrapper so users know it's clickable */
#desktop-action-image-wrap:hover #desktop-action-image {
    filter: brightness(1.1) drop-shadow(0 0 6px rgba(255,255,255,0.4));
}

/* Hide action image on very small screens where there's no room */
@media (max-width: 600px) {
    #desktop-action-image-wrap {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   DIALOGUE WINDOW OVERRIDES
   The dialogue window should not have a resize handle and its content
   area should auto-size to the text rather than filling remaining height.
   ═══════════════════════════════════════════════════════════════════ */

#dialogue-window {
    resize: none;          /* no resize handle */
    min-height: unset;     /* allow it to be compact */
    overflow: visible;
}

/* Remove the pseudo-element resize grip */
#dialogue-window::after {
    display: none;
}

#dialogue-window .window-content {
    height: auto;          /* shrink-wrap to content */
    min-height: 40px;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px 12px;
    line-height: 1.5;
    font-size: 11px;
}

#dialogue-text {
    margin: 0;
    word-break: break-word;
}

/* On mobile the dialogue window obeys the normal mobile window rules,
   but we still want no resize handle */
@media (max-width: 768px) {
    #dialogue-window {
        width: 85vw !important;
        height: auto !important;
        min-height: unset !important;
    }

    #dialogue-window .window-content {
        height: auto !important;
    }
}