/* Freecam: the 3D view of the bot's world */
.fc-tab { padding: 14px; }
.fc-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 74vh; min-height: 260px; background: #0b0a14; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-2, #2a2745); }
.fc-wrap:fullscreen { max-height: none; border-radius: 0; border: 0; }
.fc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; image-rendering: pixelated; touch-action: none; cursor: grab; }
.fc-canvas:active { cursor: grabbing; }
.fc-hud { position: absolute; inset: 0; pointer-events: none; font: .78rem/1.4 var(--mono, ui-monospace, monospace); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.fc-hud > * { pointer-events: auto; }
.fc-bar { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; pointer-events: none; }
.fc-bar > * { pointer-events: auto; }
.fc-seg { display: inline-flex; background: rgba(13, 12, 25, .72); border: 1px solid rgba(255, 255, 255, .16); border-radius: 9px; overflow: hidden; backdrop-filter: blur(6px); }
.fc-seg button { background: none; border: 0; color: #cfcdea; padding: 7px 12px; font: inherit; cursor: pointer; }
.fc-seg button.on { background: rgba(132, 96, 240, .55); color: #fff; }
.fc-sel { background: rgba(13, 12, 25, .72); border: 1px solid rgba(255, 255, 255, .16); border-radius: 9px; padding: 4px 8px; display: inline-flex; gap: 6px; align-items: center; }
.fc-sel select { background: transparent; color: #fff; border: 0; font: inherit; }
.fc-sel option { color: #000; }
.fc-btn { margin-left: auto; background: rgba(13, 12, 25, .72); border: 1px solid rgba(255, 255, 255, .16); color: #fff; border-radius: 9px; padding: 5px 10px; cursor: pointer; font-size: 1rem; }
.fc-info { position: absolute; left: 10px; bottom: 10px; background: rgba(13, 12, 25, .6); padding: 4px 8px; border-radius: 6px; pointer-events: none; }
.fc-vitals { position: absolute; right: 10px; bottom: 10px; background: rgba(13, 12, 25, .6); padding: 4px 8px; border-radius: 6px; pointer-events: none; }
.fc-help { position: absolute; left: 10px; bottom: 40px; color: rgba(255, 255, 255, .85); pointer-events: none; }
.fc-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; background: rgba(11, 10, 20, .6); font-size: .95rem; pointer-events: none; }
.fc-msg[hidden] { display: none; }
.fc-pad { position: absolute; right: 12px; bottom: 44px; display: grid; grid-template-columns: repeat(3, 44px); grid-auto-rows: 44px; gap: 6px; }
.fc-pad[hidden] { display: none; }
.fc-pad button { background: rgba(13, 12, 25, .7); border: 1px solid rgba(255, 255, 255, .2); color: #fff; border-radius: 10px; font-size: 1.1rem; touch-action: none; }
.fc-pad button[data-k="KeyW"] { grid-column: 2; grid-row: 1; } .fc-pad button[data-k="KeyA"] { grid-column: 1; grid-row: 2; } .fc-pad button[data-k="KeyS"] { grid-column: 2; grid-row: 2; } .fc-pad button[data-k="KeyD"] { grid-column: 3; grid-row: 2; }
.fc-pad button[data-k="Space"] { grid-column: 3; grid-row: 1; } .fc-pad button[data-k="ShiftLeft"] { grid-column: 1; grid-row: 1; }
.fc-center[hidden] { display: none; }
.fc-center { margin-left: 0; font-size: .78rem; }
.fc-bar .fc-btn[data-full] { margin-left: auto; }
.fc-hud.captured .fc-help { color: #9be7ff; }
.fc-canvas { cursor: crosshair; }
.fc-note { font-size: .8rem; margin: 10px 2px 0; }
@media (max-width: 560px) { .fc-wrap { aspect-ratio: 4 / 5; max-height: 70vh; } .fc-help { display: none; } .fc-tab { padding: 8px; } }