.game-area {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

#zone-svg {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 340 / 460;
  background: #14161b;
  border-radius: 8px;
  touch-action: none;
}

/* Legende sous la zone : ordre de lecture des couleurs = ordre des chiffres
   du code. */
.code-order-legend {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}
/* .bar-color-N ne definit que `fill` (utile pour les <rect> SVG des barres),
   sans effet sur un <span> HTML — la legende a besoin de background-color. */
.legend-dot.bar-color-0 { background-color: #ff5c5c; }
.legend-dot.bar-color-1 { background-color: #4da3ff; }
.legend-dot.bar-color-2 { background-color: #4fd17a; }
.legend-dot.bar-color-3 { background-color: #ffb84d; }

.frame-border { fill: none; stroke: #3a4250; stroke-width: 2; stroke-dasharray: 4 3; }

.layer-panel {
  cursor: grab;
}
.layer-panel:active { cursor: grabbing; }
/* Fond neutre : la couleur ne represente plus un calque physique mais un
   groupe/chiffre, ses barres sont reparties sur PLUSIEURS calques (voir
   main.js) — un fond colore par calque induirait le joueur en erreur. */
.layer-panel .layer-bg { opacity: 0.22; fill: #aab2c2; }
.layer-panel .bar { opacity: 0.85; }

.bar-color-0 { fill: #ff5c5c; }
.bar-color-1 { fill: #4da3ff; }
.bar-color-2 { fill: #4fd17a; }
.bar-color-3 { fill: #ffb84d; }

.target-ghost { fill: none; stroke: #ffffff; stroke-width: 1; stroke-dasharray: 2 2; opacity: 0; pointer-events: none; }
.target-ghost.visible { opacity: 0.5; }