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

.disk-face { fill: #1a1f26; stroke: #3a4250; stroke-width: 3; }
.disk-hit { fill: transparent; cursor: grab; }
.disk-hit:active { cursor: grabbing; }
.spoke { stroke: #262c34; stroke-width: 2; }
.center-slot { fill: #24262b; stroke: #40444c; stroke-width: 2; }

.pocket { fill: #1e232a; stroke: #566072; stroke-width: 2; }
.pocket.good { stroke: #4a5a3a; }
.pocket.bad { stroke: #7a3030; }
.pocket.good.occupied { fill: #26301f; stroke: #4caf6b; filter: drop-shadow(0 0 6px rgba(76,175,107,.7)); }
.pocket-icon { font-size: 13px; text-anchor: middle; pointer-events: none; }
.pocket-icon.good { fill: #6a8a5a; }
.pocket-icon.bad { fill: #a86060; }

.mass { stroke: #24262b; stroke-width: 1.5; }
.mass.fail { fill: #ff6b6b !important; }
.mass.locked { filter: drop-shadow(0 0 6px rgba(76,175,107,.8)); }

.spin-gauge-track { fill: none; stroke: #2b323c; stroke-width: 8; }
.spin-gauge-fill { fill: none; stroke: #d8a94a; stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray 0.1s linear; }
.spin-label { fill: #7a8296; font-size: 11px; text-anchor: middle; }

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