/* Schermen van de speler (kind, mobiel-first). */

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px 24px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.scherm-kop {
  text-align: center;
}

.scherm-kop .emoji-groot {
  font-size: 64px;
  line-height: 1.1;
  display: block;
}

.scherm-kop h1 {
  font-size: 1.7rem;
  line-height: 1.2;
  margin: 0.2em 0;
}

.subkop {
  color: var(--inkt-zacht);
  font-size: 0.95rem;
  margin: 0;
}

.kaart {
  background: var(--wit);
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--schaduw-kaart);
}

.kaart--hint {
  border: 3px solid var(--teal);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.kaart--hint .emoji {
  font-size: 34px;
  line-height: 1.1;
}

.kaart--hint p {
  margin: 0;
  font-size: 1.15rem;
}

.kaart--kado {
  border: 3px solid var(--oranje);
  text-align: center;
}

.kaart--kado .emoji-groot {
  font-size: 56px;
  display: block;
}

.kaart--kado p {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0.3em 0 0;
}

/* ---------- voortgang ---------- */

.voortgang-tekst {
  text-align: center;
  font-weight: 700;
  color: var(--inkt-zacht);
  font-size: 0.95rem;
  margin: 0;
}

.voortgang {
  height: 12px;
  border-radius: 999px;
  background: #f0e4d2;
  overflow: hidden;
}

.voortgang-vulling {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--oranje));
  transition: width 0.4s ease;
}

/* ---------- code & vraag ---------- */

.invoer-label {
  font-weight: 700;
  display: block;
  margin-bottom: 0.4em;
}

.code-invoer {
  width: 100%;
  padding: 0.35em 0.2em;
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.3em;
  border: 3px solid var(--teal);
  border-radius: var(--radius);
  background: #fdfcf9;
}

.code-invoer:focus {
  outline: 3px solid var(--geel);
  outline-offset: 2px;
}

.tekst-invoer {
  width: 100%;
  padding: 0.5em 0.7em;
  font-size: 1.2rem;
  border: 3px solid var(--paars);
  border-radius: var(--radius);
  background: #fdfcf9;
}

.tekst-invoer:focus {
  outline: 3px solid var(--geel);
  outline-offset: 2px;
}

.invoer-rij {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.feedback {
  min-height: 1.5em;
  margin: 0;
  text-align: center;
  font-weight: 700;
  color: var(--roze);
}

.feedback--goed {
  color: var(--teal-donker);
}

/* ---------- letterbalk ---------- */

.letterbalk {
  margin-top: auto;
  padding-top: 10px;
  text-align: center;
}

.letterbalk-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--inkt-zacht);
  margin-bottom: 6px;
}

.letterbalk-tegels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.letterbalk-tegels .tegel {
  width: 38px;
  height: 42px;
  font-size: 1.2rem;
}

/* ---------- letter-onthulling ---------- */

.onthulling {
  text-align: center;
  padding: 30px 0 10px;
}

.onthulling .tegel {
  width: 110px;
  height: 120px;
  font-size: 4rem;
  border-radius: 18px;
  box-shadow: 0 7px 0 var(--geel-donker);
}

/* ---------- puzzel ---------- */

.puzzel-vak {
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
  row-gap: 10px;
  justify-content: center;
  min-height: 60px;
  padding: 12px;
  border-radius: var(--radius);
  background: #f6eddd;
}

/* Eén woord van de zin als groepje tegels (puzzel en eindscherm). */
.puzzel-woord {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.puzzel-voorraad {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 12px 0;
}

/* ---------- diversen ---------- */

.waarschuwing {
  background: #fff3d6;
  border: 2px solid var(--geel);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.9rem;
  margin: 0;
}

.knoppenrij {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tekstblok {
  white-space: pre-line;
}

.voetnoot {
  text-align: center;
  font-size: 0.85rem;
  color: var(--inkt-zacht);
}

.voetnoot a {
  color: inherit;
}