/* Thème global de la plateforme. Les couleurs par défaut (Hornet System) sont
   surchargées à l'exécution par applyTheme() depuis le manifeste du jeu. */
:root {
  --abyss: #02070a;
  --ink: #d7e2df;
  --verdigris: #35c4a5;
  --old-gold: #d6b25e;
  --danger: #7c2222;
}

html, body { background-color: var(--abyss); color: var(--ink); }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.accent { color: var(--verdigris); }
.gold   { color: var(--old-gold); }

/* Carte de jeu / panneau */
.card {
  background: linear-gradient(145deg, rgba(13, 22, 25, 0.97), rgba(5, 11, 14, 0.98));
  border: 1px solid rgba(53, 196, 165, 0.22);
  border-radius: 0.85rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
a.card:hover { border-color: var(--verdigris); transform: translateY(-3px); }

.halo { text-shadow: 0 0 22px rgba(53, 196, 165, 0.35); }

.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  border: 1px solid rgba(214, 178, 94, 0.4);
  color: var(--old-gold);
}

/* ===== Coin « compte » de la page d'accueil (js/compte.js) ===== */
.cpt-mini {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; padding: 0.4rem 0.75rem; border-radius: 0.5rem;
  background: rgba(2, 7, 10, 0.6); border: 1px solid rgba(53, 196, 165, 0.35);
  color: var(--ink); cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.cpt-mini:hover { border-color: var(--verdigris); background: rgba(53, 196, 165, 0.1); }
.cpt-mini svg { width: 0.95rem; height: 0.95rem; }
.cpt-sortie { border-color: rgba(218, 72, 72, 0.4); color: #fca5a5; }
.cpt-sortie:hover { border-color: #da4848; background: rgba(124, 34, 34, 0.25); }

.cpt-connecte { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.cpt-qui {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; color: var(--old-gold); font-weight: 700;
}
.cpt-qui svg { width: 1rem; height: 1rem; }

.cpt-overlay {
  position: fixed; inset: 0; z-index: 80; display: none;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgba(2, 7, 10, 0.82); backdrop-filter: blur(3px);
}
.cpt-overlay.ouverte { display: flex; }
.cpt-boite {
  position: relative; width: 100%; max-width: 23rem;
  background: linear-gradient(145deg, rgba(13, 22, 25, 0.98), rgba(5, 11, 14, 0.99));
  border: 1px solid rgba(53, 196, 165, 0.3); border-radius: 0.9rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6); padding: 1.5rem 1.4rem 1.3rem;
}
.cpt-fermer {
  position: absolute; top: 0.6rem; right: 0.6rem; padding: 0.35rem;
  background: none; border: 0; color: var(--ink); opacity: 0.45; cursor: pointer; line-height: 0;
}
.cpt-fermer:hover { opacity: 1; }
.cpt-fermer svg { width: 1.1rem; height: 1.1rem; }

.cpt-titre { font-size: 1.15rem; font-weight: 800; color: var(--verdigris); margin: 0 0 0.25rem; }
.cpt-sous  { font-size: 0.78rem; opacity: 0.65; margin: 0 0 1rem; }
.cpt-lbl   { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
             opacity: 0.6; margin: 0.7rem 0 0.25rem; }
.cpt-aide  { text-transform: none; letter-spacing: 0; opacity: 0.75; }
.cpt-champ {
  width: 100%; font: inherit; font-size: 0.9rem; padding: 0.55rem 0.7rem;
  border-radius: 0.5rem; border: 1px solid rgba(53, 196, 165, 0.3);
  background: #0d1619; color: var(--ink); outline: none;
}
.cpt-champ:focus { border-color: var(--verdigris); }
.cpt-bouton {
  width: 100%; margin-top: 1.1rem; padding: 0.6rem; border: 0; border-radius: 0.5rem;
  font: inherit; font-weight: 700; cursor: pointer; color: #eafff7;
  background: linear-gradient(135deg, #126954, #2bb894);
}
.cpt-bouton:hover:not(:disabled) { filter: brightness(1.12); }
.cpt-bouton:disabled { opacity: 0.55; cursor: default; }

.cpt-message { min-height: 1.1rem; margin-top: 0.7rem; font-size: 0.78rem; line-height: 1.45; text-align: center; }
.cpt-ok  { color: var(--verdigris); font-weight: 700; }
.cpt-ko  { color: #fca5a5; }
.cpt-discret { opacity: 0.75; font-weight: 400; }

.cpt-liens { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.35rem; text-align: center; }
.cpt-liens a { font-size: 0.78rem; color: var(--old-gold); text-decoration: none; opacity: 0.85; }
.cpt-liens a:hover { opacity: 1; text-decoration: underline; }

/* Icones Lucide posees dans du texte : a la taille de la ligne. */
svg.ic, i.ic { width: 1em; height: 1em; vertical-align: -.14em; flex: none; display: inline-block; }