/* ═══ EVOTIC EDGE — GAMES SHELL CSS ═══
   Port from D:\PRODUCTION EVOTIC ZAO\games\games-shell.css.
   Local-only MVP — leaderboard styles retained but rendered empty by shell.js.
*/

/* Override style.css catch-all `body:not([class]) { padding: var(--sp-4); }`
   so the orange header sits flush against the viewport edges. */
body:has(> .gs-app) {
  padding: 0 !important;
  margin: 0 !important;
}

/* Don't redefine root tokens — style.css design-tokens.css already provide them.
   Locals only for game-specific aliases. */
.gs-app{
  --gs-pri:#6750A4;
  --gs-pri2:#4F378B;
  --gs-pri-light:#FFF3E0;
  --gs-gold:#F57F17;
  --gs-txt:#1C1C2E;
  --gs-txt2:#5A5A6A;
  --gs-txt3:#9E9E9E;
  --gs-card-bg:#FFFFFF;
  --gs-card-border:rgba(0,0,0,.06);
  --gs-card-shadow:0 2px 16px rgba(0,0,0,.06);
  --gs-hdr-bg:linear-gradient(135deg,#6750A4,#4F378B);
  --gs-safe-top:env(safe-area-inset-top,0px);
  --gs-safe-bottom:env(safe-area-inset-bottom,0px);
  min-height:100vh;
  min-height:100dvh; /* fill viewport precisely, accounts for mobile URL bar */
  padding-bottom:var(--gs-safe-bottom);
  display:flex;flex-direction:column;background:#F5F5F5;color:var(--gs-txt);
}

/* HEADER */
.gs-hdr{padding:calc(var(--gs-safe-top) + 14px) 16px 14px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20;background:var(--gs-hdr-bg);color:#fff;box-shadow:0 2px 12px rgba(103, 80, 164,.15)}
.gs-back{width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.22);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,background .15s}
.gs-back:active{transform:scale(.92);background:rgba(255,255,255,.3)}
.gs-title{flex:1;font-size:18px;font-weight:900;color:#fff;display:flex;align-items:center;gap:8px;min-width:0}
.gs-title i{font-size:16px}
.gs-hdr-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#7F67BE,#4F378B);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;border:2px solid rgba(255,255,255,.35);overflow:hidden;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.gs-hdr-av img{width:100%;height:100%;object-fit:cover;display:block}

/* HUD */
.gs-hud{display:flex;gap:10px;padding:14px 16px 6px;flex-wrap:wrap}
.gs-stat{flex:1;min-width:90px;background:var(--gs-card-bg);border:1px solid var(--gs-card-border);border-radius:14px;padding:10px 14px;box-shadow:var(--gs-card-shadow);text-align:center}
.gs-stat-lbl{font-size:9px;color:var(--gs-txt3);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.gs-stat-val{font-size:20px;font-weight:900;color:var(--gs-pri);font-variant-numeric:tabular-nums;margin-top:2px}
.gs-stat.gold .gs-stat-val{color:var(--gs-gold)}

/* GAME STAGE */
.gs-stage{padding:8px 16px 18px;display:flex;flex-direction:column;align-items:center;gap:14px}
.gs-canvas-wrap{width:100%;max-width:480px;aspect-ratio:1/1;background:var(--gs-card-bg);border:1px solid var(--gs-card-border);border-radius:18px;box-shadow:var(--gs-card-shadow);overflow:hidden;position:relative;touch-action:none}
.gs-canvas-wrap canvas{display:block;width:100%;height:100%}

/* BUTTONS */
.gs-btn{padding:13px 26px;border-radius:14px;background:linear-gradient(135deg,var(--gs-pri),var(--gs-pri2));color:#fff;border:none;font-family:'Nunito',sans-serif;font-size:14px;font-weight:900;cursor:pointer;box-shadow:0 6px 20px rgba(103, 80, 164,.3);display:inline-flex;align-items:center;gap:8px;transition:transform .15s,box-shadow .15s}
.gs-btn:active{transform:scale(.96);box-shadow:0 4px 12px rgba(103, 80, 164,.25)}
.gs-btn.ghost{background:var(--gs-card-bg);color:var(--gs-txt);border:1px solid var(--gs-card-border);box-shadow:var(--gs-card-shadow)}
.gs-btn.ghost:active{transform:scale(.96)}
.gs-btn i{font-size:13px}
.gs-btn-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* DPAD */
.gs-pad{display:grid;width:100%;max-width:280px;margin:0 auto;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:6px;aspect-ratio:3/2}
.gs-pad-btn{background:var(--gs-card-bg);border:1px solid var(--gs-card-border);border-radius:14px;font-size:20px;color:var(--gs-pri);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--gs-card-shadow);transition:all .1s;user-select:none;-webkit-user-select:none}
.gs-pad-btn:hover{background:var(--gs-pri-light);border-color:var(--gs-pri)}
.gs-pad-btn:active{background:var(--gs-pri-light);transform:scale(.94)}
.gs-pad-up{grid-column:2;grid-row:1}
.gs-pad-left{grid-column:1;grid-row:2}
.gs-pad-right{grid-column:3;grid-row:2}
.gs-pad-down{grid-column:2;grid-row:3}

/* OVERLAY / MODAL */
.gs-overlay{position:fixed;inset:0;background:rgba(28,28,46,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;animation:gsFadeIn .25s ease-out}
.gs-overlay.show{display:flex}
@keyframes gsFadeIn{from{opacity:0}to{opacity:1}}
.gs-modal{background:var(--gs-card-bg);border-radius:20px;padding:30px 24px;max-width:360px;width:100%;text-align:center;box-shadow:0 16px 60px rgba(0,0,0,.3);animation:gsModalIn .35s cubic-bezier(.25,.1,.25,1);position:relative}
.gs-modal-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:none;background:rgba(0,0,0,.05);color:var(--gs-txt2);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,background .15s}
.gs-modal-close:active{transform:scale(.9);background:rgba(0,0,0,.1)}
@keyframes gsModalIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.gs-modal-icon{font-size:54px;margin-bottom:8px;display:inline-block;animation:gsIconFloat 3s ease-in-out infinite}
@keyframes gsIconFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-3deg)}}
.gs-modal-title{font-size:20px;font-weight:900;margin-bottom:4px;color:var(--gs-txt)}
.gs-modal-sub{font-size:12px;color:var(--gs-txt2);margin-bottom:16px}
.gs-modal-score{font-size:54px;font-weight:900;background:linear-gradient(135deg,var(--gs-pri),#F57F17);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;font-variant-numeric:tabular-nums;margin:8px 0}
.gs-modal-stats{display:flex;gap:8px;margin:14px 0 18px;justify-content:center;flex-wrap:wrap}
.gs-modal-stat{background:var(--gs-pri-light);border:1px solid rgba(103, 80, 164,.15);border-radius:12px;padding:8px 12px;min-width:78px}
.gs-modal-stat-val{font-size:16px;font-weight:900;color:var(--gs-pri);font-variant-numeric:tabular-nums}
.gs-modal-stat-lbl{font-size:9px;color:var(--gs-txt3);text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin-top:2px}
.gs-modal-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* LEADERBOARD (rendered empty in MVP) */
.gs-lb{padding:0 16px 18px;display:flex;flex-direction:column;gap:6px}
.gs-lb-head{font-size:13px;font-weight:900;color:var(--gs-txt);display:flex;align-items:center;gap:8px;padding:6px 4px}
.gs-lb-head i{color:var(--gs-gold)}
.gs-lb-empty{padding:14px;text-align:center;font-size:12px;color:var(--gs-txt3);font-weight:700}

/* TOAST */
.gs-toast{position:fixed;top:80px;left:50%;transform:translateX(-50%) translateY(-10px);background:var(--gs-pri);color:#fff;padding:10px 20px;border-radius:50px;font-size:12px;font-weight:800;z-index:5000;opacity:0;transition:.3s;pointer-events:none;white-space:nowrap;box-shadow:0 6px 18px rgba(103, 80, 164,.35)}
.gs-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* LOADING */
.gs-loading{text-align:center;padding:30px 20px;color:var(--gs-txt3);font-size:12px}
.gs-spinner{display:inline-block;width:24px;height:24px;border:2.5px solid rgba(0,0,0,.08);border-top-color:var(--gs-pri);border-radius:50%;animation:gsSpin .8s linear infinite;margin-bottom:10px}
@keyframes gsSpin{to{transform:rotate(360deg)}}

/* RESPONSIVE */
@media(max-width:480px){
  /* Mobile : full-bleed game frame + distribute vertically to fill the viewport.
     space-between pushes canvas to top and buttons to bottom (just above the
     Android nav bar), so the body gray background no longer shows below the
     controls. */
  .gs-stage{
    padding:6px 6px 14px;
    flex:1;
    justify-content:space-between;
  }
  .gs-canvas-wrap{border-radius:14px;max-width:none}
  .gs-hud{padding:10px 8px 4px;gap:6px}
  .gs-stat{padding:8px 10px;min-width:auto}
}
@media(max-width:400px){
  .gs-title{font-size:16px}
  .gs-stat-val{font-size:18px}
  .gs-modal-score{font-size:46px}
  .gs-modal-icon{font-size:46px}
}

/* ═══ HUB (games.html) ═══ */
.gh-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:14px 16px 24px}
.gh-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--gs-card-bg);border:1px solid var(--gs-card-border);border-radius:18px;
  padding:20px 12px;text-decoration:none;color:var(--gs-txt);
  box-shadow:var(--gs-card-shadow);transition:transform .15s,box-shadow .15s;
}
.gh-card:active{transform:scale(.96);box-shadow:0 1px 6px rgba(0,0,0,.08)}
.gh-card-icon{font-size:44px;line-height:1;margin-bottom:6px}
.gh-card-name{font-size:14px;font-weight:900;color:var(--gs-txt)}
.gh-card-tag{font-size:10px;color:var(--gs-txt3);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.gh-card-best{font-size:11px;color:var(--gs-gold);font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
@media(min-width:520px){ .gh-grid{grid-template-columns:repeat(3,1fr)} }

/* ═══ Phase 13.5+ POLISH — Fullscreen button + collapsable LB + mobile maximize ═══ */

/* Fullscreen toggle (header right of title, left of avatar) */
.gs-fs-btn{
  width:36px;height:36px;border-radius:50%;border:none;
  background:rgba(255,255,255,.22);color:#fff;font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .15s, background .15s;
}
.gs-fs-btn:active{transform:scale(.92);background:rgba(255,255,255,.3)}

/* Leaderboard collapsable */
.gs-lb-head{justify-content:space-between !important;display:flex;user-select:none;-webkit-user-select:none;align-items:center}
.gs-lb-chev{font-size:11px;opacity:.55;margin-left:auto;transition:transform .25s}
.gs-lb:not(.collapsed) .gs-lb-chev{transform:rotate(180deg)}
.gs-lb.collapsed > :not(.gs-lb-head){display:none !important}

/* Mobile: maximize canvas + compact HUD/pad/buttons */
@media(max-width:480px){
  .gs-canvas-wrap{
    /* Width = whichever is smaller : 96vw (avoid horizontal scroll) OR
       remaining vertical room after subtracting header(60) + HUD(60) + stage-pad(8)
       + dpad(170) + btn-row(50) + lb-head(40) + safe(30). Sum ≈ 320. */
    width:min(96vw, calc(100dvh - 320px)) !important;
    max-width:none !important;
    align-self:center;
  }
  .gs-hud{padding:8px !important;gap:4px !important}
  .gs-stat{padding:6px 8px !important;min-width:auto !important}
  .gs-stat-lbl{font-size:8px !important}
  .gs-stat-val{font-size:16px !important}
  .gs-stage{padding:4px 4px 10px !important;gap:8px !important}
  .gs-pad{max-width:240px !important;aspect-ratio:3/2}
  .gs-pad-btn{font-size:18px;border-radius:12px}
  .gs-btn{padding:11px 20px;font-size:13px}
  .gs-lb{padding:4px 12px 12px !important}
  .gs-fs-btn{width:32px;height:32px;font-size:13px}
}

/* Native fullscreen mode — make canvas dominate the screen */
:fullscreen .gs-app, :-webkit-full-screen .gs-app{
  background:#1a1a1a !important;
  color:#fff !important;
}
:fullscreen .gs-canvas-wrap, :-webkit-full-screen .gs-canvas-wrap{
  width:min(96vw, calc(100vh - 280px)) !important;
}
:fullscreen .gs-stat, :-webkit-full-screen .gs-stat{
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
}
:fullscreen .gs-stat-val, :-webkit-full-screen .gs-stat-val{color:#7F67BE !important}
:fullscreen .gs-stat-lbl, :-webkit-full-screen .gs-stat-lbl{color:rgba(255,255,255,.55) !important}
:fullscreen .gs-lb, :-webkit-full-screen .gs-lb{display:none !important}

/* ═══ Online — overlay recherche d'adversaire (radar) ═══ */
.gs-search-modal { text-align: center; }
.gs-radar { position: relative; width: 90px; height: 90px; margin: 6px auto 16px; display: flex; align-items: center; justify-content: center; }
.gs-radar i { font-size: 30px; color: #6750A4; z-index: 2; }
.gs-radar span { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(103, 80, 164,.5); opacity: 0; animation: gs-radar-pulse 2s ease-out infinite; }
.gs-radar span:nth-child(2) { animation-delay: .66s; }
.gs-radar span:nth-child(3) { animation-delay: 1.33s; }
@keyframes gs-radar-pulse { 0% { transform: scale(.3); opacity: .8; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gs-radar span { animation: none; opacity: .3; } }

/* Sélecteur de contacts (invite DM native) — 2026-05-29 */
.gs-cp-modal { max-width: 380px; width: 100%; }
.gs-cp-list { margin-top: 12px; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.gs-cp-empty { padding: 24px 8px; color: var(--gs-txt2); font-size: 14px; text-align: center; }
.gs-cp-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: none; background: transparent; border-radius: 12px; cursor: pointer; color: var(--gs-txt); font-size: 15px; text-align: left; transition: background .15s; }
.gs-cp-row:active { background: rgba(0,0,0,.06); }
.gs-cp-row .gs-cp-av { width: 38px; height: 38px; border-radius: 50%; background: #6750A4; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; overflow: hidden; flex: 0 0 auto; }
.gs-cp-row .gs-cp-av img { width: 100%; height: 100%; object-fit: cover; }
.gs-cp-row .gs-cp-name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-cp-row i { color: #43A047; }