/* ============================================
   EXPLODING KITTENS - Theme CSS
   Colors: Bordeaux (#8b1a2c), Dark (#4a0e18), Rose (#d4a0a7)
   ============================================ */

/* --- Base --- */
body {
    background: #0d0205 !important;
    color: #fff;
    font-family: 'Fredoka', 'Segoe UI', sans-serif;
}

/* --- No scrollbar --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

/* --- Gauge needle animation --- */
@keyframes gauge-bounce {
    0% { transform: rotate(var(--gauge-deg)); }
    30% { transform: rotate(calc(var(--gauge-deg) + 5deg)); }
    60% { transform: rotate(calc(var(--gauge-deg) - 3deg)); }
    100% { transform: rotate(var(--gauge-deg)); }
}

#root {
    background: transparent !important;
}

/* --- Scrollbar Theme --- */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
    background: rgba(139, 26, 44, 0.5);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 26, 44, 0.8);
}

/* --- Card Hover Effects --- */
.card-hover:hover {
    transform: translateY(-20px) scale(1.1) !important;
    z-index: 100 !important;
    box-shadow: 0 15px 40px rgba(139, 26, 44, 0.4) !important;
}

/* --- Explosion Animation --- */
@keyframes explode-shake {
    0% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-5px, -5px) rotate(-2deg); }
    20% { transform: translate(5px, -5px) rotate(2deg); }
    30% { transform: translate(-5px, 5px) rotate(-1deg); }
    40% { transform: translate(5px, 5px) rotate(1deg); }
    50% { transform: translate(-3px, -3px) rotate(0deg); }
    60% { transform: translate(3px, -3px) rotate(-1deg); }
    70% { transform: translate(-3px, 3px) rotate(1deg); }
    80% { transform: translate(3px, 3px) rotate(0deg); }
    90% { transform: translate(-1px, -1px) rotate(-1deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.explosion-shake {
    animation: explode-shake 0.4s infinite;
}

/* --- Pulse Glow --- */
@keyframes pulse-glow-red {
    0%, 100% { box-shadow: 0 0 10px rgba(139, 26, 44, 0.3); }
    50% { box-shadow: 0 0 30px rgba(139, 26, 44, 0.6), 0 0 60px rgba(100, 15, 30, 0.3); }
}

.pulse-glow {
    animation: pulse-glow-red 2s infinite;
}

/* --- Avatar pulse (mon tour) --- */
@keyframes avatar-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.avatar-pulse {
    animation: avatar-pulse 1.5s ease-in-out infinite;
}

/* --- Card Draw Animation --- */
@keyframes card-draw {
    from {
        transform: translateX(-100px) rotate(-20deg);
        opacity: 0;
    }
    to {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

.card-draw-anim {
    animation: card-draw 0.4s ease-out;
}

/* --- Nope Flash --- */
@keyframes nope-flash {
    0%, 100% { background: transparent; }
    50% { background: rgba(244, 67, 54, 0.3); }
}

.nope-flash {
    animation: nope-flash 0.3s ease-in-out 3;
}

/* --- Nope Window Countdown Bar --- */
@keyframes nope-bar-shrink {
    from { width: 100%; }
    to { width: 0%; }
}

.nope-bar-anim {
    animation: nope-bar-shrink var(--nope-duration) linear forwards;
}

@keyframes nope-window-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.02); }
}

.nope-window-pulse {
    animation: nope-window-pulse 0.8s ease-in-out infinite;
}

/* --- Button Styles --- */
.btn-exploding {
    background: linear-gradient(135deg, #8b1a2c 0%, #6d1525 100%);
    color: white;
    border: none;
    border-radius: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 6px 0 #4a0e18;
    position: relative;
    top: 0;
}

.btn-exploding:active {
    top: 6px;
    box-shadow: 0 0 0 #4a0e18;
}

.btn-exploding:hover {
    background: linear-gradient(135deg, #a52238 0%, #8b1a2c 100%);
}

/* --- Override GameMenu colors --- */
.bg-game-primary { background-color: #8b1a2c !important; }
.text-game-primary { color: #8b1a2c !important; }
.border-game-primary { border-color: #8b1a2c !important; }

/* --- Lobby overrides --- */
[class*="bg-gradient-to-b"][class*="from-gray"] {
    background: linear-gradient(to bottom, #2d0a10 0%, #0d0205 100%) !important;
}

/* --- Attack Impact Animation --- */
@keyframes attack-impact {
    0% { transform: scale(0) rotate(-20deg); opacity: 0; }
    40% { transform: scale(1.3) rotate(5deg); opacity: 1; }
    60% { transform: scale(0.9) rotate(-3deg); }
    80% { transform: scale(1.05) rotate(1deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.attack-impact {
    animation: attack-impact 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* --- Shuffle Animation on Draw Pile --- */
@keyframes shuffle-wiggle {
    0% { transform: translate(var(--jx), var(--jy)) rotate(var(--jr)); }
    15% { transform: translate(calc(var(--jx) + 8px), calc(var(--jy) - 4px)) rotate(calc(var(--jr) + 6deg)); }
    30% { transform: translate(calc(var(--jx) - 10px), calc(var(--jy) + 3px)) rotate(calc(var(--jr) - 8deg)); }
    45% { transform: translate(calc(var(--jx) + 6px), calc(var(--jy) - 6px)) rotate(calc(var(--jr) + 5deg)); }
    60% { transform: translate(calc(var(--jx) - 8px), calc(var(--jy) + 5px)) rotate(calc(var(--jr) - 4deg)); }
    75% { transform: translate(calc(var(--jx) + 4px), calc(var(--jy) - 2px)) rotate(calc(var(--jr) + 3deg)); }
    100% { transform: translate(var(--jx), var(--jy)) rotate(var(--jr)); }
}

.shuffle-wiggle {
    animation: shuffle-wiggle 0.3s ease-in-out infinite;
}

/* --- TV Turn Progress Ring --- */
@keyframes tv-turn-spin {
    from { stroke-dashoffset: 465; }
    to { stroke-dashoffset: 0; }
}

.tv-turn-progress {
    animation: tv-turn-spin 8s linear infinite;
    filter: drop-shadow(0 0 6px rgba(255, 235, 59, 0.6));
}

/* --- Range input style --- */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 12px;
    background: linear-gradient(90deg, #4a0e18 0%, #8b1a2c 50%, #a52238 100%);
    border-radius: 6px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    background: #d4a0a7;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    border: 3px solid #fff;
}