/* interactions/find_the_word/find_the_word.css */

/* =========================================================
   FTW (Find the Word) – FIXED 1920x1080
   Shared styles moved to: /interactions/global.css
   - Header (.mwp-header, .mwp-intro-title, .mwp-title)
   - Nav buttons (.mwp-prev, .mwp-next, .mwp-nav-text + focus reset)
   - [data-edit] inline edit hover styles
   - body[data-mode="player"] .is-dragging safety
   - .disabled / [aria-disabled="true"]
   ========================================================= */

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

/* =========================================================
   FTW FRAME
   ========================================================= */

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

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

  z-index:10;
  pointer-events:none; /* frame tıklanmasın */
}

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

  /* Frame iç boşlukları (gerekirse ince ayar) */
  padding: 54px 80px 60px 80px;
  box-sizing:border-box;

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

  z-index:11;
}

/* =========================================================
   Hint (opsiyonel)
   ========================================================= */
.ftw-hint{
  width:100%;
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ftw-hint img,
.ftw-hint-img{
  max-width:520px;
  max-height:230px;
  object-fit:contain;
  display:block;
  -webkit-user-drag:none;
  user-select:none;
}

/* =========================================================
   Word slots
   - Her slot: ftw_word.png (130 x 127.1)
   - ✅ TEK SATIR: wrap kapalı, JS ile .ftw-slots-inner scale edilir
   - ✅ ŞEKİL BOZULMASIN: slot flex-shrink kapalı
   ========================================================= */
.ftw-slots{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;

  /* ✅ tek satır */
  flex-wrap: nowrap;
  overflow: visible;

  max-width: 1520px;
}

/* ✅ scale uygulanacak iç satır */
.ftw-slots-inner{
  display:flex;
  flex-wrap: nowrap;
  gap: 14px;

  /* ✅ gerçek genişliği koru (scale ölçümü doğru olsun) */
  width: max-content;

  transform-origin: center center;
  will-change: transform;
}

.ftw-slot{
  position:relative;
  width:130px;
  height:127.1px;

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

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

  font-weight:900;
  font-size:46px;
  line-height:1;
  color:#111;

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

  /* ✅ flex sıkıştırmayı kapat (ince-uzun olmasın) */
  flex: 0 0 auto;
}

/* verilen harf */
.ftw-slot.is-given{
  opacity: .95;
}

/* boş slot */
.ftw-slot.is-empty{
  color: transparent;
}

/* === FTW boşluk slotu ===
   Boşluk slotu: arka planı ftw-tile ile aynı olsun (boş "tile" görünümü) */
.ftw-slot.is-space{
  background-image: var(--ftw-tile-bg) !important;
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;

  color: transparent !important;   /* harf görünmesin */
  pointer-events: none;            /* drop olmasın */
  box-shadow: none !important;
  border: 0 !important;
}

/* drop hover */
/* Yeşil drop hover çerçevesini kapat */
.ftw-slot.is-over{
  outline: none !important;
  outline-offset: 0 !important;
}

/* doğru */
.ftw-slot.is-correct{
  animation: ftwPop .18s ease-out;
}

/* ✅ Doğru slota küçük tik */
.ftw-slot.is-correct{
  position: relative; /* garanti */
}

.ftw-slot.is-correct::after{
  content: "✓";
  position: absolute;
  right: 8px;
  top: 8px;

  width: 26px;
  height: 26px;
  border-radius: 999px;

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

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

  color: #fff;
  background: rgba(46, 204, 113, .95);
  box-shadow: 0 6px 14px rgba(0,0,0,.22);

  opacity: 0;
  transform: scale(.2);
  animation: ftwTickIn 320ms ease-out forwards;
}

@keyframes ftwTickIn{
  0%   { opacity: 0; transform: scale(.2); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .ftw-slot.is-correct::after{
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

@keyframes ftwPop{
  from{ transform: scale(.96); }
  to{ transform: scale(1); }
}

/* yanlış */
.ftw-slot.is-wrong{
  animation: ftwShake .22s ease-in-out;
}

@keyframes ftwShake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-6px); }
  50%{ transform: translateX(6px); }
  75%{ transform: translateX(-4px); }
  100%{ transform: translateX(0); }
}

/* Kelime içindeki harfler tek parça kalsın */
.ftw-wordgroup{
  display:flex;
  flex-wrap:nowrap;
  gap: 14px; /* slotlar arası aynı gap */
}

/* =========================================================
   STANDARD ANIM HOOKS (IsdarAnim)
   - engine: IsdarAnim.pulse(el, 'anim-correct', ms)
   - engine: IsdarAnim.pulse(el, 'anim-wrong', ms)
   - engine: IsdarAnim.seq(wrap, ms) => .anim-seq
   - engine: IsdarAnim.pulse(wrap, 'anim-success', ms)
   ========================================================= */

/* Start sequence: tiles hafif wiggle/glow (istersen slot da ekleriz) */
.ftw-wrap.anim-seq .ftw-tile{
  animation: isdar-wiggleGlow 700ms ease-in-out both;
}

/* ✅ Correct event */
.ftw-slot.anim-correct{
  animation: ftwPop .18s ease-out both;
}

/* ✅ Wrong event */
.ftw-slot.anim-wrong{
  animation: ftwShake .22s ease-in-out both;
}

/* ✅ Success event (wrap bounce) */
.ftw-wrap.anim-success{
  animation: isdar-successBounce 650ms ease-in-out both;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .ftw-wrap.anim-seq .ftw-tile,
  .ftw-slot.anim-correct,
  .ftw-slot.anim-wrong,
  .ftw-wrap.anim-success{
    animation:none !important;
  }
}

/* =========================================================
   Tiles (sürüklenen harfler)
   - ✅ TEK SATIR: wrap kapalı, JS ile .ftw-tiles-inner scale edilir
   - ✅ ŞEKİL BOZULMASIN: tile flex-shrink kapalı
   ========================================================= */
.ftw-tiles{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;

  /* ✅ tek satır */
  flex-wrap: nowrap;
  overflow: visible;

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

/* ✅ scale uygulanacak iç satır */
.ftw-tiles-inner{
  display:flex;
  flex-wrap: nowrap;
  gap: 12px;

  /* ✅ gerçek genişliği koru (scale ölçümü doğru olsun) */
  width: max-content;

  transform-origin: center center;
  will-change: transform;
}

.ftw-tile{
  width:130px;
  height:127.1px;

  background-image: var(--ftw-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;

  font-weight:900;
  font-size:42px;
  line-height:1;
  color:#111;

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

  /* pointer sürükleme için */
  touch-action:none;
  position:relative;

  /* ✅ flex sıkıştırmayı kapat (ince-uzun olmasın) */
  flex: 0 0 auto;
}

.ftw-tile:active{ cursor: grabbing; transform: scale(.98); }
.ftw-tile.is-dragging{ opacity:.85; }
.ftw-tile.is-used{ opacity:.35; cursor: default; transform:none; }

/* =========================================================
   PLAYER MODE – (global.css handles .is-dragging safety)
   ========================================================= */

/* slot layering */
body[data-mode="player"] .ftw-slot{ position:relative; }