/* interactions/correct_order/correct_order.css */

/* =========================================================
   Correct Order – FIXED 1920x1080 (NO WRAP / NO SCROLL)
   RULES:
   - parts max: 5 (editor + engine hard limit)
   - slots: single row (no wrap)
   - bank : single row (no wrap)
   - no horizontal scroll
   - check button fixed (does not move with rows because rows don't exist)
   Shared styles moved to: /interactions/global.css
   ========================================================= */

.co-wrap{
  position:absolute;
  left:0; top:0;
  width:1920px;
  height:1080px;

  /* ✅ 5 parça tek satıra sığsın (max-width 1520 + gap) */
  --co-item-w: 280px;
  --co-item-h: 92px;
}

/* =========================================================
   CO FRAME
   ========================================================= */

.co-frame{
  position:absolute;
  left:108px;
  top:223.5px;
  width:1704px;
  height:633.1px;

  background-image: var(--co-frame-bg, var(--ftw-frame-bg));
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;

  z-index:10;
  pointer-events:none;
}

/* Frame’in içinde yerleşim alanı */
.co-inner{
  position:absolute;
  left:108px;
  top:223.5px;
  width:1704px;
  height:633.1px;

  /* ✅ altta check sabit duracak */
  padding: 54px 80px 210px 80px;
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap: 18px;

  z-index:11;
}

/* =========================================================
   Slots (SINGLE ROW / NO WRAP / NO SCROLL)
   ========================================================= */

.co-slots{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;

  flex-wrap: nowrap;       /* ✅ tek satır */
  overflow: hidden;        /* ✅ scroll yok */
  white-space: nowrap;

  max-width: 1520px;
  margin-top: 4px;
}

.co-slot{
  position:relative;
  width: var(--co-item-w);
  height: var(--co-item-h);
  flex: 0 0 auto;          /* ✅ shrink yok */

  background-image: var(--co-slot-bg);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;

  border:0;
  border-radius:0;

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

  box-sizing:border-box;
  user-select:none;
}

.co-slot.is-over{
  filter: brightness(1.05);
}

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

/* correctness feedback */
.co-slot.is-correct{
  animation: coPop .18s ease-out;
  box-shadow: none; /* ✅ yeşil çerçeve yok */
}
.co-slot.is-wrong{
  animation: coShake .22s ease-in-out;
  box-shadow: none;
}

@keyframes coPop{
  from{ transform: scale(.985); }
  to{ transform: scale(1); }
}
@keyframes coShake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-6px); }
  50%{ transform: translateX(6px); }
  75%{ transform: translateX(-4px); }
  100%{ transform: translateX(0); }
}

/* =========================================================
   Bank (SINGLE ROW / NO WRAP / NO SCROLL)
   ========================================================= */

.co-bank{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 16px;

  flex-wrap: nowrap;       /* ✅ tek satır */
  overflow: hidden;        /* ✅ scroll yok */
  white-space: nowrap;

  max-width: 1520px;
  margin-top: 6px;
}

/* =========================================================
   Tiles
   ========================================================= */

.co-tile{
  width: var(--co-item-w);
  height: var(--co-item-h);
  flex: 0 0 auto;          /* ✅ shrink yok */

  background-image: var(--co-tile-bg);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;

  border:0;
  border-radius:0;
  background-color: transparent;

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

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

  touch-action:none;
  position:relative;

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

.co-tile:active{
  cursor: grabbing;
  transform: scale(.98);
}

.co-tile.is-dragging{
  opacity:.9;
}

.co-tile.is-locked{
  opacity:1;
  cursor: default;
  transform:none;
}

/* doğru + kilitli görünüm */
.co-tile.is-correct{
  position: relative;
}

/* solved anında parlasın */
.co-wrap.co-solved .co-tile.is-correct{
  animation: coSolvedGlow 1s ease-out 2;
  filter:
    brightness(1.08)
    saturate(1.12)
    drop-shadow(0 0 10px rgba(255,255,255,.28))
    drop-shadow(0 0 16px rgba(255,215,0,.22));
}

.co-wrap.co-solved .co-slot.is-correct{
  animation: coSolvedGlow 1s ease-out 2;
  filter:
    brightness(1.06)
    saturate(1.08)
    drop-shadow(0 0 8px rgba(255,255,255,.20))
    drop-shadow(0 0 14px rgba(255,215,0,.18));
}

@keyframes coSolvedGlow{
  0%{
    filter:
      brightness(1)
      saturate(1)
      drop-shadow(0 0 0 rgba(255,255,255,0))
      drop-shadow(0 0 0 rgba(255,215,0,0));
    transform: scale(1);
  }
  35%{
    filter:
      brightness(1.14)
      saturate(1.18)
      drop-shadow(0 0 10px rgba(255,255,255,.30))
      drop-shadow(0 0 18px rgba(255,215,0,.24));
    transform: scale(1.02);
  }
  100%{
    filter:
      brightness(1.06)
      saturate(1.08)
      drop-shadow(0 0 6px rgba(255,255,255,.18))
      drop-shadow(0 0 10px rgba(255,215,0,.14));
    transform: scale(1);
  }
}

/* minik tik — GREEN */
.co-tile.is-correct::after{
  content: "✓";
  position: absolute;
  right: 14px;
  top: 10px;

  font-size: 22px;
  font-weight: 900;
  line-height: 1;

  color: #22c55e; /* emerald-500 */
  opacity: .95;

  text-shadow:
    0 0 6px rgba(34,197,94,.45),
    0 0 2px rgba(34,197,94,.65);
}

/* text */
.co-tile-inner{
  width:100%;
  text-align:center;
  font-weight:900;

  /* JS buradan başlayacak */
  font-size: 34px;
  line-height: 1.25;

  color:#111;

  /* ✅ tek satır */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* =========================================================
   Check Button — FIXED POSITION (inside frame)
   ========================================================= */

.co-check{ background-image: var(--co-check-bg); }

.co-wrap.co-solved .co-check{
  opacity:.6;
  pointer-events:none;
}