/* ═══ Телефоны, планшеты и большие мониторы (автор 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(100vh / 56, 100vw / 72), 28px) * var(--ui-scale, 1)); }

/* сенсорный экран: без подсветки касания, стол не прокручивается и не масштабируется пальцами (жесты — игре) */
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: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 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 { padding: 0.5rem 0.875rem; max-height: 96vh; 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), всплывающее — справа от столбика */
  #vol-btn { top: calc(0.5rem + max(3rem, 44px) + 0.375rem) !important; left: 0.5rem !important; }
  #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: 70vh; }
  #banner { font-size: 2.5rem; padding: 0.375rem 2rem 1.25rem; }
  #hint { font-size: 0.875rem; left: 2vw; bottom: 2vh; padding: 0.25rem 0.75rem; }
  #card-info { font-size: 0.8125rem; max-width: min(17rem, 34vw); }
  #toast { font-size: 0.9375rem; bottom: 34vh; }
  .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: 2vh; }
  #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(100vh - 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: 96vh; 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; }
  .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: 88vh; }
  .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; }
}