.gx-needle{--nr-ink:#eff3ff;--nr-muted:#b2c1de;--nr-gold:#ffd08a;max-width:920px;margin:20px auto;color:var(--nr-ink);font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;line-height:1.4;text-align:left}
.gx-needle *{box-sizing:border-box}.gx-needle [hidden]{display:none!important}.gx-needle button,.gx-needle select{font:inherit;line-height:1.25}.gx-needle button{cursor:pointer;border:1px solid #6983a9;border-radius:8px;background:#172744;color:#eff3ff;padding:10px 12px;min-height:42px;box-shadow:none;touch-action:manipulation}.gx-needle button:hover{background:#263a59}.gx-needle button:active{transform:translateY(1px)}.gx-needle button:focus-visible,.gx-needle select:focus-visible,.gx-needle canvas:focus-visible{outline:3px solid #ffe1a4;outline-offset:2px}.gx-needle button:disabled{opacity:.44;cursor:default;transform:none}.gx-needle h2,.gx-needle p{margin:0;padding:0;border:0;background:none;color:inherit;box-shadow:none}.gx-needle h2:before,.gx-needle h2:after{display:none}
.gx-needle .nr-shell{padding:12px;background:linear-gradient(130deg,#233852,#101b30 55%,#2e2639);border:1px solid #788598;border-radius:16px;overflow:hidden;box-shadow:0 16px 40px #07122533,inset 0 1px #ffffff35;isolation:isolate}
.gx-needle .nr-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;flex-wrap:wrap}.gx-needle .nr-brand{display:flex;flex-direction:column;min-width:0}.gx-needle .nr-brand small{font-size:9px;color:#b8c9e2;letter-spacing:.12em}.gx-needle .nr-brand strong{font-size:clamp(17px,3.8vw,24px);font-weight:900;letter-spacing:.04em;color:#fff2d9}.gx-needle .nr-tools{display:flex;gap:5px;flex-wrap:wrap}.gx-needle .nr-tools button{padding:7px 9px;min-height:36px;font-size:11px}
.gx-needle .nr-hud{display:grid;grid-template-columns:1.4fr 1.2fr .8fr 1fr;gap:6px;margin-bottom:8px}.gx-needle .nr-hud>div{padding:7px 8px;background:#071226bb;border:1px solid #3c5372;border-radius:6px;min-width:0}.gx-needle .nr-hud span{display:block;font-size:9px;letter-spacing:.08em;color:#aebfda}.gx-needle .nr-hud strong{font-size:clamp(15px,3vw,21px);font-variant-numeric:tabular-nums;color:#fff1d5;white-space:nowrap;display:block}.gx-needle .nr-hud>div:nth-child(3) strong{color:#ffb974;font-size:17px}
.gx-needle .nr-stage{position:relative;min-width:0;aspect-ratio:640/680;max-height:720px;background:#080e22;border:1px solid #4a607d;border-radius:10px;overflow:hidden;display:grid;place-items:center}.gx-needle .nr-canvas{width:100%;height:100%;display:block;object-fit:contain;touch-action:none;outline-offset:-4px!important}
.gx-needle .nr-panel{position:absolute;inset:12px;z-index:2;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:11px;padding:clamp(12px,3.5vw,28px);border:1px solid #9da0a8;border-radius:12px;background:linear-gradient(145deg,#14243bf7,#10192dfb 65%,#352735f7);box-shadow:0 12px 36px #0009;overflow:auto;overscroll-behavior:contain;color:#eff3ff}.gx-needle .nr-eyebrow{font-size:10px;letter-spacing:.16em;color:#ffcc8c;text-align:center}.gx-needle .nr-title{font-size:clamp(19px,4.2vw,29px);font-weight:900;text-align:center;line-height:1.3;margin:0}.gx-needle .nr-note{font-size:13px;color:#d2dcf0;text-align:center;line-height:1.6}
.gx-needle .nr-modes{display:grid;gap:7px}.gx-needle .nr-modes button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:49px;padding:10px 12px;border-color:#5b7396}.gx-needle .nr-modes button[aria-pressed=true]{border-color:#ffd08a;background:#593d29;box-shadow:inset 3px 0 #ffd08a}.gx-needle .nr-modes strong{font-size:14px;color:#fff3db}.gx-needle .nr-modes span{font-size:11px;color:#bfcee8}.gx-needle .nr-difficulty{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:#d2dcf0}.gx-needle select{background:#0b162b;color:#fff3db;border:1px solid #8c9db9;border-radius:6px;padding:9px 12px;min-height:40px;width:58%}.gx-needle .nr-primary{color:#1e2029;font-weight:900;font-size:17px;min-height:48px;border-color:#ffdfa3;background:linear-gradient(#ffe3ac,#efae62);box-shadow:0 3px 0 #935c30}.gx-needle .nr-primary:hover{background:#ffe1a4;color:#111e30}.gx-needle .nr-secondary{font-size:13px;min-height:38px}
.gx-needle .nr-controls{display:grid;grid-template-columns:1fr 2.1fr;gap:9px;margin-top:9px}.gx-needle .nr-fire{min-height:58px;font-size:21px;font-weight:900;letter-spacing:.08em;color:#102237;background:linear-gradient(#d1f4ff,#73cbeb);border-color:#c5efff;box-shadow:0 3px 0 #26687d;touch-action:none}.gx-needle .nr-fire:hover{background:#b0e9ff;color:#102237}.gx-needle .nr-slow{font-size:13px;background:#27234d;border-color:#a79fd8;min-height:58px}.gx-needle .nr-footer{display:flex;justify-content:space-between;gap:8px;font-size:10px;margin-top:9px;color:#c0cce3;font-variant-numeric:tabular-nums;min-height:15px}.gx-needle .nr-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gx-needle .nr-equipment{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.gx-needle .nr-equipment button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-width:0;min-height:150px;padding:12px 5px;background:linear-gradient(#2a405b,#14233c);border-color:#a6b3c5}.gx-needle .nr-equipment b{font-size:33px;color:#ffd08a}.gx-needle .nr-equipment strong{font-size:14px}.gx-needle .nr-equipment span{font-size:11px;color:#d0dcf0;line-height:1.5}.gx-needle .nr-equipment button:disabled{opacity:.4}
.gx-needle .nr-points{text-align:center;display:flex;flex-direction:column;gap:2px;color:#ffcf8b}.gx-needle .nr-points strong{font-size:clamp(32px,7vw,57px);line-height:1.05;font-weight:900;font-variant-numeric:tabular-nums}.gx-needle .nr-points span{font-size:10px;letter-spacing:.2em}.gx-needle .nr-result-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px}.gx-needle .nr-result-stats>div{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border:1px solid #4c6383;border-radius:6px;background:#08152c99}.gx-needle .nr-result-stats span{font-size:10px;color:#bdcce6}.gx-needle .nr-result-stats strong{font-size:18px;font-variant-numeric:tabular-nums}.gx-needle .nr-record-note{font-size:12px;color:#ffe1a9;text-align:center;line-height:1.5}.gx-needle .nr-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.gx-needle .nr-actions button{font-size:14px}
.gx-needle .nr-shell:fullscreen,.gx-needle .nr-expanded{width:100vw;height:100dvh;max-width:none;padding: max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border-radius:0;border:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:5px;background:#0a1326}.gx-needle .nr-expanded{position:fixed;inset:0;z-index:2147483000}.gx-needle .nr-shell:fullscreen .nr-head,.gx-needle .nr-expanded .nr-head,.gx-needle .nr-shell:fullscreen .nr-hud,.gx-needle .nr-expanded .nr-hud{margin:0}.gx-needle .nr-shell:fullscreen .nr-stage,.gx-needle .nr-expanded .nr-stage{min-height:0;aspect-ratio:auto;max-height:none;align-self:stretch}.gx-needle .nr-shell:fullscreen .nr-panel,.gx-needle .nr-expanded .nr-panel{max-width:590px;margin:auto;max-height:calc(100% - 16px);inset:8px;height:max-content;min-height:0}.gx-needle .nr-shell:fullscreen .nr-controls,.gx-needle .nr-expanded .nr-controls{margin:0}.gx-needle .nr-shell:fullscreen .nr-footer,.gx-needle .nr-expanded .nr-footer{margin:0}
@media(max-width:480px){.gx-needle .nr-shell{padding:8px;border-radius:11px}.gx-needle .nr-head{gap:4px;margin-bottom:7px}.gx-needle .nr-brand small{font-size:8px;letter-spacing:.05em}.gx-needle .nr-tools{gap:4px}.gx-needle .nr-tools button{font-size:10px;padding:6px 7px;min-height:33px}.gx-needle .nr-panel{inset:8px;padding:12px;gap:8px}.gx-needle .nr-title{font-size:19px}.gx-needle .nr-modes button{display:block;text-align:left;padding:8px 10px;min-height:42px}.gx-needle .nr-modes span{display:block;font-size:10px;margin-top:2px}.gx-needle .nr-modes strong{font-size:13px}.gx-needle .nr-note{font-size:11px}.gx-needle .nr-equipment{gap:5px}.gx-needle .nr-equipment button{min-height:124px;gap:7px}.gx-needle .nr-equipment strong{font-size:12px}.gx-needle .nr-equipment span{font-size:10px}.gx-needle .nr-hud>div{padding:5px}.gx-needle .nr-result-stats>div{padding:6px}.gx-needle .nr-actions button{font-size:12px}.gx-needle .nr-record-note{font-size:10px}}
@media(max-width:359px){.gx-needle .nr-head{display:block}.gx-needle .nr-brand{margin-bottom:5px}.gx-needle .nr-tools{justify-content:flex-end}.gx-needle .nr-hud{gap:4px}.gx-needle .nr-stage{min-height:370px}.gx-needle .nr-panel{gap:6px;padding:10px}.gx-needle .nr-title{font-size:17px}.gx-needle .nr-eyebrow{font-size:8px}.gx-needle .nr-footer{font-size:9px}.gx-needle .nr-equipment strong{font-size:11px}}
@media(max-height:480px) and (orientation:landscape){.gx-needle .nr-shell:fullscreen,.gx-needle .nr-expanded{grid-template-columns:minmax(0,1fr) 145px;grid-template-rows:auto minmax(0,1fr) auto;gap:5px}.gx-needle .nr-shell:fullscreen .nr-head,.gx-needle .nr-expanded .nr-head{grid-column:1/3;flex-wrap:nowrap}.gx-needle .nr-shell:fullscreen .nr-stage,.gx-needle .nr-expanded .nr-stage{grid-column:1;grid-row:2/4;min-height:0}.gx-needle .nr-shell:fullscreen .nr-hud,.gx-needle .nr-expanded .nr-hud{grid-column:2;grid-row:2;grid-template-columns:1fr 1fr;align-content:start}.gx-needle .nr-shell:fullscreen .nr-controls,.gx-needle .nr-expanded .nr-controls{grid-column:2;grid-row:3;grid-template-columns:1fr;gap:5px}.gx-needle .nr-shell:fullscreen .nr-controls button,.gx-needle .nr-expanded .nr-controls button{min-height:42px}.gx-needle .nr-shell:fullscreen .nr-footer,.gx-needle .nr-expanded .nr-footer{display:none}.gx-needle .nr-shell:fullscreen .nr-panel,.gx-needle .nr-expanded .nr-panel{inset:5px;gap:5px;padding:8px;height:calc(100% - 10px);max-height:none;justify-content:flex-start}.gx-needle .nr-panel .nr-eyebrow{font-size:8px}.gx-needle .nr-panel .nr-title{font-size:17px}.gx-needle .nr-panel .nr-note{font-size:10px}.gx-needle .nr-panel .nr-modes{grid-template-columns:repeat(3,1fr);gap:4px}.gx-needle .nr-panel .nr-modes button{display:block;padding:5px;min-height:43px}.gx-needle .nr-panel .nr-modes strong{font-size:11px}.gx-needle .nr-panel .nr-modes span{font-size:8px;display:block}.gx-needle .nr-panel .nr-primary{min-height:35px;font-size:13px}.gx-needle .nr-panel select{min-height:29px;padding:4px}.gx-needle .nr-panel .nr-difficulty{font-size:10px}.gx-needle .nr-panel .nr-points strong{font-size:27px}.gx-needle .nr-panel .nr-result-stats{gap:4px}.gx-needle .nr-panel .nr-result-stats>div{padding:3px 6px;flex-direction:row;align-items:center;justify-content:space-between}.gx-needle .nr-panel .nr-result-stats span{font-size:9px}.gx-needle .nr-panel .nr-result-stats strong{font-size:13px}.gx-needle .nr-panel .nr-record-note{font-size:10px}.gx-needle .nr-panel .nr-equipment button{min-height:105px;gap:4px}.gx-needle .nr-panel .nr-equipment b{font-size:22px}.gx-needle .nr-panel .nr-equipment strong{font-size:11px}.gx-needle .nr-panel .nr-equipment span{font-size:9px}.gx-needle .nr-panel .nr-secondary{min-height:29px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.gx-needle *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.gx-needle{width:100%;box-sizing:border-box;scroll-margin-top:90px}.gx-needle .nr-stage{width:100%;max-width:100%;min-height:0}.gx-needle .nr-canvas{position:absolute;inset:0;min-width:0;min-height:0}.gx-needle .nr-title{color:#fff3db!important;border:0!important;padding:0!important;margin:0!important;background:none!important}.gx-needle .nr-title:before,.gx-needle .nr-title:after{display:none!important;content:none!important}.gx-needle .nr-panel>*{flex-shrink:0}.gx-needle .nr-stage:has(.nr-panel:not([hidden])){min-height:460px}
.gx-needle .nr-shell:fullscreen .nr-stage,.gx-needle .nr-expanded .nr-stage{min-height:0}.gx-needle .nr-shell:fullscreen .nr-panel[data-kind=lobby],.gx-needle .nr-expanded .nr-panel[data-kind=lobby]{gap:5px;padding:10px}.gx-needle .nr-shell:fullscreen .nr-panel[data-kind=lobby] .nr-note,.gx-needle .nr-expanded .nr-panel[data-kind=lobby] .nr-note{display:none}.gx-needle .nr-shell:fullscreen .nr-modes,.gx-needle .nr-expanded .nr-modes{grid-template-columns:repeat(3,1fr);gap:4px}.gx-needle .nr-shell:fullscreen .nr-modes button,.gx-needle .nr-expanded .nr-modes button{display:block;text-align:center;padding:5px;min-height:45px}.gx-needle .nr-shell:fullscreen .nr-modes strong,.gx-needle .nr-expanded .nr-modes strong{font-size:11px}.gx-needle .nr-shell:fullscreen .nr-modes span,.gx-needle .nr-expanded .nr-modes span{display:none}.gx-needle .nr-shell:fullscreen .nr-panel .nr-primary,.gx-needle .nr-expanded .nr-panel .nr-primary{min-height:38px;font-size:14px}
@media(max-height:480px) and (orientation:landscape){.gx-needle .nr-shell:fullscreen .nr-panel[data-kind=lobby],.gx-needle .nr-expanded .nr-panel[data-kind=lobby]{padding:8px;gap:4px}.gx-needle .nr-shell:fullscreen .nr-panel[data-kind=lobby] .nr-eyebrow,.gx-needle .nr-expanded .nr-panel[data-kind=lobby] .nr-eyebrow{display:none}.gx-needle .nr-shell:fullscreen .nr-panel[data-kind=lobby] .nr-primary,.gx-needle .nr-expanded .nr-panel[data-kind=lobby] .nr-primary{min-height:34px;font-size:13px}}
