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

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

.link-line { stroke: #3a4250; stroke-width: 4; }

.axle-socket { fill: #14161b; stroke: #3a4250; stroke-width: 2; stroke-dasharray: 3 3; }
.crank-pinion { fill: #6a6f78; stroke: #40444c; stroke-width: 2; }
.crank-handle { fill: #d8a94a; stroke: #a97f2e; stroke-width: 2; cursor: grab; }
.crank-handle:active { cursor: grabbing; }
.crank-hit { fill: transparent; cursor: grab; }

.gear-body { stroke: #40444c; stroke-width: 2; }
.gear-body.g0 { fill: #ff5c5c; }
.gear-body.g1 { fill: #4da3ff; }
.gear-body.g2 { fill: #4fd17a; }
.gear-body.g3 { fill: #ffb84d; }
.gear-body.g4 { fill: #c185f7; }
.gear-body.g5 { fill: #7fe0e0; }
.gear-body.immobile { opacity: 0.55; }
.gear-hub { fill: #24262b; stroke: #575c64; stroke-width: 1.5; }

.dial-face { fill: #1b1e24; stroke: #3a4250; stroke-width: 2; }
.dial-target-zone { fill: none; stroke: #d8a94a; stroke-width: 5; opacity: 0.5; }
.dial-target-zone.hit { stroke: #4caf6b; opacity: 0.9; }
.dial-needle { stroke: #e8e2d0; stroke-width: 2; }
.dial-needle.immobile { stroke: #7a7f88; }

.gear-tray {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 320px;
}
.tray-gear {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  border: 2px solid #40444c;
  position: relative;
}
.tray-gear.used { opacity: 0.25; pointer-events: none; }
.tray-gear:active { cursor: grabbing; }