/* FPV Drone Racer 3D: game-specific overlay pieces (shared 3D styles live in /simulation-games/_shared/sim3d.css) */
#game-root .sim-controls-help { margin-top: 14px; }
.fpv-panel { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: rgba(8, 16, 28, .72); color: #fff; border-radius: 12px; padding: 5px 14px; pointer-events: none; border: 1px solid rgba(34, 211, 238, .35); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fpv-pos { font: 900 24px/1 system-ui, sans-serif; color: #22d3ee; } .fpv-lap, .fpv-time, .fpv-spd { font: 800 14px system-ui, sans-serif; } .fpv-time { color: #fde047; } .fpv-spd { color: #a5f3fc; }
.fpv-count { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(.6); font: 900 96px/1 system-ui, sans-serif; color: #22d3ee; text-shadow: 0 4px 18px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.fpv-count.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fpv-osd { position: absolute; left: 50%; top: 50%; width: 120px; height: 2px; margin: -1px 0 0 -60px; pointer-events: none; }
.fpv-osd i { display: block; width: 100%; height: 2px; background: linear-gradient(90deg, transparent 0 30%, rgba(255, 255, 255, .7) 30% 42%, transparent 42% 58%, rgba(255, 255, 255, .7) 58% 70%, transparent 70%); }
.fpv-sticks { position: absolute; left: 0; right: 0; bottom: 10px; display: none; justify-content: space-between; padding: 0 12px; pointer-events: none; }
.fpv-sticks.is-on { display: flex; }
.fpv-stick { position: relative; width: 120px; height: 120px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .45); background: rgba(15, 23, 42, .3); pointer-events: auto; touch-action: none; }
.fpv-stick i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(255, 255, 255, .75); }
.fpv-stick span { position: absolute; left: 0; right: 0; bottom: -18px; text-align: center; font: 700 10px system-ui, sans-serif; color: rgba(255, 255, 255, .8); }
.fpv-stick--r { border-color: rgba(34, 211, 238, .6); }
.fpv-list { margin-top: 14px; } .fpv-list h3 { margin: 10px 0 6px; }
.fpv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.fpv-grid button, .fpv-cam button { text-align: left; border-radius: 12px; padding: 8px 10px; border: 2px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .06); color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.fpv-grid button b { font-size: 13.5px; } .fpv-grid button small { font-size: 12px; opacity: .8; } .fpv-grid button em { font-style: normal; color: #fde047; font-size: 13px; }
.fpv-grid button[aria-pressed="true"], .fpv-cam button[aria-pressed="true"] { border-color: #22d3ee; background: rgba(34, 211, 238, .14); }
.fpv-grid button:disabled { opacity: .45; cursor: not-allowed; }
.fpv-cam { display: flex; gap: 8px; flex-wrap: wrap; }
@container (max-width: 620px) { .fpv-panel { top: 52px; gap: 8px; padding: 4px 10px; } .fpv-pos { font-size: 18px; } .fpv-lap, .fpv-time, .fpv-spd { font-size: 12px; } .fpv-count { font-size: 64px; } .fpv-stick { width: 100px; height: 100px; } }
