/* ============================================================
   START MENU
   Main menu + cascading submenus + Windows 95 sidebar
   ============================================================ */

#start-menu {
    position: fixed;
    bottom: var(--taskbar-height);
    left: 2px;
    background: var(--win95-bg);
    box-shadow:
        inset -1px -1px var(--win95-black),
        inset 1px 1px var(--win95-white),
        inset -2px -2px var(--win95-gray),
        inset 2px 2px var(--win95-light);
    min-width: 180px;
    z-index: 6000;
    display: flex;
    font-family: var(--win95-font);
    font-size: var(--win95-font-size);
    padding: 3px;
}

/* ---- Windows 95 sidebar (left dark strip) ---- */

.start-menu-sidebar {
    width: 21px;
    background: linear-gradient(to top, #000080, #1084d0);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 4px 0;
    flex-shrink: 0;
}

.start-menu-sidebar-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #c0c0c0;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 2px;
    white-space: nowrap;
}

.start-menu-sidebar-text b {
    color: #ffffff;
}

/* ---- Menu items area ---- */

.start-menu-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 2px 0;
}

.start-menu-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 20px 3px 4px;
    cursor: default;
    white-space: nowrap;
    position: relative;
    min-height: 28px;
}

.start-menu-item:hover:not(.disabled) {
    background: var(--win95-navy);
    color: var(--win95-white);
}

.start-menu-item.disabled {
    color: var(--win95-gray);
}

.start-menu-item-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.start-menu-item-icon img {
    display: block;
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.start-menu-item-label {
    flex: 1;
}

.start-menu-item-arrow {
    margin-left: auto;
    font-size: 8px;
    padding-left: 12px;
}

.start-menu-separator {
    height: 2px;
    margin: 3px 4px;
    box-shadow:
        inset 0 1px var(--win95-gray),
        inset 0 -1px var(--win95-white);
}

/* ---- Submenu ---- */

.start-submenu {
    position: absolute;
    background: var(--win95-bg);
    box-shadow:
        inset -1px -1px var(--win95-black),
        inset 1px 1px var(--win95-white),
        inset -2px -2px var(--win95-gray),
        inset 2px 2px var(--win95-light);
    min-width: 160px;
    padding: 3px;
    z-index: 6001;
    display: flex;
    flex-direction: column;
}

.start-submenu .start-menu-item {
    min-height: 22px;
    padding: 3px 20px 3px 4px;
}

.start-submenu .start-menu-item-icon {
    width: 16px;
    height: 16px;
    overflow: hidden;
}

.start-submenu .start-menu-item-icon img {
    width: 16px;
    height: 16px;
}

/* ============================================================
   START MENU ICONS — CSS-drawn mini icons
   Used as fallback when .png icons aren't available
   ============================================================ */

/* Programs — open folder */
.smicon-programs {
    position: relative;
}
.smicon-programs::before {
    content: '';
    width: 10px; height: 3px;
    background: #e8c34e;
    border: 1px solid #b8942e;
    border-bottom: none;
    border-radius: 2px 2px 0 0;
    position: absolute;
    top: 6px; left: 3px;
}
.smicon-programs::after {
    content: '';
    width: 24px; height: 14px;
    background: linear-gradient(to bottom, #f0d060, #e8c34e);
    border: 1px solid #b8942e;
    border-radius: 0 2px 2px 2px;
    position: absolute;
    top: 10px; left: 3px;
}

/* Documents — white page with blue lines */
.smicon-documents {
    position: relative;
}
.smicon-documents::before {
    content: '';
    width: 20px; height: 24px;
    background:
        repeating-linear-gradient(transparent 0px, transparent 3px, #87ceeb 3px, #87ceeb 4px),
        #ffffff;
    border: 1px solid #808080;
    position: absolute;
    top: 3px; left: 5px;
}
.smicon-documents::after {
    content: '';
    width: 0; height: 0;
    border-style: solid;
    border-width: 6px 6px 0 0;
    border-color: #c0c0c0 #808080 transparent transparent;
    position: absolute;
    top: 3px; right: 5px;
}

/* Settings — gear/control panel */
.smicon-settings {
    position: relative;
}
.smicon-settings::before {
    content: '';
    width: 18px; height: 18px;
    background:
        radial-gradient(circle at 50% 50%, #808080 4px, transparent 4px),
        radial-gradient(circle at 50% 50%, #c0c0c0 7px, transparent 7px);
    position: absolute;
    top: 6px; left: 6px;
    border-radius: 2px;
    box-shadow:
        -1px -7px 0 0px #c0c0c0,
        1px 7px 0 0px #c0c0c0,
        -7px -1px 0 0px #c0c0c0,
        7px 1px 0 0px #c0c0c0;
}

/* Find — magnifying glass */
.smicon-find {
    position: relative;
}
.smicon-find::before {
    content: '';
    width: 14px; height: 14px;
    border: 3px solid #808080;
    border-radius: 50%;
    position: absolute;
    top: 3px; left: 3px;
    background: #e8f0ff;
}
.smicon-find::after {
    content: '';
    width: 3px; height: 10px;
    background: #808080;
    position: absolute;
    bottom: 2px; right: 5px;
    transform: rotate(-45deg);
    border-radius: 1px;
}

/* Help — question mark in yellow circle */
.smicon-help {
    position: relative;
}
.smicon-help::before {
    content: '';
    width: 24px; height: 24px;
    background: #ffff00;
    border-radius: 50%;
    border: 1px solid #808080;
    position: absolute;
    top: 3px; left: 3px;
}
.smicon-help::after {
    content: '?';
    font-family: "Times New Roman", serif;
    font-size: 20px;
    font-weight: bold;
    color: #000080;
    position: absolute;
    top: 3px; left: 9px;
    line-height: 26px;
}

/* Run — small window with arrow */
.smicon-run {
    position: relative;
}
.smicon-run::before {
    content: '';
    width: 22px; height: 16px;
    background:
        linear-gradient(to bottom, #000080 4px, #c0c0c0 4px);
    border: 1px solid #808080;
    position: absolute;
    top: 8px; left: 2px;
}
.smicon-run::after {
    content: '';
    width: 0; height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #000080;
    position: absolute;
    top: 3px; right: 3px;
}

/* Shutdown — power button */
.smicon-shutdown {
    position: relative;
}
.smicon-shutdown::before {
    content: '';
    width: 20px; height: 20px;
    border: 3px solid #808080;
    border-radius: 50%;
    border-top-color: #ff0000;
    position: absolute;
    top: 5px; left: 5px;
    background: transparent;
}
.smicon-shutdown::after {
    content: '';
    width: 3px; height: 12px;
    background: #ff0000;
    position: absolute;
    top: 3px; left: 14px;
    border-radius: 1px;
}

/* Notepad — small yellow page */
.smicon-notepad {
    position: relative;
}
.smicon-notepad::before {
    content: '';
    width: 14px; height: 16px;
    background:
        linear-gradient(to right, transparent 3px, #cc3333 3px, #cc3333 4px, transparent 4px),
        repeating-linear-gradient(transparent 0px, transparent 2px, #87ceeb 2px, #87ceeb 3px),
        #ffffcc;
    border: 1px solid #808080;
    position: absolute;
    top: 3px; left: 4px;
}

/* Calculator — small calc */
.smicon-calc {
    position: relative;
}
.smicon-calc::before {
    content: '';
    width: 12px; height: 16px;
    background:
        linear-gradient(to bottom, #90ee90 0px, #90ee90 4px, transparent 4px) no-repeat 2px 2px / 8px 4px,
        #808080;
    border: 1px solid #404040;
    border-radius: 1px;
    position: absolute;
    top: 3px; left: 5px;
}

/* Paint — small palette */
.smicon-paint {
    position: relative;
}
.smicon-paint::before {
    content: '';
    width: 16px; height: 14px;
    background:
        radial-gradient(circle at 4px 4px, #ff0000 2px, transparent 2px),
        radial-gradient(circle at 11px 3px, #0000ff 2px, transparent 2px),
        radial-gradient(circle at 4px 10px, #ffff00 2px, transparent 2px),
        radial-gradient(circle at 11px 10px, #00aa00 2px, transparent 2px),
        radial-gradient(ellipse at 50% 50%, #f0e8d0 55%, transparent 56%);
    border-radius: 50%;
    position: absolute;
    top: 5px; left: 3px;
}

/* Explorer — small folder */
.smicon-explorer {
    position: relative;
}
.smicon-explorer::before {
    content: '';
    width: 6px; height: 2px;
    background: #e8c34e;
    border: 1px solid #b8942e;
    border-bottom: none;
    border-radius: 1px 1px 0 0;
    position: absolute;
    top: 5px; left: 3px;
}
.smicon-explorer::after {
    content: '';
    width: 16px; height: 10px;
    background: linear-gradient(to bottom, #f0d060, #e8c34e);
    border: 1px solid #b8942e;
    border-radius: 0 1px 1px 1px;
    position: absolute;
    top: 8px; left: 3px;
}

/* Minesweeper — small mine */
.smicon-minesweeper {
    position: relative;
}
.smicon-minesweeper::before {
    content: '';
    width: 8px; height: 8px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    top: 7px; left: 7px;
    box-shadow:
        0 -4px 0 0 #000,
        0 4px 0 0 #000,
        -4px 0 0 0 #000,
        4px 0 0 0 #000;
}

/* IE — blue "e" */
.smicon-ie {
    position: relative;
}
.smicon-ie::before {
    content: 'e';
    font-family: "Times New Roman", serif;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    color: #0078d4;
    position: absolute;
    top: 2px; left: 5px;
    line-height: 20px;
}

/* Pomodoro — small tomato */
.smicon-pomodoro {
    position: relative;
}
.smicon-pomodoro::before {
    content: '';
    width: 12px; height: 11px;
    background: radial-gradient(ellipse at 40% 35%, #ff4444, #cc0000);
    border-radius: 50%;
    position: absolute;
    top: 7px; left: 5px;
}
.smicon-pomodoro::after {
    content: '';
    width: 2px; height: 4px;
    background: #228b22;
    border-radius: 1px;
    position: absolute;
    top: 4px; left: 10px;
}

/* Games — game controller */
.smicon-games {
    position: relative;
}
.smicon-games::before {
    content: '';
    width: 16px; height: 10px;
    background:
        radial-gradient(circle at 4px 5px, #000 1px, transparent 1px),
        radial-gradient(circle at 12px 5px, #000 1px, transparent 1px),
        radial-gradient(circle at 13px 4px, #000 1px, transparent 1px),
        radial-gradient(circle at 11px 4px, #000 1px, transparent 1px),
        radial-gradient(circle at 12px 3px, #000 1px, transparent 1px),
        #808080;
    border-radius: 6px;
    border: 1px solid #404040;
    position: absolute;
    top: 6px; left: 3px;
}

/* Accessories — wrench */
.smicon-accessories {
    position: relative;
}
.smicon-accessories::before {
    content: '';
    width: 14px; height: 3px;
    background: #808080;
    position: absolute;
    top: 10px; left: 3px;
    transform: rotate(-45deg);
    border-radius: 1px;
    box-shadow: inset 0 0 0 1px #606060;
}
.smicon-accessories::after {
    content: '';
    width: 6px; height: 6px;
    border: 2px solid #808080;
    border-radius: 50%;
    border-right-color: transparent;
    border-bottom-color: transparent;
    position: absolute;
    top: 4px; left: 1px;
    transform: rotate(-45deg);
}

/* Screensaver — small monitor */
.smicon-screensaver {
    position: relative;
}
.smicon-screensaver::before {
    content: '';
    width: 14px; height: 10px;
    background:
        linear-gradient(to bottom, #000080, #1084d0);
    border: 1px solid #808080;
    position: absolute;
    top: 3px; left: 4px;
}
.smicon-screensaver::after {
    content: '';
    width: 8px; height: 3px;
    background: #c0c0c0;
    border: 1px solid #808080;
    position: absolute;
    top: 14px; left: 7px;
}

/* DOS — small black terminal */
.smicon-dos {
    position: relative;
}
.smicon-dos::before {
    content: '';
    width: 16px; height: 12px;
    background:
        linear-gradient(to bottom, #000080 2px, #000 2px);
    border: 1px solid #808080;
    position: absolute;
    top: 5px; left: 3px;
}
.smicon-dos::after {
    content: '>';
    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: bold;
    color: #c0c0c0;
    position: absolute;
    top: 9px; left: 5px;
    line-height: 1;
}

/* Media Player — small player */
.smicon-media {
    position: relative;
}
.smicon-media::before {
    content: '';
    width: 16px; height: 12px;
    background:
        linear-gradient(to bottom, #000080 2px, #c0c0c0 2px);
    border: 1px solid #808080;
    position: absolute;
    top: 5px; left: 3px;
}
.smicon-media::after {
    content: '';
    width: 0; height: 0;
    border-style: solid;
    border-width: 3px 0 3px 5px;
    border-color: transparent transparent transparent #000000;
    position: absolute;
    top: 10px; left: 8px;
}

/* Virtual Pet — small egg */
.smicon-pet {
    position: relative;
}
.smicon-pet::before {
    content: '';
    width: 12px; height: 14px;
    background:
        radial-gradient(circle at 6px 5px, #c8e8c8 3px, transparent 3px),
        radial-gradient(ellipse at 50% 55%, #e0b0d0, #c890b0);
    border-radius: 40% 40% 50% 50%;
    position: absolute;
    top: 4px; left: 5px;
}

/* WordArt — rainbow "A" */
.smicon-wordart {
    position: relative;
}
.smicon-wordart::before {
    content: 'A';
    font-size: 14px;
    font-weight: 900;
    font-style: italic;
    font-family: "Arial Black", "Impact", sans-serif;
    background: linear-gradient(135deg, #ff0000, #ff8800, #ffff00, #00cc00, #0088ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: absolute;
    top: 3px; left: 6px;
    line-height: 20px;
}