body {
  font-family: system-ui, sans-serif;
  background:#0f1220;
  color:#f2f2f7;
  margin:0;
}

p {
  color:#b7b7bd;
  font-size: 0.9rem;
  line-height: 1.4
}

.version {
  font-size: 0.6rem;
  text-align: center;
}

h3 {
  color:#cdcdd3;
  font-size: 1rem;
}

a {
  color:#f2f2f7;
}

.logo {
  height: 120px;
  width: auto;
  opacity: 0.9;
  transition: opacity 0.3s ease;
  transition: transform 0.2s ease, color 0.2s ease;
}

.logo:hover {
  opacity: 1;
  transform: translateY(-2px) scale(1.1);
}

.intro {
  display: flex;
  flex-direction: column;   /* logo au-dessus du bouton */
  align-items: center;      /* centre horizontalement */
  justify-content: center;  /* centre verticalement si hauteur définie */
  text-align: center;
}

.container { max-width:720px; margin:0 auto; padding:24px; }

.card {
  background:#171a2e;
  border-radius:16px;
  padding:20px;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
  position: relative;
}

img { width:100%; border-radius:12px; margin-top:10px; display:block; }

button {
  border:0; border-radius:8px; padding:10px 18px; margin:6px;
  font-weight:600; cursor:pointer;
}
button.start { margin-bottom:19px; }
button.real { background:#2c6bed; color:white; }
button.ai { background:#c83349; color:white; }
button.secondary { background:#2a2f4a; color:#e4e7f5; }

.hidden { display:none !important; }
.ok { color:#7CFC9A; }
.ko { color:#ff8b8b; }

.small { 
  font-size:.9rem; 
  color:#a9aecf; 
  margin: 3px 0px; /* ← espace vertical réduit */
  line-height: 1.4; /* optionnel : resserre un peu la hauteur de ligne */
  max-width: 600px; /* optionnel : limite la largeur pour une meilleure lisibilité */
}

/* Barre sticky */
.topbar{
  position: sticky; top:0; z-index:10;
  background:#171a2e;
  padding:8px 0 6px;
  margin-bottom:6px;
  border-bottom:1px solid #2a2f4a;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.flex-grow{ flex:1 1 auto; }
.badge{
  background:#2a2f4a; color:#e4e7f5;
  border-radius:999px; padding:6px 10px; font-size:.9rem;
}
.topbar #counter { min-width: 0; }

/* Feedback collé dans la barre, prend toute la ligne sous les boutons */
.feedback-top{
  flex-basis: 100%;
  text-align:center;
  font-weight:600;
  margin: 2px 0 0;
  min-height: 24px; /* évite les sauts de layout */
}

.bigscore {
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin: 6px 0 4px;
}

.bigscore.good   { color: #7CFC9A; }  /* vert */
.bigscore.medium { color: #ffd166; }  /* jaune/ambre */
.bigscore.bad    { color: #ff8b8b; }  /* rouge */

.scoremsg {
  font-size: 1.05rem;
  color: #c9cde4;
  margin: 4px 0 12px;
}

.share-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:10px 0; }
.share-preview {
  width:100%; max-width:640px; border-radius:12px; margin-top:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

/* ===== Footer ===== */
.site-footer {
  margin-top: 40px;
  padding: 30px 0 40px;
  background: #171a2e;
  border-top: 1px solid #252a44;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center; /* ✅ centre horizontalement tout le contenu */
  gap: 16px; /* espace entre les éléments */
}

.site-footer .social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.site-footer .link {
  font-size: 1.8rem;
  color: #b8bfe3;
  transition: transform 0.2s ease, color 0.2s ease;
}

.site-footer .link:hover {
  color: #fff;
  transform: translateY(-2px) scale(1.1);
}

.footer-logo {
  display: flex;
  justify-content: center;
}

.footer-logo img {
  height: 60px;
  width: auto;
  opacity: 0.9;
  transition: opacity 0.3s ease;
  transition: transform 0.2s ease, color 0.2s ease;
}

.footer-logo img:hover {
  opacity: 1;
  transform: translateY(-2px) scale(1.1);
}

/* Compact pour mobile */
@media (max-width: 600px) {
  /* Footer compact */
  .site-footer .link { font-size: 1.5rem; }
  .footer-logo img { height: 50px; }

  /* Topbar compacte */
  .topbar { gap: 6px; }
  .badge { padding: 4px 8px; font-size: .8rem; }

  .topbar button.real,
  .topbar button.ai {
    padding: 8px 12px;
    font-size: .95rem;
    white-space: nowrap;
    flex: 0 1 auto;
  }
  #timer { padding: 4px 8px; }
}

/* Mobile: boutons sous le compteur+timer, côte à côte 50/50 */
@media (max-width: 520px) {
  .topbar { 
    gap: 8px; 
    align-items: flex-start;
  }

  /* 1) Forcer un saut de ligne avant les boutons */
  .topbar .flex-grow {
    order: 2;
    flex: 0 0 100%;
    height: 0;
  }

  /* 2) Ordre clair des éléments */
  #counter, #timer { order: 1; }
  #realBtn, #aiBtn { order: 3; }
  .feedback-top { order: 4; flex-basis: 100%; }

  /* 3) Les deux boutons sur UNE ligne, 50/50 */
  .topbar button.real,
  .topbar button.ai {
    flex: 1 1 calc(50% - 4px);  /* 50/50 moins une petite marge virtuelle */
    min-width: 0;               /* autorise le shrink réel */
    margin: 0;                  /* ⬅ supprime la marge globale "button" */
    padding: 10px 12px;         /* compact */
    font-size: .95rem;
    white-space: nowrap;        /* évite la césure du texte */
  }

  /* 4) Badges compacts pour libérer de la place */
  .badge { padding: 4px 8px; font-size: .8rem; }
  #timer { padding: 4px 8px; }
}

.divider{
  border-top: 1px solid #252a44;
  margin: 26px 12px; /* ← espace vertical réduit */
}

/* Timer */
#timer {
  background: #111;
  color: rgb(172, 199, 255);
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  animation: pulseTimer 2s infinite ease-in-out;
}

/* Loader */
/* Le conteneur du jeu doit être positionné pour l’overlay */
#game { position: relative; }
#result { position: relative; }

/* Overlay centré */
#loader.spinner {
  z-index: 20;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Le “cercle qui tourne” */
#loader.spinner::after {
  content: "";
  width: 42px;
  height: 42px;
  border: 4px solid #cfd6ff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }