:root{--ink:#10242d;--glass:rgba(13,31,39,.78);--line:rgba(255,255,255,.16);--cream:#fffaf0;--gold:#f7c86a;--orange:#ff7b31;--green:#8bd19b}
*{box-sizing:border-box}
html,body,#game{width:100%;height:100%;margin:0;overflow:hidden}
body{background:#a9d9ea;color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;user-select:none}
button{font:inherit}
#canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
#windFX{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.label{display:block;color:rgba(255,255,255,.58);font-size:9px;font-weight:800;letter-spacing:.18em;line-height:1.3}
.glass{background:linear-gradient(145deg,rgba(17,39,47,.86),rgba(8,25,33,.7));border:1px solid var(--line);box-shadow:0 14px 40px rgba(6,18,24,.25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.topbar{position:fixed;z-index:4;left:0;right:0;top:0;height:76px;display:flex;align-items:center;gap:28px;padding:12px 24px;background:linear-gradient(180deg,rgba(10,27,35,.88),rgba(10,27,35,.44) 72%,transparent)}
.brand{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:900;letter-spacing:.23em}.brand-icon{font-size:24px;color:var(--gold)}
.top-stat{display:grid;grid-template-columns:auto auto;gap:3px 10px;align-items:center}.top-stat .label{grid-column:1/-1}.top-stat strong{font-size:12px;font-variant-numeric:tabular-nums}
.fuel-track{width:145px;height:6px;background:#07151b;border-radius:9px;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff14}.fuel-track i{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#65b879,#a9df9b);transition:width .2s}
.temp-stat{min-width:150px}.temp-track{position:relative;grid-column:1/-1;width:150px;height:5px;background:#07151b;border-radius:9px}.temp-track i{display:block;height:100%;width:35%;border-radius:9px;background:linear-gradient(90deg,#66b4d2,#ffd072,#ff7438);transition:width .15s}.temp-track em{position:absolute;top:-3px;width:2px;height:11px;background:#fff;border-radius:2px;box-shadow:0 0 5px #fff}
.top-spacer{flex:1}.wind-readout{display:flex;align-items:center;gap:11px}.wind-readout>span{display:grid;place-items:center;width:37px;height:37px;border:1px solid #ffffff30;border-radius:50%;font-size:24px;color:var(--gold);transition:transform .3s}.wind-readout strong{font-size:13px;letter-spacing:.04em}.score{text-align:right;min-width:85px}.score strong{font-size:22px;font-variant-numeric:tabular-nums}
.mission{position:fixed;z-index:4;left:24px;top:96px;width:235px;border-radius:14px;padding:16px}.mission .label b{float:right;color:var(--gold)}.target-row{display:flex;gap:13px;align-items:center;margin:9px 0 5px}.target-row #targetArrow{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#f7c86a18;border:1px solid #f7c86a50;color:var(--gold);font-size:23px;transition:transform .25s}.target-row strong{font-family:Georgia,serif;font-size:25px;font-weight:400}.target-type{margin-bottom:4px;color:var(--gold);font-size:8px;font-weight:850;letter-spacing:.14em}.missionHint,#missionHint{min-height:16px;color:#ffffff9b;font-size:10px}.approach{position:relative;height:4px;background:#07151b;border-radius:4px;margin-top:12px;overflow:hidden}.approach span{display:none}.approach i{display:block;width:0;height:100%;background:var(--gold);transition:width .25s}
.instruments{position:fixed;z-index:4;right:24px;bottom:24px;width:245px;border-radius:16px;padding:16px}.instrument{display:flex;align-items:end;justify-content:space-between}.instrument strong{font-family:Georgia,serif;font-size:30px;font-weight:400;line-height:1;font-variant-numeric:tabular-nums}.instrument strong small{font-family:inherit;font-size:12px;color:#ffffff8c}.divider{height:1px;background:#ffffff18;margin:13px 0}.instrument.vsi strong{font:800 12px Inter,system-ui;color:var(--gold);letter-spacing:.06em}#vsiCanvas{display:block;width:100%;height:18px;margin-top:8px}
.wind-layers{position:fixed;z-index:4;right:24px;top:96px;width:275px;border-radius:14px;padding:14px 15px}.wind-layers>.label{margin-bottom:8px}.layer{display:grid;grid-template-columns:54px 92px 1fr;align-items:center;padding:4px;border-top:1px solid #ffffff12;color:#ffffffb8;font-size:10px}.layer:first-child{border-top:0}.layer.active{margin:0 -6px;padding-left:10px;padding-right:10px;background:#f7c86a18;border-radius:8px;color:#fff}.layer.held{box-shadow:inset 3px 0 var(--gold)}.layer.held strong::before{content:"HOLD";display:block;margin-bottom:1px;color:var(--gold);font-size:7px;letter-spacing:.08em}.wind-sequence{display:flex;align-items:center;gap:5px}.wind-step{--progress:0deg;position:relative;display:grid;place-items:center;width:24px;height:24px;border:1px solid #ffffff18;border-radius:50%;background:#ffffff09}.wind-step.current{border:0;background:conic-gradient(var(--gold) var(--progress),#ffffff16 0)}.wind-step.current::before{content:"";position:absolute;inset:2px;border-radius:50%;background:#142d37}.layer.held .wind-step.current{background:var(--gold)}.layer .layer-arrow{position:relative;z-index:1;display:inline-block;color:var(--gold);font-size:14px;font-style:normal;line-height:1;transition:transform .18s linear}.wind-step:not(.current) .layer-arrow{color:#ffffff80}.layer strong{text-align:right;font-size:10px}
.controls{position:fixed;z-index:5;left:24px;bottom:24px;display:flex;gap:10px}.control{width:178px;height:62px;border:1px solid #ffffff26;border-radius:13px;color:#fff;display:grid;grid-template-columns:27px 1fr 25px;gap:9px;align-items:center;text-align:left;cursor:pointer;box-shadow:0 12px 32px #0b1d2660;transition:transform .1s,filter .1s,box-shadow .1s;touch-action:none}.control span:nth-child(2){display:flex;flex-direction:column}.control b{font-size:11px;letter-spacing:.08em}.control small{font-size:9px;color:#ffffffa5;margin-top:2px}.control kbd{font:800 10px system-ui;text-align:center;padding:4px 0;border-radius:5px;background:#08151c66;border:1px solid #ffffff25}.burner{background:linear-gradient(145deg,#e9682c,#a8391f)}.vent{background:linear-gradient(145deg,#466878,#263f4b)}.control[aria-pressed=true]{transform:translateY(2px);filter:brightness(1.2);box-shadow:0 4px 14px #0b1d2670}.control-icon{font-size:18px;text-align:center}
.altitude-hold{width:168px;background:linear-gradient(145deg,#446f70,#28494f)}.altitude-hold[aria-pressed=true]{border-color:#f7c86aaa;background:linear-gradient(145deg,#b38436,#6c5123);box-shadow:0 0 0 2px #f7c86a25,0 4px 14px #0b1d2670}.altitude-hold[aria-pressed=true] .control-icon,.altitude-hold[aria-pressed=true] kbd{color:var(--gold)}
#statusTip{position:fixed;z-index:4;left:50%;bottom:28px;transform:translateX(-50%);padding:9px 14px;border:1px solid #ffffff1c;border-radius:20px;background:#102a35b8;color:#ffffffb0;font-size:10px;backdrop-filter:blur(10px);transition:opacity .4s}#statusTip b{color:#fff}
#toast{position:fixed;z-index:8;left:50%;top:94px;transform:translate(-50%,-10px);padding:12px 18px;border:1px solid #f7c86a55;border-radius:10px;background:#122d36e8;box-shadow:0 10px 40px #07151b55;font-size:12px;opacity:0;pointer-events:none;transition:.3s}#toast.show{opacity:1;transform:translate(-50%,0)}
.pause-screen{position:fixed;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;min-width:230px;flex-direction:column;align-items:center;gap:5px;padding:18px 24px;border:1px solid #f7c86a70;border-radius:14px;background:#0c222de8;box-shadow:0 18px 60px #06151d80;backdrop-filter:blur(12px);pointer-events:none;transition:opacity .2s,visibility .2s}.pause-screen.hidden{opacity:0;visibility:hidden}.pause-screen strong{font-family:Georgia,serif;font-size:25px;font-weight:400}.pause-screen span{color:#ffffff9b;font-size:10px;letter-spacing:.04em}
.overlay{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 35%,rgba(30,73,88,.4),rgba(6,20,27,.84));backdrop-filter:blur(7px);transition:opacity .45s,visibility .45s}.overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.intro-card{width:min(580px,100%);padding:45px 48px 40px;border:1px solid #ffffff25;border-radius:20px;background:linear-gradient(145deg,rgba(17,43,53,.95),rgba(8,26,34,.94));text-align:center;box-shadow:0 35px 100px #020d1270}.eyebrow{color:var(--gold);font-size:9px;font-weight:900;letter-spacing:.3em}.intro-card h1{font-family:Georgia,serif;font-size:72px;font-weight:400;line-height:1;margin:10px 0 14px}.intro-card p{max-width:440px;margin:0 auto;color:#ffffffae;font-size:14px;line-height:1.65}.control-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0 26px}.control-guide>div{display:flex;flex-direction:column;align-items:center;padding:15px 8px;border:1px solid #ffffff16;border-radius:11px;background:#ffffff08}.control-guide b{margin-top:8px;font-size:10px}.control-guide small{color:#ffffff75;font-size:9px;margin-top:3px}.key,.mouse{display:grid;place-items:center;width:33px;height:33px;border-radius:7px;border:1px solid #ffffff30;background:#071920;font-weight:900}.key.hot{color:#ff9e5d}.key.cool{color:#83c9df}.mouse{font-size:22px;color:var(--gold)}.primary{border:0;border-radius:10px;padding:13px 22px;background:var(--gold);color:#17262b;font-weight:850;cursor:pointer;box-shadow:0 8px 25px #050e1260}.primary span{margin-left:18px}.intro-note{display:block;margin-top:15px;color:#ffffff66;font-size:9px}.end-card h2{font-family:Georgia,serif;font-size:42px;font-weight:400;margin:12px}.end-card p{margin-bottom:26px}
@media(max-width:850px){.topbar{height:64px;padding:8px 12px;gap:12px}.brand{display:none}.temp-stat{display:none}.fuel-track{width:90px}.wind-layers{display:none}.mission{left:12px;top:75px;width:195px}.instruments{right:12px;bottom:12px;width:190px}.controls{left:12px;bottom:12px;flex-direction:column}.control{width:142px;height:50px}.altitude-hold{width:142px}.control small{display:none}#statusTip{display:none}.score{min-width:auto}.wind-readout .label{display:none}}
@media(max-width:520px){.topbar{gap:9px}.wind-readout>span{width:30px;height:30px}.wind-readout strong{font-size:10px}.score strong{font-size:17px}.mission{top:66px}.instruments{width:160px;padding:12px}.instrument strong{font-size:23px}.controls{bottom:10px}.control{width:130px;grid-template-columns:20px 1fr 20px;padding:0 8px}.intro-card{padding:32px 18px}.intro-card h1{font-size:50px}.control-guide{gap:6px}.control-guide>div{padding:12px 3px}}