/*
 * Drag levels of the Cyberbullying module (CT-4285), used with touch-dnd.js.
 * Level 9 (.drag-drop-buckets): cards on the left, the three buckets stacked on
 * the right and kept in view while the cards scroll.
 * Levels 9 and 10 (.drag-drop-ranking): touch, selection and drop highlights.
 */

/* iOS counts the browser toolbars in 100vh, which cut off the bottom of the
   page; dvh is the visible height. Browsers without dvh keep the inline 100vh. */
app-root > [style*='100vh'] {
  height: 100dvh !important;
}

/* ---------- touch and selection ---------- */

.drag-drop-buckets [draggable='true'],
.drag-drop-ranking [draggable='true'] {
  -webkit-touch-callout: none;
  touch-action: none;
  cursor: grab;
}

/* On touch screens touch-dnd.js does the dragging; stop iOS's own long-press drag */
@media (pointer: coarse) {
  .drag-drop-buckets [draggable='true'],
  .drag-drop-ranking [draggable='true'] {
    -webkit-user-drag: none;
  }
}

.drag-drop-buckets .tdnd-selected,
.drag-drop-ranking .tdnd-selected {
  outline: 3px solid #7c3aed;
  outline-offset: 2px;
  box-shadow: 0 6px 14px rgba(124, 58, 237, 0.35);
  transform: translateY(-2px);
}

/* !important: the game's own [draggable=true]:active { opacity: .7 } outranks it */
.tdnd-dragging {
  opacity: 0.35 !important;
}

.tdnd-ghost {
  position: fixed !important;
  top: 0;
  left: 0;
  margin: 0 !important;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.95;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  /* follow the finger exactly: no easing, and its own GPU layer */
  transition: none !important;
  animation: none !important;
  will-change: transform;
}

/* the bucket (or rank item) the card will land in; lights up at once */
.drag-drop-buckets .bucket.tdnd-over {
  border-style: solid;
  border-color: #7c3aed;
  background-color: #f3e8ff;
}
.drag-drop-ranking .tdnd-over {
  outline: 3px dashed #7c3aed;
  outline-offset: 2px;
}

/* while a card is picked, show which boxes can take it */
.drag-drop-buckets.tdnd-picking .bucket:not(.tdnd-over) {
  border-color: #b67efc;
  background-color: #faf5ff;
}

/* ---------- level 9 layout: cards left, buckets right ---------- */

/* two columns at every width (the game drops to one column below 1024px, which
   pushed the buckets below the cards on iPad portrait) */
.drag-drop-buckets {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start;
}

.drag-drop-buckets .items-pool {
  height: auto !important;
  padding: 12px !important;
}
.drag-drop-buckets .items-pool > .flex {
  flex-direction: column;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}
.drag-drop-buckets .items-pool [draggable="true"] {
  padding: 8px 12px !important;
  line-height: 1.35;
}

/* the buckets stay in view while the card list scrolls */
.drag-drop-buckets .buckets-column {
  position: sticky;
  top: 0;
  z-index: 2;
}
.drag-drop-buckets .buckets-container > * + * {
  margin-top: 10px !important; /* tighter than space-y-4 */
}

/* each bucket is one box with its title inside (the game drew the title above
   an empty dashed box, so it looked outside the bucket) */
.drag-drop-buckets .bucket {
  border: 2px dashed #d1d5db;
  border-radius: 0.5rem;
  background-color: #f9fafb;
  padding: 8px 10px 10px;
}
@media (hover: hover) {
  .drag-drop-buckets .bucket:hover {
    border-color: #b67efc;
  }
}
.drag-drop-buckets .bucket-label {
  margin-bottom: 6px !important;
  font-size: 0.95rem;
  line-height: 1.25;
}
/* the inner drop area keeps the game's drop listener but loses its own box */
.drag-drop-buckets .bucket-area {
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  transition: none !important;
}
.drag-drop-buckets .bucket-area > .flex {
  flex-direction: column;
  gap: 6px !important;
}

/* placed cards are compact chips; tap one to select it and read it in full */
.drag-drop-buckets .bucket-area [draggable='true'] {
  /* bottom space is a same-colour border, not padding: overflow is clipped at
     the padding edge, so padding would let a sliver of line 3 show */
  padding: 4px 8px 0 !important;
  border-bottom: 4px solid #b67efc;
  font-size: 0.8rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-height: calc(2.6em + 8px);
}
.drag-drop-buckets .bucket-area .tdnd-selected {
  -webkit-line-clamp: unset;
  max-height: none;
}

/* empty bucket: a big arrow shows where to drop (the game's own hint never shows) */
.drag-drop-buckets .bucket-area:not(:has([draggable='true'])) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.drag-drop-buckets .bucket-area:not(:has([draggable='true']))::before {
  content: '\2193';
  font-size: 1.6rem;
  line-height: 1;
  color: #c4b5fd;
}