/* Demo art only. Shared production renderer owns the cards and visibility rules. */
html,body { background: #050812; }
.demo-camera { position: absolute; inset: 0; background: #070d1d; }
.demo-camera > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-camera:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#04081128,transparent 30%,#0306112b 65%,#030611ce); }
.night-open .demo-camera { filter: grayscale(1); }
#brand { background: #080b1599; font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.phase { background: #080b1599; font-size: 12px; }
#players { bottom: 20px; gap: 8px; }
.card { border-radius: 8px; border-color: #ffffff35; background: #101827e8; }
.portrait { height: 110px; background-image: url('/broadcast/assets/player-portraits-v2.jpg'); background-size: 500% 200%; }
.portrait img { opacity: 0; }
.card:nth-child(5n+1) .portrait { background-position-x: 0%; }
.card:nth-child(5n+2) .portrait { background-position-x: 25%; }
.card:nth-child(5n+3) .portrait { background-position-x: 50%; }
.card:nth-child(5n+4) .portrait { background-position-x: 75%; }
.card:nth-child(5n+5) .portrait { background-position-x: 100%; }
.card:nth-child(-n+5) .portrait { background-position-y: 0%; }
.card:nth-child(n+6) .portrait { background-position-y: 100%; }
.speaking { box-shadow: 0 0 0 1px var(--accent),0 0 24px #ab94ff50; }
.inactive .portrait { background: #222833 url('/broadcast/assets/player-portraits-v2.jpg') 0 0 / 500% 200%; background-blend-mode: luminosity; }
.inactive .portrait img { opacity: 0; }
#night-cover { background: linear-gradient(90deg,#03061174,#03061108),url('/broadcast/assets/night-scene-v2.jpg') center / cover; align-items: flex-start; padding: 0 8%; gap: 20px; }
.night-eyebrow { color: #b5bdd4; font-size: 13px; letter-spacing: .22em; }
.night-title { font-size: 58px; line-height: 1.1; letter-spacing: -.04em; font-weight: 600; margin: 0; max-width: 70%; }
.night-subtitle { color: #aab4cb; font-size: 18px; margin: 0; }