/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000000;
    color: #00FF00;
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    line-height: 1.6;
    height: 100vh;
    overflow: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #1a1720;
}

::-webkit-scrollbar-thumb {
    background: #3a3544;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4a4554;
}

/* Screen management */
.screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.screen.active {
    display: flex;
    opacity: 1;
}

/* ============================================
   BOOT SEQUENCE SCREEN
   ============================================ */
#boot-screen {
    background-color: #000000;
    justify-content: flex-start;
    align-items: flex-start;
}

.boot-content {
    width: 100%;
    height: 100%;
    padding: 40px;
    overflow-y: auto;
    overflow-x: hidden;
}

.boot-text {
    color: #00FF00;
    font-size: 14px;
    white-space: pre;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.2;
}

/* ============================================
   FULLSCREEN PROMPT SCREEN
   ============================================ */
#fullscreen-prompt {
    background-color: transparent;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.prompt-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.prompt-box {
    background-color: #C0C0C0;
    border: 3px solid;
    border-color: #FFFFFF #000000 #000000 #FFFFFF;
    box-shadow: 2px 2px 0px #000000;
    min-width: 400px;
    max-width: 500px;
}

.prompt-header {
    background: linear-gradient(90deg, #000080, #1084D0);
    color: #FFFFFF;
    padding: 4px 8px;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.prompt-content {
    padding: 30px 20px;
    text-align: center;
}

.prompt-content p {
    color: #000000;
    font-size: 16px;
    margin-bottom: 10px;
}

.prompt-subtitle {
    font-size: 12px;
    color: #333333;
    margin-bottom: 25px !important;
}

.prompt-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn {
    background-color: #C0C0C0;
    border: 2px solid;
    border-color: #FFFFFF #000000 #000000 #FFFFFF;
    padding: 8px 25px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    cursor: pointer;
    color: #000000;
    font-weight: bold;
    min-width: 80px;
}

.btn:hover {
    background-color: #A0A0A0;
}

.btn:active {
    border-color: #000000 #FFFFFF #FFFFFF #000000;
}

/* ============================================
   OS BOOT SCREEN - LEGENDARY DESIGN
   ============================================ */
#os-boot-screen {
    background: linear-gradient(135deg, #0a0015 0%, #1a0033 25%, #2d1b4e 50%, #1a0033 75%, #0a0015 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    padding: 60px 40px;
}

#os-boot-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(178, 75, 243, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.os-boot-content {
    text-align: center;
    width: 100%;
    max-width: 1100px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Logo Section - Neon Sign Treatment */
.os-logo {
    padding: 60px 50px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(20, 0, 40, 0.85) 100%);
    border-radius: 20px;
    border: 3px solid rgba(178, 75, 243, 0.6);
    box-shadow:
        0 12px 48px rgba(178, 75, 243, 0.4),
        0 0 80px rgba(178, 75, 243, 0.3),
        inset 0 0 60px rgba(178, 75, 243, 0.12);
    backdrop-filter: blur(15px);
    margin-bottom: 0;
}

.logo-text {
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.neon-word {
    color: #E0B3FF;
    font-size: 72px;
    font-weight: 900;
    letter-spacing: 24px;
    line-height: 1;
    text-transform: uppercase;
    padding: 10px 0;
    text-shadow:
        0 0 20px #B24BF3,
        0 0 40px #B24BF3,
        0 0 80px #B24BF3,
        0 0 120px rgba(178, 75, 243, 0.9),
        0 0 160px rgba(178, 75, 243, 0.7);
}

/* Flickering Neon Effect */
.neon-flicker .neon-word {
    animation: neonFlickerWord 4s infinite;
}

@keyframes neonFlickerWord {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow:
            0 0 20px #B24BF3,
            0 0 40px #B24BF3,
            0 0 80px #B24BF3,
            0 0 120px rgba(178, 75, 243, 0.9),
            0 0 160px rgba(178, 75, 243, 0.7),
            0 0 200px rgba(178, 75, 243, 0.5);
        opacity: 1;
        filter: brightness(1.3);
    }

    20%, 24%, 55% {
        text-shadow:
            0 0 10px #B24BF3,
            0 0 20px #B24BF3,
            0 0 40px rgba(178, 75, 243, 0.6);
        opacity: 0.75;
        filter: brightness(0.9);
    }

    22% {
        text-shadow:
            0 0 5px #B24BF3,
            0 0 10px rgba(178, 75, 243, 0.5);
        opacity: 0.6;
        filter: brightness(0.7);
    }
}

/* Boot Text Container - Premium Spacing */
.os-boot-text {
    color: #00FFFF;
    font-size: 16px;
    min-height: 280px;
    max-height: 280px;
    text-align: center;
    padding: 40px 50px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(0, 255, 255, 0.25);
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
    line-height: 2;
    letter-spacing: 0.5px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.4),
        inset 0 0 40px rgba(0, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    overflow-y: auto;
    margin-bottom: 0;
}

/* Quote Text - Elevated Typography */
.quote-text {
    color: #B24BF3;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.3px;
    text-shadow: 0 0 12px #B24BF3, 0 0 24px #B24BF3;
    animation: quoteGlow 2.5s ease-in-out infinite alternate;
    display: block;
    margin: 8px 0;
}

@keyframes quoteGlow {
    from {
        text-shadow: 0 0 8px #B24BF3, 0 0 16px #B24BF3;
    }
    to {
        text-shadow:
            0 0 16px #B24BF3,
            0 0 32px #B24BF3,
            0 0 48px rgba(178, 75, 243, 0.6),
            0 4px 24px rgba(178, 75, 243, 0.4);
    }
}

/* Loading Bar - Sophisticated Design */
.loading-bar {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    height: 40px;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(20, 0, 40, 0.9) 50%,
        rgba(0, 0, 0, 0.8) 100%);
    border: 2px solid rgba(178, 75, 243, 0.5);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(178, 75, 243, 0.3),
        inset 0 2px 8px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
}

.loading-progress {
    height: 100%;
    background: linear-gradient(90deg,
        #B24BF3 0%,
        #D896FF 25%,
        #00FFFF 50%,
        #D896FF 75%,
        #B24BF3 100%);
    background-size: 300% 100%;
    animation: progressShine 3s linear infinite;
    width: 0%;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 0 30px rgba(178, 75, 243, 0.8),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
    border-radius: 18px;
}

@keyframes progressShine {
    0% { background-position: 300% 0; }
    100% { background-position: -300% 0; }
}

/* ============================================
   MAIN SCREEN (Windows 3.1 Style)
   ============================================ */
#main-screen {
    background: #6B2D9E;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

#main-screen::before {
    content: 'MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  MAKE AI SMART  ';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    font-size: 80px;
    font-weight: bold;
    color: rgba(139, 69, 191, 0.15);
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.5;
    pointer-events: none;
    z-index: 1;
    transform: rotate(-15deg);
    font-family: 'Courier New', Courier, monospace;
}

.desktop {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 20px;
    z-index: 2;
}

/* Desktop Icons */
.desktop-icons {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: absolute;
    top: 20px;
    left: 20px;
}

/* Desktop Icons (Right side) */
.desktop-icons-right {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
}

.icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    cursor: pointer;
    padding: 8px;
    border: 2px solid transparent;
    transition: background-color 0.2s;
}

.icon:hover {
    background-color: rgba(0, 0, 128, 0.3);
    border: 2px dotted #FFFFFF;
}

.icon.selected {
    background-color: rgba(0, 0, 128, 0.5);
    border: 2px dotted #FFFFFF;
}

.icon-image {
    font-size: 48px;
    margin-bottom: 8px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.icon-label {
    color: #FFFFFF;
    font-size: 12px;
    text-align: center;
    text-shadow: 1px 1px 2px #000000;
    font-weight: bold;
    word-wrap: break-word;
    max-width: 80px;
}

/* Retro YouTube Icon */
.retro-youtube {
    position: relative;
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.6));
    animation: tvFlicker 3s infinite;
}

@keyframes tvFlicker {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.6));
        opacity: 1;
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(255, 0, 0, 0.8));
        opacity: 0.95;
    }
}

.youtube-icon:hover .retro-youtube {
    filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.9));
    transform: scale(1.1);
}

/* Lemon Icon */
.lemon-icon .icon-image {
    filter: drop-shadow(0 0 8px rgba(255, 255, 0, 0.6));
    animation: lemonGlow 2s ease-in-out infinite alternate;
}

@keyframes lemonGlow {
    0% {
        filter: drop-shadow(0 0 8px rgba(255, 255, 0, 0.6));
    }
    100% {
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 1));
    }
}

.lemon-icon:hover .icon-image {
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1));
    transform: scale(1.1) rotate(5deg);
}

/* Ideas Icon */
.ideas-icon .icon-image {
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
    animation: ideaGlow 2.5s ease-in-out infinite alternate;
}

@keyframes ideaGlow {
    0% {
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(255, 255, 100, 1));
    }
    100% {
        filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8));
    }
}

.ideas-icon:hover .icon-image {
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 1));
    transform: scale(1.15);
}

/* Game Screen */
.game-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 100;
}

.game-container {
    width: 100%;
    height: calc(100% - 60px);
    margin-top: 60px;
}

.back-to-desktop-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #C0C0C0;
    border: 3px solid;
    border-color: #FFFFFF #000000 #000000 #FFFFFF;
    padding: 10px 20px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    z-index: 101;
    box-shadow: 2px 2px 0px #000000;
    transition: all 0.2s;
}

.back-to-desktop-btn:hover {
    background-color: #A0A0A0;
    transform: translateY(-1px);
    box-shadow: 3px 3px 0px #000000;
}

.back-to-desktop-btn:active {
    border-color: #000000 #FFFFFF #FFFFFF #000000;
    transform: translateY(1px);
    box-shadow: 1px 1px 0px #000000;
}

/* Window styling */
.window {
    background-color: #C0C0C0;
    border: 3px solid;
    border-color: #DFDFDF #404040 #404040 #DFDFDF;
    box-shadow: 2px 2px 0px #000000;
    width: 95%;
    height: 90%;
    max-width: none;
    max-height: none;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.window-header {
    background: linear-gradient(90deg, #000080, #1084D0);
    color: #FFFFFF;
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.window-title {
    font-size: 14px;
}

.window-controls {
    display: flex;
    gap: 4px;
}

.window-btn {
    background-color: #C0C0C0;
    border: 2px solid;
    border-color: #FFFFFF #000000 #000000 #FFFFFF;
    width: 20px;
    height: 20px;
    font-size: 10px;
    cursor: pointer;
    color: #000000;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.window-btn:hover {
    background-color: #A0A0A0;
}

.window-btn:active {
    border-color: #000000 #FFFFFF #FFFFFF #000000;
}

.window-content {
    flex: 1;
    background-color: #000000;
    overflow-y: auto;
    padding: 20px;
}

/* Terminal content inside window */
.terminal-content {
    color: #00FF00;
}

.line {
    margin-bottom: 10px;
}

.prompt {
    color: #00FF00;
    font-weight: bold;
    margin-right: 8px;
}

.command {
    color: #FFFF00;
}

.output {
    margin: 20px 0;
}

.output pre {
    color: #00FF00;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    line-height: 1.6;
}

/* Cursor animation */
.cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    background-color: #00FF00;
    animation: blink 1s infinite;
    margin-left: 4px;
}

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

/* Links */
a {
    color: #00FFFF;
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: #FFFF00;
    text-decoration: underline;
}

/* ============================================
   RETRO BOOMBOX MUSIC PLAYER STYLES
   ============================================ */
.boombox-content {
    background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
    padding: 30px;
    overflow-x: hidden;
}

.boombox {
    display: flex;
    gap: 20px;
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    padding: 30px 20px;
    border-radius: 15px;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.8),
        inset 0 2px 10px rgba(255, 255, 255, 0.1);
}

/* Speakers */
.speaker-left, .speaker-right {
    flex: 1;
    background: #1a1a1a;
    border-radius: 10px;
    padding: 20px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}

.speaker-grill {
    width: 100%;
    height: 200px;
    background:
        repeating-linear-gradient(0deg, #333 0px, #333 3px, #222 3px, #222 6px),
        repeating-linear-gradient(90deg, #333 0px, #333 3px, #222 3px, #222 6px);
    border-radius: 5px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9);
}

/* Center Section */
.boombox-center {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Display Screen */
.display-screen {
    background: #0a0a0a;
    border: 3px solid #444;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: inset 0 0 20px rgba(0, 255, 0, 0.2);
}

.track-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Courier New', monospace;
}

.track-name {
    color: #00FF00;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 0 10px #00FF00;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-time {
    color: #00FF00;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 0 10px #00FF00;
    margin-left: 20px;
}

/* Cassette Deck */
.cassette-deck {
    background: #2a2a2a;
    border: 3px solid #444;
    border-radius: 10px;
    padding: 15px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9);
}

.cassette-window {
    background: rgba(100, 100, 100, 0.3);
    border: 2px solid #555;
    border-radius: 5px;
    padding: 10px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cassette {
    background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
    border: 2px solid #000;
    border-radius: 3px;
    padding: 10px;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
}

.cassette-reel {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #2a2a2a;
    border: 3px solid #000;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
    animation: spin 3s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cassette-label {
    flex: 1;
    background: #f5f5dc;
    color: #000;
    text-align: center;
    padding: 8px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #000;
    border-radius: 2px;
}

/* Control Panel */
.control-panel {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background: #222;
    border-radius: 8px;
}

.boombox-btn {
    background: linear-gradient(135deg, #555 0%, #333 100%);
    border: 2px solid #666;
    border-radius: 5px;
    width: 45px;
    height: 45px;
    font-size: 18px;
    cursor: pointer;
    color: #FFF;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: all 0.2s;
}

.boombox-btn:hover {
    background: linear-gradient(135deg, #666 0%, #444 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
}

.boombox-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.play-btn {
    background: linear-gradient(135deg, #00AA00 0%, #008800 100%);
    border-color: #00FF00;
}

.play-btn:hover {
    background: linear-gradient(135deg, #00CC00 0%, #00AA00 100%);
}

.eject-btn {
    background: linear-gradient(135deg, #AA0000 0%, #880000 100%);
    border-color: #FF0000;
}

.eject-btn:hover {
    background: linear-gradient(135deg, #CC0000 0%, #AA0000 100%);
}

/* Knobs Section */
.knobs-section {
    display: flex;
    justify-content: space-around;
    padding: 10px;
}

.knob-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.knob-group label {
    color: #999;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.knob {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #666, #222);
    border: 3px solid #444;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.8),
        inset 0 -2px 5px rgba(0, 0, 0, 0.5),
        inset 0 2px 5px rgba(255, 255, 255, 0.2);
    position: relative;
    cursor: pointer;
}

.knob::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 15px;
    background: #CCC;
    border-radius: 2px;
}

/* Song List */
.song-list {
    margin-top: 20px;
    background: #1a1a1a;
    border: 2px solid #444;
    border-radius: 10px;
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.song-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #444;
}

.song-list-header h3 {
    color: #00FF00;
    font-size: 18px;
    margin: 0;
}

.close-list-btn {
    background: #AA0000;
    border: none;
    color: #FFF;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.close-list-btn:hover {
    background: #CC0000;
}

.songs-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.song-item {
    display: flex;
    gap: 15px;
    padding: 12px;
    background: #222;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
}

.song-item:hover {
    background: #333;
    border-color: #00FF00;
    transform: translateX(5px);
}

.song-number {
    color: #666;
    font-weight: bold;
    min-width: 30px;
}

.song-title {
    color: #00FFFF;
    flex: 1;
}

.playlist-section h3,
.player-section h3 {
    color: #000000;
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #000080;
}

.playlist-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.playlist-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background-color: #C0C0C0;
    border: 2px solid;
    border-color: #FFFFFF #000000 #000000 #FFFFFF;
    cursor: pointer;
    transition: background-color 0.2s;
}

.playlist-item:hover {
    background-color: #000080;
}

.playlist-item:hover .playlist-name {
    color: #FFFFFF;
}

.playlist-item:active {
    border-color: #000000 #FFFFFF #FFFFFF #000000;
}

.playlist-icon {
    font-size: 24px;
}

.playlist-name {
    color: #000000;
    font-size: 16px;
    font-weight: bold;
}

/* Player Section */
.player-section {
    text-align: center;
}

.now-playing {
    margin-bottom: 30px;
}

.track-info {
    background-color: #000000;
    color: #00FF00;
    padding: 20px;
    margin-top: 15px;
    border: 2px solid #00FF00;
}

.track-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.track-artist {
    font-size: 14px;
    color: #00FFFF;
}

.player-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

.control-btn {
    background-color: #C0C0C0;
    border: 2px solid;
    border-color: #FFFFFF #000000 #000000 #FFFFFF;
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.control-btn:hover {
    background-color: #A0A0A0;
}

.control-btn:active {
    border-color: #000000 #FFFFFF #FFFFFF #000000;
}

.progress-bar {
    width: 100%;
    height: 20px;
    background-color: #333333;
    border: 2px solid #000000;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: #000080;
    width: 0%;
    transition: width 0.3s ease;
}

.back-to-playlists-btn {
    background-color: #C0C0C0;
    border: 2px solid;
    border-color: #FFFFFF #000000 #000000 #FFFFFF;
    padding: 10px 20px;
    margin-top: 20px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    cursor: pointer;
    color: #000000;
    font-weight: bold;
}

.back-to-playlists-btn:hover {
    background-color: #A0A0A0;
}

.back-to-playlists-btn:active {
    border-color: #000000 #FFFFFF #FFFFFF #000000;
}

/* ============================================
   HAR ANALYZER WINDOW
   ============================================ */
.har-window {
    width: 95%;
    height: 90%;
}

.har-content {
    background-color: #FFFFFF;
    overflow-y: auto;
}

.har-analyzer h2 {
    color: #000080;
    text-align: center;
    margin-bottom: 25px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 24px;
    font-weight: bold;
}

.har-drop-zone {
    border: 2px dashed #0066cc;
    border-radius: 5px;
    padding: 50px 20px;
    text-align: center;
    margin-bottom: 30px;
    transition: all 0.3s ease;
    background-color: #F0F0F0;
}

.har-drop-zone.dragover {
    background-color: #E0E0FF;
    border-color: #0000FF;
}

.har-drop-zone h3 {
    color: #000080;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}

.har-drop-zone p {
    color: #666;
    margin: 10px 0;
    font-size: 16px;
}

.har-file-button {
    background-color: #0066cc;
    color: white;
    padding: 12px 24px;
    border: 2px solid;
    border-color: #FFFFFF #000000 #000000 #FFFFFF;
    cursor: pointer;
    font-size: 16px;
    font-family: 'Courier New', Courier, monospace;
    margin-top: 10px;
    font-weight: bold;
}

.har-file-button:hover {
    background-color: #0055aa;
}

.har-file-button:active {
    border-color: #000000 #FFFFFF #FFFFFF #000000;
}

#har-output {
    padding: 10px;
}

.har-summary {
    background-color: #E0F0FF;
    border-left: 6px solid #0066cc;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 0 4px 4px 0;
}

.har-summary h3 {
    color: #000080;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: bold;
}

.har-summary p, .har-summary ul {
    color: #000;
    margin: 8px 0;
    font-size: 16px;
    line-height: 1.6;
}

.har-summary ul {
    margin-left: 20px;
}

.har-summary li {
    margin: 6px 0;
}

.har-error-section {
    margin-bottom: 35px;
}

.har-error-section h3 {
    color: #000080;
    border-bottom: 3px solid #0066cc;
    padding-bottom: 8px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
}

.har-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 14px;
    background-color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.har-table th,
.har-table td {
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #ccc;
}

.har-table th {
    background-color: #0066cc;
    color: white;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
}

.har-table tr:nth-child(even) {
    background-color: #F5F5F5;
}

.har-table tr:hover {
    background-color: #E0E0FF;
}

.har-table td {
    word-break: break-word;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    color: #000;
    line-height: 1.5;
}

.har-error-message {
    background-color: #ffeeee;
    border-left: 4px solid #cc0000;
    padding: 15px;
    margin-bottom: 30px;
    color: #cc0000;
    border-radius: 0 4px 4px 0;
}

/* HAR Export Buttons */
.har-export-section {
    text-align: center;
    margin: 25px 0;
    padding: 15px 0;
}

.har-export-button {
    background-color: #008000;
    color: white;
    padding: 14px 30px;
    border: 3px solid;
    border-color: #FFFFFF #004000 #004000 #FFFFFF;
    cursor: pointer;
    font-size: 16px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    box-shadow: 2px 2px 0px #000000;
    transition: all 0.2s;
}

.har-export-button:hover {
    background-color: #00A000;
    transform: translateY(-1px);
    box-shadow: 3px 3px 0px #000000;
}

.har-export-button:active {
    border-color: #004000 #FFFFFF #FFFFFF #004000;
    transform: translateY(1px);
    box-shadow: 1px 1px 0px #000000;
}

/* ============================================
   SCREENSAVER
   ============================================ */
.screensaver {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 9999;
    cursor: none;
}

.bouncing-logo {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    font-size: 48px;
    text-align: center;
    user-select: none;
    pointer-events: none;
    transition: color 0.1s;
}

.bouncing-logo .logo-line {
    line-height: 1.2;
    letter-spacing: 8px;
    text-shadow:
        0 0 10px currentColor,
        0 0 20px currentColor,
        0 0 30px currentColor;
}

/* ============================================
   TWILIO WRAPPED 2025 WINDOW
   ============================================ */
.wrapped-window {
    width: 700px !important;
    height: 550px !important;
    max-width: 700px !important;
    max-height: 550px !important;
    min-width: 700px !important;
    min-height: 550px !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.wrapped-content {
    background: radial-gradient(ellipse at center, #001a0d 0%, #000a05 50%, #000000 100%);
    color: #00FF00;
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.wrapped-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(0, 255, 0, 0.03) 0px,
            transparent 1px,
            transparent 2px,
            rgba(0, 255, 0, 0.03) 3px
        );
    pointer-events: none;
    z-index: 1;
}

.wrapped-slides {
    flex: 1;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    background: transparent;
    min-height: 0;
    z-index: 2;
}

.wrapped-slide {
    display: none !important;
    padding: 20px;
}

.wrapped-slide.active {
    display: block !important;
    animation: wrappedFadeIn 0.4s ease-in-out;
}

@keyframes wrappedFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wrapped-ascii {
    color: #00FF00;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px !important;
    line-height: 1.3 !important;
    white-space: pre;
    margin: 0;
    overflow-x: auto;
}

/* Wrapped Text Styles */
.wrapped-highlight {
    color: #00FFFF;
    font-weight: bold;
}

.wrapped-success {
    color: #00FF00;
    font-weight: bold;
}

.wrapped-emphasis {
    color: #FFFF00;
    font-weight: bold;
}

.wrapped-heart {
    color: #FF00FF;
    font-weight: bold;
    font-size: 1.2em;
}

.wrapped-quote {
    color: #FFFFFF;
    font-style: italic;
}

.wrapped-dim {
    color: #666666;
}

.wrapped-stat {
    color: #00FFFF;
    font-weight: bold;
}

.wrapped-giant-number {
    color: #FF00FF;
    font-size: 5em;
    font-weight: bold;
    display: inline-block;
    animation: wrappedPulse 2s infinite;
}

@keyframes wrappedPulse {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 10px #FF00FF, 0 0 20px #FF00FF;
    }
    50% {
        transform: scale(1.1);
        text-shadow: 0 0 20px #FF00FF, 0 0 40px #FF00FF, 0 0 60px #FF00FF;
    }
}

.wrapped-blink {
    color: #FFFF00;
    animation: wrappedBlink 1s infinite;
}

@keyframes wrappedBlink {
    0%, 49% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

.wrapped-pillar1 {
    color: #FFD700;
}

.wrapped-pillar2 {
    color: #00FFFF;
}

.wrapped-pillar3 {
    color: #FF69B4;
}

.wrapped-breakthrough {
    color: #00FF00;
    font-weight: bold;
    font-size: 1.3em;
    animation: wrappedGlow 2s infinite;
}

@keyframes wrappedGlow {
    0%, 100% {
        text-shadow: 0 0 5px #00FF00;
    }
    50% {
        text-shadow: 0 0 15px #00FF00, 0 0 25px #00FF00;
    }
}

/* Navigation Bar */
.wrapped-nav {
    background: #000080;
    border-top: 3px solid #C0C0C0;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.wrapped-nav-btn {
    background: #C0C0C0;
    border: 2px solid;
    border-color: #FFFFFF #000000 #000000 #FFFFFF;
    color: #000000;
    padding: 8px 20px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    min-width: 100px;
    transition: all 0.1s;
}

.wrapped-nav-btn:hover:not(:disabled) {
    background: #E0E0E0;
}

.wrapped-nav-btn:active:not(:disabled) {
    border-color: #000000 #FFFFFF #FFFFFF #000000;
    transform: translateY(1px);
}

.wrapped-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wrapped-counter {
    color: #FFFFFF;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 16px;
}

/* Responsive Wrapped */
@media (max-width: 768px) {
    .wrapped-window {
        width: 95vw !important;
        height: 85vh !important;
        max-width: 95vw !important;
        max-height: 85vh !important;
        min-width: 300px;
        min-height: 400px;
    }

    .wrapped-ascii {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    .wrapped-giant-number {
        font-size: 3em !important;
    }

    .wrapped-nav-btn {
        padding: 6px 12px;
        font-size: 12px;
        min-width: 70px;
    }

    .wrapped-counter {
        font-size: 14px;
    }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .prompt-box {
        min-width: 300px;
        max-width: 90%;
    }

    .boot-content {
        padding: 20px;
    }

    .boot-text {
        font-size: 12px;
    }

    .os-logo {
        margin-bottom: 20px;
    }

    .logo-ascii {
        font-size: 8px;
    }

    .window {
        width: 95%;
        height: 95%;
    }

    .output pre {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 12px;
    }

    .prompt-box {
        min-width: 250px;
    }

    .boot-text {
        font-size: 10px;
    }

    .logo-ascii {
        font-size: 6px;
    }

    .window-content {
        padding: 10px;
    }

    .output pre {
        font-size: 10px;
    }
}

/* ============================================
   AI CHAT WINDOW
   ============================================ */

.chat-window {
    width: 700px !important;
    height: 600px !important;
    max-width: 700px !important;
    max-height: 600px !important;
    min-width: 700px !important;
    min-height: 600px !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.chat-content {
    background: radial-gradient(ellipse at center, #001a0d 0%, #000a05 50%, #000000 100%);
    padding: 0;
    overflow: hidden;
    position: relative;
}

.chat-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(0, 255, 0, 0.03) 0px,
            transparent 1px,
            transparent 2px,
            rgba(0, 255, 0, 0.03) 3px
        );
    pointer-events: none;
    z-index: 1;
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 2;
}

/* Messages Display */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: transparent;
    border-bottom: 2px solid #00FF00;
    font-family: 'Courier New', Courier, monospace;
}

.chat-message {
    margin-bottom: 15px;
    line-height: 1.6;
}

.chat-message.user {
    color: #00FFFF;
}

.chat-message.assistant {
    color: #00FF00;
}

.chat-message.system {
    color: #FFFF00;
}

.chat-message.error {
    color: #FF0000;
}

.chat-prompt {
    font-weight: bold;
    margin-right: 8px;
}

.chat-text {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Typing Indicator */
.typing-indicator {
    display: inline-block;
    animation: blink 1s infinite;
}

/* Input Area */
.chat-input-area {
    background: #000000;
    padding: 15px;
    border-top: 2px solid #00FF00;
}

.chat-input-line {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.chat-input {
    flex: 1;
    background: #000000;
    border: 2px solid #00FF00;
    color: #00FF00;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    padding: 8px 12px;
    outline: none;
}

.chat-input:focus {
    border-color: #00FFFF;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.chat-send-btn {
    background: #00FF00;
    color: #000000;
    border: 2px solid #00FF00;
    padding: 8px 20px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.chat-send-btn:hover {
    background: #00FFFF;
    border-color: #00FFFF;
}

.chat-send-btn:active {
    transform: translateY(1px);
}

.chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-control-btn {
    background: #C0C0C0;
    border: 2px solid;
    border-color: #FFFFFF #000000 #000000 #FFFFFF;
    padding: 6px 15px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    cursor: pointer;
    color: #000000;
    font-weight: bold;
}

.chat-control-btn:hover {
    background: #A0A0A0;
}

.chat-control-btn:active {
    border-color: #000000 #FFFFFF #FFFFFF #000000;
}

.chat-status {
    color: #00FF00;
    font-size: 12px;
    font-family: 'Courier New', Courier, monospace;
}

.chat-status.disconnected {
    color: #FF0000;
}

/* Chat Icon */
.chat-icon .icon-image {
    filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.6));
    animation: chatGlow 2s ease-in-out infinite alternate;
}

@keyframes chatGlow {
    0% {
        filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.6));
    }
    100% {
        filter: drop-shadow(0 0 15px rgba(0, 255, 255, 1));
    }
}

.chat-icon:hover .icon-image {
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 1));
    transform: scale(1.1);
}

/* Responsive Chat Window */
@media (max-width: 768px) {
    .chat-window {
        width: 95vw !important;
        height: 85vh !important;
        max-width: 95vw !important;
        max-height: 85vh !important;
        min-width: 300px !important;
        min-height: 400px !important;
    }

    .chat-input {
        font-size: 12px;
    }

    .chat-send-btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    .chat-control-btn {
        padding: 4px 10px;
        font-size: 10px;
    }
}