/* Empire War — Custom Styles */

/* Fix scrolling — override h-full that breaks overflow */
html, body {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden;
}
body {
    overflow-y: auto !important;
}

/* Smooth transitions for all interactive elements */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #1a1b1f;
}
::-webkit-scrollbar-thumb {
    background: #3e4046;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4c4e55;
}

/* AP bar pulse when full */
.ap-full {
    animation: apPulse 2s ease-in-out infinite;
}
@keyframes apPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Flash message auto-hide */
.flash-message {
    animation: flashIn 0.3s ease-out, flashOut 0.3s ease-in 4.7s forwards;
}
@keyframes flashIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes flashOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Card hover effects */
.game-card {
    transition: border-color 0.2s, background-color 0.2s, transform 0.1s;
}
.game-card:hover {
    transform: translateY(-1px);
}

/* Deal result animations */
.deal-success {
    animation: successFlash 0.5s ease-out;
}
@keyframes successFlash {
    0% { background-color: rgba(34, 197, 94, 0.2); }
    100% { background-color: transparent; }
}

.deal-fail {
    animation: failFlash 0.5s ease-out;
}
@keyframes failFlash {
    0% { background-color: rgba(239, 68, 68, 0.2); }
    100% { background-color: transparent; }
}

/* Loading spinner */
.spinner {
    border: 2px solid #3e4046;
    border-top: 2px solid #d4a017;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Tabular numbers for timers */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}


/* Mobile-friendly touch targets */
@media (max-width: 640px) {
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }
}