/* ====== BASE / TOKENS ====== */
:root{
    --h-step: 32px;
    --emerald-50:#ecfdf5; --emerald-100:#d1fae5; --emerald-200:#a7f3d0;
    --emerald-600:#059669; --emerald-700:#047857;
    --teal-50:#e6fffb; --cyan-50:#e0f2fe;
    --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-600:#475569;
    --white:#fff; --shadow:0 10px 25px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{height:100%; max-width:100%; overflow-x:hidden;}
body{margin:0;font-family:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--slate-50);color:#0f172a}
img{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.card{background:var(--white);border:1px solid var(--emerald-200);border-radius:16px;box-shadow:var(--shadow)}

/* ====== HEADER ====== */
.site-header{background:linear-gradient(90deg,var(--emerald-50),var(--teal-50));border-bottom:1px solid var(--emerald-200)}
.header-inner{display:flex;align-items:center;gap:12px;padding:12px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand-icon{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--emerald-200);border-radius:12px;padding:8px 10px;box-shadow:var(--shadow)}
.brand-icon .book-icon,.brand-icon .edit-icon{width:20px;height:20px;color:var(--emerald-600)}
.brand-icon .divider{width:1px;height:18px;background:var(--emerald-200)}
.brand-title{margin:0;font-weight:700;font-family:"Space Grotesk",sans-serif;color:#065f46}
.brand-subtitle{margin:0;color:var(--emerald-600);font-size:12px}

/* ====== HERO ====== */
.hero{background:linear-gradient(135deg,var(--emerald-50),var(--teal-50),var(--cyan-50));padding:28px 0}
.hero-card{padding:24px;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(6px)}
.hero-content h2{margin:0 0 8px;font-family:"Space Grotesk",sans-serif;font-size:32px;color:#065f46}
.hero-content p{margin:0 0 16px;color:#334155}
.hero-card .hero-content{ text-align:center; margin:0 auto; }
.hero-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;justify-items:center;text-align:center}
.feature{text-align:center;padding:10px}
.feature-icon{width:48px;height:48px;margin:0 auto 8px;border-radius:999px;background:var(--emerald-100);display:flex;align-items:center;justify-content:center;color:var(--emerald-600)}
.feature h3{margin:4px 0 4px;color:#065f46;font-size:16px}
.feature p{margin:0;color:#64748b;font-size:13px}
.feature-icon svg { color: var(--emerald-600); }

/* ====== MAIN GRID ====== */
.main-grid{display:grid;grid-template-columns:320px 1fr;gap:24px;padding:24px 0}
@media (max-width:1200px){ .main-grid{grid-template-columns:1fr;gap:16px} .map-section{order:1} .sidebar{order:2} }

/* ====== SIDEBAR ====== */
.sidebar .card{padding:16px}
.sidebar-content h3{margin:0 0 10px;color:#065f46}
.character-list{margin-top:12px;max-height:260px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.character-item{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}
.character-item:hover{background:var(--emerald-50);border-color:var(--emerald-200)}
.character-item img{width:36px;height:36px;border-radius:999px;border:1px solid var(--emerald-200);object-fit:cover}
.character-item .name{font-size:14px;color:#0f172a}
.character-item .period{font-size:12px;color:#64748b}
@media (max-width:480px){ .character-list{max-height:220px} .character-item img{width:32px;height:32px} }

/* ====== MAP ====== */
.map-section .map-card{ position:relative; padding:10px; overflow:hidden; }
.map{ height:clamp(340px, 60vh, 640px); border-radius:12px; width:100%; }
.map-controls{position:absolute;right:calc(8px + env(safe-area-inset-right));top:calc(8px + env(safe-area-inset-top));padding:8px;display:flex;flex-direction:column;gap:8px;z-index:1000}
.control-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--emerald-200);background:#fff;border-radius:10px;color:#0f172a;cursor:pointer}
.control-btn svg{width:18px;height:18px}
@media (max-width:480px){
    .container{padding:0 12px}
    .map{height:360px}
    .map-controls{right:calc(6px + env(safe-area-inset-right));top:calc(6px + env(safe-area-inset-top));gap:6px}
    .control-btn{width:34px;height:34px;border-radius:8px}
}

/* ====== FOOTER ====== */
.site-footer{margin-top:28px;padding:24px 0;background:#065f46;color:#e2f7ee}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px 32px;align-items:start}
@media (max-width:1024px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .footer-grid{grid-template-columns:1fr} }
.footer-links a,.footer-contact a{ color:#E6FAF0; text-decoration:none; }
.footer-links a:hover,.footer-contact a:hover{ text-decoration:underline; }
.footer-bottom{text-align:center;margin-top:16px;color:#c7f9e5}

/* ====== MODAL ====== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:100000}
.modal.hidden{display:none}
.modal-dialog{max-width:min(920px,96vw);width:92%}
.modal-content{position:relative;background:#fff;border:1px solid var(--emerald-200);border-radius:14px;box-shadow:var(--shadow);padding:16px;max-height:min(86vh,900px);display:flex;flex-direction:column}
.modal-close{position:absolute;right:12px;top:12px;border:0;background:transparent;cursor:pointer}
.modal-header{display:flex;gap:12px;align-items:center}
.modal-avatar{width:64px;height:64px;border-radius:999px;border:2px solid var(--emerald-600);object-fit:cover}
.modal-period{margin:2px 0 0;color:#047857;font-size:12px}
.modal-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.meta-full{grid-column:span 2}
.modal-body{overflow:auto;padding-right:8px}
.meta-label{font-weight:600;color:#047857}

/* ====== FULLSCREEN overrides ====== */
.map-card:fullscreen,.map-card:-webkit-full-screen,
.map-card.is-fullscreen{position:fixed!important;inset:0;margin:0;padding:0;border-radius:0;z-index:9999;background:#fff}
.map-card:fullscreen .map,.map-card:-webkit-full-screen .map,.map-card.is-fullscreen .map{width:100vw;height:100vh;border-radius:0}
@supports (height: 100dvh){
    .map-card:fullscreen .map,
    .map-card:-webkit-full-screen .map,
    .map-card.is-fullscreen .map{ height:100dvh; }
}
body.fs-lock{ overflow:hidden; }

/* ====== SMART SELECT ====== */
.smart-select{ position:relative; }
.smart-select input{ width:100%; padding:10px 38px 10px 12px; border:1px solid var(--emerald-200); border-radius:10px; font-size:14px; outline:none; }
.smart-select #authorSmartClear{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:28px; height:28px; border:0; border-radius:6px; background:#f1f5f9; color:#475569; cursor:pointer; display:none; }
.smart-select #authorSmartClear:hover{ background:#e2e8f0; }
.smart-dropdown{ position:absolute; z-index:11000; left:0; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--emerald-200); border-radius:10px; box-shadow:var(--shadow); max-height:320px; overflow:auto; padding:6px; }
.smart-dropdown.hidden{ display:none; }
.smart-opt{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; }
.smart-opt:hover,.smart-opt.is-active{ background:var(--emerald-50); }
.smart-opt img{ width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid var(--emerald-200); }
.smart-opt .n{ font-weight:600; color:#0f172a; }
.smart-opt .y{ font-size:12px; color:#64748b; }

/* ====== Fluid type ====== */
:root{
    --fs-brand: clamp(18px, 4vw, 28px);
    --fs-sub:   clamp(11px, 2.6vw, 14px);
    --fs-h2:    clamp(20px, 6vw, 32px);
}
.brand-title{font-size:var(--fs-brand);line-height:1.15}
.brand-subtitle{font-size:var(--fs-sub)}
@media (max-width:768px){ .hero-features{grid-template-columns:repeat(2,1fr);gap:14px} }
@media (max-width:480px){
    .hero-features{grid-template-columns:1fr;gap:12px}
    .feature-icon{width:40px;height:40px}
}

.map-card:fullscreen .modal,
.map-card:-webkit-full-screen .modal,
.map-card.is-fullscreen .modal{
    position: fixed;
    inset: 0;
    z-index: 2147483647; /* бәрінен жоғары */
}

/* === Yandex v3 markers layering + container safety === */
.map { position: relative; }                 /* карта контейнерін қабат контексті қылу */
.character-marker { position: relative; z-index: 3; }  /* маркерлер әрқашан үстінде */
.map-card { overflow: hidden; }              /* FS-тен кейін қалған артық өлшемді қырқу */

/* Мобайл/планшетте: алдымен ТІЗІМ, кейін КАРТА */
@media (max-width: 1200px){
    .main-grid{ grid-template-columns: 1fr; gap: 16px; }
    .sidebar{ order: 1; }
    .map-section{ order: 2; }
}
@media (max-width: 768px){
    .main-grid{ grid-template-columns: 1fr; }
    .sidebar{ order: 1; }
    .map-section{ order: 2; }
}

/* Маркерлер карта үстінде тұрсын және контейнер қауіпсіз болсын */
.map{ position: relative; }
.character-marker{ position: relative; z-index: 3; }
.map-card{ overflow: hidden; }


/* ===== Modal close (desktop + mobile friendly) ===== */
.modal-close{
    position: absolute;
    right: 12px;
    top: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #f8fafc;           /* ашық фон */
    color: #0f172a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.modal-close:hover{ background:#eef2f7; }
.modal-close svg{ width: 18px; height: 18px; }

/* Мобильде – touch target ірілеу */
@media (max-width:640px){
    .modal-close{
        right: 10px;
        top: 10px;
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
    .modal-close svg{ width: 20px; height: 20px; }
}

/* Modal әрқашан картадан жоғары */
.modal{ z-index: 100000 !important; }