/* ══════════════════════════════════════════════════════════════════════════
 * Metal.Sync — theme.css : fondation visuelle commune
 * ──────────────────────────────────────────────────────────────────────────
 * Socle partagé par toutes les pages (launcher + jeux) :
 *   - tokens de couleurs / rayons / polices (:root)
 *   - reset, base html/body, boutons/inputs, scrollbar
 *   - toast + modales génériques (.ov / .mbox)
 *
 * Chaque jeu garde SA propre D.A. (mises en page, accents spécifiques) dans
 * son <style> local ; il peut surcharger n'importe quel token en redéclarant
 * la variable après le <link>.
 *
 * Brancher dans le <head> AVANT le <style> local :
 *   <link rel="stylesheet" href="theme.css">
 * Les polices Google (Bebas Neue / Share Tech Mono) restent chargées par
 * chaque page (balise <link> vers fonts.googleapis.com).
 * ════════════════════════════════════════════════════════════════════════ */
:root{
  /* Surfaces */
  --bg:#0d1117;--bg2:#161b22;--bg3:#1c2330;--bg4:#21262d;
  --border:#30363d;--border2:#3d444d;
  /* Texte (contrastes remontés pour lisibilité) */
  --text:#e6edf3;--text2:#aab4c0;--text3:#8b949e;
  /* Accents par jeu */
  --c-acc:#388bfd;--c-acc2:#1f6feb;--c-glow:rgba(56,139,253,.18);--c-border:rgba(56,139,253,.35);
  --m-acc:#bc8cff;--m-acc2:#8957e5;--m-glow:rgba(188,140,255,.15);--m-border:rgba(188,140,255,.35);
  --d-acc:#e0c870;--d-acc2:#c9a227;--d-glow:rgba(201,162,39,.16);--d-border:rgba(201,162,39,.35);
  /* États */
  --green:#3fb950;--red:#f85149;--gold:#d29922;
  /* Formes & polices */
  --r:8px;--rl:12px;
  --f:'Segoe UI',system-ui,sans-serif;
  --mono:'Share Tech Mono','Courier New',monospace;
  --bb:'Bebas Neue',var(--f);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:var(--bg);font-family:var(--f);font-size:15px;color:var(--text)}
button{cursor:pointer;font-family:inherit;color:inherit}
input,textarea,select{font-family:inherit}
a{color:inherit}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* ── Toast ─────────────────────────────────────────────── */
#toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:var(--bg4);border:1px solid var(--border2);border-radius:var(--r);
  padding:9px 20px;font-family:var(--mono);font-size:12px;color:var(--text);letter-spacing:.5px;
  box-shadow:0 6px 24px rgba(1,4,9,.7);z-index:400;opacity:0;transition:opacity .2s;
  pointer-events:none;white-space:nowrap
}
#toast.show{opacity:1}

/* ── Modales génériques ────────────────────────────────── */
.ov{position:fixed;inset:0;z-index:200;background:rgba(1,4,9,.82);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:20px}
.ov.open{display:flex}
.mbox{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);
  padding:24px;width:400px;max-width:100%;box-shadow:0 24px 64px rgba(1,4,9,.8)}
.mbox h3{font-family:var(--bb);font-size:20px;letter-spacing:3px;margin-bottom:8px}
.mbox p{font-size:13px;color:var(--text2);margin-bottom:12px;line-height:1.55}
.mbox input{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);
  padding:9px 12px;color:var(--text);font-size:13px;outline:none;margin-bottom:14px;font-family:var(--mono)}
.mbox input:focus{border-color:var(--red)}
.mbtns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.m-cancel{padding:8px 16px;border-radius:var(--r);background:var(--bg4);border:1px solid var(--border2);color:var(--text2);font-size:12px}
.m-cancel:hover{border-color:var(--border);color:var(--text)}
.m-join{padding:8px 16px;border-radius:var(--r);background:var(--bg4);border:1px solid var(--border2);color:var(--text2);font-size:12px}
.m-join:hover{border-color:var(--c-acc);color:var(--text)}
.m-new{padding:8px 16px;border-radius:var(--r);background:var(--m-acc2);border:none;color:#fff;font-size:12px;font-weight:700}
.m-new:hover{background:var(--m-acc)}
.m-ok{padding:8px 16px;border-radius:var(--r);background:var(--red);border:none;color:#fff;font-size:12px;font-weight:700;opacity:.35;pointer-events:none}
.m-ok.rdy{opacity:1;pointer-events:all}
