:root{color-scheme:dark;--ink:#edf5ff;--muted:#98a9bc;--accent:#a5e7d8}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:radial-gradient(ellipse at 50% 0,#27364a,#090f19 65%);color:var(--ink);font:15px/1.5 system-ui,-apple-system,sans-serif;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{border:1px solid #526479;border-radius:7px;background:#263445;color:var(--ink);padding:9px 15px;cursor:pointer;font-weight:600}button:hover{filter:brightness(1.2)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #ffde9e;outline-offset:4px}a{color:#c3d2e3;text-decoration:none}header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(6px,1.2svh,12px) 3%;font-size:11px;letter-spacing:.12em}header nav{display:flex;gap:9px;font-size:10px;letter-spacing:0}header nav a{border:1px solid #3e5065;border-radius:20px;padding:6px 10px}header button{font-size:10px;padding:6px 10px}.flight-hud{position:absolute;inset:14px 24px auto;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em;text-shadow:0 1px 6px #000;color:#bed2e6;gap:10px}#hull{color:#b6eadc}#flightWindow{flex:none;position:relative;height:clamp(110px,25svh,280px);width:87%;max-width:1500px;margin:0 auto clamp(6px,1.2svh,12px);border:9px solid #5b6b7d;border-radius:80px 80px 28px 28px;box-shadow:0 0 0 3px #121d2a,0 0 0 12px #1c293a,inset 0 0 20px #000;overflow:hidden;background:#01050d}#space,#cracks{position:absolute;inset:0;width:100%;height:100%}#cracks{z-index:1;pointer-events:none}/* hull damage (fx.js): spreading cracks, heat, flying debris, burn-up, END OF LINE */#cracks .impact path{fill:none;stroke:#eef8ff;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linecap:round;filter:drop-shadow(0 0 4px #bfe6ff) drop-shadow(0 0 10px #7fc4ff)}#cracks .hole{fill:#000a;stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 8px #ff9a5a)}#cracks .spread path{stroke-dasharray:4000;stroke-dashoffset:4000;animation:spread .7s cubic-bezier(.2,.8,.3,1) forwards}@keyframes spread{to{stroke-dashoffset:0}}body{--heat:0}#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}#heat{position:fixed;inset:0;pointer-events:none;z-index:40;opacity:var(--heat);transition:opacity 1s;background:radial-gradient(ellipse at 50% 55%,transparent 35%,rgba(255,110,30,.28) 70%,rgba(200,30,0,.6) 100%);animation:heatpulse 1.1s ease-in-out infinite}@keyframes heatpulse{50%{filter:brightness(1.35) saturate(1.3)}}#heat.flash::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse,#fff 0,#ffb27a 30%,#ff3b1f 60%,transparent 80%);animation:hitflash .55s ease-out forwards}@keyframes hitflash{from{opacity:.75}to{opacity:0}}.console,#flightWindow{transition:box-shadow 1s,border-color 1s}body[data-damage="1"] #flightWindow{border-color:#8a6a52}body[data-damage="2"] #flightWindow,body[data-damage="3"] #flightWindow{border-color:#b0512c}body[data-damage="1"] .console{box-shadow:0 12px 40px #0009,0 0 40px #ff6a1a44,inset 0 0 30px #ff6a1a22}body[data-damage="2"] .console,body[data-damage="3"] .console{box-shadow:0 12px 40px #0009,0 0 70px #ff4a0f88,inset 0 0 60px #ff4a0f44;border-color:#d0703a}body[data-damage="2"] .monitor-top,body[data-damage="2"] footer{animation:alarm .8s steps(2) infinite}@keyframes alarm{50%{color:#ff8a6a}}body.burning{animation:burnshake .09s 22,burnsettle 1s 1.98s ease-out}@keyframes burnsettle{0%{transform:translate(4px,-3px)}15%{transform:translate(-3px,3px)}30%{transform:translate(2px,-2px)}50%{transform:translate(-1px,1px)}70%{transform:translate(1px,0)}100%{transform:none}}
@keyframes burnshake{25%{transform:translate(5px,-3px)}50%{transform:translate(-4px,4px)}75%{transform:translate(3px,2px)}}body.burning #heat{opacity:1;animation:burnup 3s ease-in forwards}@keyframes burnup{0%{background-color:#ff3b1f22}55%{background-color:#ff5a1aaa}85%{background-color:#ffd9a0ee}100%{background-color:#fff6e8}}body.burning #space,body.burning .console{filter:sepia(1) saturate(4) hue-rotate(-20deg) brightness(1.2)}body.blackout #heat{animation:none;background:#000;opacity:1;transition:background 1s}#eol{position:fixed;inset:0;z-index:60;background:#000;display:grid;place-items:center;padding:24px;font-family:ui-monospace,Menlo,Consolas,monospace;animation:eolin 1.2s ease-out}@keyframes eolin{from{opacity:0}}.eol-in{max-width:620px;width:100%;text-align:center}#eol small{color:#ff6a4a;letter-spacing:.35em;font-size:12px}#eol h2{font:700 clamp(40px,9vw,92px)/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;margin:14px 0;color:#f2f2f2;text-shadow:0 0 18px #ff3b1f88;animation:flicker 2.4s infinite}@keyframes flicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.4}94%{opacity:1}96%{opacity:.6}}#eolWhy{color:#c9c9c9;margin:0 0 22px}#eolStats{display:grid;grid-template-columns:auto auto;gap:8px 22px;justify-content:center;text-align:left;margin:0 0 26px;color:#9fe0c8}#eolStats dt{color:#8a8a8a;letter-spacing:.12em;font-size:12px;text-transform:uppercase;align-self:center}#eolStats dd{margin:0;font-size:17px}.eol-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}@media(prefers-reduced-motion:reduce){#heat,body.burning{animation:none}}.orbit-label{position:absolute;bottom:15px;left:24px;font-size:12px;color:#e0ecfa;text-shadow:0 2px 8px #000}.console{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;width:96%;max-width:1800px;margin:0 auto clamp(6px,1.2svh,14px);padding:9px 13px 0;background:linear-gradient(120deg,#657488,#273449 25%,#1b293b 70%,#526173);border:1px solid #7c8a9e;border-radius:22px;box-shadow:0 12px 40px #0009}.monitor-top{flex:none;padding:2px 8px clamp(4px,1svh,10px);display:flex;align-items:center;justify-content:space-between;gap:10px;color:#c7d5e4;font-size:10px;letter-spacing:.12em}.monitor-top button{font-size:10px;padding:4px 9px}#signal{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px var(--accent);margin-right:5px}.monitor{position:relative;background:#07111d;border:5px solid #060b13;border-radius:10px;box-shadow:0 0 0 1px #7c8c9d;overflow:hidden;flex:1;min-height:0}.screen{padding:clamp(12px,3svh,28px) clamp(20px,4vw,70px);height:100%;overflow:auto}.lobby{background:radial-gradient(ellipse at 85% 10%,#25453e44,transparent 60%),radial-gradient(ellipse at 0 100%,#24385566,transparent 60%),#09131f}.overline{font-size:10px;letter-spacing:.2em;color:var(--accent);font-weight:700}h1{font-size:clamp(22px,min(4.2vw,5.4svh),62px);line-height:1.08;letter-spacing:-.045em;margin:clamp(6px,1.4svh,14px) 0 clamp(6px,1.2svh,12px)}h2{font-size:clamp(28px,4vw,52px);line-height:1.12;letter-spacing:-.035em;margin:12px 0 18px}.lede{color:#b7c6d7;font-size:clamp(13px,1.4vw,17px);margin:0 0 clamp(10px,2.2svh,22px)}.lede em{color:#f3dcaf;font-style:normal}.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:1050px}.tier{text-align:left;padding:clamp(8px,1.6svh,15px) 18px;background:#152332;border-color:#3b5266}.tier small{display:block;color:#a0b5c8;font-size:10px;font-weight:400}.tier b{display:block;margin:5px 0 8px;font-size:clamp(14px,1.6vw,21px)}.tier[aria-pressed="true"]{background:#234138;border-color:var(--accent)}.tier.locked{opacity:.5}.launch-row{display:flex;align-items:center;gap:20px;margin:clamp(10px,2.2svh,22px) 0 clamp(6px,1.2svh,12px)}.primary{background:var(--accent);color:#08251e;border:0;padding:12px 24px;font-weight:750}.launch-row span,.fine{font-size:11px;color:#8fa4ba}.fine{line-height:1.7}.lab{color:#a6b9ce;font-size:11px;margin:16px 0}.lab summary{cursor:pointer}.lab div{display:flex;gap:8px;flex-wrap:wrap}.lab select{max-width:360px;color:#e2edf9;background:#192b3c;border:1px solid #526479;border-radius:5px;padding:8px}.lab button{font-size:11px}#channelHost{width:100%;height:100%;overflow:hidden;background:#0b1420}#channelHost iframe{width:100%;height:100%;border:0;background:#0b1420;display:block;transform-origin:0 0}/* while a challenge is on, the window gets a little shorter so the monitor has more room */body.playing #flightWindow{height:clamp(84px,16svh,200px)}#flightWindow{transition:height .5s ease}#switching{position:absolute;inset:0;background:#060d17;z-index:3;display:grid;place-content:center;text-align:center}.static{position:absolute;inset:0;opacity:.12;background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 4px);animation:static .12s infinite}#switching small{color:#8bd5c4;letter-spacing:.3em}#switching h2{font-size:35px}#switching p{color:#a4b8ce}#switching>div{z-index:1}.feedback,.finish{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse,#29423b33,transparent)}.feedback p,.finish p{color:#b3c4d5;max-width:650px}.detail{font-size:12px;color:#e5cca2!important}.feedback button,.finish button{margin-top:16px}#medal{font-size:68px;color:#ffd48b;text-shadow:0 0 55px #ffce6788}.finish.epic{background:radial-gradient(ellipse,#71502d66,#09131f 70%)}footer{flex:none;padding:clamp(4px,1svh,9px) 10px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.12em;color:#9bb0c7}.board article{border-bottom:1px solid #385168;padding:12px 0;display:flex;gap:20px}.board article span{color:#9fb4c9}.board button{margin-top:25px}body[data-damage="2"] #hull,body[data-damage="3"] #hull{color:#ffad93}body.hit .console{animation:shake .4s}body.hit #flightWindow{box-shadow:0 0 45px #ff5f3988}.board p{color:#a0b5c9}.finish.fail{background:radial-gradient(ellipse,#67271c77,#090e17 75%)}@keyframes shake{20%{transform:translateX(6px)}40%{transform:translateX(-6px)}60%{transform:translateX(3px)}}@keyframes static{to{transform:translateY(3px)}}@media(min-width:1200px) and (min-height:850px){.lobby{padding-top:36px}.tiers{margin-top:28px}}@media(max-width:700px){header{flex-wrap:wrap;font-size:9px;letter-spacing:.05em;padding:10px 3%}header strong{order:-1;width:100%;text-align:center}#flightWindow{height:130px;width:90%;border-width:6px;border-radius:40px 40px 20px 20px}.flight-hud{font-size:8px;inset:10px 12px auto}#rank{display:none}.orbit-label{left:12px;bottom:10px;font-size:10px}.console{width:98%;padding:8px 5px 0;border-radius:12px}.monitor{border-width:3px}.monitor-top{font-size:8px;letter-spacing:.03em}.monitor-top #progress{max-width:110px;text-align:right}.screen{padding:25px 18px}.tiers{gap:7px;grid-template-columns:1fr}.tier{padding:10px 12px;display:grid;grid-template-columns:1fr auto}.tier b{font-size:15px;margin:2px 0}.tier small:first-child{grid-column:1/-1}.tier small:last-child{align-self:center}.launch-row{flex-direction:column;align-items:stretch;gap:10px}.launch-row span{text-align:center}.lede br{display:none}footer{font-size:7px;padding:8px 5px}footer span:last-child{display:none}}@media(max-height:820px){.fine{display:none}.lab{margin:8px 0}}@media(max-height:640px){.lede{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}

#eol{overflow:auto}.eol-in{width:min(760px,100%);text-align:center}
#eolFar{font:700 clamp(20px,3.4vw,30px)/1.2 system-ui,sans-serif;color:#ffd9a0;margin:0 0 18px}
#eolTrack{padding:8px 18px 34px}.eol-line{position:relative;height:6px;border-radius:3px;background:#262a31}
.eol-fill{position:absolute;inset:0 auto 0 0;border-radius:3px;background:linear-gradient(90deg,#ff6a3a,#ffd9a0)}
.eol-stop{position:absolute;top:50%;transform:translate(-50%,-50%)}.eol-stop i{display:block;width:12px;height:12px;border-radius:50%;background:#262a31;border:2px solid #4a515c}
.eol-stop.on i{background:#ffd9a0;border-color:#ffd9a0;box-shadow:0 0 8px #ff9a5a}
.eol-stop span{position:absolute;top:18px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.06em;color:#6c727b;white-space:nowrap}.eol-stop.on span{color:#ffd9a0}
.eol-stop:nth-child(even) span{top:auto;bottom:18px}
.eol-ship{position:absolute;top:50%;transform:translate(-50%,-50%) rotate(45deg);font-size:22px;z-index:2;filter:drop-shadow(0 0 6px #ff7a3a)}
.eol-best{position:absolute;top:-8px;width:2px;height:22px;background:#fff;transform:translateX(-1px);opacity:.8}
#eolSay{color:#e6e6e6;max-width:560px;margin:0 auto 18px;line-height:1.45;font-family:system-ui,sans-serif}
#eolFeedback{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:0 0 22px;text-align:left;font-family:system-ui,sans-serif}
.eol-box{flex:1 1 240px;max-width:360px;border:1px solid #2c3139;border-radius:12px;padding:12px 16px;background:#0d0f13}
.eol-box h3{margin:0 0 6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase}.eol-box.good h3{color:#9fe0c8}.eol-box.work h3{color:#ff8a6a}
.eol-box p{margin:0;color:#ddd}.eol-box ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.eol-box li{display:flex;flex-direction:column}
.eol-box li b{color:#eee;font-weight:600}.eol-box li a{color:#a5e7d8;font-size:13px;text-decoration:none}.eol-box li a:hover{text-decoration:underline}
@media(max-height:760px){#eol h2{font-size:clamp(32px,6vw,56px);margin:8px 0}#eolWhy{margin-bottom:10px}#eolFar{margin-bottom:10px}}

/* one expert flight: rank cards show earned ranks; a banner flashes in the window when one is earned mid-flight */
.tier.earned{background:#2a2614;border-color:#ffd789}.tier.earned small:first-child{color:#ffd789}
#rankUp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;text-align:center;padding:10px 26px;border:1px solid #ffd789;border-radius:12px;background:#120f06cc;box-shadow:0 0 30px #ffd78966;pointer-events:none}
#rankUp small{display:block;font-size:11px;letter-spacing:.3em;color:#ffd789}#rankUp b{display:block;font-size:clamp(18px,2.6vw,28px);color:#fff4d6}
#rankUp.show{animation:rankup 3.4s ease-out forwards}@keyframes rankup{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}10%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}18%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#rankUp.show{animation:none}}

/* dictation clock: a ring that drains over 3 minutes, red in the last 30 seconds */
#dictClock{display:inline-flex;align-items:center;gap:7px;font:700 13px ui-monospace,Menlo,monospace;color:var(--accent)}
#dictClock i{width:16px;height:16px;border-radius:50%;background:conic-gradient(currentColor calc(var(--p,1)*360deg),#ffffff22 0)}
#dictClock.low{color:#ff7a5a;animation:alarm 1s infinite}

/* who is playing (shared sign-in) */
.who{margin:10px 0 0;color:var(--muted);font-size:13px}.who a{color:var(--accent)}

/* the launch screen's route: one flight from Earth to Pluto with the three ranks as stops (replaces the old tier boxes) */
.route{position:relative;height:96px;margin:30px 70px 6px 18px;max-width:1000px}
.rt-line{position:absolute;left:0;right:0;top:12px;height:6px;border-radius:3px;background:#24364a}.rt-line i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#9ae6d4,#ffd789)}
.rt-stop{position:absolute;top:0;transform:translateX(-50%);text-align:center;width:150px;padding-top:30px}
.rt-stop::before{content:"";position:absolute;top:6px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#152332;border:3px solid #3b5266}
.rt-stop b{display:block;font-size:14px;line-height:1.2}.rt-stop small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.rt-earth{width:auto;transform:none;text-align:left}.rt-earth::before{left:0;margin-left:0;background:#3f8fe0;border-color:#9fd0ff}
.rt-top{transform:translateX(-100%);text-align:right;width:180px}.rt-top::before{left:auto;right:0;margin-left:0}
.rt-rank.earned::before{background:#ffd789;border-color:#ffd789;box-shadow:0 0 10px #ffd78999}.rt-rank.earned b{color:#ffd789}
.rt-best{top:-22px;padding-top:0;width:auto}.rt-best::before{display:none}.rt-best small{color:#fff;font-weight:700;letter-spacing:.1em;font-size:9px}
@media(max-width:700px){.route{height:auto;margin:22px 0 4px;display:grid;gap:10px}.rt-line,.rt-best{display:none}.rt-stop,.rt-earth,.rt-top{position:relative;left:auto!important;transform:none;width:auto;text-align:left;padding:0 0 0 30px}.rt-stop::before,.rt-top::before{top:0;left:0;right:auto;margin-left:0}}

/* header with the practice time box: pills stay on one line; the title gives way first on narrower screens */
header nav a{white-space:nowrap}@media(max-width:1000px){header>strong{display:none}}
@media(max-width:700px){header nav{display:flex;flex-wrap:wrap;gap:6px;min-width:0}header{flex-wrap:wrap}}

/* online leaderboard: My class / World top 10 */
#boardTabs{display:flex;gap:8px;margin:14px 0 6px}#boardTabs button[aria-pressed="true"]{background:#234138;border-color:var(--accent);color:var(--ink)}
.board-note{color:var(--muted);font-size:13px;margin:4px 0 8px}
#boardList{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-width:760px;overflow:auto;max-height:28svh}
#boardList li{display:grid;grid-template-columns:2.2em 1fr auto 4.5em 7.5em;gap:10px;align-items:center;padding:8px 12px;border:1px solid #2c4256;border-radius:10px;background:#101c29}
#boardList li.me{border-color:#ffd789;background:#2a2614}#boardList .n{color:var(--muted);font-weight:700}#boardList .r{color:#c5b3ff;font-size:12px}
#boardList .s{font-weight:800;color:var(--accent);text-align:right}#boardList .t{color:var(--muted);font-size:12px;text-align:right}
@media(max-width:700px){#boardList li{grid-template-columns:2em 1fr auto;}#boardList .r,#boardList .t{display:none}}
#boardTabs button{margin-top:0}.board article{padding:8px 0}

/* bigger challenges (his complaint: some games are small): while a challenge is on, the window is a slim strip and the footer steps aside */
body.playing #flightWindow{height:clamp(56px,9svh,110px);border-width:6px;border-radius:40px 40px 18px 18px;margin-bottom:6px}
body.playing footer{display:none}
body.playing .console{padding-bottom:6px;margin-bottom:6px}