/* Кабинет следователя, новый облик: нарисованная сцена 3:4 и панель выбора.
   В портрете панель — шторка снизу, в ландшафте — колонка справа от сцены.
   Внутри сцены всё в процентах кадра, поэтому композиция одна на любом экране. */

.cab {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  overflow: hidden;
  container-type: size;
}

.cab__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cab__view {
  --panel-w: clamp(300px, 30cqw, 420px);
  position: relative;
  width: min(100cqw, 75cqh);
  aspect-ratio: 3 / 4;
}

.cab__scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  background: #3a2a1c;
  box-shadow: 0 14px 34px var(--shadow);
  transition: transform 320ms ease;
  container-type: inline-size;
}

.cab__plate,
.cab__strip {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.cab__layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── Полосы-продолжения ───────────────────────────────────────────── */

/* С полосами сцена не обрезает то, что за её краями: обрезает рамка экрана.
   Свободная высота делится примерно на треть сверху и две трети снизу —
   за столом глазу нужнее пол и сам стол, чем потолок. Когда места под кадр
   3:4 впритык (десктоп, ландшафт), свободной высоты нет и полос не видно. */
.cab[data-strips='true'] .cab__stage {
  overflow: hidden;
}

.cab[data-strips='true'] .cab__scene {
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}

.cab__strip {
  display: block;
  pointer-events: none;
}

@media (orientation: portrait) {
  .cab[data-strips='true'] .cab__stage {
    align-items: flex-start;
  }

  .cab[data-strips='true'] .cab__view {
    margin-top: calc((100cqh - min(100cqw, 75cqh) * 4 / 3) / 3);
  }
}

/* Вечер и виньетка накрывают и полосы: сцена по высоте — 100 из 162.5
   (полоса сверху 25, снизу 37.5), координаты градиентов пересчитаны в неё. */
.cab[data-strips='true'] .cab__eve {
  inset: -25% 0 -37.5%;
  background:
    linear-gradient(to bottom, rgba(8, 10, 24, 0.28) 15.4%, rgba(8, 10, 24, 0) 43.1%),
    radial-gradient(
      ellipse 85% 43.1% at var(--ex, 17%) calc((var(--ey, 72%) + 25%) / 1.625),
      rgba(22, 15, 10, 0.3) 0%,
      rgba(18, 16, 26, 0.6) 42%,
      rgba(10, 12, 26, 0.84) 100%
    );
}

.cab[data-strips='true'] .cab__vignette {
  inset: -25% 0 -37.5%;
  background: radial-gradient(ellipse 80% 58% at 50% 45%, transparent 55%, rgba(25, 15, 8, 0.5) 100%);
}

/* ── Предметы ─────────────────────────────────────────────────────── */

.cab__item {
  position: absolute;
  pointer-events: none;
  transform-origin: 50% 100%;
}

.cab__item[data-hang='true'] {
  transform-origin: 50% 0;
}

.cab__img,
.cab__frame,
.cab__evening,
.cab__globe {
  position: absolute;
  display: block;
}

/* Смена кадра — только прозрачностью, без масштаба: кадр лежит в своей
   рамке из cut-meta. Уходящий слой гаснет с задержкой, пока появляющийся
   не проявится, иначе посередине перехода просвечивает стена. */
.cab__img {
  transition: opacity 200ms ease;
}

.cab__frame {
  opacity: 0;
  transition: opacity 200ms ease 200ms;
}

.cab__frame[data-kind='part'] {
  opacity: 1;
}

/* Слой нити доски расследований — только маска для вспышки. */
.cab__frame[data-kind='glow'] {
  display: none;
}

.cab__item[data-swapped='true'] .cab__frame,
.cab__item[data-toggled='true'] .cab__frame {
  opacity: 1;
  transition-delay: 0s;
}

/* Задёрнутые портьеры и открытые жалюзи — второй кадр вместо первого. */
.cab__item[data-toggled='true'] > .cab__img {
  opacity: 0;
  transition-delay: 200ms;
}

.cab__evening {
  opacity: 0;
  transition: opacity 600ms ease;
}

.cab__scene[data-evening='true'] .cab__evening {
  opacity: 1;
}

/* Контактная тень: предмет садится на полку и стол, а не висит над ними. */
.cab__contact {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30, 18, 10, 0.5), rgba(30, 18, 10, 0));
  pointer-events: none;
}

/* ── Свет ─────────────────────────────────────────────────────────── */

/* Дневной луч из окна; вечером и за задёрнутыми портьерами его нет. */
.cab__beam {
  position: absolute;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  background: linear-gradient(118deg, transparent 20%, rgba(255, 243, 214, 0.12) 34%, transparent 58%);
  clip-path: polygon(24% 13%, 45.5% 13%, 70% 100%, 10% 100%);
  transition: opacity 600ms ease;
}

.cab__scene[data-evening='true'] .cab__beam,
.cab__scene[data-curtains='closed'] .cab__beam {
  opacity: 0;
}

/* Вечер — неровное затемнение обычным наложением: у лампы светлее, к окну
   и дальним углам темнее. Ровное затемнение делало комнату выключенной,
   а режимы наложения давали пятна на границах слоёв. */
.cab__eve {
  position: absolute;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
  background:
    linear-gradient(to bottom, rgba(8, 10, 24, 0.28), rgba(8, 10, 24, 0) 45%),
    radial-gradient(
      ellipse 85% 70% at var(--ex, 17%) var(--ey, 72%),
      rgba(22, 15, 10, 0.3) 0%,
      rgba(18, 16, 26, 0.6) 42%,
      rgba(10, 12, 26, 0.84) 100%
    );
}

.cab__scene[data-evening='true'] .cab__eve {
  opacity: 1;
}

/* Свет светильника — стопка градиентов с прозрачностью поверх затемнения;
   центр берётся из рамки самого светильника (--lx, --ly, --dy). */
.cab__pool {
  position: absolute;
  inset: 0;
  z-index: 201;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}

.cab__scene[data-evening='true'] .cab__pool {
  opacity: 1;
}

.cab__pool[data-kind='desk'] {
  background:
    radial-gradient(circle at var(--lx) var(--ly), rgba(255, 232, 160, 0.42), rgba(255, 232, 160, 0) 7%),
    radial-gradient(
      ellipse 32% 9.5% at var(--lx) var(--dy),
      rgba(255, 196, 118, 0.72) 0%,
      rgba(255, 180, 100, 0.36) 45%,
      rgba(255, 170, 90, 0) 100%
    ),
    radial-gradient(ellipse 50% 13% at calc(var(--lx) + 2%) calc(var(--dy) - 1.5%), rgba(255, 170, 90, 0.16), rgba(255, 170, 90, 0)),
    radial-gradient(ellipse 26% 19% at var(--lx) calc(var(--ly) - 3%), rgba(255, 186, 108, 0.36), rgba(255, 186, 108, 0)),
    radial-gradient(ellipse 16% 1.6% at 72% 26.3%, rgba(255, 205, 140, 0.1), rgba(255, 205, 140, 0));
}

/* Бра светит конусами вверх и вниз по стене. */
.cab__pool[data-kind='wall'] {
  background:
    radial-gradient(circle at var(--lx) var(--ly), rgba(255, 232, 160, 0.4), rgba(255, 232, 160, 0) 6%),
    radial-gradient(ellipse 9% 14% at var(--lx) calc(var(--ly) - 9%), rgba(255, 196, 118, 0.4), rgba(255, 196, 118, 0)),
    radial-gradient(ellipse 9% 14% at var(--lx) calc(var(--ly) + 11%), rgba(255, 196, 118, 0.34), rgba(255, 196, 118, 0));
}

/* Торшер бьёт в потолок: пятно над чашей и мягкий свет на стене. */
.cab__pool[data-kind='floor'] {
  background:
    radial-gradient(circle at var(--lx) var(--ly), rgba(255, 232, 160, 0.42), rgba(255, 232, 160, 0) 6%),
    radial-gradient(ellipse 22% 12% at var(--lx) calc(var(--ly) - 12%), rgba(255, 196, 118, 0.42), rgba(255, 196, 118, 0)),
    radial-gradient(ellipse 30% 30% at var(--lx) calc(var(--ly) + 12%), rgba(255, 186, 108, 0.2), rgba(255, 186, 108, 0));
}

/* Светящийся абажур поверх затемнения: стекло горит изнутри. */
.cab__lit {
  position: absolute;
  z-index: 202;
  pointer-events: none;
  opacity: 0;
  transition: opacity 450ms ease;
}

.cab__scene[data-evening='true'] .cab__lit {
  opacity: 1;
}

.cab__vignette {
  position: absolute;
  inset: 0;
  z-index: 203;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 75% at 50% 45%, transparent 55%, rgba(25, 15, 8, 0.5) 100%);
}

/* ── Попадание, метки, записка ────────────────────────────────────── */

.cab__hit {
  position: absolute;
  inset: 0;
  z-index: 300;
  cursor: pointer;
}

/* Кнопки вещей — для клавиатуры и экранного диктора; палец идёт через слой попадания. */
.cab__target {
  position: absolute;
  pointer-events: none;
  padding: 0;
  border: 0;
  background: transparent;
}

.cab__target:focus-visible {
  outline: 3px solid var(--lamp);
  outline-offset: -3px;
}

.cab__pins {
  position: absolute;
  inset: 0;
  z-index: 310;
  pointer-events: none;
}

.cab__pin {
  display: none;
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 2px solid var(--lamp);
  border-radius: 22px;
  background: rgba(43, 33, 24, 0.86);
  color: var(--lamp);
  font: 16px/1.1 var(--font-mono);
  letter-spacing: 0.04em;
  /* Название из двух слов («Угол справа») встаёт в две строки: у края сцены
     метка в одну строку вылезла бы за кадр. */
  width: max-content;
  max-width: calc(8ch + 24px);
  padding-block: 4px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.cab[data-arranging='true'] .cab__pin {
  display: block;
}

.cab__pin[aria-expanded='true'] {
  background: var(--accent);
}

/* Мелкая сцена (телефон в ландшафте): метки налезли бы друг на друга,
   место выбирается строкой группы в панели. */
@container (max-width: 320px) {
  .cab[data-arranging='true'] .cab__pin {
    display: none;
  }
}

.cab__note {
  position: absolute;
  z-index: 320;
  /* Ширина по тексту, а не по месту до правого края кадра. */
  width: max-content;
  max-width: 62%;
  padding: 10px 12px;
  transform: translateX(-50%) rotate(-1deg);
  border-radius: 2px;
  background: #f3ecdd;
  color: #2b2118;
  font: 16px/1.35 var(--font-mono);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

@container (max-width: 480px) {
  .cab__note {
    max-width: 86%;
  }
}

.cab__note[hidden] {
  display: none;
}

.cab__note-text {
  display: grid;
}

.cab__note-text::before {
  content: attr(data-full);
  grid-area: 1 / 1;
  visibility: hidden;
}

.cab__note-typed {
  grid-area: 1 / 1;
}

.cab__note-btn {
  display: block;
  margin-top: 8px;
  width: 100%;
  pointer-events: auto;
}

.cab__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ── Движения уровня «а» (docs/cabinet-design.md, 10.1) ───────────── */

.cab-anim--sway {
  animation: cab-sway 1.2s ease-out;
}

.cab-anim--wobble {
  animation: cab-wobble 0.4s linear;
}

.cab-anim--bob {
  animation: cab-bob 0.6s ease-in-out;
}

.cab-anim--squash {
  animation: cab-squash 1.4s ease-in-out;
}

.cab-anim--swing {
  animation: cab-swing 2.4s ease-in-out;
}

.cab-anim--swim {
  animation: cab-swim 2.4s ease-in-out;
}

@keyframes cab-sway {
  15% { transform: rotate(2deg); }
  35% { transform: rotate(-1.6deg); }
  55% { transform: rotate(1.1deg); }
  75% { transform: rotate(-0.6deg); }
}

@keyframes cab-wobble {
  20% { transform: translateX(-1.5px); }
  40% { transform: translateX(1.5px); }
  60% { transform: translateX(-1.5px); }
  80% { transform: translateX(1.5px); }
}

@keyframes cab-bob {
  35% { transform: translateY(2.5%); }
  65% { transform: translateY(-0.6%); }
}

@keyframes cab-squash {
  25% { transform: scale(0.97, 1.06); }
  50% { transform: scale(1.03, 0.96); }
  70% { transform: scale(0.99, 1.02); }
}

@keyframes cab-swing {
  20% { transform: rotate(5deg); }
  45% { transform: rotate(-5deg); }
  70% { transform: rotate(3deg); }
  90% { transform: rotate(-1deg); }
}

@keyframes cab-swim {
  40% { transform: translateX(10%); }
  75% { transform: translateX(-6%); }
}

.cab__glint {
  /* Рамка — как у картинки, по которой идёт блик или вспышка (задаётся в коде). */
  position: absolute;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 222, 0.75) 50%, transparent 62%);
  background-size: 260% 100%;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mix-blend-mode: screen;
  animation: cab-glint 0.9s ease-out both;
}

@keyframes cab-glint {
  from { background-position: 110% 0; }
  to { background-position: -10% 0; }
}

.cab__thread {
  position: absolute;
  background: rgba(255, 96, 72, 0.95);
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mix-blend-mode: screen;
  animation: cab-flash 1.6s ease-in-out both;
}

@keyframes cab-flash {
  0%, 100% { opacity: 0; }
  30%, 60% { opacity: 1; }
}

.cab__glow {
  position: absolute;
  z-index: 150;
  width: 16cqw;
  height: 16cqw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 236, 170, 0.9), rgba(255, 220, 140, 0));
  mix-blend-mode: screen;
  pointer-events: none;
  animation: cab-glow 1.3s ease-out both;
}

@keyframes cab-glow {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
}

/* Частицы: элемент высотой с рамку, видимая точка — у его верха, поэтому
   сдвиг в процентах собственной высоты проходит всю рамку. */
.cab__particles {
  position: absolute;
  z-index: 150;
  overflow: hidden;
  pointer-events: none;
}

.cab__particle {
  position: absolute;
  top: 0;
  width: 6px;
  height: 100%;
  animation-fill-mode: both;
}

.cab__particle::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
}

.cab__particles--rain .cab__particle {
  animation: cab-fall 1.1s linear both;
}

.cab__particles--rain .cab__particle::before {
  width: 1.5px;
  height: 9%;
  background: linear-gradient(rgba(230, 236, 240, 0), rgba(230, 236, 240, 0.85));
}

.cab__particles--snow .cab__particle {
  animation: cab-snow 2.2s ease-in both;
}

.cab__particles--snow .cab__particle::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

.cab__particles--bubbles .cab__particle {
  animation: cab-rise 1.6s ease-out both;
}

.cab__particles--bubbles .cab__particle::before {
  width: 6px;
  height: 6px;
  border: 1px solid rgba(235, 245, 240, 0.8);
  border-radius: 50%;
}

.cab__particles--dust .cab__particle {
  animation: cab-dust 1.8s ease-out both;
}

.cab__particles--dust .cab__particle::before {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 243, 214, 0.8);
}

.cab__particles--notes .cab__particle {
  width: auto;
  color: var(--lamp);
  font: 20px/1 var(--font-serif);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  animation: cab-note 1.6s ease-out both;
}

.cab__particles--notes .cab__particle::before {
  content: none;
}

@keyframes cab-fall {
  from { transform: translateY(-10%); opacity: 0; }
  10% { opacity: 1; }
  to { transform: translateY(100%); opacity: 0.9; }
}

@keyframes cab-snow {
  from { transform: translate(0, -5%); opacity: 0; }
  15% { opacity: 1; }
  50% { transform: translate(6px, 45%); }
  to { transform: translate(-4px, 100%); opacity: 0.8; }
}

@keyframes cab-rise {
  from { transform: translateY(88%); opacity: 0; }
  15% { opacity: 1; }
  to { transform: translateY(10%); opacity: 0; }
}

@keyframes cab-dust {
  from { transform: translate(0, 75%); opacity: 0; }
  25% { opacity: 1; }
  to { transform: translate(8px, 20%); opacity: 0; }
}

@keyframes cab-note {
  from { transform: translate(0, 60%); opacity: 0; }
  25% { opacity: 1; }
  to { transform: translate(10px, 0); opacity: 0; }
}

/* ── Панель выбора ────────────────────────────────────────────────── */

.cab__panel {
  --panel-w: clamp(300px, 30cqw, 420px);
  container: cab-panel / inline-size;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: 60%;
  display: flex;
  flex-direction: column;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
  transform: translateY(105%);
  transition: transform 320ms ease;
}

.cab[data-panel='open'] .cab__panel {
  transform: none;
}

.cab__idle {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  font-size: 16px;
}

.cab__idle p {
  margin: 0;
}

.cab__panel-head {
  display: grid;
  gap: 8px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--rule);
}

.cab__panel-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cab__panel-line .cab__panel-title {
  margin-right: auto;
}

.cab__panel-line .btn {
  margin-left: 0;
  padding: 8px 14px;
}

.cab__panel-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
}

.cab__purse {
  font-size: 16px;
  color: var(--ink-soft);
}

.cab__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Вкладки переносятся на вторую строку, а не уезжают вбок: в прокрутке
   крайняя вкладка обрезалась бы посреди слова. */

.cab__tab {
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--rule);
  border-radius: 22px;
  background: transparent;
  color: var(--ink);
  font: 16px/1 var(--font-mono);
}

.cab__tab[aria-selected='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.cab__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
}

/* Правая колонка строки фиксированной ширины, у строки — постоянная
   минимальная высота: смена «Купить» → «Стоит сейчас» не сдвигает список. */
.cab__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 150px;
  flex-shrink: 0;
  min-height: 72px;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1.5px solid var(--rule);
  background: rgba(43, 33, 24, 0.04);
}

.cab__row[data-current='true'] {
  border-color: var(--accent);
}

.cab__thumb {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 3px;
  background: var(--paper-dark);
  color: var(--ink-soft);
  font: 700 22px var(--font-serif);
}

.cab__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cab__thumb-plate {
  max-width: 100%;
  max-height: 100%;
  background-repeat: no-repeat;
}

.cab__row-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.cab__row-where {
  font-size: 16px;
  line-height: 1.25;
  color: var(--accent);
}

.cab__row-note {
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink-soft);
}

.cab__row-state {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 46px;
  font-size: 16px;
  line-height: 1.25;
  text-align: right;
  color: var(--ink-soft);
}

.cab__row-btn {
  width: 100%;
  min-height: 46px;
  padding: 6px 8px;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.cab__panel-foot {
  margin: 0;
  padding: 6px 12px 8px;
  border-top: 1px solid var(--rule);
}

.cab__groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cab__group {
  padding: 8px 12px;
  letter-spacing: 0.04em;
}

/* Мелкий текст выбора в шторке и на низком экране: список должен помещаться. */
@media (orientation: portrait), (max-height: 500px) {
  .cab__row-note {
    display: none;
  }

  .cab__row {
    grid-template-columns: 48px minmax(0, 1fr) 140px;
    min-height: 64px;
    gap: 8px;
    padding: 6px;
  }

  .cab__thumb {
    width: 48px;
    height: 48px;
  }
}

/* Узкая панель (колонка справа в ландшафте, шторка телефона): кнопка и
   состояние уходят под название. Три колонки в 300 px оставляли названию
   20 px — оно шло по букве в строку. */
@container cab-panel (max-width: 460px) {
  .cab__row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    row-gap: 6px;
  }

  .cab__thumb {
    grid-row: 1 / span 2;
  }

  .cab__row-state,
  .cab__row-btn {
    grid-column: 2;
  }

  .cab__row-state {
    justify-content: flex-start;
    min-height: 0;
    font-size: 16px;
    text-align: left;
  }

  .cab__row-btn {
    justify-self: start;
    width: auto;
    min-width: 150px;
    padding: 6px 16px;
  }
}

/* ── Панель действий внизу ────────────────────────────────────────── */

/* На узком экране панель действий прячет второстепенные кнопки дела;
   у кабинета «Назад» и «Расставить» — главные, они остаются. */
.bar .btn--ghost.cab__bar-btn:not([hidden]) {
  display: block;
  white-space: nowrap;
}

.cab__bar-btn[aria-pressed='true'] {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.cab__coins {
  display: none;
  margin-left: auto;
  font-size: 16px;
  color: var(--on-desk);
  white-space: nowrap;
}

.cab__coin {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
  .cab__coins {
    display: flex;
    align-items: center;
    gap: 3px;
  }

  /* Монеты и жетоны рядом: второй значок отбит от числа монет. */
  .cab__coin + span + .cab__coin {
    margin-left: 6px;
  }

  .cab__coin {
    width: 20px;
    height: 20px;
  }
}

/* 360 px: монеты и жетоны в два ряда, иначе рядом с двумя кнопками не влезают. */
@media (max-width: 380px) {
  .cab__coins {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 0 4px;
    line-height: 1.3;
  }

  .cab__coin + span + .cab__coin {
    margin-left: 0;
  }
}

/* ── Ландшафт: сцена по высоте, панель справа ─────────────────────── */

@media (orientation: landscape) {
  .cab {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }

  .cab__stage {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    height: 100%;
  }

  .cab__view {
    width: min(calc(100cqw - var(--panel-w) - 16px), 75cqh);
  }

  .cab__panel {
    position: relative;
    flex: 0 0 var(--panel-w);
    height: 100%;
    border-radius: var(--radius);
    transform: none;
    box-shadow: 0 14px 34px var(--shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cab-anim--sway,
  .cab-anim--wobble,
  .cab-anim--bob,
  .cab-anim--squash,
  .cab-anim--swing,
  .cab-anim--swim {
    animation: none;
  }

  .cab__glint,
  .cab__thread,
  .cab__glow,
  .cab__particles {
    display: none;
  }

  .cab__scene,
  .cab__panel,
  .cab__img,
  .cab__frame,
  .cab__evening,
  .cab__eve,
  .cab__pool,
  .cab__lit,
  .cab__beam {
    transition: none;
  }
}