body {
  font-family: system-ui;
  text-align: center;
}

#game {
  display:flex;
  justify-content:center;
}

#grid {
  --size: 6;

  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--size), 1fr);
  grid-template-rows: repeat(var(--size), 1fr);   /* ← AJOUT IMPORTANT */

  width: min(90vw, 500px);
  aspect-ratio: 1;
  /* Bordure extérieure grise */
  border: 2px solid #999; 
  touch-action: none;

  background-color:#e3ebf04a;
  background-size:
    calc(100% / var(--size)) calc(100% / var(--size));
  user-select: none; /* Empêche la sélection du texte/chiffres pendant le drag */
  -webkit-user-select: none;	
}


.cell {
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  pointer-events:none;
  font-size: calc(0.42 * (min(90vw, 500px) / var(--size)));
  line-height:1;          /* évite la baseline qui pousse vers le bas */
  height:100%;            /* force la cellule à remplir la track */
  width:100%;
 /* Bordures en pointillés pour chaque cellule */
  border-right: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
  box-sizing: border-box;
  
}


/* On enlève le gris par défaut du rectangle de preview */
.rectangle {
  position: absolute;
  border: 2px solid;
  border-radius: 4px;
  pointer-events: auto;
}

.rectangle.preview {
  pointer-events: none; /* L'aperçu ne doit pas bloquer le mousemove */
  opacity: 0.6;
}
.controls {
  margin-top: 20px;
  display: flex;
  gap: 15px;
  justify-content: center;
}

.btn {
  padding: 12px 25px;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  font-size: 1rem;
  transition: transform 0.1s;
}

.btn:active { transform: scale(0.95); }
.btn-reset { background: #ff4757; } /* Rouge vif */
.btn-back { background: #1e90ff; }  /* Bleu vif */
#grid.win {
  box-shadow: 0 0 20px #2c7;
  transition:.3s;
}
#overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:.3s;
}

#overlay.show {
  opacity:1;
  pointer-events:auto;
}

#overlay-content {
  background:white;
  padding:2rem 3rem;
  border-radius:16px;
  box-shadow:0 10px 40px rgba(0,0,0,.3);
  animation:pop .3s ease;
}

#overlay-content button {
  margin-top:1rem;
  padding:.5rem 1.2rem;
  border:none;
  border-radius:8px;
  background:#2c7;
  color:white;
  font-size:1rem;
  cursor:pointer;
}

@keyframes pop {
  from { transform:scale(.8); opacity:0 }
  to { transform:scale(1); opacity:1 }
}

.rectangle.snap {
  animation:snap .18s cubic-bezier(.2,.9,.3,1.3);
}

@keyframes snap {
  from {
    transform:scale(.85);
    opacity:.5;
  }
  to {
    transform:scale(1);
    opacity:1;
  }
}