/*
TAVSIYA: Yaxshiroq ko'rinish uchun HTML faylingizning qismiga
ushbu shriftni qo'shing:
*/
/* Basic reset and global styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
font-family: 'Montserrat', 'Helvetica', 'Arial', sans-serif;
}
body {
/* YANGI: Zamonaviy qorong'u fon */
background: linear-gradient(180deg, #2c2c2c 0%, #1a1a1a 100%);
display: flex;
justify-content: center;
align-items: center;
}
/* Main application container to constrain the layout */
.app-wrapper {
width: 100%;
max-width: 480px;
height: 100%;
position: relative;
/* YANGI: Fonni tanadan meros qilib oladi */
background: transparent;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 10px 60px rgba(0,0,0,0.4);
}
/* --- YANGI SHISHASIMON USLUB (Glassmorphism) --- */
.header, .activity-indicator, .control-btn, .promo-banner-content {
/* O'zgartirildi: Shaffof fon */
background: rgba(35, 35, 35, 0.5);
/* O'zgartirildi: Orqa fonni xiralashtirish effekti */
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
/* O'zgartirildi: Shisha chetlarini belgilovchi nozik chegara */
border: 1px solid rgba(255, 255, 255, 0.1);
/* O'zgartirildi: Elementlarga chuqurlik beruvchi yumshoq soya */
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
/* Floating header styles */
.header {
position: absolute;
top: 20px;
left: 15px;
right: 15px;
z-index: 100;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 15px;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
}
.logo-img {
width: auto;
height: 35px; /* O'lcham moslashtirildi */
object-fit: contain;
border: none;
border-radius: 0;
}
.logo-text {
font-size: 22px;
font-weight: bold;
color: #f0f0f0; /* O'zgartirildi: Yorqin matn */
text-shadow: none; /* Soya olib tashlandi */
}
.download-btn {
/* O'zgartirildi: Asosiy qizil rang */
background-color: #8b0a09;
color: #ffffff;
padding: 8px 16px;
border-radius: 20px;
border: none;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
}
.download-btn:hover {
background-color: #a10c0b;
transform: scale(1.05);
box-shadow: 0 0 15px rgba(139, 10, 9, 0.7); /* Yorug'lik effekti */
}
/* Card container now fills the parent */
.card-container {
flex-grow: 1;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 15px;
background: transparent;
}
.card {
width: 100%;
height: 100%;
position: absolute;
background-color: #ccc;
background-size: cover;
background-position: center;
border-radius: 15px;
cursor: grab;
transition: transform 0.3s ease, opacity 0.3s ease;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); /* Soya kuchaytirildi */
will-change: transform, opacity;
border: 1px solid rgba(255,255,255,0.1);
}
.card:active { cursor: grabbing; }
.card.dragging { transition: none; }
/* Gradient overlay for text readability */
.card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent);
border-radius: 0 0 15px 15px;
}
/* Positioned card info block */
.card-info {
padding: 20px;
color: #f0f0f0;
position: absolute;
bottom: 120px;
left: 0;
right: 0;
z-index: 10;
}
.card-name {
font-size: 28px;
font-weight: bold;
margin-bottom: 8px;
text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}
.card-distance {
font-size: 16px;
opacity: 0.9;
display: flex;
align-items: center;
gap: 8px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}
/* Positioned activity indicator */
.activity-indicator {
position: absolute;
top: 90px;
left: 15px;
z-index: 15;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
/* O'zgartirildi: Qizil shishasimon fon va yorqin matn */
background: rgba(139, 10, 9, 0.25);
color: #ff5555;
}
/* Control buttons at the bottom */
.controls {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 25px;
z-index: 50;
transition: opacity 0.3s ease;
}
.control-btn {
width: 70px;
height: 70px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
transition: all 0.2s ease-in-out;
}
.control-btn:hover {
transform: translateY(-5px) scale(1.1);
}
.dislike-btn {
/* Shishasimon uslub qo'llanildi */
background: rgba(255, 255, 255, 0.15);
color: #f0f0f0;
}
.like-btn {
/* Asosiy qizil rang */
background-color: #8b0a09;
color: #ffffff;
border: none;
box-shadow: 0 0 20px rgba(139, 10, 9, 0.8); /* Yorug'lik effekti */
}
/* --- Promo Banner Styles --- */
.promo-banner-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Fon qoraytirildi */
z-index: 200;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.promo-banner-overlay.visible {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
.promo-banner-content {
/* Shishasimon uslub qo'llanildi */
padding: 30px;
border-radius: 15px;
text-align: center;
max-width: 320px;
width: 90%;
position: relative;
transform: scale(0.9);
transition: transform 0.3s ease;
}
.promo-banner-overlay.visible .promo-banner-content {
transform: scale(1);
}
.promo-banner-close {
position: absolute;
top: 10px;
right: 15px;
background: none;
border: none;
font-size: 28px;
color: #aaa;
cursor: pointer;
}
.promo-banner-content h2, .promo-banner-content p {
color: #f0f0f0; /* Matn rangi yorqinlashtirildi */
}
.promo-banner-content h2 { margin-bottom: 15px; font-size: 22px; }
.promo-banner-content p { margin-bottom: 25px; font-size: 16px; line-height: 1.5; color: #cccccc;}
.promo-banner-download {
background: #8b0a09;
color: white;
padding: 12px 25px;
border: none;
border-radius: 25px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(139, 10, 9, 0.7);
font-size: 16px;
width: 100%;
margin-bottom: 15px;
}
.promo-banner-download:hover {
background: #a10c0b;
transform: translateY(-2px);
box-shadow: 0 0 25px rgba(139, 10, 9, 1);
}
.promo-banner-content small { color: #999; font-size: 12px; }
/* Event Banner Specific Styles */
.event-banner-img {
width: 90px;
height: 90px;
border-radius: 50%;
object-fit: cover;
margin: -10px auto 15px;
border: 4px solid #8b0a09; /* Chegara rangi o'zgartirildi */
box-shadow: 0 0 15px rgba(0,0,0,0.2);
display: none;
}
/* Final message styles */
.end-of-deck-message {
text-align: center;
padding: 40px 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.end-of-deck-message h2, .end-of-deck-message p {
color: #f0f0f0; /* Matn rangi yorqinlashtirildi */
}
.end-of-deck-message h2 { font-size: 24px; margin-bottom: 15px; }
.end-of-deck-message p { font-size: 16px; line-height: 1.6; margin-bottom: 30px; max-width: 300px; color: #cccccc;}