#course-hud { position:fixed; top:var(--fpv-chat-top,64px); right:24px; z-index:14; width:244px; padding:11px 12px; background:#080c10c9; color:#edf3f5; border:1px solid transparent; font:11px ui-monospace,monospace; }
.course-heading { text-transform:uppercase; letter-spacing:.12em; font-size:9px; color:#bbc9cf; }
.course-readout { display:flex; align-items:baseline; justify-content:space-between; margin:8px 0; font-variant-numeric:tabular-nums; }
.course-readout b { font-size:22px; font-weight:500; letter-spacing:-.04em; }
.course-readout span { color:#b8c7cf; font-size:10px; }
.course-next { min-height:28px; color:#ffcf8c; line-height:1.5; }
.course-best { font-size:9px; color:#a9b9c2; letter-spacing:.05em; margin:5px 0 9px; }
#course-hud button { position:relative; padding:5px 8px; font:9px ui-monospace,monospace; background:#10171dcc; border:1px solid transparent; color:#dfe9ee; }
#course-hud::before,#course-hud button::before { content:""; position:absolute; inset:-1px; border:1px solid #c5d2d780; pointer-events:none;
  mask:linear-gradient(#000 0 0) top left/6px 6px no-repeat,linear-gradient(#000 0 0) top right/6px 6px no-repeat,linear-gradient(#000 0 0) bottom left/6px 6px no-repeat,linear-gradient(#000 0 0) bottom right/6px 6px no-repeat; }
#course-bearing { position:fixed; z-index:6; pointer-events:none; transform:translate(-50%,-50%); color:#ffd498; font:11px ui-monospace,monospace; text-shadow:0 1px 3px #000,0 0 3px #000;
  top:clamp(calc(var(--fpv-chat-top,64px) + 12px),var(--course-bearing-y,50vh),calc(100dvh - var(--fpv-chat-bottom,98px) - 12px)); }
body.ui-hidden #course-hud,body.ui-hidden #course-bearing { display:none; }
@media(max-width:760px) { #course-hud { right:10px; width:192px; padding:8px; } .course-heading { font-size:8px; } .course-readout { margin:5px 0; } .course-readout b { font-size:18px; } .course-next { font-size:10px; min-height:25px; } }