/* Интерфейс: меню паузы, настройки, «Управление», экран приветствия, отладочный экран F3, профайлер, подсказки.
   Язык — «тёмный камень»: пиксельная сетка GUI Minecraft (P = var(--px), целые пиксели устройства — ui/theme.js),
   свой пиксельный шрифт (8 P, строка 11 P, тень как у Minecraft), объёмные рамки (свет сверху-слева, тень
   снизу-справа, контур чёрный), пиксельные иконки 16 P (ui/icons.js). Одна главная кнопка — зелёная «трава»,
   выбор и значения — золото, фокус — золотая рамка; подсказки — по наведению, во всплывающем окне как у предметов. */

@font-face { font-family: "VoxelPixel"; src: url("pixel.woff") format("woff"); font-weight: 400; font-display: block; }
@font-face { font-family: "VoxelPixel"; src: url("pixel-bold.woff") format("woff"); font-weight: 700; font-display: block; }

:root {
  --px: 1.75px;
  --pxm: var(--px); /* пиксель меню — для отладочного экрана, у которого свой --px */
  --ui-k: 1;
  --ui-overlay: 1; --ui-body: 14px; --ui-small: 12.25px; --ui-leading: 19.25px;
  --p2: calc(var(--px) * 2); --p3: calc(var(--px) * 3); --p4: calc(var(--px) * 4); --p6: calc(var(--px) * 6);
  --p8: calc(var(--px) * 8); --p11: calc(var(--px) * 11); --p12: calc(var(--px) * 12); --p16: calc(var(--px) * 16);
  --font: "VoxelPixel", "Segoe UI", system-ui, sans-serif;
  /* камень */
  --ui-panel: rgba(28, 31, 27, 0.96);
  --ui-panel-2: #252824;
  --ui-well: rgba(0, 0, 0, 0.28);
  --ui-btn: #3e4439; --ui-btn-hi: #69705f; --ui-btn-lo: #20251d; --ui-btn-hover: #4b5443;
  --ui-edge-hi: rgba(255, 255, 255, 0.11); --ui-edge-lo: rgba(0, 0, 0, 0.55);
  --ui-line: rgba(255, 255, 255, 0.08);
  /* текст */
  --ui-text: #edf0e5; --ui-muted: #a9b19e; --ui-faint: #737d6b; --ui-shadow: rgba(0, 0, 0, 0.55);
  /* акценты */
  --ui-gold: #c5d48a; --ui-gold-ink: #28311a;
  --ui-grass: #617345; --ui-grass-hi: #a5b77c; --ui-grass-lo: #354327; --ui-dirt: #494e37; --ui-grass-ink: #202b15;
  --ui-green: #72dc5a; --ui-yellow: #ffd84a; --ui-red: #ff6a55; --ui-blue: #62bdf0; --ui-purple: #c79bff; --ui-orange: #ff9a3a;
  /* подсказка — как у предметов Minecraft */
  --ui-tip: rgba(20, 24, 18, 0.97); --ui-tip-edge1: #69705f; --ui-tip-edge2: #35402c;
}

/* Отладочный экран и профайлер — на пиксель мельче меню (ui/theme.js: --px-dbg). */
#f3, #prof, #hud { --px: var(--px-dbg, 2px);
  --p2: calc(var(--px) * 2); --p3: calc(var(--px) * 3); --p4: calc(var(--px) * 4); --p6: calc(var(--px) * 6);
  --p8: calc(var(--px) * 8); --p11: calc(var(--px) * 11); --p12: calc(var(--px) * 12); --p16: calc(var(--px) * 16); }

/* ------------------------------------------------------------ основа */
.vm, #help, #f3, #prof, #toast, .vm-tip {
  font-family: var(--font); font-size: var(--p8); line-height: var(--p11); color: var(--ui-text);
  text-shadow: 1px 1px 0 var(--ui-shadow); font-variant-ligatures: none; letter-spacing: 0;
}
.vm *, #help *, #f3 *, #prof * { box-sizing: border-box; }
.vm [hidden], #help [hidden], #f3 [hidden], #prof [hidden] { display: none !important; }
.vm button, #help button, #prof button { font: inherit; color: inherit; text-shadow: inherit; letter-spacing: inherit; }
.vm b, #help b, #f3 b, #prof b { font-weight: 400; }

/* Пиксельная иконка 16 × 16 из листа (ui/icons.js: --ix, --iy); .x2 — вдвое крупнее. */
.vm-ic { display: inline-block; flex: none; width: var(--p16); height: var(--p16); vertical-align: middle;
  background: url("icons.png") no-repeat calc(var(--px) * -16 * var(--ix, 0)) calc(var(--px) * -16 * var(--iy, 0)) / calc(var(--px) * 128) auto;
  image-rendering: pixelated; image-rendering: crisp-edges; }
.vm-ic.x2 { width: calc(var(--px) * 32); height: calc(var(--px) * 32);
  background-position: calc(var(--px) * -32 * var(--ix, 0)) calc(var(--px) * -32 * var(--iy, 0)); background-size: calc(var(--px) * 256) auto; }
/* Надпись пиксельным шрифтом крупно (ui/icons.js: pixelText, --k — кратность). */
.vm-pix { display: inline-block; font-size: calc(var(--px) * 8 * var(--k, 2)); line-height: calc(var(--px) * 9 * var(--k, 2));
  text-shadow: calc(var(--px) * var(--k, 2)) calc(var(--px) * var(--k, 2)) 0 var(--ui-shadow); white-space: nowrap; }
.vm-pix.flat { text-shadow: none; }

/* Клавиша: пиксельная клавиша с объёмом. */
.vm kbd, .vm-key, #help kbd, #f3 kbd, #prof kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--p12); height: var(--p12);
  padding: 0 var(--p3) var(--px); font: inherit; font-size: var(--p8); line-height: var(--p8); color: var(--ui-text);
  background: #57514a; border: var(--px) solid #0b0a09;
  box-shadow: inset var(--px) var(--px) 0 #7b746a, inset 0 calc(var(--px) * -2) 0 #35302b; white-space: nowrap; vertical-align: middle;
}
.vm kbd i, #help kbd i { font-style: normal; }

/* ------------------------------------------------------------ оверлей меню */
.vm { position: fixed; inset: 0; z-index: 50; display: none; outline: none;
  background: rgba(8, 7, 6, 0.48); backdrop-filter: blur(6px) saturate(1.05); -webkit-backdrop-filter: blur(6px) saturate(1.05); }
.vm.no-blur { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(8, 7, 6, 0.66); }
/* Мир под меню заморожен (ui/menu.js): снимок кадра — маленький холст, растянутый на экран (размытие посчитано один раз),
   без backdrop-filter по живому миру. До снимка (один кадр) — только затемнение. */
.vm-snap { position: absolute; inset: 0; z-index: -1; display: none; width: 100%; height: 100%; image-rendering: auto; pointer-events: none; }
.vm.snap .vm-snap { display: block; }
.vm.snap, .vm.freezing { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(8, 7, 6, 0.6); }
.vm.open { display: flex; align-items: center; justify-content: center; animation: vm-fade 0.12s ease-out; }
.vm-screen { display: none; }
.vm-screen.on { display: flex; }
@keyframes vm-fade { from { opacity: 0; } }
@keyframes vm-pop { from { transform: translateY(var(--p4)); opacity: 0.4; } }
@keyframes vm-in { from { opacity: 0; } }
.vm.no-anim, .vm.no-anim * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .vm, .vm *, #help, #help * { animation: none !important; transition: none !important; } }
body.vm-open #cross { display: none !important; }
body.no-debug-text #f3 { display: none !important; }

/* Панель: тёмный камень с объёмной кромкой и чёрным контуром. */
.vm-card, #prof {
  background: var(--ui-panel); border: 1px solid #10120f;
  box-shadow: inset 0 1px 0 var(--ui-edge-hi), inset 0 -1px 0 var(--ui-edge-lo), 0 3px 0 #0005;
}
.vm-card { animation: vm-pop 0.16s cubic-bezier(0.2, 0.8, 0.2, 1); }

.vm :focus { outline: none; }
.vm :focus-visible, #help :focus-visible { outline: var(--px) solid var(--ui-gold); outline-offset: var(--px); }

/* ------------------------------------------------------------ кнопки */
/* Кнопка — камень; наведение — светлее и золотая рамка, нажатие — проседает на пиксель (кромка наоборот). */
.vm-btn, #help .row button, .vm-textbtn, #prof button {
  position: relative; display: flex; align-items: center; gap: var(--p6); min-height: calc(var(--px) * 20); padding: 0 var(--p6);
  background: var(--ui-btn); border: var(--px) solid #000; border-radius: 0; cursor: pointer; text-align: left; white-space: nowrap;
  box-shadow: inset var(--px) var(--px) 0 var(--ui-btn-hi), inset calc(var(--px) * -1) calc(var(--px) * -2) 0 var(--ui-btn-lo);
}
.vm-btn:hover, .vm-btn:focus-visible, #help .row button:hover, #help .row button:focus-visible, .vm-textbtn:hover, .vm-textbtn:focus-visible,
#prof button:hover {
  background: var(--ui-btn-hover); outline: var(--px) solid var(--ui-gold); outline-offset: 0; color: #fff; }
.vm-btn:active, #help .row button:active, .vm-textbtn:active, #prof button:active {
  padding-top: var(--px); box-shadow: inset var(--px) var(--px) 0 var(--ui-btn-lo), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--ui-btn-hi); }
.vm-btn[disabled], .vm-textbtn[disabled], #help .row button[disabled] { opacity: 0.45; cursor: default; outline: none; }
.vm-btn > span { flex: 1; }
.vm-btn kbd { opacity: 0.85; }
.vm-btn em { font-style: normal; color: var(--ui-faint); }
.vm-btn em.on { color: var(--ui-green); }
/* Главная — зелёная «трава» над полоской земли. */
.vm-btn.primary, #help .play {
  justify-content: center; min-height: calc(var(--px) * 26); padding: 0 var(--p8); font-weight: 700; color: #fff;
  background: var(--ui-grass); border: var(--px) solid #000; text-shadow: var(--px) var(--px) 0 var(--ui-grass-ink);
  box-shadow: inset var(--px) var(--px) 0 var(--ui-grass-hi), inset calc(var(--px) * -1) 0 0 var(--ui-grass-lo),
    inset 0 calc(var(--px) * -4) 0 var(--ui-dirt), inset 0 calc(var(--px) * -5) 0 var(--ui-grass-lo);
}
.vm-btn.primary > span { flex: none; }
.vm-btn.primary:hover, .vm-btn.primary:focus-visible, #help .play:hover, #help .play:focus-visible {
  background: #748754; color: #fff; outline: var(--px) solid #fff; outline-offset: 0; }
.vm-btn.primary:active, #help .play:active { padding-top: var(--p2);
  box-shadow: inset var(--px) var(--px) 0 var(--ui-grass-lo), inset 0 calc(var(--px) * -2) 0 var(--ui-dirt), inset 0 calc(var(--px) * -3) 0 var(--ui-grass-lo); }
.vm-btn.primary kbd { background: rgba(0, 0, 0, 0.2); box-shadow: none; border-color: rgba(0, 0, 0, 0.35); color: #e6ffd9; text-shadow: none; }
.vm-btn.primary[disabled] { opacity: 0.7; }

/* Кнопка-иконка (назад, закрыть, сброс). */
.vm-icbtn { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--px) * 20); height: calc(var(--px) * 20); flex: none;
  padding: 0; background: transparent; border: var(--px) solid transparent; cursor: pointer; opacity: 0.85; }
.vm-icbtn:hover, .vm-icbtn:focus-visible { opacity: 1; background: var(--ui-btn); border-color: #000;
  box-shadow: inset var(--px) var(--px) 0 var(--ui-btn-hi), inset calc(var(--px) * -1) calc(var(--px) * -2) 0 var(--ui-btn-lo); }
.vm-icbtn:active { padding-top: var(--p2); }

.vm-textbtn { min-height: calc(var(--px) * 18); gap: var(--p4); padding: 0 var(--p6); }
.vm-textbtn.danger { color: #ffb3a6; }
.vm-textbtn.armed { background: #6a2a22; color: #fff; outline: var(--px) solid var(--ui-red); }
.vm-textbtn.acc { background: var(--ui-grass); text-shadow: var(--px) var(--px) 0 var(--ui-grass-ink);
  box-shadow: inset var(--px) var(--px) 0 var(--ui-grass-hi), inset calc(var(--px) * -1) calc(var(--px) * -2) 0 var(--ui-grass-lo); }
.vm-textbtn.acc:hover { background: #748754; outline-color: #fff; }

/* Сегменты: пиксельные кнопки вплотную; выбранная — золото. */
.vm-seg { display: inline-flex; max-width: 100%; border: var(--px) solid #000; background: #000; gap: var(--px); }
.vm-seg button { flex: 1 1 auto; min-width: 0; height: var(--p16); padding: 0 var(--px); border: 0; cursor: pointer; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--ui-muted); background: var(--ui-btn);
  box-shadow: inset var(--px) var(--px) 0 var(--ui-btn-hi), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--ui-btn-lo); }
.vm-seg button:hover { color: #fff; background: var(--ui-btn-hover); }
.vm-seg button[aria-checked="true"] { color: var(--ui-gold); background: #4d4636; text-shadow: var(--px) var(--px) 0 var(--ui-gold-ink);
  box-shadow: inset 0 0 0 var(--px) var(--ui-gold), inset var(--p2) var(--p2) 0 #6b6040; }
.vm-seg button:focus-visible { outline-offset: calc(var(--px) * -3); }

/* Переключатель: пиксельный рычажок. */
.vm-switch { position: relative; width: calc(var(--px) * 22); height: var(--p12); flex: none; padding: 0; cursor: pointer;
  background: #141210; border: var(--px) solid #000; box-shadow: inset var(--px) var(--px) 0 rgba(0, 0, 0, 0.6); }
.vm-switch::after { content: ""; position: absolute; top: 0; left: 0; width: calc(var(--px) * 10); height: calc(var(--px) * 10);
  background: #8a8378; box-shadow: inset var(--px) var(--px) 0 #c9c1b4, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #4f4942;
  transition: transform 0.1s ease-out; }
.vm-switch[aria-checked="true"] { background: var(--ui-grass); box-shadow: inset var(--px) var(--px) 0 var(--ui-grass-lo); }
.vm-switch[aria-checked="true"]::after { transform: translateX(calc(var(--px) * 10)); background: #f4efe6;
  box-shadow: inset var(--px) var(--px) 0 #fff, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #9c958a; }
.vm-switch:hover { outline: var(--px) solid var(--ui-gold); outline-offset: 0; }

/* Ползунок: тёмный жёлоб, зелёная заливка, каменная ручка; золотая засечка — значение по умолчанию. */
.vm-range { position: relative; width: 100%; height: var(--p12); display: flex; align-items: center; }
.vm-range input { -webkit-appearance: none; appearance: none; width: 100%; height: var(--p12); margin: 0; background: transparent;
  cursor: pointer; position: relative; z-index: 1; --p: 50%; }
.vm-range input::-webkit-slider-runnable-track { box-sizing: border-box; height: var(--p6); border: var(--px) solid #000;
  background: linear-gradient(to right, var(--ui-grass) var(--p), #141210 var(--p)); }
.vm-range input::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: var(--p6); height: var(--p12);
  margin-top: calc(var(--px) * -4); background: #a49c8f; border: var(--px) solid #000; border-radius: 0;
  box-shadow: inset var(--px) var(--px) 0 #e2dbcf, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #5d564d; }
.vm-range input:hover::-webkit-slider-thumb, .vm-range input:focus-visible::-webkit-slider-thumb { background: #c9c1b4; outline: var(--px) solid var(--ui-gold); }
.vm-range input:focus-visible { outline: none; }
.vm-range input:disabled { cursor: default; }
.vm-range input::-moz-range-track { height: var(--p4); background: #141210; border: var(--px) solid #000; }
.vm-range input::-moz-range-progress { height: var(--p4); background: var(--ui-grass); }
.vm-range input::-moz-range-thumb { width: var(--p4); height: var(--p12); background: #a49c8f; border: var(--px) solid #000; border-radius: 0; }
.vm-tick { position: absolute; top: 50%; width: var(--px); height: var(--p3); margin-top: var(--p3); pointer-events: none;
  background: var(--ui-gold); opacity: 0.75; left: calc(var(--p3) + (100% - var(--p6)) * var(--d, 0)); }

/* Цена по FPS: 1–3 столбика (дёшево, средне, дорого) или стрелка (ускоряет). */
.vm-cost { display: inline-flex; align-items: flex-end; gap: var(--px); height: var(--p8); padding: 0 var(--px); flex: none; cursor: help; }
.vm-cost i { width: var(--p2); background: rgba(255, 255, 255, 0.14); box-shadow: var(--px) var(--px) 0 rgba(0, 0, 0, 0.4); }
.vm-cost i:nth-child(1) { height: var(--p4); } .vm-cost i:nth-child(2) { height: var(--p6); } .vm-cost i:nth-child(3) { height: var(--p8); }
.vm-cost.c1 i:nth-child(-n+1) { background: var(--ui-green); }
.vm-cost.c2 i:nth-child(-n+2) { background: var(--ui-yellow); }
.vm-cost.c3 i { background: var(--ui-red); }
.vm-cost.cf { align-items: center; color: var(--ui-blue); }
.vm-cost.c0 { display: none; }

/* Всплывающая подсказка — как у предметов Minecraft. */
.vm-tip { position: fixed; z-index: 80; max-width: calc(var(--px) * 170); padding: var(--p3) var(--p4) var(--p4); pointer-events: none;
  background: var(--ui-tip); border: var(--px) solid var(--ui-tip);
  box-shadow: inset 0 0 0 var(--px) var(--ui-tip-edge1), inset 0 calc(var(--px) * -2) 0 var(--ui-tip-edge2);
  color: #ddd6e8; white-space: normal; }
.vm-tip b { display: block; color: #fff; margin-bottom: var(--px); }
.vm-tip .c { display: block; margin-top: var(--p3); }

/* ------------------------------------------------------------ пауза */
.vm-pause { flex-direction: column; align-items: stretch; width: min(calc(var(--px) * 200), calc(100vw - var(--p16))); padding: var(--p12) var(--p12) var(--p11);
  max-height: calc(100vh - var(--p8)); overflow-y: auto; scrollbar-width: none; }
.vm-head { display: flex; flex-direction: column; align-items: center; gap: var(--px); margin-bottom: var(--p8); }
.vm-head .vm-pix { font-size: var(--p16); line-height: calc(var(--px) * 18); text-shadow: var(--p2) var(--p2) 0 var(--ui-shadow); }
.vm-sub { margin: 0; color: var(--ui-faint); }
.vm-btns { display: flex; flex-direction: column; gap: var(--p4); }
.vm-btns .vm-btn.primary { margin-bottom: var(--p4); }
.vm-resume-note { margin: calc(var(--px) * -4) 0 var(--p2); color: var(--ui-gold); text-align: center; text-shadow: var(--px) var(--px) 0 var(--ui-gold-ink); }
.vm-quick { margin-top: var(--p8); padding-top: var(--p8); box-shadow: inset 0 var(--px) 0 var(--ui-line); display: flex; flex-direction: column; gap: var(--p4); }
/* Пауза: «Качество» — имя потолка, переключатель «Авто», кирки-потолки, живая строка кадров. */
.vm-qtop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p2) var(--p4); color: var(--ui-muted); }
.vm-qname { flex: 1; white-space: nowrap; color: var(--ui-gold); text-shadow: var(--px) var(--px) 0 var(--ui-gold-ink); }
.vm-qauto { display: inline-flex; align-items: center; gap: var(--p3); color: var(--ui-text); white-space: nowrap; flex: none; }
.vm-qauto.dep-off { opacity: 0.45; }
.vm-qlive { display: flex; align-items: baseline; gap: var(--p4); color: var(--ui-faint); }
.vm-qlive .n { flex: none; font-size: var(--p16); line-height: calc(var(--px) * 18); text-shadow: var(--p2) var(--p2) 0 var(--ui-shadow); }
.vm-qlive.low [data-qline] { color: var(--ui-text); }
.vm-quick .vm-seg { width: 100%; }
.vm-quick .vm-seg button { flex: 1 1 0; height: calc(var(--px) * 22); display: flex; align-items: center; justify-content: center; padding: 0; }
.vm-quick .vm-seg button > span { display: none; }
.vm-btn.busy { cursor: progress; opacity: 0.85; }
.vm-auto { color: var(--ui-faint); }

/* ------------------------------------------------------------ настройки */
.vm-settings { position: relative; width: min(calc(var(--px) * 480), calc(100vw - var(--p16))); height: min(calc(var(--px) * 352), calc(100vh - var(--p8))); overflow: hidden; }
.vm-side { width: calc(var(--px) * 124); flex: none; display: flex; flex-direction: column; padding: var(--p8) var(--p4) var(--p6);
  background: rgba(0, 0, 0, 0.22); box-shadow: inset calc(var(--px) * -1) 0 0 var(--ui-line); }
.vm-side .vm-brand { display: flex; align-items: center; gap: var(--p4); padding: 0 var(--p3) var(--p8); color: var(--ui-gold); }
.vm-side .vm-brand .vm-pix { font-size: var(--p8); line-height: var(--p11); font-weight: 700; text-shadow: var(--px) var(--px) 0 var(--ui-gold-ink); }
.vm-tabs { display: flex; flex-direction: column; gap: var(--px); flex: 1; overflow: auto; scrollbar-width: none; }
.vm-tab { position: relative; display: flex; align-items: center; gap: var(--p4); width: 100%; height: calc(var(--px) * 20); padding: 0 var(--p3);
  border: var(--px) solid transparent; background: transparent; color: var(--ui-muted); cursor: pointer; text-align: left; }
.vm-tab span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.vm-tab[aria-selected="true"] { color: var(--ui-gold); background: var(--ui-btn); border-color: #000; text-shadow: var(--px) var(--px) 0 var(--ui-gold-ink);
  box-shadow: inset var(--px) var(--px) 0 var(--ui-btn-hi), inset calc(var(--px) * -1) calc(var(--px) * -2) 0 var(--ui-btn-lo); }
.vm-tab small, .vm-badge { flex: none; padding: 0 var(--px); color: var(--ui-faint); font-size: inherit; }
.vm-tab small.bad { color: #fff; background: #a8301e; text-shadow: none; }
.vm.searching .vm-tab[aria-selected="true"] { color: var(--ui-muted); background: transparent; border-color: transparent; box-shadow: none; text-shadow: inherit; }
.vm-side-foot { padding-top: var(--p6); display: flex; flex-direction: column; gap: var(--p4); }
.vm-side-foot .vm-textbtn { justify-content: center; }

.vm-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vm-top { display: flex; align-items: center; gap: var(--p4); padding: var(--p6) var(--p6) var(--p6) var(--p8);
  box-shadow: inset 0 calc(var(--px) * -1) 0 var(--ui-line); }
.vm-top .vm-ttl { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--p6); }
.vm-top h2 { margin: 0; font: inherit; font-size: var(--p16); line-height: calc(var(--px) * 18); font-weight: 400; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; text-shadow: var(--p2) var(--p2) 0 var(--ui-shadow); }
.vm-top p { display: none; }
.vm-search { position: relative; width: calc(var(--px) * 96); flex: none; }
.vm-search .vm-ic { position: absolute; left: var(--p3); top: 50%; margin-top: calc(var(--px) * -8); pointer-events: none; opacity: 0.8; }
.vm-search input { width: 100%; height: calc(var(--px) * 20); padding: 0 var(--p16) 0 calc(var(--px) * 22); border: var(--px) solid #000; border-radius: 0;
  background: #141210; color: var(--ui-text); font: inherit; outline: none; box-shadow: inset var(--px) var(--px) 0 rgba(0, 0, 0, 0.6);
  text-shadow: var(--px) var(--px) 0 var(--ui-shadow); }
.vm-search input::placeholder { color: var(--ui-faint); }
.vm-search input:focus { box-shadow: inset 0 0 0 var(--px) var(--ui-gold); }
.vm-search input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.6); cursor: pointer; }
.vm-search kbd { position: absolute; right: var(--p3); top: 50%; transform: translateY(-50%); opacity: 0.7; }
.vm-search input:focus + kbd, .vm-search input:not(:placeholder-shown) + kbd { display: none; }

.vm-scroll { flex: 1; overflow: auto; padding: var(--p4) var(--p8) var(--p12); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #57514a transparent; }
.vm-scroll::-webkit-scrollbar { width: var(--p4); }
.vm-scroll::-webkit-scrollbar-thumb { background: #57514a; border: var(--px) solid #000; }
.vm-body { animation: vm-in 0.12s ease-out; }
.vm-group { margin-top: var(--p8); }
.vm-group > h3 { display: flex; align-items: center; gap: var(--p4); margin: 0 0 var(--p2); padding: 0 var(--p2) var(--p3);
  font: inherit; font-weight: 400; color: var(--ui-muted); box-shadow: inset 0 calc(var(--px) * -1) 0 var(--ui-line); }
.vm-group > h3 .grow { flex: 1; }
.vm-group > h3 .vm-textbtn { min-height: var(--p16); }

/* Строка: название слева, значение и управление справа; «?» — подсказка; сброс — когда изменено. */
.vm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(calc(var(--px) * 90), calc(var(--px) * 140)) var(--p16); align-items: center;
  gap: 0 var(--p6); min-height: calc(var(--px) * 20); padding: var(--p2) var(--p2) var(--p2) var(--p4); }
.vm-row:hover { background: rgba(255, 255, 255, 0.045); }
/* Название — текстом: цена и «?» идут следом в той же строке, при переносе — за последним словом. */
.vm-row-name { display: block; min-width: 0; }
.vm-row-name > span:first-child { overflow-wrap: anywhere; margin-right: var(--p2); }
.vm-row-name > .vm-cost, .vm-row-name > .vm-q, .vm-row-name > kbd { margin-right: var(--p3); vertical-align: calc(var(--px) * -1); }
.vm-q { display: inline-flex; align-items: center; justify-content: center; width: var(--p11); height: var(--p11); flex: none; padding: 0 0 var(--px);
  border: var(--px) solid #000; background: #2a3a5a; color: #dbe8ff; cursor: help; line-height: var(--p8);
  box-shadow: inset var(--px) var(--px) 0 #4a6aa0; opacity: 0; }
.vm-row:hover .vm-q, .vm-row:focus-within .vm-q, .vm-q:focus-visible, .vm-bind:hover .vm-q, .vm-q.on { opacity: 1; }
.vm.no-hints .vm-q { display: none; }
.vm-row-ctl { display: flex; flex-direction: column; align-items: stretch; gap: var(--px); min-width: 0; }
.vm-row-ctl.inline { flex-direction: row; align-items: center; justify-content: flex-end; }
.vm-val { align-self: flex-end; color: var(--ui-gold); white-space: nowrap; text-shadow: var(--px) var(--px) 0 var(--ui-gold-ink); }
.vm-row-ctl.inline .vm-val { display: none; }
.vm-row-ctl .vm-seg { align-self: stretch; }
.vm-reset { visibility: hidden; width: var(--p16) !important; height: var(--p16) !important; }
.vm-reset .vm-ic { transform: scale(0.75); }
.vm-row.changed .vm-reset { visibility: visible; }
.vm-row.changed .vm-row-name > span:first-child::before { content: ""; display: inline-block; width: var(--p2); height: var(--p2);
  margin: 0 var(--p3) var(--p2) 0; background: var(--ui-gold); box-shadow: var(--px) var(--px) 0 var(--ui-gold-ink); }
.vm-row.dep-off { opacity: 0.45; }
.vm-row.dep-off:hover { opacity: 0.8; }
.vm-row.soon { opacity: 0.45; pointer-events: none; }
.vm-row.flash { animation: vm-flash 0.6s ease-out; }
@keyframes vm-flash { from { background: rgba(255, 216, 74, 0.22); } }
.vm mark { background: rgba(255, 216, 74, 0.3); color: #fff; }

/* Пресеты: плитки с кирками (дерево → камень → железо → алмаз) и «Свой» (верстак). */
.vm-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--p4); }
.vm-preset { display: flex; flex-direction: column; align-items: center; gap: var(--p2); padding: var(--p4) var(--p2); cursor: pointer;
  background: var(--ui-panel-2); border: var(--px) solid #000; color: var(--ui-text); text-align: center;
  box-shadow: inset var(--px) var(--px) 0 #48433c, inset calc(var(--px) * -1) calc(var(--px) * -2) 0 #1b1916; }
.vm-preset:hover { background: #36322c; outline: var(--px) solid var(--ui-gold); outline-offset: 0; }
.vm-preset:active { padding-top: calc(var(--px) * 5); padding-bottom: var(--p3); }
.vm-preset[aria-checked="true"] { background: #3c3a24; color: var(--ui-gold); outline: var(--px) solid var(--ui-gold); outline-offset: 0;
  text-shadow: var(--px) var(--px) 0 var(--ui-gold-ink); box-shadow: inset 0 0 0 var(--px) #000, inset var(--p2) var(--p2) 0 #5c5a34; }
.vm-preset b { white-space: nowrap; }
.vm-preset.custom { cursor: default; color: var(--ui-faint); background: transparent; box-shadow: none; border: var(--px) dashed #57514a; }
.vm-preset.custom .vm-ic { opacity: 0.4; }
.vm-preset.custom:hover { outline: none; background: transparent; }
.vm-preset.custom[aria-checked="true"] { color: var(--ui-gold); border: var(--px) solid #000; background: #3c3a24; outline: var(--px) solid var(--ui-gold);
  box-shadow: inset 0 0 0 var(--px) #000, inset var(--p2) var(--p2) 0 #5c5a34; }
.vm-preset.custom[aria-checked="true"] .vm-ic { opacity: 1; }
.vm-preset .sub { color: var(--ui-faint); }
.vm-meters { display: flex; flex-direction: column; gap: var(--p2); margin-top: var(--px); }
.vm-meter { display: flex; align-items: center; gap: var(--px); height: var(--p3); }
.vm-meter i { width: var(--p4); height: var(--p3); background: rgba(255, 255, 255, 0.12); }
.vm-meter.fps i.on { background: var(--ui-blue); }
.vm-meter.heat i.on { background: var(--ui-orange); }
.vm-meter.heat i.on.hot { background: var(--ui-red); }
.vm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p2) var(--p6); margin: var(--p6) var(--p2) 0; color: var(--ui-faint); }
.vm-legend > span { display: inline-flex; align-items: center; gap: var(--p3); }
.vm-legend .sw { display: inline-block; width: var(--p6); height: var(--p3); }
/* «Графика»: живая строка кадров. */
.vm-live { display: flex; align-items: center; gap: var(--p4); margin-top: var(--p2); padding: var(--p3) var(--p6); background: var(--ui-well);
  box-shadow: inset var(--px) var(--px) 0 rgba(0, 0, 0, 0.35); }
.vm-live + .vm-group { margin-top: var(--p4); }
.vm-live.low { box-shadow: inset var(--px) var(--px) 0 rgba(0, 0, 0, 0.35), inset var(--p2) 0 0 var(--ui-red); }
.vm-live .n { flex: none; font-size: var(--p16); line-height: calc(var(--px) * 18); text-shadow: var(--p2) var(--p2) 0 var(--ui-shadow); }
.vm-live .u { flex: none; color: var(--ui-muted); align-self: flex-end; margin: 0 var(--p4) var(--px) 0; }
.vm-live .t { min-width: 0; display: flex; flex-direction: column; }
.vm-live .t b { color: var(--ui-text); }
.vm-live .t span { color: var(--ui-faint); }
.vm-live.low .t span { color: var(--ui-orange); }
/* «Качество»: карточка «Авто» (переключатель, цель кадров/с), потолок — плитки пресетов, что задаёт / чем отличается «Свой». */
.vm-autocard { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p3) var(--p8); padding: var(--p4) var(--p6) var(--p4) var(--p8);
  background: var(--ui-panel-2); border: var(--px) solid #000;
  box-shadow: inset var(--px) var(--px) 0 #48433c, inset calc(var(--px) * -1) calc(var(--px) * -2) 0 #1b1916; }
.vm-autocard .t { flex: 1 1 calc(var(--px) * 120); min-width: 0; display: flex; flex-direction: column; }
.vm-autocard .t b { display: flex; align-items: center; gap: var(--p4); color: var(--ui-gold); text-shadow: var(--px) var(--px) 0 var(--ui-gold-ink); }
.vm-autocard .t span { color: var(--ui-muted); }
.vm-autocard.dep-off .t span { color: var(--ui-orange); }
.vm-autocard.dep-off > .vm-switch, .vm-autocard.dep-off .vm-tgt { opacity: 0.45; }
.vm-autocard:hover .vm-q { opacity: 1; }
.vm-tgt { display: flex; align-items: center; gap: var(--p4); color: var(--ui-faint); }
.vm-tgt .vm-seg button { min-width: var(--p16); }
.vm-qhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--p2) var(--p6); margin: var(--p6) var(--p2) var(--p3); color: var(--ui-text); }
.vm-qhead small { flex: 1; font-size: inherit; color: var(--ui-faint); }
.vm-mlegend { display: inline-flex; align-items: center; gap: var(--p3); color: var(--ui-faint); }
.vm-mlegend .sw { display: inline-block; width: var(--p6); height: var(--p3); margin-left: var(--p4); }
.vm-pinfo { margin-top: var(--p3); padding: var(--p2) var(--p4); color: var(--ui-muted); background: var(--ui-well); }
.vm-pinfo b { color: var(--ui-text); }
.vm-pinfo.custom { box-shadow: inset var(--p2) 0 0 var(--ui-gold); }
.vm-pinfo .vm-textbtn { display: inline-flex; min-height: var(--p16); margin: var(--p2) 0 0 var(--p4); vertical-align: middle; }
.vm-preset.flash { animation: vm-gold 1.2s steps(6, end); }
@keyframes vm-gold { 0%, 33%, 66% { outline: var(--p2) solid var(--ui-gold); } 16%, 50%, 83% { outline-color: transparent; } }
.vm-mainrows { margin-top: var(--p4); }
/* Главный экран «Графики» помещается без прокрутки (1280×720): три главные строки — в одну строку на широком окне:
   название, ползунок и значение справа; значение не переносится («50 %», «128 чанков · 2.0 км»), сброс — 12 P. */
@media (min-width: 1000px) {
  .vm-mainrows .vm-row { grid-template-columns: minmax(0, 1fr) minmax(calc(var(--px) * 136), calc(var(--px) * 150)) var(--p12); min-height: 0; }
  .vm-mainrows .vm-row-name { display: flex; align-items: center; }
  .vm-mainrows .vm-row-ctl { flex-direction: row; align-items: center; gap: var(--p6); }
  .vm-mainrows .vm-range { flex: 1 1 auto; min-width: 0; }
  .vm-mainrows .vm-val { order: 2; flex: none; align-self: center; min-width: calc(var(--px) * 96); text-align: right; }
  .vm-mainrows .vm-reset { width: var(--p12) !important; height: var(--p12) !important; }
}
/* «Тонкая настройка» — свёрнута; заголовок-ящик со счётчиками. */
.vm-fine { margin-top: var(--p8); }
.vm-fine-head { display: flex; align-items: center; gap: var(--p6); width: 100%; min-height: calc(var(--px) * 22); padding: 0 var(--p6); cursor: pointer;
  text-align: left; background: var(--ui-btn); border: var(--px) solid #000;
  box-shadow: inset var(--px) var(--px) 0 var(--ui-btn-hi), inset calc(var(--px) * -1) calc(var(--px) * -2) 0 var(--ui-btn-lo); }
.vm-fine-head:hover, .vm-fine-head:focus-visible { background: var(--ui-btn-hover); outline: var(--px) solid var(--ui-gold); outline-offset: 0; }
.vm-fine-head .grow { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--p6); }
.vm-fine-head small { font-size: inherit; color: var(--ui-faint); }
.vm-fine-head small.cut { color: var(--ui-orange); }
.vm-fine-head .arr { flex: none; width: 0; height: 0; border-left: var(--p4) solid var(--ui-text); border-top: var(--p3) solid transparent;
  border-bottom: var(--p3) solid transparent; transition: transform 0.1s ease-out; }
.vm-fine.open .vm-fine-head .arr { transform: rotate(90deg); }
.vm-fine-body { display: none; padding: 0 0 0 var(--p4); box-shadow: inset var(--px) 0 0 var(--ui-line); }
.vm-fine.open .vm-fine-body { display: block; }
.vm-fine-body > .vm-legend { margin-top: var(--p4); }
/* Что авто сейчас держит ниже вашего значения — рядом с названием. */
.vm-cut { display: block; width: fit-content; max-width: 100%; box-sizing: border-box; margin-top: var(--px); padding: 0 var(--p2); color: var(--ui-orange); background: rgba(255, 154, 58, 0.12); white-space: normal; }
.vm-cut[hidden] { display: none !important; }
.vm-cut::before { content: "↓ "; }
/* Изменённая строка: «по умолчанию: …» под названием (U4) */
.vm-def { display: block; margin-top: var(--px); color: var(--ui-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-def[hidden] { display: none !important; }
/* Сброс раздела и сообщение внизу окна. */
.vm-tabfoot { display: flex; justify-content: flex-end; margin-top: var(--p12); }
.vm-snack { position: absolute; left: var(--p8); right: var(--p8); bottom: var(--p6); z-index: 5; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--p4) var(--p6); padding: var(--p4) var(--p6); color: var(--ui-text); background: rgba(20, 18, 16, 0.97); border: var(--px) solid #000;
  box-shadow: inset 0 0 0 var(--px) var(--ui-gold), 0 var(--p3) 0 rgba(0, 0, 0, 0.4); }
.vm-snack > span { flex: 1 1 calc(var(--px) * 150); min-width: 0; }
.vm-snack b { color: var(--ui-gold); }
.vm-snack.in { animation: vm-snack 0.16s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes vm-snack { from { transform: translateY(var(--p6)); opacity: 0; } }

/* Клавиши. */
.vm-binds { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--px) * 140), 1fr)); gap: 0 var(--p8); }
.vm-bind { display: flex; align-items: center; gap: var(--p4); min-height: calc(var(--px) * 20); padding: var(--px) var(--p2) var(--px) var(--p4); }
.vm-bind:hover { background: rgba(255, 255, 255, 0.045); }
.vm-bind .name { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.vm-bind .name > span { min-width: 0; overflow-wrap: anywhere; }
.vm-bind .name small { display: none; font-size: inherit; color: var(--ui-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-bind .vm-key { min-width: calc(var(--px) * 40); height: var(--p16); cursor: pointer; }
.vm-bind button.vm-key:hover { background: #6a645b; outline: var(--px) solid var(--ui-gold); }
.vm-bind .vm-key.fixed { cursor: default; opacity: 0.7; gap: var(--p2); padding-left: var(--px); }
.vm-bind .vm-key.fixed .vm-ic { margin: calc(var(--px) * -2) 0; transform: scale(0.75); }
.vm-bind.capture .vm-key { background: #4d4636; color: var(--ui-gold); outline: var(--px) solid var(--ui-gold); animation: vm-blink 0.8s steps(2, end) infinite; }
@keyframes vm-blink { 50% { outline-color: transparent; } }
.vm-bind.capture .name small, .vm-bind.conflict .name small { display: block; }
.vm-bind.capture .name small { color: var(--ui-gold); }
.vm-bind.conflict .vm-key { background: #5a2620; color: #ffd0c8; box-shadow: inset 0 0 0 var(--px) var(--ui-red); }
.vm-bind.conflict .name small { color: #ff9d8f; }
.vm-bind .vm-reset { width: var(--p16); height: var(--p16); }
.vm-bind.changed .vm-reset { visibility: visible; }

/* Заметка: строка со значком. */
.vm-note { display: flex; gap: var(--p6); align-items: flex-start; margin-top: var(--p8); padding: var(--p4) var(--p6); color: var(--ui-muted);
  background: var(--ui-well); box-shadow: inset var(--px) var(--px) 0 rgba(0, 0, 0, 0.35); }
.vm-note > div { min-width: 0; }
.vm-note b { color: var(--ui-text); }
.vm-note.warn { color: #ffd0c8; background: rgba(120, 30, 20, 0.35); }
.vm-note kbd { height: var(--p11); min-width: var(--p11); padding: 0 var(--p2); }
.vm-now { font-style: normal; color: var(--ui-gold); text-shadow: var(--px) var(--px) 0 var(--ui-gold-ink); }
/* Режим под заголовком паузы — одна строка; полностью — по наведению. */
.vm-pause .vm-note.vm-mode { margin: 0 0 var(--p8); padding: var(--p3) var(--p4); gap: var(--p4); align-items: center; color: var(--ui-faint); }
.vm-note.vm-mode > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-note.vm-mode:hover > div { white-space: normal; }

/* Пусто и «скоро». */
.vm-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--p4); padding: var(--p16) var(--p8) var(--p8); color: var(--ui-muted); }
.vm-empty h4 { margin: var(--p4) 0 0; font: inherit; font-size: var(--p16); line-height: calc(var(--px) * 18); color: var(--ui-text);
  text-shadow: var(--p2) var(--p2) 0 var(--ui-shadow); }
.vm-empty p { margin: 0; max-width: calc(var(--px) * 220); color: var(--ui-faint); }
.vm-tiles { display: flex; flex-wrap: wrap; gap: var(--p2) var(--p8); margin: var(--p6) var(--p2) 0; color: var(--ui-faint); }
.vm-tiles i { display: inline-block; width: var(--p6); height: var(--p6); margin-right: var(--p2); vertical-align: 0; border: var(--px) solid #000; }

/* ------------------------------------------------------------ управление (справка) */
.vm-help { flex-direction: column; width: min(calc(var(--px) * 380), calc(100vw - var(--p16))); max-height: calc(100vh - var(--p16)); overflow: hidden; }
.vm-help .vm-scroll { padding-top: var(--p6); }
.vm-cheat { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--px) * 170), 1fr)); gap: var(--p8) var(--p12); }
.vm-cheat section h3 { margin: 0 0 var(--p3); padding: 0 0 var(--p3); font: inherit; color: var(--ui-gold); box-shadow: inset 0 calc(var(--px) * -1) 0 var(--ui-line);
  text-shadow: var(--px) var(--px) 0 var(--ui-gold-ink); }
.vm-cheat .it { display: flex; align-items: center; justify-content: space-between; gap: var(--p6); min-height: var(--p16); color: var(--ui-muted); }
.vm-cheat .it > span:first-child { color: var(--ui-text); }
.vm-cheat .it .k { display: flex; gap: var(--p2); flex-wrap: wrap; justify-content: flex-end; align-items: center; color: var(--ui-faint); }
.vm-help .vm-note { line-height: var(--p12); }
.vm-help-foot { display: flex; flex-wrap: wrap; gap: var(--p4); justify-content: flex-end; padding: var(--p6) var(--p8); box-shadow: inset 0 var(--px) 0 var(--ui-line); }

/* ------------------------------------------------------------ экран приветствия (#help в index.html) */
#help { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: radial-gradient(ellipse at 50% 42%, rgba(8, 7, 6, 0.12), rgba(8, 7, 6, 0.6)); }
/* Мир за приветствием — снимок кадра (ui/menu.js freeze, как у меню паузы), без backdrop-filter по живому миру:
   до снимка — затемнение; снимок лежит под интерфейсом (z-index -1 внутри #help). */
#help.freezing { background: rgba(8, 7, 6, 0.6); }
#help .vm-snap { display: none; }
/* Загрузка без прыжков (index.html): до пиксельного шрифта карточка скрыта; место под иконки есть сразу (заглушка
   .vm-ic без рисунка — ui/menu.js подставит иконку). */
#help.wait .vm-welcome { display: none; }
#help [data-icon].vm-ic { background: none; }
#help.snap .vm-snap { display: block; }
#help .vm-welcome { cursor: default; width: min(calc(var(--px) * 200), calc(100vw - var(--p16))); display: flex; flex-direction: column;
  align-items: stretch; gap: var(--p6); animation: vm-pop 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
#help .logo { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: var(--p16); }
#help .logo .vm-pix, #help .logo b { font-size: calc(var(--px) * 32); line-height: calc(var(--px) * 36); font-weight: 700;
  /* Объём логотипа: камень под белыми буквами — выдавлено, как вывеска. */
  text-shadow: 0 var(--p3) 0 #8a8174, 0 var(--p6) 0 #4f4840, var(--p3) calc(var(--px) * 9) 0 rgba(0, 0, 0, 0.45); }
/* Подзаголовок — жёлтая «вспышка» наискосок, как у Minecraft. */
#help .logo p { position: absolute; right: calc(var(--px) * -14); bottom: calc(var(--px) * -10); margin: 0; color: #ffff55;
  text-shadow: var(--px) var(--px) 0 #3f3f15; transform: rotate(-10deg); animation: vm-splash 0.6s ease-in-out infinite alternate; white-space: nowrap; }
@keyframes vm-splash { to { transform: rotate(-10deg) scale(1.07); } }
#help .play { display: flex; align-items: center; gap: var(--p6); min-height: calc(var(--px) * 30); cursor: pointer;
  font-size: var(--p16); line-height: calc(var(--px) * 18); text-shadow: var(--p2) var(--p2) 0 var(--ui-grass-ink); }
#help .play .vm-ic { margin-top: calc(var(--px) * -2); }
#help .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--p4); }
#help .row button { justify-content: center; gap: var(--p4); padding: 0 var(--p4); }
/* «Играть в полном экране» — тихий переключатель под кнопками: значок, подпись, состояние. */
#help .fs { display: flex; align-items: center; justify-content: center; gap: var(--p4); align-self: center; min-height: var(--p16);
  padding: 0 var(--p4); background: transparent; border: var(--px) solid transparent; color: var(--ui-muted); cursor: pointer; }
#help .fs:hover, #help .fs:focus-visible { color: #fff; outline: var(--px) solid var(--ui-gold); outline-offset: 0; background: rgba(0, 0, 0, 0.25); }
#help .fs:disabled { opacity: 0.45; cursor: default; outline: none; }
#help .fs .vm-ic { transform: scale(0.75); margin: 0 calc(var(--px) * -2); }
#help em { font-style: normal; padding: 0 var(--p2); color: var(--ui-faint); background: rgba(0, 0, 0, 0.35); }
#help em.on { color: #fff; background: var(--ui-grass); text-shadow: var(--px) var(--px) 0 var(--ui-grass-ink); }
/* Первый запуск: четыре главные клавиши и строка режима. */
#help .keys { display: none; grid-template-columns: auto auto; justify-content: center; align-self: center; width: max-content; max-width: calc(100vw - var(--p16));
  gap: var(--p3) var(--p12); margin-top: var(--p6); color: var(--ui-muted); white-space: nowrap; }
#help.first .keys { display: grid; }
#help .keys div { display: flex; align-items: center; gap: var(--p4); }
#help .keys span { display: flex; gap: var(--px); order: -1; }
#help .tip { display: none; align-self: center; width: max-content; max-width: min(calc(var(--px) * 290), calc(100vw - var(--p16)));
  margin: var(--p2) 0 0; color: var(--ui-faint); text-align: center; }
#help.first .tip { display: block; }

/* ------------------------------------------------------------ отладочный экран F3 (ui/debug_overlay.js) */
#hud:empty { display: none; }
#hud { font-family: var(--font) !important; font-size: var(--p8) !important; line-height: var(--p11) !important; border-radius: 0 !important;
  background: rgba(70, 14, 10, 0.86) !important; text-shadow: var(--px) var(--px) 0 #000; z-index: 45; }
/* Столбцы не шире своего места и переносят длинные строки; узко — правый уходит вниз, к правому краю. */
#f3 { position: fixed; inset: var(--p4) var(--p4) auto var(--p4); z-index: 30; display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-start; gap: var(--p4) var(--p16); pointer-events: none; }
#f3 .col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--p4); min-width: 0; max-width: calc(var(--px) * 230); }
#f3 .col.r { align-items: flex-end; text-align: right; max-width: calc(var(--px) * 270); margin-left: auto; }
/* Профайлер открыт — график времени кадра есть в нём, здесь не нужен; на небольшом окне правый столбец (мир и рендер)
   уступает место окну профайлера. */
body.prof-open #f3 canvas { display: none !important; }
@media (max-width: 1100px), (max-height: 700px) { body.prof-open #f3 .col.r { display: none; } }
@media (max-height: 700px) { body.prof-open #f3 .x { display: none; } }
/* На паузе (окно от 1280) экран F3 виден поверх размытия, как в Minecraft: меню посередине, столбцы — по бокам. На
   узком окне — под меню, как и в настройках; F3 и Shift+F3 работают и там. */
@media (min-width: 1280px) {
  body:has(.vm-pause.on) #f3 { z-index: 51; }
  body:has(.vm-pause.on) #f3 .col { max-width: calc(50vw - var(--pxm) * 100 - var(--px) * 12); }
}
#f3 .grp { display: flex; flex-direction: column; align-items: inherit; }
#f3 .ln { display: block; padding: 0 var(--p2); background: rgba(16, 15, 14, 0.62); white-space: pre-wrap; color: var(--ui-text); }
#f3 .hd { display: flex; align-items: center; gap: var(--p3); padding: 0 var(--p2); color: var(--g, var(--ui-muted)); background: rgba(16, 15, 14, 0.62); }
#f3 .hd::before { content: ""; width: var(--p4); height: var(--p4); background: var(--g); box-shadow: var(--px) var(--px) 0 rgba(0, 0, 0, 0.5); }
#f3 .col.r .hd { flex-direction: row-reverse; }
#f3 .k { color: #a59e92; }
#f3 .hi { color: var(--g, var(--ui-gold)); }
#f3 .warn { color: var(--ui-red); }
#f3 .big { font-size: var(--p16); line-height: calc(var(--px) * 18); text-shadow: var(--p2) var(--p2) 0 var(--ui-shadow); }
#f3 .fps { display: flex; align-items: baseline; gap: var(--p4); padding: var(--px) var(--p3) 0 var(--p2); background: rgba(16, 15, 14, 0.62); }
#f3 .fps .u { color: var(--ui-muted); }
#f3 canvas { display: block; image-rendering: pixelated; background: rgba(16, 15, 14, 0.62); }
#f3 .foot { color: var(--ui-faint); padding: 0 var(--p2); background: rgba(16, 15, 14, 0.45); }
#f3.brief .col.r { display: none; }

/* ------------------------------------------------------------ профайлер (web/profiler.js), Shift+F3 */
#prof { box-sizing: border-box; position: fixed; left: var(--p4); bottom: var(--p4); right: auto; top: auto; z-index: 60; width: min(calc(var(--px) * 200), calc(100vw - var(--p8)));
  /* Ниже столбцов F3 над ним (--f3-h — ui/debug_overlay.js); совсем мало места — не меньше заголовка, графика и кнопок. */
  max-height: calc(100vh - var(--f3-h, 0px) - var(--p8)); min-height: min(calc(var(--px) * 140), calc(100vh - var(--p8)));
  padding: var(--p6); display: none; flex-direction: column; gap: var(--p4);
  overflow: hidden; border-radius: 0; color: var(--ui-text); }
/* На паузе — в поле слева от карточки меню. */
body:has(.vm-pause.on) #prof { width: max(calc(var(--px) * 120), min(calc(var(--px) * 200), calc(50vw - var(--pxm) * 100 - var(--px) * 12))); }
#prof .ph { display: flex; align-items: center; gap: var(--p4); }
#prof .ph b { flex: 1; color: var(--ui-gold); text-shadow: var(--px) var(--px) 0 var(--ui-gold-ink); }
#prof .ph small { color: var(--ui-faint); font-size: inherit; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#prof .fpsrow { display: flex; align-items: baseline; gap: var(--p4); flex-wrap: wrap; }
#prof .fpsrow .big { font-size: var(--p16); line-height: calc(var(--px) * 18); text-shadow: var(--p2) var(--p2) 0 var(--ui-shadow); }
#prof .fpsrow .u { color: var(--ui-muted); }
#prof .fpsrow .k { color: var(--ui-faint); }
#prof canvas { display: block; width: 100%; image-rendering: pixelated; background: #12100e; border: var(--px) solid #000; }
#prof .legend { display: flex; flex-wrap: wrap; gap: 0 var(--p8); color: var(--ui-faint); }
#prof .legend i { display: inline-block; width: var(--p4); height: var(--p4); margin-right: var(--p2); }
#prof .scroll { overflow: auto; min-height: 0; flex: 1; scrollbar-width: thin; scrollbar-color: #57514a transparent; padding-right: var(--p2); }
#prof h4 { display: flex; justify-content: space-between; margin: var(--p6) 0 var(--p2); padding-bottom: var(--px); font: inherit; color: var(--ui-gold);
  box-shadow: inset 0 calc(var(--px) * -1) 0 var(--ui-line); text-shadow: var(--px) var(--px) 0 var(--ui-gold-ink); }
#prof h4 span { color: var(--ui-faint); text-shadow: inherit; }
#prof h4:first-child { margin-top: 0; }
#prof .bar { display: grid; grid-template-columns: calc(var(--px) * 50) 1fr calc(var(--px) * 34); align-items: center; gap: var(--p4); min-height: var(--p11); }
#prof .bar > span:first-child { color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#prof .bar .track { height: var(--p4); background: rgba(255, 255, 255, 0.07); }
#prof .bar .track i { display: block; height: 100%; background: var(--c, var(--ui-blue)); }
#prof .bar > span:last-child { text-align: right; }
#prof pre { margin: var(--p2) 0 0; font: inherit; white-space: pre-wrap; color: var(--ui-muted); }
#prof .row { display: flex; flex-wrap: wrap; gap: var(--p4); }
#prof .row button { flex: 1; justify-content: center; min-height: var(--p16); color: var(--ui-text); }

/* ------------------------------------------------------------ подпись лицензии (index.html #credit)
   Тихая, пиксельным шрифтом, только на экране приветствия и на паузе (в игре не мешает хотбару). */
#credit { display: none; position: fixed; right: var(--p4); bottom: var(--p3); left: auto; z-index: 41; max-width: calc(100vw - var(--p8));
  font-family: var(--font); font-size: var(--p8); line-height: var(--p11); color: rgba(244, 239, 230, 0.5); text-align: right;
  text-shadow: var(--px) var(--px) 0 rgba(0, 0, 0, 0.5); pointer-events: none; --px: var(--px-dbg, 2px);
  --p3: calc(var(--px) * 3); --p4: calc(var(--px) * 4); --p8: calc(var(--px) * 8); --p11: calc(var(--px) * 11); }
body:has(#help:not([style*="none"])) #credit { display: block; }
@media (min-width: 1200px) and (min-height: 700px) { body:has(.vm-pause.on) #credit { display: block; z-index: 51; } }

/* ------------------------------------------------------------ сообщение */
#toast { top: var(--p8) !important; padding: var(--p3) var(--p6) !important; border-radius: 0 !important; z-index: 70;
  background: var(--ui-panel) !important; border: var(--px) solid #000; font-family: var(--font) !important; font-size: var(--p8) !important;
  line-height: var(--p11); box-shadow: inset var(--px) var(--px) 0 var(--ui-edge-hi), 0 var(--p2) 0 rgba(0, 0, 0, 0.3); }

/* ------------------------------------------------------------ узкие окна */
@media (max-width: 760px), (max-height: 520px) {
  .vm-settings { flex-direction: column; }
  .vm-side { width: auto; flex-direction: row; align-items: center; padding: var(--p3) var(--p4); gap: var(--p4); box-shadow: inset 0 calc(var(--px) * -1) 0 var(--ui-line); }
  .vm-side .vm-brand { padding: 0 var(--p2); }
  .vm-side .vm-brand .vm-pix { display: none; }
  .vm-tabs { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .vm-tab { width: auto; flex: none; }
  .vm-tab small { display: none; }
  .vm-side-foot { display: none; }
  .vm-top { padding: var(--p3) var(--p4) var(--p3) var(--p6); }
  .vm-top h2 { font-size: var(--p8); line-height: var(--p11); }
  .vm-scroll { padding: var(--p2) var(--p4) var(--p8); }
  .vm-presets { gap: var(--p2); }
  .vm-preset .vm-meters, .vm-preset .sub { display: none; }
  .vm-pause { padding: var(--p8); }
  .vm-head { margin-bottom: var(--p4); }
  .vm-quick { margin-top: var(--p4); padding-top: var(--p4); }
  #help .logo { margin-bottom: var(--p8); }
}
@media (max-height: 680px) {
  .vm-pause { padding: var(--p8) var(--p12) var(--p8); }
  .vm-head { margin-bottom: var(--p4); }
  .vm-pause .vm-note.vm-mode { margin-bottom: var(--p4); }
  .vm-btns { gap: var(--p3); }
  .vm-btns .vm-btn.primary { margin-bottom: var(--p2); }
  .vm-quick { margin-top: var(--p6); padding-top: var(--p6); }
}
@media (max-height: 520px) {
  .vm-sub, .vm-pause .vm-note.vm-mode { display: none; }
  .vm-btn { min-height: var(--p16); }
  .vm-btn.primary { min-height: calc(var(--px) * 22); }
}
@media (max-width: 600px) {
  .vm-row { grid-template-columns: minmax(0, 1fr) var(--p16); }
  .vm-row-ctl { grid-column: 1 / 2; grid-row: 2; margin-top: var(--p2); }
  .vm-row .vm-reset { grid-column: 2; grid-row: 1; }
  .vm-tab span { display: none; }
  .vm-search { width: calc(var(--px) * 60); }
  .vm-preset b { display: none; }
  #help .row { grid-template-columns: 1fr; }
}

/* Compact shared game UI. Structural hierarchy carries emphasis; full-screen
   overlays and ordinary readouts use the same stone/iron materials and type. */
.vm-pause { width: min(340px, calc(100vw - 24px)); padding: 18px; }
.vm-head { align-items: flex-start; gap: 4px; margin-bottom: 12px; }
.vm-head .vm-pix { font-size: 24px; line-height: 28px; text-shadow: 1px 2px #0008; }
.vm-btn { min-height: 32px; border-width: 1px; }
.vm-btns .vm-btn.primary { min-height: 38px; margin-bottom: 4px; }
.vm-pause .vm-note.vm-mode { padding: 0; margin-bottom: 12px; background: none; box-shadow: none; font-size: var(--ui-small); }
.vm-pause .vm-note.vm-mode > .vm-ic { display: none; }
.vm-secondary { margin-top: 10px; border-top: 1px solid var(--ui-line); }
.vm-secondary summary { padding: 9px 0; color: var(--ui-muted); cursor: pointer; }
.vm-secondary summary:hover, .vm-secondary summary:focus-visible { color: var(--ui-text); }
.vm-secondary .vm-btns { padding-bottom: 4px; }
.vm-quick { margin-top: 10px; padding-top: 10px; gap: 6px; }
.vm-qlive .n { font-size: 14px; line-height: 18px; text-shadow: inherit; }
.vm-qlive [data-qline] { font-size: var(--ui-small); line-height: var(--ui-leading); }
.vm-settings { width: min(820px, calc(100vw - 32px)); height: min(600px, calc(100vh - 32px)); }
.vm-side { width: 172px; }
.vm-top h2 { font-size: 20px; line-height: 24px; text-shadow: inherit; }
.vm-top { padding: 10px 12px; }
.vm-row { min-height: 36px; }
.vm-help { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
#help .vm-welcome { width: min(340px, calc(100vw - 32px)); gap: 8px; }
#help .logo { margin: 0 0 18px; }
#help .logo .vm-pix, #help .logo b { font-size: 38px; line-height: 44px; text-shadow: 2px 3px #0008; }
#help .logo p { position: static; transform: none; font-size: var(--ui-body); line-height: var(--ui-leading); margin: 4px 0 0; color: var(--ui-muted); }
#help .play { min-height: 40px; font-size: 16px; }
#help .row button { min-height: 32px; }
#help .keys { gap: 6px 16px; margin-top: 12px; font-size: var(--ui-small); line-height: var(--ui-leading); }
#help .keys div:nth-child(n+5) { display: none; }
#help .tip { max-width: 340px; font-size: var(--ui-small); line-height: var(--ui-leading); text-align: center; margin: 8px 0 0; }
.voxel-context, .voxel-modal { font-family: var(--font); color: var(--ui-text); text-shadow: 1px 1px #000a; }
.voxel-context { position: fixed; inset: 0; pointer-events: none; z-index: 12; font-size: var(--ui-body); line-height: var(--ui-leading); }
.voxel-inspection { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: max-content;
  max-width: min(360px, 52vw); padding: 6px 10px; border: 1px solid #10120f; background: var(--ui-panel);
  box-shadow: inset 0 1px #69705f, 0 2px #0005; text-align: center; overflow-wrap: anywhere; }
.voxel-inspection strong { display: block; font-size: var(--ui-body); font-weight: 400; color: var(--ui-text); }
.voxel-inspection > div { white-space: pre-line; color: var(--ui-muted); font-size: var(--ui-small); line-height: var(--ui-leading); }
.voxel-context-details { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; overflow-wrap: anywhere; }
.voxel-context-hints { white-space: pre-line; color: var(--ui-text); font-size: var(--ui-body); line-height: var(--ui-leading); }
.voxel-gear { padding: 6px 8px; background: var(--ui-panel); border: 1px solid #10120f; box-shadow: inset 0 1px #69705f; }
.voxel-gear > div:first-child { white-space: pre-line; }
.voxel-fuel { height: 3px; margin-top: 5px; background: #10120f; }
.voxel-fuel i { display: block; height: 100%; background: var(--ui-gold); }
.voxel-fuel.low i { background: #da8d74; }
.voxel-zoom-edge { position: absolute; inset: 0; background: radial-gradient(ellipse, transparent 60%, #10150c88 100%); opacity: 0; }
.voxel-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: #10120f88; }
.voxel-activities { width: min(calc(336px * var(--ui-overlay)), calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box;
  padding: 14px; background: var(--ui-panel); border: 1px solid #10120f; box-shadow: inset 0 1px #69705f, 0 3px #0006; }
.voxel-activities header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.voxel-activities h2 { margin: 0; font-size: calc(18px * var(--ui-overlay)); line-height: var(--ui-leading); font-weight: 400; }
.voxel-activity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.voxel-action, .voxel-dismiss { border: 1px solid #10120f; border-radius: 0; font: inherit; color: inherit; cursor: pointer; }
.voxel-action { padding: 9px 8px; font-size: var(--ui-body); line-height: var(--ui-leading); background: var(--ui-btn); box-shadow: inset 0 1px var(--ui-btn-hi), inset 0 -2px var(--ui-btn-lo); }
.voxel-action.wide { grid-column: 1 / -1; }
.voxel-action:hover, .voxel-action:focus-visible, .voxel-dismiss:focus-visible { background: var(--ui-btn-hover); outline: 1px solid var(--ui-gold); outline-offset: 1px; }
.voxel-dismiss { font-size: var(--ui-small); padding: 4px 6px; color: var(--ui-muted); background: #10120f88; }
.voxel-activities p { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--ui-line); font-size: var(--ui-small); line-height: var(--ui-leading); color: var(--ui-muted); }
.voxel-skins > p { font-size: var(--ui-body); line-height: var(--ui-leading); color: var(--ui-muted); }
.voxel-skins-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.voxel-skins-actions .vm-textbtn { min-height: 30px; font-size: var(--ui-body); }
.voxel-skins-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.voxel-skin { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 8px 4px;
  background: var(--ui-well); border: 1px solid #10120f; }
.voxel-skin canvas { width: 40px; height: 40px; image-rendering: pixelated; background: #69705f; }
.voxel-skin > span { width: 100%; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ui-small); }
.voxel-skin-order { display: flex; gap: 6px; }
.voxel-skin-order button { width: 28px; height: 24px; border: 1px solid #10120f; background: var(--ui-btn); color: var(--ui-text); cursor: pointer; }
.voxel-skin-order button:disabled { opacity: .35; cursor: default; }
@media (max-width: 600px) {
  .vm-settings, .vm-help { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .vm-side { width: 48px; }
  .voxel-inspection { max-width: 70vw; }
}