/* the speaker-facing timer face, used by the preview and the speaker display */
.face { position: relative; aspect-ratio: 16 / 9; background: #000; color: #fff; overflow: hidden; container-type: size; display: grid; grid-template-rows: auto 1fr auto;   /* the lamp row sizes itself below: a container's own cq units would measure the viewport, not the face */ --lit: #fff; }
.face .lamps { display: flex; justify-content: center; align-items: center; gap: 7cqw; padding-top: 4cqh; height: 24cqh; box-sizing: border-box; }
.face .lamp { width: 14cqh; height: 14cqh; border-radius: 50%; transition: background-color .15s, box-shadow .15s; }
.face .g { background: #0c2f19; } .face .y { background: #3a2e08; } .face .r { background: #3d0d0a; }
.face.ph-green .g { background: #1fe060; box-shadow: 0 0 6cqh #1fe06099; }
.face.ph-yellow .y { background: #ffc21a; box-shadow: 0 0 6cqh #ffc21a99; }
.face.ph-red .r, .face.ph-over .r { background: #ff3326; box-shadow: 0 0 6cqh #ff332699; }
.face.ph-yellow { --lit: #ffc21a; } .face.ph-red, .face.ph-over { --lit: #ff3326; } .face.ph-green { --lit: #1fe060; }
.face .digits { align-self: center; text-align: center; font: 700 min(52cqh, 34cqw)/1 "Barlow Condensed", "Arial Narrow", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; transform: translateY(-5cqh); }
.face .digits.long { font-size: min(44cqh, 25cqw); }
.face.ph-yellow .digits, .face.ph-red .digits, .face.ph-over .digits { color: var(--lit); }
.face.notint .digits { color: #fff !important; }
.face.ph-ready .digits { color: rgba(255,255,255,.85); }
.face.flashing .digits, .face.flashing .r { animation: tblink 1s steps(1) infinite; }
.face .msg { margin: 0 5cqw 6cqh; padding: 1.6cqh 3cqw; border-radius: 1.5cqh; background: #ffc21a; color: #000; text-align: center; font: 700 9cqh/1.15 "IBM Plex Sans", Arial, sans-serif; overflow-wrap: anywhere; }
.face .msg.flash { animation: tblink 1s steps(1) infinite; }
.face .tod { position: absolute; top: 4cqh; right: 4cqw; font: 600 6cqh/1 "Barlow Condensed", sans-serif; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.7); }
.face .cue, .face .next { position: absolute; left: 4cqw; max-width: 27cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "IBM Plex Sans", Arial, sans-serif; }
.face .cue { top: 4cqh; font-size: 5.5cqh; font-weight: 700; color: rgba(255,255,255,.9); }
.face .next { top: 11.5cqh; font-size: 4cqh; font-weight: 500; color: rgba(255,255,255,.55); }
.face .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1.8cqh; background: rgba(255,255,255,.12); }
.face .bar i { display: block; height: 100%; background: var(--lit); transition: width .25s linear; }
.face.ph-ready .bar i { background: rgba(255,255,255,.5); }
.face.blank > * { visibility: hidden; }
@keyframes tblink { 50% { opacity: .15; } }