/* The film always shares the stage with the break clock and the score table. */
.break-cinema[hidden], .break-cinema [hidden] { display: none !important; }
.break--cinema,
.break--cinema:has(.break__side[hidden]) {
  grid-template-columns: minmax(0, 1fr) minmax(270px, 27%);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: 'header header' 'film scores';
  gap: var(--p-space-600); padding: var(--p-space-800); align-items: center;
}
.break--cinema .break__main {
  grid-area: header; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto; text-align: left; align-items: center;
  column-gap: var(--p-space-600); row-gap: var(--p-space-100);
  padding-bottom: var(--p-space-400); border-bottom: 1px solid var(--p-color-border-secondary);
}
.break--cinema .break__eyebrow { grid-column: 2; align-self: end; font-size: clamp(0.7rem, 1vw, 1rem); }
.break--cinema .break-ring { grid-column: 1; grid-row: 1 / 3; width: min(14vh, 150px); }
.break--cinema .break__title { grid-column: 2; font-size: clamp(1.6rem, 2.8vw, 3rem); }
.break--cinema .break__message { grid-column: 3; grid-row: 1 / 3; font-size: clamp(0.9rem, 1.3vw, 1.3rem); max-width: 30ch; text-align: right; }
.break--cinema .break__side { grid-area: scores; align-self: center; max-height: 100%; overflow-y: auto; }
.break--cinema .break__side h2 { font-size: clamp(1rem, 1.5vw, 1.65rem); }
.break--cinema .break__table { gap: var(--p-space-200); }
.break--cinema .break-row { gap: var(--p-space-200); padding: var(--p-space-300); font-size: clamp(0.85rem, 1.2vw, 1.25rem); border-left-width: var(--p-space-100); }
.break--cinema .break-row__rank { min-width: 2ch; }
.break-cinema { grid-area: film; min-width: 0; width: 100%; max-width: calc(66vh * 16 / 9); align-self: center; }
.break-cinema__heading { display: flex; justify-content: space-between; gap: var(--p-space-300); align-items: center; margin-bottom: var(--p-space-300); }
.break-cinema__controls { display: flex; align-items: center; gap: var(--p-space-300); }
.break-cinema__controls button { min-width: 44px; min-height: 44px; }
.break-cinema__label { font-weight: var(--p-font-weight-bold); letter-spacing: 0.1em; font-size: clamp(0.75rem, 1vw, 1.1rem); }
.break-cinema__counter { color: var(--p-color-text-secondary); font-size: clamp(0.65rem, 0.9vw, 0.95rem); letter-spacing: 0.08em; white-space: nowrap; }
.break-cinema__frame { position: relative; aspect-ratio: 16 / 9; max-height: 66vh; overflow: hidden; border: 1px solid var(--p-color-border); border-radius: var(--p-border-radius-400); background: var(--p-color-bg); box-shadow: var(--p-shadow-300); }
.break-cinema__video { display: block; width: 100%; height: 100%; object-fit: contain; }
.break-cinema__waiting { position: absolute; inset: 0; display: flex; align-items: end; }
.break-cinema__waiting img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0.55; }
.break-cinema__waiting::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 15%, var(--p-color-bg) 100%); }
.break-cinema__copy { position: relative; z-index: 1; padding: var(--p-space-800); }
.break-cinema__copy h2 { font-size: clamp(1.4rem, 3vw, 3rem); line-height: 1.1; }
.break-cinema__copy p { color: var(--p-color-text-secondary); font-size: clamp(0.9rem, 1.3vw, 1.4rem); margin-top: var(--p-space-300); }
.break-cinema__sound { position: absolute; z-index: 2; right: var(--p-space-400); top: var(--p-space-400); min-height: 44px; box-shadow: var(--p-shadow-200); }
.break-cinema__progress { height: var(--p-space-100); margin: var(--p-space-200) var(--p-space-200) 0; overflow: hidden; border-radius: var(--p-border-radius-full); background: var(--p-color-bg-surface-active); }
.break-cinema__progress i { display: block; height: 100%; background: var(--p-color-bg-fill-info); transform-origin: left; }
@media (max-width: 800px), (orientation: portrait) {
  .break--cinema, .break--cinema:has(.break__side[hidden]) { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: 'header' 'film' 'scores'; gap: var(--p-space-300); padding: var(--p-space-400); }
  .break--cinema .break__main { column-gap: var(--p-space-300); grid-template-columns: auto minmax(0, 1fr); }
  .break--cinema .break__message { display: none; }
  .break--cinema .break-ring { width: 11vh; }
  .break--cinema .break__side { align-self: start; width: 100%; }
  .break--cinema .break__table { display: flex; }
  .break--cinema .break-row { flex-wrap: nowrap; padding: var(--p-space-200); }
  .break--cinema .break-row__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .break--cinema .break-row__pts { margin-left: auto; }
  .break-cinema__frame { max-height: 39vh; }
  .break-cinema { max-width: none; }
  .break-cinema__copy { padding: var(--p-space-400); }
}