/* ════════════════════════════════════════════════════════════════════
   جامعة قمة حمدان — الواجهة (نهار/ليل)
   ════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#2a2140; --muted:#6b6385; --soft:#736b8e;
  --card:rgba(255,255,255,.88); --card-solid:#ffffff; --card-2:#f6f2ff;
  --line:rgba(88,64,160,.14); --line-2:rgba(88,64,160,.24);
  --brand:#7c3aed; --brand-2:#ec4899; --brand-3:#f59e0b;
  --grad:linear-gradient(120deg,#7c3aed 0%,#c026d3 45%,#f59e0b 100%);
  --shadow:0 12px 34px rgba(60,30,120,.18); --shadow-s:0 4px 14px rgba(60,30,120,.14);
  --bg:#e6cf9f; --r:18px; --chip:#ffffff;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  color-scheme:light;
}
:root[data-night="1"]{
  --ink:#f4efff; --muted:#c3b7e6; --soft:#9a8fc2;
  --card:rgba(28,18,60,.84); --card-solid:#1d1340; --card-2:#2a1d57;
  --line:rgba(200,180,255,.16); --line-2:rgba(200,180,255,.28);
  --shadow:0 12px 34px rgba(0,0,0,.5); --shadow-s:0 4px 14px rgba(0,0,0,.4);
  --bg:#141b30; --chip:rgba(40,28,82,.92);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);overscroll-behavior:none}
body{font-family:'Tajawal',system-ui,'Segoe UI',Tahoma,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app{position:fixed;inset:0;overflow:hidden;overflow:clip;background:var(--bg)}
.app:focus{outline:none}   /* ملاذ التركيز الأخير (tabindex=-1) بلا حلقة حول الخريطة كلها */
.gl{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden;background:var(--bg)}
/* اللوحة تتمركز داخل الحاضن وقد تكبر عنه عند الإمالة، وتنحني بتحويل منظوري (المحرك يضبط مقاسها وموضعها) */
.gl canvas{position:absolute;left:0;top:0;display:block;transform-origin:50% 50%;backface-visibility:hidden;will-change:transform;cursor:grab;outline:none;touch-action:none;-webkit-user-select:none;user-select:none}
.gl canvas:active{cursor:grabbing}
.gl.tilted{background:linear-gradient(#b4d4ee 0%,#cfe3f4 58%,#e9ddc4 100%)}
:root[data-night="1"] .gl.tilted{background:linear-gradient(#05081a 0%,#0a1026 60%,#182042 100%)}
:root[data-mode="walk"] .gl canvas{cursor:default}
.labels,.banners,.tags{position:absolute;inset:0;pointer-events:none;overflow:hidden;overflow:clip}   /* قصّ لا تمرير: تركيز لافتة على الحافة لا يزيح الطبقة */
.lbl{position:absolute;top:0;left:0;pointer-events:auto;touch-action:none;display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border-radius:999px;border:0;background:var(--card-solid);box-shadow:0 3px 10px rgba(40,20,80,.22);font-size:12px;font-weight:700;white-space:nowrap;border-inline-start:3px solid var(--c);will-change:transform;transition:background .15s,box-shadow .15s}
.lbl::after{content:"";position:absolute;bottom:-5px;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--card-solid);border-bottom:0}
.lbl i{font-style:normal;font-size:13px}
.lbl.s2{font-size:13px;padding:4px 10px 4px 8px}
/* --cd: لون الكلية مغمّقاً بقدر الحاجة فقط ليبلغ النص الأبيض 4.5:1 (يُحسب في ui.js) */
.lbl.s3{font-size:14.5px;font-weight:900;padding:5px 12px 5px 10px;background:var(--cd,var(--c));color:#fff;border-inline-start-color:rgba(255,255,255,.6)}
.lbl.s3::after{border-top-color:var(--cd,var(--c))}
.lbl:hover{box-shadow:0 6px 16px rgba(40,20,80,.32);z-index:2}
.lbl.rel{outline:2px solid color-mix(in srgb,var(--c) 70%,#fff)}
.lbl.faint{opacity:.42}
.lbl:focus-visible,.lbl.rel:focus-visible,.banner:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.lbl.faint:focus-visible{opacity:1}
.fnode .fk sub{font-size:9px;font-weight:900;vertical-align:baseline;margin-inline-start:1px}
.fnode .fk + .fk{margin-inline-start:-4px}
.lbl.faint:hover{opacity:1}
.lbl.on{background:#ffe58a;color:#3b2a00;font-size:14.5px;z-index:3;box-shadow:0 0 0 3px #fff,0 8px 24px rgba(245,158,11,.55)}
.lbl.on::after{border-top-color:#ffe58a}
.banner{position:absolute;top:0;left:0;pointer-events:auto;touch-action:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 16px 9px;border:0;border-radius:16px;background:linear-gradient(160deg,var(--ct,var(--c)) 0%,var(--cd,var(--c)) 100%);color:#fff;box-shadow:0 10px 28px color-mix(in srgb,var(--c) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.4);text-shadow:0 1px 2px rgba(0,0,0,.18);will-change:transform,opacity;transform-origin:50% 100%}
.banner::after{content:"";position:absolute;bottom:-7px;left:50%;margin-left:-7px;border:7px solid transparent;border-top-color:var(--cd,var(--c));border-bottom:0}
.banner em{font-style:normal;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11px;font-weight:700;direction:ltr;background:rgba(0,0,0,.18);border-radius:6px;padding:0 6px;letter-spacing:.5px}
.banner b{font-size:16px;font-weight:900;white-space:nowrap}
.banner small{font-size:11.5px;opacity:.92;white-space:nowrap;font-weight:500}
.banner.on{box-shadow:0 0 0 3px #fff,0 10px 28px color-mix(in srgb,var(--c) 55%,transparent)}
.banner b{display:flex;align-items:center;gap:5px}
.banner.compact{padding:5px 11px 6px;border-radius:13px}
.banner.compact em,.banner.compact small{display:none}
.banner.compact b{font-size:13px}
.banner.mini{padding:0;width:36px;height:36px;border-radius:50%;justify-content:center}
.banner.mini em,.banner.mini small,.banner.mini .bn{display:none}
.banner.mini .bi{font-size:18px}
.banner.mini::after{bottom:-5px;margin-left:-5px;border-width:5px}
.eetag{position:absolute;top:0;left:0;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:900;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25);white-space:nowrap}
.eetag.in{background:#15803d}.eetag.out{background:#c2410c}

.arctag{position:absolute;top:0;left:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:var(--card-solid);border:2px solid var(--c);box-shadow:0 3px 10px rgba(0,0,0,.18)}
.tip{position:absolute;top:0;left:0;z-index:12;max-width:300px;pointer-events:none;padding:8px 12px;border-radius:14px;background:var(--card-solid);box-shadow:var(--shadow);border-top:4px solid var(--c);display:flex;flex-direction:column;gap:2px}
.tip b{font-size:14px}.tip small{font-size:11.5px;color:var(--soft)}

/* ── التحميل ─────────────────────────────────────────────────────── */
.loading{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,#fff6e6 0%,#e6cf9f 72%);transition:opacity .5s}
:root[data-night="1"] .loading{background:radial-gradient(circle at 50% 45%,#2a3358 0%,#141b30 70%)}
.loading.done{opacity:0;pointer-events:none}
.blocks{display:flex;gap:6px;align-items:flex-end;height:46px}
.blocks i{width:16px;border-radius:5px;background:var(--grad);animation:bump 1s ease-in-out infinite}
.blocks i:nth-child(1){height:22px}.blocks i:nth-child(2){height:38px;animation-delay:.12s}.blocks i:nth-child(3){height:28px;animation-delay:.24s}.blocks i:nth-child(4){height:44px;animation-delay:.36s}
@keyframes bump{50%{transform:translateY(-8px)}}

/* ── المخطط الهندسي للتوصيلات ────────────────────────────────────── */
.flow{position:absolute;z-index:37;left:50%;bottom:calc(16px + var(--safe-b));transform:translate(-50%,24px);opacity:0;width:min(860px,calc(100% - 32px - var(--safe-l) - var(--safe-r)));max-height:min(52vh,460px);display:flex;flex-direction:column;
  background:linear-gradient(var(--card-solid),var(--card-solid)) padding-box,linear-gradient(130deg,var(--c),color-mix(in srgb,var(--c) 30%,transparent) 60%,var(--c)) border-box;border:2px solid transparent;border-radius:24px;box-shadow:var(--shadow);transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s;overflow:hidden}
.flow.open{transform:translate(-50%,0);opacity:1}
.flow::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:22px 22px;mask:radial-gradient(circle at 50% 45%,#000 30%,transparent 80%)}
.fimg{position:relative;flex:0 0 auto;display:block;width:100%;height:118px;border:0;padding:0;background:center/cover no-repeat;border-bottom:1px solid var(--line);cursor:zoom-in;overflow:hidden}
.fimg::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,color-mix(in srgb,var(--card-solid) 85%,transparent))}
.fimg span{position:absolute;z-index:1;inset-inline-start:12px;bottom:10px;padding:5px 12px;border-radius:999px;background:var(--cd,var(--c));color:#fff;font-weight:800;font-size:12.5px;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .15s}
.fimg:hover span{transform:translateY(-2px)}
/* ── استديو الشروحات: لافتة الدخول ── */
.lbl.studio{background:linear-gradient(135deg,#7c3aed,#c026d3);color:#fff;border-inline-start-color:rgba(255,255,255,.7);z-index:4;animation:studioGlow 2.4s ease-in-out infinite}
.lbl.studio::after{border-top-color:#9b33e3}
.lbl.studio em{font-style:normal;font-size:11px;font-weight:900;background:rgba(255,255,255,.22);border-radius:999px;padding:1px 8px;margin-inline-start:2px}
@keyframes studioGlow{50%{box-shadow:0 0 0 4px rgba(192,38,211,.25),0 6px 22px rgba(124,58,237,.55)}}
/* ── داخل المبنى: مشهد كامل يُقرَّب ويُسحَب ── */
.tour{position:absolute;inset:0;z-index:40;background:#0b0816;clip-path:circle(0 at var(--ox,50%) var(--oy,50%));transition:clip-path .62s cubic-bezier(.7,0,.2,1);overflow:hidden}
.tour.open{clip-path:circle(150% at var(--ox,50%) var(--oy,50%))}
.tour.closing{clip-path:circle(0 at var(--ox,50%) var(--oy,50%))}
.tstage{position:absolute;inset:0;overflow:hidden;overflow:clip;touch-action:none;cursor:grab}
.tstage:active{cursor:grabbing}
.tour.open .tstage{animation:tourIn 1.3s ease-out}
@keyframes tourIn{from{filter:brightness(1.9) saturate(.7)}to{filter:brightness(1) saturate(1)}}
.tpan{position:absolute;transform-origin:50% 50%;transition:opacity .22s;will-change:transform}
.tpan.fade{opacity:0}
.timg{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.thot{position:absolute;inset:0}
.tpin{position:absolute;transform:translate(-50%,-50%);border:0;background:none;padding:0;display:flex;align-items:center;gap:6px;color:#fff;cursor:pointer}
.tpin i{font-style:normal;width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:rgba(20,12,40,.55);border:2px solid rgba(255,255,255,.85);animation:pinPulse 2.2s ease-out infinite;font-size:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tpin span{position:absolute;top:50%;inset-inline-start:40px;opacity:0;transform:translate(-6px,-50%);pointer-events:none;transition:opacity .2s,transform .2s;padding:5px 11px;border-radius:999px;background:rgba(20,12,40,.78);font-size:13px;font-weight:800;white-space:nowrap;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}   /* خارج التدفق: مركز الزر = مركز الأيقونة = إحداثيات النقطة */
.tpin:hover span,.tpin.on span,.tpin:focus-visible span{opacity:1;transform:translate(0,-50%);pointer-events:auto}
@keyframes pinPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 0 0 12px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.tdoor{position:absolute;top:50%;transform:translateY(-50%);z-index:2;border:0;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(12,8,28,.6);color:#fff;font-weight:800;font-size:13.5px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.35);transition:background .15s,transform .15s;direction:ltr}
.tdoor i{font-style:normal;font-size:26px;line-height:1}
.tdoor.l{left:calc(14px + var(--safe-l))}.tdoor.r{right:calc(14px + var(--safe-r))}
.tdoor:hover{background:rgba(124,58,237,.85)}
.tdoor.l:hover{transform:translate(-3px,-50%)}.tdoor.r:hover{transform:translate(3px,-50%)}
.thead{position:absolute;z-index:2;top:calc(12px + env(safe-area-inset-top,0px));inset-inline-start:calc(12px + var(--safe-r));max-width:min(420px,calc(100% - 80px));display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:18px;background:rgba(12,8,28,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.thead b{font-size:15px;font-weight:900}
.thead .troom{font-size:13.5px;font-weight:800;color:#e9d5ff}
.thead .tdesc{font-size:12px;opacity:.85;line-height:1.5}
.tplan{position:absolute;z-index:2;left:calc(12px + var(--safe-l));right:calc(12px + var(--safe-r));bottom:calc(14px + var(--safe-b));display:flex;justify-content:center;gap:6px;direction:ltr}
.tplan button{border:1px solid rgba(255,255,255,.28);background:rgba(12,8,28,.62);color:#fff;border-radius:14px;padding:6px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:74px;font-size:12px;font-weight:800;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tplan button i{font-style:normal;font-size:18px}
.tplan button.on{background:linear-gradient(135deg,#7c3aed,#c026d3);border-color:transparent;box-shadow:0 8px 20px rgba(124,58,237,.45)}
.thint{position:absolute;z-index:2;left:50%;bottom:calc(84px + var(--safe-b));transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:rgba(12,8,28,.5);color:#fff;font-size:12px;font-weight:700;white-space:nowrap;opacity:0;animation:thint 7s ease-in-out 1.2s 1 forwards;pointer-events:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@keyframes thint{0%{opacity:0}10%{opacity:1}85%{opacity:1}100%{opacity:0}}
.tour>.tx{position:absolute;z-index:2;top:calc(12px + env(safe-area-inset-top,0px));inset-inline-end:calc(12px + var(--safe-l));border:0;width:44px;height:44px;border-radius:14px;background:rgba(12,8,28,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-weight:900;font-size:16px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
/* ── تتبّع سيارة ── */
.followchip{position:absolute;z-index:35;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 8px 6px 14px;border-radius:999px;background:var(--card-solid);box-shadow:var(--shadow);font-size:13.5px}
.followchip span{color:var(--muted);font-weight:700;white-space:nowrap}.followchip b{font-weight:900;white-space:nowrap}
.followchip button{border:0;width:32px;height:32px;border-radius:50%;background:var(--card-2);font-weight:900}
.followchip small{font-size:12px;font-weight:700;color:#7c3aed;white-space:nowrap;background:rgba(124,58,237,.12);background:color-mix(in srgb,#7c3aed 12%,transparent);border-radius:999px;padding:2px 8px}
:root[data-night="1"] .followchip small,:root[data-night="1"] .walkchip span{color:#c4b5fd}
.stoplbl{position:absolute;top:0;left:0;pointer-events:none;padding:2px 9px;border-radius:999px;background:rgba(124,58,237,.92);color:#fff;font-size:11.5px;font-weight:800;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.2)}
@media (max-width:560px){.followchip{max-width:calc(100% - 24px);display:grid;grid-template-columns:auto auto auto;justify-items:center;border-radius:18px;row-gap:4px}.followchip small{grid-column:1/-1;grid-row:2}}
.loading.has-aerial{background:linear-gradient(rgba(255,246,230,.5),rgba(230,207,159,.78)),var(--aerial) center/cover no-repeat}
:root[data-night="1"] .loading.has-aerial{background:linear-gradient(rgba(20,27,48,.62),rgba(20,27,48,.85)),var(--aerial) center/cover no-repeat}
.loading.has-emblem::before{content:"";position:absolute;width:120px;height:120px;top:calc(50% - 150px);left:calc(50% - 60px);background:var(--emblem) center/contain no-repeat}
.fx{position:absolute;z-index:3;top:10px;inset-inline-end:10px;width:36px;height:36px;border-radius:12px;border:0;background:var(--card-2);font-weight:900;font-size:15px}
.fscroll{position:relative;overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;padding:14px 14px 10px}
.fd{position:relative;display:grid;grid-template-columns:1fr 250px 1fr;gap:52px;align-items:center;min-height:100%}
.fwires{position:absolute;inset:0 auto auto 0;pointer-events:none;overflow:visible}
.fwires path{fill:none;stroke:var(--k);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:7 7;animation:fwire 1.1s linear infinite;opacity:.9}
@keyframes fwire{to{stroke-dashoffset:-28}}
.fcol h4{margin:0 0 8px;font-size:12.5px;font-weight:800;color:var(--muted);display:flex;align-items:center;gap:6px}
.fcol h4 b{color:var(--ink);background:var(--card-2);border-radius:999px;padding:0 8px;font-size:12px}
.fcol ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.fnode{position:relative;z-index:1;display:flex;align-items:center;gap:7px;width:100%;text-align:start;padding:6px 9px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--k) 55%,transparent);background:var(--card-solid);box-shadow:0 2px 8px rgba(0,0,0,.06);transition:transform .15s,box-shadow .15s}
.fnode:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.fnode .fk{font-style:normal;width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center;border-radius:8px;font-size:12px;background:color-mix(in srgb,var(--k) 16%,transparent)}
.fnode .fi{font-size:16px}
.fnode .fn{flex:1;min-width:0;font-size:13px;font-weight:700;line-height:1.4}
.fnode::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:0 0 auto}
.fnode em{font-style:normal;font-weight:900;font-size:11.5px;color:#fff;background:var(--cd,var(--c));border-radius:999px;padding:0 8px}
.fnone{font-size:12.5px;color:var(--soft);padding:6px 4px}
.fcore{display:flex;flex-direction:column;align-items:center;gap:10px}
.hex small.who{font-size:11px;opacity:.86;max-width:160px;line-height:1.35}
.fnode .fn small{display:block;font-size:11px;font-weight:500;color:var(--soft);line-height:1.3}
.fback{position:relative;z-index:1;border:0;border-radius:999px;padding:5px 12px;background:var(--card-2);font-size:12.5px;font-weight:800;box-shadow:var(--shadow-s)}
.foff{position:relative;z-index:1;width:100%;max-width:250px}
.foff h5{margin:0 0 6px;font-size:12px;font-weight:800;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.foff h5 b{color:var(--ink);background:var(--card-2);border-radius:999px;padding:0 8px}
.foff h5 span{font-weight:600;color:var(--soft)}
.foff ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.foff button{display:flex;gap:8px;align-items:center;width:100%;text-align:start;padding:6px 9px;border-radius:12px;border:1.5px dashed color-mix(in srgb,var(--c) 50%,transparent);background:var(--card-solid);transition:transform .15s,box-shadow .15s}
.foff button:hover{transform:translateY(-1px);box-shadow:var(--shadow-s)}
.foff button i{font-style:normal;font-size:15px}
.foff button span{font-size:12.5px;font-weight:800;line-height:1.35}
.foff button small{display:block;font-size:10.5px;font-weight:500;color:var(--soft)}
.hex{position:relative;z-index:1;width:190px;min-height:168px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:20px 18px;color:#fff;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 78%,#000),color-mix(in srgb,var(--c) 55%,#000));clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);filter:drop-shadow(0 10px 22px color-mix(in srgb,var(--c) 40%,transparent))}
.hex .hi{font-size:30px;line-height:1}
.hex b{font-size:15px;font-weight:900;line-height:1.35}
.hex small{font-size:11.5px;opacity:.9}
.fkinds{position:relative;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:8px 12px 12px;border-top:1px solid var(--line)}
.fkinds span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--muted)}
.fkinds i{width:16px;height:4px;border-radius:2px;background:var(--k)}

/* ── بلا لوحة رسم ───────────────────────────────────────────────────── */
.flat{position:absolute;inset:0;overflow:auto;padding:16px calc(16px + var(--safe-r)) calc(52vh + 32px + var(--safe-b)) calc(16px + var(--safe-l));display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;background:radial-gradient(circle at 50% 0,#fff6e6,var(--bg) 60%)}
:root[data-night="1"] .flat{background:radial-gradient(circle at 50% 0,#2a3358,var(--bg) 60%)}
.flat section{background:var(--card-solid);border-radius:18px;border-top:5px solid var(--c);padding:10px 12px;box-shadow:var(--shadow-s)}
.flat h2{margin:0 0 8px;font-size:15px}.flat h2 button{border:0;background:none;font-weight:900;padding:0}
.flat section div{display:flex;flex-wrap:wrap;gap:6px}
.flat section div button{border:1.5px solid color-mix(in srgb,var(--c) 40%,transparent);background:var(--card-2);border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:700}
.noscript{position:fixed;inset:0;z-index:60;display:grid;place-items:center;font-size:18px;background:#fff}

/* ── الجوال ──────────────────────────────────────────────────────── */
@media (max-width: 700px){
  .flow{bottom:0;width:calc(100% - var(--safe-l) - var(--safe-r));max-height:62vh;max-height:62dvh;padding-bottom:var(--safe-b);border-radius:24px 24px 0 0;transform:translate(-50%,40px)}   /* الهامش الآمن على الورقة كلها فلا يقع شريط الأنواع تحت مؤشر الشاشة الرئيسية */
  .fscroll{padding:12px}
  .flat{padding-bottom:calc(62vh + 16px + var(--safe-b))}
  .fd{grid-template-columns:1fr;gap:34px}
  .fcore{order:2}.fin{order:1}.fout{order:3}
  .hex{width:170px;min-height:150px}
  .foff{max-width:none}
  .fimg{height:92px}
  .tplan{gap:4px}.tplan button{min-width:0;padding:5px 7px;font-size:11px}.tplan button i{font-size:16px}.tdoor span{display:none}.tdoor{padding:8px 10px}.thint{display:none}.thead{padding:8px 11px}.thead .tdesc{display:none}
  .fx{width:40px;height:40px}
}
@media (max-width: 760px){
  .lbl{font-size:11px;padding:2px 8px 2px 6px}.lbl.s2{font-size:11.5px}.lbl.s3{font-size:13px}.lbl.on{font-size:13px}
  .banner b{font-size:14px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .thint{animation-duration:7s!important}   /* تلاشٍ بالشفافية فقط؛ بدونها لا يظهر التلميح أبداً */
}
@media (max-height:520px){.fimg{height:44px}.fimg span{bottom:6px;padding:3px 10px;font-size:11.5px}}

/* ── أدوات التحكم: المشي/المشاهدة، الإمالة، التقريب، العودة إلى الزائر، الشخصية ── */
.ctl{position:absolute;z-index:34;top:calc(12px + env(safe-area-inset-top,0px));inset-inline-end:calc(12px + var(--safe-l));display:flex;flex-direction:column;gap:6px;align-items:stretch}
.ctl button{border:0;min-width:44px;height:44px;border-radius:14px;background:var(--card-solid);box-shadow:var(--shadow-s);font-weight:900;font-size:18px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;color:var(--ink);transition:transform .15s,box-shadow .15s,background .15s,opacity .15s}
.ctl button:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.ctl button:active{transform:scale(.96)}
.ctl button i{font-style:normal;font-size:18px}
.ctl .cmode{background:linear-gradient(135deg,#7c3aed,#c026d3);color:#fff;font-size:14px;padding:0 14px 0 10px;box-shadow:0 8px 22px rgba(124,58,237,.4)}
.ctl.walk .cmode{background:var(--card-solid);color:var(--ink);box-shadow:var(--shadow-s)}
.ctl .ctilt[aria-pressed="false"]{opacity:.55}
.ctl .ctilt[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #7c3aed,var(--shadow-s)}
/* عصا التحكم للمس */
.stick{position:absolute;z-index:34;bottom:calc(22px + var(--safe-b));inset-inline-start:calc(18px + var(--safe-r));display:flex;align-items:flex-end;gap:10px;touch-action:none}
.sbase{width:124px;height:124px;border-radius:50%;background:rgba(255,255,255,.26);border:2px solid rgba(255,255,255,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25);touch-action:none}
.sknob{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#c026d3);box-shadow:0 6px 16px rgba(124,58,237,.5);will-change:transform;pointer-events:none}
.srun{border:0;width:48px;height:48px;border-radius:50%;background:var(--card-solid);box-shadow:var(--shadow-s);font-size:20px}
.srun.on{background:linear-gradient(135deg,#f59e0b,#ec4899);color:#fff}
/* تلميح قصير */
.hint{position:absolute;z-index:36;left:50%;top:calc(64px + env(safe-area-inset-top,0px));transform:translate(-50%,-8px);opacity:0;max-width:min(560px,calc(100% - 130px));padding:9px 16px;border-radius:18px;background:rgba(20,12,40,.84);color:#fff;font-size:13.5px;font-weight:700;text-align:center;line-height:1.5;box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .3s,transform .3s;pointer-events:none}
.hint.on{opacity:1;transform:translate(-50%,0)}
/* لافتة الباب القريب في وضع المشي */
.doorp{position:absolute;z-index:33;top:0;left:0;border:0;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:linear-gradient(135deg,#7c3aed,#c026d3);color:#fff;font-weight:900;font-size:13.5px;box-shadow:0 8px 24px rgba(124,58,237,.45);animation:doorPulse 1.6s ease-in-out infinite;will-change:transform;white-space:nowrap}
.doorp i{font-style:normal;font-size:16px}
.doorp kbd{font:inherit;font-size:10.5px;background:rgba(255,255,255,.22);border-radius:6px;padding:1px 6px;direction:ltr}
.doorp::after{content:"";position:absolute;bottom:-6px;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:#a233e0;border-bottom:0}
@keyframes doorPulse{50%{box-shadow:0 0 0 5px rgba(192,38,211,.22),0 8px 24px rgba(124,58,237,.45)}}
@media (pointer:coarse){.doorp kbd{display:none}}
/* «أنت» فوق الزائر */
.melbl{position:absolute;z-index:33;top:0;left:0;padding:2px 10px;border-radius:999px;background:#7c3aed;color:#fff;font-size:12px;font-weight:900;pointer-events:none;box-shadow:0 4px 12px rgba(124,58,237,.4);will-change:transform}
.melbl::after{content:"";position:absolute;bottom:-5px;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:#7c3aed;border-bottom:0}
/* انتقال سريع: ومضة قصيرة */
.blink{position:absolute;inset:0;z-index:38;pointer-events:none;background:#fff;opacity:0}
.blink.on{animation:blinkA .7s ease-out}
@keyframes blinkA{0%{opacity:.85}100%{opacity:0}}
:root[data-night="1"] .blink{background:#0a1026}
/* شارة المشي إلى هدف تحت شارة التتبّع إن ظهرتا معاً */
.walkchip span{color:#7c3aed}
.followchip:not([hidden]) + .walkchip{top:calc(62px + env(safe-area-inset-top,0px))}
@media (max-width:560px){.ctl .cmode span{display:none}.ctl .cmode{padding:0 10px}.hint{max-width:calc(100% - 120px);font-size:12.5px}}
.app.sheet .stick{opacity:0;pointer-events:none}
.stick{transition:opacity .2s}
/* ── شوارع الحرم ثلاثية الأبعاد: تُخفى طبقات الخريطة المسطّحة ── */
:root[data-mode="street"] .ctl,:root[data-mode="street"] .stick,:root[data-mode="street"] .labels,:root[data-mode="street"] .banners,:root[data-mode="street"] .tags,:root[data-mode="street"] .tip,:root[data-mode="street"] .doorp,:root[data-mode="street"] .melbl,:root[data-mode="street"] .followchip,:root[data-mode="street"] .hint{display:none!important}
.ctl .cmode.busy{opacity:.75;cursor:progress}
.ctl .cmode.busy i{animation:s3dspin 1s linear infinite}
.s3dload{position:absolute;inset:0;z-index:26;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,rgba(255,246,230,.9),rgba(230,207,159,.96) 70%);pointer-events:none}
:root[data-night="1"] .s3dload{background:radial-gradient(circle at 50% 45%,rgba(42,51,88,.92),rgba(20,27,48,.97) 70%)}
.s3dload[hidden]{display:none}
.s3dload-in{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--ink);font-weight:800;font-size:15px}
.s3dload-in i{width:44px;height:44px;border-radius:50%;border:4px solid rgba(124,58,237,.25);border-top-color:#7c3aed;animation:s3dspin .9s linear infinite}
@keyframes s3dspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.s3dload-in i,.ctl .cmode.busy i{animation-duration:3s!important;animation-iteration-count:infinite!important}}   /* دوران بطيء يبقى مؤشراً للانشغال */
/* ── إمكانية الوصول ── */
/* حلقة التركيز الكهرماني ضعيفة على الأسطح الفاتحة نهاراً (≈2:1)؛ الأغمق ≥ 3:1. الجولة وواجهة الشوارع داكنتان فتبقى كهرمانية */
:root:not([data-night="1"]) :focus-visible:not(.s3d *,.tour *){outline-color:#b45309}
/* متصفحات بلا color-mix() (Safari < 16.2، Chrome < 111): بدائل صريحة بدل خلفيات شفافة كلياً */
@supports not (color:color-mix(in srgb,red,red)){
  .flow{background:var(--card-solid);border-color:var(--c)}
  .banner{box-shadow:0 10px 28px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.4)}
  .banner.on{box-shadow:0 0 0 3px #fff,0 10px 28px rgba(0,0,0,.3)}
  .hex{background:var(--cd,var(--c));filter:drop-shadow(0 10px 22px rgba(0,0,0,.25))}
  .fimg::after{background:linear-gradient(transparent 40%,var(--card-solid))}
  .fnode{border:1.5px solid var(--k)}
  .fnode .fk{background:var(--card-2)}
  .foff button{border:1.5px dashed var(--c)}
  .lbl.rel{outline:2px solid var(--c)}
  .flat section div button{border:1.5px solid var(--c)}
}
/* زرّ النهار/الليل في عمود التحكم */
.ctl .cnight i{font-size:17px}