/* 3D tour — styles moved unchanged from the single-file tour (build 16) */
:root {
  --bg:#0e0e12; --ink:#141414; --ink2:#3c3c3c; --mut:#9a968c; --accent:#FFD42A;
  --paper:#fff; --cream:#F4F2EB; --creamline:#E6E2D6; --panelline:#EFECE3;
  --f-display:'Fredoka',-apple-system,system-ui,sans-serif;
  --f-body:'Space Grotesk',-apple-system,system-ui,sans-serif;
  --f-mono:'Space Mono',ui-monospace,monospace;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:#fff;
  font:15px/1.5 var(--f-body); overflow:hidden; }
#app { position:fixed; inset:0; display:block; touch-action:none; cursor:grab; }
button { font-family:var(--f-display); font-weight:600; cursor:pointer; border-radius:11px; border:none; }
button:disabled { opacity:.4; cursor:default; }

@keyframes halo { 0%{transform:translate(-50%,-50%) scale(.65);opacity:.5;} 70%{opacity:0;} 100%{transform:translate(-50%,-50%) scale(2.3);opacity:0;} }

#status { position:fixed; top:0; left:0; right:0; z-index:90; display:flex; gap:12px;
  align-items:center; padding:14px 20px; background:rgba(14,14,18,.92);
  font-family:var(--f-mono); font-size:12px; letter-spacing:1px; }
#status.done { display:none; }
#bar { flex:1; height:3px; background:rgba(255,255,255,.14); border-radius:2px; overflow:hidden; }
#bar > i { display:block; height:100%; width:0; background:var(--accent); transition:width .2s; }

/* control panel */
#ui { position:fixed; left:20px; bottom:20px; z-index:60; width:330px; max-width:calc(100% - 40px);
  background:rgba(20,20,26,.92); border:1px solid rgba(255,255,255,.08); border-radius:18px;
  padding:18px; box-shadow:0 20px 50px rgba(0,0,0,.45); backdrop-filter:blur(8px); }
#ui.hidden { display:none; }
#ui.compact { background:none; border:none; box-shadow:none; backdrop-filter:none; padding:14px; width:auto; }
#ui.compact > *:not(#enterVR) { display:none; }
#ui.compact #enterVR { width:auto; }
#ui h1 { margin:0 0 3px; font-family:var(--f-display); font-weight:600; font-size:19px; letter-spacing:.4px; }
#ui .sub { font-family:var(--f-mono); font-size:10px; letter-spacing:2.4px; color:var(--mut); text-transform:uppercase; margin-bottom:14px; }
#ui .lbl { font-family:var(--f-mono); font-size:10px; letter-spacing:2px; color:var(--mut); text-transform:uppercase; margin:14px 0 8px; }
#ui button { color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); padding:9px 12px; transition:all .15s ease; }
#ui button:hover:not(:disabled) { background:#fff; color:var(--ink); border-color:#fff; }
#enterVR { width:100%; padding:13px; font-size:15px; background:var(--accent); color:var(--ink); border:none; margin-bottom:2px; }
#enterVR:hover:not(:disabled) { background:#ffdd52; color:var(--ink); }
.rowbtn { display:flex; gap:6px; margin-top:8px; }
.rowbtn button { flex:1; padding:9px; }
#alignBtn.on { background:var(--accent); color:var(--ink); border-color:var(--accent); }
#scenes { display:flex; flex-wrap:wrap; gap:6px; }
#scenes button.active { background:#fff; color:var(--ink); border-color:#fff; }
.hint { color:var(--mut); font-size:12px; line-height:1.65; margin-top:14px; }
.hint b { color:#e9e6de; font-weight:600; }
details.auth { margin-top:14px; border-top:1px solid rgba(255,255,255,.08); padding-top:6px; }
details.auth > summary { font-family:var(--f-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--mut); cursor:pointer; list-style:none; padding:6px 0; }
details.auth > summary::-webkit-details-marker { display:none; }
/* editor fields */
.ed-field { margin-top:8px; }
.ed-field label { display:block; font-family:var(--f-mono); font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--mut); margin-bottom:3px; }
.ed-field input, .ed-field textarea { width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  color:#fff; border-radius:8px; padding:7px 9px; font:13px/1.4 var(--f-body); }
.ed-field textarea { resize:vertical; min-height:56px; }
.ed-accent { display:flex; gap:5px; flex-wrap:wrap; }
.ed-accent button { width:22px; height:22px; border-radius:6px; border:2px solid transparent; padding:0; }
.ed-accent button.on { border-color:#fff; }
#edHint { color:var(--mut); font-size:11px; margin-top:8px; }

#align { position:fixed; top:16px; right:16px; z-index:75; width:300px; max-width:calc(100% - 32px);
  background:rgba(20,20,26,.94); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px; font-size:12px;
  font-family:var(--f-body); box-shadow:0 20px 50px rgba(0,0,0,.45); }
#align.hidden { display:none; }
#align h2 { margin:0 0 8px; font-family:var(--f-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--mut); }
#align .row { display:flex; justify-content:space-between; font-variant-numeric:tabular-nums; color:var(--mut); }
#align .row b { color:#fff; font-weight:600; }
#align pre { white-space:pre-wrap; word-break:break-all; background:#0c0c10; border:1px solid rgba(255,255,255,.12);
  padding:8px; margin:10px 0; color:#cfcabf; font-size:11px; border-radius:8px; }
#align .keys { color:var(--mut); line-height:1.7; }
#align .keys b { color:#fff; font-weight:600; }

#stats { position:fixed; top:16px; left:16px; z-index:75; background:rgba(20,20,26,.9);
  border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:8px 12px; font:12px/1.3 var(--f-mono); color:#fff;
  font-variant-numeric:tabular-nums; }
#stats.hidden { display:none; }

/* ===== tour: sidecart slide ===== */
#popup { position:fixed; z-index:70; top:76px; bottom:104px; width:392px; max-width:calc(100% - 40px);
  background:var(--paper); color:var(--ink); border-radius:22px; overflow:hidden;
  box-shadow:0 34px 80px rgba(0,0,0,.45); display:flex; flex-direction:column;
  transition:transform .55s cubic-bezier(.5,0,.15,1), opacity .35s ease; }
#popup.right { right:20px; } #popup.left { left:20px; }
#popup.hidden { opacity:0; pointer-events:none; }
#popup.right.hidden { transform:translateX(calc(100% + 30px)); }
#popup.left.hidden  { transform:translateX(calc(-100% - 30px)); }
#pHead { position:relative; height:186px; flex:none; overflow:hidden; background:var(--pAccent,#0E9488); }
#pHeadImg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
#popup.has-img #pHeadImg { display:block; }
#pHead .hatch { position:absolute; inset:0; background:repeating-linear-gradient(-45deg, rgba(255,255,255,.09) 0 2px, transparent 2px 14px); }
#popup.has-img #pHead .hatch { opacity:0; }
#pHead .scrim { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.5), transparent 62%); opacity:0; }
#popup.has-img #pHead .scrim { opacity:1; }
#pCat2 { position:absolute; left:19px; bottom:16px; font-family:var(--f-mono); font-size:11px; letter-spacing:2.2px; color:var(--pInk,#fff); }
#pCap { position:absolute; right:15px; bottom:15px; font-family:var(--f-mono); font-size:9.5px; letter-spacing:1px; color:var(--pInk,#fff); opacity:.82; border:1px dashed currentColor; padding:3px 7px; border-radius:5px; }
#pCap:empty, #pCat2:empty { display:none; }
#pClose { position:absolute; top:13px; right:13px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--ink); font-size:15px; box-shadow:0 5px 14px rgba(0,0,0,.22); }
#pClose:hover { background:#fff; }
#pBody { padding:22px 24px 0; flex:1; overflow:auto; }
#pCat { font-family:var(--f-mono); font-size:11px; letter-spacing:2.4px; color:var(--pDark,#0B6E66); margin-bottom:9px; text-transform:uppercase; }
#pCat:empty { display:none; }
#pTitle { font-family:var(--f-display); font-weight:600; font-size:30px; line-height:1.04; color:var(--ink); margin:0 0 7px; }
#pTag { font-family:var(--f-body); font-weight:600; font-size:15px; color:var(--pDark,#0B6E66); margin-bottom:14px; }
#pTag:empty { display:none; }
#pText { font-size:14.5px; line-height:1.62; color:var(--ink2); }
#pText p { margin:0 0 14px; }
#pStats { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 22px; }
#pStats .chip { font-family:var(--f-mono); font-size:12px; color:var(--ink); background:var(--cream); border:1px solid var(--creamline); padding:7px 11px; border-radius:8px; }
#pFoot { padding:15px 24px 17px; border-top:1px solid var(--panelline); flex:none; }
#pNext { width:100%; text-align:left; background:none; display:flex; align-items:center; justify-content:space-between;
  font-family:var(--f-body); font-weight:600; font-size:13px; color:var(--mut); padding:2px 0; }
#pNext:hover:not(:disabled) { color:var(--ink); }
#pNext:disabled { opacity:.35; }

/* ===== tour: bottom dock ===== */
#dock { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:65;
  display:flex; flex-direction:column; align-items:center; gap:11px; }
#dock.hidden { display:none; }
#dockStatus { font-family:var(--f-mono); font-size:12px; letter-spacing:1.6px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.65); }
#dockBar { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.97); padding:9px 12px; border-radius:17px; box-shadow:0 14px 38px rgba(0,0,0,.34); }
.dockBtn { width:40px; height:40px; border-radius:12px; background:var(--cream); color:var(--ink); font-size:14px;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease; }
.dockBtn:hover { background:var(--creamline); }
#dockNext { background:var(--ink); color:#fff; } #dockNext:hover { background:#333; }
#dockOverview .grid { display:grid; grid-template-columns:1fr 1fr; gap:3px; width:16px; height:16px; }
#dockOverview .grid > div { background:currentColor; border-radius:1.5px; }
.dockSep { width:1px; height:26px; background:var(--creamline); }
#dockDots { display:flex; align-items:center; gap:7px; padding:0 7px; }
#dockDots button { height:11px; width:11px; border-radius:6px; background:var(--creamline); padding:0; transition:all .35s cubic-bezier(.5,0,.15,1); }

/* marker hover label */
#mlabel { position:fixed; z-index:64; transform:translate(-50%,-145%); white-space:nowrap;
  background:#fff; color:#141414; font-family:var(--f-body); font-weight:600; font-size:12.5px;
  padding:5px 11px; border-radius:8px; box-shadow:0 5px 14px rgba(0,0,0,.22); pointer-events:none; }
#mlabel.hidden { display:none; }

#placeHud { position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:64;
  font-family:var(--f-mono); font-size:11px; letter-spacing:1px; color:#fff;
  background:rgba(20,20,26,.82); border:1px solid rgba(255,255,255,.14); padding:6px 10px; border-radius:8px; pointer-events:none; }
#placeHud.hidden { display:none; }

#intro { position:fixed; left:32px; top:50%; transform:translateY(-50%); z-index:58; max-width:392px;
  max-width:min(392px, calc(100% - 64px)); transition:opacity .5s ease, transform .5s ease; }
#intro.hidden { opacity:0; transform:translateY(-46%); pointer-events:none; }
#introSquares { display:flex; gap:5px; margin-bottom:16px; }
#introSquares > i { width:13px; height:13px; display:block; }
#introTitle { font-family:var(--f-display); font-weight:600; font-size:46px; line-height:1.0; color:#fff; margin:0 0 14px; text-shadow:0 4px 18px rgba(0,0,0,.55); }
#introBody { font-family:var(--f-body); font-size:15.5px; line-height:1.55; color:#fff; opacity:.92; margin:0; text-shadow:0 2px 10px rgba(0,0,0,.6); }
#introBtns { display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
#introStart { background:#fff; color:var(--ink); padding:13px 22px; font-size:15px; display:inline-flex; align-items:center; gap:9px; box-shadow:0 10px 26px rgba(0,0,0,.32); transition:transform .15s ease; }
#introStart:hover { transform:translateY(-2px); }
#introStart span, #introExplore span { font-size:12px; }
#introExplore { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.35); padding:13px 18px; font-size:15px; display:inline-flex; align-items:center; gap:8px; transition:background .15s ease; }
#introExplore:hover { background:rgba(255,255,255,.22); }
@media (max-width:560px){ #intro { top:auto; bottom:150px; transform:none; } #intro.hidden{ transform:translateY(8px);} #introTitle{ font-size:38px; } }

#xhair { position:fixed; left:50%; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
  border:2px solid rgba(255,255,255,.92); background:rgba(255,212,42,.55); z-index:64; pointer-events:none;
  box-shadow:0 0 0 4px rgba(0,0,0,.22); }
#xhair.hidden { display:none; }

/* export modal */
#exportModal { position:fixed; inset:0; z-index:95; background:rgba(8,8,12,.72); display:flex; align-items:center; justify-content:center; padding:24px; }
#exportModal.hidden { display:none; }
#exportCard { width:min(680px,100%); max-height:82vh; background:#15151b; border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:12px; }
#exportCard h3 { margin:0; font-family:var(--f-display); font-size:18px; }
#exportCard textarea { flex:1; min-height:320px; background:#0c0c10; border:1px solid rgba(255,255,255,.12);
  color:#d9d5cb; border-radius:10px; padding:12px; font:12px/1.5 var(--f-mono); resize:none; }
#exportCard .row { display:flex; gap:8px; }
#exportCard button { color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); padding:10px 14px; }
#exportCard button.primary { background:var(--accent); color:var(--ink); border:none; }

/* ===== tour slide: image gallery, downloads, links ===== */
.pImgNav { position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; display:none;
  background:rgba(255,255,255,.9); color:var(--ink); font-size:20px; line-height:1; box-shadow:0 4px 12px rgba(0,0,0,.22); }
#pImgPrev { left:10px; } #pImgNext { right:10px; }
#popup.multi-img .pImgNav { display:flex; align-items:center; justify-content:center; }
.pImgNav:hover { background:#fff; }
#pGal { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; }
#pGal:empty { display:none; }
.pThumb { width:58px; height:42px; border-radius:7px; background-size:cover; background-position:center; padding:0;
  border:2px solid transparent; opacity:.75; cursor:pointer; }
.pThumb:hover { opacity:1; }
.pThumb.on { border-color:var(--pAccent,#0E9488); opacity:1; }
#pLinks { margin:0 0 22px; display:flex; flex-direction:column; gap:6px; }
#pLinks:empty { display:none; }
.pLinksHd { font-family:var(--f-mono); font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--mut); margin-top:6px; }
.pLink { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--pDark,#0B6E66); text-decoration:none;
  padding:9px 12px; border:1px solid var(--creamline); background:var(--cream); border-radius:9px; overflow-wrap:anywhere; }
.pLink:hover { background:var(--creamline); }
.pLink.file::before { content:'↓'; font-family:var(--f-mono); }
.pLink.web::before { content:'↗'; font-family:var(--f-mono); }