/* TweakFC — Flight Apprentice: hub, cue card, animated radio, results, certificate (Flight Deck brand). */
.fa-launch { display: block; margin-top: 8px; background: linear-gradient(90deg, rgba(var(--tfc-hud-rgb), .16), rgba(var(--tfc-hud-rgb), .03)); border: 1px solid rgba(var(--tfc-hud-rgb), .5); color: var(--tfc-accent); border-radius: 0; padding: 7px 12px; font: 700 13px var(--display); letter-spacing: .2em; cursor: pointer; text-align: left; }
.fa-launch small { font: 400 11px var(--sans); letter-spacing: 0; color: var(--muted); margin-left: 8px; }
.fa-launch:hover { background: rgba(var(--tfc-hud-rgb), .2); }
.fa-kicker { font: 700 11px var(--tfc-font-label); letter-spacing: .22em; color: var(--tfc-accent); text-transform: uppercase; }

/* ---- hub ---- */
.fa-hub { position: fixed; inset: 0; z-index: 45; background: rgba(var(--tfc-night-0-rgb), .82); display: flex; align-items: center; justify-content: center; padding: 16px; }
.fa-hub.hidden { display: none; }
.fa-win { width: min(1180px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--tfc-shell) var(--tfc-dots); color: var(--tfc-ink); border: 1px solid rgba(var(--tfc-hud-rgb), .35); border-radius: 6px; font: 14px var(--tfc-font-body); box-shadow: 0 24px 60px rgba(var(--tfc-shadow-rgb), .6); }
.fa-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 16px; padding: 14px 20px; background: var(--tfc-shell-light); border-bottom: 1px solid rgba(var(--tfc-hud-rgb), .25); }
.fa-head h2 { margin: 2px 0 0; font: 700 30px var(--tfc-font-display); letter-spacing: .06em; text-transform: uppercase; }
.fa-rank { margin-left: auto; text-align: right; }
.fa-rank b { display: block; font: 700 20px var(--tfc-font-display); color: var(--tfc-warn); letter-spacing: .08em; text-transform: uppercase; }
.fa-rank small { color: var(--tfc-muted); font: 12px var(--tfc-font-data); }
.fa-x { background: none; border: 0; color: var(--tfc-muted); font-size: 28px; cursor: pointer; }
.fa-gates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 20px 0; }
.fa-gate { display: flex; gap: 12px; padding: 12px 14px; background: var(--tfc-shell-hi); border: 1px solid rgba(var(--tfc-amber-rgb), .5); border-radius: 4px; }
.fa-gate.ok { border-color: rgba(var(--tfc-hud-rgb), .45); }
.fa-gate p { margin: 4px 0 8px; color: var(--tfc-muted); }
.fa-gate b { font: 700 16px var(--tfc-font-display); letter-spacing: .1em; text-transform: uppercase; }
.fa-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--tfc-font-data); background: var(--tfc-act-soft); color: var(--tfc-warn); }
.fa-gate.ok .fa-n { background: rgba(var(--tfc-hud-rgb), .15); color: var(--tfc-accent); }
.fa-win button { font: 600 13px var(--tfc-font-body); background: var(--tfc-key); color: var(--tfc-night-ink-hi); border: 1px solid rgba(var(--tfc-white-rgb), .12); border-radius: 3px; padding: 7px 12px; cursor: pointer; }
.fa-win button.primary, .fa-result button.primary, .fa-certwin .primary { background: var(--tfc-orange); color: var(--tfc-cta-ink); border-color: var(--tfc-orange); font-weight: 700; }
.fa-body { padding: 4px 20px 20px; }
.fa-body.locked .fa-lesson, .fa-body.locked .fa-drone { pointer-events: none; border-style: dashed; color: var(--tfc-muted); background-image: repeating-linear-gradient(135deg, rgba(var(--tfc-tint), .06) 0 6px, transparent 6px 12px); }
.fa-body h3 { margin: 18px 0 8px; font: 700 17px var(--tfc-font-display); letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fa-body h3 small { font: 400 12.5px var(--tfc-font-body); letter-spacing: 0; text-transform: none; color: var(--tfc-muted); }
.fa-drones { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.fa-win .fa-drone { flex: none; width: 150px; text-align: left; position: relative; padding: 6px; background: var(--tfc-shell-hi); color: var(--tfc-ink); }
.fa-win .fa-drone.on { outline: 2px solid var(--tfc-accent); }
.fa-drone img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--tfc-glass); border-radius: 2px; }
.fa-drone b { display: block; font-size: 12.5px; margin-top: 4px; line-height: 1.2; }
.fa-drone small { color: var(--tfc-muted); font: 11px var(--tfc-font-data); }
.fa-badge { position: absolute; left: 10px; top: 10px; font: 700 10px var(--tfc-font-label); letter-spacing: .08em; padding: 2px 6px; border-radius: 2px; font-style: normal; text-transform: uppercase; }
.fa-badge.good { background: var(--tfc-sel-bg); color: var(--tfc-sel-ink); }
.fa-badge.beta { left: auto; right: 10px; background: var(--tfc-orange); color: var(--tfc-cta-ink); }
.fa-maprow { display: flex; gap: 8px; flex-wrap: wrap; }
.fa-win .fa-maprow button.on { outline: 2px solid var(--tfc-accent); }
.fa-opts { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; padding: 10px 12px; background: var(--tfc-shell-hi); border-radius: 4px; }
.fa-opts small { color: var(--tfc-muted); }
.fa-lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.fa-win .fa-lesson { position: relative; text-align: left; padding: 10px 10px 8px 42px; min-height: 76px; background: var(--tfc-shell-hi); color: var(--tfc-ink); }
.fa-win .fa-lesson.done { border-color: rgba(var(--tfc-hud-rgb), .45); }
.fa-win .fa-lesson.lock { cursor: not-allowed; border-style: dashed; background-image: repeating-linear-gradient(135deg, rgba(var(--tfc-tint), .06) 0 6px, transparent 6px 12px); }
.fa-ln { position: absolute; left: 10px; top: 10px; font: 700 18px var(--tfc-font-data); color: var(--tfc-accent); }
.fa-lesson b { display: block; font-size: 13.5px; }
.fa-lesson small { display: block; color: var(--tfc-muted); font: 11px var(--tfc-font-data); }
.fa-stars { display: block; color: var(--tfc-warn); letter-spacing: .1em; margin-top: 3px; }
.fa-win .fa-cert { margin-left: auto; background: transparent; border-color: var(--tfc-warn); color: var(--tfc-warn); font-size: 12px; }

/* ---- in flight: cue card (top left), animated radio (bottom left) ---- */
.fa-hud.hidden { display: none; }
.fa-card { position: fixed; left: 16px; top: 16px; z-index: 22; width: min(400px, calc(100vw - 32px)); background: rgba(var(--tfc-night-0-rgb), .86); border: 1px solid rgba(var(--tfc-hud-rgb), .4); border-left: 4px solid var(--tfc-orange); border-radius: 4px; padding: 12px 14px 10px; color: var(--tfc-night-ink); font: 15px 'TFC Body', sans-serif; backdrop-filter: blur(4px); }
.fa-top { display: flex; justify-content: space-between; gap: 10px; }
.fa-k { font: 600 11px 'TFC Data', monospace; color: var(--tfc-night-muted); white-space: nowrap; }
.fa-card .fa-kicker { color: var(--tfc-hud); }
.fa-say { margin: 8px 0 10px; font-size: 16px; line-height: 1.4; min-height: 44px; }
.fa-bar { height: 6px; background: rgba(var(--tfc-white-rgb), .08); border-radius: 3px; overflow: hidden; }
.fa-bar i { display: block; height: 100%; width: 0; background: var(--tfc-amber); transition: width .15s; }
.fa-meta { margin-top: 6px; font: 12px 'TFC Data', monospace; color: var(--tfc-night-muted); }
.fa-cbtns { display: flex; gap: 6px; margin-top: 8px; }
.fa-cbtns button { font: 600 11.5px 'TFC Body', sans-serif; background: rgba(var(--tfc-white-rgb), .06); color: var(--tfc-night-ink); border: 1px solid rgba(var(--tfc-white-rgb), .14); border-radius: 3px; padding: 4px 9px; cursor: pointer; }
.fa-radio { position: fixed; left: 16px; bottom: 16px; z-index: 22; width: min(390px, 36vw); pointer-events: none; }
.fa-radio canvas { width: 100%; display: block; }
body:has(#jb-bar:not(.hidden)) .fa-radio { bottom: 92px; } /* sits above the Jukebox bar */
.fa-rlabel { text-align: center; font: 600 12px 'TFC Data', monospace; color: var(--tfc-night-ink); text-shadow: 0 1px 3px var(--tfc-black); margin-top: -4px; }
.fa-flash { position: fixed; left: 50%; top: 32%; transform: translateX(-50%); z-index: 22; font: 700 30px 'TFC Display', sans-serif; letter-spacing: .14em; color: var(--tfc-amber); text-shadow: 0 2px 6px var(--tfc-black); opacity: 0; transition: opacity .25s; pointer-events: none; }
.fa-flash.on { opacity: 1; }

/* ---- result + certificate ---- */
.fa-result { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 44; width: min(460px, calc(100vw - 32px)); background: rgba(var(--tfc-night-0-rgb), .97); border: 1px solid rgba(var(--tfc-hud-rgb), .45); border-radius: 6px; padding: 20px 22px; color: var(--tfc-night-ink); font: 14px 'TFC Body', sans-serif; text-align: center; box-shadow: 0 20px 60px rgba(var(--tfc-shadow-rgb), .6); }
.fa-result h2 { margin: 4px 0 6px; font: 700 28px 'TFC Display', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.fa-bigstars { font-size: 46px; color: var(--tfc-amber); letter-spacing: .12em; }
.fa-why { list-style: none; padding: 0; margin: 10px 0; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.fa-why li { padding: 3px 10px; border: 1px solid rgba(var(--tfc-white-rgb), .14); border-radius: 999px; color: var(--tfc-night-muted); }
.fa-why li.ok { color: var(--tfc-hud); border-color: rgba(var(--tfc-hud-rgb), .4); }
.fa-new { color: var(--tfc-amber); }
.fa-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.fa-result button, .fa-certwin button, .fa-certwin a { font: 600 13px 'TFC Body', sans-serif; background: var(--tfc-night-key); color: var(--tfc-night-ink-hi); border: 1px solid rgba(var(--tfc-white-rgb), .14); border-radius: 3px; padding: 8px 14px; cursor: pointer; text-decoration: none; }
.fa-result button.primary, .fa-certwin a.primary { background: var(--tfc-amber); color: var(--tfc-amber-ink); border-color: var(--tfc-amber); }
.fa-certbox { position: fixed; inset: 0; z-index: 50; background: rgba(var(--tfc-night-0-rgb), .85); display: grid; place-items: center; padding: 16px; }
.fa-certwin { width: min(900px, 100%); }
.fa-certwin img { width: 100%; display: block; border-radius: 4px; }
.fa-instr { position: fixed; left: 16px; top: 16px; z-index: 22; width: min(380px, calc(100vw - 32px)); background: rgba(var(--tfc-night-0-rgb), .88); border: 1px solid rgba(var(--tfc-amber-rgb), .5); border-radius: 4px; padding: 10px 12px; color: var(--tfc-night-ink); font: 13px 'TFC Body', sans-serif; }
.fa-instr b { display: block; font-size: 15px; margin-top: 3px; }
.fa-instr small { color: var(--tfc-night-muted); font: 11.5px 'TFC Data', monospace; }
.fa-instr p { margin: 6px 0 0; }
/* the plain-English radio setup (Flight Apprentice) */
.rc-easy { margin: 0 0 12px; padding: 10px 12px; border-left: 4px solid var(--tfc-amber); background: rgba(var(--tfc-amber-rgb), .1); font-size: 15px; line-height: 1.4; }
@media (max-width: 800px) { .fa-gates { grid-template-columns: 1fr; } .fa-radio { width: 46vw; } }