:root{ --primary:#1a2b4c; --accent:#d4a017; }
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
#viewer{position:absolute;inset:0}
/* Por defecto el visor usa el cursor "move" (cruz de 4 flechas), que sugiere
   arrastrar un objeto. Para un panorama es mas natural la mano, igual que en
   los mapas: agarras la escena y la giras. */
#viewer, #viewer canvas, .psv-container{cursor:grab}
#viewer:active, #viewer canvas:active, .psv-container:active{cursor:grabbing}
.psv-marker{cursor:pointer !important}

#splash{position:fixed;inset:0;z-index:5000;background:var(--primary);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .5s ease;}
#splash.hidden{opacity:0;pointer-events:none}
#splash img{max-height:72px;max-width:60vw}
#splash .title{font-size:20px;font-weight:600;letter-spacing:.3px;text-align:center;padding:0 24px}
#splash .sub{font-size:13px;opacity:.75}
.spinner{width:34px;height:34px;border:3px solid rgba(255,255,255,.25);border-top-color:var(--accent);
  border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

#brand{position:absolute;top:14px;left:14px;z-index:1200;display:flex;align-items:center;gap:10px;
  background:rgba(12,14,20,.62);backdrop-filter:blur(6px);padding:8px 14px;border-radius:10px;color:#fff}
#brand img{height:26px}
#brand .t{font-size:14px;font-weight:600;line-height:1.25}
#brand .s{font-size:11.5px;opacity:.75}

#map{position:absolute;bottom:16px;right:16px;width:250px;height:190px;z-index:1200;border-radius:10px;
  overflow:hidden;border:2px solid rgba(255,255,255,.18);box-shadow:0 6px 22px rgba(0,0,0,.5)}
@media(max-width:640px){#map{width:150px;height:120px;bottom:12px;right:12px}}
#map.no-tiles{background:#1e2430}
#map.no-tiles .leaflet-container{background:#1e2430}
.dir-cone{width:44px;height:44px;margin:-22px 0 0 -22px;transform-origin:50% 50%;pointer-events:none}
.dir-cone svg{width:100%;height:100%;display:block}

#counter{position:absolute;top:18px;right:16px;z-index:1200;color:#fff;font-size:12.5px;
  background:rgba(12,14,20,.62);backdrop-filter:blur(6px);padding:7px 13px;border-radius:20px}
#ayuda{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:1200;
  display:flex;align-items:center;gap:14px;color:#fff;font-size:12.5px;
  background:rgba(12,14,20,.62);backdrop-filter:blur(6px);padding:8px 16px;border-radius:20px;
  transition:opacity .6s ease;white-space:nowrap}
#ayuda.oculta{opacity:0;pointer-events:none}
#ayuda .k{display:inline-block;min-width:20px;padding:1px 6px;margin-right:5px;border-radius:4px;
  background:rgba(255,255,255,.16);font-family:ui-monospace,monospace;font-size:11.5px;text-align:center}
#btn-ayuda{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:1199;
  color:#fff;font-size:12px;background:rgba(12,14,20,.55);backdrop-filter:blur(6px);
  padding:6px 13px;border-radius:20px;cursor:pointer;border:0;transition:opacity .4s ease}
#btn-ayuda.oculta{opacity:0;pointer-events:none}
@media(max-width:640px){#ayuda{font-size:11px;padding:6px 12px;gap:9px}}
#toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1300;color:#fff;
  background:rgba(160,20,20,.94);padding:14px 20px;border-radius:8px;font-size:13.5px;display:none;
  max-width:min(680px,88vw);line-height:1.45;text-align:left;word-break:break-word}