/* Al Maskaan Village theme: dresses the explorer in the main site's night-glass look (navy ground, frosted panels,
   gold accents, Playfair Display + Manrope). Loaded after style.css and tour.css; layout is left to them. */
:root{
  --bg:#060e1c;--bg-2:#0a1830;--bg-3:#10234a;
  --glass:rgba(255,255,255,.055);--glass-2:rgba(255,255,255,.09);--glass-solid:rgba(10,22,44,.78);
  --edge:rgba(255,255,255,.13);--line:rgba(255,255,255,.1);
  --text:#f3efe6;--muted:#aeb4c1;--dim:#7f879a;
  --gold:#e2c48a;--gold-2:#c9a25e;--gold-grad:linear-gradient(120deg,#f4dfae 0%,#e2c48a 40%,#c9a25e 100%);
  --green:#e2c48a;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  font-family:Manrope,"Segoe UI",Arial,sans-serif;color:var(--text);background:var(--bg);color-scheme:dark
}
body{background:radial-gradient(70% 60% at 85% 0%,rgba(31,79,160,.28),transparent 70%),radial-gradient(60% 50% at 0% 100%,rgba(79,122,40,.16),transparent 70%),var(--bg)}
button:focus-visible,a:focus-visible,.viewport:focus-visible{outline-color:var(--gold)}

/* top bar */
.topbar{background:rgba(6,14,28,.55);border-bottom-color:var(--line);backdrop-filter:blur(18px)}
.brand-mark{color:var(--gold)}
.brand strong{font-weight:700;color:var(--text)}
.brand small{color:var(--dim)}
.mode-tabs{background:var(--glass);border-color:var(--edge);border-radius:999px}
.mode-tabs button{color:var(--muted);border-radius:999px}
.mode-tabs button:hover{color:var(--text)}
.mode-tabs button[aria-selected=true]{background:var(--gold-grad);color:#1a1408;box-shadow:0 6px 22px -8px rgba(226,196,138,.6)}
.overview-btn{border-color:var(--edge);background:var(--glass);border-radius:999px;color:var(--text)}
.overview-btn:hover{background:var(--glass-2);border-color:rgba(226,196,138,.5)}

/* sidebar */
.sidebar{background:rgba(8,18,36,.6);border-color:var(--line);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.eyebrow{color:var(--gold)}
.sidebar h1{font-family:var(--serif);letter-spacing:-.02em;color:var(--text)}
.sidebar-intro>p:last-child{color:var(--muted)}
.place,.tour-chapter{color:var(--text);border-radius:12px}
.place:hover,.tour-chapter:hover{background:var(--glass)}
.place.active,.tour-chapter.active{background:var(--glass-2);border-color:rgba(226,196,138,.45);box-shadow:inset 3px 0 0 var(--gold)}
.place-num{border-color:var(--edge);color:var(--muted)}
.active .place-num{background:var(--gold-grad);border-color:transparent;color:#1a1408}
.place-subtitle,.chapter-copy small,.chapter-index{color:var(--dim)}
.place>svg{color:var(--gold)}
.chapter-thumb{border-radius:8px;box-shadow:0 0 0 1px var(--edge)}
.tour-invitation{background:var(--glass);border-color:var(--edge);border-radius:14px;color:var(--text)}
.tour-invitation:hover{background:var(--glass-2);border-color:rgba(226,196,138,.45)}
.tour-invitation-icon,.small-symbol{color:var(--gold)}
.tour-invitation small,.sidebar-bottom p span{color:var(--dim)}
.sidebar-bottom p{color:var(--muted)}

/* masterplan viewer: the floating panels become frosted glass */
.viewer-shell{background:var(--bg-2)}
.viewport{background:radial-gradient(ellipse at center,#14284c,#081326)}
.view-caption,.label-toggle,.focus-card,.bottom-hint,.minimap-wrap,.zoom-controls{background:var(--glass-solid);border-color:var(--edge);color:var(--text);backdrop-filter:blur(16px);box-shadow:0 18px 40px -20px rgba(0,0,0,.7)}
.view-caption,.label-toggle,.bottom-hint,.zoom-controls{border-radius:999px}
.focus-card,.minimap-wrap{border-radius:16px}
.caption-tag,.minimap-header{color:var(--gold)}
.caption-divider,.control-divider{background:var(--edge)}
.label-toggle[aria-pressed=false]{color:var(--dim)}
.focus-card h2{font-family:var(--serif)}
.focus-card p{color:var(--muted)}
.focus-card button{border-top-color:var(--line);color:var(--gold)}
.bottom-hint i{color:var(--dim)}
#zoom-label{color:var(--gold)}
.zoom-controls button{color:var(--text)}
.zoom-controls button:hover{background:var(--glass-2)}
#minimap-frame{border-color:var(--gold);outline-color:rgba(6,14,28,.8);box-shadow:0 0 0 150px rgba(6,14,28,.45)}
.image-note{color:var(--dim)}
.loading{background:var(--bg);color:var(--text);font-family:var(--serif)}
.marker{background:rgba(10,22,44,.86);border-color:var(--edge);color:var(--text);box-shadow:0 8px 24px -8px rgba(0,0,0,.7);backdrop-filter:blur(8px)}
.marker .dot{background:var(--glass-2);border-color:var(--edge);color:var(--gold)}
.marker:hover,.marker.selected{background:var(--gold-grad);color:#1a1408;border-color:transparent}
.marker:hover .dot,.marker.selected .dot{background:rgba(26,20,8,.15);border-color:rgba(26,20,8,.25);color:#1a1408}
.outlines polygon:hover,.outlines polygon.hovered{fill:rgba(226,196,138,.16);stroke:rgba(244,223,174,.7)}
.outlines polygon.selected{fill:rgba(226,196,138,.2);stroke:#f4dfae}

/* video tour */
.tour-pane{background:var(--bg)}
.tour-frame:before{background:radial-gradient(ellipse at center,#122649,#060e1c)}
.tour-top{background:linear-gradient(rgba(6,14,28,.88),rgba(6,14,28,.4),transparent)}
.tour-heading .eyebrow{color:var(--gold)}
.tour-heading .eyebrow span{border-color:rgba(226,196,138,.4);color:var(--gold)}
.tour-heading h2{font-family:var(--serif);letter-spacing:-.02em}
.tour-heading>p:last-child,.tour-guide,.tour-perspective{color:var(--muted)}
.aerial-filter,.tour-zoom,.tour-loading{background:var(--glass-solid);border-color:var(--edge);backdrop-filter:blur(16px);border-radius:999px;color:var(--text)}
.tour-loading{border-radius:16px}
.aerial-filter input{accent-color:var(--gold)}
.tour-zoom button{color:var(--text)}
.tour-zoom button:hover{background:var(--glass-2)}
.tour-bottom{background:linear-gradient(transparent,rgba(6,14,28,.75) 35%,rgba(6,14,28,.95))}
.tour-guide #tour-counter{color:var(--gold);border-color:var(--edge)}
.tour-guide i{color:var(--dim)}
.tour-controls{background:var(--glass-solid);border-color:var(--edge);border-radius:999px;padding:8px 10px 8px 8px;box-shadow:0 18px 40px -20px rgba(0,0,0,.7);backdrop-filter:blur(16px)}
.tour-controls button{color:var(--text)}
.tour-controls .tour-play{background:var(--gold-grad);color:#1a1408;border-radius:999px;font-weight:700;letter-spacing:.02em}
.tour-controls .tour-play:hover{background:var(--gold-grad);filter:brightness(1.08)}
.tour-scrubber input{accent-color:var(--gold)}
.tour-scrubber input::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--gold) 0 var(--tour-progress,0%),rgba(255,255,255,.18) var(--tour-progress,0%) 100%)}
.tour-scrubber input::-webkit-slider-thumb{background:#f4dfae;box-shadow:0 0 0 4px rgba(226,196,138,.25)}
.tour-scrubber input::-moz-range-track{background:rgba(255,255,255,.18)}
.tour-scrubber input::-moz-range-progress{background:var(--gold)}
.tour-scrubber input::-moz-range-thumb{background:#f4dfae}
.tour-scrubber-labels{color:var(--dim)}
.tour-scrubber-labels #tour-time{color:var(--text)}

@media(max-width:760px){
  .sidebar{border-color:var(--line)}
  .place,.tour-chapter{border-color:var(--edge)}
  .mode-tabs{border-radius:999px}
}

/* ---------- layout: a floating stage beside a compact guide ---------- */
.top-actions{display:flex;align-items:center;gap:8px}
.fs-btn{border-color:rgba(226,196,138,.45);color:var(--gold)}
.fs-btn:hover{background:rgba(226,196,138,.12);border-color:var(--gold)}
.viewer-shell{margin:0 14px 14px 0;border-radius:20px;border:1px solid var(--edge);box-shadow:0 30px 70px -40px rgba(0,0,0,.8)}
.sidebar{border-right:0;background:transparent}
.sidebar-intro{padding:0 6px}
.sidebar h1{font-size:30px;line-height:1.08;margin:12px 0 10px}
.sidebar-intro>p:last-child{margin-bottom:16px;font-size:12.5px}
#places,#tour-places{gap:4px}
.place{padding:10px 10px;gap:12px}
.place-title{font-size:13px}
.place-subtitle{font-size:11px}
.place>svg{opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
.place:hover>svg,.place.active>svg{opacity:1;transform:none}
.tour-chapter{padding:6px;min-height:56px}
.sidebar-bottom{display:none}
.tour-invitation{margin-top:14px;background:linear-gradient(120deg,rgba(226,196,138,.14),rgba(226,196,138,.04));border-color:rgba(226,196,138,.35)}
/* the letterbox around the masterplan shows a soft, blurred copy of it instead of flat bands */
.viewport::before{content:"";position:absolute;inset:-40px;background:url(masterplan.jpg) center/cover;filter:blur(28px) saturate(1.1) brightness(.55);pointer-events:none}
.viewport:focus-visible,.tour-pane:focus-visible{outline:0!important;box-shadow:inset 0 0 0 2px rgba(226,196,138,.55)}
.image-note{display:none}
.bottom-hint{bottom:20px;left:20px}
.focus-card{left:20px;bottom:76px;border-color:rgba(226,196,138,.3)}
.view-caption{left:20px;top:20px}
.label-toggle{right:20px;top:20px}
.map-controls{right:20px;bottom:20px}
.marker .dot{box-shadow:0 0 0 4px rgba(226,196,138,.14)}
.marker{animation:pin-in .6s cubic-bezier(.22,1,.36,1) both}
.marker:nth-child(2){animation-delay:.06s}.marker:nth-child(3){animation-delay:.12s}.marker:nth-child(4){animation-delay:.18s}.marker:nth-child(5){animation-delay:.24s}.marker:nth-child(6){animation-delay:.3s}
@keyframes pin-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.tour-top{padding:24px 24px 60px}
.tour-bottom{padding:50px 20px 20px}
.tour-zoom{right:20px}
/* in full screen the stage keeps a small frame so the corners stay round */
body.is-full .viewer-shell{margin:0 12px 12px 0}

@media(min-width:761px){
  .topbar{height:72px;padding:0 20px 0 24px;border-bottom:0;background:transparent;backdrop-filter:none}
  .workspace{height:calc(100dvh - 72px)}
  .sidebar{width:288px;flex-basis:288px;padding:8px 14px 16px 18px}
}
@media(min-width:761px) and (max-width:1100px){
  .sidebar{width:240px;flex-basis:240px}
  .sidebar h1{font-size:26px}
  .top-actions .overview-btn span{display:none}
  .top-actions .overview-btn{padding:11px}
}
@media(max-height:700px) and (min-width:761px){
  .sidebar h1{font-size:24px}
  .sidebar-intro>p:last-child{display:none}
}
@media(max-width:760px){
  .top-actions .overview-btn span{display:none}
  .top-actions .overview-btn{min-height:42px;padding:10px}
  .topbar{border-bottom:0;background:transparent}
  .viewer-shell{margin:0 8px;border-radius:16px}
  .sidebar{background:transparent;border-top:0}
  .place{background:var(--glass)}
  .bottom-hint{left:12px;bottom:14px}
  .map-controls{right:12px;bottom:14px}
  .focus-card{left:12px;bottom:64px}
  .view-caption{left:12px;top:12px}
  .label-toggle{right:12px;top:12px}
  body.is-full .viewer-shell{margin:0 8px}
}
@media(prefers-reduced-motion:reduce){.marker{animation:none}}