/* The front-room panel: films on the television, records on the radiogram, books on the coffee table. */
.upv-back { position: fixed; inset: 0; z-index: 50; background: rgba(20, 23, 33, 0.88); display: flex; align-items: center; justify-content: center; padding: 16px; }
.upv-back[hidden] { display: none; }
.upv-card { background: #FBFAF6; color: #1B1B1A; border: 2px solid #1B1B1A; width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; font-family: 'Special Elite', 'Courier New', monospace; font-size: 18px; line-height: 1.4; letter-spacing: 0; }
.upv-card.big { width: min(1240px, 100%); }
.upv-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 10px 14px; border-bottom: 2px solid #1B1B1A; }
.upv-title { margin: 0; font-size: 20px; font-weight: 400; flex: 1 1 200px; min-width: 0; }
.upv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.upv-tools a { color: #1B1B1A; min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 3px; }
.upv-close { min-height: 44px; padding: 8px 16px; background: #1B1B1A; color: #FBFAF6; border: 0; font: inherit; cursor: pointer; }
.upv-close:hover { background: #000; }
.upv-close:focus-visible, .upv-tools a:focus-visible { outline: 3px solid #FFC24A; outline-offset: 2px; }
.upv-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px; display: flex; flex-direction: column; align-items: center; }
.upv-body iframe { border: 0; display: block; background: #000; }

/* Television: the film plays in the screen */
.upv-tv { position: relative; width: min(100%, calc((100vh - 150px) * 1200 / 900)); aspect-ratio: 1200 / 900; background: url(images/tv.jpg) center / contain no-repeat; }
.upv-tv iframe { position: absolute; left: 19.17%; top: 21.67%; width: 44.17%; height: 47.78%; border-radius: 7% / 9%; }

/* Radiogram and coffee table: the record or book stands on the furniture */
.upv-stack { width: 100%; display: flex; flex-direction: column; align-items: center; }
.upv-stack iframe { width: 100%; height: clamp(320px, calc(100vh - 340px), 900px); border: 2px solid #1B1B1A; background: #fff; }
.upv-stack.bare iframe { height: clamp(360px, calc(100vh - 130px), 1100px); }
.upv-stack.player iframe { max-width: 700px; height: 472px; }
.upv-furn { display: block; width: min(100%, 760px); max-height: 24vh; object-fit: contain; }

@media (max-width: 700px) {
  .upv-back { padding: 0; }
  .upv-card, .upv-card.big { width: 100%; height: 100%; border: 0; }
  .upv-tv { width: 100%; aspect-ratio: auto; background: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .upv-tv iframe { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; border: 10px solid #B9BDB4; border-radius: 22px; outline: 3px solid #9A6A3E; }
  .upv-tv::after { content: ''; display: block; width: 70%; aspect-ratio: 1200 / 900; background: url(images/tv.jpg) center / contain no-repeat; }
  .upv-stack iframe { height: clamp(300px, calc(100vh - 250px), 900px); }
  .upv-furn { max-height: 16vh; }
}
@media (max-height: 620px) { .upv-furn, .upv-tv::after { display: none; } }