/* MALLARD CLICKER 2000 - Authentic Geocities Style CSS */
/* Pure 90s Aesthetics - No Modern Stuff! */

body {
    margin: 0;
    padding: 20px;
    background-color: #000080;
    background-image: url('data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAEAAAEALAAAAAADAAMACwQCAAAAOw==');
}

/* Classic Blink Text Effect */
.blink-text {
    animation: blink 1s step-start infinite;
}

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

/* Green Terminal Glow Effect */
.glow-text {
    text-shadow: 
        0 0 5px #00FF00,
        0 0 10px #00FF00,
        0 0 15px #00FF00,
        0 0 20px #00FF00;
    animation: terminalGlow 1.5s ease-in-out infinite;
}

@keyframes terminalGlow {
    0%, 100% {
        text-shadow: 
            0 0 5px #00FF00,
            0 0 10px #00FF00,
            0 0 15px #00FF00,
            0 0 20px #00FF00;
    }
    50% {
        text-shadow: 
            0 0 10px #00FF00,
            0 0 20px #00FF00,
            0 0 30px #00FF00,
            0 0 40px #00FF00;
    }
}

/* The Button - Classic 90s 3D Look */
.retro-button {
    background: linear-gradient(180deg, #FFFF00 0%, #FFCC00 100%);
    border: 4px outset #FFFFFF;
    padding: 20px 40px;
    cursor: pointer;
    font-family: Arial Black, Impact;
    box-shadow: 5px 5px 0px #000000;
}

.retro-button:hover {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFF00 100%);
    animation: wiggle 0.3s ease-in-out infinite;
}

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

.retro-button:active {
    border: 4px inset #CCCCCC;
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0px #000000;
}

/* Error Box */
#errorBox {
    min-height: 20px;
    margin: 10px auto;
}

.error-box {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* Table Styling */
table {
    margin: 10px auto;
}

/* Center Alignment */
center {
    display: block;
}

/* Classic Link Colors */
a:link {
    color: #00FFFF;
    text-decoration: underline;
}

a:visited {
    color: #FF00FF;
}

a:hover {
    color: #FFFFFF;
    text-decoration: none;
}

a:active {
    color: #FFFF00;
}

/* Marquee */
marquee {
    display: block;
}

/* Font Smoothing */
body, table, td, th, div, span, p {
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Responsive for 90s monitors */
@media (max-width: 640px) {
    table[width="600"],
    table[width="500"] {
        width: 95% !important;
    }
}

/* RED LED-style Glow Effect */
.led-glow {
    text-shadow: 
        0 0 5px #FF0000,
        0 0 10px #FF0000,
        0 0 20px #FF0000,
        0 0 40px #FF0000,
        0 0 80px #FF0000;
    animation: ledPulse 1s ease-in-out infinite;
}

@keyframes ledPulse {
    0%, 100% {
        text-shadow: 
            0 0 5px #FF0000,
            0 0 10px #FF0000,
            0 0 20px #FF0000,
            0 0 40px #FF0000;
        transform: scale(1);
    }
    50% {
        text-shadow: 
            0 0 10px #FF0000,
            0 0 20px #FF0000,
            0 0 40px #FF0000,
            0 0 60px #FF0000,
            0 0 100px #FF0000;
        transform: scale(1.05);
    }
}

/* Counter Shake Effect */
.counter-shake {
    animation: counterShake 2s ease-in-out infinite;
}

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

/* Individual digit styling for the LED counter */
.digit {
    display: inline-block;
    min-width: 28px;
    padding: 6px 4px;
    margin: 0 2px;
    background: #110000;
    border: 2px inset #440000;
    color: #FF0000;
    font-weight: bold;
    font-family: "Courier New", monospace;
    font-size: 40px;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
    animation: digitPulse 1.2s ease-in-out infinite;
}

@keyframes digitPulse {
    0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
    50% { transform: translateY(-4px) scale(1.03); opacity: 0.95; }
}

/* Loading text below the counter */
.loading-text {
    color: #00FFFF;
    font-family: Arial, sans-serif;
    font-size: 12px;
    margin-top: 6px;
}

/* LED-digit for mallard-counter-script.js */
.led-digit {
    display: inline-block;
    min-width: 36px;
    padding: 8px 6px;
    margin: 0 4px;
    background: linear-gradient(180deg, #220000 0%, #400000 100%);
    border: 4px solid #FF0000;
    box-shadow: 0 0 12px rgba(255,0,0,0.5), inset 0 0 12px rgba(255,0,0,0.12);
    color: #FF2222;
    font-weight: bold;
    font-family: "Courier New", monospace;
    font-size: 44px;
    line-height: 44px;
    vertical-align: middle;
    text-align: center;
    border-radius: 4px;
    transform: translateY(0) scale(1);
    transition: transform 120ms ease-in-out, box-shadow 120ms ease-in-out;
    animation: digitPulse 1.2s ease-in-out infinite;
}

.led-digit.flash {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 0 20px rgba(255,0,0,0.9), inset 0 0 10px rgba(255,0,0,0.3);
}

/* Instruction text */
.mallard-instruction {
    margin-top: 8px;
    color: #FFD54F;
    font-family: Verdana, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
}

/* More duck styling for the flying ducks (slower, colorful) */
.duck-fly span {
    font-weight: bold;
    font-size: 26px;
    text-shadow: 0 0 4px rgba(0,0,0,0.6);
}

/* Additional tiny waddle effect */
.duck-waddle {
    display: inline-block;
    transform-origin: center;
    animation: waddle 1.2s ease-in-out infinite;
}

@keyframes waddle {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

/* Rainbow Text Effect */
.rainbow-text {
    animation: rainbow 2s linear infinite;
}

@keyframes rainbow {
    0% { color: #FF0000; }
    16% { color: #FF00FF; }
    33% { color: #0000FF; }
    50% { color: #00FFFF; }
    66% { color: #00FF00; }
    83% { color: #FFFF00; }
    100% { color: #FF0000; }
}

/* Flying Duck Animation */
.duck-fly {
    position: relative;
    height: 80px;
    overflow: hidden;
    width: 100%;
}

.duck-fly span {
    position: absolute;
    font-size: 14px;
    line-height: 1.2;
    white-space: pre;
    animation: flyAcross 3s linear infinite;
}

.duck1 {
    color: #FFFF00;
    animation-delay: 0s;
}

.duck2 {
    color: #00FFFF;
    animation-delay: 1s;
}

.duck3 {
    color: #FF00FF;
    animation-delay: 2s;
}

@keyframes flyAcross {
    0% {
        left: -50px;
        top: 0px;
    }
    50% {
        top: 10px;
    }
    100% {
        left: 100%;
        top: 0px;
    }
}

/* Bouncing Duck */
.duck-bounce {
    animation: bounce 1s ease-in-out infinite;
}

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

/* Flash effect on ducks when clicking */
.duck-bounce.flash {
    animation: none;
    transform: scale(1.15) rotate(-3deg);
    transition: transform 0.2s ease-in-out;
}

.duck-fly span.flash {
    animation-name: flyAcross, flashHue;
    animation-duration: 3s, 0.6s;
    animation-iteration-count: infinite, 1;
}

@keyframes flashHue {
    0% { filter: hue-rotate(0deg) saturate(1.2); }
    50% { filter: hue-rotate(120deg) saturate(1.6); }
    100% { filter: hue-rotate(0deg) saturate(1.2); }
}