/* GLOBAL APP RESET */
html, body { margin: 0 !important; padding: 0 !important; background-color: #0f3460 !important; min-height: 100vh; font-family: 'Segoe UI', Tahoma, sans-serif; overflow-x: hidden; }
* { box-sizing: border-box; }

/* APP HEADER & SLIDER (Keep as is) */
.rahi-app-header { background: #16213e; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #e94560; position: sticky; top: 0; z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.rahi-sidenav { height: 100%; width: 300px; position: fixed; z-index: 1000; top: 0; right: -300px; background-color: #0f3460; overflow-x: hidden; transition: 0.3s; padding-top: 20px; border-left: 2px solid #e94560; box-shadow: -10px 0 30px rgba(0,0,0,0.5); }
.rahi-sidenav .closebtn { position: absolute; top: 10px; right: 25px; font-size: 36px; color: #fff; text-decoration: none; }

/* MAIN CONTAINER BODY */
.rahi-app-body { padding: 15px; max-width: 1600px; margin: 0 auto; color: #fff; }
.rahi-section-title { color: #a2a8d3; text-transform: uppercase; margin: 20px 0 15px; font-size: 16px; letter-spacing: 1px; font-weight: 900; }

/* ==========================================
   RESPONSIVE GRID SYSTEM (User's specific)
   ========================================== */
.rahi-game-grid {
    display: grid;
    gap: 15px; /* Spacing between cards */
    margin-bottom: 30px;
}

/* Mobile: 2 items per line */
@media (max-width: 599px) {
    .rahi-game-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Tablet: 3 items per line */
@media (min-width: 600px) and (max-width: 1023px) {
    .rahi-game-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Laptop/PC: 6 items per line */
@media (min-width: 1024px) {
    .rahi-game-grid { grid-template-columns: repeat(6, 1fr); gap: 20px; }
}

/* ==========================================
   ULTRA-MINIMALIST ITEM layout
   ========================================== */
.rahi-grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 16px; /* Rounded Corners for Premium look */
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid transparent; /* Subtle hover effect */
}

/* Image Link wrapper for aspect ratio control */
.game-image-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    cursor: pointer;
}

.cg-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Always perfectly square icons like mobile app */
    background: #1a1a2e; /* Fallback backgroud */
    border-radius: 16px;
    overflow: hidden;
}

.cg-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill the square without distortion */
    display: block;
    transition: transform 0.3s ease;
}

/* PREMIUM HOVER EFFECTS */
.rahi-grid-item:hover {
    transform: translateY(-8px) scale(1.03); /* Pops out slightly */
    box-shadow: 0 15px 30px rgba(233,69,96,0.6); /* Premium colored shadow */
    border-color: #e94560; /* Border activates */
}

.rahi-grid-item:hover img {
    transform: scale(1.05); /* Image also zooms slightly on hover */
}

/* GLOBAL UI BUTTONS & ELEMENTS */
.rahi-input { width: 100%; padding: 14px; margin-bottom: 15px; background: #16213e; border: 1px solid #0f3460; border-radius: 8px; color: #fff; font-size: 15px; box-sizing: border-box; }
.rahi-btn { width: 100%; padding: 15px; background: linear-gradient(90deg, #e94560, #e91e63); color: #fff; border: none; border-radius: 8px; font-weight: 900; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; display: block; text-align: center; text-decoration: none; }
.rahi-error { background: #ff5252; color: #fff; padding: 12px; text-align: center; border-radius: 8px; margin-bottom: 20px; font-weight: bold; }
.rahi-success { background: #4caf50; color: #fff; padding: 12px; text-align: center; border-radius: 8px; margin-bottom: 20px; font-weight: bold; }