:root{--c-ink: #14242f;--c-ink-soft: #4a5d6a;--c-bg: #eef2f5;--c-surface: #ffffff;--c-line: #d7dee4;--c-primary: #0a3d62;--c-primary-deep: #072c47;--c-danger: #b3261e;--c-danger-bg: #fbe9e7;--c-caution: #8a5a00;--c-caution-bg: #fdf3d7;--c-info: #0b5394;--c-info-bg: #e3eef9;--c-shallow: #2e9e5b;--c-chest: #e0a800;--c-deep: #c0392b;--c-unknown: #6d7d86;--radius: 12px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--shadow: 0 1px 3px rgba(10, 28, 42, .12);--font-urdu: "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Urdu Typesetting", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-latin: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--c-bg);color:var(--c-ink);-webkit-font-smoothing:antialiased}:lang(ur) body,body:lang(ur){font-family:var(--font-urdu);line-height:1.9}:lang(en) body,body:lang(en){font-family:var(--font-latin);line-height:1.5}body.no-scroll{overflow:hidden}#app{display:flex;flex-direction:column;min-height:100dvh}button{font:inherit;cursor:pointer}:focus-visible{outline:3px solid #4d90fe;outline-offset:2px}.topbar{display:flex;align-items:center;gap:var(--space-3);background:linear-gradient(180deg,var(--c-primary),var(--c-primary-deep));color:#fff;padding-block:var(--space-2);padding-inline:max(var(--space-4),env(safe-area-inset-left)) max(var(--space-4),env(safe-area-inset-right));padding-top:max(var(--space-2),env(safe-area-inset-top));min-height:56px}.brand-name{font-family:var(--font-latin);font-weight:700;font-size:1.05rem;letter-spacing:.02em;white-space:nowrap}.reach-title{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.5}.reach-river{font-size:.78rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.reach-name{font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.lang-toggle{background:#ffffff1f;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 14px;font-size:.85rem;min-height:36px;white-space:nowrap}.lang-toggle:hover{background:#ffffff38}.content{flex:1;display:flex;flex-direction:column;gap:var(--space-3);width:100%;max-width:960px;margin-inline:auto;padding-block:var(--space-3) var(--space-4);padding-inline:max(var(--space-3),env(safe-area-inset-left)) max(var(--space-3),env(safe-area-inset-right))}.warnings{display:flex;flex-direction:column;gap:var(--space-2)}.banner{display:flex;align-items:flex-start;gap:var(--space-3);border-radius:var(--radius);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow);border-inline-start:5px solid currentColor}.banner-danger{background:var(--c-danger-bg);color:var(--c-danger)}.banner-caution{background:var(--c-caution-bg);color:var(--c-caution)}.banner-info{background:var(--c-info-bg);color:var(--c-info)}.banner-icon{flex:none;width:24px;height:24px;margin-top:2px}.banner-icon svg{width:100%;height:100%}.banner-body{display:flex;flex-direction:column;min-width:0}.banner-label{font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}.banner-text{color:var(--c-ink);overflow-wrap:break-word}.status{display:flex;align-items:center;gap:var(--space-3);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow)}.status-icon{flex:none;width:28px;height:28px;color:var(--c-primary)}.status-icon svg{width:100%;height:100%}.status-body{display:flex;flex-direction:column;min-width:0}.status-main{font-weight:600}.status-sub{font-size:.85rem;color:var(--c-ink-soft)}.scene{flex:1;min-height:260px;border-radius:var(--radius);background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.16),transparent 60%),linear-gradient(180deg,#19567f,#0a3d62 55%,#093251);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;padding:var(--space-5)}.scene-message{text-align:center;color:#e8f1f8;max-width:32ch}.scene-icon{width:44px;height:44px;margin-inline:auto;opacity:.85}.scene-icon svg{width:100%;height:100%}.scene-title{font-weight:700;font-size:1.05rem;margin:var(--space-3) 0 var(--space-1)}.scene-sub{margin:0;font-size:.9rem;opacity:.8}.scene--live{padding:0;position:relative;overflow:hidden;min-height:320px}.scene-canvas-wrap,.scene-canvas{position:absolute;top:0;right:0;bottom:0;left:0}.scene-canvas canvas{width:100%;height:100%;display:block;touch-action:none}.locate-btn{position:absolute;top:12px;inset-inline-end:12px;z-index:3;width:44px;height:44px;border-radius:50%;background:#ffffffeb;border:1px solid var(--c-line);box-shadow:var(--shadow);display:grid;place-items:center;color:var(--c-primary);cursor:pointer}.locate-btn svg{width:22px;height:22px}.locate-btn[data-active=true]{background:var(--c-primary);color:#fff}.tour-btn{position:absolute;top:64px;inset-inline-end:12px;z-index:3;padding:8px 14px;border-radius:999px;background:#ffffffeb;border:1px solid var(--c-line);box-shadow:var(--shadow);color:var(--c-primary);font:inherit;font-size:.85rem;cursor:pointer}.tour-btn[data-active=true]{background:var(--c-primary);color:#fff}.walk-btn{position:absolute;top:112px;inset-inline-end:12px;z-index:3;padding:8px 14px;border-radius:999px;background:#ffffffeb;border:1px solid var(--c-line);box-shadow:var(--shadow);color:var(--c-primary);font:inherit;font-size:.85rem;cursor:pointer}.walk-btn[data-active=true]{background:var(--c-primary);color:#fff}.depth-btn{position:absolute;top:160px;inset-inline-end:12px;z-index:3;padding:8px 14px;border-radius:999px;background:#ffffffeb;border:1px solid var(--c-line);box-shadow:var(--shadow);color:var(--c-primary);font:inherit;font-size:.85rem;cursor:pointer}.depth-btn[data-active=true]{background:var(--c-primary);color:#fff}.replay-btn{position:absolute;top:208px;inset-inline-end:12px;z-index:3;padding:8px 14px;border-radius:999px;background:#ffffffeb;border:1px solid var(--c-line);box-shadow:var(--shadow);color:var(--c-primary);font:inherit;font-size:.85rem;cursor:pointer}.replay-btn[data-active=true]{background:var(--c-primary);color:#fff}.replay-bar{position:absolute;inset-inline:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:var(--space-3);background:var(--c-surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px var(--space-4)}.replay-bar[hidden]{display:none}.replay-scrub{flex:1 1 auto;min-width:0;accent-color:var(--c-primary);cursor:pointer}.replay-label{flex:none;font-size:.9rem;font-weight:600;color:var(--c-ink);white-space:nowrap;font-variant-numeric:tabular-nums}.inspect-card{position:absolute;inset-inline:12px;bottom:12px;z-index:3;background:var(--c-surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-3) var(--space-4);display:flex;gap:var(--space-3);align-items:flex-start}.inspect-swatch{flex:none;width:18px;height:18px;border-radius:4px;margin-top:3px;border:1px solid rgba(0,0,0,.15)}.inspect-depth{font-weight:700}.inspect-meta{font-size:.85rem;color:var(--c-ink-soft)}.inspect-hazards{display:flex;flex-direction:column;gap:2px;margin-top:4px}.inspect-hazard{color:var(--c-danger);font-size:.9rem;font-weight:600}.inspect-close{margin-inline-start:auto;background:none;border:none;font-size:.85rem;color:var(--c-ink-soft);cursor:pointer;padding:2px 4px;min-width:44px;min-height:44px}.scene-toast{position:absolute;top:12px;inset-inline-start:12px;z-index:3;background:#14242fd9;color:#fff;padding:6px 12px;border-radius:8px;font-size:.85rem;max-width:70%}.legend{background:var(--c-surface);border-top:1px solid var(--c-line);padding-block:var(--space-3) max(var(--space-3),env(safe-area-inset-bottom));padding-inline:max(var(--space-4),env(safe-area-inset-left)) max(var(--space-4),env(safe-area-inset-right))}.legend-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);max-width:960px;margin-inline:auto}.legend-title{font-weight:700;font-size:.85rem;color:var(--c-ink-soft)}.legend-chip{display:inline-flex;align-items:center;gap:var(--space-2);font-size:.85rem}.swatch{width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.15)}.swatch-shallow{background:var(--c-shallow)}.swatch-chest{background:var(--c-chest)}.swatch-deep{background:var(--c-deep)}.swatch-unknown{background:var(--c-unknown)}.swatch-hazard{background:repeating-linear-gradient(45deg,#1d1d1d 0,#1d1d1d 4px,#555 4px,#555 8px)}.legend-note{max-width:960px;margin:var(--space-2) auto 0;font-size:.8rem;color:var(--c-ink-soft)}.safety{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:linear-gradient(180deg,#0d4a77,#072c47);display:flex;align-items:center;justify-content:center;padding:var(--space-4);overflow-y:auto}.safety-card{width:100%;max-width:480px;color:#f1f6fa;text-align:center;padding:var(--space-5) var(--space-2)}.safety-brand{font-weight:700;font-size:1.3rem;letter-spacing:.03em;margin-bottom:var(--space-5)}.safety-lines{list-style:none;margin:0 0 var(--space-6);padding:0;display:flex;flex-direction:column;gap:var(--space-5)}.safety-line{display:flex;align-items:center;gap:var(--space-4);text-align:start;font-size:1.05rem}.safety-icon{flex:none;width:48px;height:48px;color:#ffd166}.safety-icon svg{width:100%;height:100%}.safety-accept{width:100%;min-height:56px;border:none;border-radius:var(--radius);background:#ffd166;color:#3a2c00;font-weight:700;font-size:1.1rem}.safety-accept:hover{background:#ffdc85}@media(min-width:768px){.content{padding-block:var(--space-4) var(--space-5);padding-inline:var(--space-5);gap:var(--space-4)}.scene{min-height:340px}.reach-name{font-size:1.1rem}}@media(min-width:1280px){.content,.legend-row,.legend-note{max-width:1100px}}@media(min-width:768px)and (max-height:860px){.scene{min-height:240px}}@media(max-height:700px){.scene{min-height:180px;padding:var(--space-4)}}@media(prefers-reduced-motion:no-preference){.banner-danger .banner-icon{animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.55}}}.map-label{pointer-events:none;white-space:nowrap;font-size:13px;font-weight:600;color:#1d2c36;text-shadow:0 0 3px #ffffff,0 0 6px #ffffff}.map-label-place{font-size:15px}.map-label-park{color:#2e6b35}.map-label-road{font-size:11px;font-weight:500;color:#4a4a44}.labels-2d .map-label{position:absolute;transform:translate(-50%,-100%)}