.fps-stage { --fps-red: #d94c59; }
.fps-stage canvas { touch-action: none; }
.fps-reticle { position: absolute; z-index: 3; top: 50%; left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #244b5c80; pointer-events: none; transition: border-color 0.12s, width 0.12s, height 0.12s; }
.fps-reticle span { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; transform: translate(-50%, -50%); background: #fff; border-radius: 50%; box-shadow: 0 0 0 1px #244b5c80; }
.fps-reticle.is-target { border-color: #e44352; width: 26px; height: 26px; }
.fps-reticle.is-hit { border-color: #efb41e; }
.fps-combo { position: absolute; top: calc(50% - 57px); left: 50%; z-index: 3; transform: translateX(-50%); color: #b3273b; font-size: 18px; font-weight: 800; line-height: 1.3; white-space: nowrap; text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff; pointer-events: none; }
.fps-combo.is-gold { color: #8c5b00; }
.fps-touch-controls { position: absolute; z-index: 4; inset: auto 22px 22px; display: flex; align-items: flex-end; justify-content: space-between; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s; }
.fps-active .fps-touch-controls { opacity: 1; visibility: visible; }
.fps-move-pad { position: relative; width: 132px; height: 132px; flex: 0 0 132px; border: 1px solid #ffffffca; border-radius: 50%; background: #f9fdff80; box-shadow: 0 2px 8px #26475612; touch-action: none; pointer-events: auto; user-select: none; }
.fps-stick { position: absolute; inset: calc(50% - 17px); width: 34px; height: 34px; border: 2px solid #fff; border-radius: 50%; background: #476c8090; pointer-events: none; }
.fps-move-pad .fps-pad-key { position: absolute; width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 9px; border: 0; border-radius: 50%; color: #2a5868; background: transparent; box-shadow: none; touch-action: none; }
.fps-move-pad .fps-pad-key:hover { background: #ffffff85; }
.fps-pad-key span:not(.sr-only) { display: none; }
.fps-pad-key svg { width: 23px; height: 23px; }
.fps-pad-up { top: 0; left: 44px; }
.fps-pad-down { bottom: 0; left: 44px; }
.fps-pad-left { top: 44px; left: 0; }
.fps-pad-right { top: 44px; right: 0; }
.fps-touch-controls .fps-fire-button { width: 66px; min-width: 66px; height: 66px; min-height: 66px; padding: 17px; border: 3px solid #ffffffdf; border-radius: 50%; background: var(--fps-red); color: #fff; box-shadow: 0 3px 12px #65222f35; pointer-events: auto; touch-action: none; }
.fps-fire-button svg { width: 28px; height: 28px; }
.fps-fire-button span:not(.sr-only) { display: none; }
.fps-auto-label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.fps-auto-label input { width: 17px; height: 17px; margin: 0; accent-color: #d94c59; }
@media (hover: hover) and (pointer: fine) {
  .fps-move-pad { opacity: 0.72; width: 112px; height: 112px; flex-basis: 112px; }
  .fps-move-pad .fps-pad-key { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 7px; }
  .fps-pad-up, .fps-pad-down { left: 37px; }
  .fps-pad-left, .fps-pad-right { top: 37px; }
}
@media (max-width: 520px) {
  .fps-touch-controls { inset: auto 14px 18px; }
  .fps-move-pad { width: 120px; height: 120px; flex-basis: 120px; }
  .fps-move-pad .fps-pad-key { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 8px; }
  .fps-pad-up, .fps-pad-down { left: 39px; }
  .fps-pad-left, .fps-pad-right { top: 39px; }
  .fps-touch-controls .fps-fire-button { width: 62px; min-width: 62px; height: 62px; min-height: 62px; padding: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .fps-reticle, .fps-touch-controls { transition: none; }
}