/* Walkable spaces, guided discovery and a compact mobile HUD. */
.intro-actions { display:flex; align-items:center; gap:18px; }
.tour-intro-button { background:#ffffffe0; color:#006b32; border:1px solid #00793430; border-radius:4px; padding:15px 18px; font-size:11px; font-weight:600; }
.tour-intro-button span { margin-left:15px; }
.tour-launcher { display:none; position:absolute; top:125px; left:40px; background:#fffffff0; color:#006b32; border:1px solid #0079342b; border-radius:24px; padding:12px 18px; font-size:12px; box-shadow:0 4px 20px #183c2610; }
.tour-launcher>span { margin-right:8px; color:#a85900; }
.city-started .tour-launcher { display:block; }
.tour-active .tour-launcher { display:none; }
.tour-hud { position:absolute; top:125px; left:40px; width:300px; border:1px solid #c9dfcb; border-left:3px solid #007934; background:#fffffff2; border-radius:8px; padding:16px 18px; box-shadow:0 8px 32px #21492a18; z-index:3; }
.tour-hud-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tour-hud-top button { background:none; color:#47664f; font-size:24px; width:28px; height:28px; margin:-9px -9px -5px 0; }
.tour-hud h2 { font-size:21px; letter-spacing:-.5px; margin:10px 0 8px; }
.tour-hud>p { color:#526d59; font-size:11px; line-height:1.6; margin:0 0 13px; }
.tour-progress { display:flex; gap:5px; margin:12px 0; }
.tour-progress span { flex:1; height:3px; border-radius:3px; background:#dae5d8; }
.tour-progress .complete { background:#007934; }
.tour-progress .current { background:#f7921e; }
.tour-hud-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tour-hud-bottom>span { font-size:10px; color:#51664e; }
.tour-hud-bottom button { background:#e8f3e6; color:#006b32; padding:9px 10px; border-radius:4px; font-size:10px; font-weight:600; }
.tour-dialog { max-width:900px; }
.tour-dialog .close-dialog { margin-left:auto; }
.tour-heading { padding:30px 36px 20px; }
.tour-heading h2 { font-size:38px; letter-spacing:-1.5px; }
.tour-heading .eyebrow { margin-bottom:16px; }
.tour-heading>p:last-child { color:#536b59; font-size:12px; line-height:1.8; max-width:540px; }
.tour-choices { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 36px 20px; }
.tour-choice { display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:22px; border:1px solid #ccdfc9; border-radius:8px; background:linear-gradient(135deg,white,#edf5e9); color:#1c482d; transition:transform .2s,box-shadow .2s; }
.tour-choice:hover { transform:translateY(-3px); box-shadow:0 6px 20px #224e2917; border-color:#007934; }
.tour-choice-number { font-size:11px; color:#aa5f00; letter-spacing:1px; }
.tour-choice h3 { font-family:Manrope,sans-serif; font-weight:500; font-size:22px; letter-spacing:-.6px; margin:12px 0 8px; }
.tour-choice p { font-size:12px; line-height:1.7; color:#526c59; margin:0 0 20px; }
.tour-choice-footer { display:flex; justify-content:space-between; align-items:center; width:100%; gap:10px; margin-top:auto; font-size:10px; color:#007934; }
.tour-choice-footer b { font-weight:500; font-size:20px; }
.tour-note { font-size:10px; line-height:1.7; margin:0; padding:0 36px 25px; color:#617967; }
.tour-complete { margin:0 36px 20px; padding:20px; border:1px solid #b5d7b6; border-radius:7px; background:#e8f4e3; display:flex; align-items:center; gap:14px; }
.tour-complete>span { border-radius:50%; background:#007934; color:white; padding:8px 12px; }
.tour-complete strong { font-size:14px; }
.tour-complete p { font-size:11px; line-height:1.6; margin:5px 0 0; }
.tour-complete button { background:none; color:#006b32; font-size:11px; margin-left:auto; white-space:nowrap; }
.tour-catalog { margin:0 32px 25px; padding:22px; border:1px solid #b5d5ad; border-radius:8px; background:#edf6e9; }
.tour-catalog .eyebrow { margin-bottom:9px; font-size:8px; }
.tour-catalog h3 { font-size:21px; font-weight:500; margin:0; }
.tour-catalog p:not(.eyebrow) { font-size:12px; color:#47664d; line-height:1.7; }
.tour-highlights { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:18px 0; }
.tour-highlights a { display:flex; flex-direction:column; gap:8px; padding:14px; border:1px solid #c5dcc0; background:white; border-radius:5px; }
.tour-highlights a:hover { border-color:#007934; }
.tour-highlights strong { font-size:13px; font-weight:500; }
.tour-highlights small { font-size:10px; line-height:1.6; color:#56705b; }
.tour-highlights span { margin-top:auto; font-size:10px; color:#007934; }
.tour-catalog>.primary-button { padding:11px 15px; font-size:11px; }
.outfit-label { margin-top:14px; }
.dock-toggle { display:none; }
.city-started .vignette { background:linear-gradient(0deg,#edf5e97d,transparent 20%,transparent 85%,#fcfff666); }
.city-started .world-label { display:none; }
.map-route-target { stroke:#f7921e; stroke-width:.8; }
@media(max-width:1150px) {
  .tour-launcher,.tour-hud { left:25px; top:106px; }
  .tour-hud { width:275px; }
}
@media(max-width:700px) {
  .topbar { padding:15px 17px; gap:10px; }
  .brand-logo { width:153px; }
  .main-nav .active,.brand-title,.brand-divider { display:none; }
  .main-nav { margin-left:auto; }
  .nav-button { font-size:9px; }
  .header-actions #soundButton,.live-status { display:none; }
  .header-actions .icon-button { width:30px; height:30px; }
  .intro-panel { top:25%; left:23px; right:20px; }
  .intro-panel h1 { font-size:38px; max-width:370px; letter-spacing:-1.8px; }
  .intro-actions { align-items:flex-start; gap:10px; flex-direction:column; }
  .intro-actions button { font-size:11px; padding:13px 16px; }
  .intro-copy { margin:18px 0; }
  .journey-status { top:80px; right:18px; padding:9px 11px; }
  .journey-status strong { font-size:9px; }
  .tour-launcher { top:83px; left:18px; padding:10px 12px; font-size:10px; }
  .tour-active .journey-status { display:none; }
  .tour-hud { top:79px; left:17px; right:17px; width:auto; padding:12px 15px; }
  .tour-hud h2 { margin:6px 0; font-size:18px; }
  .tour-hud>p { margin:0; font-size:10px; }
  .tour-progress { margin:8px 0; }
  .tour-hud-bottom button { padding:7px 9px; }
  .district-dock { bottom:22px; left:16px; right:16px; width:auto; transform:none; padding:0; z-index:6; border-radius:9px; }
  .dock-title { display:none; }
  .dock-toggle { display:flex; justify-content:space-between; align-items:center; width:100%; padding:14px 16px; background:none; text-align:left; color:#174e2b; }
  .dock-toggle b { display:block; font-size:12px; font-weight:600; }
  .dock-toggle small { display:block; color:#58735d; font-size:9px; margin-top:3px; }
  #dockToggleIcon { font-size:23px; font-weight:400; }
  .district-dock .dock-buttons { display:none; grid-template-columns:repeat(4,1fr); padding:0 10px 10px; gap:6px; }
  .district-dock.expanded .dock-buttons { display:grid; }
  .district-button { min-height:58px; padding:8px 3px; font-size:9px; }
  .district-button svg { width:18px; height:18px; }
  .minimap { bottom:109px; right:18px; width:83px; padding:8px; }
  .minimap svg { height:57px; }
  .interaction { bottom:117px; left:18px; min-width:195px; max-width:calc(100% - 125px); padding:10px; transform:none; }
  .interaction strong { font-size:12px; }
  .interaction small { font-size:6px; }
  .mobile-controls { bottom:103px; left:22px; right:22px; }
  .touch-mode .minimap { bottom:222px; }
  .touch-mode .interaction { bottom:230px; }
  .touch-mode .joystick { width:88px; height:88px; }
  .touch-mode .joystick>div { left:23px; top:23px; }
  .touch-actions { gap:9px; }
  .touch-actions button { height:46px; width:46px; }
  .dock-open .mobile-controls,.dock-open .interaction,.dock-open .minimap { visibility:hidden; }
  .controls-hint { display:none; }
  .scene-footer { bottom:7px; font-size:4px; }
  .scene-footer span:last-child { display:none; }
  .toast { top:auto; bottom:92px; font-size:10px; z-index:8; max-width:90%; width:max-content; }
  .tour-heading { padding:26px 23px 17px; }
  .tour-heading h2 { font-size:30px; letter-spacing:-1px; }
  .tour-choices { grid-template-columns:1fr; padding:0 23px 20px; gap:10px; }
  .tour-choice { padding:19px; }
  .tour-choice h3 { font-size:20px; margin:9px 0; }
  .tour-choice p { margin-bottom:12px; font-size:11px; }
  .tour-note { padding:0 23px 24px; }
  .tour-complete { margin:0 23px 20px; padding:15px; flex-wrap:wrap; }
  .tour-complete button { width:100%; text-align:left; margin-left:42px; }
  .tour-catalog { margin:0 18px 22px; padding:18px; }
  .tour-highlights { grid-template-columns:1fr; }
  .tour-catalog h3 { font-size:19px; }
}
@media(max-width:370px) {
  .brand-logo { width:133px; }
  .topbar { padding:15px 12px; gap:7px; }
  .nav-button { font-size:8px; }
  .intro-panel h1 { font-size:33px; }
  .tour-launcher { font-size:9px; padding:9px 10px; left:12px; }
  .journey-status { right:12px; padding:8px; gap:5px; }
  .journey-status strong { font-size:8px; }
}
@media(max-height:560px) and (min-width:701px) {
  .tour-hud { top:95px; width:255px; padding:12px; }
  .tour-hud>p { display:none; }
  .journey-status { top:95px; }
  .intro-panel { top:25%; }
  .intro-panel h1 { font-size:34px; }
  .intro-copy { margin:13px 0; }
  .intro-meta { display:none; }
}