.game-area {
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #12151a;
}

#stage-svg {
  width: 100%;
  aspect-ratio: 350 / 500;
  display: block;
}

.plate-bg { fill: #1b2027; }
.plate-border { fill: none; stroke: #3a4250; stroke-width: 3; }
.wall { fill: #2b323c; stroke: #444d5a; stroke-width: 2; }

.droplet {
  fill: url(#dropletGradient);
  stroke: #cfd6e2;
  stroke-width: 1;
}
.symbol-zone { fill: none; stroke: #566072; stroke-width: 2; }
.symbol-zone.active { stroke: #d8a94a; filter: drop-shadow(0 0 6px rgba(216,169,74,.8)); }
.symbol-icon { fill: #7a8296; font-size: 20px; text-anchor: middle; }
.symbol-icon.active { fill: #d8a94a; }
.hole { fill: #05070a; stroke: #333c48; stroke-width: 2; }
.hole.exit-ready { stroke: #4caf6b; filter: drop-shadow(0 0 8px rgba(76,175,107,.7)); }

.grid-cell { fill: #1e232a; stroke: #333c48; stroke-width: 1; }
.grid-cell.blocked { fill: #14171b; }
.grid-cell.receptacle { fill: #262018; }
.grid-cell.receptacle.validated { fill: #26301f; stroke: #4caf6b; }
.grid-cell.fall { fill: #2a1414; }
.cube-face { font-size: 20px; text-anchor: middle; fill: #24262b; }
.cube-body { fill: #d8a94a; stroke: #8a6a2e; stroke-width: 2; }
.receptacle-label { fill: #9aa0aa; font-size: 16px; text-anchor: middle; }
.floor-label-top { fill: #e8e2d0; font-size: 16px; font-weight: bold; text-anchor: start; }

.floor-icon { fill: #2b323c; stroke: #575c64; stroke-width: 1.5; transition: r 0.15s ease; }
.floor-icon.current { fill: #d8a94a; stroke: #a97f2e; filter: drop-shadow(0 0 4px rgba(216,169,74,0.7)); }

.current-floor-mark { fill: #4caf6b; stroke: #2f6b41; stroke-width: 1; filter: drop-shadow(0 0 4px rgba(76,175,107,0.8)); }

/* Transitions d'etage (labyrinthe, mode A) : monter = zoom avant, descendre
   = dezoom, applique symetriquement a l'etage qui part et a celui qui arrive. */
@keyframes floor-leave-up { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.18); } }
@keyframes floor-enter-up { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }
@keyframes floor-leave-down { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.82); } }
@keyframes floor-enter-down { from { opacity: 0; transform: scale(1.18); } to { opacity: 1; transform: scale(1); } }

.magnet-core { fill: #3a4a66; stroke: #5c7aa8; stroke-width: 2; }
.magnet-core.active { fill: #6fa0e0; filter: drop-shadow(0 0 10px rgba(111,160,224,.9)); }
.magnet-label { fill: #cfd6e2; font-size: 13px; text-anchor: middle; }
.contact-zone { fill: none; stroke: #566072; stroke-width: 2; }
.contact-zone.active { stroke: #d8a94a; filter: drop-shadow(0 0 6px rgba(216,169,74,.8)); }

.digit-reveal {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.75);
  font-size: 90px;
  font-weight: bold;
  color: #f2d9a0;
}
.digit-reveal.visible { display: flex; }

#pad-2d {
  width: 140px;
  height: 140px;
  background: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 8px;
  touch-action: none;
  cursor: grab;
  display: block;
  margin: 0 auto;
}
.pad-axis { stroke: #ddd; stroke-width: 1; }
.pad-dot { fill: #222; cursor: grab; }