.shoot-machine{--shoot-green:#d9f56c;--shoot-cyan:#80f8e2;min-width:0;border:1px solid #384a41;border-radius:4px;padding:0 20px 18px;background:linear-gradient(135deg,#14211f,#0c131b 65%);box-shadow:0 22px 70px #0004;position:relative;overflow:hidden}.shoot-cabinet-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid #ffffff16;font:8px var(--mono);letter-spacing:.09em;color:#80928f}.shoot-cabinet-top>span:first-child{color:#cae1d3}.shoot-cabinet-top i{display:inline-block;height:5px;width:5px;border-radius:50%;background:var(--shoot-green);box-shadow:0 0 9px #d9f56c99;margin-right:7px}.shoot-titlebar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:21px 0 17px}.shoot-titlebar>div>span{font:7px var(--mono);letter-spacing:.14em;color:#7b9390}.shoot-titlebar h3{font:600 clamp(18px,1.9vw,26px)/1.2 var(--display);letter-spacing:-.03em;color:#ecfff7;margin-top:5px;white-space:nowrap}.shoot-titlebar h3>span{display:inline-block;font-size:19px;color:var(--shoot-green);margin-left:10px}.shoot-pause{width:32px;height:32px;display:grid;place-items:center;flex:none;font:15px var(--display);border:1px solid #5f817666;background:transparent;color:var(--shoot-cyan);border-radius:50%;padding:0}.shoot-pause:disabled{opacity:.3;cursor:default}.shoot-hud{display:grid;grid-template-columns:1.1fr 1.1fr .65fr 1fr;gap:9px;background:#070d14;border:1px solid #33493f;border-bottom:0;padding:13px 14px 10px}.shoot-hud>div{display:flex;flex-direction:column;gap:3px}.shoot-hud>div:last-child{text-align:right}.shoot-hud>div>span{font:7px var(--mono);letter-spacing:.14em;color:#728c83}.shoot-hud strong{font:600 17px/1.15 var(--display);letter-spacing:.045em;color:var(--shoot-green);font-variant-numeric:tabular-nums}.shoot-hud>div:nth-child(2) strong{color:#c7d7cc}.shoot-hud>div:last-child strong{letter-spacing:.08em;color:var(--shoot-cyan);font-size:15px}.shoot-stage{position:relative;isolation:isolate;aspect-ratio:64/46;background:#050b13;border:1px solid #33493f;border-top:0;overflow:hidden}.shoot-stage:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000000a,#0000000a 1px,transparent 1px,transparent 4px);z-index:3;pointer-events:none;opacity:.7}#shoot-canvas{width:100%;height:100%;display:block;outline-offset:-4px;touch-action:none}#shoot-canvas:focus-visible{outline:2px solid #d9f56c99;outline-offset:-3px}.shoot-overlay{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;padding:20px 15px;background:linear-gradient(180deg,#050d16bb,#06121be6 65%,#071018dd);backdrop-filter:blur(2px)}.shoot-overlay[hidden]{display:none}.shoot-overlay-label{font:8px var(--mono);letter-spacing:.15em;color:var(--shoot-cyan);line-height:1.6}.shoot-invader{font:38px/1 var(--display);color:var(--shoot-green);margin:15px 0 8px;text-shadow:0 0 35px #d9f56c77}.shoot-overlay>strong{font-size:clamp(20px,2vw,27px);line-height:1.55;letter-spacing:.05em;color:#f0fff6}.shoot-overlay>p{font-size:10px;line-height:1.9;color:#9eaea9;margin-top:12px}.shoot-overlay>button{margin-top:21px;display:inline-flex;align-items:center;gap:39px;justify-content:space-between;border:0;background:var(--shoot-green);color:#172017;padding:12px 22px;font-size:12px;font-weight:700;border-radius:2px;transition:background .2s,transform .2s;min-width:169px;min-height:44px}.shoot-overlay>button:hover{background:#ebff9a;transform:translateY(-2px)}.shoot-overlay>button>span{font-size:23px;line-height:1}.shoot-overlay-foot{font:6px var(--mono);letter-spacing:.16em;color:#667e75;margin-top:14px}.shoot-corner{position:absolute;z-index:5;width:12px;height:12px;pointer-events:none}.shoot-corner-tl{top:7px;left:7px;border-top:1px solid var(--shoot-cyan);border-left:1px solid var(--shoot-cyan)}.shoot-corner-br{right:7px;bottom:7px;border-right:1px solid var(--shoot-cyan);border-bottom:1px solid var(--shoot-cyan)}.shoot-controls{display:flex;align-items:center;gap:12px;margin-top:15px}.shoot-direction{display:flex;gap:6px;flex:none}.shoot-controls button{border:1px solid #577464;background:#14261f;color:var(--shoot-green);border-radius:2px;font:600 20px/1 var(--display);height:42px;width:42px;touch-action:none;user-select:none;-webkit-user-select:none;transition:background .12s}.shoot-controls button:active,.shoot-controls button.is-held{background:#41563a}.shoot-controls button:disabled{cursor:default;opacity:.35}.shoot-controls>p{font-size:10px;line-height:1.65;flex:1;color:#a3b7ac;min-width:0}.shoot-controls>#shoot-fire{width:80px;flex:none;background:#c9ed76;color:#112513;border-color:#c9ed76;font-size:12px;letter-spacing:.08em;display:flex;align-items:center;justify-content:center;gap:9px}.shoot-controls>#shoot-fire>span{font-size:17px}.shoot-controls>#shoot-fire:active,.shoot-controls>#shoot-fire.is-held{background:#f0ffb5}.shoot-help{font-size:8px;line-height:2;color:#698575;margin-top:13px;display:flex;flex-direction:column;gap:3px}.shoot-help kbd{font:7px var(--mono);border:1px solid #415349;padding:1px 3px;border-radius:2px;color:#97b8a3}.shoot-machine[data-state="gameover"] .shoot-hud>div:last-child strong{color:#fa897d}.shoot-machine[data-state="gameover"] .shoot-invader{color:#fa897d}.shoot-machine[data-state="paused"] .shoot-invader{font-size:31px}
@media(max-width:1150px){.shoot-machine{padding-inline:15px}.shoot-titlebar h3{font-size:20px}.shoot-titlebar h3>span{font-size:15px;margin-left:6px}.shoot-overlay{padding:14px 10px}.shoot-invader{margin:10px 0 7px;font-size:30px}.shoot-overlay>strong{font-size:22px}.shoot-overlay>p{margin-top:9px}.shoot-overlay>button{margin-top:15px}.shoot-overlay-foot{margin-top:10px}.shoot-controls{gap:9px}.shoot-controls>p{font-size:9px}}
@media(max-width:800px){.shoot-machine{width:100%;max-width:580px;justify-self:center;padding-inline:18px}.shoot-titlebar h3{font-size:25px}.shoot-overlay>strong{font-size:26px}.shoot-overlay>p{font-size:11px}.shoot-overlay>button{margin-top:22px}.shoot-invader{font-size:39px;margin-top:17px}.shoot-hud strong{font-size:18px}.shoot-titlebar{padding-top:20px}.shoot-controls>p{font-size:10px}.shoot-cabinet-top{font-size:7px}.shoot-help{font-size:8px}}
@media(max-width:420px){.shoot-machine{padding-inline:12px;padding-bottom:14px}.shoot-cabinet-top{font-size:6px;gap:7px;padding-block:14px}.shoot-titlebar{padding-block:17px 13px}.shoot-titlebar h3{font-size:19px}.shoot-titlebar h3>span{font-size:14px}.shoot-titlebar>div>span{font-size:6px}.shoot-pause{width:29px;height:29px}.shoot-hud{padding:11px 10px 8px;gap:6px}.shoot-hud>div>span{font-size:6px}.shoot-hud strong{font-size:15px}.shoot-hud>div:last-child strong{font-size:12px}.shoot-overlay{padding:12px 10px}.shoot-overlay-label{font-size:6px}.shoot-invader{display:none}.shoot-overlay>strong{font-size:19px;margin-top:10px}.shoot-overlay>p{font-size:9px;margin-top:7px}.shoot-overlay>button{margin-top:13px;padding:9px 20px;min-height:40px;font-size:11px}.shoot-overlay-foot{font-size:5px;margin-top:10px}.shoot-controls{gap:9px;margin-top:13px}.shoot-controls button{height:40px;width:36px}.shoot-controls>#shoot-fire{width:70px;font-size:11px}.shoot-direction{gap:5px}.shoot-controls>p{font-size:9px}.shoot-help{font-size:7px}.shoot-help kbd{font-size:6px}}

.shoot-titlebar{gap:8px}.shoot-titlebar>div:first-child{min-width:0}.shoot-titlebar h3{font-size:clamp(17px,1.7vw,23px)}.shoot-toolbar-actions{display:flex;align-items:center;gap:7px;flex:none}.shoot-sound{border:1px solid #5f817655;border-radius:3px;background:#10241d;color:#d9f56c;min-height:32px;padding:5px 8px;font:8px var(--mono);white-space:nowrap}.shoot-sound[aria-pressed="false"]{color:#7f9689;background:transparent}.shoot-titlebar h3>span{display:none}.shoot-records{margin-top:18px;border-top:1px solid #98b49e2e}.shoot-records>summary{cursor:pointer;display:flex;justify-content:space-between;gap:15px;align-items:center;list-style:none;padding:15px 1px 0;font:9px var(--display);letter-spacing:.08em;color:#cee5d4}.shoot-records>summary::-webkit-details-marker{display:none}.shoot-records>summary>span:last-child{font:7px var(--mono);color:#789989;display:flex;gap:12px;align-items:center}.shoot-records>summary b{font-size:17px;font-weight:400;line-height:1;transform:translateY(-2px)}.shoot-records[open]>summary b{transform:rotate(180deg)}.shoot-records-body{padding-top:20px}.shoot-register[hidden]{display:none}.shoot-result-total{padding:16px;background:#081711;border:1px solid #d9f56c33;margin-bottom:17px}.shoot-result-total>span{display:block;font:7px var(--mono);letter-spacing:.12em;color:#8baa92}.shoot-result-total>strong{display:block;font:600 37px/1.3 var(--display);color:#e1fb8a;margin-top:4px;letter-spacing:.03em;font-variant-numeric:tabular-nums}.shoot-result-total>p{font-size:9px;line-height:1.8;color:#94b39e;margin-top:4px}.shoot-register>label{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#c4d9cd;margin-bottom:7px}.shoot-register>label>span{font-size:8px;color:#7b9384}.shoot-name-entry{display:flex;gap:7px}.shoot-name-entry>input{min-width:0;width:100%;flex:1;border:1px solid #77958369;border-radius:2px;background:#07130f;color:#edfff3;font:12px var(--body);padding:10px 12px;min-height:42px}.shoot-name-entry>input::placeholder{color:#60786a}.shoot-name-entry>input:disabled{opacity:.55}.shoot-name-entry>button{flex:none;background:#d9f56c;border:0;border-radius:2px;color:#132114;padding:10px 12px;font-size:10px;font-weight:700;min-height:42px}.shoot-name-entry>button:disabled{opacity:.4;cursor:default}.shoot-skip-score{border:0;background:transparent;color:#839e8b;font-size:9px;text-decoration:underline;text-underline-offset:4px;padding:10px 0;margin:1px 0 0}.shoot-skip-score:disabled{display:none}.shoot-record-status{font-size:9px;line-height:1.9;color:#bdd0b7;min-height:0;margin:0 0 13px}.shoot-record-status:empty{display:none}.shoot-ranking-heading{display:flex;justify-content:space-between;gap:15px;font:6px var(--mono);letter-spacing:.1em;color:#759280;padding:9px 0;border-top:1px solid #98b49e25;border-bottom:1px solid #98b49e25}.shoot-ranking{list-style:none;padding:0;margin:0}.shoot-ranking-row{display:flex;gap:12px;align-items:center;border-bottom:1px solid #8ba7941c;padding:10px 3px}.shoot-rank-number{font:12px var(--display);width:21px;color:#789784;flex:none}.shoot-ranking-row:nth-child(-n+3) .shoot-rank-number{color:#d9f56c}.shoot-rank-pilot{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.shoot-rank-pilot>strong{font-size:11px;font-weight:500;color:#d8e9df;overflow-wrap:anywhere}.shoot-rank-pilot>small{font:6px var(--mono);color:#779987}.shoot-rank-score{font:600 17px var(--display);color:#cfe9ba;font-variant-numeric:tabular-nums}.shoot-ranking-row.is-you{background:#d9f56c0b}.shoot-ranking-empty{padding:23px 5px;font-size:10px;color:#829e8a;text-align:center}.shoot-ranking-note{font-size:8px;line-height:1.9;color:#6e8b79;margin-top:15px}.shoot-machine:has(.shoot-records[open]){position:relative!important;top:auto!important}.shoot-records :focus-visible,.shoot-sound:focus-visible{outline:2px solid #d9f56c;outline-offset:4px}@media(max-width:420px){.shoot-titlebar h3{font-size:17px}.shoot-toolbar-actions{gap:5px}.shoot-sound{font-size:7px;min-height:29px;padding:5px 6px}.shoot-name-entry>button{font-size:9px;padding:9px}.shoot-name-entry>input{font-size:12px;padding:9px}.shoot-result-total{padding:13px}.shoot-result-total>strong{font-size:33px}.shoot-result-total>p{font-size:8px}.shoot-rank-pilot>strong{font-size:10px}.shoot-rank-score{font-size:16px}}
/* Keep name entry readable and prevent focus zoom on mobile Safari. */
@media(max-width:800px){.shoot-name-entry>input{font-size:16px}}