.flight-lab { padding: 24px 0; }
.flight-lab[hidden] { display: none; }
.flight-lab .tool-heading h3 { font-size: 30px; margin: 8px 0 16px; }
.flight-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.flight-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; padding: 18px 0; border-top: 1px solid #50655a66; }
.flight-options label { display: grid; gap: 8px; font-size: 12px; min-width: 0; color: #c3d0c4; }
.flight-options select { width: 100%; min-width: 0; min-height: 44px; border: 1px solid #50655a; border-radius: 4px; background: #1a2e27; padding: 8px; color: #f1f3e9; font: inherit; font-size: 16px; }
.flight-options input { width: 100%; min-width: 0; accent-color: #8fcdb8; }
.flight-world { position: relative; width: 100%; background: #e1eeeb; overflow: hidden; }
#flight-stage { width: 100%; height: 520px; min-height: 360px; outline-offset: -3px; }
#flight-stage canvas { display: block; width: 100%; height: 100%; }
.flight-hud { position: absolute; top: 18px; left: 18px; display: grid; gap: 8px; color: #183f44; font-size: 11px; pointer-events: none; max-width: calc(100% - 90px); }
#flight-count { font-weight: 700; }
.flight-compass { position: absolute; top: 18px; right: 18px; display: grid; justify-items: center; gap: 10px; color: #2e5864; font-size: 9px; pointer-events: none; }
.flight-compass svg { width: 28px; height: 28px; }
.flight-touch { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.flight-lab button { cursor: pointer; }
.flight-touch button,.flight-mission button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; border: 1px solid #507b7966; border-radius: 4px; padding: 10px 14px; background: #1b423de8; color: #eff6f0; }
.flight-touch button { width: 48px; height: 48px; padding: 0; touch-action: none; }
.flight-touch svg,.flight-mission svg { width: 20px; height: 20px; }
.flight-mission { display: flex; gap: 24px; justify-content: space-between; align-items: center; padding: 22px 0; border-bottom: 1px solid #50655a66; }
.flight-mission h4 { font-size: 19px; margin: 8px 0; }
.flight-mission p { font-size: 13px; line-height: 1.7; color: #b5c7b8; max-width: 620px; }
#flight-status { color: #b9ddc5; font-size: 13px; line-height: 1.7; min-height: 26px; }
.flight-log { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin: 24px 0; }
.flight-stamp { display: grid; justify-items: start; gap: 10px; border: 1px solid #50655a66; border-radius: 4px; padding: 14px; color: #b7c5ba; background: #1a2b2466; min-width: 0; text-align: left; }
.flight-stamp svg { width: 24px; height: 24px; color: var(--stamp); }
.flight-stamp strong { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.flight-stamp span { font-size: 10px; line-height: 1.5; }
.flight-stamp.discovered { border-color: var(--stamp); background: #294137; color: #ecf1e5; }
.flight-lab button:focus-visible,.flight-lab select:focus-visible,#flight-stage:focus-visible { outline: 2px solid #e2c478; outline-offset: 3px; }
@media(max-width:760px) { .flight-options { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .flight-speed { grid-column: 1/-1; } #flight-stage { height: 440px; } .flight-mission { display: block; } .flight-mission .flight-actions { margin-top: 16px; } .flight-log { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:380px) { .flight-log { grid-template-columns: repeat(2,minmax(0,1fr)); } .flight-hud { font-size: 10px; left: 12px; } .flight-touch { gap: 6px; } }