/* ============================================
   LIFETIME POOP TIMER - BOLD REDESIGN
   Aesthetic: Retro Arcade / Game Show Vibes
   ============================================ */

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

:root {
    --poop-brown: #8B4513;
    --banana-yellow: #FFE135;
    --banana-bright: #FFF44F;
    --electric-blue: #00D9FF;
    --neon-pink: #FF10F0;
    --neon-yellow: #FFE300;
    --neon-green: #39FF14;
    --dark-bg: #0A0E27;
    --card-bg: #1A1F3A;
    --text-light: #FFFFFF;
    --text-medium: rgba(255, 255, 255, 0.85);
    --text-dim: rgba(255, 255, 255, 0.7);
    --accent-orange: #FF6B35;
}

/* Base text contrast rules for all calculators */
body[class*="-calculator"] {
    color: var(--text-light);
}

body[class*="-calculator"] p,
body[class*="-calculator"] span,
body[class*="-calculator"] div {
    color: inherit;
}

body[class*="-calculator"] small {
    color: var(--text-dim);
}

body.poop-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(0, 217, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 16, 240, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(255, 227, 0, 0.05) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================
   FLOATING BACKGROUND EMOJIS
   ============================================ */
.floating-emojis {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.float-emoji {
    position: absolute;
    font-size: 3rem;
    opacity: 0.15;
    animation: floatUp 15s infinite linear;
    filter: blur(1px);
}

@keyframes floatUp {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.15;
    }
    90% {
        opacity: 0.15;
    }
    100% {
        transform: translateY(-20vh) rotate(360deg);
        opacity: 0;
    }
}

/* ============================================
   HEADER - BOLD & DRAMATIC
   ============================================ */
.poop-header {
    position: relative;
    background: linear-gradient(135deg, var(--poop-brown) 0%, #654321 50%, var(--poop-brown) 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid var(--neon-yellow);
    z-index: 10;
}

.poop-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.03) 2px,
            rgba(255, 255, 255, 0.03) 4px
        );
    pointer-events: none;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--neon-yellow);
    text-decoration: none;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 227, 0, 0.1);
    border: 2px solid var(--neon-yellow);
    border-radius: 50px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 20;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.back-link:hover {
    background: var(--neon-yellow);
    color: var(--dark-bg);
    transform: translateX(-5px);
    box-shadow: 0 0 20px rgba(255, 227, 0, 0.5);
}

.header-content {
    margin-top: 2rem;
}

.poop-emoji-giant {
    font-size: 8rem;
    animation: bounce 2s ease-in-out infinite, rotate 4s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

@keyframes bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.1); }
}

@keyframes rotate {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

.glitch {
    font-family: 'Righteous', cursive;
    font-size: 4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 1rem 0;
    position: relative;
    text-shadow: 
        3px 3px 0 var(--electric-blue),
        -3px -3px 0 var(--neon-pink);
    animation: glitchAnimation 3s infinite;
}

@keyframes glitchAnimation {
    0%, 100% {
        text-shadow: 
            3px 3px 0 var(--electric-blue),
            -3px -3px 0 var(--neon-pink);
    }
    25% {
        text-shadow: 
            -3px 3px 0 var(--neon-pink),
            3px -3px 0 var(--electric-blue);
    }
    50% {
        text-shadow: 
            3px -3px 0 var(--neon-yellow),
            -3px 3px 0 var(--neon-green);
    }
    75% {
        text-shadow: 
            -3px -3px 0 var(--electric-blue),
            3px 3px 0 var(--neon-pink);
    }
}

.subtitle {
    font-family: 'Space Mono', monospace;
    font-size: 1.2rem;
    letter-spacing: 0.3em;
    color: var(--neon-yellow);
    text-transform: uppercase;
    margin-top: 0.5rem;
}

/* ============================================
   MAIN CONTENT SECTION
   ============================================ */
main {
    position: relative;
    z-index: 10;
    padding: 3rem 0;
}

.calc-intro {
    text-align: center;
    margin-bottom: 3rem;
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.intro-title {
    font-family: 'Righteous', cursive;
    font-size: 3rem;
    background: linear-gradient(135deg, var(--electric-blue), var(--neon-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.intro-text {
    font-size: 1.3rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto 2rem;
}

.warning-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent-orange), #FF4500);
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 20px rgba(255, 107, 53, 0.4);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ============================================
   CALCULATOR CONTAINER - NEON BOX
   ============================================ */
.calculator-container {
    background: var(--card-bg);
    border-radius: 30px;
    padding: 3rem;
    position: relative;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 80px rgba(0, 217, 255, 0.05);
    border: 3px solid transparent;
    background-clip: padding-box;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.calculator-container::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 30px;
    padding: 3px;
    background: linear-gradient(135deg, var(--electric-blue), var(--neon-pink), var(--neon-yellow));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderRotate 4s linear infinite;
}

@keyframes borderRotate {
    0% {
        background: linear-gradient(0deg, var(--electric-blue), var(--neon-pink), var(--neon-yellow), var(--electric-blue));
    }
    100% {
        background: linear-gradient(360deg, var(--electric-blue), var(--neon-pink), var(--neon-yellow), var(--electric-blue));
    }
}

/* ============================================
   FORM STYLING - GAME SHOW VIBES
   ============================================ */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.form-group {
    position: relative;
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.label-icon {
    font-size: 1.8rem;
    animation: wiggle 3s ease-in-out infinite;
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.label-text {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 1.2rem;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    color: var(--text-light);
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--electric-blue);
    background: rgba(0, 217, 255, 0.1);
    box-shadow: 0 0 30px rgba(0, 217, 255, 0.3);
    transform: scale(1.02);
}

.form-group small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

/* ============================================
   CALCULATE BUTTON - SUPER BOLD
   ============================================ */
.calc-button {
    width: 100%;
    padding: 1.5rem 2rem;
    font-family: 'Righteous', cursive;
    font-size: 1.5rem;
    color: var(--dark-bg);
    background: linear-gradient(135deg, var(--neon-yellow), var(--neon-green));
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(255, 227, 0, 0.4);
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.calc-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.calc-button:hover::before {
    width: 300%;
    height: 300%;
}

.calc-button:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 40px rgba(255, 227, 0, 0.6);
}

.calc-button:active {
    transform: translateY(-2px) scale(0.98);
}

.button-text {
    position: relative;
    z-index: 2;
}

.button-emoji {
    position: relative;
    z-index: 2;
    font-size: 1.8rem;
}

.calc-button.secondary {
    background: linear-gradient(135deg, var(--electric-blue), var(--neon-pink));
    box-shadow: 0 10px 30px rgba(0, 217, 255, 0.4);
}

.calc-button.secondary:hover {
    box-shadow: 0 15px 40px rgba(0, 217, 255, 0.6);
}

/* ============================================
   RESULTS SECTION - EXPLOSIVE REVEAL
   ============================================ */
.results-container {
    margin-top: 3rem;
    animation: resultsReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes resultsReveal {
    0% {
        opacity: 0;
        transform: scale(0.8) rotateX(-20deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateX(0);
    }
}

.results-header {
    text-align: center;
    margin-bottom: 2rem;
}

.results-title {
    font-family: 'Righteous', cursive;
    font-size: 3rem;
    background: linear-gradient(135deg, var(--neon-pink), var(--electric-blue), var(--neon-yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 0.5rem;
}

.results-subtitle {
    font-family: 'Space Mono', monospace;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
}

/* ============================================
   STAT CARDS - DRAMATIC DISPLAY
   ============================================ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.stat-card:hover::before {
    left: 100%;
}

.stat-card:hover {
    transform: translateY(-10px) scale(1.05);
    border-color: var(--electric-blue);
    box-shadow: 0 20px 50px rgba(0, 217, 255, 0.3);
}

.stat-card.mega {
    grid-column: span 2;
    background: linear-gradient(135deg, var(--neon-pink), var(--accent-orange));
    border-color: var(--neon-yellow);
    box-shadow: 0 10px 40px rgba(255, 16, 240, 0.4);
}

.stat-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: inline-block;
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.stat-value {
    font-family: 'Righteous', cursive;
    font-size: 3rem;
    font-weight: 700;
    color: var(--neon-yellow);
    margin: 0.5rem 0;
    text-shadow: 0 0 20px rgba(255, 227, 0, 0.5);
}

.stat-card.mega .stat-value {
    font-size: 4rem;
    color: white;
}

.stat-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.stat-card.mega .stat-label {
    color: white;
    font-size: 1rem;
}

.stat-subtext {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.25rem;
}

/* ============================================
   FUN FACTS - REALITY CHECK
   ============================================ */
.fun-facts {
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.1), rgba(0, 217, 255, 0.1));
    border: 2px solid var(--neon-green);
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
    position: relative;
}

.facts-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: var(--neon-green);
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.fun-facts ul {
    list-style: none;
    padding: 0;
}

.fun-facts li {
    padding: 1.5rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    border-left: 4px solid var(--neon-yellow);
    border-radius: 10px;
    font-size: 1.1rem;
    line-height: 1.6;
    transition: all 0.3s ease;
}

.fun-facts li:hover {
    transform: translateX(10px);
    background: rgba(255, 255, 255, 0.1);
    border-left-color: var(--electric-blue);
}

.fun-facts li:last-child {
    margin-bottom: 0;
}

/* ============================================
   TRIVIA SECTION
   ============================================ */
.trivia-section {
    margin-top: 4rem;
    animation: fadeInUp 1s ease-out 0.4s both;
}

.trivia-title {
    font-family: 'Righteous', cursive;
    font-size: 2.5rem;
    text-align: center;
    background: linear-gradient(135deg, var(--neon-yellow), var(--neon-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.trivia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.trivia-card {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.3), rgba(101, 67, 33, 0.3));
    border: 2px solid var(--poop-brown);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.trivia-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 227, 0, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s;
}

.trivia-card:hover::before {
    opacity: 1;
}

.trivia-card:hover {
    transform: translateY(-10px);
    border-color: var(--neon-yellow);
    box-shadow: 0 15px 40px rgba(139, 69, 19, 0.5);
}

.trivia-number {
    font-family: 'Righteous', cursive;
    font-size: 4rem;
    color: var(--neon-yellow);
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px rgba(255, 227, 0, 0.5);
}

.trivia-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: var(--electric-blue);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.trivia-card p {
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   FOOTER
   ============================================ */
.poop-footer {
    background: var(--card-bg);
    border-top: 3px solid var(--electric-blue);
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.poop-footer p {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0;
}

.footer-note {
    font-size: 0.8rem;
    opacity: 0.6;
    font-style: italic;
}

.footer-note small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.7rem;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    .glitch {
        font-size: 2.5rem;
    }

    .poop-emoji-giant {
        font-size: 5rem;
    }

    .intro-title {
        font-size: 2rem;
    }

    .intro-text {
        font-size: 1.1rem;
    }

    .calculator-container {
        padding: 2rem 1.5rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .stat-grid {
        grid-template-columns: 1fr;
    }

    .stat-card.mega {
        grid-column: span 1;
    }

    .results-title {
        font-size: 2rem;
    }

    .trivia-grid {
        grid-template-columns: 1fr;
    }

    .calc-button {
        font-size: 1.2rem;
        padding: 1.2rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .glitch {
        font-size: 2rem;
        letter-spacing: 0.05em;
    }

    .subtitle {
        font-size: 0.9rem;
        letter-spacing: 0.2em;
    }

    .poop-emoji-giant {
        font-size: 4rem;
    }
}

/* ============================================
   BANANA CALCULATOR SPECIFIC STYLES
   ============================================ */

/* Banana Body Background */
body.banana-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 225, 53, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 244, 79, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(255, 227, 0, 0.05) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Banana Header */
.banana-header {
    position: relative;
    background: linear-gradient(135deg, var(--banana-yellow) 0%, #FFD700 50%, var(--banana-bright) 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid var(--neon-green);
    z-index: 10;
}

.banana-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.05) 2px,
            rgba(255, 255, 255, 0.05) 4px
        );
    pointer-events: none;
}

.banana-emoji-giant {
    font-size: 8rem;
    animation: bounce 2s ease-in-out infinite, sway 3s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

@keyframes sway {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}

/* Banana Header Text Colors */
.banana-header .glitch {
    text-shadow: 
        3px 3px 0 var(--neon-green),
        -3px -3px 0 var(--electric-blue);
    color: var(--dark-bg);
}

.banana-header .subtitle {
    color: var(--dark-bg);
}

.banana-header .back-link {
    color: var(--dark-bg);
    border-color: var(--dark-bg);
    background: rgba(255, 255, 255, 0.3);
}

.banana-header .back-link:hover {
    background: white;
    color: var(--banana-yellow);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* Measurement Type Selector */
.measurement-type-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.type-option {
    position: relative;
    cursor: pointer;
}

.type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.type-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    transition: all 0.3s ease;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.type-icon {
    font-size: 2rem;
}

.type-text {
    font-size: 0.9rem;
}

.type-option input[type="radio"]:checked + .type-label {
    background: linear-gradient(135deg, var(--neon-green), var(--electric-blue));
    color: var(--text-light);
    border-color: var(--neon-green);
    box-shadow: 0 5px 20px rgba(57, 255, 20, 0.4);
}

.type-option:hover .type-label {
    transform: translateY(-3px);
    border-color: var(--banana-yellow);
}

/* Input Section Toggle */
.input-section {
    animation: fadeIn 0.3s ease-out;
}

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

.full-width {
    grid-column: 1 / -1;
}

/* Famous Object Selector */
.famous-select {
    font-size: 1rem;
    padding: 1rem 1.5rem;
}

.famous-select option {
    padding: 0.5rem;
}

/* Banana Visual Display */
.banana-visual {
    background: rgba(255, 225, 53, 0.1);
    border: 2px solid var(--banana-yellow);
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
    text-align: center;
    min-height: 100px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.visual-banana {
    font-size: 2.5rem;
    display: inline-block;
    animation: popIn 0.5s ease-out backwards;
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.more-bananas {
    font-family: 'Space Mono', monospace;
    font-size: 1.2rem;
    color: var(--banana-yellow);
    font-weight: 700;
    padding: 1rem;
    animation: fadeIn 0.5s ease-out 1s backwards;
}

/* Comparison Section */
.comparison-section {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(0, 217, 255, 0.05);
    border: 2px solid var(--electric-blue);
    border-radius: 20px;
}

.comparison-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: var(--electric-blue);
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
}

.comparison-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.comparison-card:hover {
    transform: translateY(-5px);
    border-color: var(--banana-yellow);
    box-shadow: 0 10px 30px rgba(255, 225, 53, 0.3);
}

.comp-emoji {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.comp-value {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: var(--banana-yellow);
    margin: 0.5rem 0;
}

.comp-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.comp-unit {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.25rem;
}

/* Banana Footer */
.banana-footer {
    background: var(--card-bg);
    border-top: 3px solid var(--banana-yellow);
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.banana-footer p {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0;
}

/* Banana Trivia Cards */
.banana-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(255, 225, 53, 0.2), rgba(255, 244, 79, 0.2));
    border: 2px solid var(--banana-yellow);
}

.banana-calculator .trivia-card:hover {
    border-color: var(--neon-green);
    box-shadow: 0 15px 40px rgba(255, 225, 53, 0.4);
}

.banana-calculator .trivia-card::before {
    background: radial-gradient(circle, rgba(255, 225, 53, 0.2) 0%, transparent 70%);
}

/* Responsive for Banana Calculator */
@media (max-width: 768px) {
    .measurement-type-selector {
        grid-template-columns: 1fr;
    }
    
    .type-label {
        padding: 1.2rem;
    }
    
    .banana-visual {
        padding: 1.5rem;
    }
    
    .visual-banana {
        font-size: 2rem;
    }
    
    .comparison-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .banana-emoji-giant {
        font-size: 4rem;
    }
    
    .comparison-grid {
        grid-template-columns: 1fr;
    }
    
    .visual-banana {
        font-size: 1.8rem;
    }
}

/* ============================================
   EPIC JOURNEY CALCULATOR SPECIFIC STYLES
   ============================================ */

/* Journey Body Background */
body.journey-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(0, 217, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(139, 69, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(57, 255, 20, 0.1) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Journey Header */
.journey-header {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid var(--electric-blue);
    z-index: 10;
}

.journey-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.05) 2px,
            rgba(255, 255, 255, 0.05) 4px
        );
    pointer-events: none;
}

.journey-emoji-giant {
    font-size: 8rem;
    animation: bounce 2s ease-in-out infinite, float 4s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

/* Journey Selector Grid */
.journey-selector {
    margin-bottom: 3rem;
}

.selector-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: var(--electric-blue);
    text-align: center;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.journey-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.journey-option {
    cursor: pointer;
    position: relative;
}

.journey-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.journey-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.journey-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.journey-card:hover::before {
    left: 100%;
}

.journey-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--electric-blue);
    box-shadow: 0 15px 40px rgba(0, 217, 255, 0.3);
}

.journey-card.selected {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
    border-color: var(--neon-green);
    box-shadow: 0 10px 40px rgba(57, 255, 20, 0.4);
    transform: scale(1.05);
}

.journey-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.journey-name {
    font-family: 'Righteous', cursive;
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    line-height: 1.3;
    font-weight: 600;
}

.journey-distance {
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    color: var(--neon-yellow);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.journey-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.3;
}

/* Progress Bar */
.progress-bar-container {
    margin: 2rem 0 3rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.progress-label span:nth-child(2) {
    font-size: 1.5rem;
    color: var(--neon-yellow);
    font-weight: 700;
}

.progress-bar {
    position: relative;
    width: 100%;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: visible;
    margin-bottom: 1rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-green), var(--electric-blue));
    border-radius: 15px;
    transition: width 1s ease-out;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.5);
    position: relative;
    overflow: hidden;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: progressShine 2s infinite;
}

@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    transition: left 1s ease-out;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
    animation: markerBounce 1s ease-in-out infinite;
}

@keyframes markerBounce {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-5px); }
}

.progress-message {
    text-align: center;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.1rem;
    color: var(--neon-yellow);
    font-weight: 600;
}

/* Milestones Section */
.milestones-section {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(255, 16, 240, 0.05), rgba(0, 217, 255, 0.05));
    border: 2px solid var(--neon-pink);
    border-radius: 20px;
}

.milestones-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: var(--neon-pink);
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.milestones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
}

.milestone-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    animation: fadeInUp 0.5s ease-out backwards;
}

.milestone-card:nth-child(1) { animation-delay: 0.1s; }
.milestone-card:nth-child(2) { animation-delay: 0.2s; }
.milestone-card:nth-child(3) { animation-delay: 0.3s; }
.milestone-card:nth-child(4) { animation-delay: 0.4s; }
.milestone-card:nth-child(5) { animation-delay: 0.5s; }
.milestone-card:nth-child(6) { animation-delay: 0.6s; }
.milestone-card:nth-child(7) { animation-delay: 0.7s; }

.milestone-card:hover {
    transform: translateY(-5px);
    border-color: var(--electric-blue);
    box-shadow: 0 10px 30px rgba(0, 217, 255, 0.3);
}

.milestone-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.milestone-name {
    font-family: 'Righteous', cursive;
    font-size: 1rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.milestone-progress {
    font-family: 'Space Mono', monospace;
    font-size: 1.5rem;
    color: var(--neon-yellow);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.milestone-days {
    font-size: 0.9rem;
    color: var(--electric-blue);
    margin-bottom: 0.25rem;
}

.milestone-steps {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Journey Footer */
.journey-footer {
    background: var(--card-bg);
    border-top: 3px solid var(--electric-blue);
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.journey-footer p {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0;
}

/* Journey Trivia Cards */
.journey-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    border: 2px solid rgba(102, 126, 234, 0.5);
}

.journey-calculator .trivia-card:hover {
    border-color: var(--electric-blue);
    box-shadow: 0 15px 40px rgba(0, 217, 255, 0.4);
}

.journey-calculator .trivia-card::before {
    background: radial-gradient(circle, rgba(0, 217, 255, 0.2) 0%, transparent 70%);
}

/* Responsive for Journey Calculator */
@media (max-width: 768px) {
    .journey-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .journey-card {
        min-height: 180px;
        padding: 1.2rem;
    }
    
    .journey-icon {
        font-size: 2.5rem;
    }
    
    .journey-name {
        font-size: 1rem;
    }
    
    .milestones-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .progress-label {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .journey-emoji-giant {
        font-size: 4rem;
    }
    
    .journey-grid {
        grid-template-columns: 1fr;
    }
    
    .selector-title {
        font-size: 1.5rem;
    }
    
    .milestones-grid {
        grid-template-columns: 1fr;
    }
    
    .progress-marker {
        font-size: 1.5rem;
    }
}

/* ============================================
   ANIMAL AGE CALCULATOR SPECIFIC STYLES
   ============================================ */

/* Animal Body Background */
body.animal-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(57, 255, 20, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(255, 16, 240, 0.1) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Animal Header */
.animal-header {
    position: relative;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 50%, #FDC830 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid var(--neon-green);
    z-index: 10;
}

.animal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.05) 2px,
            rgba(255, 255, 255, 0.05) 4px
        );
    pointer-events: none;
}

.animal-emoji-giant {
    font-size: 8rem;
    animation: bounce 2s ease-in-out infinite, wiggleAnimal 3s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

@keyframes wiggleAnimal {
    0%, 100% { transform: rotate(-8deg) scale(1); }
    50% { transform: rotate(8deg) scale(1.1); }
}

/* Age Hero Display */
.age-hero {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(247, 147, 30, 0.3));
    border: 3px solid var(--accent-orange);
    border-radius: 25px;
    padding: 3rem 2rem;
    text-align: center;
    margin: 2rem 0 3rem;
    position: relative;
    overflow: hidden;
}

.age-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 227, 0, 0.1) 0%, transparent 70%);
    animation: heroGlow 3s ease-in-out infinite;
}

@keyframes heroGlow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

.hero-label {
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 1rem;
}

.hero-age {
    font-family: 'Righteous', cursive;
    font-size: 6rem;
    color: var(--neon-yellow);
    text-shadow: 0 0 30px rgba(255, 227, 0, 0.6);
    margin: 0.5rem 0;
    position: relative;
}

.hero-unit {
    font-family: 'Space Mono', monospace;
    font-size: 1.3rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-animal {
    font-size: 4rem;
    margin-top: 1rem;
    animation: bounce 2s ease-in-out infinite;
}

/* Animal Grid */
.animal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0 3rem;
}

.animal-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: translateY(20px);
}

.animal-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-orange);
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.3);
}

.animal-card-emoji {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.animal-card-name {
    font-family: 'Righteous', cursive;
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.animal-card-age {
    font-family: 'Space Mono', monospace;
    font-size: 2rem;
    color: var(--neon-yellow);
    font-weight: 700;
    margin: 0.5rem 0;
}

.animal-card-unit {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 0.75rem;
}

.animal-card-stage {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
}

.animal-card-stage.baby { background: rgba(57, 255, 20, 0.2); color: var(--neon-green); }
.animal-card-stage.young { background: rgba(0, 217, 255, 0.2); color: var(--electric-blue); }
.animal-card-stage.adult { background: rgba(255, 227, 0, 0.2); color: var(--neon-yellow); }
.animal-card-stage.mature { background: rgba(255, 107, 53, 0.2); color: var(--accent-orange); }
.animal-card-stage.senior { background: rgba(255, 16, 240, 0.2); color: var(--neon-pink); }
.animal-card-stage.ancient { background: rgba(139, 69, 19, 0.3); color: #D4A574; }

.animal-card-lifespan {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Extremes Grid */
.extremes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.extreme-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 3px solid;
    border-radius: 25px;
    padding: 2rem;
    text-align: center;
    transition: all 0.4s ease;
}

.extreme-card.youngest {
    border-color: var(--neon-green);
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.1), rgba(0, 217, 255, 0.1));
}

.extreme-card.oldest {
    border-color: var(--neon-pink);
    background: linear-gradient(135deg, rgba(255, 16, 240, 0.1), rgba(139, 69, 19, 0.1));
}

.extreme-card:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.2);
}

.extreme-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.extreme-emoji {
    font-size: 4rem;
    margin: 1rem 0;
}

.extreme-name {
    font-family: 'Righteous', cursive;
    font-size: 1.5rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.extreme-age {
    font-family: 'Space Mono', monospace;
    font-size: 3rem;
    font-weight: 700;
    margin: 0.5rem 0;
}

.extreme-card.youngest .extreme-age {
    color: var(--neon-green);
}

.extreme-card.oldest .extreme-age {
    color: var(--neon-pink);
}

.extreme-unit {
    font-size: 0.9rem;
    color: var(--text-dim);
}

/* Lifecycle Section */
.lifecycle-section {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.05), rgba(255, 16, 240, 0.05));
    border: 2px solid var(--electric-blue);
    border-radius: 20px;
}

.lifecycle-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: var(--electric-blue);
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.lifecycle-info {
    text-align: center;
}

.lifecycle-stage {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: var(--neon-yellow);
    margin-bottom: 1rem;
}

.lifecycle-message {
    font-size: 1.2rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    margin-bottom: 2rem;
    line-height: 1.6;
}

.lifecycle-bar {
    width: 100%;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.lifecycle-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-green), var(--electric-blue), var(--neon-pink));
    border-radius: 15px;
    transition: width 1.5s ease-out;
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
}

.lifecycle-percent {
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    font-weight: 700;
}

/* Animal Footer */
.animal-footer {
    background: var(--card-bg);
    border-top: 3px solid var(--accent-orange);
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.animal-footer p {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0;
}

/* Animal Trivia Cards */
.animal-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(247, 147, 30, 0.2));
    border: 2px solid var(--accent-orange);
}

.animal-calculator .trivia-card:hover {
    border-color: var(--neon-yellow);
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.4);
}

.animal-calculator .trivia-card::before {
    background: radial-gradient(circle, rgba(255, 227, 0, 0.2) 0%, transparent 70%);
}

/* Responsive for Animal Calculator */
@media (max-width: 768px) {
    .animal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero-age {
        font-size: 4rem;
    }
    
    .extremes-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .animal-emoji-giant {
        font-size: 4rem;
    }
    
    .animal-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-age {
        font-size: 3rem;
    }
    
    .animal-card-emoji {
        font-size: 2.5rem;
    }
}

/* ============================================
   BLINK COUNTER CALCULATOR SPECIFIC STYLES
   ============================================ */

/* Blink Body Background */
body.blink-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(0, 217, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 16, 240, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(139, 69, 255, 0.1) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Blink Header */
.blink-header {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid var(--neon-pink);
    z-index: 10;
}

.blink-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.05) 2px,
            rgba(255, 255, 255, 0.05) 4px
        );
    pointer-events: none;
}

.blink-emoji-giant {
    font-size: 8rem;
    animation: eyePulse 2s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

@keyframes eyePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
    90% { transform: scaleY(0.1); } /* Quick blink */
    95% { transform: scaleY(1); }
}

/* Blink Animation Container */
.blink-animation-container {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    border: 3px solid var(--electric-blue);
    border-radius: 25px;
    padding: 3rem 2rem;
    margin: 2rem 0 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.eye-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.eye {
    width: 200px;
    height: 200px;
    background: white;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 0 40px rgba(102, 126, 234, 0.6),
        inset 0 0 30px rgba(118, 75, 162, 0.3);
    transition: all 0.2s ease-out;
}

.eye::before,
.eye::after {
    content: '';
    position: absolute;
    background: var(--dark-bg);
    width: 220px;
    height: 120px;
    transition: all 0.15s ease-out;
}

.eye::before {
    top: -110px;
    border-bottom-left-radius: 110px;
    border-bottom-right-radius: 110px;
}

.eye::after {
    bottom: -110px;
    border-top-left-radius: 110px;
    border-top-right-radius: 110px;
}

.eye.blinking::before {
    top: 40px;
}

.eye.blinking::after {
    bottom: 40px;
}

.pupil {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 30% 30%, #4a5568, #1a202c);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

.pupil::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    top: 15px;
    left: 20px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.blink-counter-live {
    font-family: 'Righteous', cursive;
    font-size: 4rem;
    color: var(--neon-yellow);
    text-shadow: 0 0 30px rgba(255, 227, 0, 0.6);
    margin-top: 1rem;
}

/* Realtime Section */
.realtime-section {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.1), rgba(0, 217, 255, 0.1));
    border: 2px solid var(--neon-green);
    border-radius: 20px;
    text-align: center;
}

.realtime-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: var(--neon-green);
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.realtime-stats {
    padding: 2rem;
}

.realtime-value {
    font-family: 'Righteous', cursive;
    font-size: 5rem;
    color: var(--electric-blue);
    text-shadow: 0 0 30px rgba(0, 217, 255, 0.6);
    margin-bottom: 1rem;
    animation: countPulse 1s ease-in-out infinite;
}

@keyframes countPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.realtime-label {
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Blink Footer */
.blink-footer {
    background: var(--card-bg);
    border-top: 3px solid var(--electric-blue);
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.blink-footer p {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0;
}

/* Blink Trivia Cards */
.blink-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    border: 2px solid rgba(102, 126, 234, 0.5);
}

.blink-calculator .trivia-card:hover {
    border-color: var(--neon-pink);
    box-shadow: 0 15px 40px rgba(255, 16, 240, 0.4);
}

.blink-calculator .trivia-card::before {
    background: radial-gradient(circle, rgba(255, 16, 240, 0.2) 0%, transparent 70%);
}

/* Responsive for Blink Calculator */
@media (max-width: 768px) {
    .eye {
        width: 150px;
        height: 150px;
    }
    
    .eye::before,
    .eye::after {
        width: 170px;
        height: 90px;
    }
    
    .pupil {
        width: 60px;
        height: 60px;
    }
    
    .pupil::after {
        width: 20px;
        height: 20px;
    }
    
    .blink-counter-live {
        font-size: 3rem;
    }
    
    .realtime-value {
        font-size: 3.5rem;
    }
}

@media (max-width: 480px) {
    .blink-emoji-giant {
        font-size: 4rem;
    }
    
    .eye {
        width: 120px;
        height: 120px;
    }
    
    .eye::before,
    .eye::after {
        width: 140px;
        height: 70px;
    }
    
    .pupil {
        width: 50px;
        height: 50px;
    }
    
    .blink-counter-live {
        font-size: 2rem;
    }
    
    .realtime-value {
        font-size: 2.5rem;
    }
}

/* ============================================
   PIZZA SLICE CONVERTER SPECIFIC STYLES
   ============================================ */

/* Pizza Body Background */
body.pizza-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 193, 7, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(220, 38, 38, 0.1) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Pizza Header */
.pizza-header {
    position: relative;
    background: linear-gradient(135deg, #DC2626 0%, #F97316 50%, #FFC107 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid var(--neon-yellow);
    z-index: 10;
}

.pizza-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.05) 2px,
            rgba(255, 255, 255, 0.05) 4px
        );
    pointer-events: none;
}

.pizza-emoji-giant {
    font-size: 8rem;
    animation: bounce 2s ease-in-out infinite, pizzaSpin 10s linear infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

@keyframes pizzaSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Conversion Type Selector */
.conversion-type-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.conversion-type-selector .type-option {
    position: relative;
    cursor: pointer;
}

.conversion-type-selector .type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.conversion-type-selector .type-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    transition: all 0.3s ease;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.conversion-type-selector .type-icon {
    font-size: 2rem;
}

.conversion-type-selector .type-text {
    font-size: 0.9rem;
}

.conversion-type-selector .type-option input[type="radio"]:checked + .type-label {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.3), rgba(249, 115, 22, 0.3));
    color: var(--text-light);
    border-color: var(--accent-orange);
    box-shadow: 0 5px 20px rgba(249, 115, 22, 0.4);
}

.conversion-type-selector .type-option:hover .type-label {
    transform: translateY(-3px);
    border-color: var(--neon-yellow);
}

/* Food Select */
.food-select {
    font-size: 1rem;
    padding: 1rem 1.5rem;
}

.food-select option {
    padding: 0.5rem;
}

/* Pizza Visual Display */
.pizza-visual {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(249, 115, 22, 0.1));
    border: 2px solid var(--accent-orange);
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
    text-align: center;
    min-height: 150px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.visual-pizza {
    font-size: 3rem;
    display: inline-block;
    animation: pizzaPopIn 0.5s ease-out backwards;
}

@keyframes pizzaPopIn {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.more-pizza {
    font-family: 'Space Mono', monospace;
    font-size: 1.3rem;
    color: var(--neon-yellow);
    font-weight: 700;
    padding: 1rem;
    animation: fadeIn 0.5s ease-out 1s backwards;
}

/* Pizza Meter */
.pizza-meter-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.whole-pizza {
    font-size: 4rem;
    animation: wholePizzaBounce 0.6s ease-out backwards;
    filter: drop-shadow(0 5px 15px rgba(220, 38, 38, 0.5));
}

@keyframes wholePizzaBounce {
    0% {
        opacity: 0;
        transform: translateY(-50px) scale(0);
    }
    50% {
        transform: translateY(10px) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.more-whole-pizzas {
    font-family: 'Righteous', cursive;
    font-size: 1.5rem;
    color: var(--accent-orange);
    padding: 1rem;
}

/* Pizza Footer */
.pizza-footer {
    background: var(--card-bg);
    border-top: 3px solid var(--accent-orange);
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.pizza-footer p {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0;
}

/* Pizza Trivia Cards */
.pizza-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(249, 115, 22, 0.2));
    border: 2px solid var(--accent-orange);
}

.pizza-calculator .trivia-card:hover {
    border-color: var(--neon-yellow);
    box-shadow: 0 15px 40px rgba(249, 115, 22, 0.4);
}

.pizza-calculator .trivia-card::before {
    background: radial-gradient(circle, rgba(255, 193, 7, 0.2) 0%, transparent 70%);
}

/* Responsive for Pizza Calculator */
@media (max-width: 768px) {
    .conversion-type-selector {
        grid-template-columns: 1fr;
    }
    
    .conversion-type-selector .type-label {
        padding: 1.2rem;
    }
    
    .pizza-visual {
        padding: 1.5rem;
    }
    
    .visual-pizza {
        font-size: 2.5rem;
    }
    
    .whole-pizza {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .pizza-emoji-giant {
        font-size: 4rem;
    }
    
    .visual-pizza {
        font-size: 2rem;
    }
    
    .whole-pizza {
        font-size: 2.5rem;
    }
}

/* ============================================
   COFFEE SURVIVAL CALCULATOR SPECIFIC STYLES
   ============================================ */

/* Coffee Body Background */
body.coffee-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(101, 67, 33, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(139, 69, 19, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(255, 193, 7, 0.1) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Coffee Header */
.coffee-header {
    position: relative;
    background: linear-gradient(135deg, #654321 0%, #8B4513 50%, #A0522D 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid #D2691E;
    z-index: 10;
}

.coffee-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.05) 2px,
            rgba(255, 255, 255, 0.05) 4px
        );
    pointer-events: none;
}

.coffee-emoji-giant {
    font-size: 8rem;
    animation: coffeeSteam 3s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

@keyframes coffeeSteam {
    0%, 100% { transform: translateY(0) scale(1); }
    25% { transform: translateY(-5px) scale(1.02); }
    50% { transform: translateY(-10px) scale(1.05); }
    75% { transform: translateY(-5px) scale(1.02); }
}

/* Scenario Selector Grid */
.scenario-selector {
    margin-bottom: 2rem;
}

.selector-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: #D2691E;
    text-align: center;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.scenario-option {
    cursor: pointer;
    position: relative;
}

.scenario-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.scenario-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.scenario-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #D2691E;
    box-shadow: 0 15px 40px rgba(210, 105, 30, 0.3);
}

.scenario-card.selected {
    background: linear-gradient(135deg, rgba(101, 67, 33, 0.3), rgba(139, 69, 19, 0.3));
    border-color: var(--neon-yellow);
    box-shadow: 0 10px 40px rgba(255, 193, 7, 0.4);
    transform: scale(1.05);
}

.scenario-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.scenario-name {
    font-family: 'Righteous', cursive;
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.scenario-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Danger Meter */
.danger-meter {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0 3rem;
    text-align: center;
}

.danger-label {
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.danger-bar {
    position: relative;
    width: 100%;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.danger-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-green), var(--electric-blue));
    border-radius: 20px;
    transition: width 1.5s ease-out, background 0.5s ease;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.5);
    position: relative;
}

.danger-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: dangerShine 2s infinite;
}

@keyframes dangerShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.danger-status {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: var(--neon-green);
    text-shadow: 0 0 20px currentColor;
    transition: color 0.5s ease;
}

/* Schedule Timeline */
.schedule-section {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(101, 67, 33, 0.1), rgba(139, 69, 19, 0.1));
    border: 2px solid #D2691E;
    border-radius: 20px;
}

.schedule-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: #D2691E;
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.schedule-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.schedule-item {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1rem;
    text-align: center;
    opacity: 0;
    animation: scheduleSlideIn 0.5s ease-out forwards;
}

@keyframes scheduleSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.schedule-time {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: var(--neon-yellow);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.schedule-icon {
    font-size: 2rem;
    margin: 0.5rem 0;
}

.schedule-action {
    font-size: 0.85rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
}

.schedule-more {
    grid-column: 1 / -1;
    text-align: center;
    font-family: 'Space Mono', monospace;
    color: var(--text-dim);
    padding: 1rem;
    font-style: italic;
}

/* Coffee Footer */
.coffee-footer {
    background: var(--card-bg);
    border-top: 3px solid #8B4513;
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.coffee-footer p {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0;
}

/* Coffee Trivia Cards */
.coffee-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(101, 67, 33, 0.2), rgba(139, 69, 19, 0.2));
    border: 2px solid #8B4513;
}

.coffee-calculator .trivia-card:hover {
    border-color: #D2691E;
    box-shadow: 0 15px 40px rgba(139, 69, 19, 0.4);
}

.coffee-calculator .trivia-card::before {
    background: radial-gradient(circle, rgba(210, 105, 30, 0.2) 0%, transparent 70%);
}

/* Responsive for Coffee Calculator */
@media (max-width: 768px) {
    .scenario-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .scenario-card {
        min-height: 160px;
        padding: 1.2rem;
    }
    
    .schedule-timeline {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .coffee-emoji-giant {
        font-size: 4rem;
    }
    
    .scenario-grid {
        grid-template-columns: 1fr;
    }
    
    .schedule-timeline {
        grid-template-columns: 1fr;
    }
    
    .danger-status {
        font-size: 1.5rem;
    }
}

/* ============================================
   BATHTUB EGG CALCULATOR SPECIFIC STYLES
   ============================================ */

/* Egg Body Background */
body.egg-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 253, 208, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 248, 220, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(250, 235, 215, 0.1) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Egg Header */
.egg-header {
    position: relative;
    background: linear-gradient(135deg, #FFF8DC 0%, #FFEFD5 50%, #FFE4B5 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid #FFD700;
    z-index: 10;
}

.egg-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.02) 2px,
            rgba(0, 0, 0, 0.02) 4px
        );
    pointer-events: none;
}

.egg-emoji-giant {
    font-size: 8rem;
    animation: eggWobble 3s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

@keyframes eggWobble {
    0%, 100% { transform: rotate(-5deg); }
    25% { transform: rotate(5deg) translateY(-5px); }
    50% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg) translateY(-5px); }
}

/* Egg Header Text - Dark for contrast */
.egg-header .glitch {
    color: #8B4513;
    text-shadow: 
        3px 3px 0 #DAA520,
        -3px -3px 0 #CD853F;
}

.egg-header .subtitle {
    color: #8B4513;
}

.egg-header .back-link {
    color: #8B4513;
    border-color: #8B4513;
    background: rgba(255, 255, 255, 0.3);
}

.egg-header .back-link:hover {
    background: white;
    color: #DAA520;
}

/* Bathtub Visual */
.bathtub-visual {
    background: linear-gradient(135deg, rgba(255, 248, 220, 0.1), rgba(255, 228, 181, 0.1));
    border: 2px solid #DAA520;
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
    text-align: center;
}

.tub-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 200px;
    margin: 0 auto 1rem;
    border: 4px solid #87CEEB;
    border-radius: 20px;
    background: linear-gradient(to bottom, #E0F6FF 0%, #B0E0E6 100%);
    overflow: hidden;
    box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.2);
}

.tub-emoji {
    position: absolute;
    bottom: -10px;
    right: 10px;
    font-size: 3rem;
    z-index: 10;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));
}

.egg-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: linear-gradient(to bottom, 
        #FFF8DC 0%, 
        #FFEFD5 50%, 
        #FFE4B5 100%);
    transition: height 2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1rem;
    overflow: hidden;
}

.egg-fill::before {
    content: '🥚 🥚 🥚 🥚 🥚 🥚 🥚 🥚';
    font-size: 2rem;
    animation: eggFloat 3s ease-in-out infinite;
    opacity: 0.8;
}

@keyframes eggFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.tub-label {
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem;
    color: #DAA520;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Chicken Timeline */
.chicken-timeline {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(255, 248, 220, 0.1), rgba(255, 228, 181, 0.1));
    border: 2px solid #CD853F;
    border-radius: 20px;
}

.timeline-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: #CD853F;
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.timeline-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    opacity: 0;
    animation: timelineSlideIn 0.5s ease-out forwards;
    transition: all 0.3s ease;
}

@keyframes timelineSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.timeline-card:hover {
    transform: translateY(-5px);
    border-color: #FFD700;
    box-shadow: 0 10px 30px rgba(218, 165, 32, 0.3);
}

.timeline-chickens {
    font-family: 'Righteous', cursive;
    font-size: 1.2rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.timeline-emoji {
    font-size: 2.5rem;
    margin: 1rem 0;
}

.timeline-days {
    font-family: 'Space Mono', monospace;
    font-size: 1.5rem;
    color: #FFD700;
    font-weight: 700;
}

/* Egg Footer */
.egg-footer {
    background: var(--card-bg);
    border-top: 3px solid #DAA520;
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.egg-footer p {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0;
}

/* Egg Trivia Cards */
.egg-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(255, 248, 220, 0.2), rgba(255, 228, 181, 0.2));
    border: 2px solid #DAA520;
}

.egg-calculator .trivia-card:hover {
    border-color: #FFD700;
    box-shadow: 0 15px 40px rgba(218, 165, 32, 0.4);
}

.egg-calculator .trivia-card::before {
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
}

/* Responsive for Egg Calculator */
@media (max-width: 768px) {
    .tub-container {
        height: 150px;
        max-width: 300px;
    }
    
    .tub-emoji {
        font-size: 2rem;
    }
    
    .egg-fill::before {
        font-size: 1.5rem;
    }
    
    .timeline-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .egg-emoji-giant {
        font-size: 4rem;
    }
    
    .tub-container {
        height: 120px;
        max-width: 250px;
    }
    
    .timeline-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   BINGE-WATCH TIMER SPECIFIC STYLES
   ============================================ */

/* Binge Body Background */
body.binge-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(230, 0, 0, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(255, 0, 0, 0.1) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Binge Header */
.binge-header {
    position: relative;
    background: linear-gradient(135deg, #E50914 0%, #B20710 50%, #8B0000 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid #E50914;
    z-index: 10;
}

.binge-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.05) 2px,
            rgba(255, 255, 255, 0.05) 4px
        );
    pointer-events: none;
}

.binge-emoji-giant {
    font-size: 8rem;
    animation: tvStatic 4s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

@keyframes tvStatic {
    0%, 100% { transform: scale(1) translateY(0); }
    25% { transform: scale(1.02) translateY(-5px); }
    50% { transform: scale(0.98) translateY(0); }
    75% { transform: scale(1.02) translateY(-5px); }
}

/* Show Selector */
.show-selector {
    margin-bottom: 2rem;
}

.selector-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: #E50914;
    text-align: center;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.show-type-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.show-type-toggle .type-option input[type="radio"]:checked + .type-label {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.3), rgba(178, 7, 16, 0.3));
    color: var(--text-light);
    border-color: #E50914;
    box-shadow: 0 5px 20px rgba(229, 9, 20, 0.4);
}

/* Progress Visual - TV Screen */
.progress-visual {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.1), rgba(0, 0, 0, 0.2));
    border: 2px solid #E50914;
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
    text-align: center;
}

.tv-screen {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 280px;
    margin: 0 auto;
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    border: 8px solid #333;
    border-radius: 20px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 50px rgba(229, 9, 20, 0.1);
    overflow: hidden;
}

.tv-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.03) 2px,
        rgba(255, 255, 255, 0.03) 4px
    );
    pointer-events: none;
    animation: scanlines 8s linear infinite;
}

@keyframes scanlines {
    0% { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

.screen-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    z-index: 2;
}

.play-icon {
    font-size: 6rem;
    animation: playPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(229, 9, 20, 0.8));
}

@keyframes playPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.episode-counter {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: #E50914;
    margin-top: 1rem;
    text-shadow: 0 0 20px rgba(229, 9, 20, 0.8);
}

/* Viewing Schedule */
.schedule-section {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.1), rgba(0, 0, 0, 0.2));
    border: 2px solid #E50914;
    border-radius: 20px;
}

.schedule-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: #E50914;
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.viewing-schedule {
    display: grid;
    gap: 1rem;
}

.schedule-day {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    opacity: 0;
    animation: scheduleSlideIn 0.5s ease-out forwards;
    align-items: center;
}

@keyframes scheduleSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.schedule-day:hover {
    border-color: #E50914;
    box-shadow: 0 5px 20px rgba(229, 9, 20, 0.3);
}

.schedule-date {
    text-align: left;
}

.schedule-day-name {
    font-family: 'Righteous', cursive;
    font-size: 1.3rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.schedule-day-date {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-dim);
}

.schedule-episodes {
    text-align: center;
}

.schedule-ep-count {
    font-family: 'Righteous', cursive;
    font-size: 2.5rem;
    color: #E50914;
}

.schedule-ep-label {
    font-size: 0.85rem;
    color: var(--text-dim);
}

.schedule-hours {
    font-family: 'Space Mono', monospace;
    font-size: 1.5rem;
    color: var(--neon-yellow);
    font-weight: 700;
    text-align: right;
}

.schedule-more {
    text-align: center;
    font-family: 'Space Mono', monospace;
    color: var(--text-dim);
    padding: 1rem;
    font-style: italic;
}

/* Binge Footer */
.binge-footer {
    background: var(--card-bg);
    border-top: 3px solid #E50914;
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.binge-footer p {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0;
}

/* Binge Trivia Cards */
.binge-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.2), rgba(139, 0, 0, 0.2));
    border: 2px solid #E50914;
}

.binge-calculator .trivia-card:hover {
    border-color: #FF0000;
    box-shadow: 0 15px 40px rgba(229, 9, 20, 0.4);
}

.binge-calculator .trivia-card::before {
    background: radial-gradient(circle, rgba(229, 9, 20, 0.2) 0%, transparent 70%);
}

/* Responsive for Binge Calculator */
@media (max-width: 768px) {
    .tv-screen {
        height: 220px;
        max-width: 400px;
    }
    
    .play-icon {
        font-size: 4rem;
    }
    
    .episode-counter {
        font-size: 1.5rem;
    }
    
    .schedule-day {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .schedule-date,
    .schedule-hours {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .binge-emoji-giant {
        font-size: 4rem;
    }
    
    .tv-screen {
        height: 180px;
        max-width: 300px;
    }
    
    .show-type-toggle {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   BATHROOM BREAKS CALCULATOR SPECIFIC STYLES
   ============================================ */

body.bathroom-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(0, 150, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(100, 200, 255, 0.15) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

.bathroom-header {
    position: relative;
    background: linear-gradient(135deg, #0096FF 0%, #00BFFF 50%, #87CEEB 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid var(--electric-blue);
    z-index: 10;
}

.bathroom-emoji-giant {
    font-size: 8rem;
    animation: toiletFlush 3s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

@keyframes toiletFlush {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(-10deg) scale(1.05); }
}

.movie-selector {
    margin-bottom: 2rem;
}

.selector-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: var(--electric-blue);
    text-align: center;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.movie-type-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.movie-type-toggle .type-option input[type="radio"]:checked + .type-label {
    background: linear-gradient(135deg, rgba(0, 150, 255, 0.3), rgba(0, 191, 255, 0.3));
    border-color: var(--electric-blue);
    box-shadow: 0 5px 20px rgba(0, 150, 255, 0.4);
}

.urgency-meter {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0 3rem;
    text-align: center;
}

.urgency-label {
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.urgency-bar {
    width: 100%;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.urgency-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-green), var(--electric-blue));
    border-radius: 20px;
    transition: width 1.5s ease-out, background 0.5s ease;
    box-shadow: 0 0 20px currentColor;
}

.urgency-status {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: var(--neon-green);
    text-shadow: 0 0 20px currentColor;
    transition: color 0.5s ease;
}

.timeline-section {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(0, 150, 255, 0.1), rgba(0, 191, 255, 0.1));
    border: 2px solid var(--electric-blue);
    border-radius: 20px;
}

.timeline-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: var(--electric-blue);
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
}

.break-timeline {
    display: grid;
    gap: 1rem;
}

.timeline-break {
    display: grid;
    grid-template-columns: 100px 60px 1fr auto;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    opacity: 0;
    animation: scheduleSlideIn 0.5s ease-out forwards;
    align-items: center;
}

.break-time {
    font-family: 'Space Mono', monospace;
    font-size: 1.2rem;
    color: var(--neon-yellow);
    font-weight: 700;
}

.break-icon {
    font-size: 2rem;
}

.break-action {
    font-size: 1.1rem;
    color: var(--text-light);
}

.break-tip {
    font-size: 0.85rem;
    color: var(--text-dim);
}

.no-breaks-message {
    text-align: center;
    padding: 3rem;
}

.no-breaks-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.no-breaks-text {
    font-size: 1.3rem;
    color: var(--neon-green);
}

.recommendation-section {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.recommendation-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: var(--neon-yellow);
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
}

.recommendations-list {
    display: grid;
    gap: 1rem;
}

.rec-card {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    opacity: 0;
    animation: scheduleSlideIn 0.5s ease-out forwards;
    transition: all 0.3s ease;
}

.rec-card:hover {
    border-color: var(--electric-blue);
    box-shadow: 0 5px 20px rgba(0, 150, 255, 0.3);
}

.rec-icon {
    font-size: 2.5rem;
}

.rec-title {
    font-family: 'Righteous', cursive;
    font-size: 1.2rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.rec-text {
    font-size: 0.95rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.bathroom-footer {
    background: var(--card-bg);
    border-top: 3px solid var(--electric-blue);
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.bathroom-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(0, 150, 255, 0.2), rgba(0, 191, 255, 0.2));
    border: 2px solid var(--electric-blue);
}

.bathroom-calculator .trivia-card:hover {
    border-color: #87CEEB;
    box-shadow: 0 15px 40px rgba(0, 150, 255, 0.4);
}

@media (max-width: 768px) {
    .timeline-break {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .rec-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .movie-type-toggle {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SPOTIFY CONCERTS CALCULATOR SPECIFIC STYLES
   ============================================ */

body.concert-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(29, 185, 84, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(30, 215, 96, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(0, 0, 0, 0.3) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

.concert-header {
    position: relative;
    background: linear-gradient(135deg, #1DB954 0%, #1ED760 50%, #1AA34A 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid #1DB954;
    z-index: 10;
}

.concert-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.05) 2px,
            rgba(0, 0, 0, 0.05) 4px
        );
    pointer-events: none;
}

.concert-emoji-giant {
    font-size: 8rem;
    animation: musicBounce 2s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

@keyframes musicBounce {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

.listening-stats, .concert-preferences {
    margin-bottom: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(29, 185, 84, 0.1), rgba(0, 0, 0, 0.2));
    border: 2px solid rgba(29, 185, 84, 0.3);
    border-radius: 20px;
}

.stats-title {
    font-family: 'Righteous', cursive;
    font-size: 1.8rem;
    color: #1DB954;
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.stage-visual {
    background: linear-gradient(135deg, rgba(29, 185, 84, 0.1), rgba(0, 0, 0, 0.3));
    border: 2px solid #1DB954;
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
    text-align: center;
}

.stage-container {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.stage-lights {
    height: 40px;
    background: linear-gradient(90deg, 
        #1DB954 0%, transparent 10%, 
        transparent 20%, #1ED760 30%, transparent 40%,
        transparent 50%, #1DB954 60%, transparent 70%,
        transparent 80%, #1ED760 90%, transparent 100%);
    border-radius: 10px 10px 0 0;
    animation: lightSweep 3s linear infinite;
}

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

.stage-platform {
    background: linear-gradient(to bottom, #333 0%, #1a1a1a 100%);
    border: 3px solid #444;
    border-radius: 0 0 20px 20px;
    padding: 3rem 2rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.performer {
    font-size: 6rem;
    margin-bottom: 1rem;
    animation: performerBounce 1.5s ease-in-out infinite;
}

@keyframes performerBounce {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.1) translateY(-10px); }
}

.crowd {
    font-size: 2rem;
    letter-spacing: 1rem;
    animation: crowdWave 2s ease-in-out infinite;
}

@keyframes crowdWave {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; transform: scale(1.05); }
}

.tour-schedule {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(29, 185, 84, 0.1), rgba(0, 0, 0, 0.2));
    border: 2px solid #1DB954;
    border-radius: 20px;
}

.tour-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: #1DB954;
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.tour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem;
}

.tour-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    opacity: 0;
    animation: scheduleSlideIn 0.5s ease-out forwards;
    transition: all 0.3s ease;
}

.tour-card:hover {
    transform: translateY(-5px);
    border-color: #1DB954;
    box-shadow: 0 10px 30px rgba(29, 185, 84, 0.3);
}

.tour-number {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.tour-icon {
    font-size: 3rem;
    margin: 0.5rem 0;
}

.tour-date {
    font-family: 'Righteous', cursive;
    font-size: 1.2rem;
    color: #1DB954;
    margin-bottom: 0.5rem;
}

.tour-songs {
    font-size: 0.9rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
}

.tour-more {
    grid-column: 1 / -1;
    text-align: center;
    font-family: 'Space Mono', monospace;
    color: var(--text-dim);
    padding: 1rem;
    font-style: italic;
}

.recommendations-section {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.recs-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: var(--neon-yellow);
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.tips-grid {
    display: grid;
    gap: 1rem;
}

.tip-card {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    opacity: 0;
    animation: scheduleSlideIn 0.5s ease-out forwards;
    transition: all 0.3s ease;
}

.tip-card:hover {
    border-color: #1DB954;
    box-shadow: 0 5px 20px rgba(29, 185, 84, 0.3);
}

.tip-icon {
    font-size: 2.5rem;
}

.tip-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tip-title {
    font-family: 'Righteous', cursive;
    font-size: 1.2rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.tip-text {
    font-size: 0.95rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.concert-footer {
    background: var(--card-bg);
    border-top: 3px solid #1DB954;
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.concert-footer p {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0;
}

.concert-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(29, 185, 84, 0.2), rgba(0, 0, 0, 0.2));
    border: 2px solid #1DB954;
}

.concert-calculator .trivia-card:hover {
    border-color: #1ED760;
    box-shadow: 0 15px 40px rgba(29, 185, 84, 0.4);
}

.concert-calculator .trivia-card::before {
    background: radial-gradient(circle, rgba(29, 185, 84, 0.2) 0%, transparent 70%);
}

@media (max-width: 768px) {
    .tour-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tip-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .stage-platform {
        padding: 2rem 1rem;
    }
    
    .performer {
        font-size: 4rem;
    }
}

@media (max-width: 480px) {
    .concert-emoji-giant {
        font-size: 4rem;
    }
    
    .tour-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SALARY IN COFFEE CALCULATOR SPECIFIC STYLES
   ============================================ */

body.salary-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(101, 67, 33, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(34, 139, 34, 0.1) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

.salary-header {
    position: relative;
    background: linear-gradient(135deg, #654321 0%, #D4AF37 50%, #228B22 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid #D4AF37;
    z-index: 10;
}

.salary-emoji-giant {
    font-size: 8rem;
    animation: coffeePour 3s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

@keyframes coffeePour {
    0%, 100% { transform: rotate(-10deg) scale(1); }
    50% { transform: rotate(10deg) scale(1.05); }
}

.income-section, .coffee-section {
    margin-bottom: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(101, 67, 33, 0.1), rgba(212, 175, 55, 0.1));
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
}

.section-title {
    font-family: 'Righteous', cursive;
    font-size: 1.8rem;
    color: #D4AF37;
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.coffee-meter {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0 3rem;
    text-align: center;
}

.meter-label {
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.meter-bar {
    width: 100%;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.meter-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-green), var(--electric-blue));
    border-radius: 20px;
    transition: width 1.5s ease-out, background 0.5s ease;
    box-shadow: 0 0 20px currentColor;
}

.meter-percent {
    font-family: 'Righteous', cursive;
    font-size: 2.5rem;
    color: var(--neon-green);
    text-shadow: 0 0 20px currentColor;
    transition: color 0.5s ease;
}

.breakdown-section {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(101, 67, 33, 0.1), rgba(212, 175, 55, 0.1));
    border: 2px solid #D4AF37;
    border-radius: 20px;
}

.breakdown-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: #D4AF37;
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.breakdown-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    opacity: 0;
    animation: scheduleSlideIn 0.5s ease-out forwards;
    transition: all 0.3s ease;
}

.breakdown-card:hover {
    transform: translateY(-5px);
    border-color: #D4AF37;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

.breakdown-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.breakdown-label {
    font-family: 'Righteous', cursive;
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.breakdown-value {
    font-family: 'Space Mono', monospace;
    font-size: 1.8rem;
    color: #D4AF37;
    font-weight: 700;
}

.salary-footer {
    background: var(--card-bg);
    border-top: 3px solid #D4AF37;
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.salary-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(101, 67, 33, 0.2), rgba(212, 175, 55, 0.2));
    border: 2px solid #D4AF37;
}

.salary-calculator .trivia-card:hover {
    border-color: #228B22;
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);
}

@media (max-width: 768px) {
    .breakdown-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .salary-emoji-giant {
        font-size: 4rem;
    }
    
    .breakdown-grid {
        grid-template-columns: 1fr;
    }
    
    .meter-percent {
        font-size: 2rem;
    }
}

/* ============================================
   ANIMAL HEIGHT COMPARISON SPECIFIC STYLES
   ============================================ */

body.height-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(139, 69, 19, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(160, 82, 45, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(210, 180, 140, 0.1) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

.height-header {
    position: relative;
    background: linear-gradient(135deg, #8B4513 0%, #A0522D 50%, #D2B48C 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid #D2B48C;
    z-index: 10;
}

.height-emoji-giant {
    font-size: 8rem;
    animation: giraffeStretch 3s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

@keyframes giraffeStretch {
    0%, 100% { transform: scaleY(1) translateY(0); }
    50% { transform: scaleY(1.1) translateY(-10px); }
}

.height-visual {
    margin: 2rem 0 3rem;
}

.animal-comparisons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.animal-height-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    opacity: 0;
    animation: slideIn 0.5s ease-out forwards;
    transition: all 0.3s ease;
}

.animal-height-card:hover {
    transform: translateY(-8px);
    border-color: #D2B48C;
    box-shadow: 0 15px 40px rgba(210, 180, 140, 0.3);
}

.animal-height-emoji {
    font-size: 4rem;
    margin-bottom: 0.5rem;
}

.animal-height-name {
    font-family: 'Righteous', cursive;
    font-size: 1.2rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.animal-height-size {
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem;
    color: #D2B48C;
    margin-bottom: 0.75rem;
}

.animal-height-comparison {
    font-size: 0.9rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    margin-bottom: 0.5rem;
}

.animal-height-percentage {
    font-family: 'Space Mono', monospace;
    font-size: 1.5rem;
    color: var(--neon-yellow);
    font-weight: 700;
}

.perfect-match {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.2), rgba(210, 180, 140, 0.2));
    border: 3px solid #D2B48C;
    border-radius: 20px;
}

.match-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: #D2B48C;
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
}

.match-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.no-matches {
    text-align: center;
    font-size: 1.2rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    padding: 2rem;
}

.match-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    opacity: 0;
    animation: scheduleSlideIn 0.5s ease-out forwards;
}

.match-emoji {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.match-name {
    font-family: 'Righteous', cursive;
    font-size: 1.2rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.match-height {
    font-size: 0.95rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.match-accuracy {
    font-family: 'Space Mono', monospace;
    font-size: 1.3rem;
    color: var(--neon-green);
    font-weight: 700;
}

.stack-section {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.stack-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: var(--neon-yellow);
    margin-bottom: 0.5rem;
    text-align: center;
    text-transform: uppercase;
}

.stack-subtitle {
    text-align: center;
    color: var(--text-dim);
    margin-bottom: 2rem;
}

.stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
}

.stack-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    opacity: 0;
    animation: scheduleSlideIn 0.5s ease-out forwards;
}

.stack-visual {
    font-size: 2rem;
    margin-bottom: 1rem;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.stack-more {
    font-size: 1.5rem;
    color: var(--text-dim);
}

.stack-count {
    font-family: 'Righteous', cursive;
    font-size: 2.5rem;
    color: #D2B48C;
    margin-bottom: 0.5rem;
}

.stack-name {
    font-size: 1rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
}

.height-footer {
    background: var(--card-bg);
    border-top: 3px solid #D2B48C;
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.height-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.2), rgba(210, 180, 140, 0.2));
    border: 2px solid #D2B48C;
}

.height-calculator .trivia-card:hover {
    border-color: #A0522D;
    box-shadow: 0 15px 40px rgba(210, 180, 140, 0.4);
}

@media (max-width: 768px) {
    .animal-comparisons-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .match-grid, .stack-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .height-emoji-giant {
        font-size: 4rem;
    }
    
    .animal-comparisons-grid,
    .match-grid,
    .stack-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   DUCK-HORSE WEIGHT CALCULATOR SPECIFIC STYLES
   ============================================ */

body.duck-horse-weight-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 193, 7, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(139, 69, 19, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(255, 227, 0, 0.1) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

.duck-horse-weight-header {
    position: relative;
    background: linear-gradient(135deg, #FFB300 0%, #8B4513 50%, #FFB300 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid var(--neon-yellow);
    z-index: 10;
}

.duck-horse-weight-emoji-giant {
    font-size: 8rem;
    animation: duckHorseWiggle 3s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

@keyframes duckHorseWiggle {
    0%, 100% { transform: rotate(-5deg) scale(1); }
    25% { transform: rotate(5deg) scale(1.05); }
    50% { transform: rotate(-5deg) scale(1); }
    75% { transform: rotate(5deg) scale(0.95); }
}

.visual-horses {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 227, 0, 0.3);
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0 3rem;
    text-align: center;
    min-height: 150px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.visual-horse {
    font-size: 2rem;
    display: inline-block;
    opacity: 0;
    animation: horseAppear 0.3s ease-out forwards;
}

@keyframes horseAppear {
    from {
        opacity: 0;
        transform: scale(0) rotate(180deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.visual-more {
    width: 100%;
    margin-top: 1rem;
    font-family: 'Righteous', cursive;
    font-size: 1.5rem;
    color: var(--neon-yellow);
    animation: fadeIn 1s ease-out;
}

.comparison-section {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.comparison-bars {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

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

.comparison-bar-item {
    opacity: 0;
    animation: slideIn 0.5s ease-out forwards;
}

.comparison-bar-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
    font-family: 'Space Mono', monospace;
}

.comparison-emoji {
    font-size: 1.5rem;
}

.comparison-name {
    flex: 1;
    font-size: 1.1rem;
    color: var(--text-light);
}

.comparison-value {
    font-weight: 700;
    color: var(--neon-yellow);
}

.comparison-bar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    height: 30px;
    overflow: hidden;
    position: relative;
}

.comparison-bar-fill {
    background: linear-gradient(90deg, #FFB300, #FF8C00);
    height: 100%;
    border-radius: 10px;
    transition: width 1s ease-out;
    position: relative;
    overflow: hidden;
}

.comparison-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shine 2s ease-in-out infinite;
}

@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.comparison-bar-fill.highlight {
    background: linear-gradient(90deg, var(--neon-yellow), var(--neon-green));
    box-shadow: 0 0 20px rgba(255, 227, 0, 0.5);
}

.comparison-bar-item.highlight {
    border: 2px solid var(--neon-yellow);
    border-radius: 10px;
    padding: 1rem;
    background: rgba(255, 227, 0, 0.05);
}

.stacking-section {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(255, 179, 0, 0.1), rgba(139, 69, 19, 0.1));
    border: 2px solid rgba(255, 193, 7, 0.3);
    border-radius: 20px;
}

.stacking-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.stacking-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.stacking-card:hover {
    transform: translateY(-5px);
    border-color: var(--neon-yellow);
    box-shadow: 0 15px 40px rgba(255, 227, 0, 0.3);
}

.stacking-emoji {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.stacking-label {
    font-family: 'Righteous', cursive;
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 0.75rem;
}

.stacking-value {
    font-family: 'Space Mono', monospace;
    font-size: 1.5rem;
    color: #FFB300;
    font-weight: 700;
}

.submit-btn {
    width: 100%;
    padding: 1.5rem 2rem;
    font-family: 'Righteous', cursive;
    font-size: 1.5rem;
    color: var(--dark-bg);
    background: linear-gradient(135deg, var(--neon-yellow), var(--neon-green));
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(255, 227, 0, 0.4);
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.submit-btn:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 40px rgba(255, 227, 0, 0.6);
}

.submit-btn:active {
    transform: translateY(-2px) scale(0.98);
}

.btn-emoji {
    font-size: 1.8rem;
}

.duck-horse-weight-calculator .submit-btn {
    font-size: 1.4rem;
    padding: 1.5rem 3rem;
    min-height: 70px;
}

.duck-horse-weight-calculator .btn-emoji {
    font-size: 2rem;
}

/* Ensure form sections display correctly */
#customWeightSection,
#presetSection {
    display: none;
}

#customWeightSection[style*="display: block"],
#presetSection[style*="display: block"] {
    display: block !important;
}

.duck-horse-weight-footer {
    background: var(--card-bg);
    border-top: 3px solid var(--neon-yellow);
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.duck-horse-weight-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(255, 179, 0, 0.2), rgba(139, 69, 19, 0.2));
    border: 2px solid #FFB300;
}

.duck-horse-weight-calculator .trivia-card:hover {
    border-color: var(--neon-yellow);
    box-shadow: 0 15px 40px rgba(255, 227, 0, 0.4);
}

@media (max-width: 768px) {
    .stacking-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .duck-horse-weight-emoji-giant {
        font-size: 4rem;
    }
    
    .stacking-grid {
        grid-template-columns: 1fr;
    }
    
    .visual-horse {
        font-size: 1.5rem;
    }
    
    .comparison-bar-label {
        flex-wrap: wrap;
    }
}

/* ============================================
   HUMAN HISTORY CALCULATOR SPECIFIC STYLES
   ============================================ */

body.history-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(0, 217, 255, 0.1) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

.history-header {
    position: relative;
    background: linear-gradient(135deg, #8B4513 0%, #B8860B 50%, #8B4513 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid #DAA520;
    z-index: 10;
}

.history-emoji-giant {
    font-size: 8rem;
    animation: historyPulse 3s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

@keyframes historyPulse {
    0%, 100% { transform: scale(1) rotate(-3deg); }
    50% { transform: scale(1.1) rotate(3deg); }
}

.timeline-visual {
    margin: 2rem 0 3rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(218, 165, 32, 0.3);
    border-radius: 20px;
}

.timeline-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-dim);
}

.timeline-scale {
    color: #DAA520;
    font-weight: 700;
}

.timeline-bar {
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    position: relative;
    overflow: visible;
}

.timeline-fill {
    height: 100%;
    background: linear-gradient(90deg, #DAA520, #FFD700);
    border-radius: 30px;
    position: relative;
    transition: width 1.5s ease-out;
    box-shadow: 0 0 20px rgba(218, 165, 32, 0.5);
}

.timeline-marker {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--dark-bg);
    border: 3px solid #FFD700;
    border-radius: 15px;
    padding: 0.5rem 1rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
}

.timeline-marker-emoji {
    font-size: 1.5rem;
}

.timeline-marker-text {
    font-family: 'Righteous', cursive;
    color: #FFD700;
    font-size: 1.1rem;
}

.context-section {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(255, 107, 53, 0.1));
    border: 2px solid rgba(218, 165, 32, 0.3);
    border-radius: 20px;
}

.context-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    margin: 1rem 0;
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid #DAA520;
    border-radius: 10px;
    opacity: 0;
    animation: slideIn 0.5s ease-out forwards;
}

.context-emoji {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.context-text {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.5;
}

.happening-section {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.happening-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.happening-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    opacity: 0;
    animation: slideIn 0.5s ease-out forwards;
}

.happening-bullet {
    font-size: 2rem;
    color: #DAA520;
    line-height: 1;
    flex-shrink: 0;
}

.happening-text {
    font-size: 1.1rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    line-height: 1.6;
}

.history-footer {
    background: var(--card-bg);
    border-top: 3px solid #DAA520;
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.history-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.2), rgba(218, 165, 32, 0.2));
    border: 2px solid #DAA520;
}

.history-calculator .trivia-card:hover {
    border-color: #FFD700;
    box-shadow: 0 15px 40px rgba(218, 165, 32, 0.4);
}

@media (max-width: 768px) {
    .timeline-marker {
        right: 0;
        font-size: 0.9rem;
    }
    
    .timeline-marker-text {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .history-emoji-giant {
        font-size: 4rem;
    }
    
    .timeline-label {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .timeline-bar {
        height: 40px;
    }
    
    .timeline-marker {
        padding: 0.3rem 0.6rem;
    }
    
    .context-item {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================
   HEAT DEATH CALCULATOR SPECIFIC STYLES
   ============================================ */

body.heat-death-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(138, 43, 226, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(255, 16, 240, 0.15) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

.heat-death-header {
    position: relative;
    background: linear-gradient(135deg, #0A0A0A 0%, #1a0033 50%, #000000 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
    border-bottom: 5px solid #8B00FF;
    z-index: 10;
}

.heat-death-emoji-giant {
    font-size: 8rem;
    animation: cosmicFloat 4s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 30px rgba(138, 43, 226, 0.8));
}

@keyframes cosmicFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.9; }
    50% { transform: translateY(-20px) scale(1.05); opacity: 1; }
}

.info-box {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    background: rgba(138, 43, 226, 0.1);
    border: 2px solid rgba(138, 43, 226, 0.3);
    border-radius: 15px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.info-emoji {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.info-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
}

.info-text strong {
    color: #8B00FF;
}

.hero-stat.cosmic {
    background: radial-gradient(circle, rgba(138, 43, 226, 0.2), transparent);
    border: 3px solid #8B00FF;
}

.hero-stat-value.gigantic {
    font-size: 4rem;
    background: linear-gradient(135deg, #8B00FF, #FF10F0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.perspective-visual {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(138, 43, 226, 0.1));
    border: 2px solid rgba(138, 43, 226, 0.3);
    border-radius: 20px;
}

.perspective-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: #8B00FF;
    text-align: center;
    margin-bottom: 2rem;
}

.perspective-item {
    margin: 2rem 0;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 4px solid #8B00FF;
    border-radius: 10px;
    opacity: 0;
    animation: slideIn 0.6s ease-out forwards;
}

.perspective-text {
    font-size: 1.2rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    margin-bottom: 1rem;
}

.perspective-value {
    font-family: 'Righteous', cursive;
    font-size: 2.5rem;
    color: #FF10F0;
    margin: 1rem 0;
    text-shadow: 0 0 20px rgba(255, 16, 240, 0.5);
}

.perspective-subtext {
    font-size: 1rem;
    color: var(--text-dim);
    font-style: italic;
}

.cosmic-timeline {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(138, 43, 226, 0.3);
    border-radius: 20px;
}

.timeline-events {
    margin-top: 2rem;
}

.timeline-event {
    display: grid;
    grid-template-columns: 200px 50px 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
    opacity: 0;
    animation: slideIn 0.5s ease-out forwards;
}

.timeline-event-time {
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    color: #8B00FF;
    font-weight: 700;
    text-align: right;
    padding-top: 0.5rem;
}

.timeline-event-marker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-dot {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #8B00FF, #FF10F0);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.8);
    flex-shrink: 0;
}

.timeline-line {
    width: 3px;
    flex-grow: 1;
    background: linear-gradient(to bottom, rgba(138, 43, 226, 0.5), transparent);
    min-height: 40px;
}

.timeline-event:last-child .timeline-line {
    display: none;
}

.timeline-event-content {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(138, 43, 226, 0.2);
    border-radius: 15px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.timeline-event-content:hover {
    transform: translateX(10px);
    border-color: #8B00FF;
    box-shadow: 0 10px 30px rgba(138, 43, 226, 0.3);
}

.timeline-event-emoji {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.timeline-event-name {
    font-family: 'Righteous', cursive;
    font-size: 1.5rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.timeline-event-desc {
    font-size: 1rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.comparison-mega {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(0, 217, 255, 0.1));
    border: 2px solid rgba(138, 43, 226, 0.3);
    border-radius: 20px;
}

.temperature-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.temp-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.temp-card:hover {
    transform: translateY(-10px);
    border-color: #8B00FF;
    box-shadow: 0 15px 40px rgba(138, 43, 226, 0.4);
}

.temp-emoji {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.temp-value {
    font-family: 'Righteous', cursive;
    font-size: 2.5rem;
    color: #00D9FF;
    margin: 1rem 0;
}

.temp-label {
    font-family: 'Space Mono', monospace;
    font-size: 1.2rem;
    color: var(--text-light);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.temp-card p {
    font-size: 0.95rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.heat-death-footer {
    background: var(--card-bg);
    border-top: 3px solid #8B00FF;
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.heat-death-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(0, 0, 0, 0.5));
    border: 2px solid #8B00FF;
}

.heat-death-calculator .trivia-card:hover {
    border-color: #FF10F0;
    box-shadow: 0 15px 40px rgba(138, 43, 226, 0.5);
}

@media (max-width: 768px) {
    .timeline-event {
        grid-template-columns: 120px 40px 1fr;
        gap: 1rem;
    }
    
    .timeline-event-time {
        font-size: 0.85rem;
    }
    
    .temperature-info {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .heat-death-emoji-giant {
        font-size: 4rem;
    }
    
    .hero-stat-value.gigantic {
        font-size: 2.5rem;
    }
    
    .perspective-value {
        font-size: 1.8rem;
    }
    
    .timeline-event {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .timeline-event-time {
        text-align: left;
    }
    
    .timeline-event-marker {
        display: none;
    }
    
    .info-box {
        flex-direction: column;
    }
}

/* ============================================
   UNIQUENESS CALCULATOR SPECIFIC STYLES
   ============================================ */

body.uniqueness-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 105, 180, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(138, 43, 226, 0.1) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

.uniqueness-header {
    position: relative;
    background: linear-gradient(135deg, #FF1493 0%, #FFD700 50%, #FF1493 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid #FFD700;
    z-index: 10;
}

.uniqueness-emoji-giant {
    font-size: 8rem;
    animation: sparkleFloat 3s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(255, 215, 0, 0.8));
}

@keyframes sparkleFloat {
    0%, 100% { transform: translateY(0) rotate(-10deg) scale(1); }
    50% { transform: translateY(-15px) rotate(10deg) scale(1.1); }
}

.form-section-title {
    font-family: 'Righteous', cursive;
    font-size: 1.8rem;
    color: #FFD700;
    margin: 2.5rem 0 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.checkbox-label:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: #FFD700;
    transform: translateX(5px);
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.checkbox-label span {
    cursor: pointer;
    user-select: none;
    flex: 1;
}

.checkbox-label input[type="checkbox"]:checked + span {
    color: #FFD700;
    font-weight: 700;
}

.checkbox-label:active {
    transform: scale(0.98);
}

.hero-stat.sparkle {
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2), transparent);
    border: 3px solid #FFD700;
}

.hero-stat-value.rainbow {
    font-size: 3.5rem;
    background: linear-gradient(135deg, #FF1493, #FFD700, #FF1493);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s ease-in-out infinite;
}

.uniqueness-meter {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.1), rgba(255, 215, 0, 0.1));
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 20px;
}

.meter-title {
    font-family: 'Righteous', cursive;
    font-size: 1.8rem;
    color: #FFD700;
    text-align: center;
    margin-bottom: 1.5rem;
}

.meter-bar {
    position: relative;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    border-radius: 30px;
    transition: width 1.5s ease-out, background 1s ease;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.meter-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Righteous', cursive;
    font-size: 1.5rem;
    color: var(--text-light);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    z-index: 2;
}

.trait-breakdown {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.trait-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    margin: 0.75rem 0;
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid rgba(255, 215, 0, 0.5);
    border-radius: 10px;
    opacity: 0;
    animation: slideIn 0.3s ease-out forwards;
}

.trait-item.rare {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), rgba(255, 105, 180, 0.2));
    border-left-color: #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.trait-name {
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem;
    color: var(--text-light);
    font-weight: 700;
}

.trait-value {
    font-size: 1rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
}

.trait-item.rare .trait-value {
    color: #FFD700;
    font-weight: 700;
}

.uniqueness-footer {
    background: var(--card-bg);
    border-top: 3px solid #FFD700;
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.uniqueness-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.2), rgba(255, 215, 0, 0.2));
    border: 2px solid #FFD700;
}

.uniqueness-calculator .trivia-card:hover {
    border-color: #FF1493;
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.4);
}

@media (max-width: 768px) {
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .trait-item {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .uniqueness-emoji-giant {
        font-size: 4rem;
    }
    
    .hero-stat-value.rainbow {
        font-size: 2.5rem;
    }
    
    .form-section-title {
        font-size: 1.5rem;
    }
}

/* ============================================
   STAIRS SHAME CALCULATOR SPECIFIC STYLES
   ============================================ */

body.stairs-shame-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(244, 67, 54, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(76, 175, 80, 0.1) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

.stairs-shame-header {
    position: relative;
    background: linear-gradient(135deg, #FF6B35 0%, #F44336 50%, #FF6B35 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid #FF5722;
    z-index: 10;
}

.stairs-shame-emoji-giant {
    font-size: 8rem;
    animation: shameWobble 2s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(255, 87, 34, 0.8));
}

@keyframes shameWobble {
    0%, 100% { transform: rotate(-5deg) translateY(0); }
    25% { transform: rotate(5deg) translateY(-10px); }
    50% { transform: rotate(-5deg) translateY(0); }
    75% { transform: rotate(5deg) translateY(-10px); }
}

.shame-meter-container {
    margin: 3rem 0;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(76, 175, 80, 0.1));
    border: 3px solid rgba(255, 87, 34, 0.3);
    border-radius: 20px;
    text-align: center;
}

.shame-title {
    font-family: 'Righteous', cursive;
    font-size: 2.5rem;
    color: #FF5722;
    margin-bottom: 2rem;
}

.shame-meter {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 250px;
    margin: 0 auto 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 250px 250px 0 0;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.1);
}

.shame-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #4CAF50, #F44336);
    transition: width 1.5s ease-out;
    border-radius: 250px 250px 0 0;
}

.shame-needle {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 4px;
    height: 120px;
    background: var(--text-light);
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(-90deg);
    transition: transform 1.5s ease-out;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    border-radius: 4px 4px 0 0;
}

.shame-needle::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: var(--text-light);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.shame-label {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    transition: color 0.5s ease;
}

.shame-score {
    font-family: 'Space Mono', monospace;
    font-size: 1.5rem;
    color: var(--text-dim);
}

.verdict-box {
    margin: 3rem 0;
    padding: 2.5rem;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(244, 67, 54, 0.2));
    border: 3px solid rgba(255, 87, 34, 0.5);
    border-radius: 20px;
    text-align: center;
    transition: background 0.5s ease;
}

.verdict-emoji {
    font-size: 5rem;
    margin-bottom: 1rem;
    animation: verdictBounce 0.6s ease-out;
}

@keyframes verdictBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.verdict-title {
    font-family: 'Righteous', cursive;
    font-size: 2.5rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.verdict-text {
    font-size: 1.3rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

.yearly-impact {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.impact-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    opacity: 0;
    animation: slideIn 0.5s ease-out forwards;
    transition: all 0.3s ease;
}

.impact-card:hover {
    transform: translateY(-5px);
    border-color: #FF5722;
    box-shadow: 0 10px 30px rgba(255, 87, 34, 0.3);
}

.impact-emoji {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.impact-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.impact-value {
    font-family: 'Righteous', cursive;
    font-size: 1.8rem;
    color: #FF5722;
}

.judgment-section {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.1), rgba(76, 175, 80, 0.1));
    border: 2px solid rgba(255, 87, 34, 0.3);
    border-radius: 20px;
}

.judgment-scale {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.judgment-item {
    display: grid;
    grid-template-columns: 60px 1fr 100px;
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    opacity: 0;
    animation: slideIn 0.5s ease-out forwards;
    transition: all 0.3s ease;
}

.judgment-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(10px);
}

.judgment-item.highlight {
    border-color: #FF5722;
    background: rgba(255, 87, 34, 0.15);
    box-shadow: 0 0 30px rgba(255, 87, 34, 0.3);
}

.judgment-emoji {
    font-size: 2.5rem;
    text-align: center;
}

.judgment-info {
    flex-grow: 1;
}

.judgment-label {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.judgment-bar {
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.judgment-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 1s ease-out;
}

.judgment-shame {
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    text-align: right;
}

.stairs-shame-footer {
    background: var(--card-bg);
    border-top: 3px solid #FF5722;
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.stairs-shame-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(76, 175, 80, 0.2));
    border: 2px solid #FF5722;
}

.stairs-shame-calculator .trivia-card:hover {
    border-color: #4CAF50;
    box-shadow: 0 15px 40px rgba(255, 87, 34, 0.4);
}

@media (max-width: 768px) {
    .judgment-item {
        grid-template-columns: 50px 1fr 80px;
        gap: 1rem;
    }
    
    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .stairs-shame-emoji-giant {
        font-size: 4rem;
    }
    
    .shame-meter {
        height: 200px;
    }
    
    .verdict-title {
        font-size: 2rem;
    }
    
    .verdict-text {
        font-size: 1.1rem;
    }
    
    .judgment-item {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .judgment-shame {
        text-align: center;
    }
    
    .impact-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   WORTH IT CALCULATOR SPECIFIC STYLES
   ============================================ */

body.worth-it-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 193, 7, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(76, 175, 80, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(244, 67, 54, 0.1) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

.worth-it-header {
    position: relative;
    background: linear-gradient(135deg, #FFC107 0%, #FF9800 50%, #FFC107 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid #FFB300;
    z-index: 10;
}

.worth-it-emoji-giant {
    font-size: 8rem;
    animation: worthItSway 3s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(255, 193, 7, 0.8));
}

@keyframes worthItSway {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}

.range-value {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: #FFC107;
    text-align: center;
    margin-top: 0.5rem;
}

.worth-verdict {
    margin: 3rem 0;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(244, 67, 54, 0.2));
    border: 3px solid #FFC107;
    border-radius: 25px;
    text-align: center;
    transition: all 0.5s ease;
}

.verdict-icon {
    font-size: 6rem;
    margin-bottom: 1rem;
    animation: popIn 0.6s ease-out;
}

@keyframes popIn {
    0% { transform: scale(0) rotate(0deg); }
    50% { transform: scale(1.3) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); }
}

.verdict-title {
    font-family: 'Righteous', cursive;
    font-size: 3rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.verdict-subtitle {
    font-size: 1.3rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    margin-bottom: 1.5rem;
}

.worth-score {
    font-family: 'Space Mono', monospace;
    font-size: 2rem;
    color: #FFC107;
    font-weight: 700;
}

.worth-o-meter {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 193, 7, 0.3);
    border-radius: 20px;
}

.meter-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: #FFC107;
    text-align: center;
    margin-bottom: 2rem;
}

.meter-scale {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.meter-segment {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 5px;
}

.meter-segment.terrible { background: #F44336; }
.meter-segment.bad { background: #FF9800; }
.meter-segment.meh { background: #FFC107; }
.meter-segment.okay { background: #CDDC39; }
.meter-segment.good { background: #8BC34A; }
.meter-segment.great { background: #4CAF50; }

.meter-bar {
    position: relative;
    height: 40px;
    background: linear-gradient(90deg, #F44336 0%, #FF9800 16.6%, #FFC107 33.2%, #CDDC39 49.8%, #8BC34A 66.4%, #4CAF50 83%);
    border-radius: 20px;
}

.meter-indicator {
    position: absolute;
    top: -10px;
    left: 0;
    width: 0;
    height: 60px;
    border-left: 4px solid var(--text-light);
    transition: left 1.5s ease-out;
}

.meter-indicator::before {
    content: '▼';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-light);
    font-size: 1.5rem;
}

.alternatives-section, .breakdown-section, .advice-section {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.alternative-item, .breakdown-item, .advice-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    margin: 1rem 0;
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid #FFC107;
    border-radius: 10px;
    opacity: 0;
    animation: slideIn 0.5s ease-out forwards;
}

.alternative-quantity {
    font-family: 'Righteous', cursive;
    font-size: 3rem;
    color: #FFC107;
    min-width: 80px;
    text-align: center;
}

.alternative-name {
    font-size: 1.3rem;
    color: var(--text-light);
}

.breakdown-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.breakdown-name {
    font-family: 'Righteous', cursive;
    font-size: 1.2rem;
    color: var(--text-light);
}

.breakdown-score {
    font-family: 'Space Mono', monospace;
    color: #FFC107;
    font-weight: 700;
}

.breakdown-bar {
    height: 25px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.breakdown-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    transition: width 1s ease-out;
}

.breakdown-note {
    font-size: 0.9rem;
    color: var(--text-dim);
    font-style: italic;
}

.advice-icon {
    font-size: 2.5rem;
}

.advice-text {
    font-size: 1.1rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    line-height: 1.6;
}

.worth-it-footer {
    background: var(--card-bg);
    border-top: 3px solid #FFC107;
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.worth-it-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(76, 175, 80, 0.2));
    border: 2px solid #FFC107;
}

.worth-it-calculator .trivia-card:hover {
    border-color: #4CAF50;
    box-shadow: 0 15px 40px rgba(255, 193, 7, 0.4);
}

@media (max-width: 768px) {
    .meter-scale {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .alternative-item, .breakdown-item, .advice-item {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .worth-it-emoji-giant {
        font-size: 4rem;
    }
    
    .verdict-title {
        font-size: 2rem;
    }
    
    .meter-scale {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   NAP OPTIMIZER CALCULATOR SPECIFIC STYLES
   ============================================ */

body.nap-optimizer-calculator {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(123, 104, 238, 0.1) 0%, transparent 50%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
}

.nap-optimizer-header {
    position: relative;
    background: linear-gradient(135deg, #4B0082 0%, #8A2BE2 50%, #4B0082 100%);
    padding: 3rem 0 4rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid #9370DB;
    z-index: 10;
}

.nap-optimizer-emoji-giant {
    font-size: 8rem;
    animation: napFloat 3s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 10px 20px rgba(138, 43, 226, 0.8));
}

@keyframes napFloat {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-15px); opacity: 0.8; }
}

.nap-plan {
    margin: 3rem 0;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(75, 0, 130, 0.2));
    border: 3px solid #8A2BE2;
    border-radius: 25px;
    text-align: center;
}

.plan-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
    animation: pulse 2s ease-in-out infinite;
}

.plan-title {
    font-family: 'Righteous', cursive;
    font-size: 1.8rem;
    color: #9370DB;
    margin-bottom: 1rem;
}

.plan-duration {
    font-family: 'Righteous', cursive;
    font-size: 4rem;
    color: var(--text-light);
    margin: 1.5rem 0;
    text-shadow: 0 0 30px rgba(138, 43, 226, 0.8);
}

.plan-times {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 2rem 0;
}

.plan-time-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plan-label {
    font-size: 1rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.plan-value {
    font-family: 'Space Mono', monospace;
    font-size: 2rem;
    color: #8A2BE2;
    font-weight: 700;
}

.plan-type {
    font-family: 'Righteous', cursive;
    font-size: 1.5rem;
    color: #9370DB;
    margin-top: 1rem;
}

.sleep-cycle-viz {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(138, 43, 226, 0.3);
    border-radius: 20px;
}

.viz-title {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
    color: #8A2BE2;
    text-align: center;
    margin-bottom: 2rem;
}

.cycle-chart {
    display: flex;
    height: 100px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.cycle-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    opacity: 0;
    animation: slideIn 0.5s ease-out forwards;
}

.cycle-stage.light { background: #9370DB; }
.cycle-stage.rem { background: #8A2BE2; }
.cycle-stage.deep { background: #4B0082; }

.stage-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-light);
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.cycle-legend {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.legend-color {
    width: 30px;
    height: 20px;
    border-radius: 5px;
}

.legend-color.light { background: #9370DB; }
.legend-color.rem { background: #8A2BE2; }
.legend-color.deep { background: #4B0082; }

.tips-section, .alternatives-nap {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.tip-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    margin: 1rem 0;
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid #8A2BE2;
    border-radius: 10px;
    opacity: 0;
    animation: slideIn 0.5s ease-out forwards;
}

.tip-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.tip-text {
    font-size: 1.1rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    line-height: 1.6;
}

.alt-nap-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    margin: 1rem 0;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(138, 43, 226, 0.2);
    border-radius: 15px;
    opacity: 0;
    animation: slideIn 0.5s ease-out forwards;
    transition: all 0.3s ease;
}

.alt-nap-card:hover {
    transform: translateX(10px);
    border-color: #8A2BE2;
    box-shadow: 0 10px 30px rgba(138, 43, 226, 0.3);
}

.alt-nap-emoji {
    font-size: 2.5rem;
}

.alt-nap-name {
    font-family: 'Righteous', cursive;
    font-size: 1.3rem;
    color: var(--text-light);
    min-width: 150px;
}

.alt-nap-duration {
    font-family: 'Space Mono', monospace;
    font-size: 1.2rem;
    color: #8A2BE2;
    font-weight: 700;
}

.alt-nap-time {
    font-size: 1rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
}

.alt-nap-benefit {
    font-size: 0.95rem;
    color: var(--text-dim);
    font-style: italic;
    margin-left: auto;
}

.nap-optimizer-footer {
    background: var(--card-bg);
    border-top: 3px solid #8A2BE2;
    padding: 3rem 0;
    margin-top: 5rem;
    text-align: center;
}

.nap-optimizer-calculator .trivia-card {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(75, 0, 130, 0.2));
    border: 2px solid #8A2BE2;
}

.nap-optimizer-calculator .trivia-card:hover {
    border-color: #9370DB;
    box-shadow: 0 15px 40px rgba(138, 43, 226, 0.4);
}

@media (max-width: 768px) {
    .plan-times {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .alt-nap-card {
        flex-wrap: wrap;
    }
    
    .alt-nap-benefit {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .nap-optimizer-emoji-giant {
        font-size: 4rem;
    }
    
    .plan-duration {
        font-size: 3rem;
    }
    
    .stage-label {
        font-size: 0.7rem;
    }
    
    .cycle-legend {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ============================================
   GLOBAL FOOTER STYLES
   ============================================ */

.global-footer {
    background: linear-gradient(135deg, rgba(20, 20, 30, 0.95), rgba(10, 10, 20, 0.98));
    border-top: 3px solid var(--accent);
    padding: 3rem 0 2rem;
    margin-top: 5rem;
    text-align: center;
}

.footer-message {
    margin-bottom: 2rem;
}

.footer-message p {
    font-size: 1.2rem;
    color: var(--text-light);
    margin: 0.5rem 0;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem 0;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-links a {
    font-weight: 600;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    padding: 0.25rem 0.5rem;
}

.footer-links a:hover {
    color: #FFA500; /* Orange hover */
    text-decoration: underline;
}

.footer-separator {
    color: var(--text-dim);
    font-size: 0.9rem;
    user-select: none;
}

.footer-copyright {
    margin: 1.5rem 0;
}

.footer-copyright p {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.social-link {
    font-size: 1.8rem;
    text-decoration: none;
    opacity: 0.7;
    transition: all 0.3s ease;
    display: inline-block;
}

.social-link:hover {
    opacity: 1;
    transform: translateY(-3px) scale(1.1);
}

/* Override calculator-specific footer styles to use global footer */
body .global-footer {
    /* This ensures global footer styles take precedence */
}

/* Responsive footer */
@media (max-width: 768px) {
    .footer-links {
        flex-direction: column;
        gap: 1rem;
    }
    
    .footer-separator {
        display: none;
    }
    
    .footer-links a {
    font-weight: 600;
        display: block;
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    .global-footer {
        padding: 2rem 0 1.5rem;
    }
    
    .footer-message p {
        font-size: 1rem;
    }
    
    .social-link {
        font-size: 1.5rem;
    }
}

/* ============================================
   LEGAL PAGES STYLES (Terms, Privacy, etc.)
   ============================================ */

body.legal-page {
    font-family: 'Fredoka', sans-serif;
    background: var(--dark-bg);
    color: var(--text-light);
    line-height: 1.8;
}

.legal-header {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    padding: 3rem 0;
    text-align: center;
    margin-bottom: 3rem;
}

.legal-header h1 {
    font-family: 'Righteous', cursive;
    font-size: 3rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.last-updated {
    color: var(--text-dim);
    font-size: 0.95rem;
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

.legal-content section {
    margin-bottom: 3rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 2rem;
    border-radius: 15px;
    border-left: 4px solid var(--accent);
}

.legal-content h2 {
    font-family: 'Righteous', cursive;
    font-size: 1.8rem;
    color: #FFA500; /* Orange hover */
    margin-bottom: 1.5rem;
}

.legal-content p {
    margin-bottom: 1rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
}

.legal-content ul {
    margin: 1rem 0 1rem 2rem;
    color: #FFD700; /* Bright gold - visible on dark backgrounds */
}

.legal-content li {
    margin-bottom: 0.5rem;
}

.legal-content a {
    color: #FFA500; /* Orange hover */
    text-decoration: none;
    transition: all 0.3s ease;
}

.legal-content a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.legal-content strong {
    color: var(--text-light);
    font-weight: 700;
}

@media (max-width: 768px) {
    .legal-header h1 {
        font-size: 2rem;
    }
    
    .legal-content section {
        padding: 1.5rem;
    }
    
    .legal-content h2 {
        font-size: 1.5rem;
    }
}

/* ============================================
   ABOUT PAGE SPECIFIC STYLES
   ============================================ */

body.about-page {
    background: linear-gradient(135deg, #FF6B35 0%, #8B00FF 50%, #00D9FF 100%);
    background-attachment: fixed;
}

.about-header {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-bottom: 3px solid rgba(255, 255, 255, 0.3);
}

.about-hero {
    text-align: center;
    padding: 2rem 0;
}

.about-emoji {
    font-size: 6rem;
    margin-bottom: 1rem;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.about-tagline {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    margin-top: 1rem;
}

.about-content {
    background: var(--dark-bg);
    margin-top: 0;
}

.about-section {
    position: relative;
    padding-left: 4rem;
}

.section-icon {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 3rem;
    opacity: 0.8;
}

.calculator-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.showcase-item {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(138, 43, 226, 0.1));
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.showcase-item:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
}

.showcase-emoji {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.showcase-item h3 {
    font-family: 'Righteous', cursive;
    font-size: 1.3rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.showcase-item p {
    font-size: 0.95rem;
    color: var(--text-dim);
    margin: 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.feature-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
}

.feature-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    font-family: 'Righteous', cursive;
    color: var(--accent);
    margin-bottom: 1rem;
}

.philosophy-quote {
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid var(--accent);
    padding: 2rem;
    margin: 2rem 0;
    font-size: 1.3rem;
    font-style: italic;
    color: var(--text-light);
}

.philosophy-quote footer {
    margin-top: 1rem;
    font-size: 1rem;
    color: var(--text-dim);
    font-style: normal;
}

.philosophy-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.philosophy-list li {
    padding: 0.75rem 0;
    font-size: 1.1rem;
    color: var(--text-medium);
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.audience-item {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
}

.audience-emoji {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
}

.tech-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.tech-list li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    color: var(--text-medium);
}

.tech-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}

.cta-section {
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(138, 43, 226, 0.1));
    border-radius: 20px;
    padding: 3rem 2rem !important;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: var(--text-light);
    text-decoration: none;
    border-radius: 10px;
    font-family: 'Righteous', cursive;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4);
}

.cta-button.secondary {
    background: transparent;
    border-color: var(--accent);
}

.stats-section {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    padding: 3rem 2rem !important;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.stat-box {
    text-align: center;
}

.stat-number {
    font-family: 'Righteous', cursive;
    font-size: 4rem;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1.1rem;
    color: var(--text-medium);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .about-section {
        padding-left: 0;
    }
    
    .section-icon {
        position: static;
        display: block;
        text-align: center;
        margin-bottom: 1rem;
    }
    
    .calculator-showcase {
        grid-template-columns: 1fr;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .stat-number {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .about-emoji {
        font-size: 4rem;
    }
    
    .about-tagline {
        font-size: 1.2rem;
    }
}