/* Het demo-potje: alles op één telefoonscherm. De bouwstenen (kaarten,
   knoppen, tekentools) komen uit shared.css en player.css; hier staat alleen
   wat de demo zelf nodig heeft: de ballon van KletsKees, het toneel en de
   voortgangsbolletjes. */

.demo-logo {
  font-size: 34px;
  margin: 18px 0 10px;
}

.demo-intro {
  font-size: 17px;
  line-height: 1.45;
  margin-bottom: 16px;
}
.demo-intro .ic { vertical-align: -3px; }

/* --- KletsKees --- */

.kees {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  animation: pop-in 0.32s ease-out both;
}

.kees-kop {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--yellow);
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--sticker-sm);
}
.kees-kop .ic { width: 30px; height: 30px; }

.kees-ballon {
  flex: 1;
  background: #fff;
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  border-top-left-radius: 4px;
  box-shadow: var(--sticker-sm);
  padding: 10px 14px 12px;
}
.kees-ballon strong {
  font-family: var(--font-display);
  font-size: 15px;
  color: #a25b00;
  display: block;
  margin-bottom: 2px;
}
#kees-tekst p {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 6px;
}
#kees-tekst p:last-child { margin-bottom: 0; }

/* Drie stuiterende puntjes terwijl KletsKees kijkt of nadenkt. */
.kees-denkt { display: flex; gap: 6px; padding: 6px 2px 2px; }
.kees-denkt span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.55;
  animation: kees-stuiter 1s ease-in-out infinite;
}
.kees-denkt span:nth-child(2) { animation-delay: 0.15s; }
.kees-denkt span:nth-child(3) { animation-delay: 0.3s; }
@keyframes kees-stuiter {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

/* --- voortgangsbolletjes --- */

.voortgang {
  display: flex;
  justify-content: center;
  gap: 7px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.voortgang li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--soft-dark);
  border: 2px solid var(--ink);
}
.voortgang li.nu { background: var(--yellow); transform: scale(1.2); }
.voortgang li.gedaan { background: var(--green); }

/* --- het toneel --- */

.toneel-beeld img {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  background: #fff;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--sticker-sm);
}
.toneel-beeld .small { margin-top: 8px; }

.foppen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  text-align: left;
}
.fop-kaart {
  background: var(--soft);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  animation: pop-in 0.32s ease-out both;
}
.fop-kaart small {
  display: block;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 2px;
}
.fop-kaart small .ic { width: 16px; height: 16px; vertical-align: -3px; }
.fop-kaart strong { font-size: 18px; }

.fop-blok, .stem-blok { margin-top: 16px; text-align: left; }
.stem-blok h2 { text-align: center; }

/* Stemknoppen lenen de vorm van .vote-option uit player.css; alleen het
   eigen antwoord ligt er uitgeschakeld bij. */
.stem-eigen { opacity: 0.6; }
.stem-eigen small { font-weight: 800; color: var(--muted); }
.stem-goed { outline: 4px solid var(--green); }

/* --- scores --- */

.scorebord {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}
.score-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--soft-dark);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-weight: 800;
  font-size: 17px;
}
.score-rij .ic { width: 22px; height: 22px; }
.score-rij .score-naam { flex: 1; text-align: left; }
.score-rij.jij { background: var(--card); outline: 3px solid var(--yellow); }

#verder-btn { margin-top: 16px; }

#stap-einde .btn { margin-top: 12px; width: 100%; }
#stap-einde a.btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}