:root{color-scheme:dark;--bg:#080e19;--line:#263549;--text:#edf3fa;--muted:#a9b9ce;--p1:#ff747b;--p2:#70d8f5;--good:#9ee2b0;--bad:#ffbb92;font-family:Arial,Helvetica,sans-serif;font-size:clamp(12px,min(1.041667vw,1.851852vh),40px)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid white;outline-offset:3px}button:disabled{cursor:default;opacity:.5}[hidden]{display:none!important}
.app{height:100dvh;min-height:480px;display:flex;flex-direction:column;overflow:hidden;position:relative}
.topbar{height:3.2rem;flex-shrink:0;padding:0 1.2rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:1rem;background:#0b1320;z-index:6}
.brand{display:flex;gap:.6rem;align-items:center;flex-shrink:0}.brand img{width:1.7rem;height:1.7rem;object-fit:contain;filter:brightness(2)}.brand-title{font-weight:800;font-size:1rem;letter-spacing:.1rem}.brand small{display:block;color:var(--muted);font-size:.48rem;letter-spacing:.12rem;margin-top:.2rem}
.top-actions{display:flex;gap:.4rem;align-items:center}.icon-button,.text-button{border:1px solid #3b4b61;background:#111c2c;color:#d1dcea;border-radius:.4rem;padding:.5rem .7rem;font-size:.7rem;white-space:nowrap}.icon-button:hover,.text-button:hover{background:#20324a;color:white}.round-tag{font-size:.65rem;letter-spacing:.05rem;color:var(--muted);margin-right:.6rem}
.mode-switch{display:flex;flex-shrink:0;border:1px solid #435369;border-radius:.45rem;padding:.15rem;gap:.15rem}.mode-switch button{border:0;border-radius:.3rem;background:transparent;color:#becddd;font-size:.7rem;font-weight:700;padding:.35rem .5rem;white-space:nowrap}.mode-switch button[aria-pressed="true"]{background:#dce7f4;color:#122030}.mode-switch button:hover{background:#30435b;color:white}
/* The introduction floats above the landscape; only the lobby needs the full guide. */
.mission{position:absolute;top:3.2rem;left:0;right:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:.8rem 1.2rem;background:linear-gradient(#0b1423f5,#0b1423cc,transparent);pointer-events:none}
.mission h1{font-size:1.5rem;letter-spacing:-.04rem;margin:0 0 .25rem}.mission p{margin:0;color:#c6d3e3;font-size:.8rem;line-height:1.4;max-width:40rem}.steps{display:flex;gap:1.4rem}.step{display:flex;align-items:center;gap:.5rem;max-width:12rem;font-size:.75rem;line-height:1.45;color:#d5e0ed}.step b{width:1.6rem;height:1.6rem;border:1px solid #526880;color:#e2edf9;display:grid;place-items:center;border-radius:50%;flex-shrink:0;font-size:.75rem}.step strong{color:white}
.app:not([data-phase="lobby"]) .mission{width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0}
.arena{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.2rem;flex:1;min-height:0;background:#6c8199;position:relative}
.pilot{--pilot:var(--p1);--hud-top:1rem;--camera-top:8rem;position:relative;min-width:0;overflow:hidden;border-top:.15rem solid var(--pilot);background:var(--bg)}.pilot[data-player="1"]{--pilot:var(--p2)}
.app[data-phase="lobby"] .pilot{--hud-top:5.8rem;--camera-top:9.6rem}
.stage{position:absolute;inset:0;padding:var(--camera-top) 1.6rem 4rem;background:#0b1423}canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pilot-head{position:absolute;z-index:3;top:var(--hud-top);left:1.2rem;right:1.2rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;pointer-events:none}
.identity{display:flex;align-items:center;gap:.55rem}.number{display:grid;place-items:center;background:var(--pilot);color:#122030;border-radius:.45rem;width:2.2rem;height:2.2rem;font-size:1.35rem;font-weight:800}.identity h2{font-size:1rem;margin:0;color:var(--pilot);letter-spacing:.04rem;text-shadow:0 2px 6px #000}.identity small{display:block;font-size:.58rem;color:#c4d3e3;margin-top:.2rem;letter-spacing:.065rem;text-transform:uppercase}.connection{font-size:.65rem;display:flex;align-items:center;gap:.35rem;color:var(--muted);text-align:right}.connection::before{content:'';width:.3rem;height:.3rem;border-radius:50%;background:#647388;flex-shrink:0}.connection.online::before{background:var(--good);box-shadow:0 0 8px #9ee2b044}
.instruments{position:absolute;z-index:3;top:calc(var(--hud-top) + 3.2rem);left:1.2rem;right:1.2rem;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:.65rem;pointer-events:none}.instrument{min-width:0;padding:.5rem .7rem;background:#0a1422d9;border:1px solid #34485b;border-radius:.5rem}.instrument-label{font-size:.56rem;letter-spacing:.055rem;text-transform:uppercase;color:var(--muted)}.reading{font-size:1.05rem;font-weight:700;margin-top:.25rem;font-variant-numeric:tabular-nums}.reading small{font-size:.65rem;color:#c0ccdb;font-weight:400;margin-left:.35rem}.safe{color:var(--good)}.warning{color:var(--bad)}.fuel-track{height:.18rem;background:#304050;margin-top:.3rem;border-radius:3px;overflow:hidden}.fuel-track span{display:block;height:100%;background:var(--pilot);width:100%;transition:width .1s}.app[data-phase="lobby"] .instruments{display:none}
/* Cards sit to the side of the starting craft, leaving the destination visible. */
.stage-overlay{position:absolute;inset:0;z-index:2;display:flex;justify-content:flex-end;align-items:flex-start;padding:calc(var(--hud-top) + 3.5rem) 1.2rem 4rem;pointer-events:none}.flight-card{pointer-events:auto;text-align:left;max-width:21rem;width:52%;padding:1.2rem;border:1px solid #506277;background:#0c1729ec;box-shadow:0 .8rem 2.5rem #0004;border-radius:.8rem;max-height:100%;overflow:auto}
.eyebrow{color:var(--pilot);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1rem;margin:0 0 .55rem}.flight-card h3{font-size:1.35rem;letter-spacing:-.025rem;margin:0 0 .6rem;line-height:1.2}.flight-card p{font-size:.85rem;line-height:1.5;color:#d0dbea;margin:0 0 .7rem}.flight-card .minor{font-size:.65rem;color:#a7b9ce;margin:.6rem 0 0}.primary{border:0;border-radius:.4rem;padding:.65rem .7rem;background:var(--pilot,var(--p1));color:#172334;font-weight:800;font-size:.8rem;width:100%}.primary:hover{filter:brightness(1.08)}.ready-badge{border:1px solid #41593c;color:var(--good);border-radius:.4rem;padding:.6rem;font-weight:700;font-size:.75rem;background:#a4e08b0c}.countdown{font-size:4rem!important;color:var(--pilot)!important;font-weight:800;font-variant-numeric:tabular-nums;margin:0!important;line-height:1.1!important}.card-icon{height:1.8rem;margin-bottom:.7rem;display:flex;align-items:center;gap:1rem;color:var(--pilot)}.stick{width:1.4rem;height:1.6rem;position:relative;display:inline-block;border-bottom:.2rem solid currentColor;border-radius:.15rem}.stick::before{content:'';position:absolute;bottom:.1rem;left:.65rem;width:.18rem;height:.9rem;background:currentColor;transform:rotate(-18deg);transform-origin:bottom}.stick::after{content:'';position:absolute;left:.2rem;top:0;width:.7rem;height:.7rem;border:.15rem solid currentColor;border-radius:50%;background:#101c2c}.controller-button{width:1.4rem;height:1.4rem;border-radius:50%;background:currentColor;box-shadow:0 0 0 .2rem #ffffff0c}
.app:not([data-phase="lobby"]) .stage-overlay{padding-top:9rem}
.flight-hint{position:absolute;z-index:3;bottom:1.2rem;left:1.2rem;right:1.2rem;text-align:center;pointer-events:none}.flight-hint span{display:inline-block;font-size:.85rem;line-height:1.4;background:#0c162be8;border:1px solid #4b6079;border-radius:.45rem;padding:.6rem .9rem}
.pilot-footer{position:absolute;bottom:1.2rem;left:1rem;right:1rem;z-index:2;display:flex;justify-content:center;gap:1rem;color:#c4d3e3;font-size:.7rem;pointer-events:none}.pilot-footer strong{color:var(--pilot)}.playing .pilot-footer{display:none}
.global-footer{height:1.4rem;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 1.2rem;font-size:.55rem;color:#a0b3c9;background:#080e19}.global-footer button{padding:0;background:none;border:0;color:#bacbdf;font-size:.6rem;text-decoration:underline;text-underline-offset:.15rem;white-space:nowrap}.ranking-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.credit{white-space:nowrap}
.solo .arena{grid-template-columns:1fr}.solo .pilot[data-player="1"]{display:none}.solo .instruments{max-width:34rem}.solo .flight-card{max-width:24rem}.solo .stage-overlay{right:5%}
.sr-only{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 dialog{color:var(--text);background:#101c2c;border:1px solid #43566e;border-radius:18px;max-width:620px;width:calc(100% - 32px);max-height:calc(100dvh - 40px);padding:26px;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#040911c9;backdrop-filter:blur(5px)}dialog h2{font-size:25px;margin:0 0 10px}dialog p{color:#b4c5d9;line-height:1.6;font-size:13px}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:22px 0}.settings-grid label{font-size:12px;color:#bacadd}.settings-grid input,.settings-grid select{width:100%;display:block;margin-top:7px;border:1px solid #435369;border-radius:7px;padding:10px;background:#08121f;color:white}.dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.dialog-actions .primary{width:auto}.dialog-actions button{flex:1}.settings-note{font-size:11px;color:#879bb4;border-top:1px solid var(--line);padding-top:16px}.scores{padding:0;list-style:none}.scores li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}.scores strong{color:var(--p1)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Dialogs scale with the TV interface, including native form controls. */
dialog{font-size:.85rem;max-width:34rem;padding:1.3rem;border-radius:.9rem}dialog h2{font-size:1.5rem}dialog h3{font-size:1.1rem}dialog p{font-size:.8rem}.settings-grid{gap:.8rem;margin:1rem 0}.settings-grid label{font-size:.75rem}.settings-grid input,.settings-grid select{padding:.55rem;margin-top:.3rem}.settings-note{font-size:.65rem}.scores li{font-size:.85rem;padding:.6rem 0}.dialog-actions{gap:.5rem;margin-top:.9rem}.dialog-actions button[aria-pressed="true"]{border-color:var(--p1);color:var(--p1)}
@media(max-width:1100px){.round-tag{display:none}.connection{font-size:.6rem}.steps{gap:.7rem}.step{max-width:10rem}.flight-card{width:56%;padding:.9rem}.mission{gap:1rem}.mission h1{font-size:1.35rem}.reading small{display:block;margin:.15rem 0 0}}
@media(max-width:700px){
 .app{min-height:600px}.topbar{height:auto;min-height:4rem;padding:.6rem .8rem;flex-wrap:wrap;gap:.6rem}.brand-title{font-size:1rem}.brand small{display:none}.top-actions{gap:.3rem;flex-wrap:wrap}.icon-button{padding:.4rem .5rem}.mission{top:7rem;padding:.6rem .8rem;display:block}.mission h1{font-size:1.3rem}.mission p{font-size:.8rem}.steps{margin-top:.6rem;justify-content:space-between}.step{font-size:.7rem;max-width:32%;gap:.3rem}.step b{width:1.2rem;height:1.2rem}.arena{gap:3px}.pilot{--hud-top:.8rem;--camera-top:10rem}.app[data-phase="lobby"] .pilot{--hud-top:11rem;--camera-top:15rem}.pilot-head{left:.6rem;right:.6rem;display:block}.identity{gap:.4rem}.identity h2{font-size:.85rem}.identity small{font-size:.52rem;letter-spacing:0}.number{width:1.6rem;height:1.8rem;font-size:1.1rem}.connection{margin-top:.4rem}.instruments{left:.5rem;right:.5rem;top:4.5rem;gap:.3rem}.instrument{padding:.35rem}.instrument-label{font-size:.48rem;letter-spacing:0}.reading{font-size:.7rem}.reading small{font-size:.6rem}.stage{padding-left:.5rem;padding-right:.5rem;padding-bottom:5rem}.stage-overlay{padding:calc(var(--hud-top) + 4rem) .6rem 5rem;align-items:flex-start}.flight-card{width:100%;padding:.75rem}.flight-card h3{font-size:1.1rem}.flight-card p{font-size:.8rem}.flight-card .minor{font-size:.65rem}.card-icon{display:none}.eyebrow{font-size:.55rem;letter-spacing:.04rem}.ready-badge{font-size:.72rem}.flight-hint{left:.5rem;right:.5rem;bottom:.8rem}.flight-hint span{font-size:.75rem;padding:.5rem}.pilot-footer{font-size:.6rem;display:block;text-align:center;bottom:.7rem;line-height:1.6}.pilot-footer span{display:block}.global-footer{height:2rem;padding:0 .6rem;gap:.5rem}.global-footer .ranking-status{display:none}.solo .stage-overlay{right:0}.solo .flight-card{width:60%}.solo .instruments{max-width:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.difficulty-picker select,.score-filter select{border:1px solid #435369;border-radius:.4rem;background:#111c2c;color:#d1dcea;padding:.5rem .6rem;font-size:.7rem}.score-filter{display:block;margin:1rem 0;font-size:.8rem}.mission .difficulty-help{font-size:.65rem;color:#a8c1da;margin-top:.3rem}.instruments{grid-template-columns:1fr 1.3fr 1fr 1fr}.solo .instruments{max-width:42rem}
@media(max-width:1100px){.brand small{display:none}.topbar{padding:0 .6rem;gap:.5rem}.top-actions{gap:.25rem}.icon-button,.mode-switch button,.difficulty-picker select{font-size:.65rem;padding:.4rem}.instrument{padding:.4rem}.instrument-label{font-size:.5rem}.reading{font-size:.9rem}}
@media(max-width:700px){.topbar{padding:.6rem .8rem}.instruments{grid-template-columns:1fr 1fr;top:4.4rem}.pilot{--camera-top:13rem}.mission{top:7.5rem}.reading small{display:inline}.reading{font-size:.8rem}.app:not([data-phase="lobby"]) .stage-overlay{padding-top:13rem}}

.keyboard-guide{display:grid;gap:.7rem;margin:1rem 0}.keyboard-guide>div{display:flex;align-items:center;gap:.35rem}.keyboard-guide span{font-size:.7rem;line-height:1.35;margin-left:.25rem;color:#d0deeb}kbd{display:inline-block;background:#192c40;border:1px solid #7890a8;border-bottom-width:3px;border-radius:.25rem;padding:.3rem .45rem;font:700 .8rem Arial;color:var(--pilot);white-space:nowrap}.mission .input-help{font-size:.62rem;color:#a9d5e8;margin-top:.25rem;max-width:40rem}
.flight-card.score-entry{width:90%;max-width:29rem;border-color:var(--pilot);padding:1rem 1.2rem}
.result-points{font-size:1.6rem!important;font-weight:800;color:var(--pilot)!important;margin-bottom:.6rem!important}.result-points small{font-size:.8rem}
.result-actions{display:grid;gap:.45rem}.result-button,.name-key{border:1px solid #62738b;border-radius:.35rem;background:#172a43;color:#eef5ff;padding:.55rem;font:inherit;font-size:.8rem;text-align:left}
.result-button.selected,.name-key.selected{background:var(--pilot);color:#101c2c;border-color:var(--pilot);box-shadow:0 0 0 2px #fff;font-weight:800}.result-button:focus-visible,.name-key:focus-visible,.pilot-name:focus-visible{outline:3px solid white;outline-offset:3px}
.name-label{display:block;font-size:.75rem;margin-bottom:.3rem}.pilot-name{display:block;width:100%;min-width:0;border:1px solid var(--pilot);border-radius:.35rem;background:#050e1d;color:white;padding:.5rem;font:inherit;font-size:1.1rem;letter-spacing:.06rem}
.name-keyboard{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:.22rem;margin-top:.65rem}.name-key{text-align:center;padding:.35rem 0;font-size:.7rem;min-width:0}.name-command{grid-column:span 2;font-size:.58rem;padding:.45rem .1rem}.saved-name{font-size:1.25rem!important;color:var(--pilot)!important;font-weight:800}