/* Карта — главный экран. Стиль «белая изометрия»: белые здания, серые грани с холодным оттенком,
   детали, деревья и люди — акцентным цветом из «Оформления», стекло — полупрозрачное. Без свечений.
   Светлая тема — день, тёмная — ночь (окна горят ровным светлым акцентом). */

.map {
  --m-acc: var(--accent);
  --m-shade: #2A3654; --m-l: 90%; --m-r: 77%;
  --m-bg: #EEF1F6; --m-bg: color-mix(in srgb, #EDF0F6 70%, var(--surface-page));
  --m-grass: #F8F9FC; --m-grass-cn: #EFF1F6; --m-soil: #E3E7EF; --m-sand: #E6EAF2;
  --m-gtext: rgba(42, 54, 84, 0.07); --m-lot: #DCE1EA;
  --m-water: color-mix(in srgb, var(--m-acc) 30%, #FFFFFF); --m-water-line: #FFFFFF;
  --m-road: #ECEFF4; --m-curb: #D6DBE5; --m-road-line: #FFFFFF; --m-pave: #F2F4F8; --m-pave-2: #E6E9F0; --m-bridge: #E4E7ED;
  --m-wall: #FFFFFF; --m-roof: #F3F5F9;
  --m-win: var(--m-acc); --m-door: var(--m-acc); --m-mullion: rgba(255, 255, 255, 0.85);
  --m-glass-o: 0.42; --m-glass-edge: rgba(255, 255, 255, 0.95); --m-glass-hi: 0.5;
  --m-glass-0: rgba(255, 255, 255, 0.82); --m-glass-1: rgba(255, 255, 255, 0.45);
  --m-rock: color-mix(in srgb, var(--m-acc) 7%, #DCE1E9); --m-snow: #FFFFFF;
  --m-trunk: #D6DBE4; --m-tree: color-mix(in srgb, var(--m-acc) 80%, #FFFFFF); --m-tree-s: var(--m-acc); --m-tree-hi: color-mix(in srgb, var(--m-acc) 45%, #FFFFFF);
  --m-truck: #FFFFFF; --m-chassis: #6B7385; --m-wheel: #394052;
  --m-carton: #F4F6FA; --m-pallet: #D7DCE5; --m-belt: #CBD1DB; --m-tee-1: #FFFFFF; --m-tee-2: #2B3344;
  --m-awn-2: #FFFFFF; --m-skin: #EEE5DC;
  --m-person-1: var(--m-acc); --m-person-2: color-mix(in srgb, var(--m-acc) 60%, #1B2540); --m-person-3: color-mix(in srgb, var(--m-acc) 50%, #FFFFFF);
  --m-shadow: rgba(36, 48, 84, 0.10); --m-cloud: #FFFFFF; --m-cloud-o: 0.95; --m-plane: #AFB7C7; --m-smoke: #D5DBE5;
  --m-scr-text: #121A2C; --m-scr-muted: #5B6478;
}
[data-theme="dark"] .map {
  --m-acc: var(--accent); --m-acc: color-mix(in srgb, var(--accent) 84%, #0B1220);
  --m-shade: #000000; --m-l: 84%; --m-r: 68%;
  --m-bg: #0B1322; --m-bg: color-mix(in srgb, #0B1322 60%, var(--surface-page));
  --m-grass: #1A2336; --m-grass-cn: #161F30; --m-soil: #24304A; --m-sand: #1F2A40;
  --m-gtext: rgba(200, 215, 255, 0.06); --m-lot: #2A3550;
  --m-water: color-mix(in srgb, var(--m-acc) 38%, #0E1626); --m-water-line: color-mix(in srgb, var(--m-acc) 45%, #FFFFFF);
  --m-road: #202A3E; --m-curb: #2E3A54; --m-road-line: #3E4A64; --m-pave: #1E283B; --m-pave-2: #283350; --m-bridge: #2E3953;
  --m-wall: #2F3B57; --m-roof: #37445F;
  --m-win: color-mix(in srgb, var(--m-acc) 50%, #FFFFFF); --m-door: var(--m-acc); --m-mullion: rgba(16, 22, 36, 0.6);
  --m-glass-o: 0.7; --m-glass-edge: rgba(190, 205, 240, 0.45); --m-glass-hi: 0.14;
  --m-glass-0: rgba(150, 170, 220, 0.30); --m-glass-1: rgba(70, 90, 140, 0.16);
  --m-rock: #2A3651; --m-snow: #8D9AB5;
  --m-trunk: #3A4560; --m-tree: color-mix(in srgb, var(--m-acc) 72%, #0B1322); --m-tree-s: color-mix(in srgb, var(--m-acc) 50%, #0B1322); --m-tree-hi: color-mix(in srgb, var(--m-acc) 80%, #FFFFFF);
  --m-truck: #C7CEDB; --m-chassis: #141A26; --m-wheel: #0C1018;
  --m-carton: #3A4662; --m-pallet: #2A3550; --m-belt: #3A4560; --m-tee-1: #E6E9F0; --m-tee-2: #10141C;
  --m-awn-2: #C9D0DC; --m-skin: #B8AEA6;
  --m-person-1: var(--m-acc); --m-person-2: color-mix(in srgb, var(--m-acc) 50%, #FFFFFF); --m-person-3: #8D9AB5;
  --m-shadow: rgba(0, 0, 0, 0.32); --m-cloud: #23304A; --m-cloud-o: 0.9; --m-plane: #4C5975; --m-smoke: #3A4560;
  --m-scr-text: #F0F3FD; --m-scr-muted: #A9B4CC;
}

/* ---------- сцена ---------- */
.card.map-card { padding: 0; overflow: hidden; gap: 0; }
.map-scroll { overflow-x: auto; scrollbar-width: thin; }
.map-stage { position: relative; min-width: 720px; background: var(--m-bg); }
/* На телефоне карта шире экрана — её листают пальцем; под ней кнопки всех мест. */
.map-jump { display: none; gap: var(--space-2); padding: var(--space-3) var(--space-4) 0; overflow-x: auto; scrollbar-width: none; }
.map-jump::-webkit-scrollbar { display: none; }
.map-jump .chip { flex: none; cursor: pointer; color: var(--text); }
.map-jump .chip svg { color: var(--accent-text); }
.map-jump .chip .dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--warning); }
.map-jump .chip .dot.neg { background: var(--negative); }
@media (max-width: 760px) {
  .map-stage { min-width: 900px; }
  .map-jump { display: flex; }
}
.map-svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }

/* Грани: верх — цвет как есть, левая — чуть темнее, правая — ещё темнее (холодная тень). */
.map .sh .f-t, .map .sh .rf-front { fill: var(--c); }
.map .sh .f-l { fill: color-mix(in srgb, var(--c) var(--m-l), var(--m-shade)); }
.map .sh .f-r, .map .sh .rf-back { fill: color-mix(in srgb, var(--c) var(--m-r), var(--m-shade)); }
.map .sh .rf-back { fill: color-mix(in srgb, var(--c) 86%, var(--m-shade)); }

/* Цилиндры (трубы, силосы) — градиент как у глиняного макета. */
.map .gs-w0 { stop-color: var(--m-wall); }
.map .gs-w1 { stop-color: color-mix(in srgb, var(--m-wall) 93%, var(--m-shade)); }
.map .gs-w2 { stop-color: color-mix(in srgb, var(--m-wall) var(--m-r), var(--m-shade)); }
.map .gs-a0 { stop-color: color-mix(in srgb, var(--m-acc) 72%, #FFFFFF); }
.map .gs-a1 { stop-color: var(--m-acc); }
.map .gs-a2 { stop-color: color-mix(in srgb, var(--m-acc) 75%, var(--m-shade)); }
.map .gs-g0 { stop-color: var(--m-glass-0); }
.map .gs-g1 { stop-color: var(--m-glass-1); }
.map .cyl-w, .map .cyl-dome { fill: url(#mg-cyl-w); }
.map .cyl-a { fill: url(#mg-cyl-a); }
.map .cyl-top-w { fill: var(--m-roof); }

.map .land { fill: var(--m-grass); }
.map .land-cn { fill: var(--m-grass-cn); }
.map .sand { fill: var(--m-sand); }
.map .lot { fill: none; stroke: var(--m-lot); stroke-width: 1; }
.map .water { fill: var(--m-water); }
.map .water-edge { fill: color-mix(in srgb, var(--m-water) 82%, var(--m-shade)); }
.map .flow { stroke: var(--m-water-line); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 7 24; opacity: 0.8; animation: map-flow 6s linear infinite; }
.map .flow-2 { stroke-dasharray: 4 30; animation-duration: 9s; opacity: 0.55; }
.map .road { fill: var(--m-road); }
.map .curb { stroke: var(--m-curb); stroke-width: 1; }
.map .pave { fill: var(--m-pave); }
.map .mark { stroke: var(--m-road-line); stroke-width: 2; stroke-dasharray: 10 12; }
.map .gtext { fill: var(--m-gtext); font-family: var(--font-sans); font-weight: 800; letter-spacing: 6px; }
.map .shadow, .map .tshadow, .map .pshadow { fill: var(--m-shadow); }
.map .shadow-soft { opacity: 0.6; }

/* Окна — полосы акцентного цвета; стекло — полупрозрачный акцент с белой кромкой. */
.map .win { fill: var(--m-win); }
.map .mullion { stroke: var(--m-mullion); stroke-width: 1.2; }
.map .door { fill: var(--m-door); }
.map .door-line { stroke: var(--m-mullion); stroke-width: 1; }
.map .acc { fill: var(--m-acc); }
.map .glass { fill: var(--m-win); fill-opacity: var(--m-glass-o); stroke: var(--m-glass-edge); stroke-width: 0.8; stroke-linejoin: round; }
.map .glass-door { fill-opacity: calc(var(--m-glass-o) + 0.18); }
.map .glass-line { stroke: var(--m-glass-edge); stroke-width: 1; opacity: 0.7; }
.map .glass-hi { fill: #FFFFFF; opacity: var(--m-glass-hi); }
.map .rib { stroke: rgba(30, 40, 70, 0.14); stroke-width: 1; }
.map .tape { fill: var(--m-acc); }
.map .rail { stroke: color-mix(in srgb, var(--m-bridge) 72%, var(--m-shade)); stroke-width: 2; stroke-linecap: round; }
.map .rail-post { stroke-width: 1.4; }
.map .bar { stroke: #FFFFFF; stroke-width: 3.2; stroke-linecap: round; }
.map .bar-stripe { stroke: var(--m-acc); stroke-width: 3.2; stroke-dasharray: 5 5; }
.map .mast { stroke: var(--m-chassis); stroke-width: 1.6; }
.map .logo path { fill: var(--m-acc); }
.map .logo-on path { fill: var(--on-accent); }
.map .awn-1 { fill: var(--m-acc); }
.map .awn-2 { fill: var(--m-awn-2); }
.map .awn-v.awn-1 { fill: color-mix(in srgb, var(--m-acc) 84%, var(--m-shade)); }
.map .awn-v.awn-2 { fill: color-mix(in srgb, var(--m-awn-2) 88%, var(--m-shade)); }
.map .press-head { fill: var(--m-acc); }
.map .wheel { fill: var(--m-wheel); }
.map .puff { fill: var(--m-smoke); opacity: 0; }
.map .crown { fill: var(--m-tree); }
.map .crown-s { fill: var(--m-tree-s); }
.map .crown-hi { fill: var(--m-tree-hi); }
.map .pbody.p1 { fill: var(--m-person-1); }
.map .pbody.p2 { fill: var(--m-person-2); }
.map .pbody.p3 { fill: var(--m-person-3); }
.map .phead { fill: var(--m-skin); }
.map .smoke { fill: var(--m-smoke); opacity: 0.85;
  transform-box: fill-box; transform-origin: center; transform: translate(var(--sx), var(--sy)) scale(var(--ss)); }
.map .cloud { fill: var(--m-cloud); opacity: var(--m-cloud-o); transform: translateX(var(--x0)); }
.map .plane { fill: var(--m-plane); transform: translateX(-140px); }
.map .mark rect { fill: var(--negative); }
.map .mark text { fill: #FFFFFF; font: 700 14px var(--font-sans); text-anchor: middle; }
.map .mark-more rect { fill: var(--text); }
.map .mark-more text { fill: var(--surface-card); font-size: 12px; }
.map .tee { transform: translate(var(--tx), var(--ty)); }
.map .belt:not(.is-on) .tee:nth-child(n+2) { display: none; }

/* Стеклянный экран продаж. */
.map .scr-glass { fill: url(#mg-glass); stroke: var(--m-glass-edge); stroke-width: 1.2; }
.map .scr-sheen { fill: #FFFFFF; opacity: calc(var(--m-glass-hi) * 0.5); }
.map .scr-title { fill: var(--m-scr-muted); font: 600 9.5px var(--font-sans); }
.map .scr-value { fill: var(--m-scr-text); font: 700 19px var(--font-sans); }
.map .scr-sub { fill: var(--m-scr-muted); font: 500 8.5px var(--font-sans); }
.map .scr-axis { stroke: var(--m-scr-muted); stroke-width: 0.6; opacity: 0.5; }
.map .scr-bar { fill: var(--m-acc); opacity: 0.5; }
.map .scr-bar.last { opacity: 1; }

/* Кольцо выделения: при наведении и пока открыта панель. */
.map .ring { fill: var(--accent); fill-opacity: 0; stroke: var(--accent); stroke-opacity: 0; stroke-width: 2; stroke-dasharray: 7 5; transition: fill-opacity 0.15s, stroke-opacity 0.15s; }
.map .ring.is-hl { fill-opacity: 0.12; stroke-opacity: 0.9; }

/* Объекты, по которым можно нажать. */
.map .obj { cursor: pointer; }
.map .obj > .lift { transition: transform 0.18s ease-out; }
.map .obj.is-hl > .lift { transform: translateY(-5px); }

/* ---------- подписи над зданиями ---------- */
.map-tag {
  position: absolute; transform: translate(-50%, calc(-100% - 8px)); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 10px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--text); box-shadow: var(--shadow-md);
  font: inherit; text-align: left; cursor: pointer; white-space: nowrap;
}
.map-tag::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: var(--surface-card); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
/* Стеклянные подписи: полупрозрачный фон с размытием того, что под ним (только 5 подписей — дёшево). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .map-tag, .map-tag::after { background: color-mix(in srgb, var(--surface-card) 68%, transparent); }
  .map-tag { -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); border-color: color-mix(in srgb, var(--surface-card) 50%, var(--line)); }
  .map-tag::after { border-color: color-mix(in srgb, var(--surface-card) 50%, var(--line)); }
}
.map-tag.below { transform: translate(-50%, 8px); }
.map-tag.below::after { bottom: auto; top: -6px; border: 0; border-left: 1px solid var(--line); border-top: 1px solid var(--line); clip-path: polygon(0 0, 100% 0, 0 100%); }
.map-tag.right { transform: translate(10px, -50%); }
.map-tag.right::after { left: -6px; bottom: auto; top: 50%; margin: -5px 0 0; border: 0; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.map-tag b { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.2; }
.map-tag b svg { color: var(--accent-text); }
.map-tag .badge { height: 22px; font-size: 12px; padding: 0 7px; }
.map-tag:hover, .map-tag.is-hl, .map-tag[aria-expanded="true"] { border-color: var(--accent); }
.map-tag:hover::after, .map-tag.is-hl::after, .map-tag[aria-expanded="true"]::after { border-color: var(--accent); }
.map-tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Значок задания «!» — что-то ждёт действия. */
.map-tag .mt-alert {
  position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: var(--radius-full); background: var(--warning); color: #FFFFFF; font-size: 13px; font-weight: 700; line-height: 1;
}
.map-tag .mt-alert.neg { background: var(--negative); }

.map-legend { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); font-size: 13px; color: var(--text-muted); }
.map-legend > svg { margin-top: 1px; flex: none; }
.map-legend > span { flex: 1 1 0; min-width: 0; }
.map-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; }

/* ---------- задания ---------- */
.quests { display: flex; flex-direction: column; gap: var(--space-2); }
.quest {
  display: flex; align-items: center; gap: var(--space-4); width: 100%; padding: 10px var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-card);
  color: var(--text); text-align: left; cursor: pointer; text-decoration: none; font: inherit;
}
.quest:hover { background: var(--surface-inset); }
.quest:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quest .q-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-full); background: var(--surface-inset); color: var(--accent-text); }
.quest.warn .q-ic { background: var(--warning-tint); color: var(--warning); }
.quest.neg .q-ic { background: var(--negative-tint); color: var(--negative); }
.quest.ok .q-ic { background: var(--positive-tint); color: var(--positive); }
.quest .q-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.quest .q-text b { font-size: 14px; font-weight: 600; }
.quest .q-text span { font-size: 13px; color: var(--text-muted); }
.quest > svg:last-child { color: var(--text-faint); flex: none; }

/* ---------- панель справа (на телефоне — снизу) ---------- */
.drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(460px, 100vw); height: 100%; max-height: 100%; max-width: 100vw;
  padding: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0;
  background: var(--surface-card); color: var(--text); box-shadow: var(--shadow-md);
}
.drawer::backdrop { background: rgba(9, 15, 28, 0.28); }
.drawer[open] { display: flex; flex-direction: column; animation: map-drawer 0.2s ease-out; }
.dr-head { display: flex; align-items: center; gap: var(--space-4); padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); }
.dr-head .dr-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); background: var(--surface-inset); color: var(--accent-text); }
.dr-head h2 { flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 600; line-height: 1.25; }
.dr-head p { font-size: 13px; color: var(--text-muted); font-weight: 400; }
.dr-body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-5) 20px; display: flex; flex-direction: column; gap: var(--space-5); }
.dr-body > *, .dr-tabpanel > * { flex-shrink: 0; }
.dr-tabpanel { display: flex; flex-direction: column; gap: var(--space-5); }
.dr-foot { display: flex; gap: var(--space-3); flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--line); }
.dr-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.dr-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-inset); min-width: 0; }
.dr-tile span { font-size: 12px; color: var(--text-muted); }
.dr-tile b { font-size: 20px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dr-tile small { font-size: 12px; color: var(--text-muted); }
.dr-tile.warn b { color: var(--warning); }
.dr-tile.neg b { color: var(--negative); }
.dr-sec { display: flex; flex-direction: column; gap: var(--space-3); }
.dr-sec h3 { display: flex; align-items: center; gap: var(--space-3); font-size: 14px; font-weight: 600; }
.dr-sec h3 .muted { font-weight: 400; }
.dr-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); }
.dr-item { display: flex; align-items: flex-start; gap: var(--space-4); padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.dr-item:last-child { border-bottom: 0; }
.dr-item .grow { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dr-item .grow b { font-weight: 600; overflow-wrap: anywhere; }
.dr-item .grow span { font-size: 12px; color: var(--text-muted); }
.dr-item .end { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.dr-item.is-hl { background: var(--surface-inset); }
.dr-empty { font-size: 14px; color: var(--text-muted); padding: 4px 0; }
.dr-truck { display: flex; flex-direction: column; gap: var(--space-3); padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.dr-truck.is-hl { border-color: var(--accent); }
.dr-truck .row { justify-content: space-between; flex-wrap: nowrap; }
.dr-progress { position: relative; height: 6px; border-radius: var(--radius-full); background: var(--surface-inset); }
.dr-progress span { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-full); background: var(--accent); }
.dr-progress.late span { background: var(--negative); }
.dr-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.dr-stage { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--radius-md); background: var(--surface-inset); text-align: center; }
.dr-stage b { font-size: 18px; font-variant-numeric: tabular-nums; }
.dr-stage span { font-size: 12px; color: var(--text-muted); }
.dr-stage.on { background: var(--accent); color: var(--on-accent); }
.dr-stage.on span { color: var(--on-accent); opacity: 0.85; }
@media (max-width: 640px) {
  .drawer { inset: auto 0 0 0; width: 100vw; height: auto; max-height: 86vh; border-left: 0; border-top: 1px solid var(--line); border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .drawer[open] { animation-name: map-sheet; }
  .dr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- движение ---------- */
@keyframes map-flow { to { stroke-dashoffset: -62; } }
@keyframes map-smoke { 0% { transform: translate(0, 0) scale(0.45); opacity: 0; } 18% { opacity: 0.8; } 100% { transform: translate(22px, -58px) scale(1.7); opacity: 0; } }
@keyframes map-drift { from { transform: translateX(-260px); } to { transform: translateX(1440px); } }
@keyframes map-plane { 0% { transform: translate(-140px, 40px); } 55%, 100% { transform: translate(1320px, -40px); } }
@keyframes map-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4px); } }
@keyframes map-puff { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 20% { opacity: 0.7; } 100% { transform: translate(-14px, -9px) scale(1.6); opacity: 0; } }
@keyframes map-belt { 0% { transform: translate(0, 0); opacity: 0; } 12%, 85% { opacity: 1; } 100% { transform: translate(var(--bx), var(--by)); opacity: 0; } }
@keyframes map-walk { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--wx), var(--wy)); } }
@keyframes map-press { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(52px, 26px); } }
@keyframes map-lift { 0%, 30% { transform: translate(0, 0); } 50%, 80% { transform: translate(-24px, 12px); } 100% { transform: translate(0, 0); } }
@keyframes map-van { 0% { transform: translate(0, 0); opacity: 0; } 6% { opacity: 1; } 70% { transform: translate(var(--vx), var(--vy)); opacity: 1; } 78%, 100% { transform: translate(var(--vx), var(--vy)); opacity: 0; } }
@keyframes map-mark { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes map-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes map-drop { from { transform: translateY(-26px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes map-drawer { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes map-sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.map .smoke { animation: map-smoke 3.6s linear infinite; }
.map .cloud { animation: map-drift 120s linear infinite; }
.map .plane { animation: map-plane 46s linear infinite; animation-delay: -6s; }
.map .bob { animation: map-bob 1.1s ease-in-out infinite; }
.map .puff { transform-box: fill-box; transform-origin: center; animation: map-puff 1.8s ease-out infinite; }
.map .belt.is-on .tee { animation: map-belt 3.6s linear infinite; }
.map .walker.is-on { animation: map-walk 8s ease-in-out infinite; }
.map .press.is-on .press-head { animation: map-press 2.4s ease-in-out infinite; }
.map .lift-move { animation: map-lift 9s ease-in-out infinite; }
.map .mark { animation: map-mark 1.6s ease-in-out infinite; }
.map .van { animation: map-van 14s ease-in-out infinite; }
.map-tag .mt-alert { animation: map-mark 1.6s ease-in-out infinite; }
.map.is-enter .obj { animation: map-drop 0.5s ease-out backwards; animation-delay: var(--d); }
.map.is-enter .map-tag { animation: map-fade 0.4s ease-out backwards; animation-delay: 0.7s; }

/* Анимация выключена (переключатель) или в системе «уменьшить движение» — всё стоит, кадр — как в покое. */
.map[data-motion="off"] *, .map[data-motion="off"] .map-tag .mt-alert { animation: none !important; transition: none !important; }
.map[data-motion="off"] .puff, .map[data-motion="off"] .flow { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  .map *, .map.is-enter .obj, .drawer[open] { animation: none !important; transition: none !important; }
}
.map-legend .touch-only { display: none; }
@media (hover: none) { .map-legend .touch-only { display: inline; } }