/* ============================================
   SUPERWORLD! — Mac Desktop Design System
   Shared across all pages (landing, game, dreamachine)
   ============================================ */

@font-face {
    font-family: 'ChicagoFLF';
    src: url('/static/game/fonts/ChicagoFLF.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --mac-white: #ffffff;
    --mac-black: #000000;
    --mac-font: 'ChicagoFLF', 'Chicago', 'Geneva', 'Charcoal', 'Lucida Grande', sans-serif;
}

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    font-family: var(--mac-font);
    font-size: 12px;
    cursor: default;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

/* ============================================
   MENU BAR
   ============================================ */

#menu-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 22px;
    background: var(--mac-white);
    border-bottom: 2px solid var(--mac-black);
    display: flex;
    align-items: center;
    padding: 0 8px;
    z-index: 10000;
    font-size: 12px;
    user-select: none;
    -webkit-user-select: none;
}

.menu-item {
    position: relative;
    padding: 0 10px;
    height: 100%;
    display: flex;
    align-items: center;
    cursor: default;
}

.menu-item:hover,
.menu-item.open {
    background: var(--mac-black);
    color: var(--mac-white);
}

.menu-label {
    font-size: 12px;
    white-space: nowrap;
}

.menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
    z-index: 10001;
    padding: 2px 0;
}

.menu-item.open .menu-dropdown {
    display: block;
}

.menu-option {
    padding: 2px 16px;
    font-size: 12px;
    cursor: default;
    white-space: nowrap;
    color: var(--mac-black);
}

.menu-option:hover:not(.disabled) {
    background: var(--mac-black);
    color: var(--mac-white);
}

.menu-option.disabled {
    color: #999;
}

.menu-divider {
    height: 1px;
    background: var(--mac-black);
    margin: 3px 8px;
}

#menu-right {
    margin-left: auto;
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: #333;
}

/* ============================================
   DESKTOP
   ============================================ */

#desktop {
    position: fixed;
    top: 22px; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='2' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%23fff'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23000'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
    background-size: 3px 3px;
    image-rendering: pixelated;
    overflow: hidden;
}

/* ============================================
   WINDOW CHROME
   ============================================ */

.mac-window {
    position: absolute;
    background: var(--mac-white);
    border: 2px solid var(--mac-black);
    display: flex;
    flex-direction: column;
    box-shadow: 1px 1px 0 #000;
    min-width: 100px;
    min-height: 50px;
}

.mac-window.hidden { display: none; }

.win-title-bar {
    height: 20px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--mac-black);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    cursor: grab;
    position: relative;
    background: var(--mac-white);
    user-select: none;
    -webkit-user-select: none;
}

.mac-window.active .win-title-bar {
    background: repeating-linear-gradient(
        0deg,
        var(--mac-white) 0px, var(--mac-white) 1px,
        var(--mac-black) 1px, var(--mac-black) 3px,
        var(--mac-white) 3px, var(--mac-white) 4px
    );
}

.win-close {
    width: 12px; height: 12px;
    border: 1px solid var(--mac-black);
    background: var(--mac-white);
    position: absolute;
    left: 4px;
    top: 4px;
    cursor: pointer;
}

.win-close:active {
    background: var(--mac-black);
}

.win-title-text {
    background: var(--mac-white);
    padding: 0 8px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    line-height: 18px;
}

.mac-window.active .win-title-text {
    background: var(--mac-white);
}

.win-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.win-scroll {
    overflow-y: auto;
    overflow-x: hidden;
}

.win-resize {
    position: absolute;
    bottom: 0; right: 0;
    width: 16px; height: 16px;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg, transparent 60%, var(--mac-black) 60%, var(--mac-black) 65%, transparent 65%),
        linear-gradient(135deg, transparent 70%, var(--mac-black) 70%, var(--mac-black) 75%, transparent 75%),
        linear-gradient(135deg, transparent 80%, var(--mac-black) 80%, var(--mac-black) 85%, transparent 85%);
}

/* ============================================
   DIALOG BOXES
   ============================================ */

.mac-dialog-backdrop {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9000;
    background-image: url("data:image/svg+xml,%3Csvg width='2' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='rgba(0,0,0,0.3)'/%3E%3Crect x='1' y='1' width='1' height='1' fill='rgba(0,0,0,0.3)'/%3E%3C/svg%3E");
    background-size: 2px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mac-dialog {
    background: var(--mac-white);
    border: 2px solid var(--mac-black);
    box-shadow: 3px 3px 0 #000;
    max-width: 520px;
    width: 90%;
    position: relative;
}

.mac-dialog .dialog-title-bar {
    height: 20px;
    border-bottom: 2px solid var(--mac-black);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: repeating-linear-gradient(
        0deg,
        var(--mac-white) 0px, var(--mac-white) 1px,
        var(--mac-black) 1px, var(--mac-black) 3px,
        var(--mac-white) 3px, var(--mac-white) 4px
    );
}

.mac-dialog .dialog-title-text {
    background: var(--mac-white);
    padding: 0 8px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    line-height: 18px;
}

.mac-dialog .dialog-body {
    padding: 16px 20px;
    font-size: 12px;
    line-height: 1.6;
}

.mac-dialog .dialog-body p { margin-bottom: 10px; }

.mac-dialog .dialog-buttons {
    padding: 10px 20px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.mac-dialog .dialog-input {
    width: 100%;
    border: 1px solid var(--mac-black);
    font-family: var(--mac-font);
    font-size: 14px;
    padding: 4px 8px;
    outline: none;
    margin: 8px 0;
    background: var(--mac-white);
}

.mac-dialog .dialog-input:focus {
    box-shadow: 0 0 0 1px var(--mac-black);
}

/* ============================================
   MAC BUTTONS
   ============================================ */

.mac-btn {
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
    border-radius: 4px;
    font-family: var(--mac-font);
    font-size: 12px;
    padding: 4px 12px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.mac-btn:active {
    background: var(--mac-black);
    color: var(--mac-white);
}

.mac-btn:disabled { color: #888; cursor: default; }

.mac-btn.primary {
    border-width: 2px;
    font-weight: bold;
    padding: 4px 16px;
    box-shadow: 0 0 0 1px var(--mac-black);
    border-radius: 4px;
}

.mac-btn.primary:active {
    background: var(--mac-black);
    color: var(--mac-white);
}

/* ============================================
   DESKTOP ICONS
   ============================================ */

.desktop-icon {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    width: 72px;
}

.desktop-icon:active {
    filter: invert(1);
}

.desktop-icon.selected .desktop-icon-label {
    background: var(--mac-black);
    color: var(--mac-white);
}

.desktop-icon-img {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.desktop-icon-label {
    font-family: var(--mac-font);
    font-size: 10px;
    background: var(--mac-white);
    padding: 1px 4px;
    text-align: center;
    white-space: nowrap;
}

/* ============================================
   LOADING / MISC
   ============================================ */

.loading-text {
    font-family: var(--mac-font);
    font-size: 12px;
    animation: mac-blink 1.2s step-end infinite;
}

.loading-cursor, .loading-cursor * { cursor: wait !important; }

@keyframes mac-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

#tts-indicator {
    display: none;
    position: fixed;
    bottom: 4px; right: 4px;
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
    padding: 2px 6px;
    font-size: 11px;
    z-index: 10001;
}

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

@media (max-width: 600px) {
    #desktop {
        overflow-y: auto;
    }

    .mac-window {
        position: relative !important;
        width: calc(100% - 16px) !important;
        margin: 8px auto;
        left: auto !important;
        top: auto !important;
    }

    .desktop-icon {
        position: relative !important;
    }

    #desktop.icon-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        padding: 16px;
    }
}