/* Хүрээ хөтөч (10OS) — интерфэйс */

/* Гарчгийн фонт — Montserrat Alternates Light (OTF, 177 КБ, 221 кирилл
   глиф). Зөвхөн нээлтийн дэлгэцийн гарчигт хэрэглэгддэг тул `swap`:
   фонт ирэхээс өмнө системийн үсгээр уншигдаж, ачаалал саатахгүй. */
@font-face {
  font-family: 'Montserrat Alternates';
  src: url('../fonts/MontserratAlternates-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Нээлтийн дэлгэцийн бусад жин. Нэг гэр бүлийн нэр дор хоёр файл —
   хөтөч `font-weight`-ээр нь сонгоно. */
@font-face {
  font-family: 'Montserrat Alternates';
  src: url('../fonts/MontserratAlternates-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Дээд эгнээний шилэн товчны бичээс — Montserrat SemiBold (OTF, 229 КБ,
   кирилл 237 глиф: Ө, ө, Ү, ү бүгд бий; 2026-10-08, Болдбаатар). */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --bg:          #0d0f13;
  --surface:     #12141a;
  --surface-2:   #191c23;
  --surface-3:   #21252e;
  --ink:         #ffffff;
  --ink-2:       #c3c2b7;
  --muted:       #898781;
  --line:        rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.20);
  --grid:        #2c2c2a;
  --accent:      #ffd24a;
  --accent-ink:  #1a1503;

  --radius:   14px;
  --radius-s: 9px;
  --shadow:   0 18px 48px rgba(0, 0, 0, 0.55);

  --sans: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;

  /* Гарчгийн фонт — нээлтийн дэлгэцийн нэр. */
  --display: 'Montserrat Alternates', var(--sans);

  /* дүрслэлийн дэвсгэр (theme.js-тэй ижил) — шошго, тайлбарын дэвсгэрт */
  --scene:      #0d0f13;
  --overlay:    rgba(10, 12, 16, .78);
  --load-bg:    radial-gradient(120% 90% at 50% 8%, #1b2230 0%, #0d0f13 62%);
  --scrim:      rgba(6, 8, 11, .6);
  --stripe:     rgba(255, 255, 255, .028);
  --mark-ring:  rgba(255, 255, 255, .85);
}

/* --------------------------------------------------------------- цагаан сэдэв
   Дүрслэлийн дэвсгэр цагаан үед интерфэйс нь мөн өдрийн өнгөнд шилжинэ.
   Сонголтыг theme.js хадгалж, <html data-theme> дээр тавина. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:          #f4f6f9;
  --surface:     #ffffff;
  --surface-2:   #eef1f5;
  --surface-3:   #e2e7ee;
  --ink:         #12151b;
  --ink-2:       #3c424c;
  --muted:       #6b7280;
  --line:        rgba(18, 21, 27, 0.12);
  --line-strong: rgba(18, 21, 27, 0.26);
  --grid:        #dfe3ea;
  --accent:      #b47500;
  --accent-ink:  #fffaf0;
  --shadow:      0 14px 38px rgba(20, 28, 45, 0.16);

  --scene:      #f4f6f9;
  --overlay:    rgba(255, 255, 255, .88);
  --load-bg:    radial-gradient(120% 90% at 50% 8%, #ffffff 0%, #e8edf4 62%);
  --scrim:      rgba(38, 45, 58, .35);
  --stripe:     rgba(18, 21, 27, .035);
  --mark-ring:  rgba(255, 255, 255, .95);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans);
  font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Canvas нь replaced element — width:auto үед CSS хэмжээ нь өөрийн буферийн
   хэмжээ болж, setSize() ↔ ResizeObserver хооронд эргэх холбоос үүсдэг.
   Тиймээс CSS хэмжээг ил заана. */
#scene {
  position: fixed; inset: 0; display: block; touch-action: none;
  width: 100%; height: 100%;
}

/* --------------------------------------------------------------- ерөнхий эд */

.panel {
  background: var(--surface);                                  /* хуучин Safari */
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-2); font-size: 12px; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { background: var(--surface-3); color: var(--ink); }
.chip[hidden] { display: none; }
.chip[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-ink);
  border-color: transparent; font-weight: 600;
}

.swatch {
  width: 11px; height: 11px; border-radius: 3px; flex: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
}

.tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.sec { color: var(--ink-2); }

/* ------------------------------------------------------------------ толгой */

/* Толгойн мөр нь самбар биш — дүрслэлийн дээгүүр хөвнө. Өмнө нь ард нь
   доошоо уусах бараан хөшиг, товч бүрийн дээр дулаан гэрлийн толбо байсан
   (цагаан бичээсийг цайвар сэдэвт уншигдуулах, гэрлийг дээрээс ирсэн мэт
   болгох). 2026-10-08-нд хоёуланг нь хасав (Болдбаатар: «дээд хэсгийн
   толбонуудыг арилгъя») — уншигдах байдлыг одоо товч бүрийн шил өөрөө
   (хөлдүү дэвсгэр, сэдвийн бэх) хангана. */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 84px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px; padding-top: env(safe-area-inset-top);
  z-index: 30;
  transition: translate .24s cubic-bezier(.25, .8, .3, 1), opacity .24s;
}

/* --- үндсэн сонголтууд --------------------------------------------- */

/* Нарны хувьсагчдыг `js/glassnav.js` кадр бүр бичнэ; энд — JS ирэхээс
   өмнөх анхдагч (үдийн нар зүүн дээрээс). Унжих цэсүүд (`.g-drop`) ч мөн
   адил шил тул ижил хувьсагчтай. */
#mainnav { display: flex; align-items: center; gap: 12px; }
#mainnav, .g-drop {
  --sun-a: -40deg; --sun-x: 30%; --sun-y: 8%;
  --sun-face: .6; --sun-rim: .5; --sun-rgb: 255 246 232; --night: 0;
  /* бичээсний шилэн доторх сүүдэр — нар (shs), хотын гэрэл (shc) */
  --shsx: 1.6px; --shsy: 3.6px; --shsb: 1.4px; --shsa: .3;
  --shcx: 0px; --shcy: 0px; --shcb: 0px; --shca: 0;
}

/* Нээлтийн дараалал: эгнээ нь камер Өртөө рүү нисэх **2.9 секундийн**
   турш аажим гарч ирнэ (`js/main.js` → INTRO.fly). 0.35 с хүлээгээд 2.4
   секундэд тодорно — нислэг дуусахаас 0.15 секундын өмнө бүрэн гарч
   ирнэ. Тунгалагийг `#topbar` дээр биш энд шилжүүлсэн шалтгаан нь бүтэн
   дэлгэцийн нуулт — тэр нь ижил шинжийг 0.24 секундээр хөдөлгөдөг тул
   хоёр үргэлжлэх хугацаа зөрчилдөнө. */
#mainnav, #attrib { transition: opacity 2.4s ease .35s; }
body.intro #mainnav, body.intro #attrib { opacity: 0; pointer-events: none; }

/**
 * Шилэн биет — **тув тунгалаг зузаан шил** (2026-10-08, Болдбаатар:
 * «лавлах зурагтай огт төсгүй болсон байна, яг зураг дээрх шиг тув
 * тунгалаг зузаан шилэн дотор цагаан текст байршуулъя»).
 *
 * Өмнөх хувилбар хавтгай, саарал утаатай байв (`backdrop-filter` blur +
 * brightness). Лавлах зургийн шил гурван зүйлээрээ танигддаг: (1) нүүр нь
 * тунгалаг — ард нь юу байгаа бүдгэрэлгүй харагдана; (2) **зузаан** нь
 * нэг чиглэлд (баруун-доош) гарч, доод ба баруун хана нь хурц тод ирмэг
 * болно, ар тал нь тунгалаг нүүрээр нэвт харагдана; (3) хавтан агаарт
 * хөвж, доор нь сүүдэр унана.
 *
 * Зургийнх **изометр** — хэтийн төлөвгүй. CSS `perspective` + `rotateX`-
 * ээр туршихад ар тал нь голруугаа жижгэрч хавтан биш хүрээ (bevel) шиг
 * харагдав. Тиймээс зузааныг ташуу проекцоор (oblique) зурна:
 *
 *   .glass       нүүр — blur огт байхгүй, нарны гялбаа, цагаан ирмэг
 *   .g-slab > i  зузаан — `--n` = 6 давхар хүрээ, k-р нь (ox, oy)·k/n
 *                шилжсэн (`js/glassnav.js` үүсгэнэ). 1 px хүрээнүүд
 *                0.7 px алхамтай давхцаж тасралтгүй хана болно — дугуй
 *                булан ч мөн; гэрлээр л харагдана. Доор нь хөвөх сүүдэр
 *   бичээс       зузааны **дунд** — (ox, oy)/2 шилжсэн, нүүрний ирмэгийн
 *                доор: шилэн дотор
 *
 * Ирмэг нь өөрөө гэрэлтэхгүй — зөвхөн нарны (шөнө доороос хотын) гэрлийг
 * ойлгоно (`.glass::before`-ийн тайлбар).
 *
 * **Кристал** (мөн өдөр, Болдбаатар: «шилийг кристал тунгалаг болгомоор
 * байна, талууд нь цайж харагдаж байна; текстийн харагдацад санаа зовохгүй
 * байж болно; зузааныг нь 40% багасгъя»): нүүрний дүүргэлт ба ар талын
 * дүүргэлт хасагдаж, хананы давхар тус бүр .15 → .05, давхрын тоо 10 → 6,
 * зузаан (3.5, 7) → (2.1, 4.2) px. Тод нь зөвхөн хурц ирмэгийн шугамууд.
 * Бичээс цагаан, өдөр сүүдэргүй; шөнө бага зэрэг гэрэлтэнэ (`--night`).
 *
 * `--lift` (0…1) — хулгана дээр очих, идэвхтэй, нээлттэй: хавтан 2 px
 * хөвж (сүүдэр нь холдоно), ирмэг, бичээс тодорно.
 */
@property --lift { syntax: '<number>'; inherits: true; initial-value: 0; }

.glass {
  /* зузааны чиглэл, хэмжээ (изометр); 2026-10-08-нд 40% нимгэлэв (3.5, 7) */
  --ox: 2.1px; --oy: 4.2px;
  --lift: 0;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 12px 0 15px;
  appearance: none; border: 0; border-radius: 12px;
  font-family: 'Montserrat', var(--sans); font-weight: 600;
  font-size: 14.5px; letter-spacing: .01em; line-height: 1;
  color: #fff;
  /* кристал: дүүргэлтгүй — зөвхөн нарны гялбаа (нарны байрлалаар) */
  background:
    radial-gradient(70% 110% at var(--sun-x) var(--sun-y),
      rgb(var(--sun-rgb) / calc(var(--sun-face) * .28)) 0%,
      rgb(var(--sun-rgb) / 0) 65%);
  translate: 0 calc(var(--lift) * -2px);
  transition: --lift .22s ease, translate .22s ease;
}

/* Нүүрний ирмэг — **зөвхөн гэрлийн ойлт**, тойргоороо жигд зураас биш.
 *
 * Өмнө нь энд нарнаас үл хамаарах цагаан хүрээ байв (дээд тал нь тод) —
 * шилийг ямар ч дэвсгэр дээр харагдуулах UI-ийн заншил, физик биш.
 * Болдбаатар: «ирмэг нь тууштай цагаан зураастай байна, учир нь вэ? тув
 * тунгалаг шил ийм байна гэж үү?» Бодит тунгалаг шилний ирмэг өөрөө
 * гэрэлтдэггүй: гэрэл тусах талдаа хурц гялбаа, шилээр нэвтэрч эсрэг
 * ирмэгээс дотроос ойсон сул гялбаа (×0.35), бусад нь харагдахгүй.
 * Нарнаас гадна ирмэг **орчноо** харуулна (`--env-ring`): дэлгэцэн дээр
 * хажууд нь байгаа дүрслэлийн өнгийг кадраас дээжилнэ (`js/glassnav.js`
 * → ENV). Өмнө нь шөнө доороос тогтмол дулаан өнгө байсан — улаан цэгийн
 * дээр ч, хотоос хол ч ижил (Болдбаатар: «өнцөг, зай зэргээсээ хамаарч
 * ойлт өөрчлөгдөх ёстой биш үү?»).
 * Хэмжсэн (өдөр, нар дэлгэцийн зүүн-дээд): өмнө дээд +0.63, зүүн +0.17,
 * доод +0.03, баруун +0.04 гэрэлтэлт — дээд цагаан нь нарнаас үл хамаарч
 * байсан. */
.glass::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  padding: 1.5px; pointer-events: none;
  background:
    conic-gradient(from var(--sun-a),
      rgb(var(--sun-rgb) / calc(var(--sun-rim) + var(--lift) * .15)) 0deg,
      rgb(var(--sun-rgb) / 0) 40deg 140deg,
      rgb(var(--sun-rgb) / calc(var(--sun-rim) * .35)) 180deg,
      rgb(var(--sun-rgb) / 0) 220deg 320deg,
      rgb(var(--sun-rgb) / calc(var(--sun-rim) + var(--lift) * .15)) 360deg),
    var(--env-ring, linear-gradient(transparent, transparent));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Зузаан — нүүрний ард (`z-index: −1`), бичээсний доор. Хөвөх сүүдэр нь
   ар талын доор (давхруудад mask байгаа тул тэдэн дээр биш, энд). */
.g-slab {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--ox) calc(var(--oy) + 9px + var(--lift) * 4px) 18px -10px
    rgb(0 0 0 / calc(.28 - var(--night) * .12));
}
/* Хана — нүүрний ирмэгийн адил: нарны зүгт гялбаа + орчны өнгө
   (`--env-ring`; хананы гэрлээс холын тал бараан харагдах нь орчин бараан
   үед аяндаа гарна — тогтмол бараан сүүдэр хасагдсан). Нүүрний дэргэдэх
   давхар тод, ар тал руугаа бүдгэрнэ (`--w`). Өмнө нь .15 суурьтай 10
   давхар хуримтлагдаж хана цайж харагдав (Болдбаатар: «талууд нь цайж
   харагдаж байна»). */
.g-slab > i {
  --w: calc(1.3 - .6 * var(--k) / var(--n));
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  translate: calc(var(--ox) * var(--k) / var(--n)) calc(var(--oy) * var(--k) / var(--n));
  background:
    conic-gradient(from var(--sun-a),
      rgb(var(--sun-rgb) / calc(var(--sun-rim) * .6)) 0deg,
      rgb(var(--sun-rgb) / 0) 50deg 310deg,
      rgb(var(--sun-rgb) / calc(var(--sun-rim) * .6)) 360deg),
    var(--env-ring, linear-gradient(transparent, transparent));
  opacity: calc(.5 * var(--w));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Шилэн доторх агуулга — зузааны дунд. */
.glass > .g-label, .glass > .g-chev, .glass > .g-face {
  translate: calc(var(--ox) * .5) calc(var(--oy) * .5);
}

.g-label {
  opacity: calc(.86 + var(--lift) * .14);
  /* Өдрийн бараан хүрээ сүүдэр хасагдсан (Болдбаатар: «текстийн харагдацад
     санаа зовохгүй байж болно»). Оронд нь **шилэн дотор** унах сүүдэр —
     гэрлийн чиглэлээр тооцсон (`js/glassnav.js` → SHADOW): нар урдаас бол
     ар тал дээр, хотын гэрэл араас бол нүүрний дотор тал дээр. Шөнө
     бичээс бага зэрэг гэрэлтэнэ. */
  text-shadow:
    var(--shsx) var(--shsy) var(--shsb) rgb(0 0 0 / var(--shsa)),
    var(--shcx) var(--shcy) var(--shcb) rgb(0 0 0 / var(--shca)),
    0 0 calc(5px + var(--lift) * 2px) rgb(255 255 255 / calc(var(--night) * .50)),
    0 0 14px rgb(255 255 255 / calc(var(--night) * .22));
}

/* Хөрөг ч шилэн дотор — ижил сүүдэр (`js/glassnav.js` → SHADOW). */
.g-face {
  filter:
    drop-shadow(var(--shsx) var(--shsy) var(--shsb) rgb(0 0 0 / var(--shsa)))
    drop-shadow(var(--shcx) var(--shcy) var(--shcb) rgb(0 0 0 / var(--shca)));
}

.glass:hover, .glass:focus-visible, .glass:active,
.glass.is-on, .glass[aria-expanded="true"] { --lift: 1; }
.glass:focus-visible { outline: none; }

/* Доош сум — лавлах зургийн хавтан бүрийн баруун талд. Бичээстэй адил
   шөнө бага зэрэг гэрэлтэнэ. Цэс нээгдэхэд дээшээ эргэнэ. */
.g-chev {
  flex: none; width: 10px; height: 10px; margin-left: 1px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: calc(.7 + var(--lift) * .3);
  filter:
    drop-shadow(var(--shsx) var(--shsy) var(--shsb) rgb(0 0 0 / var(--shsa)))
    drop-shadow(var(--shcx) var(--shcy) var(--shcb) rgb(0 0 0 / var(--shca)))
    drop-shadow(0 0 3px rgb(255 255 255 / calc(var(--night) * .5)));
  transition: rotate .22s cubic-bezier(.25, .8, .3, 1);
}
.glass[aria-expanded="true"] > .g-chev { rotate: 180deg; }

/* --- унжих цэсүүд: Өртөө, Өргөө, Наадам (`js/navdrop.js`) -------------
 *
 * Товчны доор унжих шилэн хавтангууд — толгойн мөрийнхтэй ижил `.glass`
 * (зузаан, нарны гялбаа, орчны ойлт). Байрлалыг JS товчноос тооцно
 * (`NavDrop._place`). `overflow` нь шилний зузаан, хөвөх сүүдрийг
 * тайрахгүйн тулд дотор нь жийрэг үлдээнэ. */
.g-drop {
  position: absolute; top: 74px; left: 0; z-index: 2;
  /* 260 — хамгийн урт «Эмэгтэйчүүдийн наадам» 199px, мөрийн дотор 211px
     (248-д яг 199 болж, фонт бага зэрэг өргөн бол хоёр мөр болох байв) */
  width: 260px; max-width: calc(100vw - 4px); box-sizing: border-box;
  padding: 4px 12px 26px 8px;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.g-drop::-webkit-scrollbar { display: none; }
.g-drop[hidden] { display: none; }

.g-drop .glass {
  display: flex; width: 100%; height: auto; flex: none;
  text-align: left; animation: g-drop-in .22s cubic-bezier(.25, .8, .3, 1) backwards;
}
.g-drop .glass > :not(.g-slab) { translate: calc(var(--ox) * .5) calc(var(--oy) * .5); }

/* Энгийн жагсаалт (Өртөө, Наадам). Өртөөний мөр товч (хавтгай руу нисэнэ,
   одоогийнх нь `is-on` — хөвж тодорно); Наадмынх дарагдахгүй тул хөвөхгүй. */
.drop-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.g-drop .drop-row {
  min-height: 36px; padding: 0 14px 0 15px;
  font-size: 13.5px; animation-delay: calc(var(--i) * 22ms); cursor: default;
}
.g-drop button.drop-row { cursor: pointer; }
.g-drop span.drop-row:hover { --lift: 0; }

/* --- Өргөө (`js/orgoo.js`): дөрвөн ангиллын нэр тооны бичээсийн өнгөөр
 * (`--tint`), шөнө тэр өнгөөрөө гэрэлтэнэ — тооны нэр шиг. */

/* 330 — «Хобби, Амралт (Hobby, Restoration)» нэг мөрөнд (212px хэмжсэн);
   OpenworX-ийн 315px тайлбар хоёр мөр болно */
#orgoo { width: 330px; }

.worx { display: flex; flex-direction: column; gap: 6px; flex: none; }

/* бичээсний шилэн доторх сүүдэр — `.g-label`-ийнхтэй ижил (өнгөгүй хэсэг) */
.worx-note, .worx-count {
  text-shadow:
    var(--shsx) var(--shsy) var(--shsb) rgb(0 0 0 / var(--shsa)),
    var(--shcx) var(--shcy) var(--shcb) rgb(0 0 0 / var(--shca)),
    0 0 calc(5px + var(--lift) * 2px) rgb(255 255 255 / calc(var(--night) * .45));
}

#orgoo .worx-head {
  min-height: 50px; padding: 8px 12px 8px 14px; gap: 10px;
  animation-delay: calc(var(--i) * 35ms); cursor: pointer;
}
.worx-head > .g-label { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.worx-name {
  color: var(--tint); font-size: 15.5px; letter-spacing: .01em;
  text-shadow:
    var(--shsx) var(--shsy) var(--shsb) rgb(0 0 0 / var(--shsa)),
    var(--shcx) var(--shcy) var(--shcb) rgb(0 0 0 / var(--shca)),
    0 0 calc(5px + var(--lift) * 2px) color-mix(in srgb, var(--tint) calc(var(--night) * 55%), transparent),
    0 0 14px color-mix(in srgb, var(--tint) calc(var(--night) * 25%), transparent);
}
.worx-note {
  font-family: var(--display); font-weight: 500; font-size: 11px;
  line-height: 1.3; letter-spacing: 0; opacity: .85;
}
.worx-count {
  flex: none; font-size: 12.5px; font-variant-numeric: tabular-nums;
  opacity: calc(.75 + var(--lift) * .25);
}

.worx-seats {
  list-style: none; margin: 0; padding: 0 0 4px 16px;
  display: flex; flex-direction: column; gap: 5px;
}
.worx-seats[hidden] { display: none; }

/* Суудал — дарагдахгүй (одоохондоо үйлдэлгүй) тул хулгана дээр хөвөхгүй. */
#orgoo .seat {
  min-height: 32px; padding: 0 12px 0 13px; gap: 8px;
  font-family: var(--display); font-weight: 500; font-size: 13px;
  animation-delay: calc(var(--i) * 22ms); cursor: default;
}
#orgoo .seat:hover { --lift: 0; }
.seat > .g-label { flex: 1; min-width: 0; }
.seat:not(.is-taken) > .g-label { opacity: .5; }
/* эзэнтэй — ангиллын өнгөөр дүүрэн цэг (шөнө гэрэлтэнэ); эзэнгүй — хоосон цагираг */
.seat-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.4px rgb(255 255 255 / .55);
}
.seat.is-taken > .seat-dot {
  background: var(--tint);
  box-shadow: 0 0 calc(2px + var(--night) * 7px)
    color-mix(in srgb, var(--tint) calc(20% + var(--night) * 60%), transparent);
}

@keyframes g-drop-in { from { opacity: 0; translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .g-drop .glass { animation: none; } }

/* --- профайл: амин үзүүлэлтийн цагираг ------------------------------ */

.nav-face.glass { padding: 0 10px 0 4px; gap: 6px; }

/* Хөрөг (`icons/profile.png`) нь толгой, мөр дээр төвлөрсөн дөрвөлжин
   тайрлага тул `object-fit: cover` дугуйг гажуудалгүй дүүргэнэ. */
.g-face { position: relative; flex: none; width: 32px; height: 32px; }
.g-face .face {
  /* Орлуулагдах элемент (img) нь `width:auto` үед ӨӨРИЙН хэмжээгээ авдаг
     тул inset дөрвөөрөө хүрэлцэхгүй — өргөн, өндрийг нь шууд өгнө. */
  position: absolute; left: 3.5px; top: 3.5px;
  width: calc(100% - 7px); height: calc(100% - 7px);
  max-width: none; object-fit: cover;
  background: rgba(255, 255, 255, .92);
  border-radius: 50%; display: block;
}

/* Цагираг, зүрх нь шилний бэхээр — цайвар шилэн дээр цагаан нь үл
   үзэгдэнэ. */
.g-face .vital { position: absolute; inset: 0; width: 100%; height: 100%; }
.vital-track, .vital-arc { fill: none; stroke-linecap: round; }
.vital-track { stroke: currentColor; stroke-opacity: .16; stroke-width: 1.4; }
.vital-arc {
  stroke: currentColor; stroke-opacity: calc(.45 + var(--lift) * .45);
  stroke-width: 1.4;
  transition: stroke-dasharray .6s cubic-bezier(.25, .8, .3, 1);
}
.vital-heart { fill: currentColor; }

/* --- цэс ------------------------------------------------------------- */

#menu {
  position: fixed; top: 70px; right: 14px; z-index: 35;
  width: min(430px, calc(100vw - 28px));
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
#menu[hidden] { display: none; }
#menu #brand { padding: 2px 4px 9px; border-bottom: 1px solid var(--line); }
#menu #searchwrap { max-width: none; }
#menu #topactions { margin-left: 0; flex-wrap: wrap; }

/* Бүтэн дэлгэцэд толгой өөрөө нуугдахгүй — доор нь жижиг сум гарна
   (`#bar-toggle`, `js/ui.js`). Дарвал толгой дээшээ гарч алга болж, сум
   дэлгэцийн дээд ирмэгт доош харж үлдэнэ; дахин дарвал буцаж бууна.
   2026-10-11 хүртэл хулгана доошлоход толгой өөрөө нуугддаг байв
   (Болдбаатар: «автоматаар нуугдахыг болиулж, сумаар нуудаг болгоё»). */
body.fullscreen.bar-hidden #topbar {
  translate: 0 calc(-100% - 24px); opacity: 0; pointer-events: none;
}

/* Сум — шилэн хавтан биш, толгойн хавтангийн `.g-chev`-тэй ижил зураас.
   Дүрслэлийн дээр шууд хөвөх тул сүүдрээр л уншигдана. Байрлал нь
   эгнээний доод зузаанаас (desktop 22+40+4 px) доош — 84 px-ийн
   толгойн дотор тул түүнээс (z 30) дээгүүр, эс бөгөөс толгой дарагдана. */
#bar-toggle {
  position: fixed; z-index: 31; left: 50%; translate: -50% 0;
  top: calc(env(safe-area-inset-top) + 66px);
  display: none; place-items: center;
  width: 32px; height: 18px; padding: 0; border: 0; background: none;
  color: #fff; opacity: .6; cursor: pointer;
  transition: top .24s cubic-bezier(.25, .8, .3, 1), opacity .15s;
}
body.fullscreen #bar-toggle { display: grid; }
#bar-toggle:hover, #bar-toggle:focus-visible { opacity: 1; outline: none; }
#bar-toggle svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / .5));
  transition: rotate .24s cubic-bezier(.25, .8, .3, 1);
}
body.bar-hidden #bar-toggle { top: calc(env(safe-area-inset-top) + 4px); }
body.bar-hidden #bar-toggle svg { rotate: 180deg; }
/* Унжих цэс сумны дээгүүр (тунгалаг шилээр нэвт) харагдахгүйн тулд. */
#topbar:has(.g-drop:not([hidden])) ~ #bar-toggle { opacity: 0; pointer-events: none; }
body.intro #bar-toggle { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  #topbar, #bar-toggle, #bar-toggle svg { transition: none; }
}

#brand { display: flex; align-items: center; gap: 10px; flex: none; }
/* Тэмдэг нь нэг өнгийн тул харанхуй сэдэвт эргүүлж (invert) цайруулна. */
#brand-mark { width: auto; height: 26px; display: block; }
[data-theme="dark"] #brand-mark { filter: invert(1) brightness(1.55); }
#brand span { font-size: 11px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }

#searchwrap { position: relative; flex: 1 1 auto; max-width: 420px; }
#search {
  width: 100%; height: 34px; padding: 0 32px 0 32px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-s); outline: none;
}
#search:focus { border-color: var(--line-strong); background: var(--surface-3); }
#searchwrap::before {
  content: '⌕'; position: absolute; left: 11px; top: 50%; translate: 0 -50%;
  color: var(--muted); font-size: 16px; pointer-events: none;
}
#searchclear {
  position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  width: 22px; height: 22px; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); display: none;
}
#searchwrap.has-value #searchclear { display: block; }

#results {
  position: absolute; top: 40px; left: 0; right: 0; max-height: 52vh;
  overflow-y: auto; padding: 6px; display: none; z-index: 40;
}
#results.open { display: block; }
.result {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: var(--radius-s);
  background: transparent; text-align: left;
}
.result:hover, .result.active { background: var(--surface-3); }
.result-main { flex: 1 1 auto; min-width: 0; }
.result-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-meta { display: block; font-size: 11px; color: var(--muted); }
.result-h { font-size: 11px; color: var(--ink-2); flex: none; }

#topactions { display: flex; gap: 6px; margin-left: auto; flex: none; }

/* ------------------------------------------------------------------ хажуу */

#sidebar {
  position: fixed; top: 80px; left: 14px; bottom: 14px; width: 316px;
  display: flex; flex-direction: column; z-index: 25; overflow: hidden;
}

/* Самбарыг бүрмөсөн нуух (толгой дэх "Самбар" товч, эсвэл H). Утсан дээрх
   `collapsed`-аас ялгаатай нь бариул ч харагдахгүй — зөвхөн газрын зураг
   үлдэнэ. Буцаах цорын ганц зам нь толгойн товч тул түүнийг хэзээ ч
   нуухгүй. */
#sidebar.hidden { display: none; }

#sheet-grip {
  display: none; width: 100%; border: 0; background: transparent;
  padding: 9px 14px 4px; text-align: center; color: var(--ink-2);
  font-size: 12px; flex: none;
}
#sheet-grip .grip-bar {
  display: block; width: 38px; height: 4px; border-radius: 3px;
  background: var(--line-strong); margin: 0 auto 7px;
}
#grip-label { font-variant-numeric: tabular-nums; }

#tabs { display: flex; gap: 2px; padding: 8px 8px 0; flex: none; }
#tabs button {
  flex: 1; padding: 8px 4px; border: 0; border-radius: var(--radius-s) var(--radius-s) 0 0;
  background: transparent; color: var(--muted); font-size: 12.5px;
  border-bottom: 2px solid transparent;
}
#tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

.tabpanel { display: none; overflow-y: auto; padding: 12px 14px 16px; }
.tabpanel[data-active] { display: block; }

.group { margin-bottom: 18px; }
.group > h3 {
  margin: 0 0 8px; font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.hintline { font-size: 11.5px; color: var(--muted); margin: -3px 0 9px; }

.row { display: flex; align-items: center; gap: 8px; }
.row + .row { margin-top: 7px; }
.spread { justify-content: space-between; }

/* легенд / шүүлт */
.cat {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 7px; border: 0; border-radius: var(--radius-s);
  background: transparent; text-align: left; color: var(--ink-2);
}
.cat:hover { background: var(--surface-2); color: var(--ink); }
.cat.off { opacity: .38; }
.cat.solo { background: var(--surface-3); color: var(--ink); }
.cat-label { flex: 1 1 auto; font-size: 12.5px; }
.cat-count { font-size: 11px; color: var(--muted); }
.cat-bar {
  height: 3px; border-radius: 2px; margin-top: 3px;
  background: currentColor; opacity: .55;
}

.segmented { display: flex; gap: 3px; padding: 3px; background: var(--surface-2);
  border-radius: var(--radius-s); border: 1px solid var(--line); }
.segmented button {
  flex: 1; padding: 6px 4px; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); font-size: 12px;
}
.segmented button[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); }

.switch { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 3px 0; }
.switch input { appearance: none; width: 32px; height: 18px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--line); position: relative;
  flex: none; transition: background .15s; margin: 0; }
.switch input::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--muted); transition: translate .15s, background .15s;
}
.switch input:checked { background: color-mix(in srgb, var(--accent) 35%, var(--surface-3)); }
.switch input:checked::after { translate: 14px 0; background: var(--accent); }
.switch span { font-size: 12.5px; color: var(--ink-2); }

input[type="range"] { width: 100%; accent-color: var(--accent); }

select {
  flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-s); color: var(--ink-2); font-size: 12px;
}
select:hover { background: var(--surface-3); color: var(--ink); }

/* --------------------------------------------------------------- статистик */

.stat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--grid); }
.stat:last-child { border-bottom: 0; }
.stat dt { font-size: 12px; color: var(--muted); }
.stat dd { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; }

.bars { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; }
.bar-label { font-size: 11.5px; color: var(--ink-2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bar-value { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar-track { grid-column: 1 / -1; height: 7px; background: var(--surface-2);
  border-radius: 4px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 4px; min-width: 3px; }

.hist { display: flex; align-items: flex-end; gap: 2px; height: 74px; margin-top: 4px; }
.hist-col { flex: 1; background: #2a78d6; border-radius: 3px 3px 0 0;
  min-height: 2px; position: relative; }
.hist-col:hover { background: #86b6ef; }
.hist-axis { display: flex; justify-content: space-between; font-size: 10.5px;
  color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }

.toplist { display: flex; flex-direction: column; gap: 1px; }
.toplist button {
  display: flex; align-items: center; gap: 8px; padding: 6px 7px; border: 0;
  border-radius: var(--radius-s); background: transparent; text-align: left; color: var(--ink-2);
}
.toplist button:hover { background: var(--surface-2); color: var(--ink); }
.toplist .rank { width: 16px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.toplist .nm { flex: 1 1 auto; font-size: 12.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.toplist .val { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- танилцах */

.tour { border-bottom: 1px solid var(--grid); padding-bottom: 12px; margin-bottom: 12px; }
.tour:last-child { border-bottom: 0; }
.tour h4 { margin: 0 0 3px; font-size: 13.5px; }
.tour p { margin: 0 0 9px; font-size: 11.5px; color: var(--muted); }
.tour-items { display: flex; flex-direction: column; gap: 2px; }
.tour-item {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; border: 0;
  border-radius: var(--radius-s); background: transparent; text-align: left; color: var(--ink-2);
}
.tour-item:hover { background: var(--surface-2); color: var(--ink); }
.tour-item .ti-name { flex: 1 1 auto; font-size: 12.5px; }
.tour-item .ti-lead { display: block; font-size: 11px; color: var(--muted); }
.tour-item .ti-h { font-size: 11px; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ inspector */

#inspector {
  position: fixed; top: 80px; right: 14px; width: 340px; max-height: calc(100vh - 94px);
  display: none; flex-direction: column; z-index: 26; overflow: hidden;
}
#inspector.open { display: flex; }

#insp-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--grid); flex: none; }
#insp-cat { display: flex; align-items: center; gap: 7px; font-size: 11px;
  color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.badge {
  margin-left: 7px; padding: 2px 7px; border-radius: 999px; font-size: 9.5px;
  letter-spacing: .06em; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}

#insp-title { margin: 6px 0 2px; font-size: 17px; line-height: 1.25; }
#insp-sub { font-size: 12px; color: var(--muted); }
#insp-close { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px;
  border: 0; border-radius: 7px; background: var(--surface-2); color: var(--muted); }
#insp-close:hover { background: var(--surface-3); color: var(--ink); }

#insp-body { overflow-y: auto; padding: 12px 16px 16px; }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.metric { background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 8px 9px; }
.metric b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.metric span { font-size: 10.5px; color: var(--muted); }

.note {
  border-left: 2px solid var(--accent); padding: 2px 0 2px 11px; margin: 0 0 14px;
}
.note h5 { margin: 0 0 4px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); font-weight: 600; }
.note p { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.note p:last-child { margin-bottom: 0; }

.kv { display: grid; grid-template-columns: 104px 1fr; gap: 5px 10px; font-size: 12.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.kv a { color: var(--accent); text-decoration: none; }
.kv a:hover { text-decoration: underline; }

.poimark {
  display: inline-block; vertical-align: -1px; flex: none;
  box-shadow: 0 0 0 1.5px var(--mark-ring), 0 1px 2px rgba(0, 0, 0, .35);
}

.poilist { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 1px; }
.poilist li { display: block; }
.poi {
  display: flex; gap: 9px; padding: 7px 8px; width: 100%; text-align: left;
  border: 0; border-radius: var(--radius-s); background: transparent; color: inherit;
}
.poilist li:nth-child(odd) .poi { background: var(--stripe); }
.poi:hover { background: var(--surface-3); }
.poi.active { background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent); }
.poi .poimark { margin-top: 5px; }
.poi-body { min-width: 0; }
.poi-body b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.poi-meta { display: block; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.poi-meta a { color: var(--accent); text-decoration: none; }
.poi-meta a:hover { text-decoration: underline; }

.sectitle { margin: 16px 0 7px; font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; }
.rawtags { font-size: 11.5px; }
.rawtags code { color: var(--muted); }

.insp-actions { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }

/* --------------------------------------------------------------- нэмэлт эд */

#tooltip {
  position: fixed; z-index: 35; pointer-events: none; display: none;
  padding: 6px 10px; border-radius: 8px; font-size: 12px;
  background: var(--overlay); border: 1px solid var(--line-strong);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5); max-width: 260px;
}
#tooltip.on { display: block; }
#tooltip b { font-weight: 600; }
#tooltip i { font-style: normal; color: var(--muted); }

#labels { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.lbl {
  position: absolute; translate: -50% -100%; white-space: nowrap;
  font-size: 11px; letter-spacing: .02em; padding: 2px 7px; border-radius: 7px;
  background: var(--overlay); border: 1px solid var(--line);
  color: var(--ink-2); pointer-events: auto; cursor: pointer;
}
.lbl:hover { color: var(--ink); border-color: var(--line-strong); }
.lbl::after {
  content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 10px;
  background: linear-gradient(var(--line-strong), transparent); translate: -50% 0;
}

.attrib { color: var(--muted); text-decoration: none; white-space: nowrap; }

/* ODbL-ийн заалт. Дэлгэцийн доод голоос толгойн баруун булан руу шилжсэн —
   3D дүрсний талбай дээр наалт үлдэхгүй. Хураангуй нь ⓘ тэмдэг: дэвсгэр,
   хүрээгүй, чипүүдийн жагсаалтын төгсгөлд. Бүтэн бичээс нь дээр нь
   очих/фокуслахад доогуур гарна — `absolute` тул нээгдэхэд чипүүд хөдлөхгүй.
   Бичээс толгойн шилэн дэвсгэрээс гадагш гардаг тул өөрийн дэвсгэртэй,
   эс бөгөөс хотын дүрсэн дээр уншигдахгүй. Байнгын заалт нь "Заавар"
   самбарын "Эх сурвалж" хэсэг. */
#attrib {
  position: absolute; right: 16px; top: 50%; translate: 0 -50%;
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; font-size: 13px; line-height: 1;
  color: rgba(255, 255, 255, .45);
  transition: color .15s;
}
#attrib:hover, #attrib:focus-visible { color: rgba(255, 255, 255, .9); }

#attrib .attrib-text {
  position: absolute; top: calc(100% + 7px); right: 0;
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  background: var(--overlay); color: var(--ink-2);
  opacity: 0; translate: 0 -3px; pointer-events: none;
  transition: opacity .15s, translate .15s;
}
#attrib:hover .attrib-text,
#attrib:focus-visible .attrib-text { opacity: 1; translate: 0 0; }

/* Хуруутай төхөөрөмжид hover байхгүй — тэнд ⓘ дарахад лицензийн хуудас
   шууд нээгддэг, тул доогуур гарах бичээс илүүц. */
@media (hover: none) {
  #attrib .attrib-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #attrib, #attrib .attrib-text { transition: none; }
}

#compass {
  position: fixed; right: 14px; bottom: 14px; width: 46px; height: 46px;
  border-radius: 50%; z-index: 24; display: grid; place-items: center;
}
#compass svg { width: 30px; height: 30px; }

/* Мини газрын зураг — зөвхөн аватар горимд. Тэр үед хажуугийн самбар,
   хөтөч хоёр нуугддаг тул зүүн доод булан чөлөөтэй. Баруун доод буланд
   луужин ба аватарын товчлуурууд байгаа тул тэднийг хөндөхгүй. */
#minimap {
  position: fixed; left: 14px; bottom: 14px; width: 182px; height: 182px;
  z-index: 26; padding: 0; overflow: hidden;
  /* Дугуй хэлбэр — хар хүрээтэй. Хүрээ нь хоёр сэдэвт ижил хар: цайвар
     дэвсгэрт зураг таслагдаж, хар дэвсгэрт нь ирмэг нь тодорно. */
  border-radius: 50%;
  border: 3px solid #06080b;
  background: #06080b;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
#minimap[hidden] { display: none; }
#minimap-cv { display: block; border-radius: 50%; cursor: zoom-in; touch-action: none; }
#minimap-scale {
  position: absolute; left: 50%; translate: -50% 0; bottom: 7px;
  font-size: 9.5px; font-weight: 600; color: var(--ink-2);
  background: var(--overlay); border-radius: 999px; padding: 1px 7px;
  pointer-events: none;
}

#loading {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: var(--load-bg);
  transition: opacity .5s;
}
#loading.done { opacity: 0; pointer-events: none; }
#loading .box { width: min(420px, 84vw); text-align: center; }
#loading .logo { width: auto; height: 64px; margin: 0 auto 16px; display: block; }
[data-theme="dark"] #loading .logo { filter: invert(1) brightness(1.55); }
#loading h1 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-weight: 300;
  /* Нэр 22 тэмдэгт — 24px дээр 358px өргөн болох тул утсан дэлгэцэд
     нэг мөрөнд багтахгүй. Хэмжээ нь дэлгэцийн өргөнтэй хамт хумигдана
     (320px дээр 17.9px → 267px, хайрцаг 269px). `balance` нь үлдсэн
     онцгой тохиолдолд мөрийг тэнцүү хуваана. */
  font-size: clamp(17px, 5.6vw, 24px);
  letter-spacing: .06em;
  text-wrap: balance;
}
#loading .sys {
  margin-top: 26px; font-size: 10px; color: var(--muted);
  letter-spacing: .14em; text-transform: uppercase;
}
#loading p { margin: 0 0 20px; color: var(--muted); font-size: 12.5px; }
#loading .track { height: 3px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
#loading .fill { height: 100%; width: 0; background: var(--accent); transition: width .3s; }
#loading .msg { margin-top: 10px; font-size: 11.5px; color: var(--muted); min-height: 17px; }
#loading .err { color: #e66767; text-align: left; font-size: 12px; }

#help {
  position: fixed; inset: 0; z-index: 55; display: none; place-items: center;
  background: var(--scrim); backdrop-filter: blur(3px);
}
#help.open { display: grid; }
#help .card { width: min(560px, 90vw); max-height: 82vh; overflow-y: auto; padding: 22px 24px; }
#help h2 { margin: 0 0 4px; font-size: 17px; }
#help h3 { margin: 18px 0 8px; font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); }
#help dl { display: grid; grid-template-columns: 132px 1fr; gap: 6px 12px; margin: 0; font-size: 12.5px; }
#help dt { color: var(--ink-2); }
#help dd { margin: 0; color: var(--muted); }
#help p { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
#help .close { margin-top: 20px; }

.btn {
  padding: 7px 13px; border-radius: var(--radius-s); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-2); font-size: 12.5px;
}
.btn:hover { background: var(--surface-3); color: var(--ink); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }

#touchhint {
  position: fixed; left: 50%; translate: -50% 0; top: 74px; z-index: 23;
  max-width: min(320px, calc(100vw - 40px));
  padding: 7px 13px; border-radius: 14px; font-size: 11.5px; text-align: center;
  color: var(--ink-2); background: var(--overlay);
  border: 1px solid var(--line); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s;
}
#touchhint.on { opacity: 1; visibility: visible; }
#touchhint b { color: var(--ink); font-weight: 600; }

/* iPhone-д бүтэн дэлгэц болох заавар (js/ui.js). Хүрэх зааврын байранд,
   түүнийг унтарсны дараа гарна; доод хуудсын (z 25) доор. */
#fullhint {
  position: fixed; left: 50%; translate: -50% 0; z-index: 24;
  bottom: calc(112px + env(safe-area-inset-bottom));
  width: min(340px, calc(100vw - 32px));
  padding: 11px 40px 11px 14px; border-radius: 14px;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
}
#fullhint[hidden] { display: none; }
#fullhint b { color: var(--ink); font-weight: 600; }
#fullhint p { margin: 5px 0 0; }
#fullhint svg { width: 14px; height: 14px; vertical-align: -2px;
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#fullhint-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
  border: 0; border-radius: 7px; background: var(--surface-2); color: var(--muted); }
#fullhint-x:hover { background: var(--surface-3); color: var(--ink); }

/* ---------------------------------------------------------- засварын горим
   Зам, эргэлт, дохиог гараар засах самбар (js/editor.js). Инспектортой ижил
   байранд суух ч тэрнээс дээгүүр: засварын үед барилга сонгогдохгүй. */

#editor {
  position: fixed; top: 66px; right: 14px; width: 320px; max-height: calc(100vh - 96px);
  display: flex; flex-direction: column; z-index: 28; padding-bottom: 6px;
}
#editor[hidden] { display: none; }
#ed-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--grid); flex: none; }
#ed-head h2 { margin: 0; font-size: 15px; }
#ed-close {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted);
}
#ed-close:hover { background: var(--surface-3); color: var(--ink); }
/* Дарах үйлдлийн горим — Shift товчлол утсан дээр байхгүй тул чипээр */
#ed-modes {
  display: flex; gap: 6px; flex: none;
  padding: 9px 16px 0;
}
#ed-modes .chip { flex: 1; text-align: center; padding: 5px 6px; }
#ed-body { overflow-y: auto; padding: 12px 16px 8px; }
#ed-body .warn { color: var(--accent); }
/* Хувиргалтын блок — шилжүүлэх, эргүүлэх, хэмжээ */
.ed-xf {
  margin: 10px 0 4px; padding: 9px 10px 4px;
  border: 1px solid var(--grid); border-radius: 10px; background: var(--surface-2);
}
.ed-xf .row { align-items: center; }
.ed-xf .chip { padding: 4px 9px; min-width: 28px; }
.ed-xf .pad4 { display: inline-flex; gap: 3px; }
.ed-xf .xfval {
  min-width: 46px; display: inline-block; text-align: center; font-size: 12px;
}
.ed-xf .hintline { margin: 8px 0 4px; }

/* Дэлгэрэнгүй загварын самбарт эх код руу буулгах мөр. Дарахад хуулагдана
   тул заагч нь товчлуур мэт; урт мөрийг тасалж биш **гүйлгэж** үзүүлнэ —
   таславал хуулсан мөр бүтэн эсэхэд эргэлзээ төрнө. */
.ed-code {
  margin: 4px 0 8px; padding: 7px 9px; cursor: pointer;
  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(255, 255, 255, .055); border-radius: 7px;
  overflow-x: auto; white-space: pre; -webkit-user-select: all; user-select: all;
}
.ed-code:hover { background: rgba(255, 255, 255, .09); }
/* Ханын өнгө ба фасадны сонголт */
.ed-sw { display: inline-flex; gap: 4px; }
.ed-sw .sw {
  width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--grid);
  padding: 0; cursor: pointer; color: var(--muted); font-size: 11px; line-height: 1;
}
.ed-sw .sw.none { background: var(--surface-3); }
.ed-sw .sw.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.ed-fac { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.ed-fac .chip { padding: 4px 8px; font-size: 11.5px; }
.ed-fac .chip.on { background: var(--accent); color: #1a1300; }
#ed-body .hintline.addmode {
  padding: 7px 9px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--grid); margin-bottom: 10px;
}
#ed-body .kv { margin: 0 0 10px; }
#ed-body .row + .row { margin-top: 6px; }
#ed-body .switch { padding: 5px 0; }
#ed-body i.muted { font-style: normal; font-size: 11px; }
#ed-foot {
  display: flex; gap: 6px; padding: 10px 16px 4px; border-top: 1px solid var(--grid);
  flex: none;
}
#ed-toast {
  margin: 0 16px; padding: 6px 10px; border-radius: 8px; font-size: 11.5px;
  color: var(--ink-2); background: var(--surface-2);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
#ed-toast.on { opacity: 1; visibility: visible; }

/* Засварын үед барилгын хөтөч, тайлбар саад болохгүй */
body.edit-on #inspector,
body.edit-on #tooltip { display: none; }

@media (max-width: 840px), (hover: none) and (max-width: 1024px) {
  #editor {
    top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 70vh;
    border-radius: 18px 18px 0 0; border-bottom: 0; border-left: 0; border-right: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ----------------------------------------------------------- аватар горим
   Газрын түвшний камер (js/avatar.js). Горим идэвхтэй үед шүүлтийн самбар,
   тайлбарууд нь дэлгэцийг чөлөөлнө — хот өөрөө л харагдана. */

body.avatar-on #sidebar,
body.avatar-on #inspector,
body.avatar-on #tooltip,
body.avatar-on #touchhint { display: none; }
body.avatar-on #labels { opacity: .5; }

#avatar-hud { position: fixed; inset: 0; z-index: 26; pointer-events: none; }
#avatar-hud[hidden] { display: none; }

#av-bar {
  position: absolute; left: 50%; translate: -50% 0; top: 74px;
  display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 16px;
  border-radius: 999px; font-size: 12.5px; color: var(--ink-2);
  max-width: calc(100vw - 24px);
}
#av-bar b { color: var(--ink); font-weight: 600; }
#av-bar .sep { width: 1px; height: 14px; background: var(--grid); flex: none; }
#av-info { font-variant-numeric: tabular-nums; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }

#av-toast {
  position: absolute; left: 50%; translate: -50% 0; top: 116px;
  max-width: min(430px, calc(100vw - 32px)); text-align: center;
  padding: 7px 14px; border-radius: 12px; font-size: 12px; color: var(--ink-2);
  background: var(--overlay); border: 1px solid var(--line);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
#av-toast.on { opacity: 1; visibility: visible; }

/* Товчлуурын сануулга нь шөнийн замын гэрэлтсэн хучилт дээр ч уншигдах ёстой
   тул өөрийн бүдэг дэвсгэртэй. */
#av-keys {
  position: absolute; left: 50%; translate: -50% 0; bottom: 54px; margin: 0;
  max-width: min(780px, calc(100vw - 32px)); text-align: center;
  padding: 4px 12px; border-radius: 999px;
  font-size: 11px; color: var(--ink-2); background: var(--overlay);
  border: 1px solid var(--line);
}

#av-buttons {
  position: absolute; right: 14px; bottom: 110px;
  display: flex; gap: 6px; pointer-events: auto;
}

/* Хуруун жолоо — зөвхөн hover байхгүй төхөөрөмжид. */
#av-pad {
  position: absolute; left: 22px; bottom: 28px; width: 132px; height: 132px;
  border-radius: 50%; display: none; place-items: center; pointer-events: auto;
  background: var(--overlay); border: 1px solid var(--line); touch-action: none;
}
#av-knob {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent); opacity: .8;
}

@media (hover: none) {
  #av-pad { display: grid; }
  #av-keys { display: none; }
  #av-buttons {
    right: 12px; bottom: max(28px, env(safe-area-inset-bottom));
    flex-direction: column; align-items: flex-end;
  }
  #av-buttons .chip { padding: 9px 14px; }
  #av-bar { top: max(62px, calc(env(safe-area-inset-top) + 56px)); }
  #av-toast { top: max(104px, calc(env(safe-area-inset-top) + 98px)); }
}

@media (prefers-reduced-motion: reduce) { #av-toast { transition: none; } }

/* ------------------------------------------------------------------ багахан */

@media (max-width: 1080px) {
  #inspector { width: 300px; }
  #sidebar { width: 280px; }
}

@media (max-width: 960px) {
  #brand span { display: none; }
}

/* --- гар утас / таблет: доод хуудас (bottom sheet) --- */
@media (max-width: 840px), (hover: none) and (max-width: 1024px) {
  #topbar {
    height: 64px; padding: 0 10px;
    padding-top: env(safe-area-inset-top);
  }
  #mainnav { gap: 5px; }
  /* эгнээ 15+34+3 px */
  #bar-toggle { top: calc(env(safe-area-inset-top) + 50px); height: 16px; }
  .glass { --ox: 1.5px; --oy: 3px; height: 34px; padding: 0 8px 0 10px; gap: 5px; font-size: 13px; border-radius: 10px; }
  .nav-face.glass { padding: 0 7px 0 3px; }
  .g-face { width: 28px; height: 28px; }
  #menu { top: 60px; right: 8px; left: 8px; width: auto; }
  #brand-mark { height: 22px; }
  #brand span { display: none; }
  #searchwrap { max-width: none; }
  #topactions .chip { padding: 5px 9px; }

  #compass { display: none; }

  /* Хуруутай төхөөрөмжид зүүн доод булангийн жолоо (`#av-pad`) байдаг тул
     зургийг зүүн дээд булан руу, самбарын доогуур зөөнө. */
  #minimap {
    width: 118px; height: 118px; left: 12px; bottom: auto;
    top: max(62px, calc(env(safe-area-inset-top) + 56px));
  }

  #sidebar, #inspector {
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    border-radius: 18px 18px 0 0; border-bottom: 0; border-left: 0; border-right: 0;
    padding-bottom: env(safe-area-inset-bottom);
    transition: translate .3s cubic-bezier(.25, .8, .3, 1);
  }
  #sidebar { max-height: 66vh; z-index: 25; }
  #inspector { max-height: 78vh; z-index: 27; }

  #sheet-grip { display: block; }
  #sidebar.collapsed { translate: 0 calc(100% - 96px); }
  #sidebar.collapsed #sheet-grip { padding-bottom: 10px; }

  #touchhint { top: auto; bottom: 112px; }

  .tabpanel { padding: 10px 14px 22px; }
  #insp-body { padding: 12px 16px 26px; }
  #insp-close { width: 32px; height: 32px; }
  #results { max-height: 44vh; }

  /* хуруунд том товч */
  .cat { padding: 9px 8px; }
  .tour-item, .toplist button, .result { padding: 9px 9px; }
  .segmented button { padding: 9px 4px; }
  .switch { padding: 6px 0; }
  .switch input { width: 38px; height: 22px; }
  .switch input::after { width: 16px; height: 16px; }
  .switch input:checked::after { translate: 16px 0; }

  .lbl { font-size: 10.5px; padding: 2px 6px; }

  /* хөдөлгөөнт зурган дээр blur нь хүнд — багасгана */
  .panel {
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
  }
}

@media (max-width: 420px) {
  #brand { display: none; }

  /* Толгой хоёр эгнээ болж, чипүүдийн эгнээ хөндлөн гүйдэг болно. ⓘ тэнд
     байвал гүйж алга болох тул эхний эгнээний эхэнд — нуугдсан тэмдгийн
     орон зайд — гаргаж тавина. Заалт үргэлж нүдэнд харагдана. */
  #attrib { order: -1; }

  /* 420px дээр бүх нэр багтахгүй тул эгнээ хөндлөн гүйнэ. */
  /* overflow нь босоо тэнхлэгийг ч тайрна — шилний зузаан, туяа багтах
     зай үлдээнэ. */
  #mainnav { max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 6px 4px 10px; }
  #mainnav::-webkit-scrollbar { display: none; }
  /* Шил нь бичээсээс өргөн (жийрэг, сум) — 375px-д зургаа бүгд багтах
     ёстой: Цэс гүйлгэж байж л харагдвал хэрэглэгч түүнийг олохгүй.
     Хэмжсэн: 12px-д 451px (Цэс бүтнээрээ далд), энд 357px (Montserrat SemiBold). */
  #topbar { padding-left: 6px; padding-right: 6px; }
  /* баруун 3px — сүүлчийн хавтангийн зузаан (ox 1.5px) тайрагдахгүй */
  #mainnav { gap: 3px; padding-left: 0; padding-right: 3px; }
  .glass { font-size: 11px; letter-spacing: 0; padding: 0 5px; gap: 3px; }
  .nav-face.glass { padding: 0 5px 0 2px; }
  .g-face { width: 26px; height: 26px; }
  .g-chev { width: 7px; height: 7px; margin-left: 0; }
  #attrib { display: none; }

  /* Чип зургаа болохлоор бүтэн эгнээ ч хүрэхээ болив: 375px дээр ердөө
     таван чип багтана. Гурав дахь эгнээ нэмбэл толгой 130px давж, газрын
     зураг хэт доош шахагдана — иймд эгнээг нь хөндлөн гүйлгэдэг болгов. */
  #topactions {
    width: 100%; margin-left: 0; gap: 5px;
    justify-content: flex-start;
    padding: 2px 0;                 /* фокусын хүрээ тайрагдахгүй байх зай */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  /* Гүйлгүүрийн зураас шилэн толгой дээр бүдүүлэг харагдана. */
  #topactions::-webkit-scrollbar { display: none; }

  /* Багтаж байвал энэ `auto` чипүүдийг урьдын адил баруун тийш нааж,
     багтахгүй бол 0 болж унана. Тиймээс эхний чип ("Аватар") зүүн
     ирмэгээс эхэлж, үлдсэн нь гүйлгэхэд гарч ирнэ. `flex-end` бол
     эсрэгээрээ эхний чипийг гүйлгэж хүрэхгүй сөрөг талд түлхдэг. */
  #topactions > .chip:first-child { margin-left: auto; }

  /* Чипийг арай нарийсгавал 420px дээр бүгд нэг дор багтаж, 375px дээр
     ганц чип л далдарч, гүйлгэх боломжтой гэдгийг өөрөө сануулна. */
  #topactions .chip { padding: 5px 8px; }
  #av-bar { top: max(104px, calc(env(safe-area-inset-top) + 98px)); }
  #av-toast { top: max(146px, calc(env(safe-area-inset-top) + 140px)); }
  #help .card { padding: 18px 16px; }
  #help dl { grid-template-columns: 108px 1fr; }
  .metrics { gap: 6px; }
  .metric b { font-size: 15px; }
  .kv { grid-template-columns: 92px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #sidebar, #inspector, #touchhint { transition: none; }
}