html, body { margin: 0; height: 100%; overflow: hidden; background: #101418; color: #eee;
  font-family: "Pretendard", system-ui, sans-serif; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#scene { touch-action: none; outline: none; cursor: grab; }
#scene[data-look-state="dragging"] { cursor: grabbing; }
#scene[data-look-state="locked"] { cursor: none; }
#scene[data-mode="overview"] { cursor: grab; }
#crosshair { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 22px; color: #fff; opacity: .8; pointer-events: none; }
#hud { position: fixed; top: 0; left: 0; right: 0; display: flex; gap: 8px; align-items: center;
  padding: 8px 12px; background: rgba(10, 14, 18, .72); }
#hud button { cursor: pointer; }
#hud { z-index: 20; flex-wrap: wrap; backdrop-filter: blur(8px); }
#hud button { padding: 6px 10px; border: 1px solid #ffffff35; border-radius: 5px; color: #f1f4f0; background: #ffffff12; }
#hud button:hover { background: #ffffff28; }
#lock-status { position: fixed; z-index: 25; left: 12px;
  top: calc(var(--hud-height, 52px) + 10px); display: flex; align-items: center; gap: 10px;
  min-width: 210px; padding: 10px 13px; border: 1px solid rgba(212, 241, 186, .78);
  border-radius: 9px; background: rgba(19, 37, 27, .94); color: #f4faef;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .38), inset 3px 0 0 #9fd27f;
  pointer-events: none; backdrop-filter: blur(8px); }
#lock-status[hidden] { display: none; }
.lock-status-icon { display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(159, 210, 127, .18); font-size: 17px; }
.lock-status-copy { display: grid; gap: 1px; }
.lock-status-copy strong { font-size: 13px; letter-spacing: .02em; color: #dff5d2; }
.lock-status-copy > span { font-size: 12px; color: #f4faef; }
#sensitivity-control { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; }
#look-sensitivity { width: 90px; accent-color: #b9d2ae; }
#input-status { position: fixed; z-index: 15; left: 14px; bottom: 52px; padding: 8px 12px; border-radius: 7px; background: #13251bcc; color: #edf3e9; font-size: 13px; max-width: calc(100vw - 270px); pointer-events: none; }
#input-status[hidden], #help[hidden], #error[hidden] { display: none; }
#help { z-index: 30; }
#loading { z-index: 40; }
#error { z-index: 50; }
@media (max-width: 640px) {
  #hud { gap: 5px; padding: 8px; }
  #hud strong { width: 100%; font-size: 14px; }
  #hud button { padding: 7px; font-size: 12px; }
  #sensitivity-control { margin-left: 0; }
  #lock-status { left: 8px; right: 8px; min-width: 0; width: fit-content;
    max-width: calc(100vw - 42px); padding: 9px 12px; }
  #input-status { bottom: 110px; max-width: calc(100vw - 185px); font-size: 11px; }
  #minimap { width: 136px !important; height: 136px !important; bottom: 90px !important; right: 10px !important; }
  #license-notice { font-size: 10px; line-height: 1.4; }
  #help { top: 110px; left: 10px; right: 10px; width: auto; }
}
#mode-badge { background: #2c6e49; border-radius: 4px; padding: 2px 8px; font-size: 13px; }
#help { position: fixed; top: 48px; right: 12px; width: 300px; background: rgba(10,14,18,.9);
  border: 1px solid #444; border-radius: 8px; padding: 12px 16px; }
#license-notice { position: fixed; left: 0; right: 0; bottom: 0; padding: 6px 12px;
  font-size: 12px; background: rgba(80, 60, 10, .85); color: #ffe9b0; }
#license-notice code { color: #fff; }
#loading { position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(10, 14, 18, .85); font-size: 18px; }
#loading.done { display: none; }
#error { position: fixed; left: 12px; top: 56px; max-width: 420px; background: #5a1a1a;
  padding: 10px 14px; border-radius: 8px; white-space: pre-wrap; }
#minimap { position: fixed; right: 16px; bottom: 40px; width: 200px; height: 200px;
  background: rgba(10, 14, 18, .55); border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 12px; cursor: crosshair; z-index: 10; pointer-events: auto; touch-action: none; }
#minimap-label { position: fixed; z-index: 11; right: 26px; bottom: 247px; padding: 4px 7px;
  border-radius: 4px; background: #13251bd9; color: #f4f8f1; font-size: 11px; pointer-events: none; }
@media (max-width: 640px) { #minimap-label { right: 18px; bottom: 232px; font-size: 10px; } }

#version-tabs { position: fixed; z-index: 20; top: calc(var(--hud-height, 52px) + 6px); left: 12px;
  display: flex; gap: 6px; max-width: calc(100vw - 240px); overflow-x: auto; padding: 4px 2px; }
#version-tabs button { flex: 0 0 auto; padding: 5px 10px; font-size: 12px; white-space: nowrap;
  border: 1px solid #ffffff35; border-radius: 20px; color: #f1f4f0; background: rgba(10,14,18,.72); cursor: pointer; }
#version-tabs button:hover { background: #ffffff28; }
#version-tabs button.active { background: #2c6e49; border-color: #7fc79a; cursor: default; }
@media (max-width: 640px) { #version-tabs { max-width: calc(100vw - 24px); } }

/* --- Password access gate: covers the whole viewport above every HUD layer --- */
#access-gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: #101418; }
#access-gate[hidden] { display: none; }
.access-card { width: min(360px, calc(100vw - 48px)); padding: 26px 26px 22px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; box-sizing: border-box;
  background: rgba(16, 20, 24, .97); box-shadow: 0 18px 60px rgba(0, 0, 0, .5); }
.access-card h1 { margin: 0 0 4px; font-size: 20px; color: #f1f4f0; letter-spacing: .01em; }
.access-sub { margin: 0 0 18px; font-size: 12.5px; color: #9fb0a3; }
#access-pass { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 15px;
  color: #f1f4f0; background: #0c1013; border: 1px solid rgba(255, 255, 255, .3); border-radius: 8px;
  outline: none; }
#access-pass:focus { border-color: #9fd27f; }
#access-submit { margin-top: 12px; width: 100%; padding: 10px 0; font-size: 14px; cursor: pointer;
  border: 1px solid rgba(159, 210, 127, .4); border-radius: 8px; color: #10241a; background: #b9d2ae; }
#access-submit:hover { background: #cbe3bf; }
.access-error { margin: 12px 0 0; font-size: 13px; color: #ff9d8f; }
@media (max-width: 640px) { .access-card { padding: 22px 18px; } }