*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0b1a24;color:#f1e7cf;font-family:Georgia,Times New Roman,serif;-webkit-user-select:none;user-select:none}#app canvas{display:block}.hidden{display:none!important}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.panel{position:absolute;background:#140e0873;border:1px solid rgba(241,231,207,.25);border-radius:6px;padding:10px 14px;text-shadow:0 1px 2px #000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.tl{top:16px;left:16px;min-width:120px}.tr{top:16px;right:16px;width:220px}.bl{bottom:16px;left:16px}.br{bottom:16px;right:16px;font-size:18px;letter-spacing:2px}.label{font-size:11px;letter-spacing:2px;text-transform:uppercase;opacity:.7}.big{font-size:28px;margin-bottom:4px}.small{font-size:13px;opacity:.85}.readout{font-size:16px;font-variant-numeric:tabular-nums}.readout span:last-child{display:inline-block;min-width:70px;text-align:right}.bar{height:12px;background:#00000080;border-radius:3px;overflow:hidden;margin:6px 0}#fortbar{height:100%;width:100%;background:linear-gradient(90deg,#a83a22,#d9a441);transition:width .3s}#compass{position:absolute;top:16px;left:50%;width:360px;height:26px;margin-left:-180px;border-bottom:1px solid rgba(241,231,207,.4);overflow:hidden}#compass-marks{position:absolute;top:0;right:0;bottom:0;left:0}.compass-center{position:absolute;left:50%;bottom:0;width:2px;height:10px;margin-left:-1px;background:#f1e7cf}.cmark{position:absolute;bottom:2px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#e0442a;box-shadow:0 0 4px #000}.cmark.sloop{width:6px;height:6px;margin-left:-3px}.cmark.frigate{width:11px;height:11px;margin-left:-5.5px}.cmark.landed{background:#fc3}#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#crosshair line{stroke:#fff5dcd9;stroke-width:1.5}#crosshair .dot{fill:#fff5dce6}#reload-ring{stroke:#ffd278cc;transition:stroke .2s}#reload-ring.ready{stroke:#96e68c8c}#hitmarker{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-size:30px;font-weight:700;color:#ffd27a;text-shadow:0 2px 6px #000;opacity:0;transition:opacity .2s;white-space:nowrap}#banner{position:absolute;top:24%;left:0;right:0;text-align:center;font-size:48px;letter-spacing:4px;text-shadow:0 3px 12px #000;opacity:0;transition:opacity .6s}#banner .sub{display:block;font-size:20px;letter-spacing:2px;opacity:.85}#labels .hp{position:absolute;width:46px;height:5px;margin-left:-23px;background:#0009;border:1px solid rgba(0,0,0,.8)}#labels .hp div{height:100%;background:#e0442a}#damage-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(160,30,10,.55));opacity:0;transition:opacity .5s}#mute{position:fixed;top:112px;right:16px;z-index:10;width:44px;height:44px;padding:0;margin:0;font-size:20px;line-height:44px;color:#f1e7cf;background:#140e088c;border:1px solid rgba(241,231,207,.3);border-radius:6px}#mute:hover{background:#3c2814bf}.screen{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#050c1259,#050c12cc)}.card{background:#1e140ad1;border:1px solid rgba(241,231,207,.3);border-radius:10px;padding:32px 44px;max-width:560px;text-align:center;box-shadow:0 20px 60px #0009}.card h1{margin:0 0 8px;font-size:44px;letter-spacing:3px;color:#f4d48a}.card .sub{font-size:18px;margin:0 0 18px;opacity:.9}.controls{list-style:none;padding:0;margin:0 0 16px;text-align:left;display:inline-block;line-height:1.7}.hint{font-size:14px;opacity:.8;line-height:1.5}button{font-family:inherit;font-size:20px;letter-spacing:2px;padding:12px 36px;margin:10px 0;color:#1c120a;background:#e8b95a;border:none;border-radius:6px;cursor:pointer}button:hover{background:#f4cf7c}