.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;
  touch-action: none;
}

.handle-hit { fill: transparent; cursor: pointer; }
.handle-ring { fill: #1e232a; stroke: #566072; stroke-width: 3; }
.handle-ring.held { fill: #2a301f; stroke: #4caf6b; filter: drop-shadow(0 0 8px rgba(76,175,107,.6)); }
.handle-label { fill: #9aa0aa; font-size: 13px; text-anchor: middle; font-weight: bold; }
.handle-label.held { fill: #4caf6b; }

.wheel-hit { fill: transparent; cursor: grab; }
.wheel-hit.locked { cursor: not-allowed; }
.wheel-hit:active { cursor: grabbing; }
.wheel-face { fill: #1a1f26; stroke: #3a4250; stroke-width: 2; }
.wheel-face.unlocked { stroke: #6a5a3a; }
.wheel-tick { stroke: #40444c; stroke-width: 2; }
.wheel-pointer { stroke: #e8e2d0; stroke-width: 3; stroke-linecap: round; transition: stroke 0.2s ease; }
.wheel-pointer.approaching { stroke: #d8a94a; }
.wheel-pointer.in-zone { stroke: #4caf6b; }
.wheel-hub { fill: #24262b; stroke: #575c64; stroke-width: 1.5; }
.wheel-label { fill: #7a8296; font-size: 13px; text-anchor: middle; font-weight: bold; }
.wheel-face.sinking { transition: transform 0.4s ease; }

.lock-icon { fill: #7a3030; font-size: 20px; text-anchor: middle; transition: fill 0.3s ease; }
.lock-icon.open { fill: #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; }