:root{
    --bg:#07111b;--dark:#0d1c2b;--panel:#12263b;
    --line:#24415d;--text:#eef5ff;--muted:#9bb2c7;
    --accent:#45d6ff;--gold:#ffd04d;--good:#64e291;
    --shadow:0 18px 60px rgba(0,0,0,.5);
    --radius:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;font-family:"Segoe UI",Arial,sans-serif;color:var(--text)}
body{
    background-color:var(--bg);
    background-image:url('gapgame.png');
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
}

/* ── SHELL ── */
#left-frame{
    position:fixed;left:0;top:0;
    width:clamp(280px,30vw,360px);
    height:100vh;border:none;background:transparent;z-index:20;
}
#left-frame.hidden{display:none}

#spa-app{
    position:fixed;inset:0;
    left:clamp(280px,30vw,360px);
    z-index:10;
    overflow:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:rgba(7,17,27,.55);
    backdrop-filter:blur(2px);
}
body.panels-hidden #left-frame{display:none}
body.panels-hidden #spa-app{left:0}

/* ── TOGGLE BTN ── */
#togglePanels{
    position:fixed;top:16px;left:16px;z-index:50;
    display:flex;align-items:center;gap:8px;
    padding:9px 15px;
    background:rgba(13,28,43,.92);
    border:1px solid rgba(69,214,255,.3);
    border-radius:12px;color:var(--accent);
    font-size:12px;font-weight:800;letter-spacing:.07em;
    cursor:pointer;backdrop-filter:blur(8px);
    box-shadow:0 4px 20px rgba(0,0,0,.45);
    transition:background .15s,border-color .15s,transform .15s;
}
#togglePanels:hover{background:rgba(69,214,255,.12);border-color:rgba(69,214,255,.55);transform:translateY(-1px)}
#togglePanels.off{border-color:rgba(255,255,255,.12);color:var(--muted)}
#togglePanels .ti{font-size:16px}

/* ── SPA CONTAINER ── */
.container{max-width:1000px;margin:28px auto;padding:0 22px 60px}

/* ── SEARCH ROW ── */
.search-row{display:flex;gap:10px;align-items:center;margin-bottom:16px;margin-top:8px}
.search-inner{flex:1;position:relative}
.search-inner input{
    width:100%;padding:12px 16px 12px 44px;
    background:rgba(13,28,43,.9);
    border:2px solid rgba(69,214,255,.25);
    border-radius:12px;outline:none;
    color:var(--text);font-size:.95rem;
    backdrop-filter:blur(6px);
    transition:border-color .2s,box-shadow .2s;
    font-family:"Segoe UI",Arial,sans-serif;
}
.search-inner input::placeholder{color:var(--muted)}
.search-inner input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(69,214,255,.12)}
.search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:1.1rem;pointer-events:none;opacity:.6}

/* ── SECTION TITLE ── */
.section-title{
    font-size:11px;font-weight:900;letter-spacing:.14em;
    text-transform:uppercase;color:var(--accent);
    margin:24px 0 12px;display:flex;align-items:center;gap:10px;
}
.section-title::after{content:'';flex:1;height:1px;background:rgba(69,214,255,.15)}

/* ── GAMES GRID ── */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}

/* ── GAME CARD ── */
.game-card{
    position:relative;border-radius:18px;overflow:hidden;cursor:pointer;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.09);
    box-shadow:var(--shadow);
    transition:transform .18s ease,border-color .18s,box-shadow .18s;
    animation:cardIn .3s ease both;
}
.game-card:hover{transform:translateY(-4px);border-color:rgba(69,214,255,.4);box-shadow:0 22px 60px rgba(0,0,0,.5),0 0 0 1px rgba(69,214,255,.25)}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.game-media{
    min-height:180px;padding:16px;
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at center,rgba(69,214,255,.08),transparent 60%);
}
.game-media img{max-width:100%;max-height:160px;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.35))}
.game-body{padding:0 16px 16px}
.game-title{font-size:20px;font-weight:900;margin-bottom:6px}
.game-desc{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:12px;min-height:40px}
.game-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pill{border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700;
    border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.05);color:#d9ebff}
.game-btn{
    width:100%;padding:10px;border-radius:11px;border:none;cursor:pointer;
    background:linear-gradient(135deg,var(--accent),#6ce7ff);
    color:#042033;font-weight:900;font-size:13px;
    transition:transform .13s,opacity .13s;
}
.game-btn:hover{transform:translateY(-1px);opacity:.9}

/* ── POPUP (modal) ── */
.modal{
    position:fixed;inset:0;display:none;align-items:center;justify-content:center;
    background:rgba(2,8,14,.78);backdrop-filter:blur(6px);z-index:9999;
}
.modal.open{display:flex}
.modal-box{
    width:min(1100px,calc(100vw - 40px));height:min(760px,calc(100vh - 40px));
    background:#08131e;border-radius:22px;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 25px 80px rgba(0,0,0,.58);
    overflow:hidden;display:flex;flex-direction:column;
}
.modal-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:11px 14px 11px 18px;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
}
.modal-title{font-weight:800;letter-spacing:.04em}
.modal-nav{display:flex;align-items:center;gap:6px}
.modal-nav button{
    border:none;cursor:pointer;width:34px;height:34px;border-radius:9px;
    background:rgba(255,255,255,.07);color:#fff;font-size:16px;
    transition:background .15s;
}
.modal-nav button:hover{background:rgba(255,255,255,.14)}
.modal-nav button.off{opacity:.25;pointer-events:none}
.modal-counter{font-size:12px;color:var(--muted);min-width:40px;text-align:center}
.modal-close{border:none;cursor:pointer;width:36px;height:36px;border-radius:10px;
    background:rgba(255,255,255,.07);color:#fff;font-size:18px}
.modal-frame{width:100%;height:100%;border:none;background:#0b1724}

@media(max-width:900px){
    #spa-app{left:0;top:auto}
    #left-frame{display:none}
    .games-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
    .games-grid{grid-template-columns:1fr}
    .container{padding:0 12px 60px}
}

/* ══════════════════════════════════════════════
   PROFILE BUBBLE
   ══════════════════════════════════════════════ */
#profile-launcher{
    position:fixed;right:18px;top:18px;z-index:46;
    width:48px;height:48px;border-radius:50%;overflow:hidden;
    box-shadow:0 6px 20px rgba(0,0,0,.35);
    background:rgba(255,255,255,.88);cursor:pointer;
    border:2px solid rgba(69,214,255,.35);
    transition:border-color .18s,transform .14s;
}
#profile-launcher:hover{border-color:#45d6ff;transform:scale(1.08)}
#profile-launcher iframe{width:100%;height:100%;border:none;background:transparent;pointer-events:none;display:block}

#profile-popup{
    display:none;position:fixed;right:76px;top:18px;
    width:min(340px,92vw);height:400px;z-index:70;
    background:#fff;border-radius:16px;overflow:hidden;
    box-shadow:0 28px 72px rgba(0,0,0,.4);
}
#profile-popup-header{
    display:flex;align-items:center;gap:10px;
    padding:11px 14px;background:#07111b;color:#fff;
    cursor:move;user-select:none;
}
#profile-popup-header strong{flex:1;font-size:.95rem}
#profile-popup-close{
    border:none;background:#c0392b;color:#fff;
    width:28px;height:28px;border-radius:50%;
    font-weight:900;cursor:pointer;font-size:.8rem;
}

/* ══════════════════════════════════════════════
   BARRE DES LANGUES
   ══════════════════════════════════════════════ */
#lang-bar{
    position:fixed;bottom:0;left:clamp(280px,30vw,360px);right:0;
    z-index:44;
    display:flex;align-items:center;gap:0;
    background:rgba(7,17,27,.82);
    border-top:1px solid rgba(69,214,255,.10);
    backdrop-filter:blur(8px);
    padding:0 14px;
    height:36px;
    overflow:hidden;
    transition:left .3s;
}
body.panels-hidden #lang-bar{left:0}

#lang-bar-inner{
    display:flex;align-items:center;gap:2px;
    overflow-x:auto;flex:1;
    scrollbar-width:none;
    -ms-overflow-style:none;
}
#lang-bar-inner::-webkit-scrollbar{display:none}

.lang-btn{
    flex-shrink:0;
    border:none;cursor:pointer;
    padding:3px 7px;
    border-radius:6px;
    background:transparent;
    font-size:11px;font-weight:700;letter-spacing:.04em;
    color:rgba(255,255,255,.45);
    transition:background .15s,color .15s;
    display:flex;align-items:center;gap:4px;
    white-space:nowrap;
}
.lang-btn:hover{background:rgba(69,214,255,.12);color:#fff}
.lang-btn.active{background:rgba(69,214,255,.18);color:#45d6ff}
.lang-btn img{width:16px;height:11px;object-fit:cover;border-radius:2px;flex-shrink:0}
.lang-btn .lc{font-size:10px}

#lang-more-btn{
    flex-shrink:0;margin-left:6px;
    border:none;cursor:pointer;
    padding:3px 9px;border-radius:6px;
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.4);font-size:10px;font-weight:800;
    letter-spacing:.06em;
    transition:background .15s,color .15s;
}
#lang-more-btn:hover{background:rgba(255,255,255,.12);color:#fff}

/* Popup langues complète */
#lang-popup{
    display:none;position:fixed;bottom:42px;left:50%;
    transform:translateX(-50%);
    z-index:80;
    background:#0d1c2b;border:1px solid rgba(69,214,255,.2);
    border-radius:14px;padding:14px;
    box-shadow:0 20px 60px rgba(0,0,0,.55);
    width:min(500px,96vw);
    max-height:55vh;overflow-y:auto;
}
#lang-popup.open{display:block}
#lang-popup-grid{
    display:flex;flex-wrap:wrap;gap:4px;
}
.lang-popup-btn{
    border:none;cursor:pointer;
    padding:5px 10px;border-radius:7px;
    background:rgba(255,255,255,.05);
    color:rgba(255,255,255,.6);font-size:11px;font-weight:700;
    display:flex;align-items:center;gap:5px;
    transition:background .15s,color .15s;
}
.lang-popup-btn:hover{background:rgba(69,214,255,.15);color:#fff}
.lang-popup-btn.active{background:rgba(69,214,255,.22);color:#45d6ff}
.lang-popup-btn img{width:18px;height:12px;object-fit:cover;border-radius:2px}

/* ══════════════════════════════════════════════
   WINDOW MANAGER — fenêtres flottantes
   ══════════════════════════════════════════════ */
.gw-win{
    position:fixed;display:flex;flex-direction:column;
    background:#08131e;border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 24px 80px rgba(0,0,0,.65),0 0 0 1px rgba(69,214,255,.08);
    overflow:hidden;resize:both;
    min-width:320px;min-height:220px;
}
.gw-win.focused{border-color:rgba(69,214,255,.30);box-shadow:0 28px 90px rgba(0,0,0,.7),0 0 0 1px rgba(69,214,255,.20)}

.gw-bar{
    display:flex;align-items:center;gap:8px;
    padding:8px 10px;
    background:linear-gradient(90deg,rgba(69,214,255,.07),rgba(255,255,255,.03));
    border-bottom:1px solid rgba(255,255,255,.08);
    cursor:move;user-select:none;flex-shrink:0;
}
.gw-icon{font-size:14px;flex-shrink:0}
.gw-name{
    flex:1;font-size:12px;font-weight:800;color:#eef5ff;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    letter-spacing:.03em;
}
.gw-controls{display:flex;gap:4px}
.gw-btn{
    width:22px;height:22px;border:none;cursor:pointer;
    border-radius:6px;font-size:13px;font-weight:900;
    display:flex;align-items:center;justify-content:center;
    transition:background .14s;
}
.gw-btn-min{background:rgba(255,208,77,.15);color:#ffd04d}
.gw-btn-min:hover{background:rgba(255,208,77,.35)}
.gw-btn-cls{background:rgba(255,80,80,.15);color:#ff7070}
.gw-btn-cls:hover{background:rgba(255,80,80,.35)}

.gw-frame{flex:1;border:none;background:#0b1724;display:block}

/* ── TASKBAR jeux actifs ── */
#gw-taskbar{
    position:fixed;bottom:36px;
    left:clamp(280px,30vw,360px);right:68px;
    z-index:43;display:none;align-items:center;gap:5px;
    padding:4px 10px;
    background:rgba(7,17,27,.92);
    border-top:1px solid rgba(69,214,255,.12);
    backdrop-filter:blur(8px);
    overflow-x:auto;scrollbar-width:none;
    transition:left .3s;
}
#gw-taskbar::-webkit-scrollbar{display:none}
body.panels-hidden #gw-taskbar{left:0}

.gw-task-item{
    display:flex;align-items:center;
    background:rgba(255,255,255,.06);
    border-radius:8px;overflow:hidden;flex-shrink:0;
    border:1px solid rgba(255,255,255,.06);
    transition:background .15s,border-color .15s;
}
.gw-task-item.focused{background:rgba(69,214,255,.12);border-color:rgba(69,214,255,.25)}

.gw-task-label{
    border:none;cursor:pointer;background:transparent;
    color:rgba(255,255,255,.6);font-size:11px;font-weight:700;
    padding:5px 9px;white-space:nowrap;
    max-width:130px;overflow:hidden;text-overflow:ellipsis;
    display:flex;align-items:center;gap:5px;
    transition:color .14s;
}
.gw-task-item.focused .gw-task-label{color:#45d6ff}
.gw-task-label:hover{color:#fff}

.gw-task-close{
    border:none;cursor:pointer;background:transparent;
    color:rgba(255,255,255,.25);font-size:13px;font-weight:900;
    padding:5px 6px;border-left:1px solid rgba(255,255,255,.06);
    transition:color .12s,background .12s;
}
.gw-task-close:hover{color:#ff7070;background:rgba(255,80,80,.12)}

/* Adjust spa-app & lang-bar when taskbar is visible */
body.has-games #gw-taskbar{display:flex}
body.has-games #lang-bar{bottom:28px}  /* taskbar = 28px height */