* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Nunito', sans-serif;
}

.font-nunito {
    font-family: 'Nunito', sans-serif;
}

.font-caveat {
    font-family: 'Caveat', cursive;
}

.fridge-background {
    background: linear-gradient(180deg, #E8E8E8 0%, #D4D4D4 50%, #C8C8C8 100%);
    background-attachment: fixed;
    position: relative;
}

.fridge-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(255,255,255,0.2) 0%, transparent 40%);
    pointer-events: none;
}

.notepad-container {
    background: linear-gradient(135deg, #FFFEF5 0%, #FFF9E6 100%);
    border-radius: 16px;
    box-shadow: 
        0 8px 32px rgba(0,0,0,0.15),
        0 2px 8px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.8);
    border: 1px solid rgba(200, 180, 140, 0.3);
    position: relative;
}

.notepad-container::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 16px;
    background: linear-gradient(180deg, #E74C3C 0%, #C0392B 100%);
    border-radius: 4px 4px 0 0;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
}

.generate-btn {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

.generate-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
}

.generate-btn:active:not(:disabled) {
    transform: translateY(0);
}

.surprise-btn {
    background: linear-gradient(135deg, #A8E6CF 0%, #88D8B0 100%);
    color: #2D5A45;
    box-shadow: 0 4px 15px rgba(136, 216, 176, 0.4);
}

.surprise-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(136, 216, 176, 0.5);
}

.image-container {
    background: linear-gradient(135deg, #FFFEF5 0%, #FFF9E6 100%);
    border-radius: 16px;
    box-shadow: 
        0 8px 32px rgba(0,0,0,0.15),
        0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid rgba(200, 180, 140, 0.3);
}

.city-badge {
    display: inline-block;
    background: linear-gradient(135deg, #3498DB 0%, #2980B9 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 30px;
    box-shadow: 0 3px 10px rgba(52, 152, 219, 0.4);
}

.action-btn {
    transition: all 0.2s ease;
}

.action-btn:hover {
    transform: translateY(-2px);
}

.download-btn {
    background: linear-gradient(135deg, #3498DB 0%, #2980B9 100%);
    color: white;
    box-shadow: 0 3px 10px rgba(52, 152, 219, 0.3);
}

.regenerate-btn {
    background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
    color: white;
    box-shadow: 0 3px 10px rgba(155, 89, 182, 0.3);
}

.reset-btn {
    background: linear-gradient(135deg, #1ABC9C 0%, #16A085 100%);
    color: white;
    box-shadow: 0 3px 10px rgba(26, 188, 156, 0.3);
}

.share-btn {
    background: linear-gradient(135deg, #1DA1F2 0%, #0D8BDB 100%);
    color: white;
    box-shadow: 0 3px 10px rgba(29, 161, 242, 0.3);
}

.history-item {
    background: white;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.magnet-spinner {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.spinner-magnet {
    width: 24px;
    height: 32px;
    background: linear-gradient(180deg, #E74C3C 50%, #333 50%);
    border-radius: 6px;
    animation: magnetBounce 0.6s ease-in-out infinite;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.3);
}

.spinner-magnet.delay-1 {
    animation-delay: 0.2s;
    background: linear-gradient(180deg, #3498DB 50%, #333 50%);
}

.spinner-magnet.delay-2 {
    animation-delay: 0.4s;
    background: linear-gradient(180deg, #F39C12 50%, #333 50%);
}

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

.loading-message {
    animation: fadeInOut 2.5s ease-in-out infinite;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@media (max-width: 640px) {
    .magnet-letter {
        font-size: 0.875rem !important;
        padding: 3px 5px !important;
    }
}