.game-area {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  background: #14161b;
}

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

.rail-line { stroke: #9aa0aa; stroke-width: 6; stroke-linecap: round; }
.rail-deadend-cap { stroke: #9aa0aa; stroke-width: 5; stroke-linecap: round; }
.rail-deco { stroke: #3a3e46; stroke-width: 3; stroke-linecap: round; opacity: 0.7; }
.rail-deco-dot { fill: #3a3e46; }

.switch-hit { fill: transparent; cursor: pointer; touch-action: none; }
.switch-trunk { stroke: #d8a94a; stroke-width: 6; stroke-linecap: round; }
.switch-branch-active { stroke: #d8a94a; stroke-width: 6; stroke-linecap: round; }
.switch-branch-inactive { stroke: #575c64; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 4; opacity: 0.7; }
.switch-label { fill: #24262b; font-size: 12px; font-weight: bold; text-anchor: middle; pointer-events: none; }
.switch-hub { fill: #d8a94a; stroke: #a97f2e; stroke-width: 2; }

.start-marker { fill: #4da3ff; stroke: #2a2d33; stroke-width: 1.5; }
.exit-marker { fill: none; stroke: #4caf6b; stroke-width: 3; }
.exit-marker-fill { fill: rgba(76,175,107,0.2); }

.ball-wrapper { transition: transform 0.16s linear; }
.ball { fill: #e8e2d0; stroke: #40444c; stroke-width: 1.5; }
.ball.fail { fill: #c0392b; }
.ball.win { fill: #4caf6b; }

.debug-path-dot { fill: #d8a94a; opacity: 0.5; }
.reward-digit { fill: #4caf6b; font-size: 26px; font-weight: bold; }