/* ═══ Телефоны, планшеты и большие мониторы (автор 07.11: «под телефон и разные мониторы адаптация… удобно играть и видно главное»).
   Поверх css/ui.css: только то, что меняется от размера экрана и способа ввода. 3D-стол и камера — js/view/scene.js.
   Телефон держат горизонтально (844×390, 932×430); вертикально — экран «поверните телефон». Палец — кнопки не меньше 44 px. */

/* ── масштаб интерфейса: от высоты окна (как раньше), на узком окне — и от ширины; мелкий экран не опускает шрифт ниже 12 px,
   4K и 32:9 поднимают до 28 px. Ползунок «Размер интерфейса» в настройках множит поверх (--ui-scale) */
html { font-size: calc(clamp(12px, min(100dvh / 56, 100vw / 72), 28px) * var(--ui-scale, 1)); }

/* видимая высота на телефоне меньше: панели браузера съедают до половины экрана в горизонтальном положении.
   dvh — высота, которую видно сейчас; правила css/ui.css с vh — здесь же в dvh (браузер без dvh оставит vh) */
@supports (height: 1dvh) {
  .panel { max-height: 92dvh; }
  .col-layout { height: 88dvh; }
  #log-list { max-height: 46dvh; }
  #hint { bottom: 3dvh; }
  .bar-modal { bottom: 6dvh; }
  .bd-layout { height: 90dvh; }
  .bd-zoom img { height: 78dvh; }
  #card-info { left: calc(4vw + 30dvh); top: 22dvh; }
  #card-info.at-hand { bottom: 47dvh; }
  #toast { bottom: 30dvh; }
  #hist { top: 11dvh; }
  #proph-skip { bottom: 54dvh; }
  .watch-box { margin-top: 4dvh; }
}

/* ── без горизонтальной прокрутки (автор 07.11: «скроллбаров по X быть не должно»): окна, сетки и списки листаются только
   вниз; ряды, которые на телефоне листаются пальцем вбок (дома и фильтры сборщика), — без полосы */
.panel, .deck-grid, .bd-grid, .bd-side, .bd-list, .col-grid, .builder, .b-list, #log-list, .rules, .bd-zoom div { overflow-x: hidden; }
.panel { overflow-y: auto; }
/* плитка колоды: длинное название («Гравитационный колодец», «Надвигающаяся буря») переносится в две строки и не вылезает за плитку */
.deck-tile { min-width: 0; max-width: 100%; }
.dt-body { min-width: 0; flex: 1; }
.dt-name { overflow-wrap: anywhere; hyphens: auto; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dt-hero { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-houses { flex-wrap: wrap; }
.dt-about { overflow-wrap: anywhere; }
.setup-row, .mset-npc, .bd-filters, .bd-top { max-width: 100%; }

/* значок громкости — на всех экранах в левом верхнем углу (js/ui.js, K.UI.volumeButton). На обычном экране он ложится на поле
   вокруг окна; на низком (телефон) окна почти во весь экран — там они отступают от значка (ниже, в @media max-height) */
.panel.wide { max-width: 100%; }
.panel.narrow, .panel.rules { max-width: 100%; }
.bd-main { min-width: 0; }
.bd-top { flex-wrap: wrap; }

/* значки-кнопки стола: картинка по центру */
#log-toggle, #hist-toggle, #vol-btn { display: flex; align-items: center; justify-content: center; }

/* вертикальная прокрутка — тонкая, в цвет бронзы, а не системная белая */
* { scrollbar-width: thin; scrollbar-color: rgba(201, 161, 96, 0.8) rgba(10, 8, 6, 0.35); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(10, 8, 6, 0.35); border-radius: 8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #c9a160, #6e5230); border-radius: 8px; border: 2px solid rgba(10, 8, 6, 0.35); }
::-webkit-scrollbar-corner { background: transparent; }

/* сенсорный экран: без подсветки касания, стол не прокручивается и не масштабируется пальцами (жесты — игре) */
html, body { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
#stage, #stage canvas { touch-action: none; }

/* ── «поверните телефон»: вертикальный узкий экран */
#rotate { position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem;
  padding: 2rem; text-align: center; background: radial-gradient(circle at 50% 40%, #182030, #07080c 75%); color: var(--ink); font-size: 18px; line-height: 1.4; }
#rotate b { color: var(--gold-hi); font-weight: normal; font-size: 24px; }
#rotate svg { width: 96px; height: 96px; color: var(--gold-hi); animation: rot-hint 2.4s ease-in-out infinite; }
@keyframes rot-hint { 0%, 25% { transform: rotate(0); } 55%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
/* только сенсорный экран: узкое окно на ПК и стенды из нескольких iframe (net_match_test) заглушку не получают */
@media (orientation: portrait) and (max-width: 760px) and (pointer: coarse) and (hover: none) { #rotate { display: flex; } }

/* вырез экрана телефона (viewport-fit=cover): кнопки и таблички не уходят под «чёлку» и скругления */
#hud { inset: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); }
.panel-screen { padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); }

/* ── палец: всё, что нажимают, — не меньше 44 px */
@media (pointer: coarse) {
  #dice-ask .dk-key { display: none; }               /* «пробел или Enter» — у клавиатуры */
  .btn { min-height: 44px; }
  .hud-btn { min-width: 44px; min-height: 44px; }
  .seg button, .bd-toggle, .bd-house, .tabs button, .mini, .bd-newhouses button { min-height: 44px; min-width: 44px; }
  .bd-cost { width: 44px; height: 44px; }
  .bd-strip { min-height: 44px; }
  .deck-tile { min-height: 64px; }
  #vol-pop input[type=range] { height: 32px; }
  #vol-pop .vp-mute { min-height: 44px; }
  #vol-pop .vp-keys { display: none; }              /* клавиш на телефоне нет */
  .bd-zoom-btn { display: block !important; width: 36px !important; height: 36px !important; }   /* «крупно» без наведения */
  .hist-item { cursor: pointer; }
  /* наведение на телефоне «залипает» после касания: подъём карт и кнопок — только у мыши */
  .btn:hover:not(:disabled), .deck-tile:hover, .col-card:hover { transform: none; }
  .bd-card:hover img { transform: none; }
}

/* ── низкий экран (телефон горизонтально, маленький ноутбук): плотнее, ничего не уезжает за край */
@media (max-height: 540px) {
  .panel-screen { padding-left: calc(env(safe-area-inset-left, 0px) + max(44px, 2.75rem) + 0.875rem); padding-right: calc(env(safe-area-inset-right, 0px) + max(44px, 2.75rem) + 0.875rem); }
  .panel { padding: 0.5rem 0.875rem; max-height: 96dvh; border-width: 0.625rem; }
  .panel h2 { margin: 0.125rem 0 0.375rem; font-size: 1.25rem; padding-bottom: 0.5rem; }
  .panel.wide { width: 98vw; }
  .panel.narrow { width: min(23.75rem, 92vw); }
  .btn { font-size: 1.0625rem; margin: 0.25rem 0; }
  .btn.big { font-size: 1.1875rem; }

  /* меню: заголовок мельче, подпись про предметы стола прячем */
  #menu { padding-left: 4vw; }
  .menu-box { width: 17rem; }
  .menu-box .logo { font-size: 2.5rem; }
  .menu-box .sub { font-size: 0.9375rem; margin: 0.125rem 0 0.5rem; padding-bottom: 0.5rem; }
  .menu-box .btn { font-size: 1.0625rem; margin: 0.1875rem 0; }
  .menu-box .btn.big { font-size: 1.25rem; }
  .menu-foot { display: none; }

  /* выбор колоды: плитки ниже, нижняя строка переносится */
  .deck-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem; margin-bottom: 0.5rem; }
  .deck-grid.small { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
  .dt-portrait { width: 3.5rem; height: 3.5rem; font-size: 1.5rem; }
  .dt-about { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .setup-row { flex-wrap: wrap; gap: 0.375rem 0.5rem; }
  #setup .setup-row:last-child { padding: 0.375rem 0 0.5rem; }
  #setup h2 { font-size: 1.0625rem; }
  .mset-head { gap: 0.75rem; padding-bottom: 0.375rem; margin-bottom: 0.25rem; }
  .mset-vs { font-size: 1.25rem; }

  /* партия: верхние кнопки, подсказки и пояснения компактнее */
  #game-menu { top: 0.5rem; left: 0.5rem; }
  /* постоянные значки — столбиком у левой кромки (договор с камерой: K.UI.safeInsets), всплывающее — справа от столбика */
  body.hud-on #vol-btn { top: calc(0.5rem + max(3rem, 44px) + 0.375rem) !important; left: 0.5rem !important; }
  body.hud-on #vol-pop { top: calc(0.5rem + max(3rem, 44px) + 0.375rem) !important; left: calc(0.5rem + max(3rem, 44px) + 0.5rem) !important; }
  #hist-toggle { top: calc(0.5rem + 2 * (max(3rem, 44px) + 0.375rem)); left: 0.5rem; }
  #log { top: 0.5rem; right: 0.5rem; }
  #log-list { width: min(21.25rem, 46vw); max-height: 70dvh; }
  #banner { font-size: 2.5rem; padding: 0.375rem 2rem 1.25rem; }
  #hint { font-size: 0.875rem; left: 2vw; bottom: 2dvh; padding: 0.25rem 0.75rem; }
  #card-info { font-size: 0.8125rem; max-width: min(17rem, 34vw); }
  #toast { font-size: 0.9375rem; bottom: 34dvh; }
  .bar { gap: 0.625rem; font-size: 0.9375rem; padding: 0.25rem 0.75rem; max-width: 96vw; flex-wrap: wrap; justify-content: center; }
  .bar-modal { bottom: 2dvh; }
  #go-title { font-size: 2.25rem; }
  #gameover .panel { min-width: min(23.75rem, 92vw); }
  .curtain-name { font-size: 2.5rem; }
  .curtain-box { padding: 1rem 1.75rem; }
  .panel.variant { width: min(32.5rem, 94vw); }
  .panel.variant img { width: 7.5rem; }
  .pick-card { width: min(11rem, 24vw); }
  .rules { font-size: 0.9375rem; }
  /* настройки в два столбца: всё видно без прокрутки */
  #settings .panel.narrow { width: min(44rem, 94vw); display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; text-align: left; }
  #settings .panel.narrow h2, #settings .panel.narrow > .btn { grid-column: 1 / -1; }
  #settings label { margin: 0.25rem 0; font-size: 0.9375rem; }
  .kw-list { columns: 2; font-size: 0.8125rem; }

  /* история ходов: на низком экране свёрнута в значок (js/ui.js, #hist-toggle); раскрытая — столбиком поверх края стола */
  #hist { top: 0.5rem; left: calc(0.5rem + max(3rem, 44px) + 0.5rem); display: none; max-height: calc(100dvh - 1rem); overflow-y: auto; padding-right: 0.5rem; }
  body.hist-open #hist { display: flex; }
  #hist-toggle { display: flex !important; }
  .hist-item { width: 2.5rem; height: 3.5rem; }
  #hist-tip { width: 11rem; }
  #hist-tip div { font-size: 0.8125rem; }

  /* сборщик колод: сетка шире, колода — выезжающей панелью справа (js/ui.js, #bd-deck-toggle) */
  .bd-layout { height: 96dvh; padding: 0.375rem 0.625rem; gap: 0.5rem; }
  .bd-top { gap: 0.5rem; flex-wrap: nowrap; }
  .bd-top h2 { display: none; }
  /* дома и фильтры — одной строкой, листаются пальцем вбок */
  .bd-houses { gap: 0.25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bd-houses::-webkit-scrollbar, .bd-filters::-webkit-scrollbar { display: none; }
  .bd-house { flex: none; }
  .bd-house { font-size: 0.8125rem; padding: 0 0.375rem 0 0.125rem; }
  .bd-house img { width: 1.375rem; height: 1.375rem; }
  .bd-filters { gap: 0.375rem; margin: 0.375rem 0 0.25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bd-filters > * { flex: none; }
  .bd-search { flex: 1 0 12rem; }
  .bd-label { display: none; }
  .bd-cost { width: 1.875rem; height: 1.875rem; font-size: 0.9375rem; }
  .bd-search { min-width: 7rem; font-size: 0.875rem; padding: 0.375rem 0.5rem; }
  /* (UX-аудит, П-31) поиск — первым и всегда на виду; фазоны, виды и переключатели — под кнопкой «Фильтры» (js/builder.js) */
  #bd-search { order: -3; flex: 1 1 10rem; }
  #bd-filt-toggle { order: -2; display: inline-flex !important; align-items: center; gap: 0.25rem; }
  #bd-filt-toggle b { color: var(--gold-hi); font-weight: normal; }
  #bd-chosen { order: -1; }
  body:not(.bd-filt-open) .bd-filters > #bd-costs, body:not(.bd-filt-open) .bd-filters > #bd-types, body:not(.bd-filt-open) .bd-filters > #bd-legend,
  body:not(.bd-filt-open) .bd-filters > #bd-mine, body:not(.bd-filt-open) .bd-filters > #bd-props { display: none !important; }
  body.bd-filt-open .bd-filters { flex-wrap: wrap; overflow-x: visible; }
  .bd-grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.625rem; padding: 0.375rem 0.25rem 1rem 0; }
  /* панель колоды под верхней строкой: кнопка «Колода» и «Назад» остаются доступны, сетку можно листать и добавлять карты */
  .bd-side { position: fixed; top: calc(max(44px, 3rem) + 1.75rem); right: 0; bottom: 0; z-index: 35; width: min(20.625rem, 46vw); padding: 0.5rem 0.75rem; transform: translateX(100%);
    transition: transform .22s ease-out; background: var(--sk-panel-bg, #120d09); box-shadow: -1rem 0 2.5rem rgba(0, 0, 0, 0.7); }
  body.bd-drawer .bd-side { transform: none; }
  #bd-deck-toggle { display: flex !important; }
  .bd-zoom img { height: 88dvh; }
  .bd-zoom div { max-width: 40vw; font-size: 0.875rem; }
}
/* шрифты читаются: на мелком экране подписи не мельче 10–11 px */
@media (max-height: 540px) {
  .dt-houses i, .bd-bar span, .bd-bar em, .bd-newhouses button small, .bd-dr-body small, .bd-sub, .bd-types-sum, .watch-note,
  #vol-pop output, #lane-tip i, .hist-item i { font-size: max(0.75rem, 10px); }
  .dt-about, .dt-hero, #card-info, #hint, .bd-strip span, .mini, .seg.small button { font-size: max(0.8125rem, 11px); }
}
@media (max-height: 540px) and (pointer: coarse) {
  .bd-cost { width: 44px; height: 44px; font-size: 1rem; }
  .bd-house { min-width: 44px; justify-content: center; box-sizing: border-box; padding-left: 0.375rem; padding-right: 0.375rem; }
}

/* кнопки, которые появляются только на низком экране (их создаёт js/ui.js) */
#hist-toggle { display: none; position: absolute; pointer-events: auto; align-items: center; justify-content: center; font-size: 1.125rem; }
#hist-toggle { overflow: visible; }
#hist-toggle .n { position: absolute; right: -0.5rem; top: -0.5rem; box-sizing: border-box; min-width: 1.1rem; height: 1.1rem; padding: 0 0.2rem; border-radius: 99rem; font-size: 0.6875rem;
  line-height: 1.1rem; background: #7a2a18; color: #ffe2c8; text-align: center; font-style: normal; }
#bd-deck-toggle { display: none; align-items: center; gap: 0.375rem; margin: 0; }
#bd-deck-toggle b { color: var(--gold-hi); font-weight: normal; }

/* ── большие мониторы: окна не расползаются на всю ширину 21:9 и 32:9 */
@media (min-aspect-ratio: 21/9) {
  .panel.wide { width: min(82.5rem, 72vw); }
  #menu { padding-left: max(7vw, calc(50vw - 60rem)); }
}
/* лента истории — в том же столбце, под ☰ и динамиком */
@media (min-height: 541px) {
  #hist { top: calc(0.875rem + 2 * (3rem + 0.375rem) + 0.5rem); left: 0.875rem; }
}

/* ═══ Телефонный режим (body.phone — сенсорный маленький экран, js/ui.js UI.isPhone) ═══
   Рука — крупный лоток внизу; любая карта по касанию — на весь экран: лицо, правила, свойства расшифровкой, действия кнопками.
   Шрифт окна карты — в px: на настоящем телефоне не мельче 15–16 px */
body { -webkit-touch-callout: none; }
button, .btn, .hud-btn { touch-action: manipulation; }
#cardview { z-index: var(--z-modal-view); background: rgba(4, 5, 8, 0.86); align-items: stretch; justify-content: center; }
#cardview .cv-box { display: flex; gap: 14px; width: min(100%, 980px); height: 100%; padding: 10px calc(env(safe-area-inset-right, 0px) + 10px) 10px calc(env(safe-area-inset-left, 0px) + 10px); box-sizing: border-box; }
#cardview .cv-img { height: calc(100dvh - 20px); max-height: 100%; aspect-ratio: 512 / 716; object-fit: contain; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); flex: none; }
#cardview .cv-body { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 8px; color: var(--ink); text-shadow: 0 1px 2px #000; }
#cardview .cv-name { font-size: 22px; color: var(--gold-hi); line-height: 1.15; }
#cardview .cv-meta { font-size: 15px; color: var(--muted); }
#cardview .cv-text { font-size: 17px; line-height: 1.4; }
#cardview .cv-state { font-size: 15px; color: #ffd8c8; }
#cardview .cv-state:empty, #cardview .cv-note:empty { display: none; }
#cardview .cv-terms { font-size: 15px; line-height: 1.35; color: #e4d9c2; }
#cardview .cv-terms p { margin: 0 0 6px; }
#cardview .cv-terms b { color: var(--gold-hi); font-weight: normal; }
#cardview .cv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
#cardview .cv-acts .btn { margin: 0; min-height: 48px; font-size: 16px; flex: 1 1 calc(50% - 8px); display: flex; flex-direction: column; justify-content: center; }
#cardview .cv-acts .btn small { font-size: 13px; color: var(--muted); }
#cardview .cv-note { flex-basis: 100%; font-size: 15px; color: #ffd2c4; }

#hand-tray { display: none; position: fixed; left: calc(env(safe-area-inset-left, 0px) + 60px); right: calc(env(safe-area-inset-right, 0px) + 116px); bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
  height: min(31dvh, 150px); z-index: 7; pointer-events: auto; gap: 6px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; scrollbar-width: none;
  padding: 4px 6px; align-items: flex-end; }
#hand-tray::-webkit-scrollbar { display: none; }
#hand-tray.on { display: flex; }
.ht-card { flex: none; height: 100%; aspect-ratio: 512 / 716; padding: 0; border: 0; border-radius: 8px; background: none; position: relative; transition: transform .12s; }
.ht-card img { width: 100%; height: 100%; border-radius: 8px; display: block; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7); }
.ht-card.ok img { box-shadow: 0 0 0 2px #7dff9a, 0 0 14px rgba(125, 255, 154, 0.55); }
.ht-card.omen img { box-shadow: 0 0 0 2px #ffd36a, 0 0 16px rgba(255, 211, 106, 0.7); }
.ht-card:active { transform: translateY(-4px) scale(1.04); }
.ht-empty { align-self: center; color: var(--muted); font-size: 15px; font-style: italic; }
#end-btn { display: none; position: fixed; right: calc(env(safe-area-inset-right, 0px) + 8px); bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); z-index: 8; margin: 0;
  min-width: 100px; min-height: 56px; font-size: 17px; pointer-events: auto; }
#end-btn.on { display: block; }
body.phone #proph-skip { font-size: 17px; min-height: 52px; padding: 4px 18px; }
body.phone #dice-ask { max-width: 70vw; }
body.phone #dice-ask .btn { min-height: 56px; font-size: 18px; }
body.phone #card-info { display: none; }   /* табличка у карты — на телефоне всё в окне карты */
#cardview .cv-acts.many .btn { flex-basis: calc(33.3% - 8px); min-height: 44px; font-size: 15px; padding: 2px 6px; }
/* табличка у крупной карты: длинный текст правил — читаемым шрифтом (не мельче ~13 px) */
#card-info .ci-rules { font-size: max(0.95rem, 13px); color: var(--ink); margin-bottom: 0.4rem; padding-bottom: 0.35rem; border-bottom: 1px solid rgba(214, 180, 106, 0.3); }
/* сборщик (UX-аудит 07.11): копии, которых нет в коллекции, — пустые точки с замком; кнопки строк колод — под палец и мышь */
.bd-pips i.lock { border-style: dashed; border-color: rgba(214, 180, 106, 0.45); background: #0d0b08; position: relative; }
.bd-pips i.lock::after { content: ''; position: absolute; inset: 0.18rem; border-radius: 1px; background: rgba(214, 180, 106, 0.55); }
.bd-own { font-size: max(0.75rem, 11px); }
.bd-deckrow .mini { min-width: 44px; min-height: 44px; font-size: 1rem; }
#ask .panel { min-width: min(24rem, 92vw); }
#ask #ask-btns { display: flex; flex-direction: column; gap: 0.25rem; }
#ask { z-index: var(--z-confirm); }
/* плашки героев на телефоне: свой — снизу слева (в полосе лотка), соперник — сверху посередине */
.hero-plate { display: none; position: fixed; z-index: 7; pointer-events: auto; padding: 4px 8px; border-radius: 8px; background: rgba(14, 11, 8, 0.86);
  border: 1px solid rgba(214, 180, 106, 0.5); color: var(--ink); font-size: 13px; line-height: 1.25; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); }
.hero-plate.on { display: block; }
.hero-plate .hp-name { color: var(--gold-hi); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.hero-plate .hp-row { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.hero-plate .hp-hp { color: #ffb4a0; font-weight: normal; font-size: 15px; }
.hero-plate .hp-hp.low { color: #ff6a50; }
.hero-plate .hp-runes { color: #9fd0ff; letter-spacing: 1px; }
.hero-plate .hp-spark { margin: 4px 0 0; min-height: 40px; font-size: 13px; width: 100%; }
#hero-me { left: calc(env(safe-area-inset-left, 0px) + 6px); bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); width: 158px; }
#hero-op { top: calc(env(safe-area-inset-top, 0px) + 4px); left: 50%; transform: translateX(-50%); min-height: 48px; box-sizing: border-box; }
#hero-op.on { display: flex; align-items: center; }   /* единственная цель атаки по герою на телефоне — палец не меньше 48 px */
#hero-op .hp-name { display: inline-block; vertical-align: middle; margin-right: 8px; }
#hero-op .hp-row { display: inline-flex; vertical-align: middle; margin-right: 8px; }
body.phone #hand-tray { left: calc(env(safe-area-inset-left, 0px) + 172px); }
.ht-ghost { position: fixed; z-index: var(--z-drag); width: 96px; transform: translate(-50%, -70%) rotate(-4deg); border-radius: 8px; pointer-events: none; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.8), 0 0 14px rgba(255, 211, 106, 0.5); }
#hand-tray.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
#hand-tray.more-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px); mask-image: linear-gradient(to right, transparent, #000 40px); }
#hand-tray.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.ht-card { touch-action: none; }   /* вбок листает и вверх тянет сам лоток (js/ui.js), браузер жест не забирает */
#bd-filt-toggle { display: none; }   /* только на низком экране (выше, @media max-height: 540px) */
/* значки героя на плашке (телефон): дары, клятвы, Оплот — касание показывает подсказку (js/view/dice.js) */
.hero-plate .hp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.hero-plate .hp-chip { font-size: 12px; padding: 3px 8px; min-height: 26px; display: inline-flex; align-items: center; border-radius: 99px; background: rgba(10, 8, 6, 0.9);
  border: 1px solid rgba(214, 180, 106, 0.45); color: var(--ink); white-space: nowrap; cursor: help; }
.hero-plate .hp-chip.mark { border-color: rgba(214, 180, 106, 0.85); color: var(--gold-hi); }
.hero-plate .hp-chip.bad { border-color: rgba(255, 106, 90, 0.6); color: #ffb0a8; }
.hero-plate .hp-chip.mark.bad { border-color: rgba(200, 120, 255, 0.75); color: #e6c4ff; }
#hero-op .hp-chips { display: inline-flex; vertical-align: middle; margin: 0; }
.hero-plate .hp-chip.new { animation: dc-new .7s cubic-bezier(.2, 1.6, .4, 1); }