/* ====== Design system commun ====== */
:root{
  /* Couleurs par défaut si aucun thème n'est chargé */
  --bg:#f0f0f5; --card:#fff; --text:#222;
  --accent:#0077cc; --ok:#2eaf6e; --ko:#d32f2f;

  /* Surfaces pour le jeu */
  --surface:#0f1430;         /* fond blocs / inputs / badges / boutons */
  --on-surface:#e9ecf1;      /* texte au-dessus de surface */
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  display:flex; align-items:center; justify-content:center;
}

/* Conteneur */
.box, .wrap .panel{
  background:var(--card);
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* Accueil */
.box{
  padding:2.4rem 2.8rem;
  text-align:center;
  max-width:540px; width:clamp(320px, 92vw, 540px);

  /* structure en colonne avec espaces réguliers */
  display:flex; flex-direction:column; align-items:center;
  gap:1.1rem;
}
h1{margin:0 0 .75rem}
.box p{margin:.2rem 0 .2rem}
.box select{
  margin:.25rem 0 .6rem;
  min-width:220px;
}

/* Groupe de boutons d’accueil */
.btn-group{
  display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center;
}
.btn-group > button{
  padding:.7rem 1.1rem;      /* boutons + confortables */
  font-size:1rem;
  border-radius:12px;
}

/* Formes & boutons */
select, button, .btn{
  font-size:1rem; border-radius:10px; cursor:pointer;
  border:1px solid color-mix(in oklab, var(--text) 30%, transparent);
  background:var(--card); color:var(--text);
  padding:.6rem 1rem;
}
button, .btn{ border:none; color:#fff; background:var(--ok); }
button:hover, .btn:hover{ filter:brightness(.92) }

/* Badges & feedback */
.badge{
  display:inline-block;
  padding:.45rem .7rem; border-radius:999px; font-weight:600;
  background:color-mix(in oklab, var(--surface) 85%, #000 15%);
  border:1px solid color-mix(in oklab, var(--surface) 70%, #fff 30%);
  color:var(--on-surface);
}
.ok{ color:var(--ok) } .ko{ color:var(--ko) }

/* ====== Mise en page du jeu ====== */
.wrap{width:100%; max-width:960px; padding:16px; display:grid; gap:16px; align-items:start}
header{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.menu select{padding:.45rem .6rem}
.statbar{display:flex; gap:8px; flex-wrap:wrap}

.panel{ border:1px solid color-mix(in oklab, var(--text) 22%, transparent); padding:clamp(12px,2vw,16px) }
.controls{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center}
.gauge label{font-size:clamp(12px,1.8vw,14px)}
input[type="range"]{width:100%}

.btn{
  appearance:none;
  background:linear-gradient(180deg, color-mix(in oklab, var(--surface) 85%, #000 15%),
                                      color-mix(in oklab, var(--surface) 70%, #000 30%));
  color:var(--on-surface); padding:.6rem .9rem; font-weight:650;
}
.btn[disabled]{opacity:.5; cursor:not-allowed}

.stage{
  display:grid; grid-template-columns:1fr clamp(40px,8vw,60px) 1fr; align-items:center; gap:12px; text-align:center;
  margin-bottom:10px;        /* remplace le <div style="height:10px"> */
}
.block{
  aspect-ratio:1/1; min-height:clamp(120px,28vw,220px);
  display:grid; place-items:center;
  background:var(--surface);
  border:2px solid color-mix(in oklab, var(--text) 25%, transparent); border-radius:14px;
  font-size:clamp(36px,8vw,72px); font-weight:800; color:var(--on-surface);
}
.op{font-size:clamp(28px,6vw,48px); opacity:.9}

.answer{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center}
.answer input{
  width:100%; font-size:clamp(18px,2.2vw,22px); padding:.75rem .9rem; border-radius:12px;
  border:2px solid color-mix(in oklab, var(--text) 25%, transparent);
  background:var(--surface); color:var(--on-surface); outline:none;
}
.answer input:focus{border-color:var(--accent); box-shadow:0 0 0 4px rgb(110 231 255 / .12)}

.feedback{min-height:22px; font-weight:600}
footer{opacity:.85; font-size:clamp(12px,1.8vw,14px); text-align:center}

/* Petites largeurs */
@media (max-width:560px){
  .controls{grid-template-columns:1fr; gap:10px}
}

/* ====== Animations réutilisées ====== */
@keyframes pop   { 0%{transform:scale(1)} 60%{transform:scale(1.18)} 100%{transform:scale(1)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* Utilitaires animés */
.pop{ animation: pop .35s ease }
.shake{ animation: shake .35s ease }