/* Flight display. Shared light controls live in ../lab.css. */
#viewport { height: min(68vh,810px); min-height: 410px; position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #a0bdba; }
#viewport>canvas { display: block; width: 100%; height: 100%; }
.corner { position: absolute; z-index: 2; top: 24px; color: #fff; text-shadow: 0 1px 5px #0008; font-family: ui-monospace,SFMono-Regular,monospace; letter-spacing: .7px; }
.corner span { display: block; font-size: 13px; }
.corner small { display: block; font-size: 10px; margin-top: 5px; color: #ecf4eee0; }
.top-left { left: 24px; }
.top-right { right: 24px; text-align: right; }
.reticle { position: absolute; z-index: 2; left: 50%; top: 50%; width: 32px; height: 24px; transform: translate(-50%,-50%); opacity: .7; pointer-events: none; }
.reticle i,.reticle b { position: absolute; background: #fff; box-shadow: 0 0 3px #0008; }
.reticle i { width: 30px; height: 1px; top: 12px; }
.reticle b { height: 15px; width: 1px; left: 15px; top: 5px; }
.instruments { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; padding: 60px 20px 22px; background: linear-gradient(transparent,#071714b0); color: #fff; pointer-events: none; }
.instruments small { font-size: 9px; letter-spacing: 1.5px; color: #dae7de; }
.instruments strong { display: block; font: 26px/1.5 ui-monospace,SFMono-Regular,monospace; font-weight: 450; }
.instruments em { font-size: 12px; font-style: normal; color: #d0ddd3; }
#message { position: absolute; z-index: 3; top: 45%; left: 50%; transform: translate(-50%,-50%); width: min(85%,410px); background: #fffffff2; padding: 24px; border: 1px solid var(--line); border-radius: 10px; text-align: center; box-shadow: 0 12px 32px #252d4f16; }
#message strong { display: block; font-size: 22px; font-weight: 550; margin-bottom: 9px; }
#message span { color: var(--muted); font-size: 13px; }
.eyes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.eyes canvas { display: block; width: 100%; border-radius: 5px; background: #eef0eb; }
@media(max-width:760px) { #viewport { height: 58vh; min-height: 370px; } .instruments strong { font-size: 21px; } .corner { top: 18px; } .top-left { left: 18px; } .top-right { right: 18px; } }
@media(max-width:470px) { .instruments { padding-left: 8px; padding-right: 8px; } .corner span { font-size: 11px; } }