/* --- Global 90s Theme Setup --- */
body {
    background-color: #01040b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Crect width='1600' height='900' fill='%2301040b'/%3E%3Crect width='1600' height='900' fill='url(%23g1)'/%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23050b1b'/%3E%3Cstop offset='55%25' stop-color='%231a1743'/%3E%3Cstop offset='100%25' stop-color='%23040414'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M280 140 C460 80 690 70 860 190 C1000 290 1070 430 1030 560 C990 690 850 770 700 780 C520 790 360 700 280 560 C220 450 210 260 280 140Z' fill='none' stroke='%23b6c7ff' stroke-width='3' stroke-linecap='round' stroke-opacity='0.75'/%3E%3Cpath d='M330 180 C470 120 630 135 775 220 C875 280 940 360 930 460 C920 560 840 650 740 690 C620 740 480 720 380 650 C280 580 240 460 260 340 C275 270 290 220 330 180Z' fill='none' stroke='%2397dcff' stroke-width='2' stroke-linecap='round' stroke-opacity='0.55'/%3E%3Cpath d='M400 200 C580 160 760 190 905 295 C1025 380 1060 500 980 610 C900 720 770 770 620 760 C420 744 290 660 240 540 C190 420 230 280 320 220' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round' stroke-opacity='0.35'/%3E%3Ctext x='90' y='110' fill='%23ffffff' font-family='monospace' font-size='10' opacity='0.85'>. . . . . . . . . . . . . . . . .</text%3E%3Ctext x='160' y='150' fill='%23d0d8ff' font-family='monospace' font-size='10' opacity='0.8'>o . o . o . o . o . o . o .</text%3E%3Ctext x='1150' y='140' fill='%23ffffff' font-family='monospace' font-size='10' opacity='0.8'>. . . . . . . . . . . . . .</text%3E%3Ctext x='1240' y='190' fill='%23a8dfff' font-family='monospace' font-size='10' opacity='0.7'>* * * * * * * * * * * * * *</text%3E%3Ctext x='980' y='360' fill='%23cfe2ff' font-family='monospace' font-size='10' opacity='0.6'>. : : . : . : . : . : . :</text%3E%3Ctext x='240' y='520' fill='%23ffffff' font-family='monospace' font-size='10' opacity='0.8'>. o O o . o O o . o O o .</text%3E%3Ctext x='840' y='620' fill='%23d7f0ff' font-family='monospace' font-size='10' opacity='0.7'>: : : . : : : . : : : . : :</text%3E%3Ctext x='260' y='730' fill='%23bcdcff' font-family='monospace' font-size='10' opacity='0.8'>. . . . . . . . . . . .</text%3E%3Ctext x='1180' y='760' fill='%23cddcff' font-family='monospace' font-size='10' opacity='0.75'>o . o . o . o . o . o .</text%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: "MS Sans Serif", Arial, sans-serif;
    font-size: 14px;
    color: #f4f7ff;
    margin: 0;
    padding: 20px 20px 70px;
    min-height: 100vh;
    overflow: hidden;
}

.desktop {
    margin: 0;
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- The Window Container --- */
.window {
    background-color: #c0c0c0; /* Standard light gray chassis */
    box-shadow: inset 1px 1px 0px #fff, 
                inset -1px -1px 0px #0a0a0a, 
                inset 2px 2px 0px #dfdfdf, 
                inset -2px -2px 0px #808080, 
                2px 2px 10px rgba(0, 0, 0, 0.3);
    padding: 3px;
    position: absolute;
    cursor: default;
    user-select: none;
    min-width: 320px;
    min-height: 420px;
}

.title-bar {
    cursor: move;
}

.desktop-icon {
    position: absolute;
    width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    color: #fff;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    z-index: 100;
    transition: transform 0.12s ease, outline 0.12s ease;
}

.desktop-icon:hover,
.desktop-icon.active {
    outline: 2px dotted #ffffff;
    outline-offset: 2px;
    transform: translateY(-1px);
}

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

#picturesIcon img {
    image-rendering: auto;
}

.desktop-icon span {
    text-shadow: 1px 1px 0 #000;
}

.resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 0%, transparent 50%, #808080 50%, #808080 100%);
}

.window-trail {
    position: absolute;
    pointer-events: none;
    opacity: 1;
    transform: scale(0.98);
    z-index: 1;
}

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

.child-window .window-body {
    margin: 0;
    padding: 8px;
    height: calc(100% - 32px);
    box-sizing: border-box;
}

.child-window .project-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
    display: block;
}

.project-detail-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    min-height: 0;
}

.project-detail-card h3 {
    margin: 0;
    font-size: 16px;
}

.project-detail-card p {
    margin: 0;
    color: #000;
}

.asset-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(180px, 1fr);
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.golf-option-list {
    flex-shrink: 0;
}

.asset-card {
    background-color: #dfdfdf;
    border: 1px solid #fff;
    box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #ffffff;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.asset-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 1px solid #808080;
}

.window-trail .title-bar,
.window-trail .window-body,
.window-trail .menu-bar,
.window-trail .title-bar-controls {
    opacity: 1;
}

/* --- Title Bar --- */
.title-bar {
    background: linear-gradient(90deg, #000080, #1084d0); /* Classic Dark Blue Gradient */
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 4px 3px 6px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.title-bar-text {
    font-size: 12px;
}

/* --- Window Title Controls --- */
.title-bar-controls button {
    background-color: #c0c0c0;
    border: 1px solid #fff;
    box-shadow: inset -1px -1px 0px #0a0a0a, inset 1px 1px 0px #dfdfdf;
    font-size: 10px;
    font-weight: bold;
    width: 16px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 2px;
    cursor: pointer;
}

.title-bar-controls button:active {
    box-shadow: inset 1px 1px 0px #0a0a0a, inset -1px -1px 0px #dfdfdf;
    padding-top: 1px;
    padding-left: 1px;
}

/* --- Menu Bar Component --- */
.menu-bar {
    display: flex;
    gap: 12px;
    padding: 4px 6px;
    border-bottom: 1px solid #808080;
}

.menu-item {
    position: relative;
}

.menu-button,
.menu-dropdown-item {
    background: transparent;
    border: none;
    color: #000;
    cursor: pointer;
    font: inherit;
    padding: 2px 4px;
}

.menu-button:hover,
.menu-item.active .menu-button,
.menu-dropdown-item:hover {
    background-color: #000080;
    color: #fff;
}

.menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    background: #c0c0c0;
    border: 1px solid #fff;
    box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
    min-width: 90px;
    z-index: 5;
}

.menu-item:hover .menu-dropdown,
.menu-item:focus-within .menu-dropdown,
.menu-item.active .menu-dropdown {
    display: block;
}

.menu-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
}

/* --- Main Window Body --- */
.window-body {
    margin: 12px;
    color: #000000;
}

.window-body h2 {
    font-size: 18px;
    margin-bottom: 8px;
}

.project-page {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.project-card {
    background-color: #dfdfdf;
    border: 1px solid #fff;
    box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #ffffff;
    padding: 8px;
    text-align: center;
}

.project-image-slot {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #f4f4f4, #bdbdbd);
    border: 1px solid #808080;
    margin-bottom: 6px;
}

.project-card p {
    margin: 0;
    color: #000;
    font-size: 12px;
}

.home-link {
    display: inline-block;
    margin-top: 12px;
    align-self: flex-start;
    color: #000;
    text-decoration: none;
    background-color: #c0c0c0;
    border: 1px solid #fff;
    box-shadow: inset -1px -1px 0 #0a0a0a, inset 1px 1px 0 #dfdfdf;
    padding: 4px 12px;
}

.home-link:hover {
    background-color: #d8d8d8;
}

.resume-page {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.resume-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.resume-frame {
    border: 2px solid #fff;
    box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
    background-color: #ffffff;
    padding: 4px;
}

.resume-embed {
    width: 100%;
    height: 520px;
    border: 1px solid #808080;
    background-color: #fff;
}

/* --- Fieldsets & Inset Groupings --- */
fieldset {
    border: 2px solid #fff;
    box-shadow: inset -1px -1px 0px #808080, 1px 1px 0px #808080;
    padding: 10px;
    margin: 16px 0;
}

legend {
    background-color: #c0c0c0;
    padding: 0 4px;
}

.simple-options {
    margin-top: 16px;
}

.simple-options h3 {
    margin: 0 0 8px;
    font-size: 15px;
}

.option-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.simple-option {
    width: 100%;
    text-align: left;
}

.field-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

/* --- Traditional OS Buttons --- */
.win95-btn {
    background-color: #c0c0c0;
    border: 1px solid #fff;
    box-shadow: inset -1px -1px 0px #0a0a0a, 
                inset 1px 1px 0px #dfdfdf, 
                inset -2px -2px 0px #808080, 
                inset 2px 2px 0px #fff;
    padding: 4px 18px;
    font-size: 13px;
    cursor: pointer;
    outline: none;
}

.win95-btn.default {
    border: 1px solid #0a0a0a;
}

.win95-btn:active {
    box-shadow: inset 1px 1px 0px #0a0a0a, 
                inset -1px -1px 0px #fff, 
                inset 2px 2px 0px #808080, 
                inset -2px -2px 0px #dfdfdf;
    padding-top: 5px;
    padding-left: 19px;
}

.action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.taskbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38px;
    display: flex;
    align-items: center;
    padding: 3px 4px;
    background: linear-gradient(180deg, #f0f0f0 0%, #c0c0c0 100%);
    border-top: 1px solid #ffffff;
    box-shadow: inset 0 1px 0 #ffffff;
    z-index: 2000;
}

.start-button {
    background: linear-gradient(180deg, #20c020 0%, #108410 100%);
    color: white;
    border: 1px solid #0a0a0a;
    box-shadow: inset 1px 1px 0 #a8f0a8, inset -1px -1px 0 #004000;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.start-button:active {
    box-shadow: inset 1px 1px 0 #004000, inset -1px -1px 0 #a8f0a8;
    padding-top: 5px;
}

.taskbar-app-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: #c0c0c0;
    border: 1px solid #fff;
    box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
    color: #000;
    cursor: pointer;
    font-size: 12px;
    margin-left: 4px;
}

.taskbar-app-button.active {
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf;
    background: #d4d0c8;
}

.taskbar-app-button img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.taskbar-spacer {
    flex: 1;
}

.taskbar-clock {
    background-color: #c0c0c0;
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #0a0a0a;
    padding: 4px 8px;
    font-size: 12px;
    color: #000;
    min-width: 56px;
    text-align: center;
}

.start-menu {
    position: fixed;
    left: 4px;
    bottom: 42px;
    width: 190px;
    background: #c0c0c0;
    border: 1px solid #ffffff;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #0a0a0a, 2px 2px 8px rgba(0, 0, 0, 0.35);
    display: none;
    z-index: 2100;
}

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

.start-menu-header {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: #ffffff;
    padding: 6px 8px;
    font-weight: bold;
    font-size: 12px;
}

.start-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: #000;
    font: inherit;
    padding: 8px 12px;
    cursor: pointer;
}

.start-menu-item:hover {
    background-color: #000080;
    color: #ffffff;
}

/* --- Windows XP Luna Blue Theme Overrides --- */
:root {
    --xp-blue-1: #245edb;
    --xp-blue-2: #1f7bf1;
    --xp-blue-3: #0b4ccf;
    --xp-sky-1: #7dc8ff;
    --xp-sky-2: #e8f4ff;
    --xp-panel: #ece9d8;
    --xp-panel-soft: #f4f2e8;
    --xp-shadow: #6f6a5d;
    --xp-light: #ffffff;
    --xp-text: #0a1a37;
    --xp-green-1: #4caf39;
    --xp-green-2: #2f8b2c;
    --xp-orange: #f68b2c;
}

body {
    background-color: #5fb2ff;
    background-image: url("assets/bluetrooper.jpg");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    color: var(--xp-text);
    font-family: Tahoma, "MS Sans Serif", Arial, sans-serif;
}

.window {
    background: var(--xp-panel);
    border: 1px solid #0841a6;
    border-radius: 7px 7px 4px 4px;
    padding: 0;
    box-shadow: 0 9px 26px rgba(9, 25, 52, 0.38), inset 1px 1px 0 #fff8d8;
}

.title-bar {
    background: linear-gradient(180deg, #2f7ff2 0%, #1f65e9 45%, #174fc9 100%);
    padding: 6px 7px 5px 9px;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid #07308a;
}

.title-bar-text {
    font-size: 12px;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.title-bar-controls button {
    width: 21px;
    height: 19px;
    border: 1px solid #083d9e;
    border-radius: 3px;
    background: linear-gradient(180deg, #fdfefe 0%, #d9ecff 60%, #b8daff 100%);
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #91bde9;
    color: #0e3b8d;
}

.title-bar-controls button:active {
    box-shadow: inset 1px 1px 0 #7ea9d6, inset -1px -1px 0 #ffffff;
    padding-top: 0;
    padding-left: 0;
}

.menu-bar {
    gap: 8px;
    padding: 5px 8px;
    background: linear-gradient(180deg, #f8f6ed 0%, #e9e4d4 100%);
    border-top: 1px solid #fffef8;
    border-bottom: 1px solid #b4b0a7;
}

.menu-button,
.menu-dropdown-item {
    border-radius: 2px;
    padding: 2px 6px;
}

.menu-button:hover,
.menu-item.active .menu-button,
.menu-dropdown-item:hover {
    background: linear-gradient(180deg, #397de8 0%, #235cca 100%);
}

.menu-dropdown {
    background: #fcfbf5;
    border: 1px solid #7d8ea8;
    box-shadow: 2px 2px 0 rgba(13, 31, 67, 0.25);
}

.window-body {
    margin: 10px;
    padding: 10px;
    background: linear-gradient(180deg, #faf8f1 0%, #ece8dc 100%);
    border: 1px solid #b5b0a5;
    box-shadow: inset 1px 1px 0 #fffdf7, inset -1px -1px 0 #cbc5b7;
}

.window-body h2 {
    color: #14305e;
    margin-top: 0;
}

.window-body p {
    color: #293f69;
}

.simple-options {
    margin-top: 14px;
    padding: 10px;
    background: var(--xp-panel-soft);
    border: 1px solid #fffef8;
    box-shadow: inset -1px -1px 0 #aaa491, inset 1px 1px 0 #ffffff;
}

.simple-options h3 {
    color: #163464;
}

.win95-btn {
    color: #0f2f5e;
    background: linear-gradient(180deg, #fdfefe 0%, #eaf5ff 45%, #d3e8ff 100%);
    border: 1px solid #7f9db9;
    border-radius: 3px;
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #b5cde9;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
}

.win95-btn.default {
    border-color: #2e69d4;
    box-shadow: 0 0 0 1px #9cc0ff, inset 1px 1px 0 #ffffff, inset -1px -1px 0 #aac9ec;
}

.win95-btn:hover {
    background: linear-gradient(180deg, #ffffff 0%, #f2f9ff 38%, #dbeeff 100%);
}

.win95-btn:active {
    box-shadow: inset 1px 1px 0 #9eb5d0, inset -1px -1px 0 #ffffff;
    padding-top: 6px;
    padding-left: 14px;
}

.taskbar {
    height: 40px;
    padding: 3px 5px;
    background: linear-gradient(180deg, #3a93f3 0%, #2f79e5 35%, #2963d6 70%, #2355c0 100%);
    border-top: 1px solid #94c2ff;
    box-shadow: inset 0 1px 0 #8ec1ff;
}

.start-button {
    border: 1px solid #0e4c16;
    border-radius: 4px 10px 10px 4px;
    background: linear-gradient(180deg, #66cc4f 0%, var(--xp-green-1) 45%, var(--xp-green-2) 100%);
    box-shadow: inset 1px 1px 0 #a8ee9a, inset -1px -1px 0 #1f5f1d;
    padding: 5px 13px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.start-button:active {
    box-shadow: inset 1px 1px 0 #1f5f1d, inset -1px -1px 0 #a8ee9a;
    padding-top: 5px;
}

.taskbar-app-button {
    border: 1px solid #2f5eb8;
    border-radius: 3px;
    color: #fff;
    background: linear-gradient(180deg, #7ab8fb 0%, #4e92e9 45%, #3f7fdb 100%);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.62), inset -1px -1px 0 rgba(24, 61, 127, 0.62);
}

.taskbar-app-button.active {
    background: linear-gradient(180deg, #a7d3ff 0%, #69a8ef 50%, #4d87da 100%);
    box-shadow: inset 1px 1px 0 rgba(34, 75, 142, 0.62), inset -1px -1px 0 rgba(255, 255, 255, 0.55);
}

.taskbar-clock {
    background: linear-gradient(180deg, #d8ebff 0%, #c3defc 100%);
    border: 1px solid #4a78b5;
    border-radius: 3px;
    box-shadow: inset 1px 1px 0 #f6fbff, inset -1px -1px 0 #8ab0de;
    color: #12366d;
}

.start-menu {
    width: 220px;
    border: 1px solid #2a5eb2;
    background: #f9f8f2;
    box-shadow: 0 5px 12px rgba(8, 28, 66, 0.35);
    overflow: hidden;
}

.start-menu::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(180deg, var(--xp-orange) 0%, #d06a1f 100%);
}

.start-menu-header {
    margin-left: 28px;
    background: linear-gradient(180deg, var(--xp-blue-2) 0%, var(--xp-blue-3) 100%);
    padding: 8px 10px;
}

.start-menu-item {
    margin-left: 28px;
    padding: 8px 12px;
    color: #0f2f60;
}

.start-menu-item:hover {
    background: linear-gradient(180deg, #4a8fed 0%, #2f68d6 100%);
}

.desktop-icon:hover,
.desktop-icon.active {
    background: rgba(36, 94, 219, 0.25);
    outline: 1px dotted #e9f5ff;
    outline-offset: 1px;
}