/* ----- LIGHT THEME (no dark) ----- */
:root {
  --gold: #e8a317;
  --gold-dark: #c47d0a;
  --neon-blue: #2a6df4;
  --neon-cyan: #0ea5e9;
  --light-bg: #f6f9fc;
  --card-bg: #ffffff;
  --card-shadow: 0 12px 32px rgba(0, 20, 40, 0.08);
  --text-dark: #0b1a2e;
  --text-muted: #4a5b70;
  --accent-red: #dc3545;
  --accent-green: #1ea84c;
  --border-light: #e6edf4;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI,sans-serif;
}

body{
    background:#f8f9fa;
}

/* HEADER */

.gh-header{
    background:#fff;
    border-bottom:1px solid #e5e7eb;
    position:sticky;
    top:0;
    z-index:9999;
}

.gh-container{
    padding:15px 0px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.gh-logo{
       text-decoration: none;
    font-size: 25px;
    font-weight: 600;
    color: #111827;
    border: 2px solid #ccc;
    padding-left: 5px;
    border-radius: 5px;
    overflow: hidden;
    span{
                   background: var(--gold);
        padding: 0px 15px;
        margin-left: 3px;
        display: inline-block;
    }
}

/* MENU */

.gh-nav ul{
   display: flex;
    list-style: none;
    gap: 15px;
    margin-bottom: 0px;
    padding-left: 0px;
    align-items: center;

}
.game-icon{
    width: 25px;
    img{
        width: 100% ;
    }
}
.dropdown{
    position:relative;
}

.dropdown-btn{
   text-decoration: none;
    color: rgb(17, 24, 39);
    font-weight: 600;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
    font-size: 16px;
    padding: 10px 15px;
}

/* Desktop Hover */

@media(min-width:992px){

    .dropdown-btn:hover{
        background:#f1f5f9;
    }

    .dropdown:hover .dropdown-content{
        opacity:1;
        visibility:visible;
        transform:translateX(-50%) translateY(0);
    }

}

/* DROPDOWN */

.dropdown-content{
     position: absolute;
    top: 55px;
    left: 0px;
    transform: translateX(-50%) translateY(20px);
    width: 215px;
    background: rgb(255, 255, 255);
    border-radius: 5px;
    padding: 10px 12px  ;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 40px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    border: 1px solid #ccc;
}

.game-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:0px;
}

.game-icon{

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

    font-size:22px;
}

.game-title{
        font-family: 'Google Sans';
    font-size:16px;
    font-weight:600;
}
.menubutton {
      width: 100%;
    padding: 10px 0px;
    text-decoration: none;
    display: block;
    background: transparent;
    color: #000;
    font-size: 16px;
    border-bottom: 1px solid #ccc;

}
.game-btn.menubutton.detail-btn{
      padding: 8px;
    font-size: 15px;
    background: var(--gold);
    border: none;
    box-shadow: none;
    color: #000;
    outline: none;
    font-weight: 600;
    margin-top: 10px;
}
/* BUTTONS */

/* .game-btn{
    display:flex;
    justify-content:center;
    align-items:center;

    text-decoration:none;

    width:100%;
    padding:12px;

    border:none;
    border-radius:10px;

    margin-bottom:10px;

    cursor:pointer;
    font-weight:600;

    transition:.25s;
}

.game-btn:hover{
    transform:translateY(-2px);
} */

/* .login-btn{
    background:#111827;
    color:#fff;
}

.admin-btn{
    background:#111827;
    color:#fff;
} */

/* .detail-btn{
    background:#f1f5f9;
    color:#111827;
} */

/* LOGIN DETAILS */

.detail-box{
    background:#f8fafc;
    border-radius:10px;

    max-height:0;
    overflow:hidden;

    transition:max-height .3s ease;
}

.detail-box.show{
    max-height:150px;
}

.detail-box p{
    padding:10px 0px;
    border-bottom:1px solid #e5e7eb;
}

.detail-box p:last-child{
        border: none;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
}

/* MOBILE */

.menu-toggle,
.close-menu{
    display:none;
    border:none;
    background:none;
    cursor:pointer;
    font-size:28px;
}

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.3s;
}

.overlay.show{
    opacity:1;
    visibility:visible;
}

@media(max-width:991px){
.dropdown-btn {
    justify-content: space-between;
}
    .menu-toggle{
        display:block;
    }

    .gh-nav{
        position:fixed;
        top:0;
        left:-320px;

        width:320px;
        height:100vh;

        background:#fff;

        transition:.35s ease-in-out;

        overflow-y:auto;

        z-index:99999;
        padding:10px;
    }

    .gh-nav.active{
        left:0;
    }

    .close-menu{
        display:block;
    }

    .gh-nav ul{
              flex-direction: column;
        padding-left: 0px;
        align-items: start;
        margin-top: 15px;
    }

    .dropdown-btn:hover{
        background:none;
        color:#111827;
    }
.dropdown {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #ccc;
}
    .dropdown-content{
        position:static;
        width:100%;

        display:none;

        opacity:1;
        visibility:visible;

        transform:none;

        margin-top:10px;

        box-shadow:none;
        border:1px solid #e5e7eb;
    }

    .dropdown.active .dropdown-content{
        display:block;
    }

}

.demo-content{
    padding:100px 20px;
    text-align:center;
}