/* tasks/firtina.css — the Tag Storm (js/tasks/firtina.js), Sıfat Gezegeni's
   görev. Words and their torn-off adjective tags drift loose in the open
   space: no boxes, no backgrounds, just the things and the words themselves,
   the way the storm left them. */

.ft-field {
  position: relative;
  width: 100%;
  height: min(56vh, 500px);
  touch-action: none;
  overflow: hidden;
}

/* A word, as the thing itself. Bare emoji, a soft shadow to lift it off the
   sky, and nothing else around it. */
.ft-item {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 42px;
  line-height: 1;
  cursor: grab;
  user-select: none;
  touch-action: none;
  filter: drop-shadow(0 5px 16px rgba(0, 0, 0, 0.45));
}

.ft-item img {
  width: 46px;
  height: 46px;
  pointer-events: none;
}

/* A loose tag: bare gold Turkish, adrift. Plain text on purpose — never a
   scannable span, never a pill. */
.ft-tag {
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.05rem;
  color: #E8C16A;
  text-shadow: 0 0 14px rgba(232, 193, 106, 0.35), 0 2px 8px rgba(0, 0, 0, 0.5);
  cursor: grab;
  user-select: none;
  touch-action: none;
  white-space: nowrap;
}

.ft-held {
  cursor: grabbing;
  z-index: 6;
}

.ft-item.ft-held { transform-origin: center; }

/* Stuck pairs glow faintly together; the glow says joined, never right. */
.ft-stuck { filter: drop-shadow(0 0 10px rgba(232, 193, 106, 0.35)); }

.ft-in { animation: ftIn 0.6s ease; }
@keyframes ftIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ft-out {
  transition: opacity 0.55s ease;
  opacity: 0;
}