:root{
  --bg:#0B0E11; --panel:#15191D; --panel-2:#1C2126;
  --ink:#E4E9EC; --ink-soft:#9AA5AB; --ink-faint:#5E6A70;
  --line:rgba(228,233,236,0.14);
  --accent:#01BAEF; --accent-2:#3FD0FA;
  --mark:#d97f1f;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Code",Menlo,Consolas,monospace;
  --sans:'Rubik',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden}
button{font-family:inherit}

#walkMount{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden}

.walk-fallback{
  position:absolute;inset:0;display:grid;place-items:center;padding:2rem;
  text-align:center;color:var(--ink-soft);font-size:14px;line-height:1.6;
}

/* ---------------------------------------------------- idle establishing shot */
.walk-idle{position:absolute;inset:0}
.walk-idle canvas{display:block;width:100%;height:100%;cursor:pointer}

.walk-compass{
  position:absolute;top:16px;right:16px;width:28px;height:28px;
  opacity:0.9;pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.walk-compass__needle{display:block;transition:transform .15s ease}

.walk-pegman{
  position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:8px;
  background:rgba(21,25,29,0.82);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 6px;
}
.walk-pegman__button{
  width:32px;height:32px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--mark);display:grid;place-items:center;
  cursor:grab;touch-action:none;transition:background .15s ease,transform .15s ease;
}
.walk-pegman__button:hover{background:#242a30}
.walk-pegman__button--dragging{cursor:grabbing;transform:scale(1.08);background:#2a3138}
.walk-pegman__label{font-size:11.5px;color:var(--ink-soft);white-space:nowrap}

.walk-enter-cta-wrap{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
}
.walk-enter-cta{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#0B0E11;background:var(--accent);border:none;border-radius:8px;
  padding:12px 22px;cursor:pointer;box-shadow:0 6px 18px rgba(1,186,239,0.35);
  transition:background .15s ease,transform .15s ease;
}
.walk-enter-cta:hover{background:var(--accent-2);transform:translateY(-1px)}

.walk-idle-layers{
  position:absolute;left:16px;bottom:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  max-width:calc(100% - 32px);
}
.walk-idle-layers>button{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);background:rgba(21,25,29,0.82);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:999px;padding:6px 11px;cursor:pointer;
  transition:color .15s ease,border-color .15s ease;
}
.walk-idle-layers>button[aria-pressed="true"]{color:var(--accent-2);border-color:var(--accent)}
.walk-idle-relief{
  display:flex;align-items:center;gap:8px;
  background:rgba(21,25,29,0.82);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;
}
.walk-idle-relief span{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);white-space:nowrap}
.walk-idle-relief input[type="range"]{width:84px;accent-color:var(--accent)}

/* ---------------------------------------------------------- first-person takeover */
.walk-takeover{
  position:fixed;inset:0;z-index:80;background:#05070a;
  visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.walk-takeover.walk-takeover--active{visibility:visible;opacity:1;pointer-events:auto}
.walk-takeover canvas{display:block;width:100%;height:100%;cursor:none}

.walk-exit-btn{
  position:absolute;top:16px;right:16px;z-index:5;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);background:rgba(21,25,29,0.82);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:8px;padding:8px 14px;cursor:pointer;
}
.walk-exit-btn:hover{border-color:var(--accent);color:var(--accent-2)}

/* ---- HUD ---- */
.walk-hud{position:absolute;inset:0;pointer-events:none;font-family:var(--mono)}
.walk-hud__panel{
  position:absolute;background:rgba(11,14,17,0.72);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:10px;padding:10px 13px;
}
.walk-hud__panel--position{top:16px;left:16px;min-width:172px}
.walk-hud__panel--orientation{top:16px;right:16px;text-align:right}
.walk-hud__panel--legend{top:130px;left:16px;min-width:172px}
.walk-hud__panel--status{bottom:16px;right:16px;text-align:right;font-size:10.5px;color:var(--ink-faint)}
.walk-hud__panel--controls{bottom:16px;left:16px;max-width:260px}

.walk-hud__label{margin:0 0 3px;font-size:9.5px;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase}
.walk-hud__value{margin:0 0 2px;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink)}
.walk-hud__status-mode{margin:0;font-size:11px;letter-spacing:.06em;color:var(--accent-2)}
.walk-hud__status-fps{margin:2px 0 0;font-size:10.5px;color:var(--ink-faint)}

.walk-hud__minimap-box{position:relative;margin-bottom:8px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.walk-hud__minimap-img{display:block;width:100%;height:100%;object-fit:cover}
.walk-hud__north-label{position:absolute;top:3px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--ink-faint)}
.walk-hud__player{position:absolute;top:0;left:0;width:24px;height:24px;margin:-12px 0 0 -12px;pointer-events:none}
.walk-hud__player-marker{display:block;width:24px;height:24px}
.walk-hud__heading-row{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.walk-hud__needle{display:inline-block;color:var(--mark);font-size:13px;transition:transform .1s linear}

.walk-hud__legend-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.walk-hud__legend-item{display:flex;align-items:center;gap:7px;font-size:10.5px}
.walk-hud__swatch{width:11px;height:11px;border-radius:3px;flex:none}
.walk-hud__legend-label{color:var(--ink-soft);flex:1}
.walk-hud__legend-label--off{color:var(--ink-faint);text-decoration:line-through}
.walk-hud__legend-state{color:var(--ink-faint);font-size:9px;letter-spacing:.08em}

.walk-hud__controls-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 12px}
.walk-hud__controls-item{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--ink-faint)}
.walk-hud__key{color:var(--ink-soft);border:1px solid var(--line);border-radius:3px;padding:1px 5px;font-size:9.5px}
.walk-hud__action{text-transform:uppercase;letter-spacing:.04em}

/* ---- splash ---- */
.walk-splash{
  position:absolute;inset:0;z-index:20;display:grid;place-items:center;
  background:rgba(5,7,10,0.88);backdrop-filter:blur(3px);padding:1rem;cursor:default;
}
.walk-splash__inner{max-width:420px;text-align:center}
.walk-splash__eyebrow{margin:0 0 6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2)}
.walk-splash__heading{margin:0 0 10px;font-size:clamp(22px,4vw,30px);font-weight:600;letter-spacing:-.01em}
.walk-splash__body{margin:0 0 16px;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.walk-splash__stats{margin:0 0 20px;display:flex;flex-direction:column;gap:4px}
.walk-splash__stats dd{margin:0;font-family:var(--mono);font-size:12px;color:var(--ink)}
.walk-splash__cta{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#0B0E11;background:var(--accent);border:none;border-radius:8px;
  padding:12px 24px;cursor:pointer;margin-bottom:18px;
}
.walk-splash__cta:hover{background:var(--accent-2)}
.walk-splash__keybinds{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px}
.walk-splash__keybinds>div{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-faint)}
.walk-splash__key{border:1px solid var(--line);border-radius:3px;padding:1px 6px;font-family:var(--mono);font-size:10px;color:var(--ink-soft)}

/* ---- touch controls ---- */
.walk-touch{position:absolute;inset:0;z-index:6;pointer-events:none}
.walk-touch__move-zone{
  position:absolute;left:22px;bottom:22px;width:112px;height:112px;border-radius:999px;
  background:rgba(21,25,29,0.6);border:1px solid var(--line);pointer-events:auto;touch-action:none;
}
.walk-touch__move-zone--active{border-color:var(--accent)}
.walk-touch__move-nub{
  position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:999px;
  background:rgba(1,186,239,0.28);border:1px solid var(--accent);
  transform:translate(-50%,-50%);pointer-events:none;
}
.walk-touch__look-zone{
  position:absolute;right:0;bottom:0;width:55%;height:70%;pointer-events:auto;touch-action:none;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:120px;
}
.walk-touch__look-zone--active .walk-touch__look-hint{opacity:0}
.walk-touch__look-hint{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);opacity:0.6;transition:opacity .15s ease;pointer-events:none;
}
.walk-touch__run-btn{
  position:absolute;right:22px;bottom:150px;width:56px;height:56px;border-radius:999px;
  background:rgba(21,25,29,0.72);border:1px solid var(--line);color:var(--ink-soft);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;pointer-events:auto;cursor:pointer;
}
.walk-touch__run-btn--active{color:#0B0E11;background:var(--accent);border-color:var(--accent)}

@media (max-width:640px){
  .walk-hud__panel--legend{display:none}
  .walk-hud__panel--controls{display:none}
  .walk-idle-layers{max-width:calc(100% - 24px)}
}