/* ═══════════════════════════════════════════════════════════
   جولة الحرم ثلاثية الأبعاد — 3D campus tour
   ═══════════════════════════════════════════════════════════ */

.tour{
  position:relative; height:calc(100dvh - var(--nav-h) - var(--bar-h)); min-height:540px;
  background:#0B1016; overflow:hidden; display:flex}
@supports not (height: 100dvh){
  .tour{height:calc(100vh - var(--nav-h) - var(--bar-h))}
}
[data-theme="light"] .tour{background:#0E141C}

/* ── المشهد ── */
.stage{position:absolute; inset:0}
.stage canvas{display:block; width:100%; height:100%; touch-action:none; cursor:grab}
.stage canvas:active{cursor:grabbing}

/* ── الشريط الجانبي ── */
.tour-rail{
  position:relative; z-index:6; width:340px; flex:none; height:100%;
  background:rgba(11,16,22,.82); backdrop-filter:blur(16px);
  border-inline-end:1px solid rgba(242,245,248,.1);
  display:flex; flex-direction:column; color:var(--on-dark);
  transition:transform .34s var(--ease)}
.tour-rail-head{padding:24px 24px 18px; border-bottom:1px solid rgba(242,245,248,.1)}
.tour-rail-head .eyebrow{color:var(--brass-2); margin-bottom:10px}
.tour-rail-head h1{font-size:23px; color:#fff; margin-bottom:8px}
.tour-rail-head p{font-size:13.5px; color:rgba(242,245,248,.62); line-height:1.7}
.tour-rail-body{flex:1; overflow-y:auto; padding:18px 20px; scrollbar-width:thin}

.spot-list{display:grid; gap:7px}
.spot-btn{
  display:flex; align-items:center; gap:12px; width:100%; text-align:start; cursor:pointer;
  padding:12px 14px; border-radius:11px; border:1px solid rgba(242,245,248,.12);
  background:rgba(242,245,248,.03); color:var(--on-dark);
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease)}
.spot-btn:hover{border-color:var(--brass); background:rgba(214,165,82,.1); transform:translateX(-3px)}
[dir="ltr"] .spot-btn:hover{transform:translateX(3px)}
.spot-btn[aria-current="true"]{border-color:var(--brass); background:rgba(214,165,82,.16)}
.spot-num{
  width:28px; height:28px; flex:none; border-radius:8px; display:grid; place-items:center;
  background:rgba(214,165,82,.16); color:var(--brass-2);
  font-family:'Tajawal'; font-weight:800; font-size:13px; font-variant-numeric:tabular-nums}
.spot-btn[aria-current="true"] .spot-num{background:var(--brass); color:#160F04}
.spot-txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.spot-txt b{font-family:'Tajawal'; font-weight:700; font-size:14.5px}
.spot-txt span{font-size:11.5px; color:rgba(242,245,248,.55)}

/* ── تفاصيل النقطة ── */
.spot-detail{
  margin-top:16px; padding-top:16px; border-top:1px solid rgba(242,245,248,.1);
  animation:spotIn .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes spotIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.spot-photo{
  border-radius:12px; overflow:hidden; margin-bottom:14px; aspect-ratio:16/10;
  border:1px solid rgba(242,245,248,.12); background:#0F151D}
.spot-photo img{display:block; width:100%; height:100%; object-fit:cover}
.spot-detail h3{font-size:19px; color:#fff; margin-bottom:9px}
.spot-detail p{font-size:13.5px; color:rgba(242,245,248,.72); line-height:1.8}
.spot-facts{display:grid; gap:1px; background:rgba(242,245,248,.12); border:1px solid rgba(242,245,248,.12); border-radius:10px; overflow:hidden; margin-top:16px}
.spot-facts div{background:#0F151D; padding:12px 14px}
.spot-facts b{display:block; font-family:'Tajawal'; font-weight:800; font-size:18px; color:var(--brass-2); font-variant-numeric:tabular-nums}
.spot-facts span{font-size:11px; color:rgba(242,245,248,.55)}

/* ── صورة المبنى في البطاقة ── */
.card-media{
  border-radius:12px; overflow:hidden; margin-bottom:16px; aspect-ratio:16/9;
  background:#0F151D}
.card-media img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease)}
.card-photo:hover .card-media img{transform:scale(1.05)}

/* ── طبقة الواجهة فوق المشهد ── */
.hud{position:absolute; inset:0; z-index:5; pointer-events:none}
.hud > *{pointer-events:auto}

.hud-top{
  position:absolute; inset-block-start:16px; inset-inline-end:16px;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.hud-chip{
  display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:100px;
  background:rgba(11,16,22,.78); backdrop-filter:blur(12px);
  border:1px solid rgba(242,245,248,.14); color:var(--on-dark);
  font-size:12.5px; font-weight:600}
.hud-chip .dot{background:var(--ok)}
.hud-chip b{color:var(--brass-2); font-variant-numeric:tabular-nums}

.hud-hint{
  position:absolute; inset-block-start:16px; inset-inline-start:16px;
  padding:9px 16px; border-radius:100px; font-size:12px;
  background:rgba(11,16,22,.72); backdrop-filter:blur(12px);
  border:1px solid rgba(242,245,248,.12); color:rgba(242,245,248,.7);
  transition:opacity .5s ease}
.hud-hint.gone{opacity:0}

/* ── لوحة التحكّم السفلية ── */
.hud-bar{
  position:absolute; inset-block-end:18px; inset-inline:18px;
  background:rgba(11,16,22,.82); backdrop-filter:blur(16px);
  border:1px solid rgba(242,245,248,.13); border-radius:var(--r-lg);
  padding:16px 20px; display:grid; gap:14px; color:var(--on-dark)}
.hud-bar-top{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.hud-bar-top label{font-size:12px; color:rgba(242,245,248,.6); font-weight:600; white-space:nowrap}
.hud-bar-top .time{
  font-family:'Tajawal'; font-weight:800; font-size:15px; color:var(--brass-2);
  font-variant-numeric:tabular-nums; min-width:66px}
#sun{
  -webkit-appearance:none; appearance:none; flex:1; min-width:160px; height:5px; border-radius:5px;
  background:linear-gradient(90deg,#16273A 0%,#D6A552 22%,#F3E7D2 50%,#D6A552 78%,#16273A 100%);
  outline:none}
#sun::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:#fff; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.5)}
#sun::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;cursor:pointer;border:0}

.hud-actions{display:flex; gap:7px; flex-wrap:wrap}
.hud-btn{
  padding:8px 15px; border-radius:100px; cursor:pointer; font-size:12.5px; font-weight:600;
  background:rgba(242,245,248,.06); border:1px solid rgba(242,245,248,.14); color:var(--on-dark);
  transition:border-color .16s var(--ease), background .16s var(--ease)}
.hud-btn:hover{border-color:var(--brass); background:rgba(214,165,82,.14)}
.hud-btn[aria-pressed="true"]{background:var(--brass); border-color:var(--brass); color:#160F04}

/* ── فقاعات النقاط فوق المشهد ── */
.pin{
  position:absolute; transform:translate(-50%,-100%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:0;
  cursor:pointer; pointer-events:auto; transition:opacity .25s ease}
.pin-bubble{
  display:flex; align-items:center; gap:8px; padding:7px 13px; border-radius:100px;
  background:rgba(11,16,22,.86); backdrop-filter:blur(10px);
  border:1px solid rgba(242,245,248,.18); color:var(--on-dark);
  font-family:'Tajawal'; font-weight:700; font-size:12.5px; white-space:nowrap;
  transition:background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease)}
.pin:hover .pin-bubble,.pin.on .pin-bubble{background:var(--brass); border-color:var(--brass); color:#160F04; transform:translateY(-2px)}
.pin-n{
  width:19px; height:19px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--brass); color:#160F04; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums}
.pin:hover .pin-n,.pin.on .pin-n{background:#160F04; color:var(--brass-2)}
.pin-stem{width:1px; height:16px; background:rgba(242,245,248,.4)}
.pin.dim{opacity:.28}

/* ── تحميل المشهد ── */
.stage-loading{
  position:absolute; inset:0; z-index:7; display:grid; place-items:center;
  background:#0B1016; color:rgba(242,245,248,.6); font-size:13px; gap:14px;
  transition:opacity .5s ease}
.stage-loading.gone{opacity:0; pointer-events:none}
.stage-loading .ring{
  width:42px; height:42px; border-radius:50%;
  border:2px solid rgba(214,165,82,.2); border-top-color:var(--brass);
  animation:spin 1s linear infinite; margin-inline:auto}
@keyframes spin{to{transform:rotate(360deg)}}
.stage-loading > div{display:grid; gap:14px; text-align:center}

/* ── الجوال ── */
.rail-toggle{display:none}
@media (max-width:900px){
  .tour{flex-direction:column}
  .tour-rail{
    position:absolute; inset-block-end:0; inset-inline:0; width:auto; height:62%;
    border-inline-end:0; border-top:1px solid rgba(242,245,248,.12);
    border-radius:var(--r-lg) var(--r-lg) 0 0; transform:translateY(calc(100% - 62px))}
  .tour-rail.open{transform:translateY(0)}
  .rail-toggle{
    display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
    padding:18px; background:none; border:0; color:var(--on-dark); cursor:pointer;
    font-family:'Tajawal'; font-weight:700; font-size:14px}
  .rail-toggle::before{content:''; position:absolute; inset-block-start:8px; inset-inline-start:50%; transform:translateX(-50%); width:38px; height:3px; border-radius:3px; background:rgba(242,245,248,.25)}
  .hud-bar{inset-block-end:calc(62% + 12px)}
  .tour-rail-head{padding:6px 20px 14px}
  .tour-rail-head h1{font-size:19px}
}
@media (max-width:560px){
  .hud-top{inset-block-start:auto; inset-block-end:auto; position:absolute; inset-block-start:12px; inset-inline-end:12px}
  .hud-chip{font-size:11px; padding:6px 11px}
  .pin-bubble{font-size:11px; padding:5px 10px}
}