/* Wat is er weg? — bovenop klastools.css */
html, body { height: 100%; }
.app { height: 100%; min-height: 0; }
/* bij de instellingen mag de pagina langer worden dan het scherm (telefoon) */
body[data-phase="setup"] .app { height: auto; min-height: 100%; }

/* thema's: zoals .modes, maar ze mogen over twee regels */
.themes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 5px; background: rgba(0,0,0,.25); border-radius: 16px; align-self: center; max-width: 100%; }
.themes button {
  border: 0; border-radius: 12px; padding: 8px 12px; background: transparent; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1.1;
}
.themes button:hover { background: rgba(255,255,255,.08); }
.themes button i { font-style: normal; font-size: 22px; line-height: 1; }
.themes button i.txt { font-size: 13px; width: 28px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: rgba(255,255,255,.14); }
.themes button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.themes button[aria-pressed="true"] i.txt { background: var(--gold); color: var(--gold-ink); }

/* speelveld: de kaartjes staan los in het vak, zodat ze het vak niet groter maken */
.weg-stage { min-height: 240px; }
body:not([data-phase="setup"]) .weg-stage { padding-top: 30px; }
.board {
  position: absolute; inset: 30px 0 0; display: grid; grid-template-columns: repeat(var(--cols, 3), var(--cw, 120px));
  gap: var(--gap, 14px); justify-content: center; align-content: center;
}

.intro { text-align: center; display: grid; gap: 14px; padding: 0 8px; }
.intro-steps { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: clamp(48px, 10vh, 96px); line-height: 1; }
.intro-steps i { font-style: normal; font-size: .45em; color: var(--muted); }
.intro-big { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 4.4vh, 40px); line-height: 1.2; text-wrap: balance; }
.intro-big em { font-style: normal; color: var(--gold); }
.intro-small { margin: 0; color: var(--muted); font-weight: 700; font-size: 17px; }
.intro-small b { color: var(--ink); }

/* kaartje met plaatje en woord */
.pic {
  width: var(--cw); height: calc(var(--cw) * 1.12); border-radius: calc(var(--cw) * .12); background: #fff; color: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--cw) * .04); padding: 4%;
  box-shadow: inset 0 calc(var(--cw) * -.035) 0 rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.35);
}
.pic-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: calc(var(--cw) * .5); line-height: 1.1; }
.pic-word {
  font-family: var(--font-display); font-weight: 800; line-height: 1.05; text-align: center; white-space: nowrap; max-width: 100%;
  font-size: calc(var(--cw) * min(.18, 1.55 / var(--len, 6)));
}
.pic.hole { background: transparent; box-shadow: none; border: calc(var(--cw) * .03) dashed rgba(255,255,255,.35); color: rgba(255,255,255,.4); }
.pic.hole span { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--cw) * .5); line-height: 1; }
.pic.in { animation: pic-in .35s cubic-bezier(.3,1.5,.5,1) both; }
.pic.back { background: var(--gold); color: var(--gold-ink); box-shadow: 0 0 0 calc(var(--cw) * .035) #fff, 0 0 34px rgba(255,212,59,.85); animation: pic-back .9s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes pic-in { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pic-back {
  0% { transform: scale(0) rotate(-200deg); opacity: 0; }
  60% { transform: scale(1.18) rotate(8deg); opacity: 1; }
  80% { transform: scale(.96) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}

/* kijktijd */
.timebar { position: absolute; top: 4px; left: 0; right: 0; height: 18px; border-radius: 99px; background: rgba(0,0,0,.3); overflow: hidden; }
.timebar-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold), #69db7c); transform-origin: left; }
.timebar span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #1a1640; }

/* onderbalk */
.opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.opt { display: grid; gap: 4px; justify-items: center; }
.opt-label { font-weight: 700; font-size: 13px; color: var(--muted); }
.seg button { min-width: 44px; }
.weg-btns { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: nowrap; max-width: 100%; }
.controls { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.status { flex-basis: auto; font-size: clamp(17px, 2.6vh, 26px); }

/* ogen dicht */
.eyes {
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; padding: 20px; text-align: center;
  background: radial-gradient(80% 70% at 50% 40%, #241d6b 0%, #0b0920 75%);
}
.eyes-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: clamp(90px, 24vh, 220px); line-height: 1; animation: eyes-in .6s cubic-bezier(.3,1.5,.5,1) both; }
.eyes-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 12vh, 130px); line-height: 1; color: var(--gold); }
.eyes-sub { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 4vh, 40px); color: var(--muted); }
.eyes-dots { display: flex; gap: 18px; margin-top: 2vh; }
.eyes-dots i { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.15); transition: background .3s, transform .3s; }
.eyes-dots i.on { background: var(--gold); transform: scale(1.15); }
@keyframes eyes-in { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

@media (max-width: 560px) {
  .themes { gap: 4px; }
  .themes button { font-size: 15px; padding: 7px 9px; gap: 5px; }
  .themes button i { font-size: 18px; }
  .seg button { min-width: 38px; padding: 9px 10px; font-size: 15px; }
  .intro { gap: 10px; }
  .weg-btns .go { padding: 10px 18px; font-size: 22px; white-space: nowrap; }
  .weg-btns .ghost { padding: 8px 12px; font-size: 16px; }
  /* altijd ruimte voor twee regels, zodat de plaatjes niet verschuiven als de tekst langer wordt */
  .status { line-height: 1.25; min-height: 2.5em; }
  .intro-steps { font-size: 52px; }
  .intro-big { font-size: 22px; }
  .opts { gap: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pic.in, .pic.back, .eyes-emoji { animation: none !important; }
  .eyes-dots i { transition: none; }
}