/* interactions/fill_in_the_blanks/fill_in_the_blanks.css
   FIB — FINAL v7.1 (NO theme.service changes)
   - Reads existing vars from theme.service.js:
     --mwp-drag-item-bg  (drag_item.png)
     --mwp-check-bg      (start.png)
     --fib-frame-bg      (fib_frame.png)
     --fib-slot-bg       (fib_slot.png)
     --fib-slotblank-bg  (fib_slotblank.png)
     --fib-slotcorrect-bg(fib_slotcorrect.png)

   DOM (editor + engine):
     .fib-wrap (fib-editor | fib-engine)
       .fib-bank (#fibBank) -> .fib-drag-card -> .fib-drag-text + .fib-tick
       .fib-sentence (#fibSentence) -> .fib-text + .fib-drop-area
       .fib-check -> .fib-check-text
*/

:root{
  --fib-text-max: 44px;
  --fib-text-min: 20px;
  --fib-line: 1.28;

  --fib-chip-h: 60px;
  --fib-chip-fs: 34px;

  /* Layout: sentence max */
  --fib-bank-top: 210px;
  --fib-bank-h: 230px;

  /* ✅ sentence'i olabildiğince uzat */
  --fib-sentence-top: 380px;
  --fib-sentence-h: 480px;
}

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

  /* fallback tokens */
  --fib-ui-text-fallback: #0b1220;
  --fib-ui-muted-fallback:#334155;

  --fib-surface-fallback: rgba(255,255,255,.78);
  --fib-stroke-fallback: rgba(148,163,184,.25);
}

.fib-wrap,
.fib-wrap *{
  box-sizing:border-box;
  font-family: var(--stage-font, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}

/* =========================
   BANK
========================= */
.fib-bank{
  position:absolute;
  left:160px;
  top: var(--fib-bank-top);
  width:1600px;
  height: var(--fib-bank-h);

  display:flex;
  flex-wrap:wrap;

  justify-content:center;   /* 🔥 yatay ortala */
  align-content:flex-start;

  gap:16px;
  padding:12px 14px;
}

.fib-drag-card{
  position:relative;

  min-width:220px;
  height: var(--fib-chip-h);
  padding:0 18px;

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

  /* ✅ Eski mantık: kartlar slotblank skin ile */
  background-image: var(--fib-slotblank-bg);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;

  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow:none;

  box-shadow:none;

  user-select:none;
  cursor:grab;
  touch-action:none;
}

.fib-drag-card.is-dragging{
  cursor:grabbing;
  transform: scale(1.02);
}

.fib-drag-card.is-locked{
  opacity:.95;
}

/* ✅ DOĞRU OLUNCA CORRECT PNG */
.fib-drop-area.is-correct .fib-drag-card,
.fib-drag-card.is-locked{
  background-image: var(--fib-slotcorrect-bg) !important;
}

.fib-drag-text{
  font-weight:900;
  font-size: var(--fib-chip-fs);
  line-height:1.05;
  color: var(--ui-text, var(--fib-ui-text-fallback));
  text-align:center;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:520px;
}

.fib-tick{
  position:absolute;
  right:10px;
  top:8px;

  width:24px;
  height:24px;

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

  font-weight:900;
  font-size:18px;

  color:#16a34a;
  background:rgba(255,255,255,.85);
  border-radius:999px;

  pointer-events:none;
}

.fib-drag-card.is-locked .fib-tick{
  display:flex;
}

/* =========================
   SENTENCE
========================= */
.fib-sentence{
  position:absolute;
  left:160px;
  top: var(--fib-sentence-top);
  width:1600px;
  height: var(--fib-sentence-h);

  padding:26px 30px;

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

  font-weight:900;
  font-size: var(--fib-text-max);
  line-height: var(--fib-line);
  color: var(--ui-text, var(--fib-ui-text-fallback));
}

/* engine scroll ok */
.fib-wrap.fib-engine .fib-sentence{ overflow:auto; }
/* editor no scroll */
.fib-wrap.fib-editor .fib-sentence{ overflow:hidden; }

.fib-text{ white-space:pre-wrap; }

.fib-drop-area{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* ✅ font-size küçülünce boşluk da küçülsün */
  min-width: 6em;
height: 1.95em;      /* 🔥 2.25 → 1.95 */
padding: 0 0.5em;
margin: 0 0.3em;


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

  color: var(--ui-text, var(--fib-ui-text-fallback));
  vertical-align:middle;

  /* küçük fontlarda taşmayı engelle */
  white-space:nowrap;
}

.fib-drop-area.is-over{
  outline:3px solid rgba(59,130,246,.55);
  outline-offset:2px;
}

.fib-drop-area.is-wrong{
  background-image: var(--fib-slotblank-bg, var(--fib-slot-bg));
}

.fib-drop-area.is-correct{
  background-image: var(--fib-slotcorrect-bg);
}

/* card inside slot */
.fib-drop-area .fib-drag-card{
  height: 1.8em;      /* 🔥 2.05 → 1.8 */
  min-width: 5.6em;
  border-radius: 0.5em;
  box-shadow:none;
}

/* 🔥 BURAYA EKLE */
.fib-drop-area:has(.fib-drag-card){
  background-image: none !important;
  background-color: transparent !important;
}

/* =========================
   CHECK BUTTON
========================= */
.fib-check{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:125px;

  width:210px;
  height:125px;

  /* ✅ Check PNG: theme.service uses --mwp-check-bg */
  background-image: var(--mwp-check-bg, none);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;

  background-color:transparent;
  border:0;
  outline:none;
  border-radius:0;
  box-shadow:none;

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

  cursor:pointer;
  user-select:none;
  pointer-events:auto;

  z-index:3;
}

.fib-check:active{
  transform:translateX(-50%) scale(.98);
}

.fib-check-text{
  width:160px;
  text-align:center;
  font-weight:900;
  font-size:26px;
  color: var(--ui-text, var(--fib-ui-text-fallback));
}

/* =========================
   PANEL chips (editor)
========================= */
.fib-cards-panel{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.fib-card-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:42px;
  padding:0 14px;

  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);

  font-weight:800;
  font-size:16px;

  background:rgba(255,255,255,.08);
  color: var(--ui-text, var(--fib-ui-text-fallback));
}

/* =========================
   EDITOR parity: DnD OFF
========================= */
.fib-wrap.fib-editor .fib-drag-card{
  cursor:default;
  pointer-events:none;
}

.fib-wrap.fib-editor .fib-drop-area{
  pointer-events:none;
}