html, body { margin: 0; height: 100%; background: #000; overflow: hidden; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body { display: flex; align-items: center; justify-content: center;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; color: #f4efe2; }
/* 1280x720 の論理画面を JS で拡大縮小（レターボックス） */
#stage { position: relative; width: 1280px; height: 720px; transform-origin: 50% 50%; overflow: hidden; background: #000; }
#view { position: absolute; inset: 0; width: 1280px; height: 720px; display: block; }
#loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  letter-spacing: .4em; font-size: 22px; color: #ccc; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
.hud-bar { position: absolute; left: 32px; top: 28px; width: 260px; height: 10px; background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.5); }
.hud-bar > i { display: block; height: 100%; background: linear-gradient(90deg,#c84a3a,#f08a5a); width: 100%; transition: width .2s; }
.hud-label { position: absolute; left: 32px; top: 42px; font-size: 13px; letter-spacing: .2em; opacity: .8; text-shadow: 0 0 4px #000; }
.hud-grip { position: absolute; right: 40px; bottom: 40px; width: 84px; height: 84px; opacity: 0; transition: opacity .3s; }
.hud-grip.show { opacity: 1; }
.hud-boss { position: absolute; right: 32px; top: 28px; font-size: 14px; letter-spacing: .2em; text-align: right; text-shadow: 0 0 4px #000; }
.hud-boss b { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-left: 6px; vertical-align: -2px;
  background: radial-gradient(#e8fbff,#7ad0ff 60%,#2a70b0); box-shadow: 0 0 8px #8cf; }
.hud-boss b.dead { background: #333; box-shadow: none; }
.hud-msg { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: 40px; letter-spacing: .5em;
  text-shadow: 0 0 18px rgba(0,0,0,.9); opacity: 0; transition: opacity 1.2s; }
.hud-msg.show { opacity: 1; }
.hud-msg small { display: block; font-size: 16px; letter-spacing: .3em; margin-top: 14px; opacity: .85; }
.hud-sub { position: absolute; left: 0; right: 0; bottom: 70px; text-align: center; font-size: 18px; letter-spacing: .15em;
  text-shadow: 0 0 6px #000, 0 0 2px #000; opacity: 0; transition: opacity .5s; }
.hud-sub.show { opacity: 1; }
.hud-demo { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: 15px; letter-spacing: .25em;
  padding: 6px 18px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.35); animation: blink 2.4s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.hud-hub, .hud-quit { position: absolute; z-index: 5; pointer-events: auto; font: inherit; font-size: 14px; letter-spacing: .1em; color: #f4efe2; text-decoration: none; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.4); padding: 6px 16px; cursor: pointer; }
.hud-hub { top: 56px; left: 22px; display: none; }
.hud-quit { bottom: 22px; right: 22px; display: none; opacity: .7; }
.hud-fade { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 2.5s; }
.hud-fade.black { background: #000; }
.hud-help { position: absolute; left: 32px; bottom: 28px; font-size: 13px; line-height: 1.7; letter-spacing: .08em;
  background: rgba(0,0,0,.45); padding: 10px 14px; border-left: 2px solid rgba(255,255,255,.5); display: none; }
.hud-help.show { display: block; }
.hud-sound { position: absolute; right: 32px; bottom: 24px; font-size: 12px; opacity: .7; letter-spacing: .1em; }
.hud-letterbox { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height 1s; }
.hud-letterbox.top { top: 0; } .hud-letterbox.bottom { bottom: 0; }
.cine .hud-letterbox { height: 64px; }

/* ---------- 仮想キー ---------- */
#touch { position: absolute; inset: 0; display: none; }
#touch.on { display: block; }
.tc-look { position: absolute; right: 0; top: 0; width: 60%; height: 100%; }
.tc-stick { position: absolute; left: 70px; bottom: 70px; width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.3); }
.tc-knob { position: absolute; left: 60px; top: 60px; width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,.3); border: 2px solid rgba(255,255,255,.6); }
.tc-btn { position: absolute; width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 18px; letter-spacing: .1em; background: rgba(0,0,0,.3); border: 2px solid rgba(255,255,255,.5); color: #fff; }
.tc-btn.small { width: 72px; height: 72px; font-size: 14px; }
.tc-btn.active { background: rgba(255,255,255,.35); }
.tc-toggle { position: absolute; right: 16px; top: 70px; padding: 6px 10px; font-size: 12px; border: 1px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.35); pointer-events: auto; z-index: 5; }

/* 縦持ちのスマホには横向きを促す */
#rotate { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85); color: #eee; align-items: center; justify-content: center;
  text-align: center; font-size: 18px; letter-spacing: .2em; z-index: 10; pointer-events: none; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }