/* AGE-363: a deliberate player, with output controls beneath the artwork. */
.deck-showcase-dialog {
  width: min(920px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 20px; overflow: auto; overscroll-behavior: contain;
  color: var(--text, #e7e9ee); background: var(--panel, #1b1e23);
  border: 1px solid var(--border, #2c2f36); border-radius: 16px;
  box-shadow: 0 24px 80px #0008; box-sizing: border-box;
}
.deck-showcase-dialog::backdrop { background: #080a0dd9; backdrop-filter: blur(8px); }
.deck-showcase-dialog[open] { display: flex; flex-direction: column; gap: 16px; }
.deck-showcase-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.deck-showcase-dialog .deck-showcase-header h2 { margin: 0 0 4px; font: 700 1.15rem/1.3 Archivo, sans-serif; }
.deck-showcase-header p { margin: 0; font-size: .8rem; color: var(--text-muted, #a3abb8); }
.deck-showcase-dialog .deck-showcase-close { flex: none; font-size: 1.5rem; padding: 0; }
.deck-showcase-stage {
  display: flex; justify-content: center; align-items: center; width: 100%; min-width: 0;
  background: #101215; border: 1px solid var(--border, #2c2f36); border-radius: 10px; overflow: hidden;
}
.deck-showcase-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.deck-showcase-stage[data-format="mobile"] canvas { width: auto; max-width: 100%; max-height: 52dvh; aspect-ratio: 9 / 16; }
.deck-showcase-playback { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.deck-showcase-timeline { flex: 1; min-width: 100px; display: flex; align-items: center; min-height: 44px; }
.deck-showcase-timeline input { width: 100%; min-width: 0; min-height: 44px; margin: 0; accent-color: var(--accent, #5e6ad2); cursor: pointer; }
.deck-showcase-time { font: 500 11px/1.5 'IBM Plex Mono', monospace; color: var(--text-muted, #a3abb8); white-space: nowrap; }
.deck-showcase-output { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.deck-showcase-output label { font-size: .8rem; color: var(--text-muted, #a3abb8); }
.deck-showcase-output select { max-width: 100%; min-height: 44px; padding: 8px 12px; color: var(--text, #e7e9ee); background: var(--panel-sunken, #101215); border: 1px solid var(--border, #2c2f36); border-radius: 6px; font: inherit; font-size: .8rem; }
.deck-showcase-dialog button { min-height: 44px; min-width: 44px; font-family: Archivo, sans-serif; }
.deck-showcase-dialog :is(.deck-showcase-download,.deck-showcase-save) { margin-left: auto; background: var(--accent, #5e6ad2); color: #fff; border-color: var(--accent, #5e6ad2); }
.deck-showcase-dialog .deck-showcase-save { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; min-width: 44px; font-family: Archivo, sans-serif; text-decoration: none; }
.deck-showcase-output.has-video .deck-showcase-download { margin-left: 0; background: var(--panel-raised, #23262c); color: var(--text, #e7e9ee); border-color: var(--border, #2c2f36); }
.deck-showcase-dialog :disabled { opacity: .55; cursor: not-allowed; }
.deck-showcase-dialog [hidden] { display: none !important; }
.deck-showcase-status { margin: 0; min-height: 1.5em; font-size: .82rem; line-height: 1.5; color: var(--text-muted, #a3abb8); overflow-wrap: anywhere; }
.deck-showcase-status.is-error { color: var(--bad, #e0554a); }
.deck-showcase-note { margin: -6px 0 0; font-size: .75rem; line-height: 1.5; color: var(--text-muted, #a3abb8); }
.deck-showcase-dialog :is(button, input, select, a):focus-visible { outline: 2px solid var(--accent, #5e6ad2); outline-offset: 3px; }
@media (max-width: 640px) {
  .deck-showcase-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 16px; gap: 12px; border-radius: 12px; }
  .deck-showcase-dialog[open] { gap: 12px; }
  .deck-showcase-timeline { order: 3; flex-basis: calc(100% - 100px); }
  .deck-showcase-time { order: 4; }
  .deck-showcase-output label { flex-basis: 100%; }
  .deck-showcase-output select { flex: 1; min-width: 0; }
  .deck-showcase-dialog .deck-showcase-download { margin-left: 0; flex: 1; }
  .deck-showcase-dialog .deck-showcase-save { margin-left: 0; flex-basis: 100%; }
  .deck-showcase-stage[data-format="mobile"] canvas { max-height: 46dvh; }
}
@media (prefers-reduced-motion: reduce) { .deck-showcase-dialog { scroll-behavior: auto; } }