/* ============ NEON SIEGE — UI / HUD design system ============ */
:root{
  --bg:#05070d; --cy:#2bf5e5; --mg:#ff2d6f; --am:#ffb13d; --st:#8fa3b8;
  --pn:rgba(8,14,24,.82); --pn2:rgba(10,18,30,.92);
  --line:rgba(43,245,229,.28);
  --chip:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  --chipS:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg)}
body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic","Meiryo","Segoe UI",system-ui,sans-serif;
  color:#dff3f5;-webkit-font-smoothing:antialiased;user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hide{display:none!important}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}

/* film grain scanlines */
#scanlines{position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
#scanlines::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(2,4,9,.55) 100%)}

/* ---------- generic chamfer panel ---------- */
.panel{background:var(--pn);clip-path:var(--chip);border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 24px rgba(43,245,229,.06)}

/* ================= overlays ================= */
.ovl{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:
   linear-gradient(rgba(43,245,229,.045) 1px,transparent 1px) 0 0/100% 44px,
   linear-gradient(90deg,rgba(43,245,229,.045) 1px,transparent 1px) 0 0/44px 100%,
   radial-gradient(ellipse at 50% 110%,rgba(255,45,111,.14),transparent 55%),
   radial-gradient(ellipse at 50% -20%,rgba(43,245,229,.12),transparent 55%),
   rgba(4,6,12,.86)}
.card{position:relative;width:min(680px,92vw);max-height:88vh;overflow-y:auto;padding:34px 38px;
  background:var(--pn2);clip-path:var(--chip);border:1px solid var(--line);overflow:auto}
.card::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,transparent,var(--cy),transparent);opacity:.8}

.gameTitle{font-size:clamp(44px,7vw,76px);font-weight:900;letter-spacing:.12em;line-height:1;
  color:#eafffb;text-shadow:0 0 18px rgba(43,245,229,.65),0 0 60px rgba(43,245,229,.3)}
.gameTitle b{color:var(--mg);text-shadow:0 0 18px rgba(255,45,111,.7),0 0 60px rgba(255,45,111,.35)}
.sub{margin-top:8px;color:var(--st);letter-spacing:.42em;font-size:13px}
.subJp{margin-top:4px;color:var(--cy);letter-spacing:.3em;font-size:15px;opacity:.9}
.menuBtns{margin-top:34px;display:flex;flex-direction:column;gap:12px;width:300px}
.btn{position:relative;padding:13px 22px;text-align:left;font-weight:700;letter-spacing:.18em;
  background:rgba(43,245,229,.06);clip-path:var(--chipS);border:1px solid var(--line);
  transition:background .15s,transform .12s,box-shadow .15s}
.btn i{font-style:normal;color:var(--st);font-size:11px;letter-spacing:.28em;display:block;margin-top:2px}
.btn:hover{background:rgba(43,245,229,.16);box-shadow:0 0 18px rgba(43,245,229,.25);transform:translateX(3px)}
.btn:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.btn.pri{background:rgba(43,245,229,.18);border-color:var(--cy)}
.btn.pri:hover{background:rgba(43,245,229,.3)}
.btn.danger{border-color:rgba(255,45,111,.5);background:rgba(255,45,111,.08)}
.btn.danger:hover{background:rgba(255,45,111,.2);box-shadow:0 0 18px rgba(255,45,111,.3)}
/* 「VRで出撃」の強調(#122): VR対応環境で表示された時だけ付与。
   大型化+シアン→マゼンタのグラデ+脈動グローで最初に目が行くボタンにする */
.btn.vrBig{padding:20px 24px;font-size:19px;letter-spacing:.22em;
  background:linear-gradient(90deg,rgba(43,245,229,.30),rgba(255,45,111,.18));
  border-color:var(--cy);
  animation:vrGlow 1.5s ease-in-out infinite}
.btn.vrBig i{font-size:12px;color:#9fe8e0}
.btn.vrBig:hover{background:linear-gradient(90deg,rgba(43,245,229,.45),rgba(255,45,111,.28))}
@keyframes vrGlow{
  0%,100%{box-shadow:0 0 12px rgba(43,245,229,.35)}
  50%{box-shadow:0 0 32px rgba(43,245,229,.85),0 0 64px rgba(255,45,111,.30)}
}
#menuBest{margin-top:26px;color:var(--am);font-size:13px;letter-spacing:.12em}
.foot{margin-top:18px;color:#5b6c7d;font-size:11px;letter-spacing:.18em}
.foot.legal{margin-top:8px}
.foot.legal a{color:#71879b;text-decoration:none}
.foot.legal a:hover,.foot.legal a:focus{color:var(--cy);text-decoration:underline}

/* how / settings sub-panels */
.sheet{margin-top:22px;padding:20px 22px;background:rgba(6,10,18,.85);clip-path:var(--chipS);border:1px solid var(--line)}
.sheet h3{color:var(--cy);letter-spacing:.3em;font-size:13px;margin-bottom:14px}
.krow{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px dashed rgba(143,163,184,.18);font-size:14px}
.krow:last-child{border:0}
kbd{display:inline-block;min-width:30px;text-align:center;padding:2px 8px;font-weight:700;font-size:12px;
  color:var(--cy);background:rgba(43,245,229,.1);border:1px solid var(--line);border-radius:3px}
.set{display:grid;grid-template-columns:130px 1fr 56px;align-items:center;gap:12px;padding:8px 0;font-size:14px}
.set>*{min-width:0} /* グリッドのmin-content膨張ではみ出して右端の数値が切れるのを防止 */
.set output{text-align:right;color:var(--cy);font-variant-numeric:tabular-nums;white-space:nowrap}
.nameCtl{display:flex;gap:8px;align-items:center}
.nameCtl input{flex:1;min-width:0;max-width:200px}
.setStatusLine{height:18px;margin:-4px 0 0 142px;font-size:12px;font-weight:700;color:var(--cy);line-height:18px}
input[type=range]{appearance:none;height:4px;background:rgba(143,163,184,.3);border-radius:2px}
input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;background:var(--cy);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);cursor:pointer}
select,input[type=checkbox]{accent-color:var(--cy)}
select{background:#0a1220;color:#dff3f5;border:1px solid var(--line);padding:5px 8px}

/* ================= HUD ================= */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;font-variant-numeric:tabular-nums}
.corner{position:absolute;width:54px;height:54px;border:2px solid rgba(43,245,229,.4);opacity:.9}
.corner.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.corner.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.corner.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.corner.br{bottom:14px;right:14px;border-left:0;border-top:0}
@keyframes visor{0%,100%{opacity:.55}50%{opacity:.95}}
.corner{animation:visor 3.4s ease-in-out infinite}

.tag{font-size:10px;letter-spacing:.3em;color:var(--st)}

/* top-left: wave */
#waveBox{position:absolute;top:26px;left:84px;display:flex;gap:18px;align-items:baseline;
  padding:10px 18px;background:var(--pn);clip-path:var(--chipS);border:1px solid var(--line)}
#waveNum{font-size:34px;font-weight:900;color:var(--cy);text-shadow:0 0 12px rgba(43,245,229,.6)}
#enemiesLeft{font-size:20px;font-weight:800;color:var(--mg)}

/* top-right: score + credits + radar */
#scoreBox{position:absolute;top:26px;right:84px;text-align:right;display:flex;flex-direction:column;gap:6px}
#scoreBox .row{padding:8px 16px;background:var(--pn);clip-path:var(--chipS);border:1px solid var(--line);
  display:flex;gap:14px;justify-content:flex-end;align-items:baseline}
#scoreVal{font-size:22px;font-weight:900;color:#eafffb}
#creditsVal{font-size:18px;font-weight:800;color:var(--am);text-shadow:0 0 10px rgba(255,177,61,.5)}
#radar{position:absolute;top:128px;right:84px;width:150px;height:150px}

/* bottom-left: vitals */
#vitals{position:absolute;left:84px;bottom:34px;width:300px;padding:14px 18px;
  background:var(--pn);clip-path:var(--chip);border:1px solid var(--line)}
.vrow{display:flex;align-items:center;gap:10px;margin-top:8px}
.vrow:first-child{margin-top:0}
.vlab{width:30px;font-size:10px;letter-spacing:.2em;color:var(--st)}
.bar{flex:1;height:12px;background:rgba(143,163,184,.14);clip-path:var(--chipS);position:relative}
.bar>div{position:absolute;inset:0;width:100%;transition:width .18s ease-out}
#hpFill{background:linear-gradient(90deg,#15c9b4,var(--cy));box-shadow:0 0 12px rgba(43,245,229,.5)}
#hpFill.low{background:linear-gradient(90deg,#c9153f,var(--mg));box-shadow:0 0 14px rgba(255,45,111,.7)}
#arFill{background:linear-gradient(90deg,#5d7fd4,#9fb8ff)}
#fuelFill{background:linear-gradient(90deg,#c9831f,var(--am,#ffb13d));box-shadow:0 0 10px rgba(255,177,61,.4)}
.vnum{width:42px;text-align:right;font-weight:800;font-size:15px}

/* bottom-right: weapon */
#wBox{position:absolute;right:84px;bottom:34px;min-width:280px;padding:14px 18px;text-align:right;
  background:var(--pn);clip-path:var(--chip);border:1px solid var(--line)}
#wName{font-size:15px;font-weight:800;letter-spacing:.12em;color:#eafffb}
#wAmmo{margin-top:4px;font-weight:900}
#wMag{font-size:36px;color:var(--cy);text-shadow:0 0 12px rgba(43,245,229,.55)}
#wMag.low{color:var(--mg);text-shadow:0 0 12px rgba(255,45,111,.7)}
#wRes{font-size:17px;color:var(--st)}
#wSlots{margin-top:8px;display:flex;gap:6px;justify-content:flex-end}
#wSlots span{width:24px;height:24px;display:grid;place-items:center;font-size:12px;font-weight:800;
  color:var(--st);border:1px solid rgba(143,163,184,.35);clip-path:var(--chipS);background:rgba(143,163,184,.07)}
#wSlots span.on{color:#04141a;background:var(--cy);border-color:var(--cy);box-shadow:0 0 12px rgba(43,245,229,.6)}
#reloadBar{position:absolute;left:50%;top:58%;width:170px;height:6px;transform:translateX(-50%);
  background:rgba(143,163,184,.18);clip-path:var(--chipS)}
#reloadFill{height:100%;background:var(--cy);box-shadow:0 0 10px rgba(43,245,229,.7)}

/* crosshair / hitmarker */
#crosshair{position:absolute;left:50%;top:50%;width:0;height:0;--gap:7px}
#crosshair span{position:absolute;background:rgba(213,255,250,.92);box-shadow:0 0 4px rgba(43,245,229,.8);transition:background .08s,box-shadow .08s}
#crosshair.foe span{background:rgba(255,70,110,.95);box-shadow:0 0 7px rgba(255,45,111,.9)}
#crosshair .t{left:-1px;top:calc(-7px - var(--gap));width:2px;height:7px}
#crosshair .b{left:-1px;top:var(--gap);width:2px;height:7px}
#crosshair .l{top:-1px;left:calc(-7px - var(--gap));height:2px;width:7px}
#crosshair .r{top:-1px;left:var(--gap);height:2px;width:7px}
#crosshair::after{content:'';position:absolute;left:-1px;top:-1px;width:2px;height:2px;background:var(--cy)}
#hitmarker{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0}
#hitmarker span{position:absolute;width:2px;height:9px;background:#fff}
#hitmarker .a{transform:translate(-8px,-8px) rotate(45deg)}
#hitmarker .b{transform:translate(8px,-8px) rotate(-45deg)}
#hitmarker .c{transform:translate(-8px,8px) rotate(-45deg)}
#hitmarker .d{transform:translate(8px,8px) rotate(45deg)}
@keyframes hm{0%{opacity:1;transform:scale(1.35)}100%{opacity:0;transform:scale(.8)}}
#hitmarker.on{animation:hm .22s ease-out forwards}
#hitmarker.crit span{background:var(--mg);box-shadow:0 0 6px var(--mg)}

/* scope */
#scopeOverlay{position:fixed;inset:0;z-index:22;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 0 29vmin,rgba(2,4,8,.985) 30.5vmin)}
#scopeOverlay::before,#scopeOverlay::after{content:'';position:absolute;left:50%;top:50%;background:rgba(43,245,229,.7)}
#scopeOverlay::before{width:58vmin;height:1px;transform:translate(-50%,-50%)}
#scopeOverlay::after{height:58vmin;width:1px;transform:translate(-50%,-50%)}

/* damage feedback */
/* 被弾時の血ビネット: 画面端の不規則な血だまり+中央へ向かう赤で「殴られた感」を出す */
#dmgVignette{position:fixed;inset:0;z-index:21;pointer-events:none;opacity:0;
  background:
    radial-gradient(ellipse 42% 38% at 12% 24%,rgba(165,0,25,.55) 0%,transparent 70%),
    radial-gradient(ellipse 40% 44% at 90% 60%,rgba(165,0,25,.5) 0%,transparent 70%),
    radial-gradient(ellipse 55% 34% at 50% 100%,rgba(150,0,20,.6) 0%,transparent 72%),
    radial-gradient(ellipse 46% 36% at 42% 0%,rgba(150,0,20,.45) 0%,transparent 70%),
    radial-gradient(ellipse at center,transparent 32%,rgba(190,10,40,.5) 74%,rgba(110,0,12,.95) 100%)}
#flashWhite{position:fixed;inset:0;z-index:23;background:#fff;opacity:0;pointer-events:none}
#dmgDir{position:fixed;left:50%;top:50%;z-index:21;pointer-events:none}
/* クロスヘアを囲む赤アーク(上=被弾方向)。回転と減衰はJSが毎フレーム更新 */
.ddir{position:absolute;left:-105px;top:-105px;width:210px;height:210px;border-radius:50%;
  border:9px solid transparent;border-top-color:rgba(255,45,90,.95);
  filter:drop-shadow(0 0 12px rgba(255,45,90,.85))}
.ddir::before{content:'';position:absolute;left:50%;top:-16px;margin-left:-11px;
  border-left:11px solid transparent;border-right:11px solid transparent;
  border-bottom:13px solid rgba(255,45,90,.95)}

/* damage numbers */
#dmgNums{position:fixed;inset:0;z-index:21;pointer-events:none;overflow:hidden}
.dnum{position:absolute;left:0;top:0;opacity:0;font-weight:900;font-size:17px;color:#eafffb;
  text-shadow:0 0 6px rgba(43,245,229,.8),0 1px 2px #000;letter-spacing:.02em;will-change:transform,opacity}
.dnum.crit{font-size:23px;color:var(--am);text-shadow:0 0 10px rgba(255,45,111,.9),0 1px 2px #000}
.dnum.heal{color:#3dff88;text-shadow:0 0 8px rgba(61,255,136,.8)}
.dnum.cred{color:var(--am);text-shadow:0 0 8px rgba(255,177,61,.8)}

/* killfeed / hints / combo */
#killfeed{position:absolute;left:84px;top:110px;display:flex;flex-direction:column;gap:6px;max-width:340px}
.kf{padding:6px 12px;font-size:13px;background:rgba(8,14,24,.7);border-left:2px solid var(--cy);
  clip-path:var(--chipS);transform:translateX(-8px);animation:kfin .2s ease-out forwards}
@keyframes kfin{to{transform:none}}
.kf.out{opacity:0;transition:opacity .3s}
.kf .cr{color:var(--am)} .kf .hd{color:var(--mg);font-weight:800;font-size:11px;letter-spacing:.1em}
.kf .wr{color:var(--am);font-weight:800} .kf .pk{color:var(--cy)}
#comboTag{position:absolute;left:50%;top:23%;transform:translateX(-50%);padding:8px 18px;text-align:center;
  background:var(--pn);clip-path:var(--chipS);border:1px solid rgba(255,177,61,.5);font-size:13px;letter-spacing:.14em}
#comboTag b{color:var(--am);font-size:18px;margin-right:8px}
#comboTag::after{content:'';display:block;height:3px;margin-top:6px;background:var(--am);
  width:calc(var(--ct,1)*100%);transition:width .1s linear}
#hintBox{position:absolute;left:50%;bottom:140px;transform:translateX(-50%);padding:10px 20px;font-size:14px;
  background:var(--pn);clip-path:var(--chipS);border:1px solid var(--line)}
#relockTip{position:absolute;left:50%;top:50%;transform:translate(-50%,80px);padding:10px 22px;font-weight:700;
  letter-spacing:.18em;background:rgba(255,45,111,.14);border:1px solid var(--mg);clip-path:var(--chipS);pointer-events:none}
#fpsTag{position:absolute;right:16px;bottom:8px;font-size:11px;color:#5b6c7d;letter-spacing:.1em}

/* banner */
#banner{position:fixed;left:0;right:0;top:16%;z-index:25;text-align:center;pointer-events:none;opacity:0}
#banner.show{opacity:1}
#bannerTitle{font-size:clamp(34px,5.4vw,58px);font-weight:900;letter-spacing:.22em;color:#eafffb;
  text-shadow:0 0 22px rgba(43,245,229,.7)}
#banner.warn #bannerTitle{color:#ffe9f0;text-shadow:0 0 24px rgba(255,45,111,.85)}
#banner.good #bannerTitle{text-shadow:0 0 24px rgba(61,255,176,.8)}
#bannerSub{margin-top:6px;color:var(--st);letter-spacing:.4em;font-size:14px}
@keyframes bglitch{0%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px) skewX(2deg)}60%{transform:translateX(-2px)}100%{transform:none}}
#banner.show #bannerTitle{animation:bglitch .34s steps(2) 2}

/* boss bar */
#bossBar{position:fixed;left:50%;top:9%;z-index:24;width:min(560px,70vw);transform:translateX(-50%);pointer-events:none}
#bossName{text-align:center;font-size:13px;letter-spacing:.34em;color:var(--mg);font-weight:800;margin-bottom:6px;
  text-shadow:0 0 10px rgba(255,45,111,.7)}
#bossTrack{height:10px;background:rgba(143,163,184,.15);clip-path:var(--chipS);border:1px solid rgba(255,45,111,.4)}
#bossFill{height:100%;width:100%;background:linear-gradient(90deg,#7a0e2e,var(--mg));
  box-shadow:0 0 14px rgba(255,45,111,.7);transition:width .15s ease-out}

/* ================= shop ================= */
#shop .card{width:min(760px,94vw)}
#shopHead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
#shopHead h2{font-size:24px;letter-spacing:.26em}
#shopHead h2 i{font-style:normal;color:var(--st);font-size:11px;letter-spacing:.32em;display:block}
#shopMeta{display:flex;gap:18px;align-items:baseline;font-size:14px}
#shopCredits{color:var(--am);font-weight:900;font-size:24px}
#interTimer{color:var(--mg);font-weight:900;font-size:24px;min-width:42px;text-align:center}
#shopStats{display:flex;gap:22px;margin-top:10px;color:var(--st);font-size:13px}
#shopStats b{color:#dff3f5;margin-left:6px}
#shopList{margin-top:14px;max-height:46vh;overflow:auto;padding-right:6px;display:flex;flex-direction:column;gap:8px}
.sgroup{margin-top:10px;color:var(--cy);font-size:11px;letter-spacing:.36em}
.srow{display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:left;
  padding:10px 14px;background:rgba(43,245,229,.05);border:1px solid rgba(143,163,184,.25);clip-path:var(--chipS);
  transition:background .12s}
.srow:hover:not(:disabled){background:rgba(43,245,229,.14)}
.srow:disabled{opacity:.45;cursor:default}
.srow.owned{border-color:rgba(61,255,136,.4)}
.srow .sl b{display:block;font-size:15px}
.srow .sl i{font-style:normal;font-size:10px;letter-spacing:.26em;color:var(--st)}
.srow .sl em{font-style:normal;display:block;font-size:12px;color:#9db4c4;margin-top:3px}
.srow .sp{font-weight:900;color:var(--am);white-space:nowrap}
.srow.owned .sp{color:#3dff88}
#shopFoot{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:14px}
#shopFoot .tag{max-width:300px;line-height:1.6}
#btnDeploy{font-size:17px;letter-spacing:.3em;padding:15px 34px}

/* ================= pause / over ================= */
.pTitle{font-size:34px;font-weight:900;letter-spacing:.3em;margin-bottom:8px}
.statGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;margin:22px 0}
.statGrid .st{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(143,163,184,.2);padding:7px 2px;font-size:14px}
.statGrid .st b{font-variant-numeric:tabular-nums;color:#eafffb}
#ovScoreBig{font-size:54px;font-weight:900;color:var(--cy);text-shadow:0 0 20px rgba(43,245,229,.6);margin:4px 0 2px}
#ovBestTag{color:var(--st);letter-spacing:.18em;font-size:13px}
#ovBestTag.nw{color:var(--am);text-shadow:0 0 12px rgba(255,177,61,.7);font-weight:800}
.overRed h2{color:var(--mg);text-shadow:0 0 22px rgba(255,45,111,.8)}
.rowBtns{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}

@media (max-width:760px){
  #waveBox,#killfeed{left:20px}#scoreBox,#radar,#wBox{right:20px}#vitals{left:20px;width:240px}
  .corner{display:none}
}
@media (prefers-reduced-motion:reduce){
  .corner{animation:none}
  #banner.show #bannerTitle{animation:none}
  .kf{animation:none;transform:none}
  *{transition-duration:.01ms!important}
}

/* menu shows the living city behind it */
#menu.ovl{background:rgba(4,6,12,.34);backdrop-filter:blur(1.5px)}

/* ============ touch controls ============ */
body{position:fixed;inset:0;overscroll-behavior:none}
#c{touch-action:none}
#touchUI{position:fixed;inset:0;z-index:24;pointer-events:none}
#lookZone{position:absolute;inset:0;pointer-events:auto;touch-action:none}
#stickZone{position:absolute;left:0;bottom:0;width:46%;height:62%;pointer-events:auto;touch-action:none}
#stickBase{position:absolute;left:34px;bottom:calc(34px + env(safe-area-inset-bottom,0px));width:124px;height:124px;border-radius:50%;
  border:2px solid rgba(43,245,229,.45);background:rgba(10,16,26,.32);box-shadow:inset 0 0 18px rgba(43,245,229,.22)}
#stickNub{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  background:rgba(43,245,229,.26);border:2px solid var(--cy);box-shadow:0 0 14px rgba(43,245,229,.55)}
#tcCluster{position:absolute;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));
  width:236px;height:212px;pointer-events:none}
.tcBtn{position:absolute;pointer-events:auto;touch-action:none;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:2px solid rgba(43,245,229,.55);background:rgba(8,13,22,.55);color:#bff7f1;
  font-weight:800;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  box-shadow:0 0 12px rgba(43,245,229,.16);font-size:19px}
.tcBtn.press{transform:scale(.92);background:rgba(43,245,229,.22)}
.tcBtn.on{background:rgba(43,245,229,.42);color:#04201d;box-shadow:0 0 18px rgba(43,245,229,.8)}
.tcBtn.big{width:96px;height:96px;right:0;bottom:30px;font-size:32px;border-color:rgba(255,45,111,.7);color:#ffd2e0;
  background:rgba(34,8,18,.5);box-shadow:0 0 16px rgba(255,45,111,.3)}
.tcBtn.big.press{background:rgba(255,45,111,.4)}
#tcJump{width:60px;height:60px;right:112px;bottom:14px}
#tcAim{width:60px;height:60px;right:112px;bottom:86px}
#tcRel{width:52px;height:52px;right:6px;bottom:142px}
#tcWpn{width:52px;height:52px;right:68px;bottom:152px}
#tcCrouch{width:48px;height:48px;right:182px;bottom:44px}
#tcPause{width:44px;height:44px;top:calc(10px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));font-size:14px}
/* make room for thumbs */
body.touch #wBox{right:12px;bottom:252px;transform:scale(.8);transform-origin:100% 100%}
body.touch #vitals{left:12px;bottom:212px;transform:scale(.85);transform-origin:0 100%}
body.touch #hintBox,body.touch #relockTip{display:none!important}
.howTouch{margin:14px 0 4px;color:var(--am);font-size:12px;line-height:1.7}
/* 操作説明(グリッド版): キー右寄せ+説明の2ペア×2列で視線が揃う */
.howSec{margin:16px 0 8px;color:var(--cy);font-weight:800;letter-spacing:.14em;font-size:13px;
  border-bottom:1px solid rgba(43,245,229,.25);padding-bottom:4px}
.howSec:first-of-type{margin-top:6px}
/* 1行1ペア(キー|説明)・点線区切りで行が揃う。4列詰めは折返しでガタガタになっていた */
.kgrid{display:grid;grid-template-columns:minmax(130px,max-content) 1fr;gap:0 18px;align-items:center;font-size:13.5px}
.kgrid>span{padding:6px 0;border-bottom:1px dashed rgba(143,163,184,.16)}
.kgrid>span:nth-last-child(-n+2){border-bottom:0}
.kgrid .kk{text-align:right;color:var(--am);white-space:nowrap;font-weight:700}
.howNote{margin-top:16px;color:var(--st);font-size:12.5px;line-height:1.7}
/* オンラインランキング(リザルト) */
#ovRank{margin:14px auto 0;max-width:430px;text-align:left}
.rkHead{color:var(--cy);font-weight:800;letter-spacing:.12em;font-size:13px;margin-bottom:6px;
  border-bottom:1px solid rgba(43,245,229,.3);padding-bottom:4px}
.rkHead b{color:var(--am)}
.rkRow{display:flex;gap:10px;align-items:baseline;padding:3px 6px;font-size:14px}
.rkRow.me{background:rgba(255,177,61,.14);color:var(--am)}
.rkN{width:22px;text-align:right;color:var(--st)}
.rkName{flex:1;font-weight:700}
.rkD{color:var(--st);font-size:11px;min-width:38px;text-align:right;opacity:.8} /* 登録日(#123) */
.rkW{color:var(--st);font-size:12px}
.rkS{font-weight:800;min-width:74px;text-align:right}
/* 設定の名前入力 */
.set input[type=text]{background:rgba(143,163,184,.12);border:1px solid var(--line);color:#eafffb;
  padding:6px 10px;font:inherit}
.btn.mini{padding:5px 10px;font-size:14px;min-width:0}
#setStatus{color:var(--cy);font-size:12px;font-weight:700;white-space:nowrap}
/* ============ small screens ============ */
@media (pointer:coarse),(max-width:880px){
  .corner{display:none}
  #radar{top:60px;right:10px;width:96px;height:96px}
  #killfeed{left:10px;top:54px;max-width:46vw;font-size:11px}
  #comboTag{top:14%}
  #bossBar{top:5.5%;width:min(420px,62vw)}
  #fpsTag{top:64px;right:118px;bottom:auto}
  .card{padding:22px 18px;max-height:88dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .menuBtns{width:min(300px,86vw)}
  .gameTitle{font-size:clamp(34px,9vw,56px)}
}

/* slot-tap weapon select + layering: HUD above touch zones, taps fall through */
#touchUI{z-index:18}
#tcPause{left:50%;right:auto;transform:translateX(-50%);top:calc(6px + env(safe-area-inset-top,0px))}
#tcPause.press{transform:translateX(-50%) scale(.92)}
body.touch #wSlots{pointer-events:auto}
body.touch #wSlots span{width:34px;height:34px;font-size:14px}


/* 出撃前ローディング */
/* 背景は完全不透明(#120): .ovl既定の86%だと裏の3D描画(ロード中でカクつく)が
   透けて「ラグって見える」。裏の描画はシェーダー予熱のため止めずに、見せない。
   動きはコンポジタ駆動のCSSアニメで出す=メインスレッドが詰まっても滑らかに動く */
#loading{z-index:35; /* menu(30)より確実に前面へ。backdrop-filter付きmenuと同値だと環境により合成順が逆転する */
  background:
   linear-gradient(rgba(43,245,229,.05) 1px,transparent 1px) 0 0/100% 44px,
   linear-gradient(90deg,rgba(43,245,229,.05) 1px,transparent 1px) 0 0/44px 100%,
   radial-gradient(ellipse at 50% 110%,rgba(255,45,111,.16),transparent 55%),
   radial-gradient(ellipse at 50% -20%,rgba(43,245,229,.14),transparent 55%),
   #04060c}
#loading::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(43,245,229,.07) 50%,transparent 100%) 0 0/100% 180px no-repeat;
  animation:loadScan 2.8s linear infinite}
@keyframes loadScan{from{background-position:0 -180px}to{background-position:0 calc(100vh + 180px)}}
#loading .card{background:rgba(10,14,24,.55)} /* カードも軽く締める(裏は不透明なので装飾のみ) */
#loadTrack{width:min(420px,70vw);height:10px;margin:26px auto 10px;background:rgba(143,163,184,.18);
  border:1px solid rgba(43,245,229,.4);overflow:hidden}
#loadFill{position:relative;width:0%;height:100%;background:linear-gradient(90deg,#178f8a,#2bf5e5);
  box-shadow:0 0 12px rgba(43,245,229,.7);transition:width .15s linear;overflow:hidden}
#loadFill::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-100%);animation:loadGlint 1.3s ease-in-out infinite}
@keyframes loadGlint{to{transform:translateX(100%)}}
#loadTxt{animation:loadPulse 1.6s ease-in-out infinite}
@keyframes loadPulse{0%,100%{opacity:.9}50%{opacity:.45}}