:root {
    --accent: #cf9a4c;
    --accent-bright: #e7bd77;
    --ink: #f4ede1;
    --ink-dim: rgba(244, 237, 225, 0.72);
    --panel-bg: rgba(17, 15, 13, 0.62);
    --panel-bg-strong: rgba(15, 13, 11, 0.78);
    --panel-border: rgba(231, 189, 119, 0.28);
    --panel-border-soft: rgba(244, 237, 225, 0.16);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-lift: 0 14px 40px rgba(0, 0, 0, 0.55);
    --blur: blur(18px) saturate(150%);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
    background: #060504;
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
}

#viewer {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#article-heading,
#gallery-card h2,
#lang-card h1 {
    font-family: "El Messiri", "IBM Plex Sans Arabic", sans-serif;
}

#panorama {
    width: 100%;
    height: 100%;
    /* Pannellum يموضع النقاط الساخنة بـ transform انطلاقًا من موضعها الابتدائي؛
       في صفحة RTL يصبح ذلك الموضع الحافة اليمنى فتنزاح كل النقاط بعرض الشاشة
       كاملًا (وتختفي أو تظهر في غير مكانها). البانوراما صورة لا نص، فنثبّتها LTR. */
    direction: ltr;
}

/* تظليل خفيف على حواف الصورة (vignette) لعمق بصري سينمائي، بلا أي تأثير
   على التفاعل (pointer-events: none). */
#vignette {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    box-shadow: inset 0 0 18vw rgba(0, 0, 0, 0.55);
}

/* إخفاء مربع "Loading" الافتراضي لمكتبة Pannellum — نستخدم شاشة تحميل
   مخصّصة (#loading-screen) بدلًا منه. */
.pnlm-load-box {
    display: none !important;
}

/* نخفي صندوق عنوان المشهد المدمج في Pannellum (لا يترجم ويتداخل مع شريط
   الأدوات في الاتجاه LTR) ونستبدله بـ #scene-title الخاص بنا. */
.pnlm-panorama-info {
    display: none !important;
}

#scene-title {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    max-width: 60vw;
    padding: 8px 20px;
    border-radius: 999px;
    border: 1px solid var(--panel-border-soft);
    background: var(--panel-bg);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--shadow-soft);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* --- شاشة التحميل --- */
#loading-screen {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: radial-gradient(ellipse at center, #14100b 0%, #050403 100%);
    color: var(--ink);
    transition: opacity 0.5s ease;
}

#loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

#loading-mark {
    width: 40px;
    height: 40px;
    color: var(--accent-bright);
    opacity: 0.9;
}

#loading-mark svg {
    width: 100%;
    height: 100%;
}

#loading-ring {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 3px solid rgba(231, 189, 119, 0.2);
    border-top-color: var(--accent-bright);
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#loading-text {
    margin: 0;
    font-size: 14px;
    letter-spacing: 0.3px;
    color: var(--ink-dim);
}

/* --- شاشة اختيار اللغة --- */
#lang-screen {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #14100b 0%, #050403 100%);
    transition: opacity 0.4s ease;
}

#lang-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

#lang-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 20px;
    text-align: center;
}

#lang-mark {
    width: 46px;
    height: 46px;
    color: var(--accent-bright);
}

#lang-mark svg {
    width: 100%;
    height: 100%;
}

#lang-card h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.8;
    color: var(--ink);
}

#lang-options {
    display: flex;
    gap: 14px;
}

.lang-option {
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 34px;
    border-radius: 12px;
    border: 1px solid var(--panel-border-soft);
    background: var(--panel-bg);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    color: var(--ink);
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.lang-option:hover {
    background: rgba(207, 154, 76, 0.22);
    border-color: var(--panel-border);
    color: var(--accent-bright);
    transform: translateY(-2px);
}

#lang-toggle-btn {
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.4px;
}

/* سهما التنقل بين المشاهد في الوسط أسفل الشاشة: ↑ للتقدّم (التالي) و↓
   للرجوع (السابق) — كأن الزائر يمشي للأمام أو يعود للخلف. */
#scene-nav {
    position: absolute;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.edge-nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--panel-border-soft);
    background: var(--panel-bg);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--shadow-soft);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.edge-nav-btn:hover {
    background: var(--panel-bg-strong);
    border-color: var(--panel-border);
    color: var(--accent-bright);
    transform: scale(1.08);
}

#next-scene-btn {
    border-color: var(--panel-border);
    color: var(--accent-bright);
}

/* على الشاشات الضيقة يتقاطع وسط الشاشة مع شريط الأدوات السفلي، فنرفع السهمين فوقه */
@media (max-width: 700px) {
    #scene-nav {
        bottom: calc(76px + env(safe-area-inset-bottom));
    }
}

.icon {
    width: 20px;
    height: 20px;
    flex: none;
}

/* نقاط ساخنة (Hotspots) داخل البانوراما — لمعلومات كل مشهد فقط، مبنية عبر
   واجهة Pannellum الأصلية (hotSpots) بدل طبقات HTML يدوية. */
.hotspot-info {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid rgba(231, 189, 119, 0.55);
    background: var(--panel-bg-strong);
    color: var(--accent-bright);
    font-size: 19px;
    font-family: Georgia, "Times New Roman", serif;
    animation: info-pulse 2.4s infinite;
}

.hotspot-info::before {
    content: "i";
    font-weight: 700;
    font-style: italic;
}

.hotspot-info:hover {
    background: rgba(207, 154, 76, 0.35);
}

@keyframes info-pulse {
    0% { box-shadow: 0 0 0 0 rgba(231, 189, 119, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(231, 189, 119, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 189, 119, 0); }
}

/* --- القائمة الجانبية (قائمة المشاهد) --- */
#scene-menu {
    /* مخفي بناءً على الطلب — التنقل متوفر عبر الأسهم الجانبية، الخريطة
       العلوية، والمعرض. */
    display: none !important;
    position: absolute;
    top: calc(16px + env(safe-area-inset-top));
    right: calc(16px + env(safe-area-inset-right));
    z-index: 10;
    flex-direction: column;
    gap: 6px;
    max-width: 46vw;
    padding: 8px;
    background: var(--panel-bg);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--panel-border-soft);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
}

.scene-btn {
    background: transparent;
    color: var(--ink-dim);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s ease, color 0.15s ease;
}

.scene-btn:hover {
    background: rgba(244, 237, 225, 0.08);
    color: var(--ink);
}

.scene-btn.active {
    background: linear-gradient(90deg, rgba(207, 154, 76, 0.28), rgba(207, 154, 76, 0.1));
    color: var(--accent-bright);
    font-weight: 700;
}

/* --- شريط الأدوات السفلي --- */
#toolbar {
    position: absolute;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: calc(16px + env(safe-area-inset-left));
    z-index: 10;
    display: flex;
    gap: 10px;
}

.tool-btn {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--panel-border-soft);
    background: var(--panel-bg);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--shadow-soft);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.tool-btn:hover {
    background: var(--panel-bg-strong);
    border-color: var(--panel-border);
    color: var(--accent-bright);
    transform: translateY(-2px);
}

/* أيقونة الصوت تعرض الحالة الحالية: سماعة مشطوبة = صامت، سماعة بموجات = يعمل */
#audio-btn .icon-audio-on,
#autorotate-btn .icon-pause {
    display: none;
}

#audio-btn.playing .icon-audio-off,
#autorotate-btn.rotating .icon-play {
    display: none;
}

#audio-btn.playing .icon-audio-on,
#autorotate-btn.rotating .icon-pause {
    display: block;
}

#audio-btn.playing,
#autorotate-btn.rotating {
    color: var(--accent-bright);
    border-color: var(--panel-border);
}

/* --- الخريطة العلوية (Minimap) --- */
#minimap {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top));
    left: calc(16px + env(safe-area-inset-left));
    z-index: 10;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: var(--panel-bg);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--panel-border-soft);
    box-shadow: var(--shadow-soft);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}

#minimap.has-image {
    border-radius: 12px;
}

.minimap-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(244, 237, 225, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.4);
    transform: translate(-50%, -50%);
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.minimap-dot:hover {
    background: var(--ink);
}

.minimap-dot.active {
    background: var(--accent-bright);
    width: 13px;
    height: 13px;
    box-shadow: 0 0 0 4px rgba(231, 189, 119, 0.3);
}

/* --- النوافذ المنبثقة (المعرض / نافذة المعلومات) --- */
#gallery-modal,
#article-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

#gallery-modal[hidden],
#article-modal[hidden] {
    display: none;
}

#gallery-backdrop,
#article-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 5, 4, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.35s ease;
}

#gallery-card,
#article-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    background: linear-gradient(165deg, rgba(35, 29, 21, 0.92), rgba(14, 12, 10, 0.92));
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    padding: 32px 28px;
    color: var(--ink);
    box-shadow: var(--shadow-lift);
    transform: scale(0.94) translateY(12px);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

#gallery-card { max-width: 660px; }
#article-card { max-width: 520px; }

#gallery-card::-webkit-scrollbar,
#article-card::-webkit-scrollbar {
    width: 8px;
}

#gallery-card::-webkit-scrollbar-thumb,
#article-card::-webkit-scrollbar-thumb {
    background: rgba(231, 189, 119, 0.35);
    border-radius: 8px;
}

#gallery-modal.open #gallery-backdrop,
#article-modal.open #article-backdrop {
    opacity: 1;
}

#gallery-modal.open #gallery-card,
#article-modal.open #article-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

#gallery-card h2 {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-bright);
}

#gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.gallery-item {
    border: 1px solid var(--panel-border-soft);
    background: rgba(244, 237, 225, 0.05);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    color: var(--ink);
    text-align: center;
    font-family: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.gallery-item:hover {
    border-color: var(--panel-border);
    transform: translateY(-3px);
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.gallery-item span {
    display: block;
    padding: 9px 6px;
    font-size: 13px;
    font-weight: 500;
}

.modal-close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--panel-border-soft);
    background: rgba(0, 0, 0, 0.3);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, color 0.2s ease;
}

.modal-close:hover {
    background: rgba(0, 0, 0, 0.5);
    color: var(--accent-bright);
}

.modal-close .icon {
    width: 16px;
    height: 16px;
}

#article-part {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--accent-bright);
    background: rgba(231, 189, 119, 0.12);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    padding: 4px 14px;
    margin-bottom: 16px;
}

#article-heading {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

#article-body {
    margin: 0;
    font-size: 15px;
    line-height: 1.9;
    color: var(--ink-dim);
}

@media (max-width: 480px) {
    #scene-menu {
        max-width: 55vw;
        gap: 4px;
        padding: 6px;
    }

    .scene-btn {
        font-size: 12px;
        padding: 7px 10px;
    }

    .edge-nav-btn {
        width: 40px;
        height: 40px;
    }

    .icon {
        width: 17px;
        height: 17px;
    }

    #toolbar {
        gap: 8px;
    }

    .tool-btn {
        width: 40px;
        height: 40px;
    }

    #minimap {
        width: 76px;
        height: 76px;
    }
}

/* --- الجوال: ترتيب أنظف --- */
@media (max-width: 600px) {
    /* اسم المشهد يمينًا بجانب الخريطة بدل الوسط حتى لا يتداخل معها */
    #scene-title {
        left: auto;
        right: calc(16px + env(safe-area-inset-right));
        transform: none;
        max-width: calc(100vw - 132px - env(safe-area-inset-left) - env(safe-area-inset-right));
        padding: 7px 14px;
        font-size: 13px;
    }

    /* معرض المشاهد: صورتان في كل صف بدل صورة ضخمة واحدة */
    #gallery-modal,
    #article-modal {
        padding: 16px;
    }

    #gallery-card {
        padding: 24px 14px 16px;
        max-height: 86vh;
    }

    #gallery-card h2 {
        margin-bottom: 14px;
        font-size: 16px;
    }

    #gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .gallery-item span {
        padding: 6px 4px;
        font-size: 11.5px;
        line-height: 1.5;
    }

    #article-card {
        padding: 26px 20px 22px;
    }

    #article-heading {
        font-size: 19px;
    }

    #article-body {
        font-size: 14.5px;
    }
}

/* الجوال بالوضع الأفقي: الشاشة قصيرة، فنصغّر العناصر لتبقى الصورة هي الأساس */
@media (max-height: 480px) {
    #minimap {
        width: 64px;
        height: 64px;
    }

    .minimap-dot { width: 7px; height: 7px; }
    .minimap-dot.active { width: 9px; height: 9px; }

    #scene-title {
        top: calc(10px + env(safe-area-inset-top));
    }

    #scene-nav {
        bottom: calc(10px + env(safe-area-inset-bottom));
        gap: 6px;
    }

    .edge-nav-btn,
    .tool-btn {
        width: 36px;
        height: 36px;
    }

    #toolbar {
        bottom: calc(10px + env(safe-area-inset-bottom));
        gap: 6px;
    }

    .icon {
        width: 16px;
        height: 16px;
    }

    .hotspot-info {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    #article-card,
    #gallery-card {
        max-height: 90vh;
        padding: 18px 18px 14px;
    }
}