/* Desktop: the game page must fit one screen with no scrolling.
   Compact chrome + JS-driven zoom of the board (tmc-play-fit.js). */
@media (min-width: 1024px) {
  .tmc127-play-page {
    min-height: calc(100vh - var(--tmc-header-h, 96px));
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
  }
  .tmc127-play-hero {
    padding: 10px 16px 8px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    text-align: left;
  }
  .tmc127-play-hero h1 {
    font-size: 22px;
    margin: 0;
  }
  .tmc127-play-hero p {
    flex-basis: 100%;
    margin: 2px 0 0;
    font-size: 13px;
    opacity: .85;
  }
  .tmc127-play-kicker { margin: 0; }
  .tmc127-play-actions { margin: 0 0 0 auto; }
  /* help drawer collapses into a compact bar on desktop */
  .tmc127-play-help { margin: 12px auto 0; }
  .tmc127-game-help { margin: 4px 16px; }
  .tmc127-play-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .tmc127-play-stage > * { width: 100%; }
  .tmc-demo-banner { margin-bottom: 8px; padding: 7px 12px; font-size: 12px; }
}

/* Owner 2026-10-17 "на компе сделай игры крупнее и чтоб не скакал размер, на телефоне всё ок": on a desktop play page the
   cabinet is laid out wide - title, counters, status and the two controls in a left column, the board on the right - so the
   cabinet is about as tall as the board alone and the fit zoom (tmc-play-fit.js) shrinks it far less. Phones keep the stack;
   the controls stay in the cabinet's flow. */
@media (min-width: 1024px) {
  .tmc127-play-stage .tmcrv-stage {
    display: grid !important;
    grid-template-columns: minmax(250px, 320px) minmax(0, 640px);
    grid-auto-rows: auto;
    align-items: start;
    justify-content: center;
    column-gap: 28px;
    row-gap: 16px;
    max-width: 1080px;
  }
  .tmc127-play-stage .tmcrv-stage > :not(.tmcrv-board):not(.tmcrv-marquee) { grid-column: 1; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-head { grid-row: 1; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-status { grid-row: 2; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-controls { grid-row: 3; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-board,
  .tmc127-play-stage .tmcrv-stage > .tmcrv-board.is-live-render {
    grid-column: 2; grid-row: 1 / span 8; align-self: center; width: 100%; max-width: 640px; margin: 0;
  }
  /* the header was built for a wide strip above the board: in the column it gets plain padding, counters and controls stack */
  .tmc127-play-stage .tmcrv-stage > .tmcrv-head { padding: 18px 16px 16px !important; grid-template-columns: minmax(0, 1fr) !important; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-head .tmcrv-title { padding-inline: 34px !important; }
  .tmc127-play-stage .tmcrv-hud { grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; gap: 8px !important; }
  .tmc127-play-stage .tmcrv-hud-chip { width: 100% !important; }
  .tmc127-play-stage .tmcrv-controls { grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; }
  .tmc127-play-stage .tmcrv-controls .tmcrv-btn { width: 100% !important; }
  /* Owner 2026-10-18 ("на компе сделай равномерно внутри сектора размещение элементов, сейчас по бокам много воздуха"): the
     fit zoom shrinks the grid, so a full-width cabinet frame kept wide empty strips on both sides. The frame now hugs its
     two columns and stays centred; the board and side column keep their size and order. */
  .tmc127-play-stage > .tmcrv-wrap { width: fit-content !important; max-width: 100%; margin-inline: auto; }
}

/* Owner 2026-10-17 "после выигрыша вылетает чек и картинка ужимается, надо чтоб на компе норм было всегда, на мобиле всё ок":
   on a desktop play page nothing that appears after the reveals resizes the cabinet. The result card slides in over the
   side column (absolute, it does not add height); the win feed only takes the room left in the side column;
   the empty upsell box is not shown. Phones keep everything below the board. */
@media (min-width: 1024px) {
  /* owner 2026-10-17 "убери этот дурацкий попап на всех играх он все закрывает, сделай чтоб он слева вылетал на 5 сек в
     рамках игры": the card slides in from the left over the side column only (the board stays in view), 5 s, then slides back */
  .tmc127-play-stage .tmcrv-stage { position: relative; }
  /* owner 2026-10-18: the card sits under the side column's counters and buttons (rows 4-8, where the feed is), never over them */
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary {
    grid-column: 1 / 2 !important; grid-row: 4 / span 5 !important; position: absolute; inset: 0; z-index: 700; margin: 0;
    overflow: hidden auto; overscroll-behavior: contain; display: block; padding: 0; box-sizing: border-box;
    scrollbar-width: none; /* owner 2026-10-18: no scroll bar; fitDesktopCard() keeps the content inside */
    background: #04070e; border-radius: 14px; /* opaque: the covered controls do not show through */
    animation: tmcrvCardIn .34s cubic-bezier(.2, .9, .25, 1) both;
  }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary.is-leaving { animation: tmcrvCardOut .3s ease-in both; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary[hidden] { display: none; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary .tmcrv-result-report { max-width: none; min-height: 100%; padding: 16px 14px !important; font-size: 13px; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary .tmcrv-summary-title { font-size: 19px; line-height: 1.2; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary .tmcrv-result-rows li { padding-block: 6px; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary::-webkit-scrollbar { display: none; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary .tmcrv-btn { width: 100%; min-height: 0; margin: 8px 0 0; padding: 9px 10px; font-size: 13px; line-height: 1.2; letter-spacing: .06em; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary .tmcrv-result-report { display: flex; flex-direction: column; min-height: 0; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary [hidden] { display: none !important; } /* folded rows: the row grid would override [hidden] */
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary .tmcrv-result-report p { margin: 6px 0; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary .tmcrv-result-report section { margin-top: 0; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary .tmcrv-result-report nav { display: none; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary .tmcrv-more { color: #8f9bb0; font-size: 12px; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary .tmcrv-result-report { padding: 12px 12px !important; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary .tmcrv-result-report .tmcrv-summary-title { font-size: 16px; margin: 0 0 8px; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary .tmcrv-result-report h4 { font-size: 14px; margin: 0 0 4px; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary .tmcrv-result-rows li { padding-block: 4px; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-summary .tmcrv-result-links a { width: 100%; }
  @keyframes tmcrvCardIn { from { transform: translateX(-24px); clip-path: inset(0 100% 0 0 round 14px); opacity: .4; } to { transform: none; clip-path: inset(0 0 0 0 round 14px); opacity: 1; } }
  @keyframes tmcrvCardOut { from { transform: none; clip-path: inset(0 0 0 0 round 14px); opacity: 1; } to { transform: translateX(-24px); clip-path: inset(0 100% 0 0 round 14px); opacity: 0; } }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-feed { grid-row: 4 / span 5; align-self: stretch; min-height: 0; contain: size; overflow: hidden auto; }
  .tmc127-play-stage .tmcrv-stage > .tmcrv-upsell:empty { display: none; }
}