/* DisplayGURU player. Pairing, identify and offline states follow the
   design system (player.html, pl-* classes); content is drawn by slides.js,
   the same renderer the dashboard uses for previews. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; cursor: none; }
body { font-family: var(--font-body, system-ui, sans-serif); color: #fff; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
#root { position: fixed; inset: 0; }
h1, p { margin: 0; }

/* Slide renderer (from dg.css) */
.dg-slide { position: absolute; inset: 0; container-type: size; overflow: hidden; }
.dg-in { --u: min(1cqw, 1.78cqh); position: absolute; inset: 0; display: flex; line-height: 1.15; font-family: var(--font-body); text-align: left; color: #1C1714; }
.dg-in > * { flex: 1; min-width: 0; }
.dg-tick { display: inline-block; padding-left: 100%; animation: dgTick linear infinite; white-space: nowrap; }
@keyframes dgTick { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes dgFade { from { opacity: 0; } to { opacity: 1; } }

/* Boot */
.pl-boot { position: absolute; inset: 0; background: #14131A; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; color: #9C9189; font-size: 2.4vh; font-weight: 600; }

/* Pairing (sized in vh so it reads on any TV) */
.pl-pair { position: absolute; inset: 0; background: #14131A; display: flex; flex-direction: column; padding: 6vh 6vw 5vh; color: #fff; }
.pl-brand { display: flex; align-items: center; gap: 14px; font-family: var(--font-brand); font-weight: 800; letter-spacing: -.035em; font-size: 3.4vh; }
.pl-brand img { width: 5vh; height: 5vh; }
.pl-brand b { color: #8EA8FF; }
:root { --pl-accent: #3B5BFF; }
.pl-pair-body { flex: 1; display: flex; align-items: center; gap: 6vw; }
.pl-col { flex: 1; display: flex; flex-direction: column; gap: 2.4vh; min-width: 0; }
.pl-pair h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; font-size: 7vh; line-height: 1; }
.pl-lede { font-size: 2.8vh; color: #C9C1BA; max-width: 44ch; line-height: 1.4; }
.pl-lede b { color: #fff; }
.pl-code { display: flex; gap: 1.4vh; margin-top: 1vh; }
.pl-code span { width: 11vh; height: 14vh; border-radius: 2vh; background: #22202B; box-shadow: inset 0 0 0 2px #3B3747; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 8vh; color: #fff; }
.pl-code span:nth-child(4) { margin-left: 2vh; }
.pl-small { font-size: 2.1vh; color: #9C9189; }
.pl-qr { display: flex; flex-direction: column; align-items: center; gap: 1.6vh; flex: none; }
.pl-qr > div { width: 30vh; height: 30vh; border-radius: 2vh; background: #fff; box-shadow: 0 0 0 2vh #fff; }
.pl-qr > div svg { width: 100%; height: 100%; display: block; }
.pl-qr span { margin-top: 2vh; font-family: var(--font-mono); font-size: 1.9vh; color: #B3AAA2; }
.pl-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 3vw; font-size: 1.9vh; color: #9C9189; }
.pl-foot span { display: inline-flex; align-items: center; gap: 8px; }
.pl-dot { width: 1.2vh; height: 1.2vh; border-radius: 99px; background: #2E9A63; }
.pl-dot.off { background: transparent; box-shadow: inset 0 0 0 .25vh #E5484D; }
.pl-done { justify-content: center; align-items: center; text-align: center; gap: 1.2vh; }
.pl-done h1 { margin-top: 3vh; }
.pl-ok { width: 14vh; height: 14vh; border-radius: 999px; background: #2E9A63; display: grid; place-items: center; animation: dgFade .3s; }
.pl-ok svg { width: 7vh; height: 7vh; }
.pl-identify { position: absolute; inset: 0; z-index: 30; background: var(--pl-accent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; text-align: center; color: #fff; animation: dgFade .25s; }
.pl-identify img { width: 9vh; height: 9vh; }
.pl-identify b { font-family: var(--font-brand); font-weight: 800; letter-spacing: -.035em; font-size: 10vh; line-height: 1; padding: 0 4vw; }
.pl-identify span { font-size: 3vh; color: #DDE6FF; }
.pl-offline { position: absolute; right: 2vh; bottom: 2vh; z-index: 25; display: inline-flex; align-items: center; gap: 8px; background: rgba(20,19,26,.82); color: #EDE7E1; font-size: max(13px, 1.6vh); font-weight: 600; padding: 8px 12px; border-radius: 999px; animation: dgFade .3s; }
@media (max-aspect-ratio: 1/1) {
  .pl-pair-body { flex-direction: column; align-items: flex-start; justify-content: center; }
  .pl-code span { width: 6vh; height: 8vh; font-size: 4.6vh; }
  .pl-pair h1 { font-size: 5vh; }
  .pl-qr > div { width: 22vh; height: 22vh; }
}

/* Playback */
.stage { position: absolute; inset: 0; background: #000; overflow: hidden; }
.stage.rotated { width: 100vh; height: 100vw; inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); }
.blank { position: absolute; inset: 0; background: #000; z-index: 10; }
.zone { position: absolute; overflow: hidden; }
.layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; }
.layer.cut { transition: none; }
.layer.in { opacity: 1; }
.layer > img, .layer > video, .layer > iframe { width: 100%; height: 100%; display: block; border: 0; }
.fit-cover .layer > img, .fit-cover .layer > video { object-fit: cover; }
.fit-contain .layer > img, .fit-contain .layer > video { object-fit: contain; }
.fit-fill .layer > img, .fit-fill .layer > video { object-fit: fill; }

.empty-zone { position: absolute; inset: 0; background: #14131A; }