*{ box-sizing:border-box; margin:0; padding:0 }
html,body{ width:100%; height:100%; overflow:hidden; background:#020409 }
body{
  font-family: Consolas, "Cascadia Mono", "Yu Gothic UI", Meiryo, monospace;
  color:#cfeeff; user-select:none; cursor:crosshair;
}
#cam{ position:fixed; width:2px; height:2px; opacity:0; pointer-events:none }
#fx{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:1 }   /* 100vhはモバイルのツールバー分ずれるため%指定 */

.panel{
  background:rgba(4,14,30,.55);
  border:1px solid rgba(0,240,255,.25);
  backdrop-filter:blur(8px);
  box-shadow:0 0 24px rgba(0,240,255,.08), inset 0 0 18px rgba(0,240,255,.05);
}

/* ---------- HUD ---------- */
#hud{ position:fixed; inset:0; z-index:10; pointer-events:none }
#hudTL{
  position:absolute; top:16px; left:16px; padding:10px 14px;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.htitle{ font-size:15px; letter-spacing:.35em; color:#eaffff; text-shadow:0 0 10px rgba(0,240,255,.9) }
.htitle .ver{ font-size:9px; letter-spacing:.2em; color:#6fdcff; opacity:.8 }
.live{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#00f0ff; box-shadow:0 0 8px #00f0ff; margin-right:8px;
  animation:blink 1.6s infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
#modeLabel{ margin-top:6px; font-size:10.5px; letter-spacing:.22em; color:#8fe8ff }

#hudTR{
  position:absolute; top:16px; right:16px; padding:10px 14px;
  display:flex; gap:18px; font-size:10px; letter-spacing:.18em; color:#7fd8ef;
  clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}
#hudTR b{
  display:block; margin-top:3px; font-size:14px; font-weight:400;
  color:#eaffff; text-shadow:0 0 8px rgba(0,240,255,.8);
}

#hint{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  font-size:10.5px; letter-spacing:.08em; color:rgba(160,225,255,.78);
  background:rgba(3,10,22,.5); border:1px solid rgba(0,240,255,.15);
  padding:7px 16px; backdrop-filter:blur(6px);
  max-width:94vw; text-align:center; line-height:1.8;
}
#hint b{ color:#aef3ff; font-weight:400 }

#recDot{
  position:fixed; top:88px; right:16px; z-index:11; display:none;
  font-size:10px; letter-spacing:.25em; color:#ff6b7d;
  border:1px solid rgba(255,90,110,.5); background:rgba(40,4,10,.5);
  padding:4px 10px; animation:blink 1.2s infinite;
}

.corner{
  position:absolute; width:22px; height:22px;
  border:0 solid rgba(0,240,255,.55);
  filter:drop-shadow(0 0 4px rgba(0,240,255,.6));
}
.corner.tl{ top:8px;    left:8px;   border-top-width:2px; border-left-width:2px }
.corner.tr{ top:8px;    right:8px;  border-top-width:2px; border-right-width:2px }
.corner.bl{ bottom:8px; left:8px;   border-bottom-width:2px; border-left-width:2px }
.corner.br{ bottom:8px; right:8px;  border-bottom-width:2px; border-right-width:2px }

/* ---------- エアタッチメニュー ---------- */
#menu{
  position:fixed; left:16px; top:50%; transform:translateY(-50%);
  z-index:12; padding:12px; display:flex; flex-direction:column; gap:8px;
}
.mtitle{ font-size:9px; letter-spacing:.3em; color:#5fc6e8; margin-bottom:4px }
.mbtn{
  --p:0;
  position:relative; pointer-events:auto;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  width:172px; padding:9px 12px;
  font:inherit; font-size:11px; letter-spacing:.2em; text-align:left;
  color:#9fe6ff; background:rgba(0,22,44,.45);
  border:1px solid rgba(0,240,255,.28); cursor:pointer;
  transition:border-color .15s, background .15s, color .15s, box-shadow .15s;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.mbtn i{ font-style:normal; font-size:9px; letter-spacing:.1em; opacity:.65 }
.mbtn:hover{ border-color:var(--c); color:#fff }
.mbtn.hot{
  border-color:var(--c); color:#fff;
  box-shadow:0 0 16px color-mix(in srgb, var(--c) 55%, transparent);
}
.mbtn.on{
  background:rgba(0,60,90,.5);
  background:color-mix(in srgb, var(--c) 20%, rgba(0,10,25,.5));
  border-color:var(--c); color:#fff; text-shadow:0 0 8px var(--c);
}
.mbtn .bar{
  position:absolute; left:0; bottom:0; height:2px;
  width:calc(var(--p) * 100%);
  background:var(--c); box-shadow:0 0 10px var(--c);
}

/* ---------- 起動画面 ---------- */
#boot{
  position:fixed; inset:0; z-index:30; display:grid; place-items:center;
  background:radial-gradient(ellipse at 50% 38%, rgba(0,50,85,.55), rgba(2,4,10,.97) 70%);
  transition:opacity .6s;
}
#boot.gone{ opacity:0; pointer-events:none }
.bootbox{
  width:min(540px, 92vw); padding:34px 38px; text-align:center;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.blogo{
  font-size:40px; letter-spacing:.38em; padding-left:.38em; color:#eaffff;
  text-shadow:0 0 18px rgba(0,240,255,.95), 0 0 60px rgba(0,240,255,.4);
  animation:flick 5s infinite;
}
@keyframes flick{
  0%,91%,94%,96%,100%{opacity:1} 92%{opacity:.55} 95%{opacity:.75}
}
.bsub{ margin-top:8px; font-size:10px; letter-spacing:.28em; color:#66d9ff }
.bdesc{ margin:22px 0 18px; font-size:12px; line-height:1.9; color:#b9e9ff }
.bstat{ font-size:10px; letter-spacing:.22em; color:#7fd8ef; margin:6px 0 }
.chip{
  display:inline-block; min-width:120px; padding:2px 10px; margin-left:8px;
  border:1px solid rgba(0,240,255,.3); color:#eaffff;
}
.chip.ok{ border-color:rgba(80,255,170,.6); color:#8fffcf; text-shadow:0 0 8px rgba(80,255,170,.7) }
.chip.err{ border-color:rgba(255,90,110,.6); color:#ff9aa8 }
#startBtn{
  margin-top:22px; font:inherit; font-size:14px; letter-spacing:.3em;
  color:#031018; background:linear-gradient(180deg,#19f2ff,#0ec2ef);
  border:none; padding:14px 34px; cursor:pointer;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow:0 0 26px rgba(0,240,255,.45);
  transition:transform .12s, box-shadow .2s;
}
#startBtn:hover{ transform:translateY(-1px); box-shadow:0 0 40px rgba(0,240,255,.75) }
#startBtn:disabled{ opacity:.55; cursor:wait }
#bootErr{ margin-top:14px; font-size:11px; line-height:1.7; color:#ff9aa8; min-height:1em }
.bnote{ margin-top:16px; font-size:9.5px; letter-spacing:.06em; color:rgba(140,200,230,.55); line-height:1.8 }

#credit{
  position:fixed; right:14px; bottom:64px; z-index:9; pointer-events:none;   /* 右下のプライバシートグルと重ねない */
  font-size:9px; letter-spacing:.2em; color:rgba(120,200,235,.4);
  writing-mode:vertical-rl;
}

/* ================================================================
   モバイル/タッチ対応(2026-07-10)— スイート共通(holo-style.css)と同方針
   上段左=タイトル / 2段目左=統計 / 下段=MODEメニューを横バー化
   右下はプライバシートグル(holo-privacy.js)専用レーンとして空ける
   ================================================================ */
body{ touch-action:manipulation; -webkit-tap-highlight-color:transparent }
.blogo{ font-size:clamp(24px, 8vw, 40px) }
.bootbox{ padding:clamp(20px, 5vw, 34px) clamp(16px, 5.5vw, 38px) }

@media (pointer:coarse){
  .mbtn{ padding:11px 12px }
}

@media (max-width:700px), (max-height:480px){
  #hudTL{ top:8px; left:8px; padding:7px 10px }
  .htitle{ font-size:12px; letter-spacing:.22em }
  .htitle .ver{ display:none }
  #modeLabel{ font-size:9px; letter-spacing:.1em }
  #hudTR{ top:56px; right:auto; left:8px; padding:5px 9px; gap:9px; font-size:8px; letter-spacing:.08em }
  #hudTR b{ font-size:11px; margin-top:2px }
  #hint{ display:none }
  #credit{ display:none }
  .corner{ display:none }
  #recDot{ top:56px; right:8px }
  #menu{
    left:8px; right:104px; top:auto; bottom:calc(8px + env(safe-area-inset-bottom));
    transform:none; flex-direction:row; flex-wrap:wrap; gap:5px; padding:7px 8px;
  }
  .mtitle{ display:none }
  .mbtn{ width:auto; flex:0 1 auto; min-width:84px; padding:9px 8px; font-size:9.5px; letter-spacing:.12em; gap:6px }
  .mbtn i{ display:none }
  body .hpv-wrap{ right:8px; bottom:calc(10px + env(safe-area-inset-bottom)) }
  body .hpv-wrap .hpv-row{ flex-direction:column; gap:6px; align-items:stretch }
  body .hpv-toast{ right:8px; bottom:auto; top:64px }
}