/* Crowdpit touch controls (public/touch.js). Only shown on coarse-pointer devices while the local player is in the hot seat. */
.cp-touch { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.cp-stick-base { position: fixed; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; border: 2px solid rgba(53,224,255,0.45);
  background: rgba(20,26,38,0.45); box-shadow: 0 0 24px rgba(53,224,255,0.2); display: none; }
.cp-stick-base.cp-show { display: block; }
.cp-stick-knob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 35%, #8ff1ff, #22cdf0 70%); box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
.cp-buttons { position: fixed; display: none; align-items: flex-end; justify-content: flex-end; gap: 12px; padding: 0 16px 16px 0; box-sizing: border-box; }
.cp-touch-on .cp-buttons { display: flex; }
.cp-btn { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  min-width: 78px; height: 78px; padding: 0 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.18); background: rgba(20,26,38,0.72); color: #e6ecf5;
  font: 700 13px/1 "Rajdhani", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.cp-btn-wide { border-radius: 39px; min-width: 120px; }
.cp-btn.cp-held { background: rgba(53,224,255,0.35); border-color: rgba(53,224,255,0.8); color: #04121a; }
.cp-btn.cp-danger { border-color: rgba(255,77,94,0.5); }
.cp-btn.cp-danger.cp-held { background: rgba(255,77,94,0.4); border-color: #ff4d5e; color: #fff; }
@media (pointer: coarse) {
  canvas#c { touch-action: none; -webkit-user-select: none; user-select: none; }
}