@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');

body {
    background-color: #1a1a1a; /* Very dark gray for background */
    color: #eee; /* Light gray for general text */
    font-family: 'Fira Code', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Use Fira Code */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Make body take full viewport height */
    margin: 0;
    overflow: hidden; /* Prevent scrollbars */
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

#score-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

#score {
    font-size: 4em; /* Large font size for score */
    color: #ffd700; /* Gold color */
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); /* Subtle glow effect */
}

.coin-icon {
    font-size: 3em; /* Size for the coin emoji */
    color: #ffd700; /* Gold color */
}

#coinInput {
    padding: 12px 20px;
    font-size: 1.8em;
    background-color: #282828; /* Slightly lighter dark for input background */
    color: #eee;
    border: 2px solid #ffd700; /* Gold border */
    border-radius: 0;
    text-align: center;
    width: 180px; /* Small width for the input */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); /* Soft glow around input */
    transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transition for focus effect */
    outline: none; /* Remove default browser outline on focus */
    font-family: 'Fira Code', monospace; /* Ensure monospace for input */
}

#coinInput:focus {
    border-color: #ffea00; /* Brighter gold on focus */
    box-shadow: 0 0 20px rgba(255, 234, 0, 0.5); /* Stronger glow on focus */
}

/* New CSS for streak break flash */
.streak-break-flash {
    animation: streakRedFlash 0.4s ease-out; /* Quick, smooth flash */
}

@keyframes streakRedFlash {
    0% {
        border-color: #ffea00; /* Start with focus color or current border color */
        box-shadow: 0 0 20px rgba(255, 234, 0, 0.5);
    }
    50% {
        border-color: #ff0000; /* Red flash */
        box-shadow: 0 0 25px rgba(255, 0, 0, 0.7);
    }
    100% {
        border-color: #ffd700; /* Return to default gold border */
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    }
}

#cps-display {
    font-size: 20px;
    color: #ffff60;
    text-align: center;
}

#modifiers-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#wps-display,
#streak-display {
    font-size: 1.5em;
    color: #aaa;
}

#loading-indicator {
    font-size: 10px;
}

/* CSS for the floating score animation */
.floating-score {
    /* position: absolute; */
    font-size: 2em;
    color: #ffd700; /* Gold color */
    font-weight: bold;
    opacity: 0;
    transform: translateY(0);
    animation: fadeAndMoveUp 0.7s forwards; /* 1 second animation */
    pointer-events: none; /* Allow clicks to pass through */
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
}

@keyframes fadeAndMoveUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    20% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

#floating-scores-container {
    width: 100%;
    position: relative;
    height: 90px;
    display: flex;
    justify-content: center;
    overflow-x: clip;
}

/* Base value display styles */
#base-value-display {
    font-size: 1.5em;
    color: #eee; /* Default color for 1¢ */
    transition: color 0.3s, text-shadow 0.3s, transform 0.3s;
}

.value-5c {
    color: #8aff8a; /* Greenish for 5¢ */
    text-shadow: 0 0 5px rgba(138, 255, 138, 0.7);
}

.value-10c {
    color: #8afbff; /* Cyan for 10¢ */
    text-shadow: 0 0 8px rgba(138, 251, 255, 0.8);
}

.value-25c {
    color: #ff8aff; /* Magenta for 25¢ */
    font-weight: bold;
    text-shadow: 0 0 12px rgba(255, 138, 255, 0.9);
    animation: pulse 1s infinite alternate;
}

.value-50c {
    color: #ff8a8a; /* Reddish for 50¢ */
    font-weight: bolder;
    font-size: 1.8em; /* Larger font for 50¢ */
    text-shadow: 0 0 15px rgba(255, 138, 138, 1);
    animation: superPulse 0.8s infinite alternate;
}

@keyframes pulse {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

@keyframes superPulse {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(1.1);
        opacity: 0.8;
    }
}