/* THE LOOP PLAYER. The page wears the free tools' family look (kiosk.css); this
   file is only the player and what differs from the kiosk page. The player is a
   TV, so the plinth gets a thinner, straighter bezel than the kiosk's tablet. */
.screen--tv { aspect-ratio: 16 / 9; border-radius: 10px; padding: 8px; }

/* Two stacked layers: the next item loads in the hidden one, then they cross-fade,
   so there is never a black frame, a spinner or a file name between items. */
.lp { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; border-radius: 4px; container-type: size; user-select: none; -webkit-user-select: none; }
.lp__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; }
.lp__layer.on { opacity: 1; }
.lp__layer video, .lp__layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lp[data-fit="whole"] .lp__layer video, .lp[data-fit="whole"] .lp__layer img { object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .lp__layer { transition: none; } }

/* the owner's line of text: a bar along the bottom in their color */
.lp__cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.6cqh 3cqw; text-align: center; z-index: 2;
  font: 750 clamp(9px, min(4.4cqh, 6cqw), 44px)/1.2 "Archivo", system-ui, sans-serif; color: #0b0b0b; background: var(--accent); }
.lp__cap[hidden] { display: none; }
/* the free credit: a few seconds in the corner each time the loop starts over */
.lp__credit { position: absolute; right: 2cqw; top: 2cqh; margin: 0; z-index: 2; padding: 0.6cqh 1.4cqh; border-radius: 99px;
  font: 500 clamp(6px, min(2cqh, 3cqw), 15px) "Inter", sans-serif; color: rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.45);
  opacity: 0; transition: opacity 0.6s ease; }
.lp__credit.show { opacity: 1; }

/* run mode: the same element, the whole screen, no pointer */
.lp.run { position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; cursor: none; }
.lp.run .lp__corner { display: block; }
.lp:fullscreen { width: 100%; height: 100%; }

/* setup: rows show the kind of file and how long it plays, not an editable label */
.lp-rail .row { grid-template-columns: 22px 92px minmax(0, 1fr) auto; }
.row__kind { font: 600 0.78rem "Inter", sans-serif; color: var(--aqua); }
@media (max-width: 480px) { .lp-rail .row { grid-template-columns: 70px minmax(0, 1fr); } }

/* the free side of the comparison: one plain video, filling a plain screen */
.vs__screen--loop { background: linear-gradient(135deg, #2a3350, #121417); display: grid; place-items: center; }
.vs__screen--loop b { font: 800 clamp(0.8rem, 1.8vw, 1.1rem) "Archivo", sans-serif; color: rgba(244, 241, 234, 0.8); }
.vs__screen--loop span { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--yellow) 40%, rgba(255, 255, 255, 0.15) 40%); }