body {
font-family: Arial, sans-serif;
background: #000000;
min-height: 100vh;
margin: 0;
padding: 0;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: flex-start;
}

.main-bg-container {
position: relative;
width: 100%;
max-width: 550px;
min-height: 100vh;
background: #080808;
margin: 0 auto;
overflow-y: auto;
}
.main-bg-container::-webkit-scrollbar {
display: block;
width: 0px;
height: 10px;
background: #888;
border-radius: 5px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.main-bg-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
.main-bg-container::-webkit-scrollbar-track {
background: #222;
}
.bg-top {
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 300px;
background: url('../images/bg-image.png') no-repeat top center;
background-size: cover;
transform: rotate(180deg);
z-index: 0;
pointer-events: none;
opacity: 0.4;

}
.bg-bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 300px;
background: url('../images/bg-image.png') no-repeat bottom center;
background-size: cover;
z-index: 0;
pointer-events: none;
opacity: 0.3;
}
.header-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
height: 70px;
gap: 12px;
/* Start Generation Here */
background: rgba(34, 34, 34, 0.5);
/*backdrop-filter: blur(5px);*/
/* End Generation Here */

}
.header-icon {  
width: 48px;
height: 48px;
border-radius: 8px;
background: #222;
flex-shrink: 0;
margin-left: 16px;
}
.header-text {
display: flex;
flex-direction: column;
justify-content: center;
font-weight: bold;
}
.header-title { 
color: #fff;
font-size: 1.2em;
margin: 0;
}
.header-description {
color: #bbb;    
font-size: 0.9em;
margin: 0;
}
.header-info-btn {
position: absolute;
right: 10px;
width: 32px;
height: 32px;
background: none;
border: none;
cursor: pointer;
padding: 2px;
z-index: 2;
}
.header-info-btn:hover {
    opacity: 0.8;
}
/* Ensure content is above background images */
.main-bg-container > *:not(.bg-top):not(.bg-bottom) {
position: relative;
z-index: 1;
}
.games-blocks-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin: 15px 16px 6px 16px;
}
.game-block {
background: #222;
border-radius: 6px;
display: flex;
align-items: center;
padding: 10px 6px;
gap: 12px;
cursor: pointer;
position: relative;
}
.game-block:hover {
background: #333;
}
.game-block-menu-btn {
position: absolute;
top: 10px;
right: 1px;
background: none;
border: none;
cursor: pointer;
padding: 2px;
z-index: 2;
}
.game-block-menu-btn svg {
width: 20px;
height: 20px;
fill: #ccc;
transform: rotate(90deg);
}
.game-block-menu-btn:hover {
    scale: 1.1;
}
.game-block-menu-popup {
display: none;
position: absolute;
top: 32px;
right: 10px;
background: #222;
border: 1px solid #444;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
z-index: 10;
min-width: 120px;
padding: 8px 0;
}
.game-block-menu-popup button {
background: none;
border: none;
color: #fff;
width: 100%;
text-align: left;
padding: 8px 16px;
cursor: pointer;
font-size: 1em;
}
.game-block-menu-popup button:hover {
background: #333;
}
.category-game-menu-popup {
display: none;
position: absolute;
top: 32px;
right: 10px;
background: #222;
border: 1px solid #444;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
z-index: 10;
min-width: 120px;
padding: 8px 0;
}
.category-game-menu-popup button {
background: none;
border: none;
color: #fff;
width: 100%;
text-align: left;
padding: 8px 16px;
cursor: pointer;
font-size: 1em;
}
.category-game-menu-popup button:hover {
background: #333;
}
.game-block img {
width: 48px;
height: 48px;
border-radius: 8px;
background: none;
}
.game-block .game-block-info {
flex: 1;
}
.game-block .game-block-title {
font-weight: bold;
color: #fff;
font-size: 1.1em;
}
.game-block .game-block-streak {
color: #bbb;
font-size: 0.95em;
}
.game-block .game-block-played {
color: #888;
font-size: 0.7em;
}
.categories-sliders {
padding: 18px;
}
.category-section {
margin-bottom: 16px;

}
.category-title {
color: #fff;
font-size: 1.2em;
margin: 0 0 12px 0px;
}
.category-slider {
display: flex;
overflow-x: auto;
gap: 12px;
scrollbar-width: thin;
scrollbar-color: #888 #222;
padding-bottom: 12px;
}
.category-slider::-webkit-scrollbar {
height: 8px;
}
.category-slider::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.category-slider::-webkit-scrollbar-track {
background: #222;
}

.category-game-card {
background: #222;
border-radius: 12px;
min-width: 120px;
max-width: 140px;
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 8px;
cursor: pointer;
position: relative;
}
.category-game-card:hover {
background: #333;
}
.category-game-card img {
width: 56px;
height: 56px;
border-radius: 8px;
margin-bottom: 8px;
}
.category-game-title {
color: #fff;
font-weight: bold;
font-size: 1em;
text-align: center;
}
.category-game-played {
color: #bbb;
font-size: 0.7em;
text-align: center;
margin-top: 10px;
}

/* Notification popup styles */
.notification-popup {
position: fixed;
bottom: 20px;
right: 20px;
background: #222;
border: 1px solid #444;
border-radius: 8px;
padding: 12px 16px;
color: #fff;
font-size: 0.9em;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 1000;
transform: translateX(100%);
opacity: 0;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
max-width: 300px;
}

.notification-popup.show {
transform: translateX(0);
opacity: 1;
}

.notification-popup.success {
border-left: 4px solid #4CAF50;
}

.notification-popup.removed {
border-left: 4px solid #f44336;
}

.notification-popup.info {
border-left: 4px solid #2196F3;
}

.notification-popup .notification-icon {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
vertical-align: middle;
}

.notification-popup .notification-text {
display: inline-block;
vertical-align: middle;
}
.empty-favorites-title {
color: red;
font-size: 1em;
margin: 0 0 12px 0px;
display: none;
}