/* ==========================
   🚀 ALIEN INVASION TOKEN - HIGH-END DESIGN
   ========================== */

/* 🌌 COLOR PALETTE */
:root {
    --primary-color: #8D00FF; /* Electric Purple */
    --secondary-color: #FF007F; /* Hot Pink */
    --accent-color: #00FFFF; /* Neon Cyan */
    --background-color: #0A0A0A; /* Deep Space Black */
    --text-color: #f8f8f8; /* Bright White */
    --button-glow: #00FF85; /* Alien Glow Green */
}

/* 🌌 GENERAL STYLING */
body {
    font-family: 'Orbitron', sans-serif;
    background: radial-gradient(circle, rgba(10, 10, 10, 1) 20%, rgba(20, 20, 20, 1) 100%);
    color: var(--text-color);
    text-align: center;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* Disable iOS/mobile highlights and text selection */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 🔥 BIG BOLD HEADINGS */
h1, h2, h3 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    text-shadow: 0px 0px 12px var(--accent-color);
}

/* 🎛 HERO SECTION */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 120px 20px;
    background: url('../public/alien-bg.jpg') center/cover no-repeat;
    text-align: center;
    color: var(--text-color);
    position: relative;
}

.hero h1 {
    font-size: 6rem;
    color: var(--primary-color);
    text-shadow: 0 0 20px var(--primary-color), 0 0 30px var(--secondary-color);
    animation: flicker 2s infinite alternate;
}

.hero p {
    font-size: 1.8rem;
    margin-top: 10px;
    max-width: 800px;
    color: var(--accent-color);
}

/* 🚀 BUTTONS */
.button {
    padding: 15px 40px;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #0A0A0A;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border: 3px solid var(--accent-color);
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    box-shadow: 0px 0px 15px var(--button-glow);
}

.button:hover {
    transform: scale(1.1);
    box-shadow: 0px 0px 25px var(--primary-color);
}

/* 🛸 UFO ANIMATION */
@keyframes fly {
    0% { transform: translateX(-100vw); }
    100% { transform: translateX(100vw); }
}

@keyframes rainbowPulse {
    0% { background: red; box-shadow: 0 0 5px red; }
    20% { background: orange; box-shadow: 0 0 5px orange; }
    40% { background: yellow; box-shadow: 0 0 5px yellow; }
    60% { background: green; box-shadow: 0 0 5px green; }
    80% { background: blue; box-shadow: 0 0 5px blue; }
    100% { background: violet; box-shadow: 0 0 5px violet; }
}
.ufo {
    position: absolute;
    top: 10%;
    width: 200px;
    animation: fly 10s linear infinite;
}

/* 🔥 GLOWING TEXT EFFECT */
@keyframes flicker {
    0% { opacity: 1; text-shadow: 0px 0px 10px var(--primary-color); }
    50% { opacity: 0.8; text-shadow: 0px 0px 20px var(--secondary-color); }
    100% { opacity: 1; text-shadow: 0px 0px 10px var(--primary-color); }
}

/* 🎛 GRID BACKGROUND */
.grid {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20vh;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8)), url('../public/grid.png');
    background-size: cover;
    z-index: 0;
}

/* 🛸 MEME GALLERY */
.meme-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.meme-gallery img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.meme-gallery img:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px var(--primary-color);
}

/* 🔗 SOCIAL MEDIA LINKS */
.social-links a {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--accent-color);
    text-decoration: none;
    margin: 0 15px;
    transition: color 0.3s ease-in-out;
}

.social-links a:hover {
    color: var(--primary-color);
}

/* 🚀 FOOTER */
footer {
    background: var(--background-color);
    padding: 20px;
    font-size: 1.2rem;
    border-top: 3px solid var(--primary-color);
}

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

/* Mobile optimization - prevent any scroll */
html {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
}

html, body {
    overscroll-behavior: none; /* Prevent pull-to-refresh and bounce */
    -webkit-overflow-scrolling: touch;
    touch-action: none; /* Prevent default touch gestures */
}
body {
    background: black;
    overflow: hidden !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    width: 100vw;
    width: 100dvw; /* Dynamic viewport width for mobile */
    color: white;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    position: fixed; /* Prevent any scroll on mobile */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.container {
    text-align: center;
    position: relative;
    z-index: 2;
}
h1 {
    font-size: 6rem;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.8);
    transition: color 0.3s ease-in-out;
}
h1:hover {
    color: #ff00ff;
}
#countdown {
    font-size: 4rem;
    margin-top: 20px;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
}
/* Game Navigation Bar */
#game-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 15px 20px 15px 30px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 1000;
    user-select: none;
    -webkit-user-select: none;
    overflow: visible;
    box-sizing: border-box;
}

#game-nav * {
    cursor: default;
}

#game-nav a,
#game-nav .nav-icon,
#game-nav #score {
    cursor: pointer !important;
}

/* Hide crosshair when hovering over nav elements */
#game-nav:hover ~ #crosshair {
    display: none !important;
}

.game-nav-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.game-nav-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.game-nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 120px;
    flex-shrink: 0;
    padding-right: 20px;
}

.game-nav-logo {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    font-size: 24px;
    color: #00ff00;
    text-decoration: none;
    transition: all 0.3s ease;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.game-nav-logo:hover {
    color: #ffffff;
    text-shadow: 0 0 15px #00ff00, 0 0 25px #00ff00;
}

#score {
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    color: limegreen;
    text-shadow: 0 0 5px limegreen, 0 0 10px green;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.3s ease;
    padding: 8px 15px;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    z-index: 1001;
}

#score:hover {
    transform: scale(1.1);
    text-shadow: 0 0 15px limegreen, 0 0 20px green, 0 0 30px lime;
}

.nav-icon {
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-icon:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px #00ff00);
}

.nav-icon img,
.nav-icon svg {
    flex-shrink: 0;
}

/* TOOLTIP STYLING */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: rgba(0, 0, 0, 0.9);
    color: #00ff00;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: 'VT323', monospace;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 255, 0, 0.3);
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.2);
    z-index: 10000;
}

[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    border: 5px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 10000;
}

[data-tooltip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Logo tooltip position adjustment */
.game-nav-logo[data-tooltip]::before,
.intel-nav-logo[data-tooltip]::before {
    bottom: -40px;
}

.game-nav-logo[data-tooltip]::after,
.intel-nav-logo[data-tooltip]::after {
    bottom: -13px;
}

#x-icon {
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
}
canvas {
    position: fixed; /* Changed to fixed to prevent scroll */
    top: 0;
    left: 0;
    width: 100vw;
    width: 100dvw; /* Dynamic viewport for mobile */
    height: 100vh;
    height: 100dvh; /* Dynamic viewport for mobile */
    max-width: 100vw;
    max-height: 100vh;
}
.emoji {
    position: absolute;
    font-size: 2rem;
    user-select: none;
}
.cryptic-message {
    position: absolute;
    font-size: 20px;
    line-height: 1.5;
    color: white;
    text-shadow: 0px 0px 10px rgba(255,255,255,1), 
                 0px 0px 5px rgba(0,0,0,1),
                 0px 0px 20px currentColor;
    opacity: 1;
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    letter-spacing: 0.8px;
    max-width: 500px;
    min-width: 320px;
    word-wrap: break-word;
    white-space: normal;
    padding: 0;
    background: none;
    text-align: center;
    z-index: 100; /* Above emojis */
    /* Force balanced text wrapping for even line breaks */
    text-wrap: balance;
    -webkit-text-wrap: balance;
}

#starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1; /* Keep behind everything */
    pointer-events: none;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    opacity: 0.7;
    box-shadow: 0 0 3px white;
    transition: transform linear;
}
.falling-object {
    position: absolute;
    font-size: 24px;
    opacity: 0.8;
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.7);
    z-index: 10; /* Below messages */
}

/* Time Extender Power-Up */
.time-extender {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    font-family: 'VT323', monospace;
    font-size: 48px;
    color: #00ff00;
    font-weight: bold;
    text-shadow: 0 0 20px #00ff00, 
                 0 0 40px #00ff00,
                 0 0 60px #00ff00;
    animation: timeExtenderPulse 2.5s ease-in-out infinite;
    z-index: 15;
    pointer-events: none;
    user-select: none;
}

/* Mobile - make it bigger and easier to see */
@media (max-width: 768px) {
    .time-extender {
        width: 100px;
        height: 100px;
        font-size: 56px;
    }
}

@keyframes timeExtenderPulse {
    0%, 100% {
        text-shadow: 0 0 20px #00ff00, 
                     0 0 40px #00ff00,
                     0 0 60px #00ff00;
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        text-shadow: 0 0 30px #00ff00, 
                     0 0 60px #00ff00,
                     0 0 90px #00ff00,
                     0 0 120px rgba(0, 255, 0, 0.5);
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Time Extended Flash Effect */
.time-extended-flash {
    animation: flashGreen 0.3s ease;
}

@keyframes flashGreen {
    0%, 100% {
        filter: none;
    }
    50% {
        filter: brightness(1.5) saturate(1.5);
        background: rgba(0, 255, 0, 0.1);
    }
}

/* Floating +10s Text */
.floating-time-text {
    position: absolute;
    font-family: 'VT323', monospace;
    font-size: 32px;
    font-weight: bold;
    color: #00ff00;
    text-shadow: 0 0 10px #00ff00, 
                 0 0 20px #00ff00, 
                 0 0 30px #00ff00;
    animation: floatUpAndFade 2s ease-out forwards;
    pointer-events: none;
    z-index: 1000;
}

@keyframes floatUpAndFade {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px);
        opacity: 0;
    }
}

.lazar {
    position: absolute;
    width: 6px;
    height: 30px;
    background: red;
    box-shadow: 0 0 10px red;
    border-radius: 2px;
    transition: top 0.05s linear;
}

#starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    opacity: 0.7;
    box-shadow: 0 0 3px white;
    transition: transform linear;
}
/* Glowing Neon Colors */
@keyframes neonGlow {
    0% { text-shadow: none #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff; }
    50% { text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff; }
    100% { text-shadow: none #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff; }
}

/* Apply cryptic "Bubbalicious" font */
.cryptic-text {
/*    font-family: 'Bungee Shade', cursive;*/
    font-size: 18px;
    /*    font-weight: bold;*/
    /*    animation: neonGlow 2s infinite alternate;*/
    color: #ffffff; /* Default white */
}

/* Score UI */
/* Score styling moved to game navigation section above */

/* Enhanced readability for cryptic messages */
.cryptic-message {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#player-id {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5); /* Semi-transparent */
    font-style: italic;
    margin-left: 10px;
    cursor: pointer;
}
#invasion-countdown {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
    font-weight: bold;
    color: red;
    text-shadow: 0px 0px 10px rgba(255, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 9999;
}
#invasion-text {
    position: fixed;
    top: -100px; /* Start above screen */
    left: 50%;
    transform: translateX(-50%);
    font-size: 50px; /* Smaller than before */
    font-weight: bold;
    color: red;
    text-shadow: 0px 0px 15px rgba(255, 0, 0, 0.8);
    opacity: 0;
    transition: all 1s ease-in-out;
    z-index: 9999;
}

.invasion-mode #invasion-text  {
    opacity: 1;
}

.invasion-copy {
    opacity: 0;
}

.invasion-mode .invasion-copy{
    opacity: 1;
}

.pulse-glow {
    text-shadow: 0px 0px 10px limegreen, 0px 0px 15px green;
    transform: scale(1.1);
    transition: all 0.3s ease-in-out;
}

#ait {
    transition: opacity 0.5s ease-in-out;
}
.invasion-mode #ait {
    opacity: 0.3; /* Dim AIT during invasion */
}

.invasion-mode #score {
    font-size: 28px;
    text-shadow: 0px 0px 15px limegreen, 0px 0px 20px green;
    animation: pulseGlowFast 0.2s infinite alternate;
}

@keyframes pulseGlowFast {
    from { transform: scale(1.2); }
    to { transform: scale(1.4); }
}
 
/* Normal Laser */
.lazar {
    position: absolute;
    width: 4px;
    height: 40px;
    border-radius: 2px;
    background: red;
    box-shadow: 0 0 5px red;
}

/* 🔥 Rainbow Laser (Only During Invasion) */
.invasion-mode .lazar {
    animation: rainbowPulse 0.5s infinite alternate;
    width: 8px;
    height: 60px;
}



/* 🔥 Score Gets Bigger & Pulses Only During Invasion */
.invasion-mode #score {
    font-size: 28px;
    text-shadow: 0px 0px 15px limegreen, 0px 0px 20px green;
    animation: pulseGlowFast 0.2s infinite alternate;
}

@keyframes pulseGlowFast {
    from { transform: scale(1.2); }
    to { transform: scale(1.4); }
}

/* 🔥 AIT Dims Only During Invasion */
.invasion-mode #ait {
    opacity: 0.2;
    transition: opacity 0.5s ease-in-out;
}


#invasion-copy {
    position: fixed;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Press Start 2P", cursive; /* Classic arcade font */
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7); /* Semi-opaque */
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
    opacity: 0; /* Start invisible */
    transition: opacity 2s ease-in-out;
    animation: flashSlow 1.5s infinite alternate;
    z-index: 9999;
}

@keyframes flashSlow {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* Disable text selection for all game elements */
.falling-object, 
.cryptic-message, 
#score, 
#invasion-text, 
#invasion-copy, 
#ait, 
.lazar {
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Edge */
    pointer-events: none; /* Prevent interaction with selection */
}

/* 🚀 PERFORMANCE OPTIMIZATIONS */
.falling-object,
.cryptic-message,
.lazar {
    will-change: transform; /* GPU acceleration hint */
    backface-visibility: hidden; /* Reduce flickering */
    -webkit-backface-visibility: hidden;
    transform: translateZ(0); /* Force GPU rendering */
    -webkit-transform: translateZ(0);
}

/* Crosshair optimization */
#crosshair {
    position: fixed;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 10000;
    will-change: transform;
    transform: translate3d(0, 0, 0); /* GPU acceleration */
}

#crosshair::before,
#crosshair::after {
    content: '';
    position: absolute;
    background: red;
    box-shadow: 0 0 5px red;
}

#crosshair::before {
    width: 2px;
    height: 20px;
    left: 9px;
    top: 0;
}

#crosshair::after {
    width: 20px;
    height: 2px;
    left: 0;
    top: 9px;
}

/* Bigger, more visible crosshair on mobile for easier aiming */
@media screen and (max-width: 768px) {
    #crosshair {
        width: 40px;
        height: 40px;
    }
    
    #crosshair::before {
        width: 3px;
        height: 40px;
        left: 18.5px;
        box-shadow: 0 0 8px red;
    }
    
    #crosshair::after {
        width: 40px;
        height: 3px;
        top: 18.5px;
        box-shadow: 0 0 8px red;
    }
}

#x-icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
    flex-shrink: 0;
    display: block;
}

#x-icon:hover {
    opacity: 1;
}

/* Terminal icon styling */
.terminal-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    transition: all 0.3s ease !important;
    margin-right: 15px !important;
    opacity: 0.7 !important;
    cursor: pointer !important;
    z-index: 99999 !important;
}

.terminal-icon:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    color: #00ff00 !important;
    filter: drop-shadow(0 0 10px #00ff00) !important;
}

.terminal-icon svg {
    width: 24px !important;
    height: 24px !important;
}

/* Terminal Styles */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Bungee+Shade&display=swap');

/* Terminal Navigation */
.terminal-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom: none;
    z-index: 1000;
    padding: 15px 0;
}

.terminal-nav-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.terminal-nav-logo {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    font-size: 24px;
    color: #00ff00;
    text-decoration: none;
    transition: all 0.3s ease;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.terminal-nav-logo:hover {
    color: #ffffff;
    text-shadow: 0 0 15px #00ff00, 0 0 25px #00ff00;
}

.terminal-nav-links {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-right: 20px;
}

/* Reuse existing nav-icon styles for terminal nav */
.terminal-nav .nav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.7 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.terminal-nav .nav-icon:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

.terminal-nav .terminal-icon {
    color: #00ff00 !important;
}

.terminal-nav .terminal-icon:hover {
    color: #ffffff !important;
    filter: drop-shadow(0 0 10px #00ff00) !important;
}

#x-icon-terminal {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
}

#x-icon-terminal:hover {
    filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(0, 255, 0, 0.5));
}

/* Terminal body styling with nav padding */
        body.terminal {
    background: #000000 !important;
    color: #00ff00 !important;
    font-family: 'VT323', monospace !important;
    padding-top: max(60px, env(safe-area-inset-top)) !important; /* iOS safe area */
    padding-bottom: env(safe-area-inset-bottom) !important; /* iOS safe area */
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
    height: 100vh !important;
    height: 100dvh !important; /* Dynamic viewport for mobile */
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    cursor: default !important;
    overflow: hidden !important;
    position: fixed !important; /* Prevent iOS scroll issues */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* CRT Monitor Effects */
    background: 
        radial-gradient(ellipse at center, transparent 0%, rgba(0,255,0,0.03) 100%),
        linear-gradient(90deg, transparent 50%, rgba(0,255,0,0.02) 50%),
        linear-gradient(transparent 50%, rgba(0,255,0,0.02) 50%),
        #000000 !important;
    background-size: 100% 100%, 3px 3px, 3px 3px !important;
    animation: scanlines 0.1s linear infinite !important;
}

@keyframes scanlines {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 0 0, 0 3px, 3px 0; }
}

/* Terminal navbar title styling */
.terminal-nav-title {
            text-align: center;
    text-shadow: 0 0 10px #00ff00;
    font-family: 'VT323', monospace;
    margin: 0;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 2px;
    flex: 1;
    color: #00ff00;
}

.clearance-display {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px 4px 0;
    font-family: 'VT323', monospace;
    font-size: 13px;
    color: #00ff00;
    text-shadow: none #00ff00;
    z-index: 100;
    text-align: right;
    line-height: 1.2;
    display: inline-block;
    width: auto;
}

.clearance-label {
    color: #666;
    margin-right: 4px;
    font-size: 11px;
}

.clearance-level {
    font-weight: bold;
    animation: clearanceGlow 2s ease-in-out infinite alternate;
}

/* Clearance level color groupings */
.clearance-green {
    color: #00ff00 !important;
    text-shadow: 0 0 10px #00ff00 !important;
}

.clearance-blue {
    color: #0080ff !important;
    text-shadow: 0 0 10px #0080ff !important;
}

.clearance-purple {
    color: #8000ff !important;
    text-shadow: 0 0 10px #8000ff !important;
}

.clearance-orange {
    color: #ff8000 !important;
    text-shadow: 0 0 10px #ff8000 !important;
}

.clearance-red {
    color: #ff0000 !important;
    text-shadow: 0 0 10px #ff0000 !important;
}

/* Rainbow pulsing effect for THE ONE */
.clearance-rainbow {
    background: linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #8000ff, #ff0080);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbowPulse 3s ease-in-out infinite, rainbowShift 2s linear infinite;
    text-shadow: none !important;
}

@keyframes rainbowPulse {
    0% { 
        filter: brightness(1) drop-shadow(0 0 5px currentColor);
    }
    50% { 
        filter: brightness(1.5) drop-shadow(0 0 20px currentColor);
    }
    100% { 
        filter: brightness(1) drop-shadow(0 0 5px currentColor);
    }
}

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

@keyframes clearanceGlow {
    0% { text-shadow: none #00ff00; }
    100% { text-shadow: 0 0 15px #00ff00, 0 0 25px #00ff00; }
}

/* Clearance Tooltip */
.clearance-display {
    position: relative;
}

.clearance-tooltip {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid #00ff00;
    border-radius: 3px;
    padding: 10px;
    font-family: 'VT323', monospace;
    font-size: 13px;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3);
}

.clearance-display:hover .clearance-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Airdrop Progress Section */
.tooltip-airdrop-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 255, 0, 0.3);
}

.airdrop-label {
    font-size: 12px;
    color: #00ff00;
    margin-bottom: 8px;
    font-weight: bold;
    text-align: left;
}

.airdrop-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(0, 255, 0, 0.2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.airdrop-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00ff00, #00cc00);
    border-radius: 4px;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
}

.airdrop-value {
    font-size: 11px;
    color: #00ff00;
    margin-bottom: 10px;
    text-align: center;
}

.airdrop-claim-btn {
    width: 100%;
    padding: 8px 12px;
    font-family: 'VT323', monospace;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #00ff00;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.airdrop-claim-btn.unlocked {
    background: rgba(0, 255, 0, 0.1);
    color: #00ff00;
}

.airdrop-claim-btn.unlocked:hover {
    background: rgba(0, 255, 0, 0.2);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    transform: translateY(-1px);
}

.airdrop-claim-btn.locked {
    background: rgba(100, 100, 100, 0.1);
    color: #666666;
    cursor: not-allowed;
    border-color: #666666;
}

.airdrop-claim-btn.locked:disabled {
    opacity: 0.6;
}

.tooltip-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 255, 0, 0.3);
}

.tooltip-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.stat-label {
    color: #888;
    font-size: 12px;
}

.stat-value {
    color: #00ff00;
    font-weight: bold;
    text-shadow: 0 0 5px #00ff00;
    font-size: 13px;
}

.tooltip-next {
    margin-bottom: 6px;
}

.next-label {
    color: #00ffff;
    font-size: 12px;
    margin-bottom: 6px;
    text-align: center;
    text-shadow: 0 0 5px #00ffff;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.progress-fill {
    height: 100%;
    background: #00ff00;
    border-radius: 3px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px #00ff00,
                0 0 20px #00ff00,
                0 0 30px #00ff00,
                inset 0 0 10px rgba(0, 255, 0, 0.5);
    animation: neonGlow 1.5s ease-in-out infinite alternate;
}

@keyframes neonGlow {
    0% {
        box-shadow: 0 0 10px #00ff00,
                    0 0 20px #00ff00,
                    0 0 30px #00ff00,
                    inset 0 0 10px rgba(0, 255, 0, 0.5);
    }
    100% {
        box-shadow: 0 0 15px #00ff00,
                    0 0 30px #00ff00,
                    0 0 40px #00ff00,
                    0 0 50px #00ff00,
                    inset 0 0 15px rgba(0, 255, 0, 0.7);
    }
}

.progress-text {
    color: #888;
    font-size: 11px;
    text-align: center;
}

.tooltip-hint {
    color: #555;
    font-size: 10px;
    text-align: center;
    font-style: italic;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 255, 0, 0.2);
}

.clearance-level {
    cursor: pointer;
    transition: text-shadow 0.2s ease;
}

.clearance-level:hover {
    text-shadow: 0 0 15px currentColor, 0 0 25px currentColor !important;
}

.terminal-scroll-arrow {
    position: absolute;
    bottom: 70px;
    right: 20px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.terminal-scroll-arrow:hover {
    opacity: 1;
}

.scroll-arrow-symbol {
    font-size: 24px;
    color: #00ff00;
    font-weight: bold;
    animation: arrowPulse 2s ease-in-out infinite;
}

@keyframes arrowPulse {
    0% { 
        opacity: 0.6;
        transform: translateY(0px);
    }
    50% { 
        opacity: 1;
        transform: translateY(3px);
    }
    100% { 
        opacity: 0.6;
        transform: translateY(0px);
    }
}

.scroll-arrow {
    font-size: 24px;
    color: #00ff00;
    font-weight: bold;
    animation: pulseArrow 2s ease-in-out infinite;
}

@keyframes pulseArrow {
    0% { 
        opacity: 0.6;
        transform: translateY(0px);
    }
    50% { 
        opacity: 1;
        transform: translateY(3px);
    }
    100% { 
        opacity: 0.6;
        transform: translateY(0px);
    }
}

/* Critical warning styles for wipe command */
.terminal-critical-warning {
    color: #ff0000 !important;
    font-weight: bold !important;
    text-shadow: 0 0 10px #ff0000 !important;
    animation: criticalBlink 1s ease-in-out infinite alternate !important;
    font-size: 1.1em !important;
}

.terminal-destructive-warning {
    color: #ff4444 !important;
    font-weight: bold !important;
    background: rgba(255, 0, 0, 0.1) !important;
    border-left: 3px solid #ff0000 !important;
    padding-left: 10px !important;
    margin: 5px 0 !important;
}

@keyframes criticalBlink {
    0% { 
        color: #ff0000;
        text-shadow: 0 0 10px #ff0000;
    }
    100% { 
        color: #ff6666;
        text-shadow: 0 0 20px #ff0000, 0 0 30px #ff0000;
    }
        }

        .terminal-container {
    width: 90% !important;
    max-width: 1200px !important;
    height: calc(100vh - 140px) !important;
    height: calc(100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; /* iOS safe area */
    margin-bottom: 20px !important; /* Add spacing at bottom */
    background-color: #000000 !important;
    border: 2px solid #00ff00 !important;
    border-radius: 15px !important;
    padding: 0 !important;
    box-shadow: 
        0 0 20px #00ff00,
        0 0 40px rgba(0, 255, 0, 0.3),
        inset 0 0 20px rgba(0, 255, 0, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    z-index: 100 !important;
    /* CRT Monitor Effects */
    background: 
        radial-gradient(ellipse at center, rgba(0,255,0,0.02) 0%, transparent 70%),
        #000000 !important;
    /* Subtle screen curvature effect */
    transform: perspective(1000px) rotateX(2deg) !important;
    /* Screen flicker effect */
    animation: screenFlicker 3s ease-in-out infinite !important;
}

@keyframes screenFlicker {
    0%, 100% { opacity: 1; }
    99.5% { opacity: 0.98; }
    99.7% { opacity: 1; }
    99.9% { opacity: 0.99; }
        }

        .terminal-text {
    flex: 1 !important;
    padding: 20px !important;
    font-size: 20px !important;
    font-family: 'VT323', monospace !important;
    line-height: 1.2 !important;
    overflow-y: auto !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    text-align: left !important;
    padding-bottom: 10px !important;
    color: #c6c6c6 !important;
    text-transform: none !important;
    /* Clean text - no glow effects */
    text-shadow: none !important;
}

.terminal-input-line {
    display: flex !important;
    align-items: center !important;
    padding: 15px 20px !important;
    background-color: #001100 !important;
    border-top: 1px solid #00ff00 !important;
    border-radius: 0 0 15px 15px !important;
    min-height: 50px !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    /* CRT Input Effects */
    box-shadow: 
        inset 0 1px 3px rgba(0, 255, 0, 0.2),
        0 0 10px rgba(0, 255, 0, 0.1) !important;
    position: relative !important;
}

.prompt {
    color: #00ff00 !important;
    font-family: 'VT323', monospace !important;
    font-size: 22px !important;
    margin-right: 10px !important;
    font-weight: bold !important;
    text-shadow: none #00ff00 !important;
    flex-shrink: 0 !important;
}

.input-container {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    position: relative !important;
    gap: 10px !important;
}

.send-button {
    display: none; /* Hidden by default */
    background: rgba(0, 255, 0, 0.2);
    border: 2px solid #00ff00;
    color: #00ff00;
    font-size: 18px;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'VT323', monospace;
    text-shadow: 0 0 5px #00ff00;
    user-select: none;
    -webkit-user-select: none;
}

.send-button:active {
    background: rgba(0, 255, 0, 0.4);
    transform: scale(0.95);
}

/* Show send button only on mobile */
@media screen and (max-width: 768px) {
    .send-button {
        display: block !important;
        flex-shrink: 0;
    }
}

.terminal-input {
    flex: 1 !important;
    background: none !important;
    border: none !important;
    color: #00ff00 !important;
    font-family: 'VT323', monospace !important;
    font-size: 22px !important;
    outline: none !important;
    caret-color: transparent !important;
    text-shadow: none #00ff00 !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    min-width: 0 !important;
}

.cursor {
    color: #00ff00 !important;
    font-family: 'VT323', monospace !important;
    font-size: 24px !important;
    animation: blink 1s infinite !important;
    margin-left: 2px !important;
    font-weight: bold !important;
    text-shadow: none #00ff00 !important;
    flex-shrink: 0 !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
        }

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

/* Typewriter effect for new content */
.typewriter {
    overflow: hidden;
    border-right: 2px solid #00ff00;
    white-space: nowrap;
    animation: typing 0.05s steps(1, end), blink-caret 1s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #00ff00; }
}

/* Scrollbar styling */
.terminal-text::-webkit-scrollbar {
    width: 12px;
}

.terminal-text::-webkit-scrollbar-track {
    background: rgba(0, 20, 0, 0.3);
    border-radius: 6px;
}

.terminal-text::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 0, 0.6);
    border-radius: 6px;
    border: 2px solid rgba(0, 20, 0, 0.3);
}

.terminal-text::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 0, 0.8);
}

/* Firefox scrollbar */
.terminal-text {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 255, 0, 0.6) rgba(0, 20, 0, 0.3);
}

/* Terminal Content Markup Styles */
.terminal-command {
    color: #00ff00 !important;
    font-weight: bold !important;
    text-shadow: none !important;
}

/* Clickable command suggestions */
.clickable-command {
    cursor: pointer !important;
    text-decoration: underline !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: rgba(0, 255, 0, 0.3) !important;
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    pointer-events: auto !important; /* Ensure clickable */
}

.clickable-command:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px #00ff00 !important;
    background: rgba(0, 255, 0, 0.1) !important;
}

.clickable-command:active {
    color: #00ff88 !important;
    background: rgba(0, 255, 0, 0.2) !important;
    transform: scale(0.98) !important;
}


.terminal-error {
    color: #ff4444 !important;
    font-weight: bold !important;
    text-shadow: none #ff4444 !important;
}

.terminal-success {
    color: #44ff44 !important;
    font-weight: bold !important;
    text-shadow: none #44ff44 !important;
}

.terminal-warning {
    color: #ffaa00 !important;
    font-weight: bold !important;
    text-shadow: none #ffaa00 !important;
}

.terminal-info {
    font-weight: bold !important;
    text-shadow: none #00aaff !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    white-space: pre !important;
    letter-spacing: 0 !important;
    display: inline !important;
}

.terminal-header {
    color: #ff00ff !important;
    font-weight: bold !important;
    text-shadow: none #ff00ff !important;
    font-size: 16px !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    white-space: pre !important;
    letter-spacing: 0 !important;
    display: block !important;
}

.terminal-subheader {
    color: #ffff00 !important;
    font-weight: bold !important;
    text-shadow: none #ffff00 !important;
    margin: 8px 0 3px 0 !important;
}

.terminal-data {
    color: #c6c6c6 !important;
    font-weight: normal !important;
    text-shadow: none !important;
    margin-left: 10px !important;
    text-transform: none !important;
}

/* Typewriter content and regular text */
.typewriter-content,
body.terminal p,
body.terminal div:not([class*="terminal-"]):not([class*="clearance"]):not([class*="autocomplete"]) {
    color: #c6c6c6 !important;
    text-transform: none !important;
    line-height: 1.2 !important;
}

.terminal-coordinates {
    color: #ff8800 !important;
    font-weight: bold !important;
    text-shadow: none #ff8800 !important;
    font-family: 'Courier New', monospace !important;
}

.terminal-binary {
    color: #aa00ff !important;
    font-weight: bold !important;
    text-shadow: none #aa00ff !important;
    font-family: 'Courier New', monospace !important;
    letter-spacing: 1px !important;
}

.terminal-separator {
    color: #666666 !important;
    margin: 15px 0 !important;
    border: none !important;
    border-top: 1px solid #333333 !important;
    opacity: 0.6 !important;
}

.terminal-prompt {
    color: #00ff00 !important;
    font-weight: bold !important;
    text-shadow: none #00ff00 !important;
}

/* Keybindings Help */
.keybindings-help {
    position: fixed !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 17, 0, 0.9) !important;
    border: 1px solid #00ff00 !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    font-family: 'VT323', monospace !important;
    font-size: 12px !important;
    color: #00ff00 !important;
    z-index: 1000 !important;
    max-width: 90% !important;
    text-align: center !important;
}

/* Hide keybindings on tablet, mobile, and smaller screens */
@media screen and (max-width: 768px) {
    .keybindings-help {
        display: none !important;
    }
    
    /* Mobile-specific terminal fixes */
    .terminal-container {
        width: 95% !important;
        height: calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        margin-bottom: 15px !important; /* Add spacing at bottom on mobile */
        border-radius: 10px !important;
        transform: none !important; /* Remove perspective effect on mobile */
    }
    
    .terminal-nav-title {
        font-size: 1.2rem !important;
    }
    
    .terminal-nav {
        padding: 8px 0;
    }
    
    .terminal-nav-content {
        padding: 0 15px;
    }
    
    .terminal-nav-logo {
        font-size: 18px;
    }
    
    .terminal-nav-title {
        font-size: 1.2rem !important;
    }
    
    .terminal-nav-links {
        gap: 8px !important;
        padding-right: 10px !important;
    }
    
    .terminal-nav .nav-icon {
        padding: 8px 6px !important;
        min-width: 44px;
        min-height: 44px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .nav-icon img {
        width: 22px !important;
        height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        object-fit: contain !important;
    }
    
    .nav-icon svg {
        width: 22px !important;
        height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
    }
    
    .terminal-input-line {
        padding: 12px 15px !important;
        min-height: 60px !important; /* Larger touch target for mobile */
        border-radius: 0 0 10px 10px !important;
    }
}

/* iPhone specific fixes for terminal */
@media (max-width: 480px) {
    .terminal-nav {
        padding: 6px 0;
    }
    
    .terminal-nav-content {
        padding: 0 10px;
    }
    
    .terminal-nav-logo {
        font-size: 16px;
    }
    
    .terminal-nav-title {
        font-size: 1rem !important;
    }
    
    .terminal-nav-links {
        gap: 6px !important;
        padding-right: 5px !important;
    }
    
    .terminal-nav .nav-icon {
        padding: 6px 4px !important;
        min-width: 40px;
        min-height: 40px;
    }
    
    .nav-icon img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }
    
    .nav-icon svg {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }
    
    .terminal-input {
        font-size: 16px !important; /* Prevent iOS zoom on focus */
    }
    
    /* Ensure input is always visible on iOS */
    .terminal-input:focus {
        position: relative !important;
        z-index: 9999 !important;
    }
    
    /* iOS-specific fixes for cursor/text selection */
    .terminal-input {
        -webkit-user-select: text !important;
        user-select: text !important;
        cursor: text !important;
    }
    
    /* Prevent iOS selection handles from breaking layout */
    .terminal-input::selection {
        background: rgba(0, 255, 0, 0.3) !important;
    }
    
    .terminal-input::-webkit-input-placeholder {
        color: rgba(0, 255, 0, 0.3) !important;
    }
}

/* Auto-complete suggestions */
.autocomplete-suggestions {
    position: absolute !important;
    bottom: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(0, 17, 0, 0.95) !important;
    border: 1px solid #00ff00 !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    max-height: 150px !important;
    overflow-y: auto !important;
    z-index: 1001 !important;
}

.autocomplete-item {
    padding: 12px 15px !important;
    font-family: 'VT323', monospace !important;
    font-size: 16px !important;
    color: #00ff00 !important;
    cursor: pointer !important;
    border-bottom: 1px solid rgba(0, 255, 0, 0.2) !important;
    min-height: 44px !important; /* iOS recommended tap target */
    display: flex !important;
    align-items: center !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: rgba(0, 255, 0, 0.3) !important;
    transition: all 0.15s ease !important;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
    background: rgba(0, 255, 0, 0.15) !important;
    color: #ffffff !important;
    text-shadow: 0 0 8px #00ff00 !important;
}

.autocomplete-item:active {
    background: rgba(0, 255, 0, 0.25) !important;
    transform: scale(0.98) !important;
}

/* Mobile-specific autocomplete optimizations */
@media screen and (max-width: 768px) {
    .autocomplete-item {
        padding: 14px 20px !important; /* Larger tap target on mobile */
        font-size: 18px !important; /* Larger text */
        min-height: 48px !important; /* Even larger tap target on mobile */
    }
}

/* Override any cursor styles for terminal page */
body.terminal {
    cursor: default !important;
}

body.terminal .terminal-input {
    cursor: text !important;
}

body.terminal .terminal-output {
    cursor: text !important;
}

/* Ensure clickable commands have pointer cursor */
body.terminal .clickable-command {
    cursor: pointer !important;
}

body.terminal .autocomplete-item {
    cursor: pointer !important;
}

body.terminal .terminal-scroll-arrow {
    cursor: pointer !important;
}

body.terminal a,
body.terminal .nav-icon {
    cursor: pointer !important;
}

/* Wipe Mode Styles - Danger State Indicators */
body.wipe-mode .terminal-container {
    border: 2px solid #ff0000 !important;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 0 0 40px rgba(255, 0, 0, 0.5), inset 0 0 20px rgba(255, 0, 0, 0.2) !important;
}

body.wipe-mode .prompt {
    color: #ff0000 !important;
    text-shadow: 0 0 5px #ff0000 !important;
    
}

body.wipe-mode .terminal-input {
    color: #ff0000 !important;
    text-shadow: 0 0 5px #ff0000 !important;
}

body.wipe-mode .terminal-input-line {
    border-top-color: #ff0000 !important;
    border-color: #ff0000 !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3) !important;
}

body.wipe-mode .cursor {
    color: #ff0000 !important;
    background-color: #ff0000 !important;
    box-shadow: 0 0 5px #ff0000 !important;
}

body.wipe-mode .keybindings-help {
    border-color: #ff0000 !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3) !important;
}

/* ASCII Art Display */
.ascii-art {
    font-family: 'Courier New', 'Courier', 'Monaco', monospace !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: pre !important;
    white-space: pre-line !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    margin: 15px 0 !important;
    padding: 20px !important;
    background: rgba(0, 20, 0, 0.4) !important;
    border: 1px solid rgba(0, 255, 0, 0.5) !important;
    border-radius: 8px !important;
    color: #00ff00 !important;
    text-align: left !important;
    display: block !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: normal !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.3) !important;
    min-height: auto !important;
}

/* Terminal Highlighting - Invert green and black */
.terminal-highlight {
    background: #00ff00 !important;
    color: #000000 !important;
    padding: 2px 4px !important;
    border-radius: 2px !important;
    font-weight: bold !important;
    text-shadow: none !important;
}

.terminal-highlight-invert {
    background: #000000 !important;
    color: #00ff00 !important;
    padding: 2px 4px !important;
    border-radius: 2px !important;
    font-weight: bold !important;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5) !important;
}

/* Mobile ASCII art adjustments */
@media screen and (max-width: 768px) {
    .ascii-art {
        font-size: 11px !important;
        padding: 15px !important;
        overflow-x: scroll !important;
        line-height: 1.0 !important;
    }
}

/* Wipe command red overlay animation */
@keyframes pulseRed {
    0% { 
        background: rgba(255, 0, 0, 0.4);
        box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.5);
    }
    100% { 
        background: rgba(255, 0, 0, 0.6);
        box-shadow: inset 0 0 150px rgba(255, 0, 0, 0.7);
    }
}

@keyframes gentleRedGlow {
    0% { 
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.5),
                     0 0 20px rgba(255, 0, 0, 0.3);
    }
    50% { 
        text-shadow: 0 0 20px rgba(255, 0, 0, 0.8),
                     0 0 30px rgba(255, 0, 0, 0.5),
                     0 0 40px rgba(255, 0, 0, 0.3);
    }
    100% { 
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.5),
                     0 0 20px rgba(255, 0, 0, 0.3);
    }
}

/* ==========================
   🏆 HIGH SCORE SYSTEM STYLES
   ========================== */

/* Score clickable styles are now in game navigation section */

/* Timer display */
#timer-display {
    font-family: 'Press Start 2P', cursive;
            font-size: 16px;
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff, 0 0 15px cyan;
    user-select: none;
    pointer-events: none;
    padding: 8px 15px;
}

#timer-display.timer-warning {
    color: #ff0000;
    text-shadow: 0 0 10px #ff0000, 0 0 15px red;
    animation: pulseWarning 0.5s infinite alternate;
}

#timer-display.timer-ended {
    color: #00ff00;
    text-shadow: 0 0 10px #00ff00, 0 0 15px green;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s ease;
}

#timer-display.timer-ended:hover {
    color: #00ffff;
    text-shadow: 0 0 15px #00ffff, 0 0 20px cyan;
    transform: scale(1.1);
}

@keyframes pulseWarning {
    from { transform: scale(1); }
    to { transform: scale(1.15); }
}

/* Game tip at bottom */
#game-tip {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    z-index: 999;
    pointer-events: none;
    animation: fadeInOut 3s ease-in-out infinite;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* High score modal */
#highscore-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.highscore-modal-content {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    border: 3px solid #00ff00;
    border-radius: 15px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.5), inset 0 0 20px rgba(0, 255, 0, 0.1);
    font-family: 'Press Start 2P', cursive;
    text-align: center;
    animation: slideIn 0.4s ease-out;
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(-50px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.highscore-modal-content h2 {
    font-size: 28px;
    color: #00ff00;
    text-shadow: 0 0 15px #00ff00, 0 0 25px green;
    margin-bottom: 30px;
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from { text-shadow: 0 0 10px #00ff00, 0 0 20px green; }
    to { text-shadow: 0 0 20px #00ff00, 0 0 40px lime; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.ayy-lmao {
    font-size: 20px;
    color: #00ff00;
    text-shadow: 0 0 15px #00ff00, 0 0 25px lime;
    margin: 10px 0 20px 0 !important;
    animation: glow 1.5s ease-in-out infinite alternate;
}

.final-score {
    font-size: 24px;
    color: #ffff00;
    text-shadow: 0 0 10px #ffff00;
    margin: 20px 0;
}

.highscore-modal-content p {
    color: #00ff00;
    font-size: 14px;
    margin: 15px 0;
    line-height: 1.8;
}

.continue-note {
    font-size: 10px !important;
    color: #888 !important;
    margin-top: 20px !important;
}

.terminal-link {
    margin-top: 25px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(0, 255, 0, 0.3);
}

.terminal-link a,
a.terminal-link {
    color: #00ff00 !important;
    text-decoration: none;
    font-size: 14px;
    text-shadow: 0 0 10px #00ff00, 0 0 15px #00ff00;
    transition: all 0.3s ease;
    display: inline-block;
    cursor: pointer;
    animation: subtleGreenPulse 2s ease-in-out infinite;
}

.terminal-link a:hover,
a.terminal-link:hover {
    color: #00ff00 !important;
    text-shadow: 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff00;
    transform: scale(1.05);
}

@keyframes subtleGreenPulse {
    0%, 100% {
        text-shadow: 0 0 10px #00ff00, 0 0 15px #00ff00;
    }
    50% {
        text-shadow: 0 0 15px #00ff00, 0 0 20px #00ff00, 0 0 25px rgba(0, 255, 0, 0.5);
    }
}

/* Social link - bigger font for share/about commands */
.social-link {
    font-size: 18px !important;
}

/* Terminal share message - full message styling */
.terminal-share-message {
    display: block !important;
    padding: 15px !important;
    margin: 10px 0 !important;
    background: rgba(0, 255, 0, 0.05) !important;
    border-left: 3px solid rgba(0, 255, 0, 0.3) !important;
    border-radius: 4px !important;
    line-height: 1.6 !important;
    transition: all 0.3s ease !important;
}

.terminal-share-message:hover {
    background: rgba(0, 255, 0, 0.1) !important;
    border-left-color: rgba(0, 255, 0, 0.6) !important;
    transform: translateX(5px) !important;
}

#username-input {
            width: 100%;
    max-width: 300px;
    padding: 15px;
    margin: 20px 0;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #00ff00;
    border-radius: 8px;
    color: #00ff00;
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
            outline: none;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
    /* Allow text selection in input */
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    -webkit-tap-highlight-color: rgba(0, 255, 0, 0.2);
}

#username-input::placeholder {
    color: rgba(0, 255, 0, 0.5);
}

#username-input:focus {
    border-color: #00ffff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
    flex-wrap: wrap;
}

.modal-buttons button {
    padding: 15px 30px;
    background: linear-gradient(135deg, #00ff00 0%, #00cc00 100%);
    border: none;
    border-radius: 8px;
    color: #000;
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
    /* Disable iOS tap highlight on buttons */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

.modal-buttons button:hover {
    background: linear-gradient(135deg, #00ffff 0%, #00cccc 100%);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.7);
    transform: scale(1.05);
}

.modal-buttons button:active {
    transform: scale(0.95);
}

#skip-score-btn,
#close-modal-btn {
    background: linear-gradient(135deg, #444 0%, #222 100%);
    color: #aaa;
    box-shadow: 0 0 10px rgba(100, 100, 100, 0.3);
}

#skip-score-btn:hover,
#close-modal-btn:hover {
    background: linear-gradient(135deg, #666 0%, #444 100%);
    color: #fff;
}

#play-again-btn {
    background: linear-gradient(135deg, #00ffff 0%, #00aaaa 100%);
    color: #000;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
}

#play-again-btn:hover {
    background: linear-gradient(135deg, #00ff00 0%, #00cc00 100%);
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.8);
    transform: scale(1.1);
}

/* High score list */
.highscore-list {
    margin: 25px 0;
    max-height: 400px;
    overflow-y: auto;
}

.highscore-entry {
    display: grid;
    grid-template-columns: 50px 1fr 100px;
    gap: 10px;
    align-items: center;
    padding: 15px;
    margin: 10px 0;
    background: rgba(0, 255, 0, 0.05);
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.highscore-entry:hover {
    background: rgba(0, 255, 0, 0.1);
    border-color: rgba(0, 255, 0, 0.6);
    transform: translateX(5px);
}

.highscore-entry .rank {
    font-size: 20px;
    text-align: center;
}

.name-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.highscore-entry .name {
    color: #00ff00;
    font-size: 14px;
    text-align: left;
    word-break: break-word;
}

.highscore-entry .score {
    color: #ffff00;
    font-size: 14px;
    text-align: right;
}

.highscore-entry .date {
    color: #666;
    font-size: 9px;
    text-align: left;
    font-style: italic;
}

.no-scores {
    color: #888 !important;
    font-size: 14px !important;
    margin: 40px 0 !important;
}

.loading-scores {
    color: #00ff00 !important;
    font-size: 14px !important;
    margin: 40px 0 !important;
    animation: glow 1.5s ease-in-out infinite alternate;
}

/* Mobile adjustments for high scores */
@media screen and (max-width: 768px) {
    .highscore-modal-content {
        padding: 25px 15px;
        max-width: 95%;
    }

    .highscore-modal-content h2 {
        font-size: 20px;
    }

    .final-score {
        font-size: 18px;
    }

    .highscore-entry {
        grid-template-columns: 40px 1fr 80px;
        gap: 8px;
        padding: 12px;
    }

    .name-container .date {
        display: none; /* Hide date on mobile */
    }

    .highscore-entry .name {
        font-size: 11px;
    }

    .highscore-entry .score {
        font-size: 12px;
    }

    .modal-buttons button {
        padding: 12px 20px;
        font-size: 11px;
    }

    #game-tip {
        font-size: 10px;
        bottom: 15px;
    }

    #timer-display {
        font-size: 11px;
        padding: 4px 8px;
    }

    #game-nav {
        padding: 10px 15px;
        grid-template-columns: auto 1fr auto;
    }

    .game-nav-logo {
        font-size: 16px;
    }

    #score {
        font-size: 12px;
        padding: 4px 8px;
    }

    .nav-icon {
        font-size: 1.4rem;
        padding: 6px 10px;
    }
    
    .game-nav-right {
        padding-right: 15px;
    }

    .game-nav-center {
        flex-direction: column;
        gap: 5px;
    }

    /* Reduce invasion mode pulse on mobile to prevent nav breakage */
    .invasion-mode #score {
        font-size: 14px !important;
        animation: pulseGlowMobile 0.2s infinite alternate !important;
    }

    @keyframes pulseGlowMobile {
        from { transform: scale(1.0); }
        to { transform: scale(1.1); }
    }

    /* 🚀 MOBILE PERFORMANCE OPTIMIZATIONS - Disable expensive CSS effects */
    /* Reduce text-shadow usage (very expensive on mobile) */
    *, *::before, *::after {
        text-shadow: none !important;
    }

    /* Keep only essential text shadows */
    #score, #timer-display, .game-nav-logo {
        text-shadow: 0 0 5px currentColor !important;
    }

    /* Disable backdrop-filter (extremely expensive) */
    #game-nav {
        backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.95) !important;
    }

    /* Simplify animations - disable most keyframe animations */
    .falling-object, .falling-message, .laser {
        animation: none !important;
    }

    /* Reduce box-shadow complexity */
    * {
        box-shadow: none !important;
    }

    /* Optimize transitions - reduce or disable */
    * {
        transition: none !important;
    }

    /* Keep essential button transitions only */
    button {
        transition: transform 0.1s ease, opacity 0.1s ease !important;
    }

    /* Disable filters */
    * {
        filter: none !important;
    }

    /* Force GPU acceleration only where needed */
    .laser, #crosshair {
        will-change: transform;
        transform: translateZ(0);
    }
}

/* Mobile-specific terminal styling */
@media screen and (max-width: 768px) {
    /* Terminal help command - better mobile layout */
    .terminal-header,
    .terminal-info {
        font-size: 11px !important;
        line-height: 1.3 !important;
        white-space: pre !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Make terminal commands more tappable on mobile */
    .terminal-command.clickable-command {
        display: inline !important;
        padding: 2px 4px !important;
        margin: 0 !important;
        font-size: 14px !important;
        text-decoration: underline !important;
    }
    
    .terminal-command.clickable-command:active {
        background: rgba(0, 255, 0, 0.1) !important;
    }
    
    /* Better spacing for terminal output on mobile */
    #terminal-output {
        font-size: 13px !important;
        line-height: 1.5 !important;
        padding: 15px 10px !important;
        overflow-x: hidden !important;
    }
    
    /* Ensure terminal content doesn't overflow horizontally */
    #terminal-output * {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
    
    /* ASCII art boxes - ensure they stay in pre format */
    #terminal-output pre {
        overflow-x: auto !important;
        white-space: pre !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Terminal input area - better mobile UX */
    #terminal-input {
        font-size: 14px !important;
        padding: 12px !important;
        min-height: 44px !important;
    }
    
    /* Send button */
    #send-button {
        font-size: 14px !important;
        padding: 12px 20px !important;
        min-height: 44px !important;
        min-width: 80px !important;
    }
    
    /* Clearance display - compact on mobile */
    #clearance-level {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }
    
    /* Autocomplete suggestions - better mobile touch targets */
    .autocomplete-item {
        padding: 12px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
}