/* Bu ne? Bu kim?: the fog of unasked guests (js/tasks/ask.js).
   Shared task classes (.pill, .task-note) and the shake keyframes stay in
   base.css; everything ask-only lives here. */

/* The court covers the screen but takes no taps; only the guests and the
   two question pills do, so the counter and the map stay reachable. */
.ask-court {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.ask-court .ask-item { pointer-events: auto; }
/* A guest in the fog: blurred, dim, gently bobbing. Not yet real. */
.ask-item {
  position: absolute;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 0.15em;
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  line-height: 1;
  filter: blur(3px) grayscale(0.55) brightness(0.75);
  opacity: 0.6;
  cursor: pointer;
  transition: filter 0.5s ease, opacity 0.5s ease, transform 0.3s ease;
  animation: ask-bob var(--bob, 4s) ease-in-out infinite;
}
@keyframes ask-bob { 50% { margin-top: -12px; } }
.ask-item:hover, .ask-item:focus-visible { opacity: 0.85; outline: none; }
/* Chosen: the guest leans out of the fog, waiting for its question. */
.ask-item.focus {
  filter: blur(1px) grayscale(0.2) brightness(1);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.18);
}
/* Asked right: fully real, still, wearing its name. */
.ask-item.real {
  filter: none;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.12);
  animation: none;
}
.ask-item.shake { animation: shake 0.4s ease; }
.ask-item.gone { opacity: 0; filter: blur(6px); }
/* The planet's answer: the Turkish name, under the guest, in gold. */
.ask-word {
  position: absolute;
  left: 50%;
  top: 104%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  color: var(--gold);
  text-shadow: 0 0 12px rgba(232, 193, 106, 0.6);
  white-space: nowrap;
}
/* A guest asked wrongly breaks apart: four clipped shards of the same emoji
   fly out, spin, and fade. Same family as the moon's word shatter. */
.ask-shard {
  position: fixed;
  z-index: 6;
  pointer-events: none;
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: ask-shard-fly 0.75s ease-out forwards;
}
@keyframes ask-shard-fly {
  0% { opacity: 1; transform: translate(-50%, -50%); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--sx, 0px)), calc(-50% + var(--sy, 60px))) rotate(var(--sr, 40deg)) scale(0.8);
  }
}

/* The two questions sleep until a guest is chosen. */
.ask-pills {
  position: fixed;
  left: 50%;
  bottom: 15vh;
  transform: translateX(-50%);
  display: flex;
  gap: 0.8em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.ask-court .ask-pills.show { opacity: 1; pointer-events: auto; }
.ask-court .task-note {
  position: absolute;
  left: 50%;
  bottom: 9vh;
  transform: translateX(-50%);
  margin: 0;
}