*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0a1720;color:#e8eff0;font-family:Arial,Helvetica,sans-serif;font-size:13px}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #c5e0df30;background:#14242dde;transition:background .15s,border-color .15s}button:hover{background:#31505c;border-color:#9fd8d4}button:focus-visible{outline:2px solid #9ae4d3;outline-offset:3px}button:disabled{opacity:.4;cursor:default}#viewport, #viewport canvas,.vignette{position:absolute;inset:0;width:100%;height:100%}.vignette{pointer-events:none;background:linear-gradient(0deg,#04121bbb,transparent 35%,transparent 78%,#03111a99)}header{position:absolute;top:0;left:0;right:0;height:80px;padding:22px 30px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d5e8e41f;background:linear-gradient(#0a1d2b9c,#0a1d2b20)}.brand{display:flex;align-items:center;gap:12px;font-size:17px;letter-spacing:3px}.brand b{font-weight:400;color:#afc5c8}.brandmark{font-size:34px;color:#b9dbc9;letter-spacing:-10px;padding-right:12px}.brand small{display:block;font-size:8px;letter-spacing:2px;margin-top:7px;color:#96b4bc}.header-right{display:flex;gap:8px;align-items:center}.header-right button{padding:9px 12px;font-size:9px;letter-spacing:1px}#clock{font:12px monospace;margin-right:15px;color:#c1d3d5}.panel{background:linear-gradient(135deg,#0b202ae8,#0c202dba);border:1px solid #bad8d526;backdrop-filter:blur(12px)}#mission{position:absolute;top:105px;left:30px;width:330px;padding:22px}.eyebrow{font-size:9px;letter-spacing:1.8px;color:#9fb9bd;display:flex;justify-content:space-between;align-items:center}.eyebrow span{font-size:8px;color:#668b92}h2{font-size:24px;font-weight:400;margin:16px 0 10px;letter-spacing:-.6px}p{line-height:1.65;color:#b9cbcf}#instruction{min-height:43px;margin-bottom:24px;font-size:12px}.steps{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.6px;color:#64808a}.steps .current{color:#e9d0a3}.steps .done{color:#8cdfc2}.progress{height:2px;background:#54707a55;margin:12px 0}.progress i{display:block;height:100%;background:#b8d8c6;width:0;transition:width .2s}#objectiveDetail{font:10px monospace;color:#a9c4cc}.mapPanel{position:absolute;right:30px;top:105px;width:250px;padding:15px}.mapPanel .eyebrow button{font-size:8px;padding:4px;border:0;background:none;color:#9abbc4}.mapPanel canvas{width:100%;height:auto;display:block}.mapLegend{display:flex;justify-content:space-between;color:#95b9be;font-size:8px;letter-spacing:.8px}.mapPanel.expanded{width:min(580px,60vw);z-index:5}.mapPanel.expanded canvas{max-height:65vh;object-fit:contain}#radio{position:absolute;left:30px;bottom:235px;max-width:360px;padding:14px 18px;border-left:2px solid #bfd9ba;transition:opacity .8s}#radio span{font-size:8px;letter-spacing:2px;color:#b9d5c4}#radio p{font-size:12px;margin:7px 0 0}#telemetry{position:absolute;bottom:149px;left:30px;display:flex;align-items:center;gap:32px;text-shadow:0 2px 5px #061a24}#telemetry small{display:block;color:#a7c1c7;font-size:8px;letter-spacing:1.6px;margin-bottom:8px}#telemetry strong{display:block;font:24px 'Courier New',monospace}#telemetry>div:first-child strong{font:19px Arial;letter-spacing:1.4px;margin-right:10px}em{font-size:10px;font-style:normal;color:#a9c1c7;margin-left:5px}footer{position:absolute;bottom:0;left:0;right:0;padding:16px 30px 12px;background:#081923e8;border-top:1px solid #b2d2d52d;display:flex;align-items:center;gap:20px;flex-wrap:wrap}nav{display:flex;gap:8px}.unit{width:170px;text-align:left;padding:10px 14px;border-color:#54717e55;background:#15283180;border-radius:2px}.unit small{font-size:8px;letter-spacing:1px;color:#98b6bc}.unit b{display:block;font-size:17px;font-weight:400;margin:5px 0}.unit span{font-size:7px;letter-spacing:.8px;color:#7d9ca4}.unit.active{border-color:#b8d9c4;border-top:2px solid #b8d9c4;background:#b6d7c318}.unit.active span{color:#b8d9c4}.actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}.actions button{font-size:9px;letter-spacing:1px;padding:15px 12px}#auto.engaged{color:#b9f2cc;border-color:#93d4b1}.keyHint{width:100%;font-size:8px;letter-spacing:1.3px;color:#7798a5;display:flex;gap:5px;align-items:center}.keyHint span{margin-left:15px}kbd{font:9px monospace;border:1px solid #7b9dad55;padding:2px 4px;color:#bacdd1}#targetMarker{position:absolute;pointer-events:none;text-align:center;color:#f2d3a0;text-shadow:0 1px 6px #000;transform:translate(-50%,-50%)}#targetMarker>span{font-size:32px;display:block}#targetMarker small{font-size:9px;letter-spacing:1px}.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#03101cac;backdrop-filter:blur(5px)}.hidden{display:none!important}#welcome{justify-content:flex-start;background:linear-gradient(90deg,#061724ed 0%,#061724c9 30%,#06172418 74%);backdrop-filter:none}.briefing{margin:0 0 0 7vw;width:440px;padding-top:25px}.briefing .eyebrow{font-size:9px;color:#b4cdbf}h1{font-size:58px;font-weight:400;letter-spacing:4px;line-height:1.04;margin:25px 0 28px}h1 span{font-weight:700;color:#bcd5c4}.rule{width:42px;height:2px;background:#c4d7bd;margin-bottom:27px}h3{font-size:19px;font-weight:400}.briefing p{max-width:370px;font-size:13px;color:#b8cad1}.briefing ol{padding:0;list-style:none;margin:23px 0 30px}.briefing li{display:flex;gap:18px;align-items:center;margin:14px 0;font-size:12px;color:#c0d0d3}.briefing li b{color:#809eac;font:11px monospace}.primary{background:#bfd7c3;color:#10262a;padding:16px 23px;border:none;font-size:11px;letter-spacing:1.7px;text-align:left;min-width:260px}.primary:hover{background:#e1efdb}.primary span{float:right;font-size:17px}.briefNote{display:block;color:#7e9cab;font-size:9px;line-height:1.9;margin-top:16px}.sceneCaption{position:absolute;bottom:45px;right:45px;text-align:right;letter-spacing:2px;font-size:11px}.sceneCaption span{display:block;font-size:8px;margin-top:9px;color:#bad0d6}.modal{background:#0c202beF;border:1px solid #adcacb40;padding:35px;max-width:660px;max-height:90vh;overflow:auto;box-shadow:0 30px 120px #0008}.modal h2{font-size:32px}.modal dl{display:grid;grid-template-columns:145px 1fr;font-size:12px;gap:14px 20px;margin:26px 0}.modal dt{color:#c8dfca}.modal dd{margin:0;color:#b1c7cc;line-height:1.5}.modal p{font-size:12px}.modal .primary{margin-top:14px}.narrow{max-width:450px}.secondary{display:block;margin-top:12px;padding:13px 20px;width:100%;font-size:10px;letter-spacing:1px}.result{border-top:1px solid #90adad44;border-bottom:1px solid #90adad44;padding:20px 0;margin:25px 0}.result span{font-size:9px;letter-spacing:1px}.result strong{display:block;margin-top:12px;font:28px monospace}.muted{color:#7d9aa5}
@media(max-width:1050px){.header-right #clock{display:none}.brand{font-size:13px}.brand small{font-size:7px}.header-right button{padding:8px;font-size:8px}.unit{width:145px}.actions{gap:5px}.actions button{padding:14px 7px;font-size:8px}#mission{width:285px;padding:17px}.mapPanel{width:210px}#telemetry{gap:20px}}@media(max-height:720px){.briefing{transform:scale(.83);transform-origin:left center}#mission{top:90px}header{height:70px}.mapPanel{top:90px;width:205px}#radio{bottom:215px;padding:10px 15px;max-width:310px}#telemetry{bottom:140px}#telemetry strong{font-size:20px}}@media(max-width:760px){header{padding:15px}.brand small,.header-right #quality,.header-right #sound{display:none}#mission{left:15px;width:255px}.mapPanel{right:15px;width:160px}.mapLegend{font-size:6px}.unit{width:125px}footer{padding:10px 15px;gap:8px}.actions{margin-left:0}#telemetry{left:15px;bottom:188px;gap:15px}#telemetry>div:first-child strong{font-size:13px}#telemetry strong{font-size:17px}#radio{display:none}.keyHint{display:none}.briefing{margin-left:6vw}.sceneCaption{display:none}}
body:not(.playing) #mission,body:not(.playing) .mapPanel,body:not(.playing) #radio,body:not(.playing) #telemetry,body:not(.playing) footer,body:not(.playing) header{visibility:hidden}
@media(max-height:720px){#telemetry{bottom:164px}}