/* =========================================
   COMMON VARIABLES & BASE STYLES
========================================= */
:root {
    --poki-bg: #43ebc9; 
    --card-radius: 24px;
    --poki-blue: #002b50;
    --accent-blue: #345cf6;
}

body {
    /* background-color: var(--poki-bg); */
    /* background: url('bg.png') no-repeat fixed;
    background-attachment: fixed;
    background-position: 50%; */

    background: var(--bodyBackground, #83ffe7 url('bg.png'));
    background-attachment: fixed;
    /* background-position: 50%; */
    background-size: max(624px, 100%);

    font-family: 'Fredoka', sans-serif; 
    padding: 15px 15px 0 15px; 
    margin: 0;
    overflow-x: hidden;
}

/* =========================================
   COMMON HEADER / LOGO BOX (STICKY)
========================================= */
.poki-header-card {
    background: white; border-radius: var(--card-radius);
    grid-column: span 1; grid-row: span 1; 
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 10px 0px rgba(0,0,0,0.05), 0 20px 25px rgba(0,0,0,0.1);
    position: sticky; top: 15px; z-index: 1000;
    border: 2px solid rgba(255,255,255,0.8);
}
.logo-area {
    flex: 1; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.4rem; color: var(--poki-blue);
    background: linear-gradient(180deg, #fff 0%, #f9f9f9 100%);
    text-decoration: none;
}
.action-area { display: flex; height: 45px; background: #f1f4f6; }
.action-btn {
    flex: 1; border: none; background: transparent; color: var(--accent-blue);
    font-size: 1.2rem; cursor: pointer; transition: all 0.2s ease;
    display: flex; align-items: center; justify-content: center;
}
.action-btn:hover { background: #e2e8f0; transform: scale(1.1); }
.action-btn:first-child { border-right: 1px solid #ddd; }

/* =========================================
   GRID SYSTEMS (Index, Categories, Games)
========================================= */
.poki-grid, .all-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-auto-rows: 120px; 
    grid-auto-flow: dense;
    gap: 15px;
    max-width: 1400px;
    margin: 0 auto;
}

.game-item {
    background: #fff; border-radius: var(--card-radius); overflow: hidden;
    position: relative; box-shadow: 0 6px 0px rgba(0,0,0,0.1);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer;
}
.game-item:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 15px 30px rgba(0,0,0,0.2); z-index: 5;}
.game-item img { width: 100%; height: 100%; object-fit: cover; image-rendering: -webkit-optimize-contrast; 
    transform: translateZ(0);}
.game-label {
    position: absolute; bottom: 0; width: 100%;
    background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
    color: white; font-size: 0.8rem; font-weight: 500; text-align: center;
    padding: 25px 8px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transform: translateY(10px); transition: all 0.3s ease;
}
.game-item:hover .game-label { opacity: 1; transform: translateY(0); }

.size-md { grid-column: span 2; grid-row: span 2; }
.size-lg { grid-column: span 3; grid-row: span 3; }
.size-1x1 { grid-column: span 1; grid-row: span 1; }
.size-2x2 { grid-column: span 2; grid-row: span 2; }

/* Category Specifics */
.title-card {
    grid-column: span 3; grid-row: span 1;
    background: white; border-radius: var(--card-radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 800; color: var(--poki-blue); box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.cat-card {
    grid-column: span 2; grid-row: span 1; 
    background: white; border-radius: var(--card-radius); padding: 10px 15px;
    display: flex; align-items: center; gap: 15px; text-decoration: none;
    color: var(--poki-blue); box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: 0.2s;
}
.cat-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 10px 20px rgba(0,0,0,0.1); color: var(--accent-blue); z-index: 5; }
.cat-card img { width: 65px; height: 65px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1)); }
.cat-card span { font-size: 0.85rem; font-weight: 800; text-transform: uppercase; line-height: 1.3; }

/* Main Page Bottom Category Section */
.categories-section { max-width: 1400px; margin: 40px auto; }
.cat-grid-main { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.cat-card-main {
    background: #fff; border-radius: 20px; padding: 15px 20px; 
    display: flex; align-items: center; gap: 15px; text-decoration: none;
    color: var(--poki-blue); box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: 0.2s;
}
.cat-card-main:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); color: var(--accent-blue); }
.cat-card-main img { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.05)); }
.cat-card-main span { font-size: 0.95rem; font-weight: 800; text-transform: uppercase; line-height: 1.2; }

/* =========================================
   GAME PLAY PAGE SPECIFICS
========================================= */
.player-card {
    grid-column: span 7; grid-row: span 5;    
    background: white; border-radius: var(--card-radius);
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.player-frame { flex: 1; background: #000; position: relative; width: 100%; height: 100%; }
.player-frame iframe { width: 100%; height: 100%; border: none; display: block; }
.rotate-banner { display: none; position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,0.8); color: white; text-align: center; padding: 8px; font-size: 0.75rem; font-weight: 600; z-index: 10; }
.player-toolbar { height: 75px; background: white; padding: 0 25px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f1f1f1; }
.player-title-box { display: flex; align-items: center; gap: 15px; }
.player-title-box img { width: 45px; height: 45px; border-radius: 10px; }
.player-title-box h1 { font-size: 1.2rem; font-weight: 800; margin: 0; color: var(--poki-blue); line-height: 1.1; }
.player-title-box span { font-size: 0.8rem; color: #888; font-weight: 600; display: block; }
.player-actions { display: flex; gap: 20px; align-items: center; }
.player-actions button {
    border: none; background: none; color: var(--accent-blue);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 800; cursor: pointer; transition: 0.2s;
}
.player-actions button i { font-size: 1.4rem; margin-bottom: -2px; }
.player-actions button:hover { transform: scale(1.1); color: var(--poki-blue); }
.ad-box-2x2 { grid-column: span 2; grid-row: span 2; background: white; border-radius: var(--card-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.ad-box-horizontal { grid-column: span 7; grid-row: span 1; background: white; border-radius: var(--card-radius); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); overflow: hidden; }
.ad-label { font-size: 0.55rem; color: #999; text-align: center; text-transform: uppercase; letter-spacing: 1px; padding: 3px; background: #f9f9f9;}
.mobile-game-title { display: none; }

/* =========================================
   🔥 NEW: PREMIUM GAME DETAILS SECTION 🔥
========================================= */
.game-details-card {
    background: #ffffff; border-radius: var(--card-radius);
    padding: 50px; box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    border: 2px solid #f0f4f8; margin-top: 40px; position: relative;
}
.game-details-card h2 {
    font-size: 2.8rem; font-weight: 900; color: var(--poki-blue);
    margin-bottom: 5px; letter-spacing: -0.5px; line-height: 1.1;
}
.dev-info {
    display: flex; align-items: center; gap: 8px; margin-bottom: 20px;
    font-weight: 700; color: #666; font-size: 0.95rem;
}
.dev-info img { width: 22px; height: 22px; border-radius: 50%; }

.rating-badge {
    background: #ffeb3b; /* Premium Yellow */
    color: #333; padding: 10px 22px; border-radius: 12px;
    font-weight: 900; font-size: 0.9rem;
    display: inline-flex; align-items: center; gap: 10px;
    box-shadow: 0 5px 15px rgba(255, 235, 59, 0.4);
    margin-bottom: 30px;
}
.rating-badge i { font-size: 1.2rem; color: #ff9800; }

.game-desc-box {
    background: #f8fafc; padding: 25px; border-radius: 18px;
    margin-bottom: 35px; font-weight: 500; color: #4a5568;
    line-height: 1.7; border-left: 5px solid var(--accent-blue);
    font-size: 1.05rem;
}

.qa-section { margin-bottom: 25px; }
.qa-section h3 {
    font-size: 1.25rem; font-weight: 800; color: var(--poki-blue);
    display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.qa-section h3 i { color: var(--accent-blue); font-size: 1.4rem; background: #edf2f7; padding: 5px; border-radius: 8px; }
.qa-section p { color: #4a5568; font-weight: 500; margin-left: 42px; line-height: 1.6; font-size: 1rem;}
.qa-section p b { color: var(--poki-blue); font-weight: 800; }

.tag-pills { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }
.tag-btn {
    background: #edf2f7; color: var(--poki-blue); border: none;
    padding: 12px 22px; border-radius: 14px; font-weight: 800;
    font-size: 0.8rem; text-transform: uppercase; text-decoration: none;
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tag-btn:hover {
    background: var(--accent-blue); color: white;
    transform: translateY(-4px); box-shadow: 0 8px 15px rgba(52, 92, 246, 0.3);
}

/* =========================================
   COMMON ABOUT & FOOTER
========================================= */
.about-section, .all-categories-description-section { max-width: 1400px; margin: 40px auto; padding-bottom: 20px;}
.about-card { background: white; border-radius: var(--card-radius); padding: 50px 60px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.about-overline { font-size: 0.85rem; font-weight: 800; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }
.about-card h2 { font-weight: 800; color: var(--poki-blue); margin-top: 5px; margin-bottom: 20px; font-size: 2.2rem; }
.about-card h3 { font-weight: 800; color: var(--poki-blue); margin-top: 30px; margin-bottom: 12px; font-size: 1.3rem; }
.about-card p { font-size: 1.05rem; color: #444; line-height: 1.6; margin-bottom: 15px; font-weight: 500; }
.about-card b { color: var(--poki-blue); font-weight: 700; }
.about-card ul { list-style-type: none; padding-left: 0; }
.about-card li { margin-bottom: 10px; position: relative; padding-left: 15px; }
.about-card li::before { content: "•"; color: var(--accent-blue); font-weight: bold; position: absolute; left: 0; font-size: 1.2rem; line-height: 1; }
.about-card a { color: var(--accent-blue); text-decoration: none; font-weight: 700; }
.about-card a:hover { text-decoration: underline; }

.cat-grid-icon { display: flex; justify-content: flex-end; align-items: center; height: 100%; }
.cat-grid-icon-holder { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; width: 160px; height: 160px; }
.cat-grid-box { background: var(--accent-blue); border-radius: 12px; box-shadow: inset 0 0 0 15px white; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }

.footer-section { background: #ffffff; margin: 0 -15px; padding: 60px 0; box-shadow: 0 -10px 25px rgba(0,0,0,0.05); }
.footer-inner { max-width: 1400px; margin: 0 auto; padding: 0 15px; }
.footer-logo-row { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.footer-logo { font-size: 1.8rem; font-weight: 900; color: var(--poki-blue); }
.footer-tagline { font-size: 1.1rem; font-weight: 700; color: var(--poki-blue); }
.lang-btn { background: white; border: 2px solid #e2e8f0; border-radius: 50px; padding: 8px 18px; font-weight: 700; color: var(--accent-blue); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: 0.2s; margin-bottom: 25px; }
.social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--poki-blue); color: white; margin-right: 12px; font-size: 1.2rem; transition: 0.2s; text-decoration: none; }
.footer-col-title { font-size: 0.75rem; font-weight: 800; color: #a0aec0; text-transform: uppercase; margin-bottom: 25px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 15px; }
.footer-links a { color: var(--poki-blue); text-decoration: none; font-weight: 700; font-size: 0.95rem; }

/* =========================================
   COMMON SIDEBAR (SEARCH)
========================================= */
.offcanvas { /*background: rgba(67, 235, 201, 0.95) !important;*/ background: rgb(233 141 255) !important; backdrop-filter: blur(10px); width: 100% !important; max-width: 480px !important; border: none !important; border-radius: 0 30px 30px 0; }
.search-container-pro { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; }
.btn-back-pro { background: white; border-radius: 15px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: none; box-shadow: 0 5px 15px rgba(0,0,0,0.1); font-size: 1.4rem; }
.search-input-pro { background: white; border-radius: 20px; padding: 12px 20px; display: flex; align-items: center; flex: 1; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.search-input-pro input { border: none; outline: none; width: 100%; font-size: 1rem; margin-left: 10px; font-weight: 700; }

/* Search Input X Button Styles */
.search-input-pro { position: relative; } /* Ensure absolute items align properly */
.clear-search-btn {
    border: none; background: transparent; color: #a0aec0;
    font-size: 1.2rem; cursor: pointer; display: none; /* Initially hidden */
    padding: 0 5px; transition: 0.2s;
}
.clear-search-btn:hover { color: var(--accent-blue); transform: scale(1.1); }

/* 🔥 SWIPE FIXES 🔥 */
.cat-scroll-pro { 
    display: flex; overflow-x: auto; gap: 12px; padding: 10px 5px; 
    scrollbar-width: none; cursor: grab; 
    -webkit-overflow-scrolling: touch; /* Mobile par swipe ekdum smooth karega */
}
.cat-scroll-pro:active { cursor: grabbing; }
.cat-scroll-pro::-webkit-scrollbar { display: none; }

/* 🔥 PRESS ANIMATION RESTORED 🔥 */
.cat-tag { 
    background: white; border-radius: 15px; padding: 10px 22px; 
    font-size: 0.85rem; font-weight: 700; color: var(--poki-blue); 
    text-decoration: none; box-shadow: 0 4px 0px #ddd; 
    flex: 0 0 auto; transition: 0.2s; user-select: none; 
    -webkit-user-drag: none; /* Desktop pe link image ki tarah drag hone se rokega */
}
.cat-tag:active { 
    transform: translateY(3px); box-shadow: none; /* Press karne par niche dabne ka effect */
}

/* =========================================
   RESPONSIVE QUERIES
========================================= */
@media (max-width: 900px) {
    .player-card { grid-column: span 7; grid-row: span 4; }
    .ad-box-2x2, .ad-box-horizontal { display: none; }
}

@media (max-width: 768px) {
    .game-details-card { padding: 30px; }
    .game-details-card h2 { font-size: 2.2rem; }
    .qa-section h3 { font-size: 1.1rem; }
}

@media (max-width: 600px) {
    .poki-grid, .all-cat-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 90px; gap: 10px; }
    .logo-area { font-size: 1.1rem; } .action-area { height: 35px; } .action-btn { font-size: 1rem; }
    .game-label { font-size: 0.7rem; padding: 20px 5px 5px; }

    .game-page-grid .poki-header-card { order: 1; grid-column: span 1; }
    .game-page-grid .mobile-game-title { 
        display: flex; order: 2; grid-column: span 2; grid-row: span 1;
        background: white; border-radius: var(--card-radius); 
        flex-direction: column; justify-content: center; padding: 0 15px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    .mobile-game-title h2 { font-size: 1rem; font-weight: 800; margin: 0; color: var(--poki-blue); }
    .mobile-game-title span { font-size: 0.7rem; color: #888; font-weight: 600; }

    .game-page-grid .player-card { order: 3; grid-column: span 3; grid-row: span 3; border-radius: 15px;}
    .player-toolbar .player-title-box { display: none; } 
    .player-toolbar { padding: 10px; justify-content: space-around; height: auto;}
    .player-actions { width: 100%; justify-content: space-around; }
    .game-page-grid .game-item, .game-page-grid .cat-card { order: 4; }
    .rotate-banner { display: block; } 
    
    .cat-grid-main { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .title-card { grid-column: span 3; font-size: 1.2rem; }
    .cat-card { grid-column: span 2; padding: 8px; gap: 8px;}
    .game-details-card { padding: 25px 20px; }
}

/* =========================================
   🔥 LEGAL & TEXT PAGES (About, Privacy, Contact) 🔥
========================================= */
.legal-container {
    max-width: 1000px; /* Text padhne me asani ho isliye width thodi kam rakhi hai */
    margin: 40px auto;
    padding: 0 15px;
}
.legal-card {
    background: white; border-radius: var(--card-radius);
    padding: 50px 60px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 2px solid #f0f4f8;
}
.legal-card h1 {
    color: var(--poki-blue); font-weight: 900; font-size: 2.8rem;
    margin-bottom: 10px; letter-spacing: -0.5px;
}
.legal-card .last-updated {
    font-size: 0.9rem; color: #888; font-weight: 600; margin-bottom: 30px; display: block;
}
.legal-card h2 {
    color: var(--poki-blue); font-weight: 800; font-size: 1.6rem;
    margin-top: 35px; margin-bottom: 15px;
}
.legal-card p, .legal-card li {
    color: #4a5568; font-size: 1.05rem; line-height: 1.8; font-weight: 500; margin-bottom: 15px;
}
.legal-card ul { padding-left: 20px; }
.legal-card a { color: var(--accent-blue); text-decoration: none; font-weight: 700; }
.legal-card a:hover { text-decoration: underline; }

/* Contact Form Specifics */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 30px;}
.contact-info-box { background: #f8fafc; padding: 30px; border-radius: 18px; border-left: 5px solid var(--accent-blue); }
.contact-info-box h3 { font-size: 1.3rem; font-weight: 800; color: var(--poki-blue); margin-bottom: 15px;}
.contact-form input, .contact-form textarea {
    width: 100%; border: 2px solid #edf2f7; border-radius: 14px;
    padding: 15px 20px; font-family: 'Fredoka', sans-serif; font-size: 1rem;
    margin-bottom: 20px; outline: none; transition: 0.2s; background: #f8fafc; font-weight: 600; color: var(--poki-blue);
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent-blue); background: white; }
.contact-form button {
    background: var(--accent-blue); color: white; border: none;
    padding: 15px 30px; border-radius: 14px; font-weight: 800; font-size: 1.1rem;
    cursor: pointer; transition: 0.2s; width: 100%;
}
.contact-form button:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(52, 92, 246, 0.3); }

@media (max-width: 768px) {
    .legal-card { padding: 30px 20px; }
    .legal-card h1 { font-size: 2.2rem; }
    .contact-grid { grid-template-columns: 1fr; gap: 20px; }
}



/* =========================================
   🔥 RESPONSIVE MOBILE GRID FIX 🔥
   (Is block se mobile me height aur width perfectly match hogi)
========================================= */

/* Add this utility class anywhere in your CSS for games like 'HOCKEY' in your screenshot */
.size-3x2 { grid-column: span 3; grid-row: span 2; }

@media (max-width: 600px) {
    /* 1. Main Grid - Make rows perfectly square to match columns */
    .poki-grid, .all-cat-grid, .game-page-grid { 
        grid-template-columns: repeat(3, 1fr) !important; /* Fix to 3 columns */
        
        /* MAGIC FIX: 100vw - 30px (body padding) - 20px (2 gaps) = 50px */
        grid-auto-rows: calc((100vw - 50px) / 3) !important; 
        gap: 10px !important; 
    }

    /* Sizes logic for mobile */
    .size-md { grid-column: span 2; grid-row: span 2; }
    .size-lg { grid-column: span 3; grid-row: span 3; }
    
    .logo-area { font-size: 1.1rem; } 
    .action-area { height: 35px; } 
    .action-btn { font-size: 1rem; }
    
    /* Make labels smaller to fit in the new perfect squares */
    .game-label { font-size: 0.6rem; padding: 15px 5px 5px; }

    /* Game Page Specific Mobile Layout */
    .game-page-grid .poki-header-card { order: 1; grid-column: span 1; }
    .game-page-grid .mobile-game-title { 
        display: flex; order: 2; grid-column: span 2; grid-row: span 1;
        background: white; border-radius: var(--card-radius); 
        flex-direction: column; justify-content: center; padding: 0 15px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    .mobile-game-title h2 { font-size: 1rem; font-weight: 800; margin: 0; color: var(--poki-blue); }
    .mobile-game-title span { font-size: 0.7rem; color: #888; font-weight: 600; }

    .game-page-grid .player-card { order: 3; grid-column: span 3; grid-row: span 3; border-radius: 15px;}
    .player-toolbar .player-title-box { display: none; } 
    .player-toolbar { padding: 10px; justify-content: space-around; height: auto;}
    .player-actions { width: 100%; justify-content: space-around; }
    .game-page-grid .game-item, .game-page-grid .cat-card { order: 4; }
    .rotate-banner { display: block; } 
    
    /* Category Pills Fix */
    .cat-grid-main { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .title-card { grid-column: span 3; font-size: 1.2rem; }
    
    /* Mobile me category pills lambi dikhe uske liye */
    .cat-card { grid-column: span 3; padding: 8px; gap: 8px; height: auto;} 
    .game-details-card { padding: 25px 20px; }
}

@media (max-width: 400px) {
    /* 400px se choti screen pe bhi grid 3 columns hi rakhein (Poki style) */
    .poki-grid, .all-cat-grid, .game-page-grid { 
        grid-template-columns: repeat(3, 1fr) !important; 
    }
    .title-card { grid-column: span 3; text-align: center; font-size: 1.1rem; }
    .cat-card { grid-column: span 3; } 
    .player-card { grid-column: span 3; }
}