html, body { margin: 0; height: 100%; background: #000; overflow: hidden; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body { font-family: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif; color: #fff; }
#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; image-rendering: pixelated; }

/* タイトルの「HUBへ戻る」（タイトル表示中だけ出す） */
#hublink { position: fixed; left: 8px; top: 8px; z-index: 20; padding: 4px 8px; border: 2px solid #fcfcfc; background: rgba(0,0,0,.7);
  color: #fcfcfc; text-decoration: none; font-size: 12px; font-weight: bold; letter-spacing: .05em; display: none; }
#hublink:hover { background: #e40028; }
body.title #hublink { display: block; }

/* 仮想キー */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 10; display: none; }
body.touch #touch { display: block; }
#touch > * { pointer-events: auto; position: absolute; touch-action: none; }
.tc-dpad { left: calc(16px + env(safe-area-inset-left)); bottom: 22px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.08); }
.tc-dpad i { position: absolute; background: rgba(255,255,255,.28); border: 2px solid rgba(255,255,255,.5); box-sizing: border-box; }
.tc-dpad i.on { background: rgba(255,207,63,.7); }
.tc-dpad .u { left: 52px; top: 4px; width: 46px; height: 52px; border-radius: 8px 8px 2px 2px; }
.tc-dpad .d { left: 52px; bottom: 4px; width: 46px; height: 52px; border-radius: 2px 2px 8px 8px; }
.tc-dpad .l { left: 4px; top: 52px; width: 52px; height: 46px; border-radius: 8px 2px 2px 8px; }
.tc-dpad .r { right: 4px; top: 52px; width: 52px; height: 46px; border-radius: 2px 8px 8px 2px; }
.tc-btn { width: 70px; height: 70px; border-radius: 50%; background: rgba(228,0,40,.45); border: 3px solid rgba(255,255,255,.6); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font: bold 22px sans-serif; box-sizing: border-box; }
.tc-btn small { font-size: 10px; font-weight: normal; }
.tc-btn.on { background: rgba(255,207,63,.8); color: #222; }
.b-jump { right: calc(16px + env(safe-area-inset-right)); bottom: 30px; }
.b-atk { right: calc(98px + env(safe-area-inset-right)); bottom: 70px; }
.b-sub, .b-next { width: 56px; height: 56px; font-size: 13px; background: rgba(32,56,236,.45); }
.b-sub { right: calc(30px + env(safe-area-inset-right)); bottom: 118px; }
.b-next { right: calc(110px + env(safe-area-inset-right)); bottom: 150px; }
.b-start, .b-esc { width: auto; height: 30px; padding: 0 10px; border-radius: 6px; font-size: 13px; background: rgba(0,0,0,.55); }
.b-start { right: calc(12px + env(safe-area-inset-right)); top: 10px; }
.b-esc { right: calc(100px + env(safe-area-inset-right)); top: 10px; }
body.title .b-esc, body.title .b-start { display: none; }

#rotate { display: none; position: fixed; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 12px; color: #aaa; z-index: 5; pointer-events: none; }
@media (orientation: portrait) {
  body.touch #rotate { display: block; }
  /* 縦向きはゲーム画面が上に寄るので、中断・メニューはその下へ */
  .b-start, .b-esc { top: calc(100vw * 240 / 256 + 18px); }
}