/* Basis */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Poppins,Arial,sans-serif;background:#f3f7fb;color:#263238}

/* Knoppen */
.btn{padding:12px 18px;border:0;border-radius:12px;cursor:pointer;font-weight:700}
.btn.primary{background:#2ecc71;color:#fff}
.btn.secondary{background:#3498db;color:#fff}
.btn.ghost{background:#ecf0f1}
.btn.icon{width:44px;height:44px;border-radius:10px;background:#ecf0f1;font-size:22px;line-height:1}

/* SETUP */
.setup{max-width:900px;margin:30px auto;padding:0 16px}
.panel{background:#fff;border-radius:16px;padding:16px;box-shadow:0 10px 28px rgba(0,0,0,.08)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sentences-list{display:grid;gap:10px;margin-bottom:12px}
.s-row{display:grid;grid-template-columns:100px 1fr 44px;gap:8px;align-items:center}
.s-row input[type="text"]{width:100%;padding:10px;border:2px solid #cfd8dc;border-radius:10px;font:inherit}
.s-row .del{width:44px;height:44px;border-radius:10px;background:#ffe9e9;border:0;font-weight:900;color:#c0392b;cursor:pointer}

/* GAME */
.game{display:none;min-height:100vh;position:relative;overflow:hidden}
.sky{position:absolute;inset:0;background:linear-gradient(#aee1ff,#e6f5ff)}
.cloud{position:absolute;background:#fff;border-radius:100px;filter:blur(1px);opacity:.9;
  box-shadow:30px 18px 0 12px #fff, 70px 20px 0 22px #fff, 120px 12px 0 18px #fff}
.cloud.c1{width:140px;height:50px;left:6%;top:12%}
.cloud.c2{width:220px;height:70px;left:65%;top:18%}
.cloud.c3{width:180px;height:60px;left:20%;top:36%}
.cloud.c4{width:260px;height:80px;left:76%;top:58%}
.cloud.c5{width:160px;height:55px;left:10%;top:72%}

.topbar{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;justify-content:space-between;align-items:center}

/* Speelzone – extra onderruimte zodat toetsenbord niet overlapt */
.playwrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:12px 16px 180px; /* ruimte voor kbbar */}
.playwrap{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.left{min-height:260px}

/* ZIN – groter en lager */
.word{margin-top:76px;display:flex;gap:12px;flex-wrap:wrap}
.slot{min-width:36px;height:56px;border-bottom:4px solid #90a4ae;display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:800}
.slot.space,.slot.punct{border-bottom:0}

.status{margin:12px 0 0;font-weight:700}
.win{color:#2ecc71}.lose{color:#e74c3c}

.stage{min-height:520px}
#zisaStage{width:100%;height:100%}

/* Toetsenbord: VAST ONDERAAN */
.kbbar{
  position:fixed;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 10%, rgba(255,255,255,.75) 60%, rgba(255,255,255,.9) 100%);
  backdrop-filter:saturate(1.2) blur(2px);
  padding:10px 16px 16px;
}
.kb{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(13, minmax(0,1fr));gap:10px}
.key{
  padding:18px 0;font-size:20px;font-weight:800;border:2px solid #d0d7de;border-radius:12px;
  background:#fff;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.08)
}
.key.used{background:#eceff1;color:#90a4ae;cursor:default}
.kb-actions{max-width:1200px;margin:10px auto 0;display:flex;justify-content:flex-end}
.hidden{display:none}

/* Modal (altijd bovenaan) */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:none;place-items:center;z-index:9999; /* belangrijk */
}
.dialog{background:#fff;padding:22px;border-radius:14px;max-width:520px;width:92%}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}

@media (max-width:1000px){
  .playwrap{grid-template-columns:1fr}
}
.menu-btn{
  position:absolute;
  top:16px; left:16px;
  background:#003366;
  color:#fff;
  font-weight:700;
  text-decoration:none;
  padding:10px 18px;
  border-radius:12px;
}
.menu-btn:hover{
  background:#00264d;
}

/* ────────────────────────────── */
/* ZISA – fall-animatie op laatste frame (zisa_00.png) */
#zisaStage image.fall{
  animation: zisa-fall 1.2s ease-in forwards;  /* valt uit beeld */
  transform-origin: 50% 0%;
}
@keyframes zisa-fall{
  0%   { transform: translateY(0) rotate(0deg);   opacity:1; }
  100% { transform: translateY(900px) rotate(6deg); opacity:.95; }
}
.word {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.word-block {
  display: inline-flex;
  gap: 0.3rem;
  white-space: nowrap; /* voorkomt afbreken binnen het woord */
}

.space-block {
  width: 1rem; /* optisch witruimte tussen woorden */
}