/* Universe/Starfield Styles */

/* ============================================
   STARFIELD BACKGROUND
   ============================================ */

.starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    background: var(--color-space-black);
}

/* Star layer base styles */
.star-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-repeat: repeat;
}

/* Small stars - most numerous, dimmest, slowest parallax */
.stars-small {
    background-image:
        radial-gradient(1px 1px at 50px 30px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 150px 80px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 230px 150px, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 310px 50px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 380px 200px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 450px 120px, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 520px 250px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 80px 180px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 200px 280px, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 350px 320px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 420px 380px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 500px 420px, rgba(255, 255, 255, 0.35), transparent),
        /* Additional stars for density */
        radial-gradient(1px 1px at 25px 100px, rgba(255, 255, 255, 0.32), transparent),
        radial-gradient(1px 1px at 120px 220px, rgba(255, 255, 255, 0.38), transparent),
        radial-gradient(1px 1px at 280px 90px, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 400px 300px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 480px 50px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 60px 350px, rgba(255, 255, 255, 0.33), transparent),
        radial-gradient(1px 1px at 180px 400px, rgba(255, 255, 255, 0.36), transparent),
        radial-gradient(1px 1px at 330px 180px, rgba(255, 255, 255, 0.32), transparent),
        radial-gradient(1px 1px at 550px 350px, rgba(255, 255, 255, 0.38), transparent),
        radial-gradient(1px 1px at 100px 450px, rgba(255, 255, 255, 0.34), transparent);
    background-size: 550px 450px;
    animation: drift-slow 180s linear infinite;
    opacity: 0.8;
}

/* Medium stars - moderate density, medium brightness, medium parallax */
.stars-medium {
    background-image:
        radial-gradient(1.5px 1.5px at 100px 60px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 280px 120px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1.5px 1.5px at 400px 200px, rgba(255, 255, 255, 0.55), transparent),
        radial-gradient(2px 2px at 180px 300px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1.5px 1.5px at 350px 380px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 500px 80px, rgba(255, 255, 255, 0.55), transparent),
        radial-gradient(1.5px 1.5px at 50px 250px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 250px 450px, rgba(255, 255, 255, 0.6), transparent);
    background-size: 600px 500px;
    animation: drift-medium 120s linear infinite;
    opacity: 0.9;
}

/* Large stars - fewest, brightest, fastest parallax, some with glow */
.stars-large {
    background-image:
        radial-gradient(2.5px 2.5px at 120px 100px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 350px 180px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(2.5px 2.5px at 550px 300px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 200px 400px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(4px 4px at 450px 500px, rgba(255, 255, 255, 0.95), transparent),
        radial-gradient(2.5px 2.5px at 80px 350px, rgba(255, 255, 255, 0.8), transparent);
    background-size: 650px 550px;
    animation: drift-fast 80s linear infinite, twinkle 4s ease-in-out infinite;
    opacity: 1;
}

/* ============================================
   PARALLAX DRIFT ANIMATIONS
   ============================================ */

@keyframes drift-slow {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-275px, -225px);
    }
}

@keyframes drift-medium {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-300px, -250px);
    }
}

@keyframes drift-fast {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-325px, -275px);
    }
}

/* Subtle twinkle effect for large stars */
@keyframes twinkle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* ============================================
   UNIVERSE HEADER
   ============================================ */

.universe-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6) var(--space-6) var(--space-4);
    z-index: 100;
    pointer-events: none;
}

.universe-title {
    font-family: 'Orbitron', var(--font-display), sans-serif;
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: 0;
    background: linear-gradient(
        135deg,
        #fbbf24 0%,
        #fff9e6 25%,
        #fbbf24 50%,
        #f59e0b 75%,
        #fbbf24 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: title-shimmer 8s ease-in-out infinite;
    text-shadow: none;
    filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.4));
}

.universe-tagline {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: var(--space-2) 0 0;
    opacity: 0.7;
}

@keyframes title-shimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Nav inside universe header - centered */
.universe-header .nav-universe {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

/* Legacy nav styles (keep for compatibility) */
.nav-universe {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    z-index: 100;
}

.nav-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: 0.05em;
}

/* ============================================
   UNIVERSE CONTAINER
   ============================================ */

.universe-container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* ============================================
   ORBIT RINGS
   ============================================ */

.orbit-system {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Base orbit ring styles */
.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
    animation: orbit-pulse 8s ease-in-out infinite;
}

/* Orbit ring sizes - scalable structure with wider spacing */
.orbit-1 {
    --orbit-radius: 200px;
    width: var(--orbit-radius);
    height: var(--orbit-radius);
    animation-delay: 0s;
}

.orbit-2 {
    --orbit-radius: 380px;
    width: var(--orbit-radius);
    height: var(--orbit-radius);
    animation-delay: 2s;
}

.orbit-3 {
    --orbit-radius: 560px;
    width: var(--orbit-radius);
    height: var(--orbit-radius);
    animation-delay: 4s;
}

/* Subtle pulsing animation for orbits */
@keyframes orbit-pulse {
    0%, 100% {
        opacity: 0.15;
        border-color: rgba(255, 255, 255, 0.1);
    }
    50% {
        opacity: 0.3;
        border-color: rgba(100, 200, 255, 0.2);
    }
}

/* ============================================
   CENTRAL STAR
   ============================================ */

.central-star {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    cursor: pointer;
    text-decoration: none;
    pointer-events: auto;
    z-index: 10;
}

/* Outer glow layer */
.star-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(251, 191, 36, 0.4) 0%,
        rgba(251, 191, 36, 0.2) 40%,
        rgba(251, 191, 36, 0.05) 70%,
        transparent 100%
    );
    animation: star-pulse 3s ease-in-out infinite;
    filter: blur(8px);
}

/* Solar flare elements */
.solar-flare {
    position: absolute;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(251, 191, 36, 0.6) 20%,
        rgba(255, 200, 100, 0.8) 50%,
        rgba(251, 191, 36, 0.6) 80%,
        transparent 100%
    );
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0;
    animation: solar-flare 8s ease-in-out infinite;
}

.solar-flare-1 {
    width: 80px;
    height: 4px;
    top: 50%;
    left: 50%;
    transform-origin: left center;
    animation-delay: 0s;
}

.solar-flare-2 {
    width: 60px;
    height: 3px;
    top: 50%;
    left: 50%;
    transform-origin: left center;
    animation-delay: 2.5s;
}

.solar-flare-3 {
    width: 70px;
    height: 3px;
    top: 50%;
    left: 50%;
    transform-origin: left center;
    animation-delay: 5s;
}

@keyframes solar-flare {
    0%, 100% {
        opacity: 0;
        transform: rotate(var(--flare-angle, 0deg)) scaleX(0.3);
    }
    10% {
        opacity: 0.8;
        transform: rotate(var(--flare-angle, 0deg)) scaleX(1);
    }
    30% {
        opacity: 0.6;
        transform: rotate(calc(var(--flare-angle, 0deg) + 15deg)) scaleX(1.2);
    }
    50% {
        opacity: 0;
        transform: rotate(calc(var(--flare-angle, 0deg) + 30deg)) scaleX(0.5);
    }
}

/* Core star element */
.star-core {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        #fff9e6 0%,
        #fbbf24 30%,
        #f59e0b 70%,
        #d97706 100%
    );
    box-shadow:
        0 0 20px rgba(251, 191, 36, 0.8),
        0 0 40px rgba(251, 191, 36, 0.6),
        0 0 60px rgba(251, 191, 36, 0.4),
        0 0 80px rgba(251, 191, 36, 0.2);
}

/* Pulsing glow animation */
@keyframes star-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* Hover state - intensify glow */
.central-star:hover .star-glow {
    animation: star-pulse-hover 1.5s ease-in-out infinite;
    filter: blur(10px);
}

.central-star:hover .star-core {
    box-shadow:
        0 0 25px rgba(251, 191, 36, 0.9),
        0 0 50px rgba(251, 191, 36, 0.7),
        0 0 75px rgba(251, 191, 36, 0.5),
        0 0 100px rgba(251, 191, 36, 0.3);
    transform: scale(1.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@keyframes star-pulse-hover {
    0%, 100% {
        transform: scale(1.05);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}

/* Focus state for accessibility */
.central-star:focus {
    outline: none;
}

.central-star:focus .star-core {
    box-shadow:
        0 0 25px rgba(251, 191, 36, 0.9),
        0 0 50px rgba(251, 191, 36, 0.7),
        0 0 75px rgba(251, 191, 36, 0.5),
        0 0 100px rgba(251, 191, 36, 0.3),
        0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* ============================================
   ORBITING PLANETS
   ============================================ */

.planets-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Base planet styles */
.planet {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
    z-index: 5;
    /* Position on orbit using angle */
    transform: rotate(var(--angle)) translateX(calc(var(--orbit-radius) / 2)) rotate(calc(-1 * var(--angle)));
    animation: planet-orbit var(--orbit-duration, 30s) linear infinite;
}

/* Planet orbit trail/comet tail effect */
.planet::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 8px;
    background: linear-gradient(
        90deg,
        var(--planet-color, rgba(255, 255, 255, 0.3)) 0%,
        transparent 100%
    );
    border-radius: 50%;
    opacity: 0.4;
    transform: translateX(-35px);
    filter: blur(3px);
    pointer-events: none;
    z-index: -1;
}

/* Color-specific trails */
.planet-about::before { --planet-color: rgba(34, 211, 238, 0.5); }
.planet-resume::before { --planet-color: rgba(168, 85, 247, 0.5); }
.planet-projects::before { --planet-color: rgba(34, 197, 94, 0.5); }
.planet-blog::before { --planet-color: rgba(249, 115, 22, 0.5); }
.planet-experiments::before { --planet-color: rgba(236, 72, 153, 0.5); }

/* Planet body - the visual orb */
.planet-body {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Planet label - always visible with subtle styling */
.planet-label {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 8px;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    white-space: nowrap;
    opacity: 1;
    transition: all 0.3s ease;
    pointer-events: none;
    text-transform: uppercase;
}

/* Enhanced label on hover */
.planet:hover .planet-label {
    opacity: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
    transform: translateX(-50%) scale(1.1);
}

/* Light theme planet labels */
[data-theme="light"] .planet-label {
    color: rgba(15, 23, 42, 0.8);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .planet:hover .planet-label {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Light theme orbit rings */
[data-theme="light"] .orbit {
    border-color: rgba(0, 0, 0, 0.08);
}

@keyframes orbit-pulse-light {
    0%, 100% {
        opacity: 0.15;
        border-color: rgba(0, 0, 0, 0.08);
    }
    50% {
        opacity: 0.25;
        border-color: rgba(14, 165, 233, 0.2);
    }
}

[data-theme="light"] .orbit {
    animation-name: orbit-pulse-light;
}

/* Light theme universe header */
[data-theme="light"] .universe-title {
    background: linear-gradient(
        135deg,
        #d97706 0%,
        #f59e0b 25%,
        #fbbf24 50%,
        #d97706 75%,
        #b45309 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(217, 119, 6, 0.3));
}

/* Planet hover effect */
.planet:hover .planet-body {
    transform: scale(1.2);
}

/* Focus state for accessibility */
.planet:focus {
    outline: none;
}

.planet:focus .planet-body {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.planet:focus .planet-label {
    opacity: 1;
}

/* ============================================
   PLANET COLOR VARIANTS
   ============================================ */

/* About - Cyan */
.planet-about .planet-body {
    background: radial-gradient(
        circle at 30% 30%,
        #67e8f9 0%,
        #22d3ee 40%,
        #06b6d4 80%,
        #0891b2 100%
    );
    box-shadow:
        0 0 10px rgba(34, 211, 238, 0.6),
        0 0 20px rgba(34, 211, 238, 0.3);
}

.planet-about:hover .planet-body {
    box-shadow:
        0 0 15px rgba(34, 211, 238, 0.8),
        0 0 30px rgba(34, 211, 238, 0.5),
        0 0 45px rgba(34, 211, 238, 0.3);
}

/* Resume - Purple */
.planet-resume .planet-body {
    background: radial-gradient(
        circle at 30% 30%,
        #d8b4fe 0%,
        #a855f7 40%,
        #9333ea 80%,
        #7e22ce 100%
    );
    box-shadow:
        0 0 10px rgba(168, 85, 247, 0.6),
        0 0 20px rgba(168, 85, 247, 0.3);
}

.planet-resume:hover .planet-body {
    box-shadow:
        0 0 15px rgba(168, 85, 247, 0.8),
        0 0 30px rgba(168, 85, 247, 0.5),
        0 0 45px rgba(168, 85, 247, 0.3);
}

/* Projects - Green */
.planet-projects .planet-body {
    background: radial-gradient(
        circle at 30% 30%,
        #86efac 0%,
        #22c55e 40%,
        #16a34a 80%,
        #15803d 100%
    );
    box-shadow:
        0 0 10px rgba(34, 197, 94, 0.6),
        0 0 20px rgba(34, 197, 94, 0.3);
}

.planet-projects:hover .planet-body {
    box-shadow:
        0 0 15px rgba(34, 197, 94, 0.8),
        0 0 30px rgba(34, 197, 94, 0.5),
        0 0 45px rgba(34, 197, 94, 0.3);
}

/* Blog - Orange */
.planet-blog .planet-body {
    background: radial-gradient(
        circle at 30% 30%,
        #fdba74 0%,
        #f97316 40%,
        #ea580c 80%,
        #c2410c 100%
    );
    box-shadow:
        0 0 10px rgba(249, 115, 22, 0.6),
        0 0 20px rgba(249, 115, 22, 0.3);
}

.planet-blog:hover .planet-body {
    box-shadow:
        0 0 15px rgba(249, 115, 22, 0.8),
        0 0 30px rgba(249, 115, 22, 0.5),
        0 0 45px rgba(249, 115, 22, 0.3);
}

/* Experiments - Pink */
.planet-experiments .planet-body {
    background: radial-gradient(
        circle at 30% 30%,
        #f9a8d4 0%,
        #ec4899 40%,
        #db2777 80%,
        #be185d 100%
    );
    box-shadow:
        0 0 10px rgba(236, 72, 153, 0.6),
        0 0 20px rgba(236, 72, 153, 0.3);
}

.planet-experiments:hover .planet-body {
    box-shadow:
        0 0 15px rgba(236, 72, 153, 0.8),
        0 0 30px rgba(236, 72, 153, 0.5),
        0 0 45px rgba(236, 72, 153, 0.3);
}

/* ============================================
   PLANET ORBIT ANIMATION
   ============================================ */

@keyframes planet-orbit {
    from {
        transform: rotate(var(--angle)) translateX(calc(var(--orbit-radius) / 2)) rotate(calc(-1 * var(--angle)));
    }
    to {
        transform: rotate(calc(var(--angle) + 360deg)) translateX(calc(var(--orbit-radius) / 2)) rotate(calc(-1 * var(--angle) - 360deg));
    }
}

/* ============================================
   REDUCED MOTION ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .star-layer,
    .star-glow,
    .orbit,
    .planet {
        animation: none;
    }
}

/* ============================================
   INTERACTIVE CLICKABLE STARS
   ============================================ */

/* Overlay for clickable stars - sits behind planets and interactive elements */
.stars-interactive-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.stars-interactive {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.star-clickable {
    position: absolute;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: default;
    pointer-events: auto;
    padding: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Larger click area with smaller visual star via pseudo-element */
}

.star-clickable::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 30%;
    min-width: 4px;
    min-height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.8) 40%, transparent 70%);
    animation: star-twinkle 3s ease-in-out infinite;
    animation-delay: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.star-clickable:hover::after {
    transform: translate(-50%, -50%) scale(1.8);
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.5);
}

.star-clickable:hover {
    z-index: 2;
}

.star-clickable:focus {
    outline: none;
}

.star-clickable.clicked {
    animation: star-burst 0.5s ease-out;
}

@keyframes star-twinkle {
    0%, 100% {
        opacity: var(--star-opacity, 0.7);
    }
    50% {
        opacity: calc(var(--star-opacity, 0.7) * 0.5);
    }
}

@keyframes star-burst {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
    }
    50% {
        transform: scale(3);
        box-shadow: 0 0 20px 10px rgba(251, 191, 36, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* ============================================
   QUOTE POPUP
   ============================================ */

/* Whisper-style quote - subtle, appears near clicked star */
.quote-popup {
    position: fixed;
    left: var(--star-x, 50%);
    top: var(--star-y, 50%);
    transform: translate(-50%, 20px);
    width: auto;
    max-width: 400px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
    pointer-events: none;
}

.quote-popup.active {
    opacity: 1;
    visibility: visible;
}

.quote-content {
    position: relative;
    margin: var(--space-4);
    padding: var(--space-4) var(--space-6);
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.quote-text {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    font-style: italic;
    line-height: 1.6;
    color: var(--color-text-muted);
    text-align: center;
    margin: 0;
    opacity: 0.8;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.quote-close {
    display: none;
}

/* ============================================
   HELP INDICATOR BUTTON
   ============================================ */

.help-indicator {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-text-secondary);
    font-size: var(--text-xl);
    font-weight: 600;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

.help-indicator:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-text-primary);
    transform: scale(1.05);
}

.help-indicator.active {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}

/* ============================================
   KEYBOARD SHORTCUTS SIDE PANEL
   ============================================ */

.shortcuts-side-panel {
    position: fixed;
    bottom: calc(var(--space-6) + 60px);
    right: var(--space-6);
    width: 280px;
    background: rgba(10, 10, 15, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: var(--space-5);
    backdrop-filter: blur(12px);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transform-origin: bottom right;
    transition: all 0.25s ease;
}

.shortcuts-side-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.shortcuts-side-panel .shortcuts-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.shortcuts-side-panel .shortcuts-panel-header h2 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.shortcuts-side-panel .shortcuts-panel-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: var(--text-xl);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.shortcuts-side-panel .shortcuts-panel-close:hover {
    color: var(--color-text-primary);
}

.shortcuts-side-panel .shortcuts-panel-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.shortcuts-side-panel .shortcuts-column h3 {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2) 0;
}

.shortcuts-side-panel .shortcut-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.shortcuts-side-panel .shortcut-row kbd {
    display: inline-block;
    min-width: 24px;
    padding: 2px 6px;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    text-align: center;
}

.shortcuts-side-panel .shortcuts-panel-tip {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
}

/* ============================================
   LIGHT THEME UI ELEMENTS
   ============================================ */

/* Light theme help indicator */
[data-theme="light"] .help-indicator {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .help-indicator:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .help-indicator.active {
    background: rgba(217, 119, 6, 0.15);
    border-color: rgba(217, 119, 6, 0.3);
    color: #d97706;
}

/* Light theme shortcuts side panel */
[data-theme="light"] .shortcuts-side-panel {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .shortcuts-side-panel .shortcuts-panel-header {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .shortcuts-side-panel .shortcut-row kbd {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: #d97706;
}

[data-theme="light"] .shortcuts-side-panel .shortcuts-panel-tip {
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* Light theme quote popup */
[data-theme="light"] .quote-text {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
}