.game-area {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  background: linear-gradient(#2a2d33, #1c1e22);
}

.steps-row {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 260px;
}
.step-plate {
  flex: 1;
  height: 34px;
  border-radius: 6px;
  background: #3a3e46;
  border: 2px solid #55595f;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7a7f88;
  font-weight: bold;
  font-size: 14px;
}
.step-plate.active { border-color: #d8a94a; box-shadow: 0 0 10px 2px rgba(216,169,74,0.5); }
.step-plate.open { background: #4a4030; border-color: #d8a94a; color: #f2d9a0; }
.step-plate.locked { opacity: 0.5; }

#lock-svg {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 340 / 430;
  touch-action: none;
}

.wheel-ring { fill: #2c2f35; stroke: #575c64; stroke-width: 4; }
.wheel-hub { fill: #24262b; stroke: #575c64; stroke-width: 2; }
.wheel-hit { fill: transparent; cursor: grab; }
.wheel-hit:active { cursor: grabbing; }

.wheel-point {
  fill: #9aa0aa;
  stroke: #2a2d33;
  stroke-width: 1.5;
  transition: fill 0.12s ease;
}
.wheel-point.approaching { animation: point-zoom 0.9s ease-in-out infinite; }
@keyframes point-zoom { 0%,100% { r: 8; } 50% { r: 11.5; } }
.wheel-point.validating { animation: point-pulse 0.5s ease-in-out infinite; }
@keyframes point-pulse { 0%,100% { r: 8; } 50% { r: 10; } }

.footprint { fill: rgba(216,169,74,0.18); stroke: #d8a94a; stroke-width: 1.5; }
.footprint-check { fill: #d8a94a; font-size: 11px; text-anchor: middle; }

.debug-target-mark { stroke: #4da3ff; stroke-width: 1.5; opacity: 0.7; }
.debug-target-label { fill: #4da3ff; font-size: 10px; text-anchor: middle; }

.led { stroke: #1a1c20; stroke-width: 2; }
.led.off { fill: #7a2020; }
.led.on { fill: #3fbf5f; filter: drop-shadow(0 0 5px rgba(63,191,95,0.8)); }

.danger-track { fill: #14161b; stroke: #3a3e46; stroke-width: 1; rx: 6; }
.danger-fill { fill: url(#danger-gradient); }
.danger-label { fill: #7a7f88; font-size: 9px; letter-spacing: 0.05em; }

.gauge-rail { fill: #14161b; stroke: #3a3e46; stroke-width: 2; }
.gauge-hit { fill: transparent; cursor: grab; }
.gauge-hit:active { cursor: grabbing; }
.gauge-target { fill: rgba(216,169,74,0.35); stroke: #d8a94a; stroke-width: 1; }
.gauge-cursor { fill: #cfd6e2; stroke: #2a2d33; stroke-width: 1.5; }
.gauge-cursor.safe { fill: #3fbf5f; }
.gauge-cursor.warn { fill: #d8a94a; }
.gauge-cursor.danger { fill: #c0392b; }
.gauge-debug-mark { stroke: #4da3ff; stroke-width: 1; opacity: 0.6; }
.gauge-curve-path { fill: none; stroke: #4da3ff; stroke-width: 1; opacity: 0.5; }

.lock-svg-shake { animation: lock-shake 0.4s ease; }
@keyframes lock-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

.stage-opening { animation: stage-flash 1.1s ease; }
@keyframes stage-flash {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.6); }
  100% { filter: brightness(1); }
}

.digits-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
}
.digit-slot {
  width: 34px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}