* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

.screen { position: fixed; inset: 0; }
.fill { position: absolute; inset: 0; }

/* ---- Pairing screen ---- */
#pairing-screen {
  background: #0b0d11;
  align-items: center; justify-content: center; flex-direction: column;
  color: #fff; text-align: center;
}
.pairing-box .brand { font-size: 22px; letter-spacing: .3em; color: #7c8494; margin-bottom: 24px; }
.pair-code { font-size: 96px; font-weight: 700; letter-spacing: .12em; margin-bottom: 24px; }
.pair-hint { font-size: 22px; color: #b7bec9; }

/* ---- Player ---- */
#playlist-container { background: #000; }
.pl-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.pl-widget { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; background: #000; }

/* ---- Overlays ---- */
.overlay-layer { pointer-events: none; }
.overlay-box {
  position: absolute; display: flex; align-items: center;
  padding: 4px 10px; font-size: 24px; white-space: nowrap; overflow: hidden;
}
.ticker-inner { display: inline-block; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}