/* --- Mise en page générale --- */
.card-lg { padding:1.25rem; }
.is-big { font-size:1.1rem; padding:.7rem 1.2rem; }

.magic-stage { margin-top:.75rem; }
.magic-layout {
  display:grid;
  grid-template-columns: 1fr 320px;  /* grille + sidebar */
  gap:1rem;
}
@media (max-width: 980px){
  .magic-layout { grid-template-columns: 1fr; }
}

/* --- HUD --- */
.magic-hud{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.6rem; }
.hud-badge{
  background:#0b1320; border:1px solid rgba(255,255,255,.08);
  padding:.35rem .55rem; border-radius:.6rem; font-weight:800;
}



/* === Grille compacte façon “carré” (pistes fixes) === */
.magic-grid{
  display: grid;
  gap: 2px;                     /* traits fins entre cases */
  background: #334155;          /* couleur des traits */
  padding: 2px;                 /* trait extérieur de 1px */
  border: 2px solid #334155;    /* cadre */
  border-radius: 8px;
  justify-content: start;
  align-content: start;
}

/* Tailles de piste = largeur/hauteur d'une case */
.magic-grid[data-n="3"]  { --cell: 105px;  grid-template-columns: repeat(3,  var(--cell)); }
.magic-grid[data-n="4"]  { --cell: 105px;  grid-template-columns: repeat(4,  var(--cell)); }
.magic-grid[data-n="5"]  { --cell: 105px;  grid-template-columns: repeat(5,  var(--cell)); }
.magic-grid[data-n="6"]  { --cell: 105px;  grid-template-columns: repeat(6,  var(--cell)); }
.magic-grid[data-n="10"] { --cell: 100px;  grid-template-columns: repeat(10, var(--cell)); }
.magic-grid[data-n="20"] { --cell: 100px;  grid-template-columns: repeat(20, var(--cell)); }

/* Cases : pas de bordures (sinon double trait) et taille forcée */
.magic-grid input{
  width:  var(--cell) !important;
  height: var(--cell) !important;
  box-sizing: border-box;
  text-align:center;
  font-size:clamp(1rem, 2.2vw, 1.25rem);
  font-weight:800;
  border: 0 !important;
  border-radius: 0 !important;
  background:#0f172a;
  color:#fff;
}
.magic-grid input::placeholder{ color:#64748b; }
.magic-grid input:focus{ outline:3px solid #38bdf8; outline-offset:2px; }
.magic-grid input[disabled]{ background:#0b1320; color:#cbd5e1; }



/* Surlignage réussite */
.row-ok{ box-shadow: inset 0 0 0 3px #16a34a !important; }
.col-ok{ box-shadow: inset 0 0 0 3px #f59e0b !important; }

/* --- Consignes --- */
.instructions h3{ margin:.2rem 0 .4rem; font-size:1.1rem }
.instructions ol{ margin:.2rem 0 .8rem .9rem }
.instructions li{ margin:.15rem 0 }

/* --- Actions --- */
.magic-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.4rem; }
.congrats-list{ list-style:none; padding-left:0; margin:.25rem 0 0; }
.congrats-list li{ color:#22c55e; font-weight:700; margin:.15rem 0; }

/* --- Sidebar (indices) --- */
.magic-side{ position:relative; }
.side-title{ font-size:1.25rem; margin:0 0 .2rem; }
.side-caption{ margin:0 0 .8rem; color:#93c5fd }
.hint-block{ margin-bottom:.9rem; }
.hint-btn{
  display:block; width:100%;
  background:#1d4ed8; color:#fff; font-weight:800; border:none;
  padding:.6rem .8rem; border-radius:.8rem; text-align:center;
  box-shadow:0 3px 0 rgba(0,0,0,.2); transition:transform .12s ease, filter .12s ease;
}
.hint-btn:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.hint-btn:active{ transform: translateY(0); filter: brightness(.98); }
.hint-btn[disabled]{ opacity:.55; cursor:not-allowed; }

.target-box{
  margin-top:.5rem; background:#0b1320; border:1px solid rgba(255,255,255,.1);
  padding:.5rem .6rem; border-radius:.6rem; font-weight:800;
}
.side-footer{ position:absolute; bottom:.75rem; left:.75rem; right:.75rem; }

/* --- Feedback --- */
.feedback.good{ color:#22c55e }
.feedback.bad{ color:#ef4444 }

/* --- Canvas FX (confettis) --- */
.fx-canvas{
  position:fixed; inset:0; pointer-events:none; z-index:50; display:none;
}
.fx-canvas.show{ display:block; }