/* Copyright © 2026 YourQuiz. All rights reserved. */


/* ================= MOBILE ADJUSTMENTS ================= */

@media (max-width:384px) {

    /* ===== GLOBAL FIX (prevents right cut-off) ===== */
    *{
        box-sizing:border-box;
    }

    body{
        overflow-x:hidden;
        height: 100vh;
    }


    /* =========================================================
    HEADER (ONLY left + right)
    ========================================================= */
    /* 🔥 FORCE SIMPLE FLEX LAYOUT *//* Make page full width */
    .top-header,
    .container,
    .footer{
        width:100% !important;
        max-width:100% !important;
    }

    .top-header {
        width: 100%;
        margin: 1px auto;
        border-radius: 5px;
        border: 1px solid #1398cd;
        background: #1398cd;
    }

    /* REMOVE GRID COMPLETELY */
    .header-grid {
        display: flex;                                  /* switch to flex */
        justify-content: space-between;
        align-items: center;

        min-height: auto;   
        padding: 2px 5px;                           /* Top/Bottom, Right/left */
        gap: 0;                                     /* no artificial gaps */
    }

    .left-side,
    .right-side {
        flex-shrink: 0;                             /* prevents squishing */
    }

    /* LEFT SIDE */
    .left-side {
        display: flex !important;                   /* override grid */
        grid-template-columns: none !important;     /* remove 1fr */
        width: auto !important;                     /* prevent stretching */
        flex: 0 0 auto;                             /* don't grow */
        align-items: center;
        gap: clamp(12px, 1vw, 15px);                  /* clean spacing */
    }

    /* RIGHT SIDE */
    .right-side {
        display: flex !important;
        justify-content: flex-end !important;       /* override space-evenly */
        width: auto !important;
        flex: 0 0 auto;                             /* don't grow */
        align-items: center;
        gap: clamp(12px, 1vw, 15px);                  /* consistent spacing */
    }


    .logo{
        margin-left:1px;                                /* exactly what you wanted */
    }

    /* logo */
    .logo h1{
        margin:0 !important;
        font-size:20px !important;
        line-height:1 !important;
    }

    .logo a {
        color: #fff;
        text-decoration: none;
    }

    /* Buttons: Increased size and readability */
    .Home-btn {
        border-radius: 700px;
        padding: 5px 5px;               /* top/bottom, left/right */
        font-size: 14px;    
        line-height: 1 !important;      /* Allow vertical breathing room */
        cursor: pointer;
        white-space: nowrap;            /* Prevents text from wrapping to two lines */
    }

    .quiz-btn{
        border-radius: 700px;
        padding: 5px 5px;               /* top/bottom, left/right */
        font-size: 14px;    
        line-height: 1 !important;      /* Allow vertical breathing room */
        cursor: pointer;
        white-space: nowrap;            /* Prevents text from wrapping to two lines */
        margin-right: 10px;
    }

    .dropdown-quiz-content {
        display: none;  /* Hidden by default */
        position: absolute;
        top: 100%;
        right: 0;
        left: auto;
        margin-right: 10px;
        background-color: #f9f9f9;
        min-width: 150px;
        box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
        z-index: 1;
        border-radius: 7px;
        border: 2px solid #1398cd;
    }

    /* =========================================================
    MAIN CONTAINER
    ========================================================= */

    /* 🔥 REMOVE 3-COLUMN LAYOUT */
    .container{
        display:block !important;
        width:100%;
        /*height:auto !important;*/
        /* min-height: calc(100vh - 90px - 52px);*/
        min-height: calc(100vh - 90px); 
        
        padding: 0;                     /* remove default container padding */
        margin: 0;                      /* remove default container margin */
    }


    /* keep main content */
    .main-content{
        width:100%;
        /* Calculate height: 100% viewport minus the heights of ads and padding, marging, gaps, footer*/
        /*min-height: calc(100vh - 52px - 250px - 90px);*/
        min-height: calc(100vh - 250px - 90px);
        display: flex;
        flex-direction: column;
        border-radius:5px;
        padding: 0;                     /* remove default main-content padding */
        margin: 0;                      /* remove default main-content margin */
    }

    .title-row {
        padding-top: 2px !important;
        padding-bottom: 3px !important;
        border-radius: 3px 3px 0 0;
    }

    .title-row h1 {
        margin:0 !important;
        font-size: 17px !important;
        line-height:1 !important;
    }

    .promo-row {
        padding-top: 0 !important;
        padding-bottom: 3px !important;
        align-items: center;
        justify-content: center;        /* true horizontal center */
        position: relative;
        display: flex;
        background: #1398cd;
        color: #ffffff;
    }

    .promo-title {
        font-weight: bold;
        font-size: 15px;
        font-family: Arial, sans-serif;
        text-align: center;
    }

    .page_container * {
        margin: 0;
        padding: 3px 3px;
        box-sizing: border-box;         /* ensures border/padding does not increase size */
    }


    /* =========================================================
    ADS (1 + 1 layout with borders + exact spacing)
    ========================================================= */

    .mobile-medium-ad-cover {
        display: flex !important;       /* override desktop display:none !important */
        flex-direction: column !important; /* FORCES TEXT ABOVE THE AD */
        align-items: center !important;    /* CENTERS BOTH ELEMENTS HORIZONTALLY */
        width: 100% !important;

        min-width: 300px !important;
        min-height: 250px !important;

        border:1px solid #1398cd;
        border-radius:5px;
        margin:1px auto; 
        background: #1398cd;
    }

    /* container for each ad */
    .ad-container.ad-mobile-only{
        display: flex !important;  
        width: 100% !important;

        max-width: 300px !important;
        height: 250px !important;
        min-height: 250px;

        margin: 0 auto;                 /* only horizontal centering, no vertical gap */
        margin-top: 1px;                /* explicit 1px gap above */
        margin-bottom: 1px;             /* explicit 1px gap below */

        align-items:center;
        justify-content:center;

        background:#e5e5e5;

        padding: 0; 
    }

    .game-ad-slot {
        position: relative !important;
        width: 336px;
        height: 280px;
    }


    /* =========================================================
    FOOTER (ONLY left + right)
    ========================================================= */

    /* 🔥 Show MOBILE footer */
    .mobile-footer{
        display:flex !important;
        justify-content:space-between;
        align-items:center;

        width:100%;
        margin:1px auto;

        padding:5px 10px;

        border:1px solid #1398cd;
        border-radius:4px;
        background:#1398cd;
    }

    /* footer */
    .mobile-left-footer {
        flex:1;
        min-width:0;
        font-size:14px !important;
        text-align:center;
        color: #ffffff;
    }

    .mobile-footer a {
        color: #fff;
        text-decoration: none;
    }

    .mobile-footer a:hover {
        text-decoration: underline;
    }

}