.placement-options {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  margin: 0 18px 5px;
}

.placement-options button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid #6edccd55;
  border-radius: 10px;
  background: #5ed6c314;
  color: #dffcf7;
}

.placement-options button span { color: #75e2d3; font-size: 17px; }
.placement-options button b { font-size: 7px; letter-spacing: .6px; }
.placement-options button small { margin-left: auto; color: #78ddcf; font-size: 6px; }
.placement-options > div { display: flex; flex-direction: column; text-align: right; }
.placement-options > div small { color: #71859f; font-size: 5px; letter-spacing: .5px; }
.placement-options > div strong { color: #ffd176; font-size: 11px; }
.placement-options button.needs-rotation { animation: rotationHelp .65s ease-in-out infinite alternate; }

@keyframes rotationHelp { to { border-color: #ffd176; box-shadow: 0 0 13px #ffd17655; transform: scale(1.03); } }

@media (max-height: 740px) {
  .placement-options { margin-bottom: 2px; }
  .placement-options button { min-height: 25px; }
}

/* Quatre propositions de blocs, lisibles même sur les petits écrans. */
.pieces { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-left:14px; margin-right:14px; }
.pieces .piece:not(.used) { animation:allPiecesGlow 1.35s ease-in-out infinite alternate!important; }
.pieces .piece.beginner-selected { animation:none!important; border-color:#bafff5; background:#65dacb24; box-shadow:0 0 22px #62e7d6aa,inset 0 0 0 1px #dffffa; transform:translateY(-3px); }
.cell.beginner-target { color:#092b32; background:#8af2df!important; box-shadow:0 0 20px #67dfd2,inset 0 0 0 2px #efffff!important; animation:targetLight .55s ease-in-out infinite alternate; }
.cell.expert-target { color:#fff; outline:2px solid #fff; outline-offset:-2px; filter:brightness(1.24); box-shadow:0 0 22px #a98cff,inset 0 0 0 2px #f4edff!important; animation:expertTargetLight .55s ease-in-out infinite alternate; }
@keyframes allPiecesGlow { from { border-color:#ffffff18; box-shadow:0 0 4px transparent } to { border-color:#72dacb66; box-shadow:0 0 12px #53cfc12f } }
@keyframes targetLight { from { filter:brightness(.85); transform:scale(.92) } to { filter:brightness(1.2); transform:scale(1) } }
@keyframes expertTargetLight { from { filter:brightness(.92); transform:scale(.92) } to { filter:brightness(1.28); transform:scale(1) } }
@media (max-width:374px) {
  .pieces { gap:4px; margin-left:6px; margin-right:6px; }
  .mini-block { width:12px; height:12px; }
}