:root {
  --panel: rgba(255, 255, 255, 0.92);
  --ink: #1f2933;
  --accent: #2f6f4f;
  --line: rgba(31, 41, 51, 0.18);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #cfe4f5; color: var(--ink);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
button { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; min-height: 44px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:active, button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
[hidden] { display: none !important; }

#gate { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; background: #eef3f6; }
#gate h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: 0.02em; }
#gate p { margin: 0; min-height: 1.4em; }
#gate-row { display: flex; gap: 8px; }
#gate-pw { font: inherit; font-size: 18px; width: 150px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 10px; text-align: center; -webkit-user-select: text; user-select: text; }
#gate.bad #gate-pw { border-color: #c0392b; }

#bar { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); display: flex; gap: 8px; z-index: 3; }
#btn-full { padding: 10px 12px; display: flex; align-items: center; }
#btn-full .leave, body.full #btn-full .enter { display: none; }
body.full #btn-full .leave { display: inline; }
#menu { position: fixed; top: calc(68px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); z-index: 3;
  width: 240px; padding: 12px; max-height: calc(100vh - 90px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  display: flex; flex-direction: column; gap: 6px; }
#menu label { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
#menu input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
#menu .group { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
#menu .group .title { width: 100%; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
#places { display: flex; flex-wrap: wrap; gap: 6px; }
#menu .group button { padding: 8px 12px; min-height: 40px; }

#hint { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; z-index: 2;
  max-width: calc(100vw - 24px); padding: 8px 14px; border-radius: 10px; background: rgba(31, 41, 51, 0.72); color: #fff; font-size: 13px;
  text-align: center; pointer-events: none; }

/* touch controls: shown only on touch devices while walking */
#stick, #btn-ghost { display: none; }
body.touch.walk #stick { display: block; }
body.touch.walk #btn-ghost { display: block; }
body.touch #hint { bottom: auto; top: calc(68px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); transform: none;
  max-width: calc(100vw - 260px); text-align: left; }
#stick { position: fixed; left: calc(22px + env(safe-area-inset-left)); bottom: calc(26px + env(safe-area-inset-bottom)); z-index: 2;
  width: 132px; height: 132px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); border: 2px solid rgba(255, 255, 255, 0.75);
  touch-action: none; }
#knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); pointer-events: none; }
#btn-ghost { position: fixed; right: calc(22px + env(safe-area-inset-right)); bottom: calc(40px + env(safe-area-inset-bottom)); z-index: 2;
  border-radius: 24px; padding: 12px 16px; }

#menu label.slider { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; min-height: 0; cursor: default; }
#menu label.slider b { font-weight: 600; }
#menu input[type=range] { width: 100%; height: 28px; margin: 0; accent-color: var(--accent); touch-action: pan-y; }
body.walk #view { cursor: grab; }
body.walk #view:active { cursor: grabbing; }