/* Import retro DOS fonts */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');

:root {
    /* Classic BBS color palette (ANSI colors) */
    --black: #000000;
    --blue: #0000AA;
    --green: #00AA00;
    --cyan: #00AAAA;
    --red: #AA0000;
    --magenta: #AA00AA;
    --yellow: #AAAA00;
    --white: #AAAAAA;
    --bright-black: #555555;
    --bright-blue: #5555FF;
    --bright-green: #55FF55;
    --bright-cyan: #55FFFF;
    --bright-red: #FF5555;
    --bright-magenta: #FF55FF;
    --bright-yellow: #FFFF55;
    --bright-white: #FFFFFF;

    /* Theme colors */
    --bg-color: var(--black);
    --text-color: var(--bright-cyan);
    --highlight-color: var(--bright-yellow);
    --error-color: var(--bright-red);
    --prompt-color: var(--bright-white);
    --menu-color: var(--cyan);
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'VT323', monospace;
    font-size: 26px;
    line-height: 1.2;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.screen {
    display: none;
    width: 100%;
    max-width: 600px;
}

.screen.active {
    display: block;
}

.terminal {
    white-space: pre;
    font-family: 'VT323', monospace;
    letter-spacing: 0;
}

#contact-screen .terminal,
#access-denied .terminal {
    text-align: center;
}

#files-screen .terminal,
#bulletins-screen .terminal,
#games-menu .terminal,
#goodbye-screen .terminal {
    text-align: center;
}

/* Keep menu items left-aligned within centered screens */
#files-screen .terminal,
#bulletins-screen .terminal,
#games-menu .terminal {
    display: inline-block;
    text-align: left;
}

/* Center the title/borders within left-aligned screens */
#files-screen .screen-title,
#bulletins-screen .screen-title,
#games-menu .screen-title,
#goodbye-screen .screen-title {
    display: block;
    text-align: center;
    margin-left: 0;
    padding-left: 0;
}

/* Connect screen styling */
#connect-text {
    color: var(--bright-green);
}

.skip-hint {
    color: var(--bright-black);
    margin-top: 20px;
    text-align: center;
    font-size: 20px;
}

/* Logo screen */
#logo-art {
    color: var(--bright-cyan);
    text-align: left;
    font-size: 18px;
    line-height: 1;
    font-family: 'Courier New', 'Courier', monospace;
    letter-spacing: 0;
    display: inline-block;
    margin: 0 auto;
}

#logo-screen {
    text-align: center;
}

.continue-prompt {
    color: var(--bright-yellow);
    text-align: center;
    margin-top: 20px;
    animation: blink 1s infinite;
}

/* Menu items - clickable and hoverable */
.menu-item,
.file-item,
.bulletin-item,
.game-item {
    color: var(--bright-white);
    cursor: pointer;
    transition: all 0.1s;
}

.menu-item:hover,
.file-item:hover,
.bulletin-item:hover,
.game-item:hover {
    color: var(--black);
    background-color: var(--bright-cyan);
}

.menu-item.selected,
.file-item.selected,
.bulletin-item.selected,
.game-item.selected {
    color: var(--black);
    background-color: var(--bright-yellow);
}

/* Cursor */
.cursor {
    color: var(--bright-white);
    animation: blink 1s infinite;
}

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

/* Prompt styling */
.prompt {
    color: var(--bright-yellow);
}

/* Highlighting */
.highlight {
    color: var(--bright-yellow);
    font-weight: bold;
}

/* Error messages */
.error {
    color: var(--bright-red);
    font-weight: bold;
}

/* Date styling in bulletins */
.date {
    color: var(--bright-black);
}

/* System time and last caller */
#system-time,
#last-caller {
    color: var(--bright-yellow);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body {
        font-size: 20px;
        padding: 10px;
    }

    #logo-art {
        font-size: 15px;
    }

    .skip-hint {
        font-size: 16px;
    }
}

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

    #logo-art {
        font-size: 13px;
    }
}

/* CRT Scanline effect */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 50%,
        rgba(0, 0, 0, 0.25) 50%
    );
    background-size: 100% 3px;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.3;
    animation: scanline 8s linear infinite;
}

@keyframes scanline {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(3px);
    }
}

/* CRT Screen flicker */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    pointer-events: none;
    z-index: 1001;
    animation: flicker 0.5s infinite;
}

@keyframes flicker {
    0% {
        opacity: 0.27861;
    }
    5% {
        opacity: 0.34769;
    }
    10% {
        opacity: 0.23604;
    }
    15% {
        opacity: 0.90626;
    }
    20% {
        opacity: 0.18128;
    }
    25% {
        opacity: 0.83891;
    }
    30% {
        opacity: 0.65583;
    }
    35% {
        opacity: 0.67807;
    }
    40% {
        opacity: 0.26559;
    }
    45% {
        opacity: 0.84693;
    }
    50% {
        opacity: 0.96019;
    }
    55% {
        opacity: 0.08594;
    }
    60% {
        opacity: 0.20313;
    }
    65% {
        opacity: 0.71988;
    }
    70% {
        opacity: 0.53455;
    }
    75% {
        opacity: 0.37288;
    }
    80% {
        opacity: 0.71428;
    }
    85% {
        opacity: 0.70419;
    }
    90% {
        opacity: 0.7003;
    }
    95% {
        opacity: 0.36108;
    }
    100% {
        opacity: 0.24387;
    }
}

/* Glowing text effect */
.terminal {
    text-shadow:
        0 0 5px rgba(85, 255, 255, 0.8),
        0 0 10px rgba(85, 255, 255, 0.6),
        0 0 20px rgba(85, 255, 255, 0.4),
        0 0 40px rgba(85, 255, 255, 0.2);
}

/* Extra glow for highlighted text */
.highlight {
    text-shadow:
        0 0 5px rgba(255, 255, 85, 1),
        0 0 10px rgba(255, 255, 85, 0.8),
        0 0 20px rgba(255, 255, 85, 0.6),
        0 0 40px rgba(255, 255, 85, 0.4);
}

/* Error text glow */
.error {
    text-shadow:
        0 0 5px rgba(255, 85, 85, 1),
        0 0 10px rgba(255, 85, 85, 0.8),
        0 0 20px rgba(255, 85, 85, 0.6);
}

/* CRT screen curvature effect */
body {
    perspective: 1000px;
}

.screen {
    transform-style: preserve-3d;
}

/* LORD Game Screen */
#lord-screen {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100vh;
    max-width: none;
    display: none !important;
    background-color: var(--bg-color);
    z-index: 1000;
    overflow: hidden;
}

#lord-screen.active {
    display: block !important;
}

#lord-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1002;
    margin: 0 auto;
    padding: 20px;
}

#lord-output {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    padding: 20px;
    white-space: pre;
    font-family: 'VT323', monospace;
    font-size: 18px;
    line-height: 1.2;
    text-align: left;
    min-height: 0;
}

#lord-input-container {
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.8);
    border-top: 2px solid var(--bright-cyan);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.lord-input {
    background: transparent;
    border: none;
    color: var(--bright-white);
    font-family: 'VT323', monospace;
    font-size: 26px;
    outline: none;
    flex: 1;
    margin-left: 10px;
}

.lord-input::selection {
    background: var(--bright-cyan);
    color: var(--black);
}

/* LORD responsive adjustments */
@media (max-width: 768px) {
    #lord-wrapper {
        height: 100vh;
        height: 100dvh; /* Use dynamic viewport height for mobile browsers */
        padding: 5px;
    }

    #lord-output {
        font-size: 16px;
        padding: 5px;
        padding-bottom: 0;
        line-height: 1.1;
    }

    #lord-input-container {
        padding: 6px 10px;
        background-color: rgba(0, 0, 0, 0.95);
    }

    .lord-input {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    #lord-wrapper {
        padding: 2px;
    }

    #lord-output {
        font-size: 13px;
        padding: 3px;
        padding-bottom: 0;
        line-height: 1.05;
    }

    #lord-input-container {
        padding: 4px 8px;
    }

    .lord-input {
        font-size: 16px;
    }
}