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

.navbar { background: rgba(0,0,0,0.85); backdrop-filter: blur(15px); border-bottom: 1px solid rgba(255,255,255,0.05); }

.match-card { 
    background: rgba(255, 255, 255, 0.02); 
    border: 1px solid rgba(255, 255, 255, 0.05); 
    border-radius: 24px; 
    overflow: hidden; 
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
}

.match-card:hover { border-color: #3b82f6; transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }

.btn-watch { 
    background: #3b82f6; color: white; font-weight: 900; font-size: 0.7rem; 
    text-transform: uppercase; border-radius: 10px; transition: 0.3s; 
    flex: 1; text-align: center; padding: 12px 5px; letter-spacing: 0.05em;
    display: flex; align-items: center; justify-content: center;
}
.btn-watch:hover { background: white; color: black; transform: scale(1.05); }

.chat-input-field { 
    width: 100%; background: #000; border: 1px solid #222; 
    padding: 10px; border-radius: 10px; color: #fff; outline: none; transition: 0.3s;
}
.chat-input-field:focus { border-color: #3b82f6; }

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-slideUp { animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 10px; }