/* Light Theme Overrides */
html:not(.dark) .apm-test-page {
    color: #0f172a;
    background-color: #ffffff !important;
}

html:not(.dark) body {
    background-color: #ffffff !important;
}

html:not(.dark) .apm-test-page .apple-glass {
    background: #ffffff !important;
    border-color: rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.03) !important;
}

html:not(.dark) .apm-workspace {
    background-color: #f8fafc !important;
    background-image: 
        linear-gradient(rgba(14, 165, 233, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 165, 233, 0.06) 1px, transparent 1px) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 30px -10px rgba(14, 165, 233, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) #start-prompt {
    background: rgba(248, 250, 252, 0.92) !important;
}

html:not(.dark) #start-prompt h3 {
    color: #0f172a !important;
}

html:not(.dark) #start-prompt p {
    color: #475569 !important;
}

html:not(.dark) #final-scorecard {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid #cbd5e1 !important;
}

html:not(.dark) #final-scorecard h3,
html:not(.dark) #card-apm,
html:not(.dark) #card-accuracy {
    color: #0f172a !important;
}

html:not(.dark) #card-rank-desc {
    color: #475569 !important;
}

html:not(.dark) .target-click {
    background: rgba(14, 165, 233, 0.15) !important;
    border-color: #0ea5e9 !important;
    color: #0284c7 !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.25) !important;
}

html:not(.dark) .target-keypress {
    background: rgba(168, 85, 247, 0.15) !important;
    border-color: #a855f7 !important;
    color: #9333ea !important;
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.25) !important;
}

html:not(.dark) .neon-text-sky {
    color: #0284c7 !important;
    text-shadow: none !important;
}

/* Scrollbar styling for Real-time APM Tracking chart */
.apm-chart-scroll-container::-webkit-scrollbar {
    height: 6px;
}

.apm-chart-scroll-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 9999px;
}

html.dark .apm-chart-scroll-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.apm-chart-scroll-container::-webkit-scrollbar-thumb {
    background: #0ea5e9;
    border-radius: 9999px;
}

.apm-chart-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #0284c7;
}


/* APM workspace coordinates grid background */
.apm-workspace {
    position: relative;
    width: 100%;
    background-color: rgba(9, 9, 11, 0.7);
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    user-select: none;
}

/* APM target node circles */
.apm-target {
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-family: monospace;
    animation: spawn-bounce 0.16s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    cursor: pointer;
    border: 2px solid;
    user-select: none;
}

/* Click target style (Blue) */
.target-click {
    width: 52px;
    height: 52px;
    background: rgba(14, 165, 233, 0.18);
    border-color: #0ea5e9;
    color: #38bdf8;
    box-shadow: 0 0 14px rgba(14, 165, 233, 0.25);
}

/* Keyboard target style (Purple) */
.target-keypress {
    width: 46px;
    height: 46px;
    background: rgba(168, 85, 247, 0.18);
    border-color: #a855f7;
    color: #c084fc;
    font-size: 15px;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.25);
}

/* Target spawn scale bounce animation */
@keyframes spawn-bounce {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Floating HUD indicators */
.score-float {
    position: absolute;
    font-weight: 800;
    font-size: 13px;
    pointer-events: none;
    animation: float-up-fade 0.45s ease-out forwards;
    transform: translate(-50%, -50%);
}

.score-float.hit {
    color: #34d399;
}

.score-float.miss {
    color: #f43f5e;
}

@keyframes float-up-fade {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-30px) scale(0.85);
    }
}

/* Neon text color utility */
.neon-text-sky {
    color: #38bdf8;
    text-shadow: 0 0 15px rgba(14, 165, 233, 0.6);
}

/* No scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Head-to-Head Styles */
.h2h-badge-won {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.3));
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #10b981;
}

.h2h-badge-lost {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.3));
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.h2h-badge-tied {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.3));
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #f59e0b;
}

.h2h-winner-glow {
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.25);
    border-color: rgba(14, 165, 233, 0.6) !important;
}

html:not(.dark) .h2h-badge-won {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

html:not(.dark) .h2h-badge-lost {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

html:not(.dark) .h2h-badge-tied {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}