/* Новый вид интерфейса (v2, 28.10, Антон: «вау» на макеты porubezhye/design/ui-mockups/v2).
   Включается ссылкой ?ui=v2 (запоминается в браузере), выключается ?ui=old — как ?render=pixi.
   Всё здесь — только под :root[data-ui="v2"]: без флага игра выглядит как раньше.
   Вид один (тёмный), поэтому index.html при флаге ставит ночную тему, а переключатель темы прячем.
   Палитра — от карты Kimi: тёмная хвоя, олива, приглушённое золото; окна — дерево с зерном,
   двойная золотая рама с узлами по углам, кнопки — таблички со срезанными углами.
   Часть 1: цвета и общий набор. Часть 2: верхняя строка, кнопка хода, плашка отряда. */

:root[data-ui="v2"] {
  color-scheme: dark;
  --bg: #0e1411;
  --bg-2: #141b17;
  --panel: #18201c;
  --panel-2: #202a25;
  --panel-3: #0e1411;
  --panel-hi: #2a352f;
  --line: #3b4740;
  --line-2: #86672f;
  --line-soft: #26302a;
  --panel-rgb: 24 32 28;
  --panel-3-rgb: 14 20 17;
  --overlay-rgb: 20 27 23;
  --shade-rgb: 8 12 10;
  --text: #f0e7cf;
  --muted: #bdb9a0;
  --dim: #8f907c;
  --sand: #c9a25a;
  --sand-dim: #86672f;
  --gold: #c9a25a;
  --gold-hi: #ecd393;
  --on-gold: #22180a;
  --danger: #a5452e;
  --danger-text: #e88a70;
  --danger-line: #8a3a26;
  --danger-bg: #3a1a12;
  --danger-bg-hover: #4a2216;
  --calm: #a9c76a;
  --calm-text: #b9d47e;
  --sci: #8cc3dc;
  --sci-bg: #1d3a44;
  --food: #a9c76a;
  --prod: #e0a060;
  --coin: #e2bd5a;
  --learned-bg: #2f3524;
  --town-glow: #34413a;
  --town-glow-2: #202a25;
  --btn-bg: var(--grain), linear-gradient(180deg, #34413a, #202a25);
  --btn-bg-hover: var(--grain), linear-gradient(180deg, #3d4b43, #26312b);
  --btn-line: #86672f;
  --primary-bg: linear-gradient(180deg, #f3dc9c, #d3ad62 48%, #a9823e 52%, #c79d55);
  --primary-bg-hover: linear-gradient(180deg, #f8e6b0, #dcb86c 48%, #b38c46 52%, #d2a85e);
  --primary-fg: #22180a;
  --primary-line: #ecd393;
  --primary-shadow: inset 0 0 0 1px rgba(255,236,180,.7), inset 0 0 0 3px rgba(120,86,30,.55), inset 0 -3px 0 rgba(90,60,20,.45);
  --attention-glow: var(--primary-shadow), 0 0 16px rgba(236,211,147,.55);
  --shadow: #000c;
  --shadow-soft: #0009;
  --scrim: #0008;
  --home-title: #ecd393;
  --home-text: #f0e7cf;
  --home-text-2: #d8d3bb;
  --home-link: #d8d3bb;
  --map-void: #141d17;
  --map-fog: rgba(20, 29, 23, 0.46);
  --top-line: var(--gold);
  --topbar-bg: var(--grain), linear-gradient(180deg, #2a352f, #202a25 45%, #18201c);
  --badge-bg: var(--gold);
  --badge-fg: #1a1205;
  --unit-bg: radial-gradient(ellipse 60% 22% at 50% 86%, #b5402a 0 70%, #6e1d10 72% 100%, transparent 101%), radial-gradient(circle at 50% 35%, #34413a, #0e1411);
  --ring: var(--sand-dim);
  --ring-on: 0 0 0 3px var(--gold-hi), 0 0 14px 2px rgba(236,211,147,.6);
  --r: 8px;

  /* зерно дерева и бумаги, узлы по углам рамы (четыре поворота одного узла) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .7 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --knot-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' stroke='%23c9a25a' stroke-width='1.4'%3E%3Cpath d='M1 11V1h10'/%3E%3Cpath d='M5 9V5h4'/%3E%3Crect x='6.5' y='6.5' width='4' height='4' transform='rotate(45 8.5 8.5)' fill='%23c9a25a'/%3E%3C/g%3E%3C/svg%3E");
  --knot-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg transform='translate(22 0) scale(-1 1)' fill='none' stroke='%23c9a25a' stroke-width='1.4'%3E%3Cpath d='M1 11V1h10'/%3E%3Cpath d='M5 9V5h4'/%3E%3Crect x='6.5' y='6.5' width='4' height='4' transform='rotate(45 8.5 8.5)' fill='%23c9a25a'/%3E%3C/g%3E%3C/svg%3E");
  --knot-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg transform='translate(0 22) scale(1 -1)' fill='none' stroke='%23c9a25a' stroke-width='1.4'%3E%3Cpath d='M1 11V1h10'/%3E%3Cpath d='M5 9V5h4'/%3E%3Crect x='6.5' y='6.5' width='4' height='4' transform='rotate(45 8.5 8.5)' fill='%23c9a25a'/%3E%3C/g%3E%3C/svg%3E");
  --knot-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg transform='translate(22 22) scale(-1 -1)' fill='none' stroke='%23c9a25a' stroke-width='1.4'%3E%3Cpath d='M1 11V1h10'/%3E%3Cpath d='M5 9V5h4'/%3E%3Crect x='6.5' y='6.5' width='4' height='4' transform='rotate(45 8.5 8.5)' fill='%23c9a25a'/%3E%3C/g%3E%3C/svg%3E");
  /* окно-вещь: узлы, зерно, дерево; рама — тенями (--frame-sh) */
  --wood: var(--knot-tl) 5px 5px / 22px no-repeat, var(--knot-tr) right 5px top 5px / 22px no-repeat,
          var(--knot-bl) left 5px bottom 5px / 22px no-repeat, var(--knot-br) right 5px bottom 5px / 22px no-repeat,
          var(--grain), linear-gradient(180deg, #2a352f, #202a25 40%, #18201c);
  --wood-plain: var(--grain), linear-gradient(180deg, #2a352f, #202a25 40%, #18201c);
  --frame-sh: inset 0 0 0 3px rgba(14,20,17,.85), inset 0 0 0 4px rgba(201,162,90,.4), 0 12px 34px rgba(0,0,0,.6);
  --slot-bg: rgba(8,12,10,.55);
  --slot-sh: inset 0 2px 7px rgba(0,0,0,.7), inset 0 0 0 1px rgba(201,162,90,.16);
  --chamfer: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

/* Один вид — переключатель дня и ночи не нужен. */
:root[data-ui="v2"] [data-theme-toggle] { display: none !important; }
:root[data-ui="v2"] body { background: var(--bg) var(--grain); }

/* ── Часть 1. Общий набор ────────────────────────────────────────────── */

/* Таблички: деревянная — обычная, золотая — главная, красная — опасная. */
:root[data-ui="v2"] .btn:not(.btn-icon) {
  border: 0; border-radius: 0; clip-path: var(--chamfer);
  background: var(--btn-bg); color: var(--gold-hi); text-shadow: 0 1px 0 rgba(0,0,0,.6);
  box-shadow: inset 0 0 0 1px var(--gold-lo, #86672f), inset 0 0 0 3px rgba(0,0,0,.35);
  min-height: 34px; padding: 4px 14px;
}
:root[data-ui="v2"] .btn:not(.btn-icon):hover:not(:disabled) { background: var(--btn-bg-hover); }
:root[data-ui="v2"] .btn-primary:not(.btn-icon),
:root[data-ui="v2"] #btn-end-turn.btn-attention {
  background: var(--primary-bg); color: var(--primary-fg); text-shadow: 0 1px 0 rgba(255,240,200,.55); box-shadow: var(--primary-shadow);
}
:root[data-ui="v2"] .btn-primary:not(.btn-icon):hover:not(:disabled) { background: var(--primary-bg-hover); }
:root[data-ui="v2"] .btn-danger:not(.btn-icon) {
  background: linear-gradient(180deg, #a5452e, #6e2616); color: #ffe3d6; text-shadow: 0 1px 0 rgba(0,0,0,.5);
  box-shadow: inset 0 0 0 1px #d58a6c, inset 0 0 0 3px rgba(0,0,0,.3);
}
:root[data-ui="v2"] .btn-sm { min-height: 30px; padding: 2px 10px; }
:root[data-ui="v2"] .btn:disabled { opacity: 1; filter: grayscale(.8) brightness(.65); }
/* Круглые — медали. */
:root[data-ui="v2"] .btn-icon {
  color: var(--gold-hi); border: 1px solid var(--sand-dim);
  background: radial-gradient(circle at 50% 35%, #34413a, #18201c 75%);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), inset 0 0 0 4px rgba(201,162,90,.35), 0 3px 10px rgba(0,0,0,.5);
}

/* Поля — ниши. */
:root[data-ui="v2"] input[type="text"], :root[data-ui="v2"] input[type="number"], :root[data-ui="v2"] textarea, :root[data-ui="v2"] select {
  background: var(--slot-bg); border: 0; box-shadow: var(--slot-sh); border-radius: 6px;
}

/* Окна: дерево в двойной раме с узлами. */
:root[data-ui="v2"] .modal { background: radial-gradient(ellipse at 50% 40%, rgba(8,12,10,.45), rgba(8,12,10,.8)); }
:root[data-ui="v2"] .modal-box {
  background: var(--wood); border: 1px solid var(--sand-dim); border-radius: 12px; box-shadow: var(--frame-sh);
}
:root[data-ui="v2"] .modal-box h3 { color: var(--gold-hi); }

/* Боковая панель, вкладки, лента событий. */
:root[data-ui="v2"] .side,
:root[data-ui="v2"] .log-wrap { background: var(--wood-plain); }
:root[data-ui="v2"] .side { border-left: 1px solid var(--sand-dim); }
:root[data-ui="v2"] .log-wrap { border-top: 1px solid var(--sand-dim); box-shadow: 0 -3px 0 rgba(201,162,90,.18), 0 -6px 16px rgba(0,0,0,.45); position: relative; z-index: 2; }
:root[data-ui="v2"] .side-head { border-color: rgba(201,162,90,.25); }
:root[data-ui="v2"] .side-title { color: var(--gold); font-size: 16px; }
:root[data-ui="v2"] .tabs { background: transparent; border-bottom: 1px solid var(--sand-dim); }
:root[data-ui="v2"] .tab { background: transparent; border: 0; color: var(--muted); font-size: 16px; position: relative; min-height: 40px; }
:root[data-ui="v2"] .tab.active { color: var(--gold-hi); background: transparent; box-shadow: none; }
:root[data-ui="v2"] .tab.active::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 3px; background: var(--gold); }
:root[data-ui="v2"] .tab.active::before { content: ''; position: absolute; left: 50%; bottom: -3px; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); background: var(--gold); }
:root[data-ui="v2"] .log-row { border-bottom-color: rgba(201,162,90,.1); }
:root[data-ui="v2"] .panel { background: transparent; border-color: rgba(201,162,90,.25); }

/* Плашки поверх карты: подсказка, «Ходит …», игроки, советник, сообщения. */
:root[data-ui="v2"] .banner, :root[data-ui="v2"] .legend, :root[data-ui="v2"] .advisor, :root[data-ui="v2"] .menu-pop {
  background: var(--wood-plain); border: 1px solid var(--sand-dim); border-radius: 10px; box-shadow: var(--frame-sh);
}
:root[data-ui="v2"] .banner { color: var(--gold-hi); border-left-width: 1px; }
:root[data-ui="v2"] .banner.danger { color: var(--danger-text); border-color: var(--danger-line); }
:root[data-ui="v2"] .advisor { background: var(--wood); padding: 12px 14px; }
:root[data-ui="v2"] .advisor-who { color: var(--gold-hi); font-size: 18px; }
:root[data-ui="v2"] .map-hint { background: rgba(14,20,17,.82); border-color: rgba(201,162,90,.3); border-radius: 8px; }
:root[data-ui="v2"] .toast { border-radius: 10px; box-shadow: var(--frame-sh); }
:root[data-ui="v2"] .toast.toast-ok { background: var(--wood-plain); border-color: var(--sand-dim); }

/* Доходы города, значки построек — ниши и золотые ободки. */
:root[data-ui="v2"] .y { background: var(--slot-bg); border: 0; box-shadow: var(--slot-sh); }
:root[data-ui="v2"] .ico-q { box-shadow: 0 0 0 2px var(--sand), 0 0 0 3px #000, 0 3px 8px rgba(0,0,0,.6); }
:root[data-ui="v2"] .ico-q:not(.ico-glyph) { background: radial-gradient(circle at 50% 40%, #39463d, #151c18); }

/* Лист города на телефоне — шторка из дерева. */
:root[data-ui="v2"] .city-sheet { background: var(--wood); border-top: 1px solid var(--sand-dim); border-radius: 14px 14px 0 0; box-shadow: var(--frame-sh); }
:root[data-ui="v2"] .cs-grip i { background: var(--sand-dim); }
:root[data-ui="v2"] .cs-name { color: var(--gold-hi); }
:root[data-ui="v2"] .cs-h { color: var(--gold); display: flex; align-items: center; gap: 10px; }
:root[data-ui="v2"] .cs-h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--sand-dim), transparent); }
:root[data-ui="v2"] .cs-income { background: var(--slot-bg); border: 0; box-shadow: var(--slot-sh); }

/* ── Часть 2. Верхняя строка, кнопка хода, плашка отряда ────────────────── */

/* Строка — тёмное дерево с золотой кромкой и пунктиром-вышивкой под ней. */
:root[data-ui="v2"] .topbar {
  background: var(--topbar-bg); border-bottom: 1px solid var(--sand-dim);
  box-shadow: 0 1px 0 rgba(0,0,0,.6), 0 3px 0 rgba(201,162,90,.22), 0 6px 16px rgba(0,0,0,.5);
}
:root[data-ui="v2"] .match-name { color: var(--text); font-size: 18px; }
/* Ход и год — как надпись, без рамки. */
:root[data-ui="v2"] #game-turn { border: 0; padding: 0 4px; font: 400 16px var(--display); color: var(--gold-hi); }
/* Казна — монеты в нишах. */
:root[data-ui="v2"] .hud {
  border-left: 0; padding: 3px 9px; border-radius: 15px; background: var(--slot-bg); box-shadow: var(--slot-sh); font-size: 14px;
}
:root[data-ui="v2"] .hud-btn:hover, :root[data-ui="v2"] .hud-btn[aria-expanded="true"] { background: rgba(52,44,22,.7); box-shadow: inset 0 0 0 1px var(--gold); }
:root[data-ui="v2"] .ruler-medal { border-color: var(--gold); box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--sand-dim), 0 3px 10px rgba(0,0,0,.6); }

/* Кнопка хода — золотая табличка в правом нижнем углу карты, под большим пальцем. */
:root[data-ui="v2"] #btn-end-turn {
  position: fixed; z-index: 11;
  right: calc(var(--side-w) + 14px + env(safe-area-inset-right, 0px));
  bottom: calc(var(--log-h) + 14px + env(safe-area-inset-bottom, 0px));
  min-height: 52px; padding: 6px 24px; max-width: calc(100vw - 120px);
  font-size: 20px; white-space: normal; line-height: 1.1; --c: 10px;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  background: var(--primary-bg); color: var(--primary-fg); text-shadow: 0 1px 0 rgba(255,240,200,.55); box-shadow: var(--primary-shadow);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.6));
}
:root[data-ui="v2"] #btn-end-turn:disabled { filter: grayscale(.7) brightness(.7) drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
:root[data-ui="v2"] #btn-end-turn.btn-attention { animation: ui2-call 1.8s ease-in-out infinite; }
@keyframes ui2-call { 50% { filter: brightness(1.12) drop-shadow(0 0 10px rgba(236,211,147,.75)); } }
@media (prefers-reduced-motion: reduce) { :root[data-ui="v2"] #btn-end-turn.btn-attention { animation: none; } }

:root[data-ui="v2"] #btn-end-turn, :root[data-ui="v2"] #btn-panel { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
:root[data-ui="v2"] #btn-end-turn:has(.end-sub) { flex-direction: column; gap: 1px; }
:root[data-ui="v2"] #btn-end-turn .end-sub { font-family: var(--ui); font-size: 13px; font-weight: 600; text-shadow: none; opacity: .85; }

/* Плашка выбранного отряда — дерево в раме, приказы — табличками. */
:root[data-ui="v2"] .unit-bar {
  background: var(--wood); border: 1px solid var(--sand-dim); border-radius: 12px; box-shadow: var(--frame-sh);
  padding: 12px 14px 10px; gap: 8px; max-width: 420px;
}
:root[data-ui="v2"] .ub-head b, :root[data-ui="v2"] .ub-name { color: var(--gold-hi); font-size: 21px; border-bottom-color: var(--sand-dim); }
:root[data-ui="v2"] .ub-rank { color: var(--gold-hi); border-color: var(--gold); background: rgba(8,12,10,.5); padding: 1px 8px; }
:root[data-ui="v2"] .ub-acts { gap: 6px; }
:root[data-ui="v2"] .ub-acts .btn { min-height: 40px; }
/* Плашка отряда и игроки — выше кнопки хода. */
:root[data-ui="v2"] .unit-bar { bottom: 78px; }

@media (max-width: 1080px) {
  :root[data-ui="v2"] #btn-end-turn { right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(96px + 12px + env(safe-area-inset-bottom, 0px)); }
  :root[data-ui="v2"] .unit-bar { bottom: 76px; }
  :root[data-ui="v2"] .legend { bottom: 76px; }
  /* Подсказка — слева, место справа — кнопке хода. */
  :root[data-ui="v2"] .map-hint { right: 240px; }
  /* Строка плотнее: казна в три-четыре ниши, без лишних переносов. */
  :root[data-ui="v2"] .topbar-right { gap: 4px; }
  :root[data-ui="v2"] .hud { padding: 2px 7px; font-size: 13px; }
  /* «Панель» — из строки вниз слева, напротив кнопки хода: строка не уходит в третий ряд. */
  :root[data-ui="v2"] #btn-panel {
    position: fixed; z-index: 11; left: calc(12px + env(safe-area-inset-left, 0px)); bottom: calc(96px + 12px + env(safe-area-inset-bottom, 0px));
    min-height: 52px; padding: 4px 18px; font-size: 18px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6));
  }
  :root[data-ui="v2"] #btn-panel[aria-expanded="true"] { background: var(--primary-bg); color: var(--primary-fg); text-shadow: none; box-shadow: var(--primary-shadow); }
}
/* Открытая панель (z 15, до 62% высоты) раньше накрывала «Панель» и «Ход» (z 11): закрыть её было нечем
   (отзывы 15 и 17, 28.10). Пока панель открыта, обе кнопки встают над её верхней кромкой. */
@media (max-width: 1080px) {
  :root[data-ui="v2"]:has(.game.side-open) #btn-end-turn,
  :root[data-ui="v2"]:has(.game.side-open) #btn-panel {
    z-index: 16; bottom: calc(min(62vh, 560px) + 10px); bottom: calc(min(62dvh, 560px) + 10px);
  }
}
/* Лёжа панель почти во всю высоту: поднимаем её дно, кнопки остаются под ней. */
@media (max-width: 1080px) and (max-height: 500px) and (orientation: landscape) {
  :root[data-ui="v2"]:has(.game.side-open) #btn-end-turn,
  :root[data-ui="v2"]:has(.game.side-open) #btn-panel { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  :root[data-ui="v2"] .game.side-open .side { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); height: calc(100vh - 48px - 60px - env(safe-area-inset-bottom, 0px)); }
}
/* Лента на телефоне: заголовок в одну строку, кнопки летописи — помельче. */
@media (max-width: 1080px) {
  :root[data-ui="v2"] .log-wrap .side-title { white-space: nowrap; }
  :root[data-ui="v2"] .log-wrap .side-head .btn-sm { min-height: 30px; padding: 2px 10px; font-size: 14px; }
}
@media (max-width: 480px) { :root[data-ui="v2"] .log-wrap .side-head .tiny { display: none; } }
/* Узкий телефон: прирост к казне прячем, чтобы строка не уходила в третий ряд. */
@media (max-width: 419px) {
  :root[data-ui="v2"] .hud-delta { display: none; }
  :root[data-ui="v2"] #game-turn { font-size: 14px; padding: 0 2px; }
  :root[data-ui="v2"] .hud { padding: 2px 6px; gap: 3px; }
}
/* На узком телефоне подсказке нет места рядом с кнопкой хода; то же объясняет советник. */
@media (max-width: 480px) { :root[data-ui="v2"] .map-hint { display: none; } }
@media (max-width: 1080px) and (max-height: 500px) and (orientation: landscape) {
  :root[data-ui="v2"] #btn-end-turn, :root[data-ui="v2"] #btn-panel { min-height: 44px; font-size: 17px; padding: 4px 18px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  /* Лента здесь — колонкой справа: кнопка хода встаёт у правого края карты, а не на ленту. */
  :root[data-ui="v2"] #btn-end-turn { right: calc(clamp(190px, 28vw, 280px) + 10px + env(safe-area-inset-right, 0px)); max-width: calc(100vw - clamp(190px, 28vw, 280px) - 140px); }
  :root[data-ui="v2"] .unit-bar { bottom: 62px; }
  :root[data-ui="v2"] .legend { bottom: 62px; }
}

/* ── Часть 6а. Главная (макет v2/4-glavnaya.html) ────────────────────────
   Строка — дерево с золотой кромкой; карточка хода — дерево в раме, карта окном сверху,
   правитель и название лежат на её нижнем крае; заголовки разделов — золотом с линией;
   партии и столы — ниши; Зал славы — пергамент. Разметка прежняя. */
:root[data-ui="v2"] .hq { background: var(--bg) var(--grain); }
:root[data-ui="v2"] .hq-top {
  background: var(--topbar-bg); backdrop-filter: none; border-bottom: 1px solid var(--sand-dim);
  box-shadow: 0 3px 0 rgba(201,162,90,.2), 0 6px 16px rgba(0,0,0,.5);
}
:root[data-ui="v2"] .hq-brand { font-size: 28px; color: var(--gold-hi); text-shadow: 0 2px 4px #000; }
:root[data-ui="v2"] .hq .home-bell {
  color: var(--gold-hi); border: 1px solid var(--sand-dim); backdrop-filter: none;
  background: radial-gradient(circle at 50% 35%, #34413a, #18201c 75%);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), inset 0 0 0 4px rgba(201,162,90,.35), 0 3px 10px rgba(0,0,0,.5);
}
:root[data-ui="v2"] .hq .menu-user summary {
  border: 0; border-radius: 0; clip-path: var(--chamfer); background: var(--btn-bg); color: var(--gold-hi);
  box-shadow: inset 0 0 0 1px var(--sand-dim), inset 0 0 0 3px rgba(0,0,0,.35); font-family: var(--display); font-size: 17px;
}

/* Карточки — дерево в раме. */
:root[data-ui="v2"] .hq-card { background: var(--wood); border: 1px solid var(--sand-dim); border-radius: 12px; box-shadow: var(--frame-sh); padding: 14px 16px 16px; gap: 12px; }
:root[data-ui="v2"] .hq-card.is-turn { box-shadow: var(--frame-sh); }
/* Окно-карта: выше, книзу темнеет в дерево; правитель с названием ложится на её край. */
:root[data-ui="v2"] .hq-window {
  height: 190px; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(201,162,90,.45), inset 0 2px 10px rgba(0,0,0,.7);
}
:root[data-ui="v2"] .hq-window::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(14,20,17,0) 45%, rgba(24,32,28,.92) 100%);
}
:root[data-ui="v2"] .hq-window span {
  z-index: 1; left: 10px; top: 10px; bottom: auto; padding: 2px 10px; border-radius: 0; clip-path: var(--chamfer);
  background: var(--primary-bg); color: var(--primary-fg); font: 13px var(--ui); box-shadow: var(--primary-shadow);
}
:root[data-ui="v2"] .hq-window + .hq-head { position: relative; z-index: 1; margin-top: -62px; padding: 0 4px; }
:root[data-ui="v2"] .hq-window + .hq-head .hq-who { text-shadow: 0 2px 6px #000; }
@media (min-width: 900px) { :root[data-ui="v2"] .hq-window { height: 280px; } }

:root[data-ui="v2"] .hq-port {
  border: 2px solid var(--gold); background: var(--panel-2);
  box-shadow: 0 0 0 2px #0e1411, 0 0 0 3px var(--sand-dim), 0 4px 10px rgba(0,0,0,.7);
}
:root[data-ui="v2"] .hq-port.sm { border-width: 2px; }
:root[data-ui="v2"] .hq-port.is-calm { border-color: var(--sand-dim); }
:root[data-ui="v2"] .hq-kick { color: var(--gold-hi); }
:root[data-ui="v2"] .hq-title { font-size: 21px; color: var(--text); }
:root[data-ui="v2"] .hq-line { border-left-color: var(--gold); }

/* Таблички. */
:root[data-ui="v2"] .hq-gold {
  border: 0; border-radius: 0; clip-path: var(--chamfer);
  background: var(--primary-bg); color: var(--primary-fg); box-shadow: var(--primary-shadow); text-shadow: 0 1px 0 rgba(255,240,200,.55);
}
:root[data-ui="v2"] .hq-gold:hover:not(:disabled) { background: var(--primary-bg-hover); }
:root[data-ui="v2"] .hq-ghost {
  border: 0; border-radius: 0; clip-path: var(--chamfer); min-height: 50px;
  background: var(--btn-bg); color: var(--gold-hi); text-shadow: 0 1px 0 rgba(0,0,0,.6);
  box-shadow: inset 0 0 0 1px var(--sand-dim), inset 0 0 0 3px rgba(0,0,0,.35);
}
:root[data-ui="v2"] .hq-ghost:hover { background: var(--btn-bg-hover); color: var(--gold-hi); }
:root[data-ui="v2"] .hq-friend-call {
  border: 0; border-radius: 0; clip-path: var(--chamfer); padding: 3px 10px;
  background: var(--btn-bg); color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--sand-dim);
}

/* Заголовки разделов — золотом, с линией до края. */
:root[data-ui="v2"] .hq-h2 {
  display: flex; align-items: center; gap: 10px;
  font: 400 21px var(--display); letter-spacing: 0; text-transform: none; color: var(--gold);
}
:root[data-ui="v2"] .hq-h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--sand-dim), transparent); }

/* Партии и столы — ниши. */
:root[data-ui="v2"] .hq-list { gap: 8px; }
:root[data-ui="v2"] .hq-list > li { border-top: 0; }
:root[data-ui="v2"] .hq-row, :root[data-ui="v2"] .hq-list > li.hq-row {
  padding: 8px 12px; border-radius: 8px; background: var(--slot-bg); box-shadow: var(--slot-sh);
}
:root[data-ui="v2"] .hq-row:hover:not(.is-static) { box-shadow: var(--slot-sh), inset 0 0 0 1px var(--sand-dim); }
:root[data-ui="v2"] .hq-row-name { color: var(--gold-hi); }
:root[data-ui="v2"] .hq-row.is-wait .hq-row-name { color: var(--text); }
:root[data-ui="v2"] .hq-ok { color: var(--gold-hi); }
:root[data-ui="v2"] .hq-friend-face.is-add { border-color: var(--gold); color: var(--gold-hi); }

/* Зал славы — пергамент. */
:root[data-ui="v2"] .hq-sect-glory {
  padding: 14px; border-radius: 4px; color: #2b2217;
  background: var(--paper), linear-gradient(180deg, #ebdfc0, #ddcfaa);
  box-shadow: 0 4px 12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(120,90,40,.35);
}
:root[data-ui="v2"] .hq-sect-glory .hq-h2 { color: #8e2a17; }
:root[data-ui="v2"] .hq-sect-glory .hq-h2::after { background: linear-gradient(90deg, rgba(142,42,23,.5), transparent); }
:root[data-ui="v2"] .hq-sect-glory .hq-row-name { color: #8e2a17; }
:root[data-ui="v2"] .hq-sect-glory .hq-row-sub, :root[data-ui="v2"] .hq-sect-glory .hq-note, :root[data-ui="v2"] .hq-sect-glory .hq-kind { color: #5d4e32; }
:root[data-ui="v2"] .hq-sect-glory .hq-glory-item img { border: 0; border-radius: 3px; box-shadow: 0 0 0 1px rgba(90,60,20,.6); }
:root[data-ui="v2"] .hq-sect-glory .hq-glory-item:hover .hq-row-name { color: #5d1a0c; }
:root[data-ui="v2"] .hq-sect-glory .hq-more { color: #8e2a17; }

:root[data-ui="v2"] .hq-rank b { color: var(--gold-hi); }
:root[data-ui="v2"] .hq-links a, :root[data-ui="v2"] .hq-links button { color: var(--gold-hi); }
:root[data-ui="v2"] .hq-links a:hover, :root[data-ui="v2"] .hq-links button:hover { color: var(--text); }
:root[data-ui="v2"] .hq-sticky { background: linear-gradient(180deg, rgba(14,20,17,0), var(--bg) 35%); }

/* Шторки главной («Новая партия», «Все партии») — дерево в раме. */
:root[data-ui="v2"] .hq .sheet { background: var(--wood); border: 1px solid var(--sand-dim); box-shadow: var(--frame-sh); }
:root[data-ui="v2"] .hq .sheet-title { color: var(--gold-hi); }
/* Боком на телефоне окно-карта ниже — иначе карточка не влезает над прилипшей «Ходить». */
@media (max-height: 500px) and (orientation: landscape) { :root[data-ui="v2"] .hq-window { height: 130px; } }

/* ── Часть 3. Город и «Что строить» (макеты v2/3-gorod, v2/2-chto-stroit) ──
   Одна разметка на шторку телефона и вкладку «Города» на компьютере: жители — золотой медалью,
   доходы — ниши с крупной цифрой, режим — закладки, «Строится» — ниша с картинкой и золотой полосой,
   очередь — плитки-ниши с крупной картинкой, постройки — медальоны. Разметка прежняя. */
:root[data-ui="v2"] .cs-pop {
  width: 46px; height: 46px; font: 400 22px var(--display); color: var(--primary-fg);
  background: var(--primary-bg); box-shadow: 0 0 0 2px #0e1411, 0 0 0 3px var(--sand-dim), 0 3px 8px rgba(0,0,0,.6);
}
:root[data-ui="v2"] .cs-name { font-size: 27px; text-shadow: 0 2px 4px #000; }
:root[data-ui="v2"] .cs-x { color: var(--gold-hi); }
:root[data-ui="v2"] .cs-top .yields { gap: 6px; }
:root[data-ui="v2"] .cs-top .y { justify-content: center; min-height: 40px; font-size: 18px; font-weight: 700; border-radius: 8px; }
:root[data-ui="v2"] .cs-top .y .hud-i { width: 20px; height: 20px; }

/* Режим города — закладки с золотой чертой и ромбом. */
:root[data-ui="v2"] .cs-focus { gap: 2px; margin: 10px 0 4px; border-bottom: 1px solid var(--sand-dim); }
:root[data-ui="v2"] .cs-focus .chip {
  flex: 1 1 0; min-width: 0; min-height: 42px; padding: 0 4px; position: relative;
  background: transparent; border: 0; border-radius: 0; color: var(--muted); font: 400 17px var(--display);
}
:root[data-ui="v2"] .cs-focus .chip:hover { color: var(--text); }
:root[data-ui="v2"] .cs-focus .chip.on { color: var(--gold-hi); }
:root[data-ui="v2"] .cs-focus .chip.on::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 3px; background: var(--gold); }
:root[data-ui="v2"] .cs-focus .chip.on::before { content: ''; position: absolute; left: 50%; bottom: -2px; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); background: var(--gold); }
:root[data-ui="v2"] .cs-income table td, :root[data-ui="v2"] .cs-income table th { border-color: rgba(201,162,90,.14); }
:root[data-ui="v2"] .cs-income tfoot td { border-top-color: var(--sand-dim); }
:root[data-ui="v2"] .cs-income .cs-eat td:first-child { color: var(--danger-text); }

/* Строится — ниша: картинка крупно, имя Триодионом, золотая полоса. */
:root[data-ui="v2"] .cs-now { padding: 10px; border-radius: 10px; background: var(--slot-bg); box-shadow: var(--slot-sh); }
:root[data-ui="v2"] .cs-now .ico-q { width: 68px; height: 68px; border-radius: 8px; box-shadow: 0 0 0 1px var(--sand-dim), 0 4px 10px rgba(0,0,0,.5); }
:root[data-ui="v2"] .cs-now-name { font: 400 20px var(--display); color: var(--gold-hi); }
:root[data-ui="v2"] .cs-now .bar { height: 9px; border: 0; border-radius: 5px; background: rgba(0,0,0,.6); box-shadow: inset 0 0 0 1px rgba(201,162,90,.3); }
:root[data-ui="v2"] .cs-now .bar > i { background: linear-gradient(90deg, #a87a33, var(--gold-hi)); }

/* Что строить — плитки-ниши: картинка 60px, имя Триодионом, ходы — золотой биркой. */
:root[data-ui="v2"] .prod-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
:root[data-ui="v2"] .prod-it {
  padding: 10px 4px 8px; gap: 6px; border-radius: 8px; background: var(--slot-bg); box-shadow: var(--slot-sh);
}
:root[data-ui="v2"] .prod-it .ico-q { width: 62px; height: 62px; border-radius: 8px; box-shadow: 0 0 0 1px var(--sand-dim), 0 3px 8px rgba(0,0,0,.6); }
:root[data-ui="v2"] .prod-it:hover:not(:disabled) { box-shadow: var(--slot-sh), inset 0 0 0 1px var(--sand-dim); }
:root[data-ui="v2"] .prod-it:hover .ico-q { box-shadow: 0 0 0 1px var(--gold), 0 3px 8px rgba(0,0,0,.6); }
:root[data-ui="v2"] .prod-it.on { background: rgba(56,46,22,.5); box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 14px rgba(201,162,90,.25); }
:root[data-ui="v2"] .prod-it.on .ico-q { box-shadow: 0 0 0 2px var(--gold-hi), 0 3px 8px rgba(0,0,0,.6); }
:root[data-ui="v2"] .prod-name { font: 400 15px/1.15 var(--display); color: var(--gold-hi); }
:root[data-ui="v2"] .prod-it.on .prod-name { color: var(--gold-hi); }
:root[data-ui="v2"] .prod-it .cost { top: 4px; right: 4px; font-size: 12px; padding: 1px 6px; border-radius: 0; clip-path: var(--chamfer); background: var(--primary-bg); color: var(--primary-fg); }
:root[data-ui="v2"] .prod-it:disabled { filter: grayscale(.7); opacity: .7; }
:root[data-ui="v2"] .prod-it:disabled .prod-name { color: var(--muted); }
:root[data-ui="v2"] .prod-it:disabled .cost { position: static; clip-path: none; background: none; color: var(--danger-text); font-weight: 400; padding: 0 4px; }

/* Постройки — медальоны. */
:root[data-ui="v2"] .cs-built-list { gap: 10px 8px; }
:root[data-ui="v2"] .cs-built { width: 74px; font-size: 12px; color: var(--text); }
:root[data-ui="v2"] .cs-built .ico-q { width: 52px; height: 52px; }

/* Вкладка «Города» на компьютере: города — ниши, выбранный — в золотом ободе. */
:root[data-ui="v2"] .city-card { background: var(--slot-bg); border: 0; border-radius: 10px; box-shadow: var(--slot-sh); padding: 10px 12px; margin-bottom: 8px; }
:root[data-ui="v2"] .city-card:not(.sel):hover { box-shadow: var(--slot-sh), inset 0 0 0 1px var(--sand-dim); }
:root[data-ui="v2"] .city-card.sel { box-shadow: var(--slot-sh), inset 0 0 0 1.5px var(--sand-dim); }

/* ── Часть 6б. Лендинг «Летопись» до входа (макет v2/1-vhod/01-login.html) ─────
   Раскладка прежняя, меняется вид: тёмная хвоя с зерном, заглавие золотом с красной буквицей,
   вход — пергаментная грамота, вход через сервисы — деревянные таблички, картинки — в рамах,
   карта и державы — дерево с золотой кромкой. Цвета лендинга (--lp-*) переопределены здесь. */
:root[data-ui="v2"] .landing {
  --lp-bg: var(--bg); --lp-ink: var(--text); --lp-muted: var(--muted); --lp-line: rgba(201,162,90,.25); --lp-line-2: var(--sand-dim);
  --lp-accent: var(--gold-hi); --lp-accent-hi: #f8e6b0; --lp-card: var(--panel); --lp-field: rgba(255,248,230,.6);
  --lp-on-accent: var(--primary-fg); --lp-ph: #7d6c4c; --lp-shadow: rgba(0,0,0,.6);
  --parch: #ebdfc0; --parch2: #ddcfaa; --pink: #2b2217; --pred: #8e2a17; --pmut: #5d4e32;
  background: var(--bg) var(--grain);
}
:root[data-ui="v2"] .ld-nav { position: relative; z-index: 0; margin-top: -24px; padding: 14px 0; border-bottom: 0; }
/* Полоса — во всю ширину окна, хоть строка и стоит в колонке 1280. */
:root[data-ui="v2"] .ld-nav::before {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: var(--topbar-bg); border-bottom: 1px solid var(--sand-dim);
  box-shadow: 0 3px 0 rgba(201,162,90,.2), 0 6px 16px rgba(0,0,0,.5);
}
:root[data-ui="v2"] .ld-mark { font-size: 28px; color: var(--gold-hi); text-shadow: 0 2px 4px #000; }
:root[data-ui="v2"] .ld-links a, :root[data-ui="v2"] .ld-linkbtn { color: var(--muted); text-decoration: none; font-family: var(--ui); font-size: 15px; }
:root[data-ui="v2"] .ld-links a:hover, :root[data-ui="v2"] .ld-linkbtn:hover { color: var(--gold-hi); }

:root[data-ui="v2"] .ld-sub { font: 14px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
:root[data-ui="v2"] .ld-title { color: var(--gold-hi); text-shadow: 0 3px 10px #000; }
:root[data-ui="v2"] .ld-cap { color: #d0634a; }
:root[data-ui="v2"] .ld-lead { color: var(--text); text-shadow: 0 1px 3px #000; }

/* Вход — грамота. */
:root[data-ui="v2"] .ld-entry {
  padding: 18px 18px 16px; border-radius: 4px; color: var(--pink);
  background: var(--paper), linear-gradient(180deg, var(--parch), var(--parch2));
  box-shadow: 0 6px 18px rgba(0,0,0,.55), inset 0 0 0 1px rgba(120,90,40,.35);
}
:root[data-ui="v2"] .ld-entry .ld-label { font: 21px var(--display); color: var(--pink); }
:root[data-ui="v2"] .ld-entry .ld-note, :root[data-ui="v2"] .ld-entry .ld-or { color: var(--pmut); font-family: var(--ui); }
:root[data-ui="v2"] .ld-entry .ld-or span { background: rgba(120,90,40,.45); }
:root[data-ui="v2"] .ld-entry .ld-step { color: var(--pink); }
:root[data-ui="v2"] .ld-entry .ld-step b, :root[data-ui="v2"] .ld-entry .tg-code span, :root[data-ui="v2"] .ld-entry a:not(.ld-go) { color: var(--pred); }
:root[data-ui="v2"] .ld-entry .ld-back { color: var(--pmut); }
:root[data-ui="v2"] .ld-entry .ld-back:hover { color: var(--pred); }
:root[data-ui="v2"] .ld-form input[type="text"] {
  color: var(--pink); background-color: var(--lp-field); border: 0; border-radius: 4px;
  box-shadow: inset 0 1px 4px rgba(90,60,20,.35), inset 0 0 0 1px rgba(120,90,40,.55);
}
:root[data-ui="v2"] .ld-form input[type="text"]:focus { outline: 2px solid var(--pred); }
:root[data-ui="v2"] .ld-go {
  border: 0; border-radius: 0; clip-path: var(--chamfer);
  background: var(--primary-bg); color: var(--primary-fg); box-shadow: var(--primary-shadow); text-shadow: 0 1px 0 rgba(255,240,200,.55);
}
:root[data-ui="v2"] .ld-go:hover, :root[data-ui="v2"] .landing a.ld-go:hover { background: var(--primary-bg-hover); color: var(--primary-fg); }
:root[data-ui="v2"] .ld-prov {
  border: 0; border-radius: 0; clip-path: var(--chamfer); background: var(--btn-bg); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--sand-dim), inset 0 0 0 3px rgba(0,0,0,.35); font: 600 15px var(--ui);
}
:root[data-ui="v2"] .ld-prov:hover { background: var(--btn-bg-hover); color: var(--gold-hi); }

/* Как идёт партия — без карточек, картинки в двойной раме. */
:root[data-ui="v2"] .ld-kicker { font: 30px var(--display); letter-spacing: 0; text-transform: none; color: var(--gold-hi); text-shadow: 0 2px 4px #000; }
:root[data-ui="v2"] .ld-card { background: none; border: 0; padding: 0; }
:root[data-ui="v2"] .ld-card img {
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--sand-dim), 0 0 0 4px rgba(14,20,17,.85), 0 0 0 5px rgba(201,162,90,.4), 0 6px 14px rgba(0,0,0,.5);
}
:root[data-ui="v2"] .ld-card b, :root[data-ui="v2"] .ld-leg b { color: var(--gold-hi); }
:root[data-ui="v2"] .ld-card span, :root[data-ui="v2"] .ld-leg span { font-family: var(--ui); color: var(--muted); }

/* Земля — снимок карты в деревянной раме, знаки — медальоны. */
:root[data-ui="v2"] .ld-map-frame { background: var(--wood); border: 1px solid var(--sand-dim); border-radius: 10px; box-shadow: var(--frame-sh); padding: 12px; }
:root[data-ui="v2"] .ld-map-frame img { object-position: 42% 32%; border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(201,162,90,.45); }
:root[data-ui="v2"] .ld-map figcaption { font-family: var(--ui); }
:root[data-ui="v2"] .ld-h2 { color: var(--gold-hi); text-shadow: 0 2px 6px #000; }
:root[data-ui="v2"] .ld-h2 .ld-accent { color: #d0634a; }
:root[data-ui="v2"] .ld-leg img {
  border: 0; border-radius: 50%; padding: 4px;
  background: radial-gradient(circle at 50% 40%, #39463d, #151c18);
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px #0e1411, 0 0 0 5px var(--sand-dim), 0 4px 10px rgba(0,0,0,.6);
}

/* Державы — портреты в раме, режимы — ниши. */
:root[data-ui="v2"] .ld-realms, :root[data-ui="v2"] .ld-land, :root[data-ui="v2"] .ld-modes { border-top-color: rgba(201,162,90,.25); }
:root[data-ui="v2"] .ld-realm img { border: 0; border-radius: 6px; box-shadow: 0 0 0 1px var(--sand-dim), 0 0 0 4px rgba(14,20,17,.85), 0 0 0 5px rgba(201,162,90,.35), 0 6px 14px rgba(0,0,0,.5); }
:root[data-ui="v2"] .ld-realm:hover img { box-shadow: 0 0 0 1px var(--gold-hi), 0 0 0 4px rgba(14,20,17,.85), 0 0 0 5px var(--gold), 0 6px 14px rgba(0,0,0,.5); }
:root[data-ui="v2"] .ld-realm b { color: var(--gold-hi); }
:root[data-ui="v2"] .ld-realm span, :root[data-ui="v2"] .ld-realm i { font-family: var(--ui); }
:root[data-ui="v2"] .ld-modes div { padding: 14px 16px; border-radius: 10px; background: var(--slot-bg); box-shadow: var(--slot-sh); }
:root[data-ui="v2"] .ld-modes b { color: var(--gold-hi); }
:root[data-ui="v2"] .ld-modes span { font-family: var(--ui); }

/* Лёгкий вид (29.10, слабые телефоны; включает index.html — data-lite): тот же новый вид, только плоский.
   Зерно дерева и бумаги — SVG-фильтр feTurbulence под каждой панелью и кнопкой; тени-фильтры и
   мерцание кнопки хода перерисовываются целиком. На видеочипе за 1 ГБ это — подвисания;
   цвета, рамы-линии и раскладка остаются, а дорогие слои — гладкой заливкой. */
:root[data-ui="v2"][data-lite="1"] {
  --grain: linear-gradient(transparent, transparent);
  --paper: linear-gradient(transparent, transparent);
  --wood: linear-gradient(180deg, #2a352f, #202a25 40%, #18201c);
  --wood-plain: var(--wood);
  --frame-sh: inset 0 0 0 1px rgba(201,162,90,.4);
  --slot-sh: inset 0 0 0 1px rgba(201,162,90,.16);
}
:root[data-ui="v2"][data-lite="1"] #btn-end-turn,
:root[data-ui="v2"][data-lite="1"] #btn-panel { filter: none; }
:root[data-ui="v2"][data-lite="1"] #btn-end-turn.btn-attention { animation: none; background: var(--primary-bg-hover); } /* clip-path срезал бы обводку */
:root[data-ui="v2"][data-lite="1"] #btn-end-turn:disabled,
:root[data-ui="v2"][data-lite="1"] .btn:disabled,
:root[data-ui="v2"][data-lite="1"] .prod-it:disabled { filter: none; opacity: .55; }
/* «Лепо | Быстро» сверху: горит выбранное — золотой табличкой, второе — тёмным. */
:root[data-ui="v2"] .lite-toggle { min-height: 32px; padding: 0; text-shadow: none; }
:root[data-ui="v2"] .lite-toggle > span { color: var(--muted); }
:root[data-ui="v2"] .lite-toggle[aria-pressed="false"] .lt-on,
:root[data-ui="v2"] .lite-toggle[aria-pressed="true"] .lt-off { background: var(--primary-bg); color: var(--primary-fg); box-shadow: var(--primary-shadow); }
:root[data-ui="v2"] .lang-toggle[aria-pressed="false"] .lg-ru,
:root[data-ui="v2"] .lang-toggle[aria-pressed="true"] .lg-en { background: var(--primary-bg); color: var(--primary-fg); box-shadow: var(--primary-shadow); }

/* Узкий телефон: шапка главной не шире экрана. На 360 px профиль («Vorgas…» и ▾) уходил за правый край — «Профиль не видно» (отзыв 24, 29.10). */
@media (max-width: 420px) {
  :root .hq-top, :root[data-ui="v2"] .hq-top { gap: 6px; padding-left: 10px; padding-right: 10px; }
  :root .hq-top .hq-brand, :root[data-ui="v2"] .hq-top .hq-brand { font-size: 22px; flex: 0 1 auto; min-width: 0; }
  :root .hq-top .menu-user, :root[data-ui="v2"] .hq-top .menu-user { flex: 0 1 auto; min-width: 0; }
  :root .hq-top .menu-user summary, :root[data-ui="v2"] .hq-top .menu-user summary {
    display: block; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; padding: 6px 9px; line-height: 24px;
  }
  :root .hq-top .menu-user summary::after, :root[data-ui="v2"] .hq-top .menu-user summary::after { content: none; }
  /* Пакет (30.10): «Throne of Kannauj» длиннее «Размирья», а рядом ещё «RU | EN» — имя мельче, в две строки. */
  :root[data-pack]:not([data-pack="rus"]) .hq-top .hq-brand { font-size: 17px; line-height: 1.1; }
}
/* Совсем узко (320–380): имя пакета — своей строкой над переключателями, профиль не сжимается в букву. */
@media (max-width: 380px) {
  :root[data-pack]:not([data-pack="rus"]) .hq-top { flex-wrap: wrap; row-gap: 4px; }
  :root[data-pack]:not([data-pack="rus"]) .hq-top .hq-brand { flex: 1 0 100%; font-size: 20px; }
  :root[data-pack]:not([data-pack="rus"]) .hq-top .lite-toggle { margin-left: 0; }
  :root[data-pack]:not([data-pack="rus"]) .hq-top .menu-user { margin-left: auto; }
}