:root{
    --bg:#14161c; --panel:#1d2029; --panel2:#232735; --line:#313649;
    --text:#e8e6df; --dim:#9aa0ae; --accent:#e8b64c; --accent2:#8ab4ff;
    --danger:#ff7a7a;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
  html,body{height:100%; margin:0}
  body{
    background:var(--bg); color:var(--text); overflow:hidden;
    font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  }
  #app{position:fixed; inset:0; display:flex; flex-direction:column}

  /* ── top bar ─────────────────────────────────────────── */
  #topbar{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:8px 12px; background:var(--panel); border-bottom:1px solid var(--line); z-index:30;
  }
  #topbar h1{font-size:16px; margin:0 8px 0 0; white-space:nowrap; letter-spacing:.3px}
  #topbar h1 b{color:var(--accent)}
  .spacer{flex:1}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
    background:var(--panel2); border:1px solid var(--line); color:var(--text);
    border-radius:8px; padding:5px 10px; cursor:pointer; font-size:13px; white-space:nowrap;
  }
  .btn:hover{border-color:var(--accent); color:#fff}
  .btn.active{background:var(--accent); color:#201a08; border-color:var(--accent); font-weight:600}
  #zoombox{display:flex; gap:4px}
  #zoombox .btn{padding:5px 9px; font-weight:700}

  /* ── map viewport ────────────────────────────────────── */
  #viewport{position:relative; flex:1; min-width:0; overflow:hidden; cursor:grab; background:#0d0e12;
            touch-action:none; user-select:none; -webkit-user-select:none}
  #viewport.dragging{cursor:grabbing}
  #world{position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform}
  #svgbase{position:absolute; left:0; top:0; width:2854px; height:2116px}
  #svgbase svg{display:block; pointer-events:none}
  #svgbase path{pointer-events:auto; cursor:pointer; transition:fill .12s}
  #labels{position:absolute; left:0; top:0}

  /* ── zone labels (данные из zones.json) ───────────────── */
  .zlabel{
    position:absolute; display:flex; align-items:center; gap:0;
    transform-origin:center center; white-space:nowrap; cursor:pointer;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));
  }
  .zlabel .pill{
    display:flex; flex-direction:column; align-items:flex-start;
    background:linear-gradient(180deg,#8a2a22 0%, #6d1d17 55%, #571410 100%);
    border:1px solid #40100c; border-radius:6px;
    padding:2px 9px 3px 7px; color:#f7f1e6;
    text-shadow:0 1px 1px rgba(0,0,0,.7);
  }
  .zlabel .row1{display:flex; align-items:center; gap:4px; font-size:13.5px; font-weight:800; line-height:1.2}
  .zlabel .row2{font-size:11px; font-weight:600; line-height:1.2; color:#eee0cb; text-align:left}
  #labels.hide-types .row2{display:none}
  .zlabel .badge{
    min-width:22px; height:24px; padding:0 3px; margin-right:-3px; z-index:2;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg,#f9dd7c 0%, #e3b23c 60%, #b8842a 100%);
    border:1px solid #7d5a17; border-radius:6px 6px 8px 8px;
    color:#3c2a06; font-weight:800; font-size:13px;
    clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);
    text-shadow:0 1px 0 rgba(255,255,255,.45);
  }
  .zlabel .tag{font-weight:800}
  .zlabel.notag .pill{   /* зона без альянса — нейтральная серая плашка */
    background:linear-gradient(180deg,#4d5261 0%, #3d414e 55%, #33363f 100%);
    border-color:#262932;
  }
  .zlabel.dim{opacity:.13; pointer-events:none}
  .zlabel.hidden-lbl{display:none}
  .zlabel.hoverz{z-index:20}
  .zlabel.hoverz .pill{outline:2px solid #fff; outline-offset:1px}
  .zlabel.selz{z-index:21}
  .zlabel.selz .pill{outline:2.5px solid var(--accent); outline-offset:1px; box-shadow:0 0 14px rgba(232,182,76,.5)}
  .zlabel .capicon{font-size:15px; margin-right:2px}

  /* marker (метка игрока) */
  .marker{position:absolute; transform:translate(-50%,-50%); pointer-events:none;
          color:#ffe9a8; font-weight:800; font-size:13px; text-shadow:0 1px 3px #000, 0 0 6px #000;}

  /* ── tooltip ─────────────────────────────────────────── */
  #tip{
    position:fixed; z-index:60; pointer-events:none; display:none; max-width:320px;
    background:rgba(18,20,27,.96); border:1px solid var(--line); border-radius:10px;
    padding:8px 11px; box-shadow:0 6px 24px rgba(0,0,0,.5); font-size:12.5px;
  }
  #tip .t1{font-weight:700; font-size:13.5px; margin-bottom:2px}
  #tip .t2{color:var(--dim)}

  /* ── side panels (правый столбец: карточка зоны + фильтры) ── */
  #main{flex:1; display:flex; min-height:0; min-width:0}
  #rightcol{
    width:274px; flex:none; min-height:0;
    display:flex; flex-direction:column; gap:10px; padding:10px;
    background:var(--panel); border-left:1px solid var(--line);
  }
  /* #filters — единственная карточка в колонке и занимает всю её высоту:
     шапка «Фильтры» закреплена, список скроллится внутри #filtersBody */
  #filters{flex:1; min-height:0}
  #filtersBody{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
               -webkit-overflow-scrolling:touch; padding:4px 6px 8px}
  .secthead{
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 8px 4px; font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--dim);
  }
  .secthead .btn{padding:1px 7px; font-size:11px}
  .chip{
    display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
    background:var(--panel2); border:1px solid var(--line); border-radius:999px;
    padding:3px 10px 3px 7px; font-size:12.5px; color:var(--text);
  }
  .chip .cnt{color:var(--dim); font-size:11px}
  .chip.off{opacity:.32; filter:grayscale(.8)}
  .chip:hover{border-color:var(--accent)}
  .chip.lv{min-width:38px; justify-content:center; font-weight:700}
  #faclist{padding:2px 4px 4px}
  #lvlist{display:flex; flex-wrap:wrap; gap:5px; padding:2px 8px 8px}
  .side{
    border:1px solid var(--line); border-radius:10px; background:var(--panel2);
    display:flex; flex-direction:column; overflow:hidden;
  }
  .side h3{
    margin:0; padding:10px 12px 8px; font-size:12px; letter-spacing:.8px; text-transform:uppercase;
    color:var(--dim); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;
  }
  .side h3 .btn{padding:2px 8px; font-size:11px}
  .facrow{
    display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:8px; cursor:pointer;
  }
  .facrow:hover{background:var(--panel2)}
  .facrow.off{opacity:.3}
  .facrow .sw{width:14px; height:14px; border-radius:4px; border:1px solid rgba(255,255,255,.35); flex:none}
  .facrow .nm{flex:1; font-weight:700}
  .facrow .ct{color:var(--dim); font-size:12px}
  /* ── попап назначения альянса (клик по зоне) ─────────── */
  #zonepop{
    position:fixed; z-index:70; display:none; width:238px;
    background:rgba(18,20,27,.97); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 10px 34px rgba(0,0,0,.55); overflow:hidden;
  }
  #zonepop .phead{display:flex; align-items:baseline; gap:6px; padding:9px 10px 7px; border-bottom:1px solid var(--line); font-weight:800; font-size:13.5px}
  #zonepop .ptype{font-weight:500; color:var(--dim); font-size:11.5px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  #zonepop .close{cursor:pointer; color:var(--dim); padding:0 3px; font-weight:400}
  #zonepop .close:hover{color:#fff}
  #zonepop .pnote{padding:6px 10px 0; font-size:11.5px; color:#f0d9a6}
  #zonepop .plist{max-height:240px; overflow-y:auto; padding:5px}
  #zonepop .prow{display:flex; align-items:center; gap:7px; padding:4px 7px; border-radius:7px; cursor:pointer; font-size:12.5px}
  #zonepop .prow:hover{background:var(--panel2)}
  #zonepop .prow.cur{background:rgba(232,182,76,.12); outline:1px solid rgba(232,182,76,.45)}
  #zonepop .prow .sw{width:13px; height:13px; border-radius:4px; border:1px solid rgba(255,255,255,.35); flex:none}
  #zonepop .prow .nm{flex:1; font-weight:700}
  #zonepop .prow .ct{color:var(--dim); font-size:11.5px}
  #zonepop .prow .ok{color:var(--accent); font-weight:800}
  #zonepop .prow.pclear{border-top:1px dashed var(--line); border-radius:0 0 7px 7px; margin-top:2px}
  #zonepop .prow.pclear .nm{color:var(--danger)}
  #zonepop .pnew{display:flex; gap:6px; padding:8px 9px; border-top:1px solid var(--line)}
  #zonepop .pnew input{
    flex:1; min-width:0; background:var(--bg); color:var(--text);
    border:1px solid var(--line); border-radius:6px; padding:5px 8px; font:inherit;
  }
  #zonepop .pnew input:focus{outline:none; border-color:var(--accent2)}
  #zonepop .pnew .btn{flex:none}
  #zonepop .phint{padding:0 10px 8px; font-size:11px; color:var(--dim)}
  #zonepop .lnk{color:var(--accent2); cursor:pointer}
  #zonepop .lnk:hover{text-decoration:underline}

  /* ── несохранённые правки и диалог пароля ───────────── */
  .zlabel .pill{position:relative}
  .zlabel.unsaved .pill::after{
    content:''; position:absolute; top:-5px; right:-5px; width:10px; height:10px;
    border-radius:50%; background:var(--accent); border:1px solid #6b4c10;
    box-shadow:0 0 6px rgba(232,182,76,.9);
  }
  #pwbox{
    position:fixed; inset:0; z-index:95; display:none;
    align-items:center; justify-content:center;
    background:rgba(10,11,15,.65);
  }
  #pwbox .pwin{
    width:330px; max-width:92vw; background:var(--panel); border:1px solid var(--accent);
    border-radius:12px; padding:16px 18px; box-shadow:0 12px 40px rgba(0,0,0,.6);
    display:flex; flex-direction:column; gap:10px;
  }
  #pwbox .pwt{font-weight:800; font-size:14px}
  #pwbox input{
    width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line);
    border-radius:6px; padding:8px 10px; font:inherit; letter-spacing:2px;
  }
  #pwbox input:focus{outline:none; border-color:var(--accent2)}
  #pwbox .pwr{display:flex; gap:8px; justify-content:flex-end}
  #pwbox .pwe{font-size:11.5px; color:var(--dim)}
  #toast{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(16px);
    opacity:0; transition:opacity .25s, transform .25s; z-index:90; pointer-events:none;
    background:var(--panel); border:1px solid var(--accent); border-radius:10px;
    padding:9px 16px; font-size:13px; box-shadow:0 8px 28px rgba(0,0,0,.55); max-width:80vw;
  }
  #toast.show{opacity:1; transform:translateX(-50%)}
  #toast.err{border-color:var(--danger)}

  /* ── полноэкранный попап «Правила / информация» ─────── */
  #info{
    position:fixed; inset:0; z-index:80; display:none;
    flex-direction:column; background:var(--bg);
  }
  #info.open{display:flex}
  .ihead{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:calc(9px + env(safe-area-inset-top, 0px)) 14px 9px;
    background:var(--panel); border-bottom:1px solid var(--line); flex:none;
  }
  .ihead h2{margin:0; font-size:15px; letter-spacing:.3px}
  .ibody{
    flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch; padding:18px 14px calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .itext{max-width:760px; margin:0 auto; font-size:14px; line-height:1.65}
  .itext h3{margin:22px 0 8px; font-size:13px; letter-spacing:.6px; text-transform:uppercase; color:var(--accent)}
  .itext p{margin:0 0 12px}
  .itext ul{margin:0 0 12px; padding-left:20px}
  .itext li{margin:4px 0}
  .itext .todo{padding:9px 12px; border:1px dashed var(--line); border-radius:8px; color:var(--dim); font-size:13px}
  .itext .req{padding:9px 12px; border:1px solid var(--danger); border-radius:8px}
  .itext img{display:block; max-width:100%; height:auto; margin:0 auto 12px; border:1px solid var(--line); border-radius:8px}
  .itext table{border-collapse:collapse; margin:0 0 12px}
  .itext th,.itext td{border:1px solid var(--line); padding:5px 10px; font-size:13px; text-align:left}
  .itext th{color:var(--accent); font-weight:600}
  .itext .tscroll{overflow-x:auto; margin:0 0 12px}
  .itext .sched{margin:0; min-width:540px}
  .itext .sched th,.itext .sched td{padding:3px 6px; text-align:center; white-space:nowrap}
  .itext .sched th:first-child,.itext .sched td:first-child{text-align:left}
  .itext .sched .grp{border-left:2px solid var(--dim)}
  .itext i{color:var(--dim)}

  /* ── error ───────────────────────────────────────────── */
  #fatal{
    position:fixed; inset:0; z-index:100; display:none; place-items:center; background:var(--bg);
  }
  #fatal .box{max-width:560px; background:var(--panel); border:1px solid var(--danger); border-radius:12px; padding:22px 26px}
  #fatal h2{color:var(--danger); margin:0 0 10px}
  #fatal code{background:#0d0e12; padding:2px 6px; border-radius:6px}

  /* ── адаптивность ────────────────────────────────────── */
  #filtersBtn{display:none}          /* кнопка панели фильтров — только уже 1024px */
  #closeFilters{display:none}
  .hgrp{display:flex; align-items:center; gap:6px}
  #viewBtnsSlot{display:flex; flex-direction:column; gap:5px; padding:2px 8px 10px}
  #viewBtnsSlot .btn{display:flex; width:100%; justify-content:flex-start; padding:8px 10px}
  .btn, .chip, .facrow{touch-action:manipulation}   /* без двойного тапа-зума по кнопкам */
  #zoombox{margin-left:auto}

  /* планшет (≤1024): панель фильтров — выдвижная поверх карты */
  @media (max-width:1024px){
    #main{position:relative}
    #filtersBtn{display:inline-flex}
    #closeFilters{display:inline-flex}
    #rightcol{
      position:absolute; top:0; right:0; bottom:0; width:min(320px,88vw);
      transform:translateX(106%); transition:transform .22s ease;
      box-shadow:-14px 0 34px rgba(0,0,0,.5);
    }
    #rightcol.open{transform:none}
  }

  /* телефон (≤640): компактный топбар с иконками, попап зоны — нижняя панель */
  @media (max-width:640px){
    #topbar{gap:7px; padding:6px 8px}
    #topbar h1{font-size:14.5px; margin-right:2px}
    .tsub{display:none}
    .btn{padding:6px 9px}
    #topbar #saveBtn .btl, #topbar #filtersBtn .btl{display:none}
    #topbar .btn .bti{display:inline}
    #rightcol{width:min(86vw,320px)}
    #zonepop{left:10px !important; right:10px; top:auto !important; bottom:12px; width:auto}
    #zonepop .plist{max-height:36vh}
    #toast{bottom:calc(14px + env(safe-area-inset-bottom, 0px)); max-width:92vw}
    #fatal{padding:14px}
    #fatal .box{max-width:100%}
  }

  /* касание: крупнее цели, 16px в полях ввода (иначе iOS зумит страницу при фокусе) */
  @media (pointer:coarse){
    .btn{min-height:38px}
    #zoombox .btn{min-width:38px}
    .chip{padding:6px 12px 6px 9px}
    .facrow{padding:8px}
    #zonepop .prow{padding:8px 9px}
    #zonepop .pnew input, #pwbox input{font-size:16px}
  }
  /* на тач-устройствах hover-подсказки нет — прячем тултип */
  @media (hover:none), (pointer:coarse){
    #tip{display:none !important}
  }