/* De stappen om een idee te droppen (droppen.js): één vraag per scherm, grote tegels en knoppen, een voortgangsbalk,
   en een klein feestje na het droppen. */
.modal.drop-dialoog { width: min(620px, calc(100vw - 32px)); padding: 0; overflow: hidden; border: 0; box-shadow: var(--h-shadow-lg); }
.modal.drop-dialoog::backdrop { background: rgb(11 57 84 / 0.45); backdrop-filter: blur(4px); }
.drop { display: flex; flex-direction: column; gap: var(--h-space-4); padding: var(--h-space-5) var(--h-space-6) var(--h-space-5); min-height: 430px; }
.drop__voortgang { position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--h-surface-3); }
.drop__voortgang span { display: block; height: 100%; background: var(--mne-avond); border-radius: 0 999px 999px 0; transition: width 420ms var(--h-ease); }
.drop__kop { display: flex; align-items: center; justify-content: space-between; }
.drop__teller { font-size: var(--h-fs-sm); color: var(--h-text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.drop__titel { font: 800 clamp(1.4rem, 3vw, 1.9rem)/1.15 var(--mne-display); margin: 0; }
.drop__inhoud { display: flex; flex-direction: column; gap: var(--h-space-3); flex: 1; }
.drop__inhoud.is-binnen { animation: drop-in 320ms var(--h-ease) both; }
.drop__voet { display: flex; align-items: center; gap: var(--h-space-2); }
@keyframes drop-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

.drop__tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--h-space-3); }
.drop__tegel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--h-space-4); text-align: left; cursor: pointer;
  border: 0; border-radius: var(--h-radius-lg); color: var(--h-text);
  background: color-mix(in srgb, var(--soort) 10%, var(--h-surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soort) 25%, transparent);
  transition: transform var(--h-dur-2) var(--h-ease), box-shadow var(--h-dur-2) var(--h-ease), background var(--h-dur-2);
}
.drop__tegel:hover, .drop__tegel:focus-visible { transform: translateY(-3px) rotate(-0.6deg); background: color-mix(in srgb, var(--soort) 18%, var(--h-surface-2)); box-shadow: inset 0 0 0 2px var(--soort), var(--h-shadow); }
.drop__tegel.is-gekozen { box-shadow: inset 0 0 0 2px var(--soort); }
.drop__tegel-icoon { font-size: 2rem; margin-bottom: var(--h-space-1); transition: transform var(--h-dur-2) var(--h-ease); }
.drop__tegel:hover .drop__tegel-icoon { transform: scale(1.15) rotate(-6deg); }
.drop__tegel-naam { font: 700 1.02rem var(--mne-display); }
.drop__tegel-uitleg { font-size: var(--h-fs-sm); color: var(--h-text-2); }

.drop__groot { font: 700 1.35rem var(--mne-display); padding: 0.7rem 0.9rem; border: 0; border-bottom: 3px solid var(--h-accent); border-radius: var(--h-radius) var(--h-radius) 0 0; background: var(--h-surface-2); color: var(--h-text); outline: none; }
.drop__groot:focus { border-bottom-color: var(--mne-zon); }
.drop__vraag { font-weight: 600; margin-top: var(--h-space-2); }
.drop__chips { display: flex; flex-wrap: wrap; gap: var(--h-space-2); align-items: center; }
.drop__chip { border: 0; cursor: pointer; padding: 0.5rem 0.9rem; border-radius: var(--h-radius-pill); background: var(--h-surface-3); color: var(--h-text); font: inherit; transition: transform var(--h-dur-1) var(--h-ease), background var(--h-dur-1); }
.drop__chip:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--h-accent) 15%, var(--h-surface-3)); }
.drop__chip.is-gekozen { background: var(--mne-diep); color: #fff; }
.drop__eigen { width: 8rem; }
.drop__plek { display: flex; flex-direction: column; gap: var(--h-space-2); }
.drop__uitkomst { display: flex; flex-wrap: wrap; gap: var(--h-space-2); }
.drop__gekozen { display: flex; align-items: center; gap: var(--h-space-2); font-weight: 600; flex-wrap: wrap; }
.drop__schakel { display: flex; gap: var(--h-space-2); align-items: center; cursor: pointer; }

.drop__zin { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--h-space-2); }
.drop__zin-knop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--h-space-3) 0; border: 0; cursor: pointer; border-radius: var(--h-radius-lg); background: var(--h-surface-2); color: var(--h-text-2); font: 600 var(--h-fs-sm) var(--h-font); box-shadow: inset 0 0 0 1px var(--h-border); transition: transform var(--h-dur-2) var(--h-ease), box-shadow var(--h-dur-2); }
.drop__zin-emoji { font-size: 2rem; transition: transform var(--h-dur-2) var(--h-ease); }
.drop__zin-knop:hover .drop__zin-emoji { transform: scale(1.2); }
.drop__zin-knop.is-gekozen { color: var(--h-text); box-shadow: inset 0 0 0 2px var(--mne-zon), var(--h-shadow); transform: translateY(-3px); }
.drop__zin-knop.is-gekozen .drop__zin-emoji { animation: drop-wiebel 600ms var(--h-ease); }
@keyframes drop-wiebel { 0%, 100% { transform: scale(1.2) rotate(0); } 30% { transform: scale(1.35) rotate(-10deg); } 60% { transform: scale(1.3) rotate(8deg); } }

.feestje { position: fixed; inset: 0; pointer-events: none; z-index: 2000; display: grid; place-items: center; }
.feestje span { position: absolute; font-size: 1.6rem; animation: feest var(--t) cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes feest {
  from { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0); }
  70% { opacity: 1; }
  to { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.1) rotate(var(--r)); }
}

@media (max-width: 600px) {
  .drop { padding: var(--h-space-4); min-height: 70vh; }
  .drop__zin { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .drop__inhoud.is-binnen, .drop__zin-knop.is-gekozen .drop__zin-emoji { animation: none; }
  .drop__tegel:hover, .drop__zin-knop.is-gekozen { transform: none; }
}