/* 엔진 DOM 층: 살피기 단추, 조이스틱, 화면 밖 화살표, DOM 창 자리 */
#game canvas { touch-action: none; display: block; }
#ui-layer > .nm-hud { position: absolute; inset: 0; pointer-events: none; }
#ui-layer > .nm-hud > .nm-act {
  position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(28px, env(safe-area-inset-bottom));
  min-width: 128px; min-height: 64px; padding: 12px 28px; pointer-events: auto;
  max-width: min(420px, calc(100% - 48px)); text-align: center; word-break: keep-all; overflow-wrap: anywhere;
  font: 700 calc(22px * var(--fs, 1)) / 1.2 var(--font-ui, system-ui, sans-serif);
  color: var(--paper, #f6efe2); background: var(--seal, #b8322a);
  border: 3px solid var(--paper, #f6efe2); border-radius: 999px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35); cursor: pointer;
}
#ui-layer > .nm-hud > .nm-act:focus-visible { outline: 4px solid #ffd76a; outline-offset: 3px; }
#ui-layer > .nm-hud > .nm-act[hidden] { display: none; }
/* 좁은 화면(휴대 전화 세로): 살피기 단추를 조금 작게, 가장자리에 조금 더 붙여 지도를 덜 가린다 */
@media (max-width: 520px) {
  #ui-layer > .nm-hud > .nm-act {
    right: max(14px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
    min-width: 112px; min-height: 56px; padding: 10px 22px; max-width: calc(100% - 28px);
    font-size: calc(19px * var(--fs, 1));
  }
}
.nm-joy {
  position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%;
  background: rgba(246, 239, 226, .18); border: 3px solid rgba(246, 239, 226, .55); pointer-events: none;
}
.nm-joy[hidden] { display: none; }
.nm-joy-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(246, 239, 226, .8); border: 3px solid rgba(43, 36, 32, .5); transform: translate(-50%, -50%);
}
.nm-arrows, .nm-mark-tags { position: absolute; inset: 0; pointer-events: none; }
/* 화면 밖 목표 화살표: 자리(0×0) 안에 뾰족한 표(돌림)와 이름표(화면 가운데 쪽) */
.nm-edge-arrow { position: absolute; width: 0; height: 0; pointer-events: none; }
.nm-edge-tip {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-left: 28px solid #ffd76a;
  filter: drop-shadow(0 0 2px #2b2420) drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
}
.nm-edge-arrow[hidden], .nm-edge-name[hidden], .nm-mark-tag[hidden] { display: none; }
/* 목표 이름표(화살표 곁, 화면 안 '!' 위) */
.nm-edge-name, .nm-mark-tag {
  position: absolute; box-sizing: border-box; width: max-content; max-width: min(11em, 42vw);
  padding: .15em .5em; border-radius: 8px; border: 2px solid #2b2420;
  background: rgba(255, 246, 216, .94); color: #2b2420; text-align: center;
  font: 700 calc(14px * min(var(--fs, 1), 1.25)) / 1.25 var(--font-ui, system-ui, sans-serif);
  word-break: keep-all; overflow-wrap: anywhere; white-space: normal;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
.nm-mark-tag { transform: translate(-50%, -100%); }
/* 화면 낭독기 알림(보이지 않음) */
.nm-hud-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#ui-layer > .nm-overlay-host {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 16, 12, .45); pointer-events: auto; z-index: 10;
}
#ui-layer > .nm-overlay-host[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .nm-act { transition: none; } }