/* Живые видео находятся вне перерисовываемого #app и не зависят от раскрытия настроек. */
.game-shell {
  width: calc(100% - 48px);
  max-width: 1224px;
  margin: 0 auto 24px;
}
.game-shell > main {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}
/* Узкие экраны: компактная лента под игрой, прокручиваемая внутри своего блока. */
#videos {
  display: flex;
  gap: 12px;
  overflow-x: auto;
}
#videos:has(.video-wrap:not([hidden])) {
  margin-top: 20px;
  padding: 0 0 8px;
}
.camera-rail, .camera-tiles {
  display: contents;
}
.video-wrap {
  flex: 0 0 clamp(140px, 24vw, 200px);
  min-width: 0;
  padding: 6px;
  border: var(--line);
  border-radius: 18px;
  background: var(--lilac);
  box-shadow: 0 4px 0 #3b2168;
}
.video-wrap video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 11px;
  background: #291b45;
  object-fit: cover;
}
.video-caption {
  padding: 8px 6px 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
/* Колонки занимают место только при наличии потока, не закрывая игровое поле. */
@media (min-width: 1400px) {
  .game-shell {
    --camera-left: 0px;
    --camera-right: 0px;
    display: grid;
    grid-template-columns: var(--camera-left) minmax(0, 1fr) var(--camera-right);
    align-items: start;
    max-width: calc(1224px + var(--camera-left) + var(--camera-right));
  }
  .game-shell[data-cameras-left="true"] { --camera-left: 220px; }
  .game-shell[data-cameras-right="true"] { --camera-right: 220px; }
  .game-shell > main {
    grid-column: 2;
    grid-row: 1;
  }
  #videos, #videos:has(.video-wrap:not([hidden])) {
    display: contents;
    margin: 0;
    padding: 0;
  }
  .camera-rail {
    display: block;
    position: sticky;
    top: 20px;
    grid-row: 1;
    min-width: 0;
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 8px;
  }
  .camera-rail-left {
    grid-column: 1;
    padding-right: 20px;
  }
  .camera-rail-right {
    grid-column: 3;
    padding-left: 20px;
  }
  .camera-tiles {
    display: grid;
    gap: 14px;
  }
}
@media (max-width: 760px) {
  .game-shell { width: calc(100% - 28px); }
}