:root{
    --bg:#0b1020; --fg:#dbe3ff; --accent:#7aa2ff;
    --card:#0b0f1d; --card-b:#ffffff14;
    --btn:#ffffff0f; --btn-b:#ffffff26; --btn-h:#ffffff1f;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}

#wrap{position:fixed;inset:0;display:flex;flex-direction:column}

/* Header du site */
.site-header{
    position:relative; z-index:5;
    display:flex; justify-content:space-between; align-items:center;
    padding:.4rem .8rem; gap:.5rem;
    background:linear-gradient(180deg, rgba(10,14,30,.7), rgba(10,14,30,0));
    backdrop-filter:saturate(1.2) blur(6px);
}
.brand{font-weight:800; letter-spacing:.2px}
.btn{
    display:inline-flex; align-items:center; gap:.4rem;
    background:var(--btn); border:1px solid var(--btn-b);
    border-radius:12px; padding:.5rem .8rem; font-weight:600; cursor:pointer;
}
.btn:hover{background:var(--btn-h)}
.muted{opacity:.75}
.tiny{font-size:.85rem}

/* HUB : popup */
.overlay{position:absolute; inset:0; display:grid; place-items:center; padding:1rem}
.card{
    background:rgba(8,10,20,.85); border:1px solid var(--card-b);
    border-radius:16px; padding:1.2rem 1.4rem; width:min(720px,92vw);
    box-shadow:0 10px 30px rgba(0,0,0,.35)
}
h1{margin:.2rem 0 .6rem; font-size:1.6rem}
.games-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:.6rem; margin-top:.6rem;
}
.game-btn{
    display:flex; justify-content:center; align-items:center; text-align:center;
    padding:.9rem 1rem; border-radius:12px; font-weight:700; letter-spacing:.2px;
    background:var(--btn); border:1px solid var(--btn-b); cursor:pointer;
}
.game-btn:hover{background:var(--btn-h)}
.game-btn.disabled{opacity:.45; cursor:not-allowed}

/* VUE jeu (iframe plein écran) */
.game-host{position:absolute; inset:0; display:flex}
.game-host iframe{flex:1; border:0; width:100%; height:100%}

.site-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:.75rem 1rem;
}

.site-header .logo {
    height:60px;   /* réduit de 100px à 60px */
    margin-left:.5rem;
}

.game-host{
    margin-top: 70px;  /* réduit pour correspondre au nouveau header */
}

/* Responsive mobile */
@media (max-width: 768px) {
    .site-header {
        padding: .25rem .5rem;
        gap: .3rem;
    }
    
    .site-header .logo {
        height: 40px;
        margin-left: .3rem;
    }
    
    .btn {
        padding: .4rem .6rem;
        font-size: .85rem;
    }
    
    .game-host {
        margin-top: 50px;
    }
}

@media (max-width: 480px) {
    .site-header {
        padding: .2rem .4rem;
        gap: .2rem;
    }
    
    .site-header .logo {
        height: 35px;
        margin-left: .2rem;
    }
    
    .btn {
        padding: .3rem .5rem;
        font-size: .8rem;
    }
    
    .game-host {
        margin-top: 45px;
    }
}