/* Var Gezegeni and its twin. The crate that has everything in it (b.box), and
   whatever Yok Gezegeni needs when it gets built. Kept out of base.css for the
   same reason merak.css is: these are beat types belonging to one place. */

/* ---------- The crate: ______ var mı? ---------- */

.box-wrap {
  margin-top: 1.3em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  width: 100%;
}

/* The words on offer. Draggable, and tappable for anyone who would rather not
   drag: both gestures ask the same question. */
.box-rack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45em;
  max-width: 30em;
}
.box-chip {
  font-family: var(--serif);
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  color: var(--gold);
  background: none;
  border: 1px solid rgba(232, 193, 106, 0.34);
  border-radius: 999px;
  padding: 0.28em 0.85em;
  cursor: grab;
  transition: border-color 0.25s ease, background 0.25s ease, opacity 0.3s ease;
}
.box-chip:hover, .box-chip:focus-visible {
  border-color: var(--gold);
  background: rgba(232, 193, 106, 0.09);
  outline: none;
}
/* Already asked. Still askable: the joke only works if you can keep going. */
.box-chip.asked { opacity: 0.45; border-style: dashed; }

/* The question, with a hole in the front of it. */
.box-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.32em;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3.6vw, 1.7rem);
  color: var(--cream);
}
.box-slot {
  min-width: 4.2em;
  padding: 0 0.3em 0.1em;
  color: var(--gold);
  text-align: center;
  border-bottom: 2px dashed rgba(232, 193, 106, 0.45);
  transition: border-color 0.35s ease, background 0.35s ease;
}
.box-slot.filled {
  border-bottom-style: solid;
  border-bottom-color: var(--gold);
  background: rgba(232, 193, 106, 0.07);
}
.box-tail { color: var(--cream); }

/* The crate itself. A body, a lid on a hinge, and the only answer it knows. */
.box-crate {
  position: relative;
  width: 7em;
  height: 4.8em;
  margin-top: 0.5em;
}
.box-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3.6em;
  border: 2px solid rgba(232, 193, 106, 0.5);
  border-radius: 0.2em 0.2em 0.4em 0.4em;
  background:
    linear-gradient(rgba(232, 193, 106, 0.1), rgba(232, 193, 106, 0.03));
}
/* The slats, so it reads as a crate and not a box of nothing. */
.box-body::after {
  content: "";
  position: absolute;
  inset: 0.45em 0.5em;
  border-top: 1px solid rgba(232, 193, 106, 0.18);
  border-bottom: 1px solid rgba(232, 193, 106, 0.18);
}
/* A slab, hinged at its back left corner. Thin and it reads as a plank lying
   across the crate; too much rotation and it reads as a plank thrown off it. */
.box-lid {
  position: absolute;
  left: -0.3em; right: -0.3em;
  top: 0.42em;
  height: 0.78em;
  border: 2px solid rgba(232, 193, 106, 0.6);
  border-radius: 0.2em;
  background: linear-gradient(rgba(232, 193, 106, 0.24), rgba(232, 193, 106, 0.12));
  transform-origin: 4% 100%;
  transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}
/* Nudged aside rather than swung wide. A long thin slab rotated far enough to
   read as "open" reads as a plank thrown off instead. */
.box-crate.open .box-lid { transform: translate(0.4em, -0.5em) rotate(-7deg); }
/* It rocks back on its heels each time it gives something up. */
.box-crate.open .box-body { animation: box-rattle 0.5s ease; }
@keyframes box-rattle {
  30% { transform: rotate(-2.5deg); }
  65% { transform: rotate(2deg); }
}

/* Var. The only answer this crate has ever given. */
.box-answer {
  position: absolute;
  left: calc(100% + 0.7em);
  bottom: 0.7em;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 3.2vw, 1.5rem);
  color: var(--gold);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-0.5em);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.box-crate.open .box-answer { opacity: 1; transform: none; }

/* And the thing itself, thrown out over the lid. */
.box-thrown {
  position: absolute;
  left: 50%;
  top: 0.6em;
  font-size: 1.7rem;
  pointer-events: none;
  animation: box-throw 1.5s cubic-bezier(0.2, 0.8, 0.5, 1) forwards;
}
@keyframes box-throw {
  0%   { transform: translate(-50%, 0) scale(0.4) rotate(0deg); opacity: 0; }
  22%  { opacity: 1; }
  55%  { transform: translate(calc(-50% + var(--tx, 60px) * 0.6), var(--ty, -120px)) scale(1.1) rotate(var(--tr, 30deg)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx, 60px)), 2.4em) scale(0.9) rotate(calc(var(--tr, 30deg) * 1.8)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .box-crate.open .box-body { animation: none; }
  .box-thrown { animation-duration: 0.9s; }
}

@media (max-width: 640px) {
  .box-crate { width: 5em; height: 3.6em; }
  .box-body { height: 2.7em; }
  .box-answer { left: auto; right: calc(100% + 0.7em); }
}