/*!
 * Webgames Fogen — Styles du SDK commun (webgames.css)
 * ---------------------------------------------------------------------------
 * Styles MINIMAUX et THÉMABLES pour les widgets (chip de connexion, cloche,
 * panneau de notifications). Tout passe par des variables --wg-* : chaque jeu
 * peut les surcharger pour épouser son identité (parchemin Légion, terminal
 * Vault-Tec, etc.) sans toucher à ce fichier.
 *
 * Pour re-thémer dans un jeu, surcharger les variables sur :root ou un parent :
 *   :root {
 *     --wg-accent: #8B0000;        // Loterie : rouge Légion
 *     --wg-panel:  #1a1209;
 *     --wg-text:   #e8dcc8;
 *   }
 */

:root {
  --wg-bg:      #11161d;
  --wg-panel:   #1b222c;
  --wg-panel-2: #232c38;
  --wg-text:    #e7edf3;
  --wg-muted:   #8a99a8;
  --wg-accent:  #ffb000;
  --wg-on-accent:#11161d;
  --wg-danger:  #e5484d;
  --wg-line:    rgba(255,255,255,.12);
  --wg-radius:  10px;
  --wg-font:    inherit;
}

.wg-btn, .wg-chip, .wg-bell, .wg-panel, .wg-notif { font-family: var(--wg-font); box-sizing: border-box; }

/* ── Bouton « Se connecter » ─────────────────────────────────────────────── */
.wg-btn {
  cursor: pointer; border: 1px solid var(--wg-accent); background: var(--wg-accent);
  color: var(--wg-on-accent); font-weight: 700; font-size: 13px; letter-spacing: .4px;
  padding: 9px 16px; border-radius: var(--wg-radius); transition: filter .15s, transform .1s;
}
.wg-btn:hover { filter: brightness(1.08); }
.wg-btn:active { transform: translateY(1px); }

/* ── Chip utilisateur ────────────────────────────────────────────────────── */
.wg-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 8px 5px 6px; border: 1px solid var(--wg-line);
  background: var(--wg-panel); color: var(--wg-text); border-radius: var(--wg-radius);
}
.wg-av {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wg-accent); color: var(--wg-on-accent); font-weight: 700; font-size: 13px;
}
.wg-chip-name { font-size: 13px; line-height: 1.15; }
.wg-chip-sub { display: block; color: var(--wg-accent); font-size: 11px; }
.wg-chip-logout {
  margin-left: 4px; cursor: pointer; border: none; background: none; color: var(--wg-muted);
  font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 6px;
}
.wg-chip-logout:hover { color: var(--wg-danger); background: var(--wg-panel-2); }

/* ── Cloche + badge ──────────────────────────────────────────────────────── */
.wg-bell-host { position: relative; display: inline-block; }
.wg-bell {
  position: relative; width: 40px; height: 40px; cursor: pointer; font-size: 18px;
  display: grid; place-items: center; border: 1px solid var(--wg-line);
  background: var(--wg-panel); color: var(--wg-text); border-radius: var(--wg-radius);
}
.wg-bell:hover { background: var(--wg-panel-2); }
.wg-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--wg-danger); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--wg-bg);
}
.wg-badge[hidden] { display: none; }

/* ── Panneau de notifications ────────────────────────────────────────────── */
.wg-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 92vw;
  background: var(--wg-panel); border: 1px solid var(--wg-line); border-radius: var(--wg-radius);
  box-shadow: 0 18px 48px rgba(0,0,0,.5); z-index: 1000; overflow: hidden;
}
.wg-panel[hidden] { display: none; }
.wg-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--wg-line); color: var(--wg-text);
}
.wg-mark-all {
  cursor: pointer; border: none; background: none; color: var(--wg-accent);
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
}
.wg-panel-actions { display: flex; align-items: center; gap: 12px; }
.wg-prefs { color: var(--wg-muted); text-decoration: none; font-size: 15px; line-height: 1; }
.wg-prefs:hover { color: var(--wg-accent); }
.wg-panel-list { max-height: 60vh; overflow-y: auto; }
.wg-notif {
  display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--wg-line);
  cursor: pointer; color: var(--wg-text); position: relative;
}
.wg-notif:last-child { border-bottom: 0; }
.wg-notif:hover { background: var(--wg-panel-2); }
.wg-notif-ic {
  flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--wg-panel-2); font-size: 15px;
}
.wg-notif-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.wg-notif-body { color: var(--wg-text); opacity: .9; }
.wg-notif-meta { color: var(--wg-muted); font-size: 11px; }
.wg-notif-x {
  flex: none; align-self: flex-start; width: 22px; height: 22px; line-height: 20px;
  border: 0; border-radius: 6px; background: transparent; color: var(--wg-muted);
  font-size: 17px; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s;
}
.wg-notif:hover .wg-notif-x { opacity: 1; }
.wg-notif-x:hover { background: var(--wg-danger); color: #fff; }
.wg-notif.wg-unread::before {
  content: ""; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--wg-accent);
}
.wg-notif.wg-read { opacity: .58; }
.wg-empty { padding: 26px 14px; text-align: center; color: var(--wg-muted); font-size: 13px; }