body.hangar-walk-page { --bg: #0d0b0a; --panel: #17120f; --line: #4a3a2a; --gold: #d9a54a; --text: #efe6d8; --muted: #a99a86; }
.hangar-walk-page #main-content { padding-top: 100px; }
.hangar-walk-page .walk-heading { margin-bottom: 24px; }
  #stage { position: relative; margin: 0 auto; max-width: 1100px; border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line); background: #000; touch-action: none; user-select: none; }
  #stage canvas { display: block; width: 100%; }
  #toast { position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
    background: rgba(15,11,9,.88); border: 1px solid var(--gold); padding: 8px 16px; font-size: 14px;
    letter-spacing: .06em; opacity: 0; transition: opacity .3s; pointer-events: none; max-width: 90%;
    text-align: center; line-height: 1.6; line-break: strict; word-break: auto-phrase; }
  #toast.show { opacity: 1; }
  #toast b { color: var(--gold); display: block; font-size: 12px; letter-spacing: .2em; }
  #dialog { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    width: min(760px, calc(100% - 24px)); background: rgba(14,10,8,.94); border: 2px solid var(--gold);
    box-shadow: 0 0 0 4px rgba(0,0,0,.6); padding: 14px 18px 26px; display: none; cursor: pointer; }
  #dialog.show { display: block; }
  #dialog .name { color: var(--gold); font-size: 13px; letter-spacing: .14em; margin-bottom: 6px; }
  #dialog .text { font-size: 17px; line-height: 1.8; min-height: 3.6em; }
  #dialog .next { position: absolute; right: 14px; bottom: 6px; font-size: 12px; color: var(--muted);
    animation: blink 1s steps(2) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0; padding: 0; margin: -1px; }
  @media (prefers-reduced-motion: reduce) {
    #dialog .next { animation: none; } #toast { transition: none; } #dpad .knob { transition: none; } }
  #dialog.typing .next { visibility: hidden; }
  #pad { display: none; position: absolute; right: 12px; bottom: 12px; }
  #pad button { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold);
    background: rgba(14,10,8,.75); color: var(--gold); font: inherit; font-size: 15px; }
  #pad button:not(:disabled) { background: rgba(217,165,74,.28); box-shadow: 0 0 14px rgba(217,165,74,.55); }
  #pad button:disabled { opacity: .45; border-style: dashed; }
  #pad button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
  .touch-ui #dialog .next { display: none; }  /* スマホは右下の「次へ」と重複するので出さない */
  .walk-help { max-width: 1100px; margin: 10px auto; padding: 0 16px; font-size: 13px; color: var(--muted);
    line-height: 1.8; }
  .walk-help kbd { border: 1px solid var(--line); padding: 0 6px; border-radius: 3px; color: var(--text); }
  /* 十字キー（スマホ）。1枚の円盤で、触れた位置の向きに歩く（斜めも可） */
  #dpad { display: none; position: absolute; left: 12px; bottom: 12px; width: 132px; height: 132px;
    border-radius: 50%; border: 2px solid rgba(217,165,74,.7); background: rgba(14,10,8,.55);
    touch-action: none; }
  #dpad i { position: absolute; width: 0; height: 0; border: 11px solid transparent; opacity: .8; }
  #dpad .u { left: 55px; top: 8px; border-bottom: 14px solid var(--gold); border-top: 0; }
  #dpad .d { left: 55px; bottom: 8px; border-top: 14px solid var(--gold); border-bottom: 0; }
  #dpad .l { top: 55px; left: 8px; border-right: 14px solid var(--gold); border-left: 0; }
  #dpad .r { top: 55px; right: 8px; border-left: 14px solid var(--gold); border-right: 0; }
  #dpad .knob { position: absolute; left: 46px; top: 46px; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(217,165,74,.35); border: 2px solid var(--gold); transition: transform .06s; }
  .touch-ui #pad, .touch-ui #dpad { display: block; }
  .touch-ui.talking #dpad { display: none; }
  .touch-ui #dialog { bottom: 88px; }
  @media (pointer: coarse) { .walk-help .pc { display: none; } }
  @media (max-width: 600px) {
    #dialog { padding: 10px 14px 14px; }
    #dialog .name { font-size: 15px; }
    #dialog .text { font-size: 16px; min-height: 3.4em; }
    .walk-help { font-size: 14px; }
  }
  @media (pointer: fine) { .walk-help .touch { display: none; } }

@media (max-width: 600px) { .hangar-walk-page #main-content { padding-top: 80px; } }

html.map-embed.map-section-game .hangar-walk-page #main-content{ padding-top:0; }
html.map-embed.map-section-game .walk-page > .sec{ padding:18px 0; }
html.map-embed.map-section-game .walk-heading h1{ font-size:clamp(20px,4vw,32px); }
html.map-embed.map-section-game .walk-heading{ margin-bottom:12px; }