/* interactions/complete_the_sentence/complete_the_sentence.css
   CTS — SWAP LAYOUT v5.1 (NO BANK)
   - Her satır: [drag-slot] + [second-card]
   - Drag kartlar satırlarda başlar (shuffle anim)
*/

:root{
  --cts-card-w: 442px;
  --cts-card-h: 90px;

  --cts-gap-x: 36px;
  --cts-gap-y: 18px;

  --cts-frame-width: 1550px;
  --cts-rows-frame-pad: 40px;

  --cts-ink:   var(--ui-text, #0f172a);
  --cts-muted: var(--ui-muted, #475569);

  --cts-rows-top: 220px;
  --cts-check-top: 820px;

  --cts-overlap: -20px;
}

/* wrap */
.cts-wrap{
  position:absolute;
  left:0; top:0;
  width:1920px;
  height:1080px;
  overflow:visible;
}

/* rows frame */
.cts-rows{
  position:absolute;
  top: var(--cts-rows-top);
  left:50%;
  transform:translateX(-50%);

  width: var(--cts-frame-width);
  min-height: 420px;
  max-height: 660px;

  background-image: var(--cts-frame-bg);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;
  background-color: transparent;

  padding: var(--cts-rows-frame-pad);
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap: var(--cts-gap-y);

  overflow:hidden;
}

/* each row */
.cts-row{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap: 0;
  position:relative;
}

/* slot */
.cts-drag-slot{
  position:relative;

  width: var(--cts-card-w);
  min-height: var(--cts-card-h);

  display:flex;
  align-items:stretch;
  justify-content:center;

  /* ✅ slot bg sadece EMPTY iken gösterilecek */
  background-image:none;
  background-color:transparent;

  padding: 0;
  box-sizing:border-box;
}

.cts-drag-slot.is-locked{
  pointer-events:none;
}

/* ✅ slot correct bg (drag doğru yerinde kilitlendiğinde) */
.cts-drag-slot.is-locked.is-correct{
  background-image:none;
  background-color: transparent;
  opacity:1;
  filter:none;
}

/* second */
.cts-second-card{
  box-sizing:border-box;
  word-break:break-word;
  overflow-wrap:anywhere;

  position:relative;
  overflow:hidden;

  width: var(--cts-card-w);
  min-height: var(--cts-card-h);
  height:auto;

  padding: 12px 18px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;
  border-radius:0;

  color: var(--cts-ink);

  background-image: var(--cts-secondcard-bg);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;
  background-color: transparent;

  user-select:none;
  -webkit-user-drag:none;

  pointer-events:auto; /* ✅ editor için açık kalsın */

  margin-left: var(--cts-overlap);
  z-index:3;
}

/* ✅ PLAYER’da kapat (engine runtime işaretiyle) */
.cts-wrap[data-runtime="player"] .cts-second-card{
  pointer-events:none;
}

/* ✅ SLOT correct ise, yanındaki second card da correct görünsün */
.cts-drag-slot.is-correct + .cts-second-card{
  background-image: var(--cts-drop-correct-bg, var(--cts-secondcard-bg));
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;
  background-color: transparent;
}

/* ✅ second correct bg (engine second’a is-correct verirse) */
.cts-second-card.is-correct{
  background-image: var(--cts-drop-correct-bg, var(--cts-secondcard-bg));
}

.cts-second-text{
  width:100%;
  text-align:center;

  font-weight:900;
  font-size:26px;
  line-height:1.2;

  color: inherit;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  -webkit-box-pack:center;
  -webkit-box-align:center;

  overflow:hidden;
  max-height: calc(1.2em * 2);

  position:relative;
  z-index:2;
}

/* drag card */
.cts-drag-card{
  box-sizing:border-box;
  word-break:break-word;
  overflow-wrap:anywhere;

  position:relative;
  overflow:hidden;

  width: 100%;
  min-height: var(--cts-card-h);
  height:auto;

  padding: 12px 18px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;
  border-radius:0;

  color: var(--cts-ink);

  background-image: var(--cts-dragcard-bg);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;
  background-color: transparent;

  user-select:none;
  -webkit-user-drag:none;

  pointer-events:auto;
}

/* ✅ drag correct bg */
.cts-drag-card.is-correct{
  background-image: var(--cts-drag-correct-bg, var(--cts-dragcard-bg));
}

.cts-drag-text{
  width:100%;
  text-align:center;

  font-weight:900;
  font-size:26px;
  line-height:1.2;

  color: inherit;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  -webkit-box-pack:center;
  -webkit-box-align:center;

  overflow:hidden;
  max-height: calc(1.2em * 2);

  position:relative;
  z-index:2;
}

/* tick */
.cts-drag-card .cts-tick{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%) scale(.5);
  opacity:0;

  font-weight:900;
  font-size:30px;
  line-height:1;
  z-index:3;

  color:#22c55e;
  transition: opacity 160ms ease, transform 160ms ease;
}
.cts-drag-card.is-correct .cts-tick{
  opacity:1;
  transform:translateY(-50%) scale(1);
}
.cts-drag-card.is-locked{ cursor:default; }

/* check button (minimum guarantee) */
.cts-check{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top: var(--cts-check-top);
  z-index:5;
  pointer-events:auto;

  width:210px;
  height:125px;

  background-image: var(--cts-check-bg, var(--mwp-check-bg));
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;

  border:0;
  outline:none;

  display:flex;
  align-items:center;
  justify-content:center;
}
.cts-check:active{
  transform:translateX(-50%) scale(.98);
}
.cts-check-text{
  width:160px;
  text-align:center;
  font-weight:900;
  font-size:26px;
  color:#000;
}

/* player drag UX */
/* ✅ PLAYER drag UX (engine runtime işaretiyle) */
.cts-wrap[data-runtime="player"] .cts-drag-card{ cursor:grab; touch-action:none; }
.cts-wrap[data-runtime="player"] .cts-drag-card:active{ cursor:grabbing; }
.cts-wrap[data-runtime="player"] .is-dragging{ z-index:9999 !important; pointer-events:none !important; }

/* shuffle intro anim */
/* YENİ (yerinde shuffle hissi) */
@keyframes ctsShuffleIn{
  0%   { opacity:0; transform: translate3d(0,0,0) scale(.96) rotate(-3deg); }
  35%  { opacity:1; transform: translate3d(2px,-2px,0) scale(1.02) rotate(2deg); }
  65%  { transform: translate3d(-2px,1px,0) scale(.99) rotate(-1.5deg); }
  100% { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
}

/* YENİ */
.cts-drag-card.cts-shuffle-in{
  animation: ctsShuffleIn .38s cubic-bezier(.2,.9,.2,1) both;
  animation-delay: var(--cts-shuffle-delay, 0ms);
}

/* complete lock */
.cts-wrap.cts-complete .cts-drag-card,
.cts-wrap.cts-complete .cts-second-card{
  pointer-events:none;
}

/* EMPTY SLOT LOOK (drag sırasında) */
.cts-drag-slot.is-empty{
  opacity:.78;
  filter: grayscale(.2) brightness(.98);

  background-image: var(--cts-dropcard-bg, var(--cts-dragcard-bg));
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;
  background-color: transparent;
}
.cts-drag-slot.is-empty::after{
  content:"";
  position:absolute;
  inset:10px 14px;
  border-radius:18px;
  pointer-events:none;
}

/* locked + empty safety */
.cts-drag-slot.is-locked.is-empty{
  opacity:1;
  filter:none;
  background-image:none;
}
.cts-drag-slot.is-locked.is-empty::after{ display:none; }

/* SWAP / RETURN FLASH */
@keyframes ctsSwapFlash{
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0); filter:brightness(1); }
  40%  { box-shadow: 0 0 0 6px rgba(34,197,94,.22); filter:brightness(1.08); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); filter:brightness(1); }
}
.cts-drag-card.cts-swap-flash{
  animation: ctsSwapFlash .22s ease;
}

@keyframes ctsSlotFlash{
  0%   { box-shadow: inset 0 0 0 0 rgba(34,197,94,0); }
  40%  { box-shadow: inset 0 0 0 6px rgba(34,197,94,.16); }
  100% { box-shadow: inset 0 0 0 0 rgba(34,197,94,0); }
}
.cts-drag-slot.cts-slot-flash{
  animation: ctsSlotFlash .22s ease;
}

/* =========================================================
   IDLE PULSE (tick alıncaya kadar hafif yanıp sönme)
========================================================= */

@keyframes ctsIdleFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* YENİ */
.cts-drag-card:not(.is-correct):not(.cts-shuffle-in){
  animation: ctsIdleFloat 2.2s ease-in-out infinite;
}