/* ProxyGuessr - 80s Retro Arcade Theme */
/* This theme overrides the homepage styling only */

/* Import pixel font for retro look */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
    /* Retro Arcade Color Palette */
    --retro-bg-dark: #0a0a0a;
    --retro-bg-medium: #121212;
    --retro-green-primary: #00ff41;
    --retro-green-secondary: #39ff14;
    --retro-green-dark: #0d4d1a;
    --retro-green-glow: rgba(0, 255, 65, 0.6);
    --retro-white: #e0ffe0;
    --retro-border: #1a3d1a;

    /* Override primary colors for retro theme */
    --primary-color: var(--retro-green-dark);
    --primary-dark: #0a2a0a;
    --primary-light: #1a5d2a;
    --background: var(--retro-bg-dark);
    --surface: var(--retro-bg-medium);
    --text-primary: var(--retro-white);
    --text-secondary: #88aa88;
    --border: var(--retro-border);
}

/* Pixel font family */
.pixel-font {
    font-family: 'Press Start 2P', monospace !important;
}

/* Matrix-style animated background */
body {
    background: var(--retro-bg-dark);
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(ellipse at center, transparent 0%, var(--retro-bg-dark) 70%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 255, 65, 0.03) 2px,
            rgba(0, 255, 65, 0.03) 4px
        );
    pointer-events: none !important;
    z-index: -1;
}

/* Scanline effect */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.12),
        rgba(0, 0, 0, 0.12) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none !important;
    z-index: 9999;
}

/* Ensure content is above background effects */
.header, .main-content, .footer {
    position: relative;
    z-index: 2;
}

.main-content {
    overflow: visible;
}

/* Retro Header */
.header {
    background: linear-gradient(180deg, #0d1a0d 0%, var(--retro-bg-dark) 100%);
    border-bottom: none;
    box-shadow: none;
}

/* Retro Logo */
.logo {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.4rem;
    color: var(--retro-white);
    text-shadow:
        0 0 10px var(--retro-green-glow),
        0 0 20px var(--retro-green-glow),
        0 0 30px var(--retro-green-glow),
        0 0 40px var(--retro-green-primary),
        3px 3px 0 var(--retro-green-dark),
        -1px -1px 0 #000;
    letter-spacing: 2px;
    animation: textGlow 2s ease-in-out infinite alternate;
}

.logo-text {
    color: var(--retro-white);
    text-shadow: inherit;
}

@keyframes textGlow {
    from {
        text-shadow:
            0 0 10px var(--retro-green-glow),
            0 0 20px var(--retro-green-glow),
            0 0 30px var(--retro-green-glow),
            3px 3px 0 var(--retro-green-dark),
            -1px -1px 0 #000;
    }
    to {
        text-shadow:
            0 0 15px var(--retro-green-glow),
            0 0 30px var(--retro-green-glow),
            0 0 45px var(--retro-green-glow),
            0 0 60px var(--retro-green-primary),
            3px 3px 0 var(--retro-green-dark),
            -1px -1px 0 #000;
    }
}

.logo-icon .doc-icon {
    filter: drop-shadow(0 0 8px var(--retro-green-glow))
            drop-shadow(0 0 15px var(--retro-green-primary));
    color: var(--retro-green-dark);
}

.logo-icon .doc-icon rect {
    fill: var(--retro-white);
}

/* Override doc bounce with pixel-perfect animation */
@keyframes docBounce {
    0%, 100% { transform: rotate(-5deg) translateY(0); }
    50% { transform: rotate(-3deg) translateY(-4px); }
}

/* Tagline */
.tagline {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: var(--retro-green-primary);
    letter-spacing: 1px;
    opacity: 1;
}

.pennant-brand {
    color: var(--retro-green-primary);
}

.pennant-brand:hover {
    color: var(--retro-white);
    text-shadow: 0 0 10px var(--retro-green-glow);
}

.pennant-flag {
    filter: brightness(0) saturate(100%) invert(71%) sepia(98%) saturate(1168%) hue-rotate(84deg) brightness(104%) contrast(106%);
}

/* Nav Tabs - Retro Style */
.nav-tab {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    background: var(--retro-bg-medium);
    color: var(--retro-green-primary);
    border: 2px solid var(--retro-green-dark);
    border-radius: 0;
    text-transform: uppercase;
    transition: all 0.2s ease;
    box-shadow:
        inset 0 0 10px rgba(0, 255, 65, 0.1),
        0 0 5px rgba(0, 255, 65, 0.2);
}

.nav-tab:hover {
    background: var(--retro-green-dark);
    color: var(--retro-white);
    border-color: var(--retro-green-primary);
    box-shadow:
        0 0 15px var(--retro-green-glow),
        inset 0 0 15px rgba(0, 255, 65, 0.2);
}

.nav-tab.active {
    background: var(--retro-green-primary);
    color: var(--retro-bg-dark);
    border-color: var(--retro-white);
    box-shadow:
        0 0 20px var(--retro-green-glow),
        0 0 40px rgba(0, 255, 65, 0.4);
}

/* Welcome Container - Retro Arcade Cabinet Style */
.welcome-container {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    overflow: visible;
}

/* Corner decorations - removed for cleaner look */
.welcome-container::before,
.welcome-container::after {
    content: none;
}

/* Welcome Title */
.welcome-container h2,
.welcome-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.2rem;
    color: var(--retro-white);
    text-shadow:
        0 0 10px var(--retro-green-glow),
        0 0 20px var(--retro-green-glow),
        0 0 30px var(--retro-green-glow),
        4px 4px 0 var(--retro-green-dark);
    animation: textGlow 2s ease-in-out infinite alternate;
    letter-spacing: 3px;
    line-height: 1.8;
}

.welcome-logo-icon .doc-icon {
    filter: drop-shadow(0 0 8px var(--retro-green-glow));
    color: var(--retro-green-dark);
}

.welcome-logo-icon .doc-icon rect {
    fill: var(--retro-white);
}

/* Subtitle */
.subtitle {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    color: var(--retro-green-primary);
    text-shadow: 0 0 10px var(--retro-green-glow);
    letter-spacing: 1px;
    line-height: 2;
}

/* Username Section */
.username-section label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: var(--retro-green-primary);
    text-transform: uppercase;
}

.username-section input {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    background: var(--retro-bg-dark);
    color: var(--retro-green-primary);
    border: 2px solid var(--retro-green-dark);
    border-radius: 0;
    caret-color: var(--retro-green-primary);
}

.username-section input:focus {
    border-color: var(--retro-green-primary);
    box-shadow:
        0 0 15px var(--retro-green-glow),
        inset 0 0 10px rgba(0, 255, 65, 0.1);
    outline: none;
}

.username-section input::placeholder {
    color: var(--retro-green-dark);
}

.username-hint {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--retro-green-dark);
}

/* Retro Buttons */
.btn {
    font-family: 'Press Start 2P', monospace;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--retro-green-dark);
    color: var(--retro-white);
    border: 3px solid var(--retro-green-primary);
    box-shadow:
        0 0 15px var(--retro-green-glow),
        inset 0 0 15px rgba(0, 255, 65, 0.2);
}

.btn-primary:hover {
    background: var(--retro-green-primary);
    color: var(--retro-bg-dark);
    box-shadow:
        0 0 30px var(--retro-green-glow),
        0 0 50px rgba(0, 255, 65, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.btn-primary:active {
    transform: translateY(2px);
    box-shadow:
        0 0 10px var(--retro-green-glow),
        inset 0 0 30px rgba(0, 0, 0, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--retro-green-primary);
    border: 2px solid var(--retro-green-primary);
}

.btn-secondary:hover {
    background: var(--retro-green-dark);
    color: var(--retro-white);
    box-shadow: 0 0 20px var(--retro-green-glow);
}

.btn-large {
    font-size: 0.8rem;
    padding: 1.2rem 2.5rem;
}

/* Feedback Box - Retro Style */
.feedback-box {
    background: linear-gradient(180deg, #0d1a0d 0%, var(--retro-bg-medium) 100%);
    border: 2px solid var(--retro-green-primary);
    border-radius: 0;
    box-shadow:
        0 0 20px var(--retro-green-glow),
        inset 0 0 15px rgba(0, 255, 65, 0.1);
}

.feedback-box h3 {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    color: var(--retro-green-primary);
    text-shadow: 0 0 10px var(--retro-green-glow);
}

.feedback-box p {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: var(--retro-white);
    line-height: 1.8;
}

.feedback-box .btn-small {
    font-size: 0.55rem;
}

.feedback-box .btn-secondary {
    background: var(--retro-bg-dark);
}

/* Footer - Retro Style */
.footer {
    background: var(--retro-bg-dark);
    border-top: none;
    box-shadow: none;
    padding: 1rem 0;
    margin-top: 0.5rem;
}

.footer p {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--retro-green-primary);
    line-height: 2;
}

.footer-link {
    color: var(--retro-white);
    border-bottom-color: var(--retro-green-primary);
}

.footer-made-in {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.45rem;
    color: var(--retro-white);
    opacity: 0.9;
}

.usa-flag-icon {
    width: 1.4rem;
    height: auto;
    flex-shrink: 0;
}

.footer-link:hover {
    text-shadow: 0 0 10px var(--retro-green-glow);
}

.pennant-flag-footer {
    filter: brightness(0) saturate(100%) invert(71%) sepia(98%) saturate(1168%) hue-rotate(84deg) brightness(104%) contrast(106%);
}

.footer-contact {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: var(--retro-green-dark);
    margin-top: 0.5rem;
}

.footer-email {
    color: var(--retro-green-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--retro-green-dark);
    transition: all 0.2s ease;
}

.footer-email:hover {
    color: var(--retro-white);
    border-bottom-color: var(--retro-green-primary);
    text-shadow: 0 0 10px var(--retro-green-glow);
}

/* AI Summary Section - Retro Style */
.ai-summary-section {
    border-bottom-color: var(--retro-green-dark);
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

.ai-summary-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: var(--retro-green-primary);
    text-shadow: 0 0 10px var(--retro-green-glow);
    line-height: 1.8;
    opacity: 1;
}

.ai-logos {
    gap: var(--spacing-lg);
}

.ai-logo-link {
    opacity: 0.7;
}

.ai-logo-link:hover {
    opacity: 1;
    filter: drop-shadow(0 0 8px var(--retro-green-glow));
}

.ai-logo {
    width: 28px;
    height: 28px;
    fill: var(--retro-green-primary);
    stroke: var(--retro-green-primary);
}

/* Floating CTA - Retro Style */
.floating-cta {
    background: linear-gradient(180deg, #0d1a0d 0%, var(--retro-bg-medium) 100%);
    border: 3px solid var(--retro-green-primary);
    border-radius: 0;
    box-shadow:
        0 0 30px var(--retro-green-glow),
        0 0 50px rgba(0, 255, 65, 0.3);
}

.floating-cta-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: var(--retro-white);
    line-height: 1.8;
}

.btn-cta {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    background: var(--retro-green-primary);
    color: var(--retro-bg-dark);
    border: 2px solid var(--retro-white);
    border-radius: 0;
}

.btn-cta:hover {
    background: var(--retro-white);
    box-shadow: 0 0 20px var(--retro-green-glow);
}

.pennant-flag-cta {
    filter: brightness(0);
}

.close-cta {
    color: var(--retro-green-primary);
}

.close-cta:hover {
    color: var(--retro-white);
    background: var(--retro-green-dark);
}

/* Simplified Centered Landing Page */
.welcome-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 3rem 2rem;
    position: relative;
}

/* Pac-Man Chase Animation - visible inline element */
.pacman-chase {
    position: relative;
    width: 100%;
    max-width: 550px;
    height: 70px;
    margin: 1rem 0 2rem 0;
    overflow: visible;
}

/* Pac-Man */
.pacman {
    position: absolute;
    width: 48px;
    height: 48px;
    top: 50%;
    transform: translateY(-50%);
    filter: drop-shadow(0 0 10px rgba(0, 255, 65, 0.8));
    animation: pacmanMove 6s linear infinite;
    z-index: 10;
}

.pacman svg {
    width: 100%;
    height: 100%;
}

/* Pac-Man mouth chomping animation */
.pacman-mouth {
    animation: chomp 0.15s linear infinite;
    transform-origin: 20px 20px;
}

@keyframes chomp {
    0%, 100% {
        d: path("M20,20 L38,8 L38,32 Z");
    }
    50% {
        d: path("M20,20 L38,18 L38,22 Z");
    }
}

/* Pac-Man movement across container */
@keyframes pacmanMove {
    0% { left: -50px; }
    100% { left: 100%; }
}

/* Proxy document dots */
.proxy-dot {
    position: absolute;
    width: 42px;
    height: 52px;
    top: 50%;
    transform: translateY(-50%);
    filter: drop-shadow(0 0 8px rgba(0, 255, 65, 0.6));
    z-index: 5;
}

.proxy-dot svg {
    width: 100%;
    height: 100%;
}

/* Paper burst effect - ripped paper pieces */
.paper-burst {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Paper scraps that fly out when eaten */
.paper-burst::before,
.paper-burst::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #e0ffe0;
    border: 1px solid #0d4d1a;
    opacity: 0;
    transform-origin: center;
}

.paper-burst::before {
    clip-path: polygon(0 0, 100% 30%, 70% 100%, 20% 80%);
}

.paper-burst::after {
    clip-path: polygon(30% 0, 100% 20%, 80% 100%, 0 70%);
}

/* Position proxy documents across the track */
.proxy-dot-1 { left: 55px; }
.proxy-dot-2 { left: 135px; }
.proxy-dot-3 { left: 215px; }
.proxy-dot-4 { left: 295px; }
.proxy-dot-5 { left: 375px; }

/* Individual animations for each dot */
.proxy-dot-1 svg { animation: proxyEaten1 6s linear infinite; }
.proxy-dot-2 svg { animation: proxyEaten2 6s linear infinite; }
.proxy-dot-3 svg { animation: proxyEaten3 6s linear infinite; }
.proxy-dot-4 svg { animation: proxyEaten4 6s linear infinite; }
.proxy-dot-5 svg { animation: proxyEaten5 6s linear infinite; }

/* Paper burst animations for each dot */
.proxy-dot-1 .paper-burst::before { animation: paperScrap1a 6s linear infinite; }
.proxy-dot-1 .paper-burst::after { animation: paperScrap1b 6s linear infinite; }
.proxy-dot-2 .paper-burst::before { animation: paperScrap2a 6s linear infinite; }
.proxy-dot-2 .paper-burst::after { animation: paperScrap2b 6s linear infinite; }
.proxy-dot-3 .paper-burst::before { animation: paperScrap3a 6s linear infinite; }
.proxy-dot-3 .paper-burst::after { animation: paperScrap3b 6s linear infinite; }
.proxy-dot-4 .paper-burst::before { animation: paperScrap4a 6s linear infinite; }
.proxy-dot-4 .paper-burst::after { animation: paperScrap4b 6s linear infinite; }
.proxy-dot-5 .paper-burst::before { animation: paperScrap5a 6s linear infinite; }
.proxy-dot-5 .paper-burst::after { animation: paperScrap5b 6s linear infinite; }

@keyframes proxyEaten1 {
    0%, 15% { opacity: 1; transform: scale(1); }
    16%, 17% { opacity: 1; transform: scale(1.1); }
    18% { opacity: 0; transform: scale(0); }
    95% { opacity: 0; }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes proxyEaten2 {
    0%, 29% { opacity: 1; transform: scale(1); }
    30%, 31% { opacity: 1; transform: scale(1.1); }
    32% { opacity: 0; transform: scale(0); }
    95% { opacity: 0; }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes proxyEaten3 {
    0%, 43% { opacity: 1; transform: scale(1); }
    44%, 45% { opacity: 1; transform: scale(1.1); }
    46% { opacity: 0; transform: scale(0); }
    95% { opacity: 0; }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes proxyEaten4 {
    0%, 57% { opacity: 1; transform: scale(1); }
    58%, 59% { opacity: 1; transform: scale(1.1); }
    60% { opacity: 0; transform: scale(0); }
    95% { opacity: 0; }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes proxyEaten5 {
    0%, 71% { opacity: 1; transform: scale(1); }
    72%, 73% { opacity: 1; transform: scale(1.1); }
    74% { opacity: 0; transform: scale(0); }
    95% { opacity: 0; }
    100% { opacity: 1; transform: scale(1); }
}

/* Paper scrap keyframes - pieces flying out in different directions */
@keyframes paperScrap1a {
    0%, 16% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
    17% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
    25% { opacity: 0; transform: translate(-30px, -40px) rotate(180deg); }
    100% { opacity: 0; }
}
@keyframes paperScrap1b {
    0%, 16% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
    17% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
    25% { opacity: 0; transform: translate(-25px, 30px) rotate(-120deg); }
    100% { opacity: 0; }
}

@keyframes paperScrap2a {
    0%, 30% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
    31% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
    39% { opacity: 0; transform: translate(-30px, -40px) rotate(180deg); }
    100% { opacity: 0; }
}
@keyframes paperScrap2b {
    0%, 30% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
    31% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
    39% { opacity: 0; transform: translate(-25px, 30px) rotate(-120deg); }
    100% { opacity: 0; }
}

@keyframes paperScrap3a {
    0%, 44% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
    45% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
    53% { opacity: 0; transform: translate(-30px, -40px) rotate(180deg); }
    100% { opacity: 0; }
}
@keyframes paperScrap3b {
    0%, 44% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
    45% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
    53% { opacity: 0; transform: translate(-25px, 30px) rotate(-120deg); }
    100% { opacity: 0; }
}

@keyframes paperScrap4a {
    0%, 58% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
    59% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
    67% { opacity: 0; transform: translate(-30px, -40px) rotate(180deg); }
    100% { opacity: 0; }
}
@keyframes paperScrap4b {
    0%, 58% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
    59% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
    67% { opacity: 0; transform: translate(-25px, 30px) rotate(-120deg); }
    100% { opacity: 0; }
}

@keyframes paperScrap5a {
    0%, 72% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
    73% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
    81% { opacity: 0; transform: translate(-30px, -40px) rotate(180deg); }
    100% { opacity: 0; }
}
@keyframes paperScrap5b {
    0%, 72% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
    73% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
    81% { opacity: 0; transform: translate(-25px, 30px) rotate(-120deg); }
    100% { opacity: 0; }
}

/* Responsive - smaller on mobile */
@media (max-width: 768px) {
    .pacman-chase {
        max-width: 360px;
        height: 55px;
    }

    .pacman {
        width: 36px;
        height: 36px;
    }

    .proxy-dot {
        width: 30px;
        height: 38px;
    }

    .proxy-dot-1 { left: 35px; }
    .proxy-dot-2 { left: 95px; }
    .proxy-dot-3 { left: 155px; }
    .proxy-dot-4 { left: 215px; }
    .proxy-dot-5 { left: 275px; }
}

@media (max-width: 480px) {
    .pacman-chase {
        display: none;
    }
}

/* Hero Title - Large and Prominent */
.hero-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 2.5rem;
    color: var(--retro-white);
    text-shadow:
        0 0 10px var(--retro-green-glow),
        0 0 20px var(--retro-green-glow),
        0 0 40px var(--retro-green-glow),
        0 0 60px var(--retro-green-primary),
        4px 4px 0 var(--retro-green-dark);
    animation: textGlow 2s ease-in-out infinite alternate;
    letter-spacing: 0;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-title .welcome-logo-icon {
    width: 2.8rem;
    height: 2.8rem;
    margin: 0 -0.35em;
}

/* Hero Subtitle - Powered by Pennant */
.hero-subtitle {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    color: var(--retro-green-primary);
    text-shadow: 0 0 15px var(--retro-green-glow);
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
}

.pennant-link {
    color: var(--retro-white);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.3s ease;
}

.pennant-link:hover {
    text-shadow: 0 0 20px var(--retro-green-glow);
}

.pennant-flag-hero {
    width: 1.5rem;
    height: auto;
    filter: brightness(0) saturate(100%) invert(71%) sepia(98%) saturate(1168%) hue-rotate(84deg) brightness(104%) contrast(106%);
}

/* Hero Actions */
.hero-actions {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: center;
    justify-content: center;
}

.hero-actions .btn-primary.btn-large {
    font-size: 1rem;
    padding: 1.5rem 3rem;
}

.hero-actions .btn-secondary {
    font-size: 0.7rem;
    padding: 1rem 1.5rem;
}

/* Simplified Username Input */
.welcome-centered .username-section {
    margin: 0;
    max-width: 450px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.welcome-centered .username-section input {
    text-align: center;
    font-size: 0.6rem;
    padding: 1rem 1.5rem;
    width: 100%;
}

.welcome-centered .username-section input::placeholder {
    color: var(--retro-green-dark);
    opacity: 1;
}

/* How to Play section - centered below username */
.how-to-play-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
}

.how-to-play-section .btn-secondary {
    font-size: 0.45rem !important;
    padding: 0.5rem 1rem !important;
    border-width: 1px !important;
}

/* Joystick decoration under title */
.hero-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 50px;
    position: absolute;
    bottom: -55px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'%3E%3Crect x='5' y='35' width='50' height='10' fill='%23e0ffe0' stroke='%230d4d1a' stroke-width='2'/%3E%3Crect x='26' y='15' width='8' height='25' fill='%23e0ffe0' stroke='%230d4d1a' stroke-width='2'/%3E%3Ccircle cx='30' cy='12' r='10' fill='%23e0ffe0' stroke='%230d4d1a' stroke-width='2'/%3E%3Cpath d='M0 25 L10 20 L10 30 Z' fill='%23e0ffe0'/%3E%3Cpath d='M60 25 L50 20 L50 30 Z' fill='%23e0ffe0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 0 10px rgba(0, 255, 65, 0.6));
    animation: joystickGlow 2s ease-in-out infinite alternate;
}

/* Make hero-title position relative for joystick */
.hero-title {
    position: relative;
    margin-bottom: 3.5rem;
}

@keyframes joystickGlow {
    from { filter: drop-shadow(0 0 10px rgba(0, 255, 65, 0.4)); }
    to { filter: drop-shadow(0 0 20px rgba(0, 255, 65, 0.8)); }
}

/* Responsive Hero */
@media (max-width: 768px) {
    .hero-title {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }

    .hero-title .welcome-logo-icon {
        width: 2rem;
        height: 2rem;
    }

    .hero-subtitle {
        font-size: 0.65rem;
    }

    .hero-actions {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        max-width: 300px;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-title::after {
        width: 60px;
        height: 50px;
        bottom: -65px;
    }

    .hero-title {
        margin-bottom: 4rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.1rem;
    }

    .hero-title .welcome-logo-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .hero-subtitle {
        font-size: 0.55rem;
        flex-direction: column;
        gap: 0.3rem;
    }
}

/* Modal - Retro Style */
.modal-content {
    background: linear-gradient(180deg, #0d1a0d 0%, var(--retro-bg-medium) 100%);
    border: 3px solid var(--retro-green-primary);
    border-radius: 0;
    box-shadow: 0 0 40px var(--retro-green-glow);
}

.modal-content h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    color: var(--retro-green-primary);
    text-shadow: 0 0 10px var(--retro-green-glow);
}

.modal-content h3 {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    color: var(--retro-green-primary);
}

.modal-content p,
.modal-content li {
    font-family: 'DM Sans', sans-serif;
    color: var(--retro-white);
}

.modal-close {
    color: var(--retro-green-primary);
}

.modal-close:hover {
    color: var(--retro-white);
    text-shadow: 0 0 10px var(--retro-green-glow);
}

.instructions li:before {
    color: var(--retro-green-primary);
    content: ">";
}

/* Leaderboard - Retro Style */
.leaderboard-container {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.leaderboard-container h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 1rem;
    color: var(--retro-green-primary);
    text-shadow: 0 0 15px var(--retro-green-glow);
}

.tier-badge {
    border-radius: 0;
    border-width: 3px;
}

.tier-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
}

.tier-desc {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
}

.filter-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    border-radius: 0;
    background: var(--retro-bg-dark);
    color: var(--retro-green-primary);
    border: 2px solid var(--retro-green-dark);
}

.filter-btn:hover {
    border-color: var(--retro-green-primary);
    box-shadow: 0 0 10px var(--retro-green-glow);
}

.filter-btn.active {
    background: var(--retro-green-primary);
    color: var(--retro-bg-dark);
    border-color: var(--retro-white);
    box-shadow: 0 0 15px var(--retro-green-glow);
}

.leaderboard-list {
    border: 2px solid var(--retro-green-primary);
    border-radius: 0;
}

.leaderboard-header {
    background: var(--retro-green-dark);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
}

.leaderboard-entry {
    border-bottom-color: var(--retro-green-dark);
    background: var(--retro-bg-dark);
    font-family: 'DM Sans', sans-serif;
}

.leaderboard-entry:hover {
    background: var(--retro-bg-medium);
}

.rank-col, .score-col {
    color: var(--retro-green-primary);
}

.name-col {
    color: var(--retro-white);
}

.date-col {
    color: var(--retro-green-dark);
}

.stat-card {
    background: var(--retro-bg-dark);
    border: 2px solid var(--retro-green-dark);
    border-radius: 0;
}

.stat-value {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.5rem;
    color: var(--retro-green-primary);
    text-shadow: 0 0 10px var(--retro-green-glow);
}

.stat-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    color: var(--retro-white);
}

/* Game Screen - Maintaining readability */
#gameScreen .score-panel {
    background: var(--retro-bg-medium);
    border: 2px solid var(--retro-green-primary);
    border-radius: 0;
}

#gameScreen .score-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--retro-green-primary);
}

#gameScreen .score-value {
    font-family: 'Press Start 2P', monospace;
    color: var(--retro-white);
    text-shadow: 0 0 10px var(--retro-green-glow);
}

#gameScreen .timer-item {
    background: var(--retro-green-dark);
    border: 2px solid var(--retro-green-primary);
}

#gameScreen .input-section {
    background: var(--retro-bg-medium);
    border: 2px solid var(--retro-green-primary);
    border-radius: 0;
}

#gameScreen .input-section h3 {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: var(--retro-green-primary);
}

#gameScreen .choice-btn {
    font-family: 'DM Sans', sans-serif;
    background: var(--retro-bg-dark);
    color: var(--retro-white);
    border: 3px solid var(--retro-green-dark);
    border-radius: 0;
}

#gameScreen .choice-btn:hover:not(:disabled) {
    background: var(--retro-green-dark);
    border-color: var(--retro-green-primary);
    box-shadow: 0 0 15px var(--retro-green-glow);
}

#gameScreen .choice-btn.correct {
    background: var(--retro-green-dark);
    border-color: var(--retro-green-primary);
    box-shadow: 0 0 20px var(--retro-green-glow);
}

#gameScreen .choice-btn.incorrect {
    background: #4d0d0d;
    border-color: #ff4141;
    box-shadow: 0 0 20px rgba(255, 65, 65, 0.6);
}

#gameScreen .proxy-display {
    background: var(--retro-bg-medium);
    border: 2px solid var(--retro-green-primary);
    border-radius: 0;
    box-shadow: 0 0 20px var(--retro-green-glow);
}

/* Feedback Overlay - Retro Style */
.feedback-overlay-content {
    background: linear-gradient(180deg, #0d1a0d 0%, var(--retro-bg-medium) 100%);
    border: 3px solid var(--retro-green-primary);
    border-radius: 0;
    box-shadow: 0 0 40px var(--retro-green-glow);
}

.feedback-message h3 {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.2rem;
}

.feedback-message p {
    font-family: 'DM Sans', sans-serif;
}

.feedback-message.correct {
    background: linear-gradient(135deg, var(--retro-green-dark) 0%, #1a5d2a 100%);
    border: 2px solid var(--retro-green-primary);
}

.feedback-message.incorrect {
    background: linear-gradient(135deg, #4d0d0d 0%, #6d1a1a 100%);
    border: 2px solid #ff4141;
}

/* Game Over - Retro Style */
.game-over h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.2rem;
    color: var(--retro-green-primary);
    text-shadow: 0 0 15px var(--retro-green-glow);
}

.game-over p {
    font-family: 'DM Sans', sans-serif;
    color: var(--retro-white);
}

.final-score-big {
    font-family: 'Press Start 2P', monospace !important;
    color: var(--retro-green-primary) !important;
    text-shadow: 0 0 20px var(--retro-green-glow) !important;
}

.leaderboard-saved {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem !important;
    color: var(--retro-green-primary);
}

/* Times Up Overlay - Retro Style */
.times-up-content {
    background: linear-gradient(180deg, #1a0d0d 0%, #2a1212 100%);
    border: 3px solid #ff4141;
    border-radius: 0;
    box-shadow: 0 0 40px rgba(255, 65, 65, 0.6);
}

.times-up-content h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.5rem;
    color: #ff4141;
    text-shadow: 0 0 20px rgba(255, 65, 65, 0.6);
}

.times-up-content p {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: #ffaaaa;
}

/* Floating Icon - Retro Arcade Style */
.floating-icon {
    background: var(--retro-bg-dark);
    border: 4px solid var(--retro-green-primary);
    border-radius: 0;
    padding: 2rem;
    box-shadow:
        0 0 30px var(--retro-green-glow),
        0 0 50px rgba(0, 255, 65, 0.4),
        inset 0 0 20px rgba(0, 255, 65, 0.1);
}

.floating-icon.correct {
    border-color: var(--retro-green-primary);
    box-shadow:
        0 0 40px var(--retro-green-glow),
        0 0 60px rgba(0, 255, 65, 0.5),
        inset 0 0 30px rgba(0, 255, 65, 0.15);
}

.floating-icon.incorrect {
    border-color: #ff4141;
    box-shadow:
        0 0 40px rgba(255, 65, 65, 0.6),
        0 0 60px rgba(255, 65, 65, 0.4),
        inset 0 0 30px rgba(255, 65, 65, 0.1);
}

.floating-icon .floating-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 2rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.floating-icon.correct .floating-text {
    color: var(--retro-green-primary);
    text-shadow:
        0 0 15px var(--retro-green-glow),
        0 0 30px var(--retro-green-glow),
        3px 3px 0 var(--retro-green-dark);
}

.floating-icon.incorrect .floating-text {
    color: #ff4141;
    text-shadow:
        0 0 15px rgba(255, 65, 65, 0.8),
        0 0 30px rgba(255, 65, 65, 0.6),
        3px 3px 0 #4d0d0d;
}

.floating-icon .floating-company {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    color: var(--retro-white);
    background: var(--retro-green-dark);
    padding: 0.8rem 1.5rem;
    border: 2px solid var(--retro-green-primary);
    border-radius: 0;
    box-shadow:
        0 0 15px var(--retro-green-glow),
        inset 0 0 10px rgba(0, 255, 65, 0.1);
}

.floating-icon.incorrect .floating-company {
    background: #4d0d0d;
    border-color: #ff4141;
    box-shadow:
        0 0 15px rgba(255, 65, 65, 0.6),
        inset 0 0 10px rgba(255, 65, 65, 0.1);
}

/* Responsive adjustments for pixel font */
@media (max-width: 768px) {
    .logo {
        font-size: 1rem;
    }

    .tagline {
        font-size: 0.5rem;
    }

    .welcome-container h2,
    .welcome-title {
        font-size: 0.8rem;
        line-height: 2;
    }

    .subtitle {
        font-size: 0.5rem;
    }

    .btn-large {
        font-size: 0.6rem;
        padding: 1rem 1.5rem;
    }

    .nav-tab {
        font-size: 0.5rem;
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 0.8rem;
    }

    .welcome-container h2,
    .welcome-title {
        font-size: 0.65rem;
    }

    .btn-large {
        font-size: 0.5rem;
    }

    .floating-icon .floating-text {
        font-size: 1.2rem;
    }

    .floating-icon .floating-company {
        font-size: 0.6rem;
        padding: 0.5rem 1rem;
    }
}

/* ==========================================
   PASSWORD GATE - ARCADE THEME
   ========================================== */

/* Password gate overlay */
#passwordGate {
    background: var(--retro-bg-dark);
    font-family: 'Press Start 2P', monospace;
}

/* Scanline effect overlay for password gate */
#passwordGate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 255, 65, 0.03) 0px,
        rgba(0, 255, 65, 0.03) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 1;
    animation: scanline 8s linear infinite;
}

/* Password gate content box */
.password-gate-content {
    background: var(--retro-bg-dark) !important;
    border: 4px solid var(--retro-green-primary) !important;
    border-radius: 0 !important;
    box-shadow:
        0 0 40px var(--retro-green-glow),
        0 0 80px rgba(0, 255, 65, 0.3),
        inset 0 0 30px rgba(0, 255, 65, 0.1) !important;
    position: relative;
    z-index: 2;
    max-width: 550px !important;
    width: 95% !important;
}

/* Password gate title */
.password-gate-content h2 {
    font-family: 'Press Start 2P', monospace !important;
    color: var(--retro-green-primary) !important;
    font-size: 0.9rem !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 2rem !important;
    text-shadow:
        0 0 10px var(--retro-green-glow),
        0 0 20px rgba(0, 255, 65, 0.5);
    animation: textGlow 2s ease-in-out infinite;
}

/* Password gate description */
.password-gate-content p {
    font-family: 'Press Start 2P', monospace !important;
    color: var(--retro-green-primary) !important;
    opacity: 0.8;
    font-size: 0.6rem !important;
    line-height: 1.8 !important;
    margin-bottom: 2rem !important;
}

/* Password input field */
#passwordInput {
    background: rgba(0, 255, 65, 0.05) !important;
    border: 3px solid var(--retro-green-primary) !important;
    border-radius: 0 !important;
    color: var(--retro-green-primary) !important;
    font-family: 'Press Start 2P', monospace !important;
    font-size: 0.8rem !important;
    padding: 1rem !important;
    box-shadow:
        inset 0 0 15px rgba(0, 255, 65, 0.2),
        0 0 10px rgba(0, 255, 65, 0.3) !important;
    transition: all 0.3s ease;
}

#passwordInput:focus {
    outline: none !important;
    border-color: var(--retro-green-primary) !important;
    box-shadow:
        inset 0 0 20px rgba(0, 255, 65, 0.3),
        0 0 20px var(--retro-green-glow),
        0 0 40px rgba(0, 255, 65, 0.4) !important;
    background: rgba(0, 255, 65, 0.08) !important;
}

#passwordInput::placeholder {
    color: rgba(0, 255, 65, 0.4) !important;
    font-family: 'Press Start 2P', monospace !important;
}

/* Password submit button */
.password-gate-content button[type="submit"] {
    background: var(--retro-bg-dark) !important;
    border: 3px solid var(--retro-green-primary) !important;
    border-radius: 0 !important;
    color: var(--retro-green-primary) !important;
    font-family: 'Press Start 2P', monospace !important;
    font-size: 0.7rem !important;
    padding: 1rem 2rem !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 0 15px var(--retro-green-glow),
        inset 0 0 10px rgba(0, 255, 65, 0.1) !important;
}

.password-gate-content button[type="submit"]:hover {
    background: rgba(0, 255, 65, 0.1) !important;
    box-shadow:
        0 0 25px var(--retro-green-glow),
        0 0 50px rgba(0, 255, 65, 0.4),
        inset 0 0 20px rgba(0, 255, 65, 0.2) !important;
    transform: scale(1.05);
}

.password-gate-content button[type="submit"]:active {
    transform: scale(0.98);
}

/* Password error message */
#passwordError {
    font-family: 'Press Start 2P', monospace !important;
    color: #ff4141 !important;
    background: rgba(255, 65, 65, 0.1) !important;
    border: 2px solid #ff4141 !important;
    border-radius: 0 !important;
    padding: 1rem !important;
    font-size: 0.6rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow:
        0 0 15px rgba(255, 65, 65, 0.4),
        inset 0 0 10px rgba(255, 65, 65, 0.1) !important;
}

/* Shake animation for error */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* Responsive password gate */
@media (max-width: 768px) {
    .password-gate-logo .logo {
        font-size: 1.3rem !important;
        letter-spacing: 1px !important;
    }

    .password-gate-content h2 {
        font-size: 0.65rem !important;
        letter-spacing: 1.5px;
    }

    .password-gate-content p {
        font-size: 0.5rem !important;
    }

    #passwordInput {
        font-size: 0.6rem !important;
    }

    .password-gate-content button[type="submit"] {
        font-size: 0.5rem !important;
        padding: 0.8rem 1.5rem !important;
    }

    #passwordError {
        font-size: 0.5rem !important;
    }
}

@media (max-width: 480px) {
    .password-gate-content {
        width: 92% !important;
        padding: 1.5rem !important;
    }

    .password-gate-logo .logo {
        font-size: 0.9rem !important;
        max-width: 100%;
        overflow-wrap: break-word;
        letter-spacing: 0.5px !important;
    }

    .password-gate-content h2 {
        font-size: 0.55rem !important;
    }

    .password-gate-content p {
        font-size: 0.45rem !important;
        line-height: 1.6 !important;
    }

    #passwordInput {
        font-size: 0.5rem !important;
        padding: 0.8rem !important;
    }

    .password-gate-content button[type="submit"] {
        font-size: 0.45rem !important;
        padding: 0.7rem 1.2rem !important;
    }
}

@media (max-width: 390px) {
    .password-gate-logo .logo {
        font-size: 0.8rem !important;
        letter-spacing: 0px !important;
    }

    .password-gate-content h2 {
        font-size: 0.5rem !important;
    }
}

@media (max-width: 360px) {
    .password-gate-logo .logo {
        font-size: 0.75rem !important;
        letter-spacing: 0px !important;
    }

    .password-gate-content h2 {
        font-size: 0.45rem !important;
    }
}

/* AI Summary Section - Responsive Retro */
@media (max-width: 768px) {
    .ai-summary-title {
        font-size: 0.5rem;
    }

    .ai-logo {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 480px) {
    .ai-summary-title {
        font-size: 0.45rem;
        line-height: 1.6;
    }

    .ai-logos {
        gap: var(--spacing-md);
    }

    .ai-logo {
        width: 20px;
        height: 20px;
    }
}