/* The stocktake: count what spilled out of the crate (js/tasks/sayim.js).
   Shared task classes (.pill, .task-note) and the shake keyframe live in
   base.css; the crate look is Var Gezegeni's, one size down from the arrival
   crate in varyok.css, because eight of them share a sky. */

/* The hold. Fixed and behind the sentence: crates and produce drift under the
   words, and only the crates themselves take a tap. */
.sayim-court {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

/* ---------- the crates ---------- */

.sayim-box {
  position: absolute;
  width: 2.6em;
  height: 2em;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  animation: sayim-drift var(--dur, 13s) ease-in-out infinite;
  transition: opacity 0.8s ease;
}
/* One crate open at a time. The rest keep drifting, deaf. */
.sayim-court.busy .sayim-box { pointer-events: none; }

.sayim-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5em;
  border: 1.5px solid rgba(232, 193, 106, 0.5);
  border-radius: 0.12em 0.12em 0.25em 0.25em;
  background: linear-gradient(rgba(232, 193, 106, 0.12), rgba(232, 193, 106, 0.03));
  transition: border-color 0.3s ease, background 0.3s ease;
}
/* One slat, so it reads as a crate and not a rectangle. */
.sayim-body::after {
  content: "";
  position: absolute;
  inset: 0.4em 0.25em;
  border-top: 1px solid rgba(232, 193, 106, 0.2);
}
.sayim-lid {
  position: absolute;
  left: -0.12em; right: -0.12em;
  top: 0.2em;
  height: 0.4em;
  border: 1.5px solid rgba(232, 193, 106, 0.6);
  border-radius: 0.12em;
  background: linear-gradient(rgba(232, 193, 106, 0.26), rgba(232, 193, 106, 0.12));
  transform-origin: 6% 100%;
  transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.sayim-box:hover .sayim-body,
.sayim-box:focus-visible .sayim-body {
  border-color: var(--gold);
  background: linear-gradient(rgba(232, 193, 106, 0.22), rgba(232, 193, 106, 0.07));
}
.sayim-box:focus-visible { outline: none; }
.sayim-box.open .sayim-lid { transform: translate(0.3em, -0.4em) rotate(-9deg); }
/* Counted and sealed. It leaves the way freight leaves: sideways and upward. */
.sayim-box.gone {
  opacity: 0;
  transform: translate(-50%, -50%) translate(9vw, -14vh) scale(0.5);
  transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.4, 0, 0.7, 0.3);
  animation: none;
  pointer-events: none;
}

/* ---------- what was inside ---------- */

.sayim-item {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: sayim-drift var(--dur, 13s) ease-in-out infinite;
  transition: left 0.75s cubic-bezier(0.2, 0.8, 0.4, 1),
              top 0.75s cubic-bezier(0.2, 0.8, 0.4, 1),
              opacity 0.5s ease;
  filter: drop-shadow(0 0 10px rgba(232, 193, 106, 0.35));
}
.sayim-item.out { opacity: 1; }
.sayim-item.back { opacity: 0; }
/* Lifted off the sky and onto the pile: it leaves this layer for that one. */
.sayim-item.taken { opacity: 0; transition: opacity 0.25s ease; }

@keyframes sayim-drift {
  0%   { transform: translate(-50%, -50%); }
  50%  { transform: translate(-50%, -50%) translate(var(--dx, 20px), var(--dy, -16px)); }
  100% { transform: translate(-50%, -50%); }
}

/* ---------- the sentence ---------- */

.sayim-ask {
  position: relative;
  z-index: 7;
  margin-top: 2.2em;
  text-align: center;
}
.sayim-q {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3.4vw, 1.6rem);
  color: var(--cream);
  margin-bottom: 0.9em;
}
.sayim-a {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 3vw, 1.4rem);
  color: var(--cream);
  line-height: 2.2;
  white-space: pre-wrap; /* the template's own spaces do the spacing */
}
.sayim-word { white-space: pre-wrap; }

/* The blank. An underline and nothing else, the way the name was asked for. */
.sayim-input {
  width: 4.2em;
  padding: 0 0.15em 0.1em;
  font-family: var(--serif);
  font-size: inherit;
  text-align: center;
  color: var(--gold);
  background: none;
  border: none;
  border-bottom: 2px dashed rgba(232, 193, 106, 0.45);
  outline: none;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.sayim-input::placeholder { color: rgba(154, 147, 184, 0.5); }
.sayim-input:focus { border-bottom-color: var(--gold); }
.sayim-input.shake { animation: shake 0.4s ease; }
/* Counted right, or counted for you. Either way the blank stops being a blank. */
.sayim-input.right, .sayim-input.shown {
  border-bottom: 2px solid var(--gold);
  text-shadow: 0 0 14px rgba(232, 193, 106, 0.55);
}
.sayim-input.shown { color: var(--gold); }

.sayim-var { font-family: var(--serif); color: var(--gold); }
.sayim-var.right {
  border-color: var(--gold);
  background: rgba(232, 193, 106, 0.12);
}

/* ---------- the crate counting it out ---------- */

.sayim-pile {
  position: absolute;
  left: 50%;
  bottom: 12vh;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 0.3em;
  width: min(22em, 76vw);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.8s ease;
}
.sayim-pile.show { opacity: 1; }
.sayim-pile.home {
  transform: translateX(-50%) translate(var(--hx, 0), var(--hy, 0)) scale(0.15);
  opacity: 0;
}
.sayim-chip {
  font-size: 1.5rem;
  animation: sayim-land 0.35s cubic-bezier(0.3, 1.4, 0.5, 1) backwards;
  filter: drop-shadow(0 0 10px rgba(232, 193, 106, 0.4));
}
@keyframes sayim-land {
  from { opacity: 0; transform: translateY(-1.4em) scale(0.6); }
  to   { opacity: 1; transform: none; }
}

/* The number, said over each thing as it lands. */
.sayim-tally {
  position: absolute;
  left: 50%;
  bottom: calc(12vh + 4.4em);
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--gold);
  text-shadow: 0 0 22px rgba(232, 193, 106, 0.45);
  white-space: nowrap;
}
.sayim-tally.beat { animation: sayim-beat 0.4s ease; }
@keyframes sayim-beat {
  0%   { opacity: 0.2; transform: translateX(-50%) scale(0.75); }
  55%  { opacity: 1; transform: translateX(-50%) scale(1.12); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

@media (max-width: 640px) {
  .sayim-box { width: 2.1em; height: 1.7em; }
  .sayim-body { height: 1.25em; }
  .sayim-item, .sayim-chip { font-size: 1.2rem; }
  .sayim-pile { bottom: 16vh; }
  .sayim-tally { bottom: calc(16vh + 4em); }
}

@media (prefers-reduced-motion: reduce) {
  .sayim-box, .sayim-item { animation: none; }
  .sayim-chip { animation-duration: 0.01s; }
  .sayim-tally.beat { animation: none; }
}