static/css/base.css

/* Main Layout Styles */
.main-title {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white !important;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin: 20px 0;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.main-title h1 {
    color: white !important;
    margin: 0;
}

/* Token Styles */
.token-counter {
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    margin: 5px 0;
    border: 2px solid #ddd;
}

.token-counter.valid {
    border-color: #4CAF50;
    background-color: #e8f5e8;
}

.token-counter.warning {
    border-color: #ff9800;
    background-color: #fff3e0;
}

.token-counter.error {
    border-color: #f44336;
    background-color: #ffebee;
}

.difficulty-indicator {
    background-color: #e3f2fd;
    padding: 8px;
    border-radius: 8px;
    text-align: center;
    margin: 5px 0;
    font-size: 14px;
}

.difficulty-indicator.easy { background-color: #f1f8e9; color: #8bc34a; }
.difficulty-indicator.medium { background-color: #fff8e1; color: #ffc107; }
.difficulty-indicator.hard { background-color: #fce4ec; color: #e91e63; }

.token-explanation {
    background-color: #e3f2fd;
    padding: 10px 15px;
    border-radius: 8px;
    border-left: 4px solid #2196F3;
    margin: 10px 0;
    font-size: 14px;
    color: #1565C0;
    opacity: 0.9;
}

.token-visualization {
    background-color: #f9f9f9;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin: 10px 0;
    min-height: 40px;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.5;
}

.token {
    display: inline-block;
    padding: 2px 6px;
    margin: 2px;
    border-radius: 4px;
    border: 1px solid;
    font-weight: bold;
}

.token.token-1 { background-color: #e8eaf6; border-color: #667eea; color: #667eea; }
.token.token-2 { background-color: #f1f8e9; border-color: #8bc34a; color: #8bc34a; }
.token.token-3 { background-color: #fff8e1; border-color: #ffc107; color: #ffc107; }
.token.token-4 { background-color: #fce4ec; border-color: #e91e63; color: #e91e63; }
.token.token-5 { background-color: #f3e5f5; border-color: #9c27b0; color: #9c27b0; }
.token.token-excess { background-color: #ffebee; border-color: #d32f2f; color: #d32f2f; }

/* Response Styles */
.original-response { 
    background-color: #fafafa !important; 
    border-left: 4px solid #999 !important; 
}

.streaming-response { 
    background-color: #f1f8e9 !important; 
    border-left: 4px solid #8bc34a !important;
    font-family: monospace;
}

/* Animation Styles */
.countdown {
    background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
    color: white;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    animation: pulse 1s infinite;
}

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

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

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

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

@keyframes glow {
    from { box-shadow: 0 0 5px #4CAF50; }
    to { box-shadow: 0 0 15px #4CAF50, 0 0 20px #4CAF50; }
}

/* Animation Assignments */
.start-button:hover {
    animation: bounce 0.6s ease !important;
}


.game-mechanics {
    animation: fadeIn 1s ease-in;
}

.token-counter.valid {
    animation: glow 2s ease-in-out infinite alternate;
}