* { box-sizing: border-box; margin: 0; padding: 0; }
.hidden { display: none !important; }
body { font-family: -apple-system, "Segoe UI", system-ui, sans-serif; background: #0c0c1d; color: #fff; }
.tv { min-height: 100vh; display: flex; flex-direction: column; padding: 2vh 3vw; gap: 2vh; }

.tv-header { display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 3vw; font-weight: 800; letter-spacing: 2px; color: #8b9cff; }
.reveal-meter { display: flex; gap: 0.5vw; }
.dot { width: 1.4vw; height: 1.4vw; border-radius: 50%; background: #2a2a4a; }
.dot.on { background: #ffd54a; }

.stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; }
.squint-frame {
  position: relative; /* lids are positioned within the frame */
  width: min(46vh, 90vw); aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 18px; background: #000; border: 4px solid #3a3a6a;
}
.squint-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }

/* Two black eyelids meet at center over the photo, blink once, then retract off
   the top/bottom - like an eye opening. Their inner edges are curved to wrap the
   "eyeball" (the photo); the side corners overhang off-frame so only the central
   curve shows. Tunables: the vertical % in each border-radius = curve depth; the
   lid-blink keyframe percentages = blink timing. */
.lid {
  position: absolute; left: -20%; width: 140%; height: 0;
  background: #000; z-index: 2; pointer-events: none;
}
.lid-top    { top: 0;    border-radius: 0 0 50% 50% / 0 0 70% 70%; }
.lid-bottom { bottom: 0; border-radius: 50% 50% 0 0 / 70% 70% 0 0; }
@keyframes lid-blink {
  0%   { height: 66%; }  /* shut - curved lids overlap over the center */
  30%  { height: 16%; }  /* opening... */
  46%  { height: 44%; }  /* ...blink */
  74%  { height: 6%; }   /* open wide */
  100% { height: 0%; }   /* fully open (retracted off-frame) */
}
.lid.blinking { animation: lid-blink 1.8s ease-in-out both; }
.caption { font-size: 2.4vw; color: #b9b9e6; }

.reveal-timer { display: flex; flex-direction: column; align-items: center; gap: 0.6vh; width: 30vw; }
.reveal-timer.hidden { display: none; }
.timer-label { font-size: 1.6vw; color: #b9b9e6; letter-spacing: 1px; text-transform: uppercase; }
.timer-num { font-size: 3vw; font-weight: 800; color: #ffd54a; line-height: 1; }
.timer-track { width: 100%; height: 1vh; background: #2a2a4a; border-radius: 999px; overflow: hidden; }
.timer-fill { height: 100%; width: 100%; background: #ffd54a; border-radius: 999px; }

.reveal-name-box { text-align: center; }
.reveal-name-box.hidden { display: none; }

.winner-box { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5vh; }
.winner-box.hidden { display: none; }
.winner-title { font-size: 3vw; font-weight: 800; color: #8b9cff; letter-spacing: 2px; }
.winner-name { font-size: 4vw; font-weight: 800; color: #ffd54a; }
.winner-standings { list-style: none; display: flex; flex-direction: column; gap: 0.6vh; padding: 0; min-width: 24vw; }
.winner-standings li { display: flex; justify-content: space-between; background: #1e1e3c; padding: 0.8vh 1.4vw; border-radius: 10px; font-size: 1.8vw; }
.reveal-name { font-size: 3.6vw; font-weight: 800; color: #ffd54a; }
.reveal-source { color: #8b9cff; font-size: 1.2vw; }

.scores { display: flex; flex-wrap: wrap; gap: 1vw; justify-content: center; }
.score-chip {
  display: flex; gap: 0.8vw; align-items: baseline; background: #1e1e3c;
  border-radius: 999px; padding: 0.8vh 1.6vw; font-size: 1.8vw;
}
.sname { font-weight: 600; }
.sval { font-weight: 800; color: #8b9cff; }