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

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

.ring-track { fill: none; stroke: #2b323c; stroke-width: 10; }
.ring-zone { fill: none; stroke-width: 12; stroke-linecap: round; opacity: 0.55; }
.ring-zone.r1 { stroke: #6a5a3a; }
.ring-zone.r2 { stroke: #4a5a6a; }
.ring-zone.r3 { stroke: #5a4a6a; }
.ring-zone.locked { opacity: 1; filter: drop-shadow(0 0 6px currentColor); }

.ring-indicator { transition: none; }
.ring-indicator circle { stroke: #40444c; stroke-width: 1.5; }
.ring-indicator.state-far circle { fill: #7a8296; }
.ring-indicator.state-near circle { fill: #d8a94a; }
.ring-indicator.state-in circle { fill: #4caf6b; }
.ring-indicator.state-locked circle { fill: #4caf6b; filter: drop-shadow(0 0 8px rgba(76,175,107,.9)); }
.ring-indicator.jitter { animation: ring-jitter 0.12s linear infinite; }
@keyframes ring-jitter {
  0% { transform: translate(0,0); }
  25% { transform: translate(0.8px,-0.8px); }
  50% { transform: translate(-0.8px,0.8px); }
  75% { transform: translate(0.8px,0.8px); }
  100% { transform: translate(0,0); }
}

.ring-label { fill: #7a8296; font-size: 11px; text-anchor: middle; }

.led { transition: fill 0.3s ease; }
.led.off { fill: #4a1f1f; stroke: #7a3030; stroke-width: 1.5; }
.led.on { fill: #4caf6b; stroke: #2f6b41; stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(76,175,107,.9)); }

.core-circle { fill: #1b1e24; stroke: #3a4250; stroke-width: 2; transition: r 0.4s ease, fill 0.4s ease; }
.core-circle.opened { fill: #26301f; stroke: #4caf6b; }

.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; }