/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ (грузится последней — переопределяет остальные)
   ============================================================ */

/* ---------- Мобильная версия ---------- */
@media (max-width: 900px) {
    /* сайдбар превращается в верхнюю панель с горизонтальной навигацией */
    .sidebar {
        position: static;
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding: 14px 14px 0;
        flex-direction: column;
    }
    .logo-block { margin-bottom: 12px; }
    .workspace { margin-bottom: 12px; }
    .nav-label { display: none; }
    .tabs {
        flex-direction: row;
        overflow-x: auto;
        gap: 4px;
        padding-bottom: 10px;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { width: auto; padding: 9px 12px; }
    .tab-ico { font-size: 15px; width: auto; }
    .tab-label { display: none; }
    .sidebar-bottom { padding-top: 0; }
    .profile { border-top: 0; padding: 6px 6px 12px; }
    .profile .btn { padding: 6px 10px; }

    .main-shell { margin-left: 0; }
    .topbar { height: auto; padding: 10px 16px; position: static; }
    main { padding: 18px 14px 30px; }
    .page-heading h1 { font-size: 20px; }
    .panel { padding: 16px; }
    .chars-list { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .attrs { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .map-wrap { flex-direction: column; align-items: stretch; }
    .map-scroll { width: 100%; }
    .sector-panel { max-width: none; width: 100%; }
    .modal { padding: 0; }
    .modal-box { min-height: 100vh; border-radius: 0; border: none; }
    .dice-custom { flex-direction: column; }
    .log-add { flex-direction: column; }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .sidebar { width: 200px; }
    .main-shell { margin-left: 200px; }
}

/* ============================================================
   v2.1 — карты Зоны и генератор
   ============================================================ */

/* --- выбор карты --- */
.map-selector { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ms-btn {
    background: var(--bg-2);
    border: 1px solid var(--border-dim);
    border-radius: 20px;
    color: var(--text-dim);
    padding: 6px 14px;
    font-size: .78rem;
    font-family: var(--mono);
    cursor: pointer;
    transition: all .15s;
    touch-action: manipulation;
}
.ms-btn:hover { color: var(--text); border-color: var(--accent-dim); }
.ms-btn.active {
    background: rgba(183, 255, 44, .14);
    border-color: var(--accent-dim);
    color: var(--accent);
    box-shadow: var(--glow);
}
/* подпись выбранной карты у игроков (переключение — только у мастера) */
.ms-label {
    display: inline-block;
    background: rgba(183, 255, 44, .1);
    border: 1px solid var(--accent-dim);
    border-radius: 20px;
    color: var(--accent);
    padding: 6px 14px;
    font-size: .78rem;
    font-family: var(--mono);
}
/* заглушка, когда регион ещё не выбран / у локации нет карты */
.map-locked {
    border: 1px dashed var(--border-dim);
    border-radius: 10px;
    color: var(--text-dim);
    padding: 28px 20px;
    text-align: center;
    font-size: .85rem;
    max-width: 560px;
}

/* --- карта Зоны (изображение + сетка) --- */
.zmap-box { position: relative; max-width: none; }
.zmap-box img { display: block; border-radius: 8px; border: 1px solid var(--border); }
.zmap-grid { position: absolute; inset: 0; }
.zcell {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid rgba(183, 255, 44, .16);
    border-radius: 2px;
    background: rgba(10, 10, 10, .55);
    cursor: pointer;
    transition: background .15s, border-color .15s;
    display: flex; align-items: flex-start; justify-content: flex-end;
    gap: 1px; padding: 1px;
}
.zcell i {
    font-style: normal; font-size: .5rem; line-height: 1;
    font-family: var(--mono); color: var(--hazard);
    text-shadow: 0 0 4px rgba(0,0,0,.9);
}
.zcell i.th { color: #e07a5a; }
.zcell:hover { border-color: rgba(232, 195, 58, .6); background: rgba(232, 195, 58, .08); z-index: 2; }
.zcell.open { background: rgba(183, 255, 44, .12); border-color: rgba(183, 255, 44, .35); }
.zcell.has-data:not(.open) { border-color: rgba(183, 255, 44, .4); background: rgba(183, 255, 44, .08); }
.zcell.selected { border-color: var(--hazard); box-shadow: 0 0 0 1px rgba(232, 195, 58, .5), 0 0 10px rgba(232, 195, 58, .3); z-index: 3; }

/* --- панель сектора: расширенная --- */
.zsec-gen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.zsec-tl { font-size: .75rem; color: var(--text-dim); font-family: var(--mono); display: flex; align-items: center; gap: 6px; }
.zsec-tl input { width: 56px; padding: 4px 6px; font-size: .8rem; }
.zsec-out {
    background: var(--bg-2); border: 1px solid var(--border-dim);
    border-radius: 8px; padding: 10px 12px;
    font-size: .84rem; margin-bottom: 12px; min-height: 40px;
}
.zsec-out p { margin: 2px 0; }
.sector-panel p { margin: 4px 0; font-size: .86rem; }
.sector-panel p b { color: var(--text-dim); font-weight: 600; }
.sec-notes {
    margin-top: 8px !important; padding-top: 8px;
    border-top: 1px dashed var(--border-dim);
    white-space: pre-wrap;
}
.zsec-actions { display: flex; gap: 8px; margin-top: 10px; }
.sector-panel textarea { width: 100%; margin-top: 10px; font-size: .86rem; }

@media (max-width: 720px) {
    .zcell { border-width: 1px; }
    .gen-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .help-wrap { grid-template-columns: 1fr; }
    .help-menu { position: static; flex-direction: row; flex-wrap: wrap; }
    .help-imgs img { max-width: 100%; }
}