/* 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(60, 255, 139, .16), rgba(60, 255, 139, .03)); border: 1px solid rgba(60, 255, 139, .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(60, 255, 139, .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(4, 7, 10, .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(60, 255, 139, .35); border-radius: 6px; font: 14px var(--tfc-font-body); box-shadow: 0 24px 60px rgba(0, 0, 0, .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(60, 255, 139, .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-orange); 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(255, 176, 32, .5); border-radius: 4px; }
.fa-gate.ok { border-color: rgba(60, 255, 139, .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-orange); }
.fa-gate.ok .fa-n { background: rgba(60, 255, 139, .15); color: var(--tfc-accent); }
.fa-win button { font: 600 13px var(--tfc-font-body); background: var(--tfc-key); color: #E6EDF2; border: 1px solid rgba(255, 255, 255, .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 { opacity: .45; pointer-events: none; }
.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: #05090C; 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-accent); color: #04110A; }
.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(60, 255, 139, .45); }
.fa-win .fa-lesson.lock { opacity: .5; cursor: not-allowed; }
.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-orange); letter-spacing: .1em; margin-top: 3px; }
.fa-win .fa-cert { margin-left: auto; background: transparent; border-color: var(--tfc-orange); color: var(--tfc-orange); 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(9, 13, 17, .86); border: 1px solid rgba(60, 255, 139, .4); border-left: 4px solid var(--tfc-orange, #FFB020); border-radius: 4px; padding: 12px 14px 10px; color: #D3DCE4; 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: #8E9DAB; white-space: nowrap; }
.fa-card .fa-kicker { color: #3CFF8B; }
.fa-say { margin: 8px 0 10px; font-size: 16px; line-height: 1.4; min-height: 44px; }
.fa-bar { height: 6px; background: rgba(255, 255, 255, .08); border-radius: 3px; overflow: hidden; }
.fa-bar i { display: block; height: 100%; width: 0; background: #FFB020; transition: width .15s; }
.fa-meta { margin-top: 6px; font: 12px 'TFC Data', monospace; color: #8E9DAB; }
.fa-cbtns { display: flex; gap: 6px; margin-top: 8px; }
.fa-cbtns button { font: 600 11.5px 'TFC Body', sans-serif; background: rgba(255, 255, 255, .06); color: #D3DCE4; border: 1px solid rgba(255, 255, 255, .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: #D3DCE4; text-shadow: 0 1px 3px #000; 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: #FFB020; text-shadow: 0 2px 6px #000; 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(9, 13, 17, .97); border: 1px solid rgba(60, 255, 139, .45); border-radius: 6px; padding: 20px 22px; color: #D3DCE4; font: 14px 'TFC Body', sans-serif; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .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: #FFB020; 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(255, 255, 255, .14); border-radius: 999px; color: #8E9DAB; }
.fa-why li.ok { color: #3CFF8B; border-color: rgba(60, 255, 139, .4); }
.fa-new { color: #FFB020; }
.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: #1C2630; color: #E6EDF2; border: 1px solid rgba(255, 255, 255, .14); border-radius: 3px; padding: 8px 14px; cursor: pointer; text-decoration: none; }
.fa-result button.primary, .fa-certwin a.primary { background: #FFB020; color: #1A1200; border-color: #FFB020; }
.fa-certbox { position: fixed; inset: 0; z-index: 50; background: rgba(4, 7, 10, .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(9, 13, 17, .88); border: 1px solid rgba(255, 176, 32, .5); border-radius: 4px; padding: 10px 12px; color: #D3DCE4; font: 13px 'TFC Body', sans-serif; }
.fa-instr b { display: block; font-size: 15px; margin-top: 3px; }
.fa-instr small { color: #8E9DAB; 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 #FFB020; background: rgba(255, 176, 32, .1); font-size: 15px; line-height: 1.4; }
@media (max-width: 800px) { .fa-gates { grid-template-columns: 1fr; } .fa-radio { width: 46vw; } }