/* === Sultan's Game Atmosphere Layer — Enhanced Ottoman Style === */

/* Page base - deep Ottoman palace interior */
body {
    background:
        linear-gradient(180deg, rgba(18,6,6,0.94), rgba(18,6,6,0.88), rgba(18,6,6,0.96)),
        url('../assets/desert_sm.jpg') top center/cover fixed;
}

/* Dense arabesque tile pattern — like Game of Sultans panel backgrounds */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.045;
    background-image:
        radial-gradient(circle at 50% 50%, transparent 26%, rgba(212,168,83,0.6) 28%, transparent 32%),
        radial-gradient(circle at 0% 0%, transparent 26%, rgba(212,168,83,0.6) 28%, transparent 32%),
        radial-gradient(circle at 25% 75%, transparent 20%, rgba(180,120,50,0.4) 22%, transparent 25%),
        linear-gradient(45deg, transparent 48%, rgba(212,168,83,0.15) 49%, rgba(212,168,83,0.15) 51%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(212,168,83,0.15) 49%, rgba(212,168,83,0.15) 51%, transparent 52%);
    background-size: 44px 44px, 44px 44px, 30px 30px, 22px 22px, 22px 22px;
}

/* Second pattern layer — geometric lattice overlay for depth */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.025;
    background-image:
        repeating-linear-gradient(0deg, rgba(212,168,83,0.4) 0, rgba(212,168,83,0.4) 1px, transparent 1px, transparent 60px),
        repeating-linear-gradient(90deg, rgba(212,168,83,0.4) 0, rgba(212,168,83,0.4) 1px, transparent 1px, transparent 60px);
}

/* ===== Site Header — ornate Ottoman header bar ===== */
.site-header {
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(212,168,83,0.2);
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* ===== Map: dark red campaign chart inspired by Sultan's Game map screens ===== */
.leaflet-container {
    background:
        linear-gradient(180deg, rgba(8, 3, 3, 0.18), rgba(8, 3, 3, 0.44)),
        url('../sultansgame_background_map.jpg') center/cover no-repeat,
        radial-gradient(ellipse at 48% 42%, rgba(121, 28, 22, 0.92) 0%, rgba(76, 15, 12, 0.96) 46%, rgba(35, 7, 6, 1) 100%),
        linear-gradient(135deg, #5f1712, #220706 70%) !important;
    background-blend-mode: multiply, soft-light, normal, normal !important;
}

/* Faint woven motifs and chart marks, borrowed from the downloaded map texture */
#map::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 305;
    opacity: 0.2;
    background-image:
        url('../sultansgame_background_map.jpg'),
        radial-gradient(circle at 50% 50%, rgba(218, 174, 96, 0.28) 0 1px, transparent 1.6px),
        linear-gradient(45deg, transparent 49%, rgba(214, 166, 82, 0.08) 50%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, rgba(214, 166, 82, 0.055) 50%, transparent 51%);
    background-size: cover, 32px 32px, 44px 44px, 44px 44px;
    background-position: center, center, center, center;
    mix-blend-mode: soft-light;
    filter: saturate(0.8) contrast(1.15);
}

/* Vignette for framed chart look */
#map::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 351;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.28), transparent 14%, transparent 86%, rgba(0,0,0,0.32)),
        linear-gradient(180deg, rgba(0,0,0,0.3), transparent 12%, transparent 84%, rgba(0,0,0,0.35)),
        radial-gradient(ellipse at center, transparent 50%, rgba(16,3,3,0.7) 100%);
    box-shadow:
        inset 0 0 120px rgba(8,2,2,0.82),
        inset 0 0 0 18px rgba(21,5,5,0.28);
    opacity: var(--atm-shadow, 1);
    transition: opacity 0.4s;
}

/* ===== Map frame — ornate double-border Sultan panel ===== */
/* Border + ring shadows are drawn on ::after (see style.css) so they paint above
   the peeking cat (z-index:-1); the base element keeps only vignette + drop shadow. */
.map-frame {
    border: 0 !important;
    box-shadow:
        inset 0 0 40px rgba(0,0,0,0.3),
        0 20px 60px rgba(0,0,0,0.6) !important;
}
.map-frame::after {
    border: 2px solid rgba(154, 105, 48, 0.95) !important;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.7),
        0 0 0 5px rgba(35,10,7,0.95),
        0 0 0 7px rgba(129,64,32,0.72),
        0 0 0 10px rgba(21,7,6,0.9),
        0 0 0 11px rgba(205,158,78,0.2) !important;
}

/* Corner ornament glow */
.frame-corner::before, .frame-corner::after {
    box-shadow: 0 0 6px rgba(212,168,83,0.6);
}

/* Cartouche diamond ends */
.map-cartouche {
    border: 1px solid var(--gold) !important;
    background: rgba(18,6,6,0.92) !important;
    box-shadow: 0 0 12px rgba(0,0,0,0.5), inset 0 0 8px rgba(212,168,83,0.08);
}

.map-cartouche::before, .map-cartouche::after {
    content: '◆';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold-dark);
    font-size: 0.4rem;
}
.map-cartouche::before { left: 7px; }
.map-cartouche::after { right: 7px; }

/* ===== Section title ornamental dividers ===== */
.section-title {
    position: relative;
    padding: 0.8rem 0;
}

/* Horizontal ornamental line behind section titles */
.section-title::before {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,168,83,0.3), rgba(212,168,83,0.5), rgba(212,168,83,0.3), transparent);
}

.section-title h2 {
    position: relative;
    background: linear-gradient(180deg, rgba(18,6,6,1), rgba(18,6,6,0.97));
    padding: 0 1.5rem;
    z-index: 1;
}

.section-title .td {
    position: relative;
    z-index: 1;
    background: rgba(18,6,6,0.97);
    padding: 0 0.3rem;
}

/* ===== Timeline card texture — Sultan panel style ===== */
.tl-card {
    position: relative;
    background:
        radial-gradient(circle at 20% 14%, rgba(205, 156, 78, 0.18), transparent 34%),
        repeating-linear-gradient(0deg, rgba(255, 214, 116, 0.035) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, rgba(59,18,10,0.9), rgba(24,7,5,0.94)) !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,calc(0.35 * var(--atm-shadow, 1))), 0 4px 14px rgba(0,0,0,calc(0.3 * var(--atm-shadow, 1)));
    border: 1px solid rgba(212,168,83,0.25) !important;
    transition: box-shadow 0.4s;
}

/* Inner frame line */
.tl-card::before {
    content: '';
    position: absolute;
    top: 3px; left: 3px; right: 3px; bottom: 3px;
    border: 1px solid rgba(212,168,83,0.08);
    border-radius: 6px;
    pointer-events: none;
}

/* Gold seal tab on top-right */
.tl-card::after {
    content: '';
    position: absolute;
    top: -2px;
    right: 14px;
    width: 20px;
    height: 6px;
    background: linear-gradient(180deg, #5a4010, #d4a853, #5a4010);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Timeline dot warm aura */
.tl-dot::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,168,83,0.25) 0%, transparent 70%);
    transform: rotate(-45deg);
}

/* Timeline line glow */
.timeline-vertical::before {
    box-shadow: 0 0 8px rgba(212,168,83,0.15);
}

/* ===== Card wall — Sultan card styling ===== */
.loc-card {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}

/* Sultan-style gold border around cards */
.loc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid rgba(212,168,83,0.4);
    border-radius: 6px;
    pointer-events: none;
    z-index: 1;
}

.loc-card::after {
    content: '';
    position: absolute;
    inset: 2px;
    border: 1px solid rgba(212,168,83,0.15);
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
}

.loc-card:hover::before {
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(212,168,83,0.3);
}

/* ===== Popup card — Sultan panel ===== */
.popup-content {
    background: linear-gradient(180deg, rgba(24,8,4,0.98), rgba(18,6,6,0.98)) !important;
    border: 2px solid rgba(212,168,83,0.45) !important;
    box-shadow:
        0 0 0 4px rgba(42,18,8,0.8),
        0 0 0 5px rgba(212,168,83,0.2),
        0 0 80px rgba(139,32,32,0.25),
        inset 0 0 40px rgba(0,0,0,calc(0.4 * var(--atm-shadow, 1)));
    transition: box-shadow 0.4s;
}

/* Popup inner frame */
.popup-content::before {
    content: '';
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1px solid rgba(212,168,83,0.12);
    border-radius: 8px;
    pointer-events: none;
}

.popup-header h3::before,
.popup-header h3::after {
    content: '◈';
    color: var(--gold-dark);
    margin: 0 0.5rem;
    font-size: 0.6em;
    vertical-align: middle;
}

/* ===== Site Header — ornamental ===== */
.site-header {
    background:
        linear-gradient(90deg, rgba(18,6,6,0.95), rgba(18,6,6,0.7) 50%, transparent 80%);
    border-bottom: 1px solid rgba(212,168,83,0.1);
}

/* ===== Footer — ornamental ===== */
footer {
    position: relative;
    background: rgba(18,6,6,0.7);
    border-top: 1px solid rgba(212,168,83,0.12);
}

footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,168,83,0.3), transparent);
}

/* ===== Ornament line top — richer glow ===== */
.ornament-line {
    height: 3px;
    box-shadow: 0 1px 6px rgba(212,168,83,0.4);
}

/* ===== Leaflet zoom controls — themed ===== */
.leaflet-control-zoom a {
    background: rgba(18,6,6,0.9) !important;
    color: var(--gold) !important;
    border-color: rgba(212,168,83,0.3) !important;
}

.leaflet-control-zoom a:hover {
    background: rgba(42,18,8,0.95) !important;
    color: var(--gold-light) !important;
}

.leaflet-control-zoom {
    border: 1px solid rgba(212,168,83,0.3) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}