* { box-sizing: border-box; }

@keyframes bgDrift {
  0% { background-position: 0% 0%, 0 0; }
  100% { background-position: 100% 100%, 0 0; }
}

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    radial-gradient(circle at 20% 20%, rgba(244,185,66,0.10), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(224,83,140,0.10), transparent 45%),
    linear-gradient(160deg, #150f26, #241a3d 45%, #150f26);
  background-attachment: fixed;
  color: #2a2a2a;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: linear-gradient(180deg, #2d2050, #1b1330);
  color: #fff;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 2px solid rgba(244,185,66,0.4);
  box-shadow: 0 4px 24px rgba(0,0,0,0.45);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.brand-crest {
  width: 30px;
  height: 33px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-title {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.06em;
  background: linear-gradient(90deg, #ffe08a, #f4b942);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-sub {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}

.room-title {
  font-size: 15px;
  font-weight: 700;
  opacity: 0.95;
  color: #ffe08a;
}

.right-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.totals-badge {
  font-size: 12px;
  font-weight: 600;
  background: rgba(244,185,66,0.14);
  border: 1px solid rgba(244,185,66,0.35);
  padding: 7px 14px;
  border-radius: 20px;
  white-space: nowrap;
  color: #ffe9b8;
}

.back-btn {
  display: none;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #ffe08a, #e8b23d);
  color: #3a2410;
  border: none;
  padding: 11px 22px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(232,178,61,0.35);
  transition: transform 0.12s, box-shadow 0.12s;
}
.back-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(232,178,61,0.5); }

.deadline-badge {
  display: none;
  align-items: center;
  background: linear-gradient(180deg, #ff8a7a, #c0392b);
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  animation: deadlinePulse 2s ease-in-out infinite;
}
.deadline-badge:hover { filter: brightness(1.1); }
@keyframes deadlinePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(192,57,43,0); }
}

.voice-btn {
  display: none;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, #ff9dc4, #e0538c);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.12s;
}
.voice-btn:hover { transform: translateY(-1px); }
.voice-btn.luistert { animation: voiceListening 1s ease-in-out infinite; }
.voice-btn.praat { animation: voiceTalking 0.5s ease-in-out infinite; }
@keyframes voiceListening {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,83,140,0.6); }
  50% { box-shadow: 0 0 0 8px rgba(224,83,140,0); }
}
@keyframes voiceTalking {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.voice-caption {
  display: none;
  background: #241a3d;
  color: #ffe08a;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(244,185,66,0.3);
}
.voice-caption.visible { display: block; }

#stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

@media (max-width: 700px) {
  #stage { align-items: stretch; justify-content: stretch; padding: 0; }
  .voice-caption { font-size: 12px; padding: 6px 10px; }
  #top-bar { padding: 8px 10px; gap: 6px; }
  .brand-title { font-size: 13px; }
  .totals-badge { display: none; }
  .voice-btn, .back-btn, .deadline-badge { font-size: 11px; padding: 6px 10px; }
}

.loading-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  background: #150f26;
  color: #ffe08a;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
}
.loading-screen.visible { display: flex; }

#game-canvas {
  width: min(960px, 96vw);
  height: auto;
  aspect-ratio: 960 / 600;
  background: #eee3ca;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 2px rgba(244,185,66,0.3), 0 0 40px rgba(244,185,66,0.08);
  cursor: pointer;
}

@media (max-width: 700px) {
  /* Op telefoon geen kleine "kamer-kaart" met veel lucht eromheen — het canvas vult
     hier het hele scherm onder de header, zodat het als een echte app aanvoelt.
     De exacte pixelgrootte wordt door engine.js zelf gezet (inline style), dit is
     alleen de fallback vóór JS klaar is. */
  #game-canvas {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border-radius: 0;
    box-shadow: none;
  }
}

/* --- inlog-gate: verbergt de software tot iemand met een team-account is ingelogd --- */
.login-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(circle at 20% 20%, rgba(244,185,66,0.10), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(224,83,140,0.10), transparent 45%),
    linear-gradient(160deg, #150f26, #241a3d 45%, #150f26);
  color: #fff;
  text-align: center;
  padding: 24px;
}
.login-gate.visible { display: flex; }
.login-crest { width: 56px; height: 62px; filter: drop-shadow(0 4px 12px rgba(244,185,66,0.4)); }
.login-gate h1 {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.06em;
  margin: 6px 0 0;
  background: linear-gradient(90deg, #ffe08a, #f4b942);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login-gate p { color: rgba(255,255,255,0.65); font-size: 14px; margin: 0 0 10px; max-width: 320px; }
.login-btn {
  background: linear-gradient(180deg, #ffe08a, #e8b23d);
  color: #3a2410;
  border: none;
  padding: 14px 32px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(232,178,61,0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.login-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(232,178,61,0.55); }

/* --- modal / overlays --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 25, 0.65);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}

@keyframes modalPop {
  from { transform: scale(0.96) translateY(6px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-panel {
  position: relative;
  background: linear-gradient(180deg, #fffaf0, #fdf3dc);
  border-radius: 16px;
  padding: 28px;
  max-width: 480px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(244,185,66,0.4);
  animation: modalPop 0.16s ease-out;
}

.modal-wide { max-width: 640px; }

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(58,44,26,0.08);
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  color: #6b5a3f;
}
.modal-close:hover { background: rgba(58,44,26,0.16); }

.panel-content h2 { margin: 0 0 6px; color: #3a2c1a; font-size: 21px; }
.panel-content h3 {
  margin: 18px 0 8px;
  color: #8a5a10;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(201,135,31,0.25);
  padding-bottom: 4px;
}
.panel-content p { margin: 4px 0; }
.muted { color: #8a7a5f; font-size: 13px; }
.deadline-warning { color: #c0392b; font-size: 12px; font-weight: 700; }

.klaar-badge {
  display: inline-block;
  background: #f4ecd8;
  color: #8a5a10;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  margin: 4px 0;
}
.klaar-badge-goed { background: #d6f0dd; color: #1e7a3f; }

.tag {
  display: inline-block;
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}

.form { display: flex; flex-direction: column; gap: 6px; }
.form label { font-size: 12px; font-weight: 600; color: #6b5a3f; margin-top: 6px; }
.form input, .form select, .form textarea {
  padding: 8px 10px;
  border: 1px solid #d8cba8;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}

.btn-primary {
  margin-top: 14px;
  background: linear-gradient(180deg, #ffe08a, #e8a23d);
  color: #3a2410;
  border: none;
  padding: 11px 18px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(232,162,61,0.4);
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(232,162,61,0.55); }

.btn-danger {
  margin-top: 18px;
  background: #c0392b;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
}

.btn-small {
  background: none;
  border: 1px solid #d8cba8;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  padding: 2px 8px;
  color: #8a4444;
}

.beoordelingen-list { max-height: 160px; overflow-y: auto; margin-bottom: 10px; }
.beoordeling-item {
  background: #f4ecd8;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 13px;
}
.beoordeling-head { font-weight: 700; font-size: 11px; color: #6b5a3f; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0;
}
.stat-box {
  background: linear-gradient(180deg, #fdf3dc, #f4ecd8);
  border: 1px solid rgba(201,135,31,0.2);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.stat-num {
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(90deg, #c9871f, #8a5a10);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label { font-size: 11px; color: #6b5a3f; margin-top: 2px; }

.budget-row {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}
.budget-row > div {
  flex: 1;
  background: #e6f2ea;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.meta-row { display: flex; gap: 16px; margin: 10px 0; flex-wrap: wrap; }
.meta-row label { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; color: #6b5a3f; gap: 4px; }
.meta-row select { padding: 6px 8px; border-radius: 6px; border: 1px solid #d8cba8; }

.step-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f4ecd8;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
}
.step-item span { flex: 1; }

.vragen-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.vraag-item {
  background: #f4ecd8;
  border-radius: 8px;
  padding: 8px 10px;
}
.vraag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a2c1a;
}
.vraag-item textarea {
  width: 100%;
  border: 1px solid #d8cba8;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
}

.chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #e0eef5;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
}
.chip button { background: none; border: none; cursor: pointer; color: #4a6b7d; }

.inline-form { display: flex; gap: 6px; margin-bottom: 10px; }
.inline-form input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #d8cba8;
  border-radius: 8px;
  font-size: 13px;
}
.inline-form button {
  background: #3a2c1a;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
}

.aanvraag-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.aanvraag-card {
  background: linear-gradient(180deg, #fbf1d9, #f4ecd8);
  border: 1px solid rgba(201,135,31,0.15);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.aanvraag-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(201,135,31,0.25);
  border-color: rgba(201,135,31,0.4);
}
.aanvraag-title { font-weight: 700; color: #3a2c1a; }
.aanvraag-sub { font-size: 12px; color: #6b5a3f; }
.aanvraag-bedrag {
  font-size: 17px;
  font-weight: 800;
  color: #8a5a10;
  margin: 4px 0;
}

.bedrag-groot { font-size: 15px; font-weight: 700; color: #3a2c1a; }
.bedrag-toegekend { color: #1e7a3f; }

.document-tekst {
  max-height: 220px;
  overflow-y: auto;
  background: #f4ecd8;
  border: 1px solid #d8cba8;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: #4a3c28;
  margin-bottom: 10px;
}