/* ==========================================================================
   Elsewhere — Windows 98 Desktop UI
   ========================================================================== */

/* Collapse Webamp's injected clip-path div */
body > div:not([class]):not([id]):has(> svg[height="0"]) {
    display: none;
}

/* --- Layout Override --- */
main:has(.desktop) {
    max-inline-size: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    scroll-snap-stop: always;
    scroll-snap-align: start;
}

/* --- Desktop Container --- */
.desktop {
    position: relative;
    flex-grow: 1;
    inline-size: 100%;
    min-block-size: 100dvh;
    overflow: hidden;
}

/* --- Matrix Canvas --- */
#matrix-canvas {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
    #matrix-canvas {
        display: none;
    }
}

/* --- Desktop Icons --- */
.desktop-icons {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, 5.5rem);
    gap: 0.5rem;
    padding: 1.5rem;
    justify-content: start;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem;
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: 'Courier New', 'Lucida Console', monospace;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.desktop-icon:hover {
    border-color: var(--cyan-dim);
    background-color: rgba(0, 229, 255, 0.05);
}

.desktop-icon:focus-visible {
    outline: 1px solid var(--cyan);
    outline-offset: -1px;
}

.desktop-icon .icon-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 1px solid var(--silver-dim);
    background-color: var(--bg-secondary);
    font-size: 1.25rem;
    color: var(--silver);
}

/* --- Win98 Windows --- */
.windows-container {
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

.win98-window {
    position: absolute;
    display: none;
    flex-direction: column;
    min-inline-size: 20rem;
    min-block-size: 12rem;
    max-inline-size: calc(100vw - 2rem);
    max-block-size: calc(100dvh - 6rem);
    pointer-events: auto;

    /* Win98 3D bevel — dark theme */
    border: 2px solid;
    border-color: var(--silver-dim) var(--bg-void) var(--bg-void) var(--silver-dim);
    box-shadow:
        inset 1px 1px 0 rgba(192, 192, 208, 0.15),
        inset -1px -1px 0 rgba(0, 0, 0, 0.4),
        2px 2px 8px rgba(0, 0, 0, 0.5);
    background-color: var(--bg-primary);
}

.win98-window[hidden] {
    display: none !important;
}

.win98-window.visible {
    display: flex;
}

.win98-window.active .win98-titlebar {
    background: linear-gradient(90deg, #1a1a4a, #2a2a6a);
}

/* --- Title Bar --- */
.win98-titlebar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.3rem;
    background: linear-gradient(90deg, #1a1a2e, #22223a);
    user-select: none;
    cursor: grab;
    flex-shrink: 0;
}

.win98-titlebar:active {
    cursor: grabbing;
}

.win98-title-icon {
    font-size: 0.75rem;
    line-height: 1;
    flex-shrink: 0;
}

.win98-title-text {
    font-family: 'Courier New', 'Lucida Console', monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

.win98-window.active .win98-title-text {
    color: var(--text-primary);
}

.win98-title-buttons {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.win98-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 1rem;
    block-size: 1rem;
    background-color: var(--bg-secondary);
    border: 1px solid;
    border-color: var(--silver-dim) var(--bg-void) var(--bg-void) var(--silver-dim);
    font-family: 'Courier New', monospace;
    font-size: 0.625rem;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
}

.win98-btn:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.win98-btn:active {
    border-color: var(--bg-void) var(--silver-dim) var(--silver-dim) var(--bg-void);
}

/* --- Window Body --- */
.win98-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.75rem;
    border: 1px solid;
    border-color: var(--bg-void) var(--silver-dim) var(--silver-dim) var(--bg-void);
    margin: 0 0.2rem 0.2rem;
    background-color: var(--bg-secondary);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.win98-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.win98-body li {
    margin-block-end: 0.4rem;
}

.win98-body a::after {
    display: none;
}

/* --- Window Themes --- */

/* code-editor: monospace, green links, line numbers */
.theme-code .win98-body {
    background-color: #0c0c14;
    font-family: 'Courier New', 'Lucida Console', monospace;
    counter-reset: codeline;
}

.theme-code .win98-body li {
    counter-increment: codeline;
    display: flex;
    gap: 0.75rem;
    font-size: 0.8125rem;
}

.theme-code .win98-body li::before {
    content: counter(codeline);
    color: var(--text-dim);
    min-inline-size: 1.5rem;
    text-align: end;
    flex-shrink: 0;
}

.theme-code .win98-body a {
    color: var(--green);
    font-size: 0.8125rem;
}

.theme-code .win98-body a:hover {
    color: #66ff66;
}

/* gallery: magenta links, thumbnail feel */
.theme-gallery .win98-body {
    background-color: #0e0a14;
}

.theme-gallery .win98-body li {
    padding: 0.3rem 0;
    border-block-end: 1px solid var(--bg-tertiary);
}

.theme-gallery .win98-body li::before {
    content: "🖼 ";
}

.theme-gallery .win98-body a {
    color: var(--magenta);
}

.theme-gallery .win98-body a:hover {
    color: #ff66ff;
}

/* explorer: cyan links, tree/folder style */
.theme-explorer .win98-body {
    background-color: #0a0e14;
}

.theme-explorer .win98-body li {
    padding-inline-start: 0.5rem;
}

.theme-explorer .win98-body li::before {
    content: "📁 ";
}

.theme-explorer .win98-body a {
    color: var(--cyan);
}

.theme-explorer .win98-body a:hover {
    color: #66f0ff;
}

/* terminal: green-on-black, $ prompts */
.theme-terminal .win98-body {
    background-color: #050808;
    font-family: 'Courier New', 'Lucida Console', monospace;
}

.theme-terminal .win98-body li {
    font-size: 0.8125rem;
}

.theme-terminal .win98-body li::before {
    content: "$ ";
    color: var(--green);
}

.theme-terminal .win98-body a {
    color: var(--green);
    font-size: 0.8125rem;
}

.theme-terminal .win98-body a:hover {
    color: #66ff66;
}

/* player: violet links, numbered playlist */
.theme-player .win98-body {
    background-color: #0c0a14;
    counter-reset: track;
}

.theme-player .win98-body li {
    counter-increment: track;
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.theme-player .win98-body li::before {
    content: counter(track, decimal-leading-zero) ".";
    color: var(--text-dim);
    font-family: 'Courier New', monospace;
    min-inline-size: 2rem;
    text-align: end;
    flex-shrink: 0;
}

.theme-player .win98-body a {
    color: var(--violet);
}

.theme-player .win98-body a:hover {
    color: #c88aff;
}

.theme-player .win98-body a:visited {
    color: #8040c0;
}

/* notepad: ruled lines, serif italic */
.theme-notepad .win98-body {
    background-color: #0e0e12;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
}

.theme-notepad .win98-body li {
    padding-block: 0.25rem;
    border-block-end: 1px solid rgba(128, 128, 152, 0.12);
}

.theme-notepad .win98-body a {
    color: var(--accent);
}

.theme-notepad .win98-body a:hover {
    color: var(--text-primary);
}

/* games: amber/gold links, retro card style */
.theme-games .win98-body {
    background-color: #0e0c08;
    font-family: 'Courier New', 'Lucida Console', monospace;
}

.theme-games .win98-body li {
    padding-inline-start: 0.5rem;
}

.theme-games .win98-body li::before {
    content: "♠ ";
    color: var(--accent);
}

.theme-games .win98-body a {
    color: var(--accent);
}

.theme-games .win98-body a:hover {
    color: #ffd866;
}

/* Section headers inside window bodies (file-tree style) */
.win98-body .section-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0;
    margin-block-start: 0.5rem;
    margin-block-end: 0.25rem;
    border-block-end: 1px solid rgba(128, 128, 152, 0.15);
    font-family: 'Courier New', 'Lucida Console', monospace;
    font-size: 0.75rem;
    font-style: normal;
    color: var(--text-dim);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.win98-body .section-header::before {
    content: "▸";
    color: var(--text-dim);
}

.win98-body .section-header:first-child {
    margin-block-start: 0;
}

/* --- Tree View --- */
.tree {
    margin: 0;
    padding: 0;
}

.tree-item {
    position: relative;
    padding-left: 1rem;
}

.tree-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 0.625rem;
    height: 1px;
    background-color: rgba(128, 128, 152, 0.25);
}

.tree-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: -0.15rem;
    width: 1px;
    height: calc(100% + 0.3rem);
    background-color: rgba(128, 128, 152, 0.25);
}

.tree-item:last-child::after {
    height: 0.85rem;
}

.tree-label {
    color: var(--text-secondary);
    font-size: 1.2rem;
}

.link-desc {
    color: var(--text-dim);
    font-size: 0.8125rem;
}

/* --- Dock --- */
.dock {
    position: fixed;
    bottom: 4rem;
    left: 4rem;
    max-inline-size: fit-content;
    margin-inline: auto;
    z-index: 500;
    display: flex;
    gap: 0.25rem;
    padding: 0.8rem 0.6rem;
    background-color: rgba(14, 14, 24, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--silver-dim);
    border-radius: 0.5rem;
}

.dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.35rem 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Courier New', 'Lucida Console', monospace;
    font-size: 0.5625rem;
    color: var(--text-dim);
    transition: transform 0.2s cubic-bezier(.17,.73,.64,1.16), color 0.2s ease;
    position: relative;
}

.dock-item .dock-glyph {
    font-size: 1.25rem;
    line-height: 1;
    color: var(--silver);
}

.dock-item:hover {
    color: var(--text-secondary);
    transform: scale(2) translateY(-1.0rem);
}
.dock-item:hover + .dock-item {
    color: var(--text-secondary);
    transform: scale(1.5) translateY(-0.8rem) translateX(+0.5rem);
    transition: transform 0.3s cubic-bezier(.17,.73,.64,1.16);
}

.dock-item:has(+ .dock-item:hover) {
    transform: scale(1.5) translateY(-0.8rem) translateX(-0.5rem);
    transition: transform 0.3s cubic-bezier(.17,.73,.64,1.16);
}

.dock-item:hover + .dock-item + .dock-item {
    color: var(--text-secondary);
    transform: scale(1.15) translateY(-0.4rem) translateX(+0.5rem);
    transition: transform 0.5s cubic-bezier(.88,.04,.48,1.43);
}

.dock-item:has(+ .dock-item + .dock-item:hover) {
    transform: scale(1.15) translateY(-0.4rem) translateX(-0.5rem);
    transition: transform 0.5s cubic-bezier(.88,.04,.48,1.43);
}

.dock-item:hover .dock-glyph {
    color: var(--text-primary);
}

.dock-item:focus-visible {
    outline: 1px solid var(--cyan);
    outline-offset: 2px;
}

/* Open window indicator dot */
.dock-item.has-window::after {
    content: "";
    position: absolute;
    inset-block-end: -0.1rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 4px;
    block-size: 4px;
    border-radius: 50%;
    background-color: var(--cyan);
    box-shadow: 0 0 4px var(--cyan);
}

/* --- Maximized State --- */
.win98-window.maximized {
    inset: 0.5rem !important;
    inline-size: auto !important;
    block-size: auto !important;
    max-inline-size: none;
    max-block-size: none;
}

/* --- Responsive --- */
@media screen and (max-width: 50rem) {
    .win98-window.visible {
        position: fixed;
        inset: 0;
        inline-size: 100% !important;
        block-size: 100% !important;
        max-inline-size: none;
        max-block-size: none;
        min-inline-size: 0;
        min-block-size: 0;
        border: none;
    }

    .desktop-icons {
        grid-template-columns: repeat(auto-fill, 4.5rem);
        gap: 0.25rem;
        padding: 1rem;
    }

    .desktop-icon {
        font-size: 0.625rem;
    }

    .desktop-icon .icon-glyph {
        inline-size: 2rem;
        block-size: 2rem;
        font-size: 1rem;
    }

    .dock {
        gap: 0.15rem;
        padding: 0.3rem 0.4rem;
    }

    .dock-item {
        padding: 0.25rem 0.35rem;
    }

    .dock-item .dock-glyph {
        font-size: 1rem;
    }

    .dock-item span:last-child {
        display: none;
    }
}