/* ===========================================================================
   ENV — the immersive project environment.
   Behavior modeled on the professional viewers (full-screen plate, pan/zoom,
   direction switch, POI stalks, building pins, sidebar) — engine and design
   are our own, in the black/gold brand. One manifest per project.
   =========================================================================== */

.env-sec{padding:0!important;background:var(--black);position:relative}
.ienv{position:relative;height:100svh;min-height:540px;overflow:hidden;background:var(--black);
  touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.ienv:fullscreen{height:100vh}

/* ---------- stage ---------- */
.env-stage{position:absolute;inset:0;overflow:hidden;cursor:grab}
.ienv[data-drag="1"] .env-stage{cursor:grabbing}
.env-world{position:absolute;top:0;right:auto;left:0;transform-origin:0 0;will-change:transform}
.env-world img{display:block;position:absolute;inset:0;width:100%;height:100%;
  -webkit-user-drag:none;pointer-events:none;opacity:0;transition:opacity .8s var(--ease-lux)}
.env-world img.on{opacity:1}

/* ---------- hotspots ---------- */
.env-hs{position:absolute;transform:translate(-50%,-100%);pointer-events:none;z-index:4}
.env-hs .stalk{width:1px;height:52px;background:linear-gradient(to top,rgba(209,169,66,.0),rgba(209,169,66,.85));
  margin:0 auto}
.env-hs .dot{width:7px;height:7px;background:var(--gold);margin:0 auto;border-radius:50%;
  box-shadow:0 0 0 3px rgba(209,169,66,.25)}
.env-hs .lbl{pointer-events:auto;cursor:default;white-space:nowrap;
  background:rgba(11,11,9,.78);backdrop-filter:blur(8px);border:1px solid var(--gold-hair);
  color:var(--off);font-family:var(--label);font-size:12px;letter-spacing:.08em;
  padding:8px 14px;margin-bottom:8px;display:block;transform:translateY(0)}
.env-hs.poi .lbl b{color:var(--gold);font-weight:700}
.env-hs.bldg{transform:translate(-50%,-100%)}
.env-hs.bldg .lbl{cursor:pointer;background:var(--gold);color:var(--black);font-weight:700;
  border-color:var(--gold);padding:9px 15px;transition:background .3s var(--ease-lux)}
.env-hs.bldg .lbl:hover{background:var(--gold-bright)}

/* ---------- preloader ---------- */
.env-load{position:absolute;inset:0;z-index:20;display:grid;place-content:center;gap:22px;
  background:var(--black);text-align:center;transition:opacity .8s var(--ease-lux),visibility .8s}
.ienv[data-ready="1"] .env-load{opacity:0;visibility:hidden}
.env-load img{height:64px;width:auto;margin:0 auto}
.env-load .bar{width:min(280px,60vw);height:1px;background:rgba(242,238,230,.14);margin:0 auto;position:relative}
.env-load .bar i{position:absolute;inset-block:0;inset-inline-start:0;width:100%;background:var(--gold);
  transform-origin:right center;transform:scaleX(var(--p,0))}
.env-load .pct{font-family:var(--label);font-size:12px;letter-spacing:.3em;color:var(--gold)}

/* ---------- chrome: sidebar ---------- */
.env-side{position:absolute;inset-inline-start:0;inset-block:0;z-index:10;display:flex;flex-direction:column;
  justify-content:center;gap:6px;padding:14px 10px;background:linear-gradient(to left,transparent,rgba(11,11,9,.55))}
.env-side button,.env-side a{display:flex;flex-direction:column;align-items:center;gap:6px;width:64px;
  background:none;border:0;color:rgba(242,238,230,.75);cursor:pointer;padding:10px 4px;text-decoration:none;
  font-family:var(--label);font-size:9.5px;letter-spacing:.12em;transition:color .3s var(--ease-lux)}
.env-side button:hover,.env-side a:hover,.env-side button[aria-pressed="true"]{color:var(--gold)}
.env-side svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.env-full{position:absolute;inset-inline-start:16px;inset-block-end:16px;z-index:10}
.env-full button{background:rgba(11,11,9,.6);border:1px solid var(--gold-hair);color:var(--gold);
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px)}
.env-full button:hover{border-color:var(--gold)}
.env-full svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}

/* ---------- directions + reset ---------- */
.env-dirs{position:absolute;inset-inline:0;inset-block-end:20px;z-index:10;display:flex;justify-content:center}
.env-dirs .box{display:flex;align-items:center;gap:12px;background:rgba(11,11,9,.66);backdrop-filter:blur(10px);
  border:1px solid var(--gold-hair);padding:9px 14px}
.env-dirs .cap{font-family:var(--label);font-size:11px;letter-spacing:.18em;color:rgba(242,238,230,.7)}
.env-dirs button{background:none;border:1px solid transparent;color:rgba(242,238,230,.7);cursor:pointer;
  font-family:var(--label);font-size:11.5px;letter-spacing:.12em;padding:7px 15px;
  transition:color .3s var(--ease-lux),border-color .3s var(--ease-lux),background .3s var(--ease-lux)}
.env-dirs button[aria-pressed="true"]{background:var(--gold);color:var(--black);border-color:var(--gold);font-weight:700}
.env-dirs button:not([aria-pressed="true"]):hover{border-color:var(--gold-hair);color:var(--off)}
.env-dirs .rst{border:0;padding:7px 6px;display:grid;place-items:center}
.env-dirs .rst svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}

/* ---------- compass + title ---------- */
.env-compass{position:absolute;inset-inline-end:20px;inset-block-start:18px;z-index:10;
  display:flex;align-items:center;gap:14px}
.env-compass .card{background:rgba(11,11,9,.66);backdrop-filter:blur(10px);border:1px solid var(--gold-hair);
  padding:10px 18px;display:flex;align-items:baseline;gap:12px}
.env-compass .nm{font-family:var(--display);font-weight:300;font-size:17px;color:var(--off);letter-spacing:.01em}
.env-compass .dir{font-family:var(--label);font-size:11px;letter-spacing:.26em;color:var(--gold)}

/* ---------- panels ---------- */
.env-panel{position:absolute;inset-block:0;inset-inline-end:0;width:min(400px,92vw);z-index:15;
  background:rgba(11,11,9,.92);backdrop-filter:blur(18px);border-inline-start:1px solid var(--gold-hair);
  padding:clamp(26px,3vw,44px);overflow:auto;
  transform:translateX(-101%);transition:transform .6s var(--ease-lux)}
[dir="rtl"] .env-panel{transform:translateX(-101%)}
.env-panel[data-open="1"]{transform:translateX(0)}
.env-panel .kick{color:var(--gold);font-family:var(--label);font-size:10.5px;letter-spacing:.28em}
.env-panel h3{font-family:var(--display);font-weight:300;font-size:clamp(23px,2.4vw,32px);color:var(--off);
  margin:14px 0 0;letter-spacing:-.01em}
.env-panel p{margin:16px 0 0;font-weight:300;font-size:15px;line-height:1.7;color:rgba(242,238,230,.72)}
.env-panel .x{position:absolute;inset-inline-start:14px;inset-block-start:14px;background:none;border:0;
  color:rgba(242,238,230,.6);cursor:pointer;width:34px;height:34px;display:grid;place-items:center}
.env-panel .x:hover{color:var(--gold)}
.env-panel .x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.env-panel .rows{margin-top:22px;border-top:1px solid var(--gold-hair)}
.env-panel .rows div{display:flex;justify-content:space-between;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--gold-hair);font-size:14px}
.env-panel .rows span{color:rgba(242,238,230,.6);font-weight:300}
.env-panel .rows b{color:var(--gold);font-weight:400;font-family:var(--label);letter-spacing:.04em}
.env-panel .btn{margin-top:26px}
.env-panel ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:2px}
.env-panel ul button{width:100%;text-align:right;background:none;border:1px solid var(--gold-hair);
  color:var(--off);font-family:var(--body);font-weight:300;font-size:15px;padding:14px 16px;cursor:pointer;
  transition:border-color .3s var(--ease-lux),background .3s var(--ease-lux)}
.env-panel ul button:hover{border-color:var(--gold);background:var(--gold-veil)}
.env-panel .map-img{margin-top:22px;border:1px solid var(--gold-hair)}
.env-panel .map-img img{display:block;width:100%;height:auto}

/* ---------- hint + note ---------- */
.env-hint{position:absolute;inset-inline:0;inset-block-end:78px;z-index:9;text-align:center;pointer-events:none;
  font-family:var(--label);font-size:11px;letter-spacing:.22em;color:rgba(242,238,230,.75);
  text-shadow:0 2px 12px rgba(0,0,0,.9);transition:opacity .6s var(--ease-lux)}
.ienv[data-touched="1"] .env-hint{opacity:0}
.env-note{position:absolute;inset-inline-end:16px;inset-block-end:16px;z-index:9;
  font-family:var(--label);font-size:9.5px;letter-spacing:.06em;color:rgba(242,238,230,.4);max-width:300px;text-align:left}

@media (max-width:760px){
  .env-side{flex-direction:row;inset-block:auto;inset-block-start:0;inset-inline:0;justify-content:center;
    padding:10px;background:linear-gradient(to bottom,rgba(11,11,9,.6),transparent)}
  .env-side button,.env-side a{width:56px}
  .env-compass{inset-block-start:auto;inset-block-end:130px;inset-inline-end:12px}
  .env-compass .card{padding:8px 12px}
  .env-compass .nm{font-size:14px}
  .env-note{display:none}
  .env-hint{inset-block-end:96px}
}

@media (prefers-reduced-motion:reduce){
  .env-world img{transition:none}
  .env-panel{transition:none}
  .env-load{transition:none}
}