body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        color: #111;
        background: #498cf7;   /* light blue */
    }



    /* GAME AREA */
    .game-container{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        margin-top:20px;
        padding-left:40px;
        padding-right:20px;
    }

    /* GAME WINDOW */
    .game-box{
        width:900px;
        height:500px;
        background:rgb(19, 18, 36);
        border-radius:10px 10px 0 0;
        overflow:hidden;
        position:relative;
    }

    /* GAME IFRAME */
    .game-frame{
        width:100%;
        height:100%;
        border:none;
    }

    *{
        box-sizing:border-box;
    }

    /* GAME INFO */
    .game-info{
        width:900px;
        margin:20px 0 0 0;
        padding:20px;
        background:#173930;
        color:white;
        border-radius:10px;
        box-sizing:border-box;
    }

    /* text styling */
    .game-info h2{
        margin-bottom:15px;
    }

    .game-info h3{
        margin-top:20px;
    }

    .game-info p{
        line-height:1.6;
        margin-top:8px;
    }


    


    @media (max-width: 768px){

        .game-container{
            width:100%;
            margin-top:10px;
            padding:10px;
            align-items:center;
        }

        .page-layout{
            flex-direction:column;
            align-items:center;
            gap:12px;
            padding:0;
            width:100%;
        }

        .main-game-content{
            width:100%;
            max-width:100%;
        }

        .game-box{
            width:100%;
            max-width:100%;
            height:220px;
            border-radius:10px 10px 0 0;
        }

        .game-frame{
            width:100%;
            height:100%;
        }

        .game-actions{
            width:100%;
            max-width:100%;
            margin:0;
            padding:10px;
            border-radius:0 0 10px 10px;
            display:flex;
            flex-direction:column;
            align-items:center;
            gap:10px;
        }

        .game-title-bar{
            width:100%;
            text-align:center;
            font-size:15px;
        }

        .actions-right{
            width:100%;
            display:flex;
            flex-wrap:wrap;
            justify-content:center;
            gap:8px;
        }

        .action-btn{
            min-width:42px;
            height:38px;
            font-size:14px;
            padding:0 10px;
        }

        .right-sidebar{
            width:100%;
            max-width:100%;
            position:static;
            top:auto;
            order:2;
            padding:12px;
            margin-top:0;
            padding:15px 6px;
        }

        #randomGames{
            grid-template-columns:repeat(2, 1fr);
            gap:6px;
        }

        .game-info{
            width:100%;
            max-width:100%;
            margin:15px 0 0 0;
            padding:12px;
            border-radius:12px;
        }

        .sidebar-game-card img{
            width:100%;
            height:auto;
            display:block;
        }
        

        
        .sidebar-overlay{
            opacity:1;
            transform:translateY(0);
            background:linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.2));
        }

        .sidebar-game-title{
            font-size:15px;
            line-height:1.2;
        }
        
        .fullscreen-action{
            display:none;
    
        }
        
    }
        


    .game-actions{
        width:900px;
        margin:0;
        display:flex;
        justify-content:space-between;
        align-items:center;
        background:black;
        padding:10px 14px;
        box-sizing:border-box;
        border-radius:0 0 10px 10px;
    }

    .game-title-bar{
        font-size:16px;
        font-weight:bold;
        color:#fff;
        line-height:1.2;
    }

    .actions-right{
        display:flex;
        gap:10px;
        align-items:center;
    }

    .action-btn{
        border:none;
        background:rgba(255,255,255,0.08);
        color:white;
        min-width:48px;
        height:42px;
        padding:0 14px;
        border-radius:14px;
        cursor:pointer;
        font-size:16px;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        transition:all 0.3s ease;
    }

    .action-btn:hover{
        background:#7c4dff;
        transform:translateY(-2px);
    }

    .like-btn.active{
        background:#7c4dff;
    }

    .dislike-btn.active{
        background:#ff6b6b;
    }

    .fav-btn.active{
        background:#ff4da6;
    }

    .report-btn.active{
        background:#ff9f43;
    }

    .fullscreen-action{
        background:rgba(0,212,255,0.18);
    }


    .page-layout{
        display:flex;
        align-items:flex-start;
        justify-content:center;
        gap:20px;
        padding:0px;
        box-sizing:border-box;
    }

    /* MAIN GAME AREA */
    .main-game-content{
        width:900px;
        min-width:0;
    }

    /* RIGHT SIDEBAR */
    .right-sidebar{
        width:330px;
        background:#0f172a;
        border-radius:12px;
        position:sticky;
        top:20px;
        padding:15px 6px;      /* padding b/w the wall ofside bar and game card */
        height:560px;          /* same as iframe */
        overflow-y:auto;       /* scrolling inside sidebar */
        overflow-x:hidden;
    }

    .right-sidebar h3{
        color:#fff;
        margin:0 0 15px 0;
        font-size:20px;
        text-align:center;
    }

    #randomGames{
        display:grid;
        grid-template-columns:repeat(2, minmax(150px, 1fr));
        gap:6px;
    }

    .right-sidebar::-webkit-scrollbar{
        width:6px;
    }

    .right-sidebar::-webkit-scrollbar-thumb{
        background:#334155;
        border-radius:10px;
    }
    .sidebar-game-card{
        position:relative;
        display:block;
        text-decoration:none;
        border-radius:10px;
        overflow:hidden;
        background:#1e293b;
    }

    .sidebar-game-card img{
        width:100%;
        aspect-ratio:4/3;
        object-fit:cover;
        display:block;
        transition:0.3s;
    }

    .sidebar-overlay{
        position:absolute;
        left:0;
        bottom:0;
        width:100%;
        padding:8px;
        background:linear-gradient(to top, rgba(0,0,0,0.9), transparent);
        opacity:0;
        transform:translateY(100%);
        transition:0.3s;
    }

    .sidebar-game-title{
        color:#fff;
        font-size:13px;
        text-align:center;
        line-height:1.3;
    }

    .sidebar-game-card:hover img{
        transform:scale(1.05);
    }

    .sidebar-game-card:hover .sidebar-overlay{
        opacity:1;
        transform:translateY(0);
    }

    @media (max-width: 900px){
        .page-layout{
            flex-direction:column;
            padding:0px;
        }

        .right-sidebar{
            width:100%;
            position:static;
            order:2;
        }

        #randomGames{
            grid-template-columns:repeat(2, 1fr);
        }

        .main-game-content{
            width:100%;
        }
    }

    @media (max-width: 768px){
        .right-sidebar{
            height:auto;
            max-height:none;
            overflow-y:visible;
            overflow-x:visible;
            position:static;
        }
    }

    .mobile-play-btn{
        display:none;
    }
    .exit-fullscreen-btn{
        display:none;
    }

  
@media (max-width:768px), (max-height:500px) and (orientation:landscape){
    

        .mobile-play-btn{
            display:flex;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%, -50%);
            width:80px;
            height:80px;
            border-radius:50%;
            border:none;
            background:rgba(0,212,255,0.95);
            color:white;
            font-size:36px;
            align-items:center;
            justify-content:center;
            z-index:10;
            cursor:pointer;
            box-shadow:0 0 30px rgba(0,212,255,0.9);
        }

    }



    

    /* AFTER — adds landscape fullscreen support */
@media (max-width:768px), (max-height:500px) and (orientation:landscape){
    .exit-fullscreen-btn{
        position:fixed;   /* 🔥 IMPORTANT CHANGE */

        top: max(12px, env(safe-area-inset-top));
        left: max(0px, env(safe-area-inset-left));

        height:42px;
        padding:0 10px;
        border:none;
        border-radius:0 20px 20px 0;
        background:#ffffff;

        display:none;
        align-items:center;
        gap:6px;

        z-index:999999;   /* 🔥 above everything */
        cursor:pointer;
        box-shadow:0 3px 10px rgba(0,0,0,0.25);
    }



        .exit-fullscreen-btn img{
            height:38px;
            border-radius:50%;
            object-fit:cover;
        }

        .back-arrow{
            font-size:34px;
            font-weight:bold;
            color:#0ea5e9;
            line-height:1;
            margin-top:-3px;
        }

        .exit-fullscreen-btn:active{
            transform:scale(0.96);
        }
       .game-icon{
            width:34px;
            height:34px;
            border-radius:50%;
            overflow:hidden;
        }

        .game-icon img{
            width:100%;
            height:100%;
            object-fit:cover;
            display:block;
        }
    }