/* =============================================================
   RickyOS XP — Luna Theme
   Jediný stylesheet celého enginu.

   ČÁST 1: Základ desktopu (okna, taskbar, ikony, lockscreen)
   ČÁST 2: Luna skin (XP vzhled, gradienty, responsive/mobile)
   ČÁST 3: Boot + CRT monitor + Start menu + aplikace (nové)
   ============================================================= */

/* ═══════════ ČÁST 1: ZÁKLAD DESKTOPU ═══════════ */

@font-face {
    font-family: "MS W98 UI";
    src:
        url("../assets/fonts/MSW98UI-Regular.woff2") format("woff2"),
        url("../assets/fonts/MSW98UI-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "MS W98 UI";
    src:
        url("../assets/fonts/MSW98UI-Bold.woff2") format("woff2"),
        url("../assets/fonts/MSW98UI-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

:root {
    --desktop: #008080;
    --desktop-dark: #006666;
    --window: #c0c0c0;
    --window-light: #ffffff;
    --window-mid: #dfdfdf;
    --window-dark: #808080;
    --window-darker: #404040;
    --text: #111111;
    --bluebar-a: #0a246a;
    --bluebar-b: #a6caf0;
    --shadow: rgba(0, 0, 0, 0.18);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;
    overflow: hidden;
    font-family: "MS W98 UI", "MS Sans Serif", "Microsoft Sans Serif", Tahoma, sans-serif;
    color: var(--text);
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)),
        linear-gradient(180deg, var(--desktop) 0%, #0d8f8f 100%);
    image-rendering: pixelated;
    cursor: default;
    font-smooth: never;
    -webkit-font-smoothing: none;
    text-rendering: optimizeLegibility;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.16) 1px, transparent 0);
    background-size: 4px 4px;
    opacity: 0.2;
    pointer-events: none;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 50%, rgba(0, 0, 0, 0.06) 50%);
    background-size: 100% 4px;
    opacity: 0.35;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.page-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 24px 64px;
    position: relative;
    z-index: 2;
}

.desktop-window {
    position: absolute;
    width: min(760px, 100%);
    background: var(--window);
    border-top: 2px solid var(--window-light);
    border-left: 2px solid var(--window-light);
    border-right: 2px solid var(--window-darker);
    border-bottom: 2px solid var(--window-darker);
    box-shadow: 10px 10px 0 var(--shadow);
    overflow: hidden;
}

.desktop-window.is-focused .title-bar {
    background: linear-gradient(90deg, var(--bluebar-a) 0%, #245edb 52%, var(--bluebar-b) 100%);
}

.desktop-window:not(.is-focused) .title-bar {
    background: linear-gradient(90deg, #7f7f7f 0%, #b8b8b8 100%);
}

.desktop-window.is-hidden {
    display: none;
}

.desktop-window::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.08)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.05));
}

#index-window {
    top: 112px;
    left: 188px;
    width: min(760px, calc(100vw - 40px));
    z-index: 9;
}

.desktop-icons {
    position: absolute;
    top: 18px;
    left: 18px;
    display: grid;
    gap: 18px;
    z-index: 3;
}

.desktop-icon {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    width: 78px;
    display: grid;
    justify-items: center;
    gap: 6px;
    cursor: pointer;
}

.desktop-icon.is-selected .desktop-icon-label {
    color: #fff;
    background: #000080;
}

.desktop-icon:focus-visible .desktop-icon-label {
    outline: 1px dotted #fff;
    outline-offset: 2px;
}

.desktop-icon-art {
    position: relative;
    width: 34px;
    height: 32px;
    display: block;
}

.desktop-icon-label {
    display: inline-block;
    padding: 2px 4px;
    color: #fff;
    font-size: 11px;
    line-height: 1.1;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
    background: transparent;
}

.icon-computer::before,
.icon-computer::after,
.icon-browser::before,
.icon-browser::after,
.icon-winamp::before,
.icon-winamp::after,
.icon-doom::before,
.icon-doom::after,
.icon-doc::before,
.icon-doc::after {
    content: "";
    position: absolute;
    display: block;
}

.icon-computer::before {
    top: 1px;
    left: 3px;
    width: 28px;
    height: 18px;
    background: #d8d8d8;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
}

.icon-computer::after {
    bottom: 2px;
    left: 10px;
    width: 16px;
    height: 8px;
    background: #b0b0b0;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
}

.icon-doc::before {
    top: 1px;
    left: 6px;
    width: 22px;
    height: 28px;
    background: #fbfbfb;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #7f7f7f;
    border-bottom: 2px solid #7f7f7f;
}

.icon-doc::after {
    top: 7px;
    left: 11px;
    width: 12px;
    height: 2px;
    background: #2d5cff;
    box-shadow: 0 5px 0 #2d5cff, 0 10px 0 #2d5cff;
}

.icon-browser::before {
    top: 2px;
    left: 3px;
    width: 28px;
    height: 22px;
    background: #f8f8f8;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
}

.icon-browser::after {
    top: 8px;
    left: 8px;
    width: 18px;
    height: 10px;
    background: radial-gradient(circle at 35% 45%, #3ea6ff 0 35%, #1449a7 36% 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 2px #f7d24d;
}

.icon-winamp::before {
    top: 3px;
    left: 4px;
    width: 26px;
    height: 26px;
    background: radial-gradient(circle at 50% 50%, #f2c533 0 22%, #2d2439 23% 54%, #b685ff 55% 100%);
    border-radius: 50%;
    border: 2px solid #2a1741;
}

.icon-winamp::after {
    top: 11px;
    left: 15px;
    width: 4px;
    height: 10px;
    background: #f7f0ff;
    transform: skew(-12deg);
}

.icon-doom::before {
    top: 3px;
    left: 3px;
    width: 28px;
    height: 24px;
    background: linear-gradient(180deg, #391800 0%, #8c2c12 45%, #f2a12e 100%);
    border-top: 2px solid #fff1c4;
    border-left: 2px solid #fff1c4;
    border-right: 2px solid #3d1302;
    border-bottom: 2px solid #3d1302;
}

.icon-doom::after {
    top: 10px;
    left: 8px;
    width: 16px;
    height: 8px;
    background: #f3d35f;
    clip-path: polygon(0 100%, 18% 0, 38% 100%, 54% 0, 72% 100%, 88% 0, 100% 100%);
}

.title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 6px;
    background: linear-gradient(90deg, var(--bluebar-a) 0%, #245edb 52%, var(--bluebar-b) 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    position: relative;
}

.title-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 50%, transparent 50%);
    background-size: 4px 100%;
    opacity: 0.25;
    pointer-events: none;
}

.title-bar-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.title-bar-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.title-bar-button {
    width: 18px;
    height: 16px;
    display: grid;
    place-items: center;
    background: var(--window);
    color: #000;
    font-size: 10px;
    border-top: 2px solid var(--window-light);
    border-left: 2px solid var(--window-light);
    border-right: 2px solid var(--window-darker);
    border-bottom: 2px solid var(--window-darker);
    font-family: "MS W98 UI", "MS Sans Serif", Tahoma, sans-serif;
    cursor: pointer;
}

.title-bar-button:active {
    border-top: 2px solid var(--window-darker);
    border-left: 2px solid var(--window-darker);
    border-right: 2px solid var(--window-light);
    border-bottom: 2px solid var(--window-light);
}

.window-body {
    padding: 26px;
    background:
        linear-gradient(180deg, var(--window-mid) 0%, var(--window) 100%);
}

.button-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 8px;
    background: #bcbcbc;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.explorer-window,
.browser-window,
.winamp-window,
.doom-window {
    z-index: 4;
}

.explorer-window {
    top: 134px;
    left: 134px;
    width: min(560px, calc(100vw - 36px));
}

#playground-window {
    top: 96px;
    left: 88px;
    width: min(920px, calc(100vw - 80px));
    height: min(620px, calc(100vh - 96px));
}

.browser-window {
    top: 86px;
    left: 214px;
    width: min(640px, calc(100vw - 36px));
    height: min(520px, calc(100vh - 84px));
}

.winamp-window {
    top: 212px;
    left: 304px;
    width: min(320px, calc(100vw - 36px));
}

.doom-window {
    top: 248px;
    left: 114px;
    width: min(360px, calc(100vw - 36px));
    height: min(320px, calc(100vh - 84px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.explorer-body,
.browser-body,
.doom-body {
    padding: 12px;
}

.browser-body {
    display: grid;
    grid-template-rows: auto auto 1fr;
    height: 100%;
}

.explorer-toolbar,
.ie-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.explorer-chip,
.ie-nav-button,
.explorer-item,
.winamp-controls button {
    appearance: none;
    border: 0;
    font: inherit;
    background: #c0c0c0;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
}

.explorer-chip,
.ie-nav-button {
    padding: 4px 8px;
}

.explorer-panel,
.ie-address-box,
.ie-page,
.winamp-main,
.winamp-eq,
.winamp-playlist,
.doom-body {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.explorer-panel {
    display: flex;
    min-height: 250px;
    background: #fff;
}

.explorer-sidebar {
    width: 136px;
    padding: 8px;
    background: #d3d3d3;
    border-right: 2px solid #808080;
}

.explorer-item {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    padding: 6px 8px;
    text-align: left;
}

.explorer-item.is-active {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.explorer-content {
    flex: 1;
    padding: 12px;
    background: #f6f6f6;
}

.explorer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.explorer-icon {
    display: grid;
    justify-items: center;
    gap: 8px;
}

.desktop-icon-label-dark {
    color: #111;
    text-shadow: none;
}

.about-copy {
    display: grid;
    gap: 8px;
    font-size: 11px;
}

.about-copy p,
.doom-body p,
.ie-page p {
    margin: 0;
}

.ie-address-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 11px;
}

.ie-address-box {
    flex: 1;
    min-height: 26px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    background: #fff;
}

.ie-page {
    padding: 14px;
    min-height: 0;
    background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
    overflow: auto;
}

.ie-page-header {
    margin-bottom: 16px;
}

.ie-page-header h2 {
    margin: 0 0 6px;
    font-size: 18px;
}

.ie-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ie-card {
    padding: 10px;
    border: 1px solid #000;
    background: #fff;
}

.ie-card ul {
    margin: 8px 0 0 18px;
    padding: 0;
}

.winamp-body {
    padding: 10px;
    background: linear-gradient(180deg, #7a7f95 0%, #4a4d63 100%);
}

.winamp-main,
.winamp-playlist {
    background: #b8bdd6;
}

.winamp-main {
    padding: 8px;
    margin-bottom: 8px;
}

.winamp-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px;
    background: linear-gradient(180deg, #122f16 0%, #09170b 100%);
    color: #98ff81;
    font-size: 11px;
}

.winamp-controls {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.winamp-controls button {
    padding: 6px 0;
}

.winamp-eq {
    height: 70px;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    align-items: end;
    gap: 4px;
    margin-bottom: 8px;
    padding: 8px;
    background: #23273d;
}

.winamp-eq span {
    display: block;
    background: linear-gradient(180deg, #89f05a 0%, #ffe44d 55%, #ff8549 100%);
}

.winamp-playlist {
    padding: 8px;
    background: #0c1434;
    color: #d7defd;
    font-size: 11px;
}

.winamp-track {
    padding: 4px 6px;
}

.winamp-track.is-active {
    background: #1f3d93;
}

.doom-body {
    background: #c0c0c0;
    position: relative;
    display: grid;
    padding: 0;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

#doom-canvas {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
    object-fit: fill;
}

.doom-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
}

.doom-hud {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    color: #f2c36d;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0.85) 100%);
    text-shadow: 1px 1px 0 #000;
}

.window-resize-handle {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background:
        linear-gradient(135deg, transparent 0 40%, #808080 40% 48%, transparent 48% 56%, #808080 56% 64%, transparent 64% 72%, #808080 72% 80%, transparent 80% 100%);
    cursor: nwse-resize;
}

.desktop-window.is-maximized {
    left: 0 !important;
    top: 0 !important;
}

.desktop-window.is-maximized .window-resize-handle {
    display: none;
}

.taskbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: #c0c0c0;
    border-top: 2px solid #fff;
    z-index: 6;
}

.taskbar-apps {
    display: flex;
    gap: 6px;
    min-width: 0;
}

.start-button,
.task-button,
.clock-box {
    height: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: #c0c0c0;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    font-size: 11px;
    line-height: 1;
    font-family: "MS W98 UI", "MS Sans Serif", Tahoma, sans-serif;
}

.start-button {
    font-weight: 700;
}

.start-flag {
    position: relative;
    width: 16px;
    height: 16px;
    display: inline-block;
    background:
        linear-gradient(90deg, #ff0000 0 50%, #00a000 50% 100%);
    box-shadow: 2px 0 0 #000 inset, 0 2px 0 rgba(255, 255, 255, 0.18) inset;
}

.start-flag::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 0 50%, #0000ff 50% 100%);
    mix-blend-mode: screen;
}

.taskbar-divider {
    width: 2px;
    height: 28px;
    background: #808080;
    border-right: 1px solid #fff;
}

.task-button {
    min-width: 180px;
    justify-content: flex-start;
    cursor: pointer;
}

.task-button.is-hidden {
    display: none;
}

.task-button.is-active {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    padding-top: 2px;
    padding-left: 12px;
}

.task-button:active {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    padding-top: 2px;
    padding-left: 12px;
}

.title-bar-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.title-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    image-rendering: auto;
}

.title-icon--index {
    background-image: url("../assets/firefox.png");
}

.title-icon--computer {
    background-image: url("../assets/tentopocitac.png");
}

.title-icon--folder {
    background-image: url("../assets/slozka.png");
}

.task-button::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    image-rendering: auto;
}

.task-button[data-taskbar-app="index"]::before {
    background-image: url("../assets/firefox.png");
}

.task-button[data-taskbar-app="computer"]::before {
    background-image: url("../assets/tentopocitac.png");
}

.task-button[data-taskbar-app="ie"]::before {
    background-image: url("../assets/txt.png");
}

.task-button[data-taskbar-app="playground"]::before {
    background-image: url("../assets/slozka.png");
}

.task-button[data-taskbar-app="winamp"]::before {
    background-image: url("../assets/icons/winamp.svg");
}

.task-button[data-taskbar-app="doom"]::before {
    background-image: url("../assets/icons/doom.svg");
}

.task-button[data-taskbar-app="screensaver"]::before {
    background-image: url("../assets/icons/screensaver.svg");
}

.taskbar-spacer {
    flex: 1;
}

.clock-box {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

@media (max-width: 700px) {
    .page-shell {
        padding: 54px 12px 62px;
    }

    .window-body {
        padding: 14px;
    }

    .desktop-icons {
        top: 10px;
        left: 10px;
        grid-template-columns: repeat(3, 72px);
    }

    .button-grid {
        grid-template-columns: 1fr;
    }

    .explorer-window,
    .browser-window,
    .winamp-window,
    .doom-window {
        left: 12px;
        width: min(360px, calc(100vw - 24px));
    }

    #index-window {
        left: 12px;
        top: 120px;
        width: min(360px, calc(100vw - 24px));
    }

    .explorer-window {
        top: 144px;
    }

    .browser-window {
        top: 88px;
        height: min(500px, calc(100vh - 100px));
    }

    .winamp-window {
        top: 282px;
    }

    .doom-window {
        top: 392px;
    }

    .explorer-panel,
    .ie-columns {
        display: block;
    }

    .explorer-sidebar {
        width: 100%;
        border-right: 0;
        border-bottom: 2px solid #808080;
    }

    .explorer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .task-button {
        min-width: 96px;
    }

    .clock-box {
        padding: 0 8px;
        font-size: 10px;
    }
}

body .desktop-window {
    border: 1px solid #3f5d8a;
    border-radius: 9px 9px 0 0;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.28),
        8px 10px 18px rgba(11, 24, 56, 0.28);
}

body .desktop-window::after {
    display: none;
}

body .title-bar,
body .desktop-window.is-focused .title-bar,
body .desktop-window:not(.is-focused) .title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 30px;
    padding: 0 6px 0 8px;
    color: #fff;
    border-bottom: 1px solid #2f5a96;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.52),
        inset 0 -1px 0 rgba(15, 31, 69, 0.16);
}

body .title-bar,
body .desktop-window.is-focused .title-bar {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 18%, rgba(0,0,0,0.04) 100%),
        linear-gradient(180deg, #5d8fd8 0%, #4c7dca 52%, #406ebd 100%);
}

body .desktop-window:not(.is-focused) .title-bar {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 18%, rgba(0,0,0,0.04) 100%),
        linear-gradient(180deg, #7d93b9 0%, #6b82a9 52%, #5f769d 100%);
    border-bottom-color: #4a638a;
}

body .title-bar-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font: 700 13px/1 "Trebuchet MS", Tahoma, sans-serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.2px;
}

body .title-bar-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

body .title-bar-button {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    outline: 1px solid rgba(255, 255, 255, 0.35);
    outline-offset: -2px;
    background: linear-gradient(180deg, #6aabff 0%, #3e86f5 30%, #1d5ee0 100%);
    color: #fff;
    box-shadow:
        1px 1px 3px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
    font: 700 13px/1 "Trebuchet MS", Tahoma, sans-serif;
}

body .title-bar-button:hover {
    background: linear-gradient(180deg, #7ec0ff 0%, #559af8 30%, #2f72f0 100%);
}

body .title-bar-button:active {
    background: linear-gradient(180deg, #1748c0 0%, #3a6ee8 100%);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.42);
}

body .title-bar-button--close {
    background: linear-gradient(180deg, #f09080 0%, #e04830 35%, #c42010 100%);
}

body .title-bar-button--close:hover {
    background: linear-gradient(180deg, #ffa898 0%, #f05840 35%, #d63020 100%);
}

body .desktop-window:not(.is-focused) .title-bar-button {
    background: linear-gradient(180deg, #a0b8e8 0%, #7a96cc 100%);
    box-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body .desktop-window:not(.is-focused) .title-bar-button--close {
    background: linear-gradient(180deg, #dfa09a 0%, #b87070 100%);
}

body .window-body,
body .explorer-body,
body .playground-body,
body .sysinfo-body {
    background: linear-gradient(180deg, #f4f7fc 0%, #e8eef8 100%);
}

body .ff-menubar,
body .ff-toolbar,
body .ff-bookmarks,
body .ff-statusbar {
    border-color: #a7bdd8;
}

body .ff-statusbar {
    background: linear-gradient(180deg, #eef4fb 0%, #dae6f5 100%);
}

#playground-window .playground-body {
    padding: 0;
    background: linear-gradient(180deg, #f7f4eb 0%, #ece9d8 100%);
}

#playground-window .playground-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 100%;
}

#playground-window .playground-sidebar {
    padding: 10px 8px;
    background: linear-gradient(180deg, #d7e7fb 0%, #c2d7f2 100%);
    border-right: 1px solid #a6bdd7;
}

#playground-window .playground-pane {
    padding: 10px 10px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
}

#playground-window .playground-pane + .playground-pane {
    margin-top: 12px;
}

#playground-window .playground-pane--soft {
    background: linear-gradient(180deg, #f7fbff 0%, #e4eefb 100%);
}

#playground-window .playground-pane--warm {
    background: linear-gradient(180deg, #fffef9 0%, #f3ebd4 100%);
}

#playground-window .playground-pane h3 {
    margin: 0 0 10px;
    font: 700 13px/1.2 Tahoma, sans-serif;
    color: #1f4f92;
}

#playground-window .playground-pane-link {
    display: block;
    width: 100%;
    margin: 0;
    padding: 4px 0;
    border: 0;
    background: transparent;
    text-align: left;
    color: #24559b;
    font: 12px/1.35 Tahoma, sans-serif;
    cursor: default;
}

#playground-window .playground-detail {
    margin: 0;
    font: 12px/1.4 Tahoma, sans-serif;
    color: #40546f;
}

#playground-window .playground-detail + .playground-detail {
    margin-top: 6px;
}

#playground-window .playground-folder-view {
    min-height: 100%;
    padding: 12px 14px 16px;
    border: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(247,250,254,0.98) 100%);
}

#playground-window .playground-folder-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #d4deec;
}

#playground-window .playground-folder-header h2 {
    margin: 0 0 4px;
    font: 700 22px/1.05 Tahoma, sans-serif;
    color: #24559b;
}

#playground-window .playground-folder-header p {
    margin: 0;
    font: 12px/1.4 Tahoma, sans-serif;
    color: #576e8a;
}

#playground-window .playground-folder-meta {
    display: grid;
    gap: 4px;
    justify-items: end;
    color: #5d6f85;
    font: 11px/1.3 Tahoma, sans-serif;
    white-space: nowrap;
}

#playground-window .playground-grid {
    align-content: start;
    grid-template-columns: repeat(auto-fit, minmax(96px, 110px));
    gap: 18px 14px;
    min-height: 240px;
}

#playground-window .playground-app-icon {
    width: 100%;
    min-height: 96px;
    align-content: start;
    justify-items: center;
    padding: 8px 4px;
    border: 1px solid transparent;
    border-radius: 4px;
}

#playground-window .playground-app-icon:hover {
    background: linear-gradient(180deg, rgba(206,226,251,0.45) 0%, rgba(230,240,253,0.7) 100%);
    border-color: rgba(123, 155, 206, 0.55);
}

@media (max-width: 860px) {
    #playground-window .playground-shell {
        grid-template-columns: 1fr;
    }

    #playground-window .playground-sidebar {
        border-right: 0;
        border-bottom: 1px solid #a6bdd7;
    }

    #playground-window .playground-folder-header {
        flex-direction: column;
    }

    #playground-window .playground-folder-meta {
        justify-items: start;
        white-space: normal;
    }
}

/* ═══════════ ČÁST 2: LUNA SKIN ═══════════ */

/* WIN XP OVERRIDES */

/* Desktop & General */
body {
    background: url('../assets/bliss.png') center center/cover no-repeat fixed;
    font-family: Tahoma, 'Segoe UI', Arial, sans-serif;
    color: #000;
    image-rendering: auto; /* override pixelated - looks bad on retina/mobile */
    -webkit-font-smoothing: subpixel-antialiased;
    overscroll-behavior: none;
}

body::before, body::after {
    display: none; /* remove Win98 scanlines */
}

.page-shell {
    padding: 32px 32px 80px;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

:root {
    --app-height: 100vh;
    --taskbar-height: 30px;
}

/* Animations setup */
.desktop-window {
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease-out;
    transform-origin: center;
    border-radius: 10px 10px 6px 6px;
    border: 3px solid #5f84bc;
    border-top: none;
    box-shadow:
        0 6px 20px rgba(0,0,0,0.38),
        0 2px 6px rgba(0,0,0,0.18),
        inset 0 0 0 1px rgba(255,255,255,0.25);
}

.window-edge-handle {
    position: absolute;
    z-index: 15;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
}

.window-edge-handle--n,
.window-edge-handle--s {
    left: 12px;
    right: 12px;
    height: 8px;
}

.window-edge-handle--n {
    top: -4px;
    cursor: ns-resize;
}

.window-edge-handle--s {
    bottom: -4px;
    cursor: ns-resize;
}

.window-edge-handle--e,
.window-edge-handle--w {
    top: 12px;
    bottom: 12px;
    width: 8px;
}

.window-edge-handle--e {
    right: -4px;
    cursor: ew-resize;
}

.window-edge-handle--w {
    left: -4px;
    cursor: ew-resize;
}

.window-edge-handle--ne,
.window-edge-handle--nw,
.window-edge-handle--se,
.window-edge-handle--sw {
    width: 14px;
    height: 14px;
}

.window-edge-handle--ne {
    top: -5px;
    right: -5px;
    cursor: nesw-resize;
}

.window-edge-handle--nw {
    top: -5px;
    left: -5px;
    cursor: nwse-resize;
}

.window-edge-handle--se {
    right: -5px;
    bottom: -5px;
    cursor: nwse-resize;
}

.window-edge-handle--sw {
    left: -5px;
    bottom: -5px;
    cursor: nesw-resize;
}

.desktop-window.is-hidden {
    display: block !important;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.85);
}

/* Active title bar keeps the calmer cool-blue mood of the inactive state,
 * just a bit richer so focus still reads immediately. */
.title-bar,
.desktop-window.is-focused .title-bar {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 16%, rgba(0,0,0,0.05) 100%),
        linear-gradient(180deg, #5d8fd8 0%, #4c7dca 52%, #406ebd 100%);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 0 5px 0 8px;
    border-bottom: 1px solid #2f5a96;
    height: 30px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.56),
        inset 0 -1px 0 rgba(12,28,72,0.22);
    touch-action: none;
}

.title-bar::after {
    display: none;
}

/* Unfocused — same structure, fully desaturated to cool grey-blue */
.desktop-window:not(.is-focused) .title-bar {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 16%, rgba(0,0,0,0.04) 100%),
        linear-gradient(180deg, #7d93b9 0%, #6b82a9 52%, #5f769d 100%);
    border-bottom: 1px solid #4a638a;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(16,32,68,0.14);
}
.desktop-window:not(.is-focused) {
    border-color: #5e79a8;
}

.title-bar-text {
    font-family: 'Trebuchet MS', Tahoma, sans-serif;
    font-size: 13px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.65);
    font-weight: bold;
    letter-spacing: 0.3px;
}

/* Window Buttons — consistent sizing + spacing */
.title-bar-actions {
    display: flex;
    align-items: center;
    gap: 3px;
}

.title-bar-button {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.35);
    outline: 1px solid rgba(255,255,255,0.35);
    outline-offset: -2px;
    background: linear-gradient(180deg,
        #6aabff 0%,
        #3e86f5 30%,
        #1d5ee0 100%
    );
    color: white;
    font-family: 'Trebuchet MS', Tahoma, sans-serif;
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
    cursor: pointer;
}

.title-bar-button:hover {
    background: linear-gradient(180deg,
        #7ec0ff 0%,
        #559af8 30%,
        #2f72f0 100%
    );
}

.title-bar-button:active {
    background: linear-gradient(180deg, #1748c0 0%, #3a6ee8 100%);
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.45);
    outline-color: rgba(255,255,255,0.2);
}

/* Close button — same size, red tones */
.title-bar-button--close {
    width: 22px;
    background: linear-gradient(180deg,
        #f09080 0%,
        #e04830 35%,
        #c42010 100%
    );
    font-size: 14px;
}
.title-bar-button--close:hover {
    background: linear-gradient(180deg,
        #ffa898 0%,
        #f05840 35%,
        #d63020 100%
    );
}
.title-bar-button--close:active {
    background: linear-gradient(180deg, #a01808 0%, #d03018 100%);
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5);
}

/* Unfocused button states */
.desktop-window:not(.is-focused) .title-bar-button {
    background: linear-gradient(180deg, #a0b8e8 0%, #7a96cc 100%);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
    opacity: 1;
}
.desktop-window:not(.is-focused) .title-bar-button--close {
    background: linear-gradient(180deg, #dfa09a 0%, #b87070 100%);
}

/* Taskbar */
.taskbar {
    background: linear-gradient(to bottom, #245edb 0%, #3f8cf3 4%, #286be0 6%, #1f4cb8 100%);
    border-top: 1px solid #103494;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.3);
    height: 30px;
    bottom: 0px !important;
}

.start-button {
    /*
     * Keep the original silhouette and only shift the crop to avoid the white band
     * in the source image. The asset itself has white padding above/below the button.
     */
    background-image: url('../assets/startsimple.jpg');
    background-size: 100% 380%;
    background-position: center 52%;
    background-repeat: no-repeat;
    border: none;
    border-radius: 0;
    padding: 0;
    height: 30px;
    margin-top: -4px;
    margin-bottom: -4px;
    margin-left: -14px;
    flex-shrink: 0;
    min-width: 100px;
    box-shadow: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    clip-path: inset(0 6% 0 0 round 0 10px 10px 0);
    overflow: visible;
}

/* Hide Win98 logo panes and text — image handles the visual */
.start-button .start-logo,
.start-button > span:not(.start-logo) {
    display: none;
}

.start-button:hover {
    filter: brightness(1.08);
}

.start-button:active {
    filter: brightness(0.9);
    transform: translateY(1px);
}

.taskbar-apps {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 0;
    flex: 1;
    min-width: 0;
}

.taskbar-divider {
    display: none;
}

.task-button {
    background: linear-gradient(to bottom, #3980f4 0%, #2b68df 100%);
    border: 1px solid #103494;
    border-radius: 4px;
    color: white;
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    margin: 0 1px;
    padding: 0 10px 0 6px;
    height: 24px;
    transition: background 0.1s;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}

/* Taskbar icon per app */
.task-button::before {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    image-rendering: auto;
}

.task-button[data-taskbar-app="index"]::before      { background-image: url('../assets/firefox.png'); }
.task-button[data-taskbar-app="computer"]::before   { background-image: url('../assets/tentopocitac.png'); }
.task-button[data-taskbar-app="ie"]::before         { background-image: url('../assets/txt.png'); }
.task-button[data-taskbar-app="playground"]::before { background-image: url('../assets/slozka.png'); }
.task-button[data-taskbar-app="winamp"]::before     { background-image: url('../assets/icons/winamp.svg'); }
.task-button[data-taskbar-app="doom"]::before       { background-image: url('../assets/icons/doom.svg'); }
.task-button[data-taskbar-app="screensaver"]::before{ background-image: url('../assets/icons/screensaver.svg'); }

.task-button:hover {
    background: linear-gradient(to bottom, #5c9df5 0%, #3f8cf3 100%);
}

.task-button.is-active {
    background: linear-gradient(to bottom, #1e52d0 0%, #1742a1 100%);
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
    border-color: #0c205c;
}

.clock-box {
    color: white;
    /* Match task-button gradient family — same top highlight, slightly darker overall */
    background: linear-gradient(to bottom, #2d6be0 0%, #1f52c4 50%, #193fa0 100%);
    border: 1px solid #103494;
    border-right: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 2px 0 6px rgba(0,0,0,0.18);
    height: 100%;
    padding: 0 14px;
    display: flex;
    align-items: center;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    font-weight: bold;
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    min-width: 60px;
    justify-content: center;
    border-radius: 0;
}

/* Base Body Changes */
.window-body {
    background: #f1ebd8;
    border: 1px solid #fff; /* to separate from blue border */
}


/* Desktop Icons */
.desktop-icon-art {
    width: 60px;
    height: 60px;
    transition: transform 0.2s, filter 0.2s;
    background-color: transparent !important;
}

.desktop-icon:hover .desktop-icon-art, .desktop-icon.is-selected .desktop-icon-art {
    transform: scale(1.08);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

.icon-computer { background: url('../assets/tentopocitac.png') center/contain no-repeat !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important; border: none !important; }
.icon-index   { background: url('../assets/firefox.png')      center/contain no-repeat !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important; border: none !important; }
.icon-folder  { background: url('../assets/slozka.png')       center/contain no-repeat !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important; border: none !important; }

.desktop-icon-art[class*="icon-"]::before,
.desktop-icon-art[class*="icon-"]::after {
    display: none !important;
}

.desktop-window::after {
    display: none;
}

.desktop-icon-label {
    text-shadow: 1px 1px 2px black, 0 0 4px black;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.3px;
    border-radius: 2px;
    padding: 2px 4px;
    margin-top: 4px;
    transition: background 0.1s;
}
.desktop-icon:hover .desktop-icon-label {
    background: rgba(255,255,255,0.2);
}
.desktop-icon.is-selected .desktop-icon-label {
    background: rgba(0, 80, 200, 0.6);
    color: white;
    border: 1px dotted rgba(255,255,255,0.8);
}

.desktop-icons.desktop-icons--freeform {
    inset: 0 0 calc(var(--taskbar-height) + var(--safe-bottom)) 0;
    width: auto;
    height: auto;
    display: block;
}

.desktop-icons.desktop-icons--freeform .desktop-icon {
    position: absolute;
    width: 82px;
}

.desktop-icons.desktop-icons--freeform .desktop-icon.is-dragging {
    z-index: 5;
    opacity: 0.9;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,0.35));
}


/* LOCKSCREEN -> XP WELCOME SCREEN */
.xp-welcome {
    position: fixed;
    inset: 0;
    background: #002277;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: opacity 0.4s ease, transform 0.4s ease;
    min-height: var(--app-height);
    overflow: hidden;
}
.xp-welcome.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(1.05); /* zoom out effect when unlocking */
    display: flex !important;
}

.xp-welcome-top, .xp-welcome-bottom {
    min-height: 80px;
    background: linear-gradient(to bottom, #001047 0%, #002e8a 100%);
}
.xp-welcome-bottom {
    background: linear-gradient(to bottom, #002e8a 0%, #001047 100%);
    display: flex;
    align-items: center;
    padding: 0 30px;
}

.xp-welcome-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 46%),
        linear-gradient(to right, #3f5fb9 0%, #5f84ec 26%, #6d96f7 50%, #5b83ea 74%, #3f5fb9 100%);
    position: relative;
    padding: clamp(20px, 4vw, 40px);
    gap: clamp(20px, 4vw, 52px);
    overflow: auto;
}

.xp-welcome-center::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.6) 20%, rgba(255,255,255,0.6) 80%, transparent);
}

.xp-welcome-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding-right: 0;
    max-width: 420px;
    z-index: 2;
}

.xp-brand-panel {
    width: min(100%, 420px);
    min-height: 126px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px 22px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.08) 18%, rgba(24,60,146,0.2) 100%);
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -16px 24px rgba(3,23,78,0.16),
        0 18px 30px rgba(12,27,80,0.18);
    position: relative;
    overflow: hidden;
}

.xp-brand-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 48%;
    background: linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.xp-logo {
    color: white;
    font-size: 34px;
    margin: 0;
    font-family: Arial, sans-serif;
    font-style: italic;
    font-weight: bold;
    letter-spacing: -0.03em;
    text-shadow: 0 1px 0 rgba(255,255,255,0.16), 0 3px 8px rgba(0,0,0,0.42);
    position: relative;
    z-index: 1;
}
.xp-logo span {
    color: #ff9b28;
}
.xp-subtitle {
    color: rgba(255,255,255,0.92);
    font-size: 15px;
    line-height: 1.35;
    margin: 8px 0 0;
    position: relative;
    z-index: 1;
}

.xp-welcome-divider {
    width: 2px;
    align-self: stretch;
    min-height: 180px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5) 20%, rgba(255,255,255,0.5) 80%, transparent);
    z-index: 2;
}

.xp-welcome-right {
    flex: 1;
    padding-left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    max-width: 460px;
    justify-content: center;
}

.xp-user-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(112,155,255,0.18) 16%, rgba(0,36,124,0.22) 100%);
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.26);
    backdrop-filter: blur(2px);
    width: min(100%, 420px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.48),
        inset 0 -10px 20px rgba(0,26,94,0.18),
        0 18px 30px rgba(0, 16, 64, 0.2);
    position: relative;
    overflow: hidden;
}

.xp-user-row::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 52%;
    background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.xp-avatar {
    width: 64px;
    height: 64px;
    border: 1px solid rgba(255,255,255,0.75);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffc04c 0%, #ef7a0f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        0 5px 10px rgba(0,0,0,0.36);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.xp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.xp-user-login {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.xp-username {
    color: white;
    margin: 0;
    font-size: 22px;
    font-weight: normal;
    text-shadow: 0 2px 4px rgba(0,0,0,0.44);
    position: relative;
    z-index: 1;
}

.xp-pin-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.xp-instruction {
    color: #fff1ad;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lockscreen-key {
    touch-action: manipulation;
}

/* FIREFOX 2006 (INDEX) UI REDESIGN */
#index-window {
    --ff-bg: #ece9d8;
    --ff-border: #7f9db9;
}

#computer-window,
#ie-window,
#playground-window {
    --ff-bg: #ece9d8;
    --ff-border: #7f9db9;
}

.ff-menubar, .ff-toolbar, .ff-bookmarks {
    background: var(--ff-bg);
    display: flex;
    align-items: center;
    border-bottom: 1px solid #c0c0c0;
}

/* Menubar */
.ff-menubar {
    padding: 2px 4px;
    font-size: 11px;
    color: #000;
}
.ff-menu-item {
    padding: 2px 6px;
    cursor: default;
}
.ff-menu-item:hover {
    background: #316ac5;
    color: white;
}

/* Main Toolbar */
.ff-toolbar {
    padding: 6px 8px;
    gap: 8px;
    background: linear-gradient(to bottom, #f9f8f4 0%, #ece9d8 100%);
}
.ff-toolbar-buttons {
    display: flex;
    gap: 4px;
}

.ff-toolbar-buttons--neutral .ff-btn-back::before,
.ff-toolbar-buttons--neutral .ff-btn-forward::before {
    color: #6f7b8d;
}
.ff-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ff-btn:hover {
    border: 1px solid #a6a6a6;
    background: #f1ebd8;
    box-shadow: inset 1px 1px 2px white;
}
.ff-btn:active {
    background: #dbd6c6;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2);
}
.ff-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.ff-btn-back::before { content: '◀'; color: #44a539; font-size: 20px; margin-right: 2px; }
.ff-btn-forward::before { content: '▶'; color: #44a539; font-size: 20px; margin-left: 2px; }
.ff-btn-reload::before { content: '↻'; color: #2167d4; font-size: 22px; font-weight:bold; }
.ff-btn-stop::before { content: '✖'; color: #d44d21; font-size: 18px; }
.ff-btn-home::before { content: '⌂'; color: #f2a829; font-size: 24px; margin-bottom: 4px; }

/* Address Bar */
.ff-addressbar-container {
    flex: 1;
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid var(--ff-border);
    border-top-color: #555;
    border-left-color: #555;
    padding: 2px;
    height: 24px;
}
.ff-addressbar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 4px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #000;
}
.ff-address-icon::before {
    content: '📄';
    font-size: 12px;
}
.ff-btn-go {
    width: 24px;
    height: 20px;
    background: #ece9d8;
    border: 1px solid #a6a6a6;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ff-btn-go:hover { background: #f1ebd8; }
.ff-btn-go::before {
    content: '▶';
    font-size: 10px;
    color: green;
}

/* Search Bar */
.ff-searchbar-container {
    width: 200px;
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid var(--ff-border);
    border-top-color: #555;
    border-left-color: #555;
    padding: 2px;
    height: 24px;
}
.ff-searchbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 4px;
    font-family: Arial, sans-serif;
    font-size: 13px;
}
.ff-search-icon {
    font-weight: bold;
    color: #4285F4; /* simple retro G color */
    font-family: serif;
    font-size: 14px;
}
.ff-search-text {
    flex:1;
    color: #000;
}

/* Bookmarks */
.ff-bookmarks {
    padding: 2px 6px;
    gap: 16px;
    font-size: 11px;
    border-bottom: 2px solid #a6a6a6;
}
.ff-bookmark-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    cursor: pointer;
}
.ff-bookmark-item:hover {
    background: #316ac5;
    color: white;
}
.ff-bookmark-item::before {
    content: '⭐';
    font-size: 10px;
}

/* Statusbar */
.ff-statusbar {
    background: var(--ff-bg);
    border-top: 1px solid #c0c0c0;
    padding: 4px 6px;
    font-size: 11px;
    display: flex;
    align-items: center;
    height: 22px;
}

.ff-status-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Viewport (Index Body) */
.ff-viewport {
    background: white !important;
    padding: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1px solid #999 !important;
    display: block !important;
}

.ff-homepage {
    max-width: 560px;
    margin: 0 auto;
    padding: 28px 20px 36px;
    font: 13px/1.6 Tahoma, "MS Sans Serif", sans-serif;
    color: #1a1a1a;
    text-align: center;
}

.ff-homepage-title {
    margin: 0 0 10px;
    font-size: 26px;
    color: #003399;
    letter-spacing: -0.5px;
}

.ff-homepage-tagline {
    margin: 0 0 18px;
    color: #444;
}

.ff-homepage-list {
    margin: 0 auto 22px;
    padding: 12px 18px;
    max-width: 420px;
    list-style: none;
    text-align: left;
    border: 1px solid #b7c9e3;
    background: #f3f7fd;
}

.ff-homepage-list li::before {
    content: "► ";
    color: #003399;
}

.ff-homepage-list li + li {
    margin-top: 6px;
}

.ff-homepage-construction {
    margin: 0 0 8px;
    font-weight: bold;
    color: #b00;
    background: repeating-linear-gradient(45deg, #ffe97f 0 12px, #2b2b2b00 12px 24px);
    padding: 4px 8px;
    display: inline-block;
}

.ff-homepage-counter {
    margin: 0;
    font-size: 11px;
    color: #777;
}

/* Reuse dots for PIN */
.lockscreen-dots {
    display: flex;
    gap: 6px;
    background: white;
    padding: 4px;
    border-radius: 3px;
    border: 2px solid #002277;
    height: 24px;
}
.lockscreen-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid grey;
}
.lockscreen-dot.is-filled {
    background: black;
}

#lockscreen-error {
    color: #ffe1cf;
    font-size: 12px;
    margin: 0;
    min-height: 16px;
    position: relative;
    z-index: 1;
}

.xp-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: min(100%, 278px);
    padding: 14px;
    margin-left: 82px;
    background:
        linear-gradient(180deg, rgba(227,238,255,0.3) 0%, rgba(112,145,213,0.2) 22%, rgba(17,48,124,0.22) 100%);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.34);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.52),
        inset 0 -14px 24px rgba(0,20,77,0.16),
        0 14px 28px rgba(0,18,72,0.2);
    position: relative;
    overflow: hidden;
}

.xp-pad::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 44%;
    background: linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.xp-pad button {
    min-height: 50px;
    background: linear-gradient(180deg, #fefefe 0%, #edf3ff 14%, #d2def7 52%, #bfd0ef 100%);
    border: 1px solid #7294cb;
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    border-radius: 12px;
    padding: 10px 0;
    font-family: Tahoma, sans-serif;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        inset 0 -1px 0 rgba(112,144,206,0.24),
        0 2px 4px rgba(0,0,0,0.18);
    color: #18396d;
    position: relative;
    z-index: 1;
}

.xp-pad button:hover {
    background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 18%, #dce8fb 58%, #c8d8f4 100%);
}

.xp-pad button.lockscreen-key-action {
    background: linear-gradient(180deg, #fff5db 0%, #f6dfa0 45%, #efcc74 100%);
    border-color: #bd9650;
    color: #6d4700;
}

.xp-welcome-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.xp-action {
    appearance: none;
    border: 0;
    color: #fff;
    min-height: 44px;
    padding: 0 16px 0 10px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: bold 13px Tahoma, sans-serif;
    text-shadow: 0 1px 1px rgba(0,0,0,0.45);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.42),
        0 3px 7px rgba(0,0,0,0.28);
    cursor: pointer;
}

.xp-action-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.34);
    font-size: 15px;
}

.xp-action--danger {
    background: linear-gradient(180deg, #f97248 0%, #d94d1f 52%, #af2609 100%);
}

.xp-action--safe {
    background: linear-gradient(180deg, #70b8ff 0%, #2e83e7 52%, #0d57b6 100%);
}

.xp-action--accent {
    background: linear-gradient(180deg, #8ed15b 0%, #4f9f2a 54%, #347515 100%);
}

.xp-action:hover {
    filter: brightness(1.06);
}

.xp-action:active {
    transform: translateY(1px);
}

.xp-action-label {
    white-space: nowrap;
}

/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
    .page-shell {
        padding: 8px 8px calc(var(--taskbar-height) + 8px);
    }

    .desktop-window {
        width: 100% !important;
        height: calc(var(--app-height) - var(--taskbar-height)) !important;
        left: 0 !important;
        top: 0 !important;
        border-radius: 0;
        border-width: 0;
        border-top: 2px solid #005ce6;
        overflow: hidden;
        max-width: 100vw;
        max-height: calc(var(--app-height) - var(--taskbar-height));
        display: flex;
        flex-direction: column;
    }

    .title-bar {
        border-radius: 0;
    }

    .window-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

    /* Hide resize handle - windows are full-screen on mobile */
    .window-resize-handle {
        display: none !important;
    }

    /* Desktop icons - horizontal row at top */
    .desktop-icons {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        left: 8px;
        top: 6px;
        right: 8px;
        z-index: 3;
    }

    /* ── Firefox UI ─────────────────────────────────────────────── */

    .ff-toolbar {
        flex-wrap: wrap;
        gap: 4px;
        padding: 4px 6px;
    }

    /* Hide search bar - no space on mobile */
    .ff-searchbar-container {
        display: none;
    }

    /* Address bar stretches to fill freed space */
    .ff-addressbar-container {
        flex: 1;
        min-width: 0;
    }

    /* Bookmarks scroll horizontally instead of wrapping */
    .ff-bookmarks {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        gap: 8px;
    }
    .ff-bookmarks::-webkit-scrollbar {
        display: none;
    }

    /* ── Taskbar ────────────────────────────────────────────────── */

    .taskbar {
        height: 30px;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .start-button {
        height: 30px;
        margin-top: -4px;
        margin-bottom: -4px;
        margin-left: -4px;
        min-width: 80px;
        flex-shrink: 0;
        clip-path: inset(0 6% 0 0 round 0 8px 8px 0);
    }

    /* Task buttons area - clip overflow, don't wrap */
    .taskbar-apps {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        display: flex;
        gap: 2px;
    }

    .task-button {
        min-width: 0;
        flex-shrink: 1;
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 8px;
        font-size: 10px;
    }

    .clock-box {
        flex-shrink: 0;
        padding: 0 10px;
        font-size: 11px;
        min-width: auto;
    }

    /* ── XP Welcome / Lockscreen ────────────────────────────────── */

    /* Reduce top/bottom stripe height */
    .xp-welcome-top,
    .xp-welcome-bottom {
        min-height: 48px;
        padding-inline: 16px;
    }

    .xp-welcome-center {
        flex-direction: column;
        justify-content: flex-start;
        padding: 20px 16px 18px;
        overflow-y: auto;
        gap: 18px;
    }

    .xp-welcome-left {
        align-items: center;
        text-align: center;
        max-width: 100%;
    }

    .xp-brand-panel {
        min-height: 0;
        width: 100%;
        padding: 16px 18px;
    }

    .xp-logo {
        font-size: 28px;
    }

    .xp-subtitle {
        font-size: 14px;
        margin-top: 6px;
    }

    .xp-welcome-divider {
        width: min(100%, 280px);
        height: 2px;
        min-height: 0;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.5) 20%, rgba(255,255,255,0.5) 80%, transparent);
        align-self: center;
    }

    .xp-welcome-right {
        align-items: center;
        gap: 14px;
        width: 100%;
        max-width: 360px;
    }

    .xp-user-row {
        width: 100%;
        padding: 14px;
        gap: 12px;
        align-items: flex-start;
    }

    .xp-avatar {
        width: 56px;
        height: 56px;
    }

    .xp-user-login {
        width: 100%;
    }

    .xp-pad {
        width: 100%;
        max-width: 280px;
        gap: 8px;
        padding: 12px;
        margin-left: 0;
    }

    .xp-pad button {
        padding: 12px 0;
        font-size: 18px;
        min-height: 48px;
    }

    .xp-welcome-actions {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        gap: 8px;
        flex-wrap: wrap;
    }

    .xp-action {
        min-height: 40px;
        padding: 0 14px 0 8px;
        font-size: 12px;
    }

    .xp-action-badge {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .xp-welcome-top,
    .xp-welcome-bottom {
        min-height: 42px;
    }

    .xp-logo {
        font-size: 24px;
    }

    .xp-welcome-center {
        padding: 16px 12px 14px;
    }

    .xp-subtitle {
        font-size: 13px;
    }

    .xp-username {
        font-size: 18px;
    }

    .xp-instruction {
        font-size: 12px;
    }

    .xp-pad {
        max-width: 100%;
        gap: 6px;
    }

    .xp-brand-panel,
    .xp-user-row {
        padding: 12px 14px;
        border-radius: 14px;
    }

    .xp-action {
        width: 100%;
        justify-content: flex-start;
    }

    .ff-menubar {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        font-size: 10px;
    }
    .ff-menubar::-webkit-scrollbar {
        display: none;
    }

    .ff-btn {
        width: 28px;
        height: 28px;
    }

    .task-button {
        max-width: 100px;
        font-size: 9px;
        padding: 0 6px;
    }

    .start-button {
        padding: 0 8px 0 6px;
        font-size: 13px;
    }
}

@media (max-width: 1024px) and (orientation: landscape) {
    .desktop-window {
        height: calc(var(--app-height) - var(--taskbar-height)) !important;
    }

    .xp-welcome-top,
    .xp-welcome-bottom {
        min-height: 36px;
    }

    .xp-welcome-center {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 14px 20px;
        gap: 18px;
    }

    .xp-welcome-left,
    .xp-welcome-right {
        flex: 1 1 0;
        max-width: 360px;
    }

    .xp-welcome-left {
        align-items: stretch;
        text-align: right;
    }

    .xp-welcome-divider {
        width: 2px;
        min-height: 120px;
        height: auto;
    }

    .xp-user-row {
        max-width: 100%;
    }

    .xp-pad {
        max-width: 240px;
    }

    .xp-brand-panel {
        max-width: 360px;
    }

}

/* LOCKSCREEN REDESIGN OVERRIDES */
.xp-welcome {
    justify-content: stretch;
    background:
        radial-gradient(circle at 50% 18%, rgba(180, 214, 255, 0.2) 0%, rgba(180, 214, 255, 0) 28%),
        linear-gradient(180deg, #0d2f86 0%, #1b55c7 42%, #0f3f9d 100%);
}

.xp-welcome-top,
.xp-welcome-bottom {
    min-height: 42px;
    flex: 0 0 auto;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.04) 22%, rgba(0,0,0,0.08) 100%),
        linear-gradient(180deg, #0a2c78 0%, #1348ad 100%);
}

.xp-welcome-bottom {
    display: none;
}

.xp-welcome-center {
    flex: 1 1 auto;
    padding: 24px;
    overflow: auto;
}

.xp-welcome-center::before,
.xp-welcome-left,
.xp-welcome-right,
.xp-welcome-divider,
.xp-welcome-actions {
    display: none !important;
}

.xp-welcome-shell {
    width: min(100%, 920px);
    margin: auto;
    display: grid;
    grid-template-columns: minmax(240px, 0.92fr) minmax(320px, 1.08fr);
    gap: clamp(18px, 3vw, 34px);
    align-items: stretch;
}

.xp-brand-panel,
.xp-login-card {
    min-width: 0;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.34);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -18px 30px rgba(7,30,105,0.16),
        0 24px 40px rgba(5,18,74,0.24);
    overflow: hidden;
    position: relative;
}

.xp-brand-panel {
    min-height: 0;
    padding: 20px 24px 22px;
    justify-content: center;
    background:
        radial-gradient(circle at 24% 20%, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 32%),
        linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(102,146,243,0.12) 18%, rgba(17,55,144,0.22) 100%);
}

.xp-brand-panel::after {
    content: "";
    position: absolute;
    inset: auto -10% -18% auto;
    width: 240px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 66%);
    pointer-events: none;
}

.xp-logo {
    font-size: clamp(2rem, 3.4vw, 3rem);
}

.xp-subtitle {
    max-width: 20rem;
    font-size: clamp(0.9rem, 1.3vw, 1rem);
    margin-top: 6px;
}

.xp-login-card {
    padding: 22px;
    display: grid;
    gap: 18px;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 28%),
        linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(98,140,236,0.18) 16%, rgba(8,35,111,0.22) 100%);
}

.xp-user-row {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(129,169,255,0.16) 18%, rgba(20,52,130,0.18) 100%);
}

.xp-user-login {
    gap: 8px;
}

.xp-username {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.xp-pin-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.xp-instruction {
    font-size: 11px;
}

.lockscreen-dots {
    min-height: 28px;
    padding: 6px 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fefefe 0%, #dfe8fb 100%);
    border: 1px solid #6f8fc8;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        inset 0 -1px 0 rgba(110,141,204,0.18);
}

.lockscreen-dot {
    width: 11px;
    height: 11px;
    border-color: #86a1cf;
    background: rgba(255,255,255,0.55);
}

.lockscreen-dot.is-filled {
    background: linear-gradient(180deg, #1c4cac 0%, #0a2c79 100%);
    border-color: #12397d;
}

.xp-pad {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 16px;
    gap: 12px;
    border-radius: 18px;
}

.xp-pad button {
    min-height: 54px;
    border-radius: 14px;
    font-size: 20px;
}

#lockscreen-error {
    min-height: 18px;
}

@media (max-width: 900px) {
    .xp-welcome-shell {
        grid-template-columns: 1fr;
        width: min(100%, 560px);
    }

    .xp-brand-panel,
    .xp-login-card {
        border-radius: 20px;
    }
}

@media (max-width: 768px) {
    .xp-welcome-top,
    .xp-welcome-bottom {
        min-height: 24px;
    }

    .xp-welcome-center {
        padding: 12px;
    }

    .xp-welcome-shell {
        gap: 12px;
        width: min(100%, 420px);
    }

    .xp-brand-panel {
        padding: 14px 16px 16px;
    }

    .xp-login-card {
        padding: 14px;
        gap: 12px;
    }

    .xp-user-row {
        padding: 14px;
        gap: 12px;
    }

    .xp-avatar {
        width: 56px;
        height: 56px;
    }

    .xp-pad {
        padding: 12px;
        gap: 10px;
    }

    .xp-pad button {
        min-height: 50px;
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .xp-welcome-center {
        padding: 10px;
    }

    .xp-brand-panel,
    .xp-login-card,
    .xp-user-row {
        border-radius: 16px;
    }

    .xp-brand-panel {
        padding: 13px 14px 14px;
    }

    .xp-login-card {
        padding: 12px;
    }

    .xp-user-row {
        grid-template-columns: 1fr;
        display: grid;
        justify-items: start;
    }

    .xp-user-login {
        width: 100%;
    }

    .xp-pad {
        gap: 8px;
    }
}

/* CROSS-BROWSER RESPONSIVE HARDENING */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

@supports (height: 100dvh) {
    :root {
        --app-height: 100dvh;
    }
}

html,
body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    min-height: var(--app-height);
}

.page-shell {
    min-height: calc(var(--app-height) - var(--taskbar-height) - var(--safe-bottom));
    padding:
        max(20px, var(--safe-top))
        max(20px, var(--safe-right))
        calc(var(--taskbar-height) + var(--safe-bottom) + 16px)
        max(20px, var(--safe-left));
}

.window-body,
.ff-viewport,
.explorer-body,
.doom-body,
.screensaver-body,
.sysinfo-body {
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.ff-menubar,
.ff-toolbar,
.ff-bookmarks,
.ff-statusbar {
    flex-shrink: 0;
}

/* XP SYSTEM PROPERTIES - MY COMPUTER */
.xp-explorer-chrome--computer {
    background:
        linear-gradient(180deg, #f7f4eb 0%, #ece9d8 42%, #e2dcc9 100%);
    border-bottom: 1px solid #b9b7aa;
}

.xp-explorer-menubar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 3px 8px 4px;
    font: 11px Tahoma, sans-serif;
    color: #243956;
    border-bottom: 1px solid rgba(184, 180, 163, 0.65);
    background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.18) 100%);
}

.xp-explorer-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 6px;
    border-top: 1px solid rgba(255,255,255,0.65);
    border-bottom: 1px solid #d5d0be;
    background: linear-gradient(180deg, rgba(255,255,255,0.58) 0%, rgba(236,233,216,0.35) 100%);
}

.xp-explorer-nav,
.xp-explorer-action {
    appearance: none;
    min-height: 32px;
    border-radius: 3px;
    font: 11px Tahoma, sans-serif;
    color: #203d69;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.xp-explorer-nav {
    min-width: 58px;
    min-height: 46px;
    padding: 4px 8px 3px;
    font-weight: 700;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    border-radius: 2px;
}

.xp-explorer-nav:disabled {
    opacity: 0.55;
    color: #7d8ea7;
}

.xp-explorer-nav .xp-explorer-icon {
    margin: 0 auto;
}

.xp-explorer-nav span:last-child {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1;
}

.xp-explorer-action {
    min-width: 66px;
}

.xp-explorer-separator {
    width: 1px;
    align-self: stretch;
    margin: 2px 3px;
    background: linear-gradient(180deg, #ffffff 0%, #c6c1ae 100%);
}

.xp-explorer-nav:not(:disabled):hover,
.xp-explorer-action:hover {
    border-color: #9eb6d8;
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(222,232,248,0.9) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
}

.xp-explorer-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    position: relative;
    display: inline-block;
}

.xp-explorer-icon::before,
.xp-explorer-icon::after {
    content: "";
    position: absolute;
}

.xp-explorer-icon--back::before,
.xp-explorer-icon--forward::before,
.xp-explorer-icon--up::before {
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(180deg, #baf574 0%, #4ca635 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.xp-explorer-icon--back::before {
    left: 2px;
}

.xp-explorer-icon--forward::before,
.xp-explorer-icon--up::before {
    left: 2px;
}

.xp-explorer-icon--back::after {
    left: 5px;
    top: 5px;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-right: 5px solid #fff;
}

.xp-explorer-icon--forward::after {
    left: 7px;
    top: 5px;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 5px solid #fff;
}

.xp-explorer-icon--up::after {
    left: 5px;
    top: 4px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid #fff;
}

.xp-explorer-icon--search {
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #cbe0ff 38%, #5d8fda 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
}

.xp-explorer-icon--search::after {
    width: 7px;
    height: 2px;
    right: -1px;
    bottom: 1px;
    background: #d8912a;
    transform: rotate(45deg);
    border-radius: 2px;
}

.xp-explorer-icon--folders {
    border-radius: 3px;
    background: linear-gradient(180deg, #ffd76c 0%, #d39a1f 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}

.xp-explorer-icon--folders::before {
    left: 1px;
    top: -1px;
    width: 8px;
    height: 5px;
    border-radius: 2px 2px 0 0;
    background: #f9e08f;
}

.xp-explorer-icon--views {
    background:
        linear-gradient(90deg, #4b8df0 0 4px, transparent 4px 6px, #4b8df0 6px 10px, transparent 10px 12px, #4b8df0 12px 16px),
        linear-gradient(180deg, #cfe0fb 0%, #7ea5ea 100%);
    border-radius: 3px;
}

.xp-explorer-addressrow {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
}

.xp-explorer-label {
    font: 11px Tahoma, sans-serif;
    color: #4f5f75;
}

.xp-explorer-addressbox {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 7px;
    border: 1px solid #7f9db9;
    border-top-color: #7b7b73;
    border-left-color: #7b7b73;
    background: #fff;
    font: 12px Tahoma, sans-serif;
    color: #213248;
}

.xp-explorer-addresstext {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sysinfo-body {
    padding: 0;
    background:
        linear-gradient(180deg, #f4f7fc 0%, #e8eef8 100%);
}

.sysinfo-xp {
    max-width: none;
    gap: 14px;
    padding: 18px;
    font: 12px/1.45 Tahoma, sans-serif;
    color: #213248;
    min-width: 0;
}

.sysinfo-xp-hero,
.sysinfo-xp-panel {
    border: 1px solid #7f9db9;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(227,236,249,0.96) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        0 2px 8px rgba(55, 88, 138, 0.08);
    min-width: 0;
}

.sysinfo-xp-hero {
    display: grid;
    grid-template-columns: minmax(240px, 0.88fr) minmax(0, 1.12fr);
    overflow: hidden;
}

.sysinfo-xp-edition {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 18px;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 35%),
        linear-gradient(180deg, #3c78d9 0%, #2c63c0 56%, #2354ab 100%);
    color: #fff;
}

.sysinfo-bigicon-xp {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,0.95) 0 10%, rgba(255,255,255,0) 11%),
        linear-gradient(180deg, #9fd0ff 0%, #dceeff 32%, #7bb2ff 33%, #3f79e1 100%);
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.75),
        0 6px 16px rgba(0,0,0,0.18);
}

.sysinfo-bigicon-xp::before {
    top: 8px;
    left: 10px;
    width: 36px;
    height: 24px;
    border-radius: 4px 4px 5px 5px;
    background: linear-gradient(180deg, #0f3279 0%, #5bc0ff 58%, #14315e 100%);
    border-top: 1px solid rgba(255,255,255,0.9);
    border-left: 1px solid rgba(255,255,255,0.9);
    border-right: 1px solid rgba(21,47,99,0.7);
    border-bottom: 1px solid rgba(21,47,99,0.7);
    box-shadow: inset 0 0 0 2px rgba(180, 233, 255, 0.65);
}

.sysinfo-bigicon-xp::after {
    bottom: 10px;
    left: 16px;
    width: 24px;
    height: 12px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, #f6fafc 0%, #a3bde2 100%);
    border-top: 1px solid rgba(255,255,255,0.95);
    border-left: 1px solid rgba(255,255,255,0.95);
    border-right: 1px solid rgba(48,75,124,0.55);
    border-bottom: 1px solid rgba(48,75,124,0.55);
    clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
}

.sysinfo-xp-edition-copy {
    min-width: 0;
}

.sysinfo-xp-kicker {
    margin: 0 0 4px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
}

.sysinfo-xp .sysinfo-product {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.95rem);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.28);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.sysinfo-xp .sysinfo-ver {
    margin-top: 6px;
    color: rgba(255,255,255,0.92);
    font-size: 12px;
}

.sysinfo-xp-summary {
    display: grid;
    gap: 14px;
    align-content: center;
    padding: 18px 20px;
    min-width: 0;
}

.sysinfo-xp .sysinfo-copy {
    margin: 0;
    font-size: 12px;
    color: #34506f;
    overflow-wrap: anywhere;
}

.sysinfo-xp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sysinfo-xp-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #dbe8fb 100%);
    border: 1px solid #9fb8dc;
    color: #29538d;
    font-size: 11px;
    font-weight: 700;
}

.sysinfo-xp-panel {
    padding: 16px 18px 18px;
}

.sysinfo-xp-panel-heading {
    margin-bottom: 12px;
}

.sysinfo-xp-panel-heading h3 {
    margin: 0;
    font-size: 1rem;
    color: #204a86;
    overflow-wrap: anywhere;
}

.sysinfo-xp-panel-heading p {
    margin: 3px 0 0;
    font-size: 11px;
    color: #5d7698;
    overflow-wrap: anywhere;
}

.sysinfo-registration-xp {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
}

.sysinfo-registration-xp > div {
    padding: 10px 12px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #edf3fd 100%);
    border: 1px solid #c7d7ed;
    min-width: 0;
}

.sysinfo-xp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sysinfo-xp-specs {
    display: grid;
    gap: 8px;
}

.sysinfo-xp .sysinfo-row {
    grid-template-columns: 128px 1fr;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid rgba(123, 157, 204, 0.22);
}

.sysinfo-xp .sysinfo-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.sysinfo-xp .sysinfo-key {
    color: #4e6584;
    font-weight: 700;
}

.sysinfo-xp .sysinfo-val {
    color: #23344e;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sysinfo-xp-metrics {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 9px;
}

.sysinfo-xp-metrics li {
    color: #2a3b54;
}

.sysinfo-xp-projects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sysinfo-xp-project {
    padding: 12px 13px;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(235,242,252,0.98) 100%);
    border: 1px solid #c6d6ec;
    min-width: 0;
}

.sysinfo-xp-project h4 {
    margin: 0 0 6px;
    font-size: 14px;
    color: #244e8a;
    overflow-wrap: anywhere;
}

.sysinfo-xp-project p {
    margin: 0;
    font-size: 12px;
    color: #425a78;
    overflow-wrap: anywhere;
}

.playground-body {
    padding: 10px;
    background:
        linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
}

.playground-folder-view {
    min-height: 100%;
    padding: 16px 14px 20px;
    border: 1px solid #bfcde2;
    background: #fff;
}

.playground-grid {
    min-height: 0;
    margin-bottom: 0;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 18px 12px;
}

.playground-app-icon {
    width: 100%;
    min-height: 92px;
    align-content: start;
    justify-items: center;
    padding: 10px 4px;
}

.playground-app-icon .desktop-icon-art {
    width: 48px;
    height: 48px;
}

.playground-app-icon .desktop-icon-label-dark {
    max-width: 88px;
    text-align: center;
    line-height: 1.15;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 2px;
    color: #1f2f4f;
    font: 11px/1.2 Tahoma, sans-serif;
    text-shadow: 0 1px 0 rgba(255,255,255,0.72);
    letter-spacing: 0.01em;
}

.playground-app-icon:hover .desktop-icon-label-dark {
    color: #173055;
    background: rgba(169, 201, 241, 0.28);
}

.playground-app-icon:focus-visible .desktop-icon-label-dark,
.playground-app-icon.is-selected .desktop-icon-label-dark {
    color: #fff;
    text-shadow: none;
    background: linear-gradient(180deg, #3b7ddd 0%, #1f5fbf 100%);
    border-color: rgba(255,255,255,0.85);
    outline: 1px dotted rgba(255,255,255,0.95);
    outline-offset: -3px;
}

.playground-empty {
    margin: 0;
    padding: 18px 0 0;
    font: 11px Tahoma, sans-serif;
    color: #5a6f8d;
}

.taskbar {
    padding-bottom: var(--safe-bottom);
    min-height: calc(var(--taskbar-height) + var(--safe-bottom));
}

.taskbar-apps {
    scrollbar-width: none;
}

.taskbar-apps::-webkit-scrollbar,
.ff-menubar::-webkit-scrollbar,
.ff-bookmarks::-webkit-scrollbar {
    display: none;
}

button,
.desktop-icon,
.task-button {
    touch-action: manipulation;
}

@media (max-width: 1024px), ((hover: none) and (pointer: coarse)) {
    body {
        background-attachment: scroll;
    }

    .window-edge-handle {
        display: none;
    }

    .page-shell {
        padding:
            max(8px, var(--safe-top))
            max(8px, var(--safe-right))
            calc(var(--taskbar-height) + var(--safe-bottom) + 8px)
            max(8px, var(--safe-left));
    }

    .desktop-window {
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100vw;
        height: calc(var(--app-height) - var(--taskbar-height) - var(--safe-bottom)) !important;
        max-height: calc(var(--app-height) - var(--taskbar-height) - var(--safe-bottom));
        border-radius: 12px 12px 0 0;
        border-width: 2px 0 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .desktop-window.is-maximized {
        border-radius: 12px 12px 0 0 !important;
    }

    .title-bar {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

    .window-body {
        flex: 1 1 auto;
        overflow: auto;
    }

    .window-resize-handle {
        display: none !important;
    }

    .desktop-icons {
        top: max(6px, var(--safe-top));
        left: max(6px, var(--safe-left));
        right: max(6px, var(--safe-right));
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .desktop-icon {
        width: 72px;
    }

    .taskbar-apps {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .task-button {
        min-width: 88px;
        max-width: 160px;
        flex-shrink: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .clock-box {
        padding-inline: 8px;
    }

    .explorer-panel,
    .screensaver-body {
        display: block;
    }

    .explorer-sidebar,
    .screensaver-sidebar {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid rgba(40, 70, 120, 0.35);
    }
}

@media (min-width: 700px) and (max-width: 1180px) and (orientation: landscape) {
    .xp-welcome-shell {
        width: min(100%, 760px);
        grid-template-columns: minmax(220px, 0.85fr) minmax(320px, 1fr);
    }
}

@media (max-width: 980px) {
    .sysinfo-xp-hero,
    .sysinfo-xp-grid,
    .sysinfo-xp-projects,
    .sysinfo-registration-xp {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .xp-explorer-menubar {
        gap: 12px;
        overflow-x: auto;
        white-space: nowrap;
    }

    .xp-explorer-toolbar {
        flex-wrap: wrap;
    }

    .xp-explorer-addressrow {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .sysinfo-xp {
        padding: 12px;
        gap: 10px;
    }

    .sysinfo-xp-hero,
    .sysinfo-xp-panel {
        border-radius: 8px;
    }

    .sysinfo-xp-edition,
    .sysinfo-xp-summary,
    .sysinfo-xp-panel {
        padding: 12px;
    }

    .sysinfo-xp .sysinfo-row {
        grid-template-columns: 1fr;
        gap: 3px;
        padding: 7px 0;
    }

    .sysinfo-bigicon-xp {
        width: 50px;
        height: 50px;
    }

    .sysinfo-bigicon-xp::before {
        top: 7px;
        left: 9px;
        width: 32px;
        height: 21px;
    }

    .sysinfo-bigicon-xp::after {
        left: 14px;
        width: 22px;
        height: 11px;
    }
}

/* ═══════════ ČÁST 3: ENGINE — BOOT, CRT MONITOR, START MENU ═══════════ */

/* ── Místnost / scéna ─────────────────────────────────────── */

body {
    background: radial-gradient(circle at 50% 35%, #23262d 0%, #0b0c0f 70%);
    overflow: hidden;
}

.scene {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    perspective: 2200px;
    position: relative;
    overflow: visible;
}

.scene-hint {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    margin: 0;
    font: 11px Tahoma, sans-serif;
    color: #6b7280;
    z-index: 5;
    pointer-events: none;
    transition: opacity 0.3s;
}

.scene-hint kbd {
    border: 1px solid #4b5563;
    border-radius: 3px;
    padding: 0 4px;
    font-family: inherit;
    color: #9ca3af;
}

body[data-pov="zoom"] .scene-hint {
    opacity: 0;
}

/* ── 3D CRT monitor ───────────────────────────────────────── */
/* Rozměry musí sedět s konstantami v js/monitor.js:
   BOX_W 1220 / BOX_H 1040 / BOX_D 560, obrazovka 1024×768 */

.monitor {
    transform-style: preserve-3d;
    transform-origin: center center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1220px;
    height: 1040px;
    margin-left: -610px;
    margin-top: -520px;
    transition: transform 0.06s ease-out;
}

.monitor.is-zoomed {
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.monitor-face {
    position: absolute;
    backface-visibility: hidden;
    background: #cbb982;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

/* špína a zrno na plastu */
.monitor-face::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(circle at 20% 20%, rgba(101, 67, 33, 0.2) 0%, transparent 20%),
        radial-gradient(circle at 80% 80%, rgba(101, 67, 33, 0.25) 0%, transparent 25%),
        radial-gradient(circle at 50% 50%, transparent 50%, rgba(120, 100, 50, 0.2) 100%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.monitor-face--front {
    width: 1220px;
    height: 1040px;
    transform: translateZ(280px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 48px;
    box-sizing: border-box;
    pointer-events: none;
}

.monitor-face--front::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow:
        inset 4px 4px 8px rgba(255, 255, 255, 0.4),
        inset -4px -4px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 2;
}

.monitor-face--back {
    width: 1220px;
    height: 1040px;
    transform: rotateY(180deg) translateZ(280px);
    background-image: linear-gradient(to bottom, transparent 80%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0.1) 90%, rgba(255, 255, 255, 0.2) 90%);
    background-size: 100% 20px;
}

.monitor-face--right,
.monitor-face--left {
    width: 560px;
    height: 1040px;
    left: 330px;
}

.monitor-face--right { transform: rotateY(90deg) translateZ(610px); }
.monitor-face--left  { transform: rotateY(-90deg) translateZ(610px); }

.monitor-face--right::after,
.monitor-face--left::after {
    content: "";
    position: absolute;
    top: 120px;
    bottom: 120px;
    left: 90px;
    right: 90px;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 14px,
        rgba(40, 35, 30, 0.4) 14px,
        rgba(40, 35, 30, 0.4) 18px,
        rgba(255, 255, 255, 0.3) 18px,
        rgba(255, 255, 255, 0.3) 19px
    );
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.monitor-face--top,
.monitor-face--bottom {
    width: 1220px;
    height: 560px;
    top: 240px;
}

.monitor-face--top    { transform: rotateX(90deg) translateZ(520px); }
.monitor-face--bottom { transform: rotateX(-90deg) translateZ(520px); box-shadow: 0 60px 80px rgba(0, 0, 0, 0.6); }

.monitor-face--top::after {
    content: "";
    position: absolute;
    top: 60px;
    bottom: 60px;
    left: 120px;
    right: 120px;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 14px,
        rgba(40, 35, 30, 0.4) 14px,
        rgba(40, 35, 30, 0.4) 18px,
        rgba(255, 255, 255, 0.3) 18px,
        rgba(255, 255, 255, 0.3) 19px
    );
}

.monitor-bezel {
    width: 1072px;
    height: 816px;
    background: #111;
    border: 24px solid #cbb982;
    border-radius: 10px;
    box-sizing: content-box;
    box-shadow: inset 10px 10px 20px rgba(60, 40, 0, 0.6);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    pointer-events: auto;
}

.monitor-chin {
    width: 1024px;
    height: 110px;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
    pointer-events: auto;
}

.monitor-chin-door {
    width: 520px;
    height: 52px;
    background: #cbb982;
    border-radius: 2px;
    border-top: 3px solid rgba(255, 255, 255, 0.35);
    border-left: 3px solid rgba(255, 255, 255, 0.35);
    border-bottom: 3px solid rgba(0, 0, 0, 0.25);
    border-right: 3px solid rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 15px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.monitor-chin-door::after {
    content: "PUSH";
    font: bold 10px sans-serif;
    color: #8a7f66;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.monitor-chin-power {
    display: flex;
    align-items: center;
    gap: 22px;
}

.monitor-led {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff8c00;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 4px #ff8c00, inset 1px 1px 2px rgba(255, 255, 255, 0.8);
    transition: background 0.3s, box-shadow 0.3s;
}

body.is-powered .monitor-led {
    background: #33ff33;
    box-shadow: 0 0 8px #33ff33, inset 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.monitor-power-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    background: radial-gradient(circle at 35% 35%, #e6dbc4 0%, #c4b595 100%);
    border: 4px solid;
    border-color: rgba(255, 255, 255, 0.45) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.45);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2), inset 1px 1px 2px rgba(255, 255, 255, 0.5);
    animation: power-pulse 2s infinite;
}

body.is-powered .monitor-power-btn {
    animation: none;
}

.monitor-power-btn:active {
    transform: scale(0.95);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

@keyframes power-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.45); }
    70% { box-shadow: 0 0 0 14px rgba(255, 140, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0); }
}

.monitor-stand-neck {
    position: absolute;
    width: 110px;
    height: 120px;
    background: linear-gradient(to right, #9f957f 0%, #cbb982 25%, #cbb982 75%, #9f957f 100%);
    left: 50%;
    margin-left: -55px;
    top: 1024px;
    transform: translateZ(90px);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: inset 2px 0 3px rgba(255, 255, 255, 0.25), inset -2px 0 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.monitor-stand-base {
    position: absolute;
    width: 560px;
    height: 380px;
    background: radial-gradient(circle at 50% 40%, #cbb982 0%, #c4b89a 60%, #a8a08c 100%);
    border-radius: 50%;
    left: 50%;
    margin-left: -280px;
    top: 1084px;
    transform-origin: center top;
    transform: rotateX(70deg);
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow:
        inset 0 10px 20px rgba(255, 255, 255, 0.5),
        inset 0 -10px 30px rgba(0, 0, 0, 0.2),
        0 40px 60px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

/* ── Obrazovka ────────────────────────────────────────────── */

.screen {
    width: 1024px;
    height: 768px;
    background: #000;
    position: relative;
    overflow: hidden;
    /* vlastní transform => containing block pro position:fixed potomky */
    transform: translateZ(0);
    --app-height: 100%;
    filter: contrast(1.06) brightness(1.08) saturate(1.12);
}

body[data-phase="desktop"] .screen {
    background: #000;
}

/* desktopová tapeta patří na page-shell, ne na body */
.page-shell {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: auto;
    padding: 0;
    display: block;
    background: url('../assets/bliss.png') center center / cover no-repeat;
}

/* ── Fázový automat ───────────────────────────────────────── */

.bios, .xpboot { display: none; }

body[data-phase="bios"] .bios { display: flex; }
body[data-phase="xpboot"] .xpboot { display: flex; }

.lockscreen { display: none; }
body[data-phase="welcome"] .lockscreen { display: flex; }

.page-shell, .taskbar { visibility: hidden; }
body[data-phase="desktop"] .page-shell,
body[data-phase="desktop"] .taskbar { visibility: visible; }

/* ── BIOS POST ────────────────────────────────────────────── */

.bios {
    position: absolute;
    inset: 0;
    z-index: 200;
    background: #000;
    color: #ccc;
    font-family: "Courier New", monospace;
    font-size: 17px;
    line-height: 1.25;
    padding: 34px 38px;
    box-sizing: border-box;
    flex-direction: column;
    cursor: none;
    overflow: hidden;
    white-space: pre-wrap;
}

.bios-toprow {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 22px;
    flex-shrink: 0;
}

.bios-award {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.bios-award-logo {
    image-rendering: pixelated;
    width: 40px;
    height: auto;
}

.bios-award-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.bios-energy {
    width: 110px;
    height: auto;
    image-rendering: pixelated;
}

.bios-header {
    color: #fff;
    flex-shrink: 0;
}

.bios-log {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.bios-line { color: #ccc; }
.bios-line--white { color: #fff; }

.bios-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
    font-size: 15px;
}

/* ── Windows XP boot screen ───────────────────────────────── */

.xpboot {
    position: absolute;
    inset: 0;
    z-index: 200;
    background: #000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 56px;
    cursor: none;
}

.xpboot-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.xpboot-flag {
    display: grid;
    grid-template-columns: 34px 34px;
    grid-template-rows: 34px 34px;
    gap: 5px;
    transform: skewY(-4deg) skewX(-2deg);
    filter: drop-shadow(0 0 18px rgba(90, 130, 255, 0.25));
}

.xpboot-flag .start-logo-pane {
    width: 100%;
    height: 100%;
    border-radius: 4px 10px 4px 10px;
}

.xpboot-wordmark {
    color: #d6d6d6;
    font-family: "Franklin Gothic Medium", Tahoma, sans-serif;
    font-size: 22px;
    letter-spacing: 0.4px;
    text-align: center;
}

.xpboot-wordmark strong {
    display: block;
    font-size: 44px;
    color: #fff;
    font-weight: 600;
}

.xpboot-wordmark strong span {
    color: #ff8c00;
    font-size: 26px;
    vertical-align: super;
    margin-left: 3px;
}

.xpboot-bar {
    width: 220px;
    height: 16px;
    border: 1px solid #8a8a8a;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: #0a0a0a;
}

.xpboot-blocks {
    position: absolute;
    top: 2px;
    left: 0;
    display: flex;
    gap: 3px;
    animation: xpboot-march 1.6s linear infinite;
}

.xpboot-blocks span {
    width: 11px;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(180deg, #7ba6e8 0%, #2a5bc4 50%, #1741a0 100%);
}

@keyframes xpboot-march {
    0% { transform: translateX(-50px); }
    100% { transform: translateX(230px); }
}

.xpboot-copy {
    position: absolute;
    bottom: 26px;
    left: 0;
    right: 0;
    text-align: center;
    color: #9a9a9a;
    font: 13px Tahoma, sans-serif;
}

/* ── CRT efekty ───────────────────────────────────────────── */

.crt-overlay {
    position: absolute;
    inset: 0;
    z-index: 11000;
    pointer-events: none;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.05) 50%);
    background-size: 100% 4px;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.35);
    animation: crt-breathe 8s ease-in-out infinite;
}

.crt-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.02);
    animation: crt-flicker 0.15s infinite;
}

.crt-glare {
    position: absolute;
    inset: 0;
    z-index: 11001;
    pointer-events: none;
    background: radial-gradient(
        circle at var(--glare-x, 30%) var(--glare-y, 20%),
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0) 40%
    );
}

@keyframes crt-breathe {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(3deg); }
}

@keyframes crt-flicker {
    0% { opacity: 0.96; }
    30% { opacity: 0.9; }
    60% { opacity: 0.98; }
    100% { opacity: 0.93; }
}

/* ── Juicy load (postupné naskakování plochy) ─────────────── */

.taskbar {
    transform: translateY(120%);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.taskbar.is-booted {
    transform: translateY(0);
}

.desktop-icon {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.22s ease-out, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.desktop-icon.is-booted {
    opacity: 1;
    transform: scale(1);
}

.desktop-icon.is-dragging {
    transition: none;
}

/* ── System tray ──────────────────────────────────────────── */

.taskbar-tray {
    display: flex;
    align-items: center;
    height: 100%;
}

.tray-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.tray-icon.is-on {
    display: inline-flex;
    animation: tray-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tray-icon img {
    display: block;
}

@keyframes tray-pop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* ── Start menu (Luna) ────────────────────────────────────── */

.start-menu {
    position: fixed;
    left: 2px;
    bottom: var(--taskbar-height, 30px);
    width: 410px;
    z-index: 9000;
    display: none;
    flex-direction: column;
    border-radius: 8px 8px 0 0;
    border: 1px solid #1d3f9e;
    box-shadow: 2px -2px 14px rgba(10, 25, 65, 0.45);
    overflow: hidden;
    font-family: Tahoma, sans-serif;
    transform-origin: bottom left;
}

.start-menu.is-open {
    display: flex;
    animation: startmenu-open 0.14s ease-out;
}

@keyframes startmenu-open {
    from { transform: scaleY(0.92); opacity: 0; }
    to { transform: scaleY(1); opacity: 1; }
}

.start-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: linear-gradient(180deg, #2b71e0 0%, #1c54c4 46%, #1747ad 100%);
    border-bottom: 2px solid #e68b2c;
}

.start-menu-avatar {
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.start-menu-username {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.start-menu-columns {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    min-height: 330px;
}

.start-menu-left {
    background: #fff;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
}

.start-menu-right {
    background: #d3e5fa;
    border-left: 1px solid #95bdee;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    color: #00136b;
}

.start-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 8px;
    border: none;
    background: transparent;
    font: 12px Tahoma, sans-serif;
    color: #000;
    text-align: left;
    cursor: pointer;
    border-radius: 3px;
}

.start-menu-right .start-menu-item {
    color: #00136b;
}

.start-menu-item:hover:not(:disabled) {
    background: #316ac5;
    color: #fff;
}

.start-menu-item:hover:not(:disabled) .start-menu-copy small {
    color: #cfdef7;
}

.start-menu-item.is-disabled {
    opacity: 0.5;
    cursor: default;
}

.start-menu-item--hero {
    padding: 7px 8px;
}

.start-menu-item--hero .start-menu-ico {
    width: 30px;
    height: 30px;
}

.start-menu-ico {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.start-menu-ico--control {
    background: radial-gradient(circle at 35% 35%, #9fc1ee 0%, #3a6fc4 70%);
    border-radius: 4px;
}

.start-menu-ico--help {
    background: radial-gradient(circle at 35% 35%, #cfe3fb 0%, #6f9bd8 70%);
    border-radius: 50%;
}

.start-menu-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.start-menu-copy small {
    color: #7a7a7a;
    font-size: 10px;
}

.start-menu-sep {
    height: 1px;
    margin: 5px 8px;
    background: linear-gradient(90deg, transparent, #c9c9c9, transparent);
}

.start-menu-right .start-menu-sep {
    background: linear-gradient(90deg, transparent, #9cbdea, transparent);
}

.start-menu-spacer {
    flex: 1;
}

.start-menu-allprograms {
    justify-content: space-between;
    border-top: 1px solid #d9d9d9;
    border-radius: 0;
}

.start-menu-arrow {
    color: #2c5dbb;
}

.start-menu-allprograms:hover .start-menu-arrow {
    color: #fff;
}

.start-menu-footer {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 7px 10px;
    background: linear-gradient(180deg, #2b71e0 0%, #1c54c4 46%, #1747ad 100%);
    border-top: 1px solid #1d3f9e;
}

.start-menu-power {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font: 12px Tahoma, sans-serif;
    cursor: pointer;
}

.start-menu-power:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.12);
}

.start-menu-power-ico {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: inline-block;
}

.start-menu-power--logoff .start-menu-power-ico {
    background:
        radial-gradient(circle at 35% 35%, #ffd99a 0%, #e8a33d 60%, #b87513 100%);
}

.start-menu-power--shutdown .start-menu-power-ico {
    background:
        radial-gradient(circle at 35% 35%, #f5a9a0 0%, #d9534f 55%, #a02622 100%);
    position: relative;
}

.start-menu-power--shutdown .start-menu-power-ico::after {
    content: "⏻";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
}

/* ── Mobilní power obrazovka ──────────────────────────────── */

.mobile-power {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 12000;
    background: #000;
    border: none;
    color: #9ca3af;
    font: 14px Tahoma, sans-serif;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    cursor: pointer;
}

.mobile-power-symbol {
    font-size: 64px;
    color: #4ade80;
    text-shadow: 0 0 24px rgba(74, 222, 128, 0.45);
    animation: power-pulse-text 2s infinite;
}

@keyframes power-pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ── Mobil: bez monitoru, obrazovka přes celý viewport ────── */

@media (max-width: 820px), (pointer: coarse) {
    .scene {
        perspective: none;
    }

    .scene-hint {
        display: none;
    }

    .monitor {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        transform: none !important;
    }

    .monitor-face--back,
    .monitor-face--left,
    .monitor-face--right,
    .monitor-face--top,
    .monitor-face--bottom,
    .monitor-chin,
    .monitor-stand-neck,
    .monitor-stand-base {
        display: none;
    }

    .monitor-face--front {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        background: none;
        transform: none;
        box-shadow: none;
        display: block;
    }

    .monitor-face--front::before,
    .monitor-face--front::after {
        display: none;
    }

    .monitor-bezel {
        width: auto;
        height: auto;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .screen {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        filter: none;
    }

    body.is-mobile[data-phase="off"] .mobile-power {
        display: flex;
    }

    .start-menu {
        width: min(410px, calc(100vw - 8px));
    }
}

/* ── Minesweeper ──────────────────────────────────────────── */

.mines-window {
    width: auto;
    min-width: 0;
}

.mines-body {
    padding: 8px;
}

.mines-frame {
    background: #c0c0c0;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    border-right: 3px solid #808080;
    border-bottom: 3px solid #808080;
    padding: 8px;
}

.mines-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 7px;
    margin-bottom: 8px;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.mines-lcd {
    background: #000;
    color: #f00;
    font: bold 22px "Courier New", monospace;
    letter-spacing: 2px;
    padding: 1px 4px;
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    text-shadow: 0 0 4px rgba(255, 60, 60, 0.7);
    min-width: 54px;
    text-align: center;
}

.mines-face {
    width: 34px;
    height: 34px;
    font-size: 18px;
    line-height: 1;
    background: #c0c0c0;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    cursor: pointer;
    padding: 0;
}

.mines-face:active {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.mines-grid {
    display: grid;
    border-top: 3px solid #808080;
    border-left: 3px solid #808080;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    touch-action: manipulation;
}

.mines-cell {
    width: 30px;
    height: 30px;
    padding: 0;
    font: bold 15px Tahoma, sans-serif;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c0c0c0;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    border-right: 3px solid #808080;
    border-bottom: 3px solid #808080;
    cursor: pointer;
    user-select: none;
}

.mines-cell.is-revealed {
    border: 1px solid #9a9a9a;
    background: #c6c6c6;
    cursor: default;
}

.mines-cell.is-exploded {
    background: #e33;
}

.mines-cell[data-count="1"] { color: #0000f0; }
.mines-cell[data-count="2"] { color: #007800; }
.mines-cell[data-count="3"] { color: #e00000; }
.mines-cell[data-count="4"] { color: #00007a; }
.mines-cell[data-count="5"] { color: #7a0000; }
.mines-cell[data-count="6"] { color: #007a7a; }
.mines-cell[data-count="7"] { color: #000; }
.mines-cell[data-count="8"] { color: #6e6e6e; }

/* ── ICQ ──────────────────────────────────────────────────── */

.icq-window {
    width: 260px;
}

.icq-body {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.icq-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(180deg, #b7e07e 0%, #7cb82f 100%);
    border-bottom: 1px solid #4e7d1e;
}

.icq-header-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    font-size: 12px;
}

.icq-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #234d00;
}

.icq-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2bd42b;
    border: 1px solid #1c7a1c;
}

.icq-uin {
    margin-left: auto;
    font-size: 10px;
    color: #335c10;
}

.icq-contacts {
    background: #fff;
    padding: 6px 0;
    min-height: 170px;
    font-size: 12px;
}

.icq-group {
    padding: 3px 10px;
    font-weight: bold;
    color: #1747ad;
    background: #eef3fc;
    border-top: 1px solid #d6e2f5;
    border-bottom: 1px solid #d6e2f5;
}

.icq-contact {
    padding: 4px 10px 4px 24px;
    cursor: default;
}

.icq-contact.is-offline {
    color: #9a9a9a;
}

.icq-empty {
    margin: 0;
    padding: 8px 10px 10px 24px;
    color: #777;
    font-size: 11px;
    line-height: 1.5;
}

/* ── Winamp doplňky ───────────────────────────────────────── */

.winamp-track--clickable {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    padding: 2px 6px;
}

.winamp-track--clickable:hover {
    color: #fff;
}

.winamp-iframe-slot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.winamp-eq span {
    animation-play-state: paused;
}

.winamp-window.is-playing .winamp-eq span {
    animation: wa-eq 0.55s ease-in-out infinite alternate;
    animation-play-state: running;
}

.winamp-window.is-playing .winamp-eq span:nth-child(2n) { animation-duration: 0.42s; }
.winamp-window.is-playing .winamp-eq span:nth-child(3n) { animation-duration: 0.66s; }
.winamp-window.is-playing .winamp-eq span:nth-child(5n) { animation-duration: 0.36s; }

@keyframes wa-eq {
    from { transform: scaleY(0.35); }
    to { transform: scaleY(1.05); }
}

/* ── Ikony Start menu + titulků (CSP-safe, žádné inline styly) ── */

.smi-firefox     { background-image: url('../assets/firefox.png'); }
.smi-icq         { background-image: url('../assets/playground-icq.png'); }
.smi-doom        { background-image: url('../assets/playground-doom.png'); }
.smi-mines       { background-image: url('../assets/playground-minesweeper.png'); }
.smi-winamp      { background-image: url('../assets/playground-media-player.png'); }
.smi-screensaver { background-image: url('../assets/playground-screensavers.png'); }
.smi-computer    { background-image: url('../assets/tentopocitac.png'); }
.smi-folder      { background-image: url('../assets/slozka.png'); }

.title-icon--icq         { background-image: url('../assets/icons/icq-flower.svg'); }
.title-icon--mines       { background-image: url('../assets/playground-minesweeper.png'); }
.title-icon--mediaplayer { background-image: url('../assets/playground-media-player.png'); }