html,body{background:#000;height:100%;margin:0;overflow:hidden}body{color:#fff;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}#view{position:fixed;inset:0}#view canvas{display:block;width:100%!important;height:100%!important}.osd{letter-spacing:.08em;text-shadow:0 0 2px #000,1px 1px #000,-1px -1px #000;pointer-events:none;white-space:pre;font-size:clamp(13px,1.7vw,22px);font-weight:600;line-height:1.45;position:fixed}.tl{top:5%;left:6%}.tr{text-align:right;top:5%;right:6%}.bl{bottom:6%;left:6%}.br{text-align:right;bottom:6%;right:6%}.tc{text-align:center;color:#ffd84a;top:16%;left:0;right:0}#tape{pointer-events:none;width:min(46vw,520px);height:clamp(52px,8vh,68px);position:fixed;top:3.5%;left:50%;transform:translate(-50%)}.hint{white-space:normal;text-align:center;letter-spacing:.06em;font-size:clamp(12px,1.35vw,17px);bottom:5.5%;left:25%;right:25%}.hint b{background:#00000059;border:1.5px solid #fff;border-radius:4px;margin:0 .3em 0 1.2em;padding:0 .45em;font-weight:700;display:inline-block}.hint b:first-child{margin-left:0}body.touch .hint{display:none}.bc{text-align:center;opacity:.55;font-size:11px;bottom:2%;left:0;right:0}#reticle{pointer-events:none;width:0;height:0;position:fixed;top:50%;left:50%}#reticle i{background:#fff;position:absolute;box-shadow:0 0 2px #000}#reticle i:first-child{width:18px;height:2px;top:-1px;left:-9px}#reticle i:nth-child(2){width:2px;height:18px;top:-9px;left:-1px}#horizon{opacity:.75;background:linear-gradient(90deg,#fff 0 38%,#0000 38% 62%,#fff 62%);width:34vw;height:2px;position:absolute;top:-1px;left:-17vw;box-shadow:0 0 2px #000}#banner{text-align:center;letter-spacing:.2em;white-space:pre-line;text-shadow:0 0 6px #000,2px 2px #000;pointer-events:none;justify-content:center;align-items:center;font-size:clamp(20px,3.4vw,44px);font-weight:700;display:flex;position:fixed;inset:0}#start{background:radial-gradient(#0c0e0cb8,#000000f0);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.panel{background:#0a0d0adb;border:1px solid #3c463c;max-width:560px;padding:28px 34px}.panel h1{letter-spacing:.3em;margin:0 0 4px;font-size:26px}.sub{color:#a9b5a4;margin:0 0 18px;font-size:13px}.panel table{border-collapse:collapse;width:100%;margin-bottom:20px;font-size:13px}.panel th{text-align:left;color:#7f8c7a;border-bottom:1px solid #2c342c;padding:4px 0;font-weight:500}.panel td{color:#d6ddd2;padding:4px 0}.panel td:first-child{color:#7f8c7a;width:30%}.keys{color:#7f8c7a;margin:-10px 0 14px;font-size:11px}body.touch .keys{display:none}.kinds{gap:8px;margin-bottom:10px;display:flex}.kind{text-align:left;font:inherit;cursor:pointer;color:#a9b5a4;background:0 0;border:1px solid #3c463c;flex:1;padding:8px 10px}.kind b{letter-spacing:.16em;color:#d6ddd2;font-size:13px;display:block}.kind span{margin-top:2px;font-size:10.5px;display:block}.kind.on{background:#cfe3a61a;border-color:#cfe3a6}.kind.on b{color:#cfe3a6}#pipper{pointer-events:none;visibility:hidden;border:2px solid #fff;border-radius:50%;width:26px;height:26px;margin:-13px 0 0 -13px;position:fixed;top:0;left:0;box-shadow:0 0 0 1.5px #0009,inset 0 0 0 1.5px #0009}#pipper:after{content:"";background:#fff;border-radius:50%;width:4px;height:4px;margin:-2px 0 0 -2px;position:absolute;top:50%;left:50%}.career{letter-spacing:.12em;color:#cfe3a6;margin:0 0 10px;font-size:12px}#go{width:100%;font:inherit;letter-spacing:.3em;cursor:pointer;color:#0b0e0b;background:#cfe3a6;border:0;padding:12px;font-weight:700}#go:hover{background:#e4f5bd}#go:disabled{color:#99a;cursor:wait;background:#556}.fine{color:#6f7a6b;margin:12px 0 0;font-size:11px}html,body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.touch-help{color:#d6ddd2;margin-bottom:12px;font-size:12px;display:none}.touch-help p{margin:0 0 5px}.touch-help b{color:#cfe3a6;font-weight:600}#rotate{display:none}body.touch,body.touch *{touch-action:none}html:has(body.touch){touch-action:none}body.touch #start,body.touch #start *{touch-action:pan-y}body.touch #view,body.touch #start,body.touch #banner,body.touch #touch{height:100dvh;inset:0 0 auto}body.touch .touch-help{display:block}body.touch .panel table{display:none}body.touch .panel{box-sizing:border-box;max-height:calc(100dvh - 16px);margin:8px;padding:14px 18px;overflow-y:auto}body.touch .panel h1{font-size:18px}body.touch .sub{margin-bottom:8px;font-size:11px;display:none}body.touch .kind{padding:6px 10px}body.touch .kind span{display:none}body.touch .kinds{margin-bottom:8px}body.touch .career{margin-bottom:8px;font-size:10px}body.touch .fine{display:none}body.touch #go{padding:10px}body.touch .bc{display:none}body.touch .osd{font-size:clamp(10px,3.6dvh,14px);line-height:1.35}body.touch .tl br,body.touch .tr br{display:none}body.touch .tl span:last-child,body.touch .tr span:last-child{margin-left:1.2em}body.touch .tl,body.touch .tr{top:6px}body.touch .tl,body.touch .bl{left:max(12px, env(safe-area-inset-left))}body.touch .tr,body.touch .br{right:max(12px, env(safe-area-inset-right))}body.touch .bl,body.touch .br{opacity:.9;top:calc(42px + 12dvh);bottom:auto}body.touch .tc{top:calc(38px + 12dvh)}body.touch #tape{width:min(42vw,340px);height:clamp(40px,15dvh,50px);top:2px}body.touch #horizon{display:none}#touch{z-index:4;touch-action:none;--stick:clamp(88px, 36dvh, 124px);position:fixed}#touch[hidden]{display:none}.zone{touch-action:none;width:50%;position:absolute;top:40%;bottom:0}.zone.left{left:0}.zone.right{right:0}.stick-base{width:var(--stick);height:var(--stick);margin:calc(var(--stick) / -2) 0 0 calc(var(--stick) / -2);top:calc(100% - var(--stick) / 2 - 22px - env(safe-area-inset-bottom));background:#00000029;border:2px solid #ffffff52;border-radius:50%;position:absolute}.zone.left .stick-base{left:calc(var(--stick) / 2 + 26px + env(safe-area-inset-left))}.zone.right .stick-base{left:calc(100% - var(--stick) / 2 - 26px - env(safe-area-inset-right))}.stick-base.held{border-color:#fff9}.stick-base:after{content:attr(data-label);letter-spacing:.14em;white-space:nowrap;color:#fff9;text-shadow:0 0 2px #000;font-size:9px;position:absolute;top:100%;left:50%;transform:translate(-50%,4px)}.stick-base.ratchet{background:linear-gradient(#ffffff47,#ffffff47) 50%/14px 2px no-repeat,#00000029;border-radius:22px}.stick-knob{box-sizing:border-box;background:#fff6;border:2px solid #ffffffb3;border-radius:50%;width:44%;height:44%;margin:-22% 0 0 -22%;position:absolute;top:50%;left:50%}.tbtn{height:clamp(30px,12dvh,44px);font:inherit;letter-spacing:.1em;color:#fff;touch-action:none;background:#00000052;border:2px solid #ffffff80;border-radius:9px;padding:0;font-size:clamp(11px,4dvh,15px);font-weight:700;position:absolute;top:30px}.tbtn:active{background:#ffffff4d}.tbtn.det{right:max(12px, env(safe-area-inset-right));color:#ffb3a6;border-color:#ff7a66;width:76px}.tbtn.mode{left:max(12px, env(safe-area-inset-left));width:66px}.tbtn.pause{left:calc(max(12px, env(safe-area-inset-left)) + 74px);width:42px}.tbtn.cam{right:calc(max(12px, env(safe-area-inset-right)) + 138px);width:52px}.tbtn.end{left:calc(max(12px, env(safe-area-inset-left)) + 124px);width:50px;display:none}body[data-kind=bomber] .tbtn.end{display:block}body[data-kind=bomber][data-home="1"] .tbtn.end{color:#cfe3a6;border-color:#cfe3a6}.tbtn.ir{right:calc(max(12px, env(safe-area-inset-right)) + 84px);width:46px}@media (orientation:portrait){body.touch #rotate{z-index:20;letter-spacing:.12em;text-align:center;background:#0b0e0b;justify-content:center;align-items:center;padding:24px;font-size:20px;display:flex;position:fixed;inset:0}}