html,body{margin:0;height:100%;background:#000;overflow:hidden;font-family:ui-monospace,Menlo,Consolas,monospace;color:#efe6cf}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#cockpit{pointer-events:none}
#toast{position:absolute;left:50%;top:14%;transform:translateX(-50%);padding:8px 16px;border-radius:6px;
       background:#000a;border:1px solid #ffcf5a88;font-size:15px;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
#toast.on{opacity:1}
#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000a;z-index:5}
#overlay.hide{display:none}
.panel{max-height:94vh;overflow:auto;width:min(560px,92vw);background:#17130fee;border:2px solid #ffcf5a;border-radius:10px;padding:22px 26px;box-shadow:0 0 40px #ffb02e44}
.panel h1{margin:0 0 4px;font-size:26px;letter-spacing:2px;color:#ffcf5a}
.panel h2{margin:0 0 14px;font-size:13px;font-weight:normal;color:#b9ad8d}
.panel .row{display:flex;justify-content:space-between;margin:6px 0;font-size:15px}
.panel table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px}
.panel td{padding:3px 6px;border-bottom:1px solid #fff2}
.panel td:first-child{color:#ffcf5a;white-space:nowrap}
.btns{display:flex;gap:10px;margin-top:16px}
button{flex:1;font:inherit;font-size:16px;padding:12px;border-radius:6px;border:2px solid #ffcf5a;background:#ffcf5a;color:#1b1408;cursor:pointer;font-weight:bold}
button.alt{background:transparent;color:#ffcf5a;flex:0 0 auto;font-size:13px;padding:12px 14px}
button:disabled{opacity:.4;cursor:not-allowed}
.bad{color:#ff6b5a}.good{color:#7be07b}
.routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px;margin:12px 0 6px}
.route{cursor:pointer;border:2px solid #fff3;border-radius:8px;padding:6px;text-align:center;font-size:11px;background:#0003;transition:border-color .15s,background .15s}
.route:hover{border-color:#ffcf5a99}
.route.sel{border-color:#ffcf5a;background:#ffcf5a22}
.route .sw{height:36px;border-radius:5px;margin-bottom:5px}
.route b{display:block;color:#ffcf5a;font-size:12px}
.route span{color:#b9ad8d}
#routeinfo{font-size:12px;color:#d9ccaa;min-height:54px;margin-bottom:6px;line-height:1.45}
#routeinfo b{color:#ffcf5a}.dim{color:#b9ad8d}
.tod{display:flex;gap:8px;margin:2px 0 8px}
.tcard{flex:1;cursor:pointer;border:2px solid #fff3;border-radius:8px;padding:7px;text-align:center;font-size:13px;font-weight:bold;color:#b9ad8d;background:#0003;transition:border-color .15s,background .15s}
.tcard:hover{border-color:#ffcf5a99}
.tcard.sel{border-color:#ffcf5a;background:#ffcf5a22;color:#ffcf5a}
#roadwrap{white-space:nowrap}