/* interactions/grouping/grouping.css
   Grouping — FINAL v1
*/

:root{
  --grouping-card-h: 60px;
  --grouping-card-fs: 32px;

  --grouping-bank-top: 220px;
  --grouping-bank-h: 210px;

  --grouping-groups-top: 470px;
  --grouping-groups-h: 380px;
}

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

  --grouping-ui-text-fallback: #0b1220;
  --grouping-surface-fallback: rgba(255,255,255,.78);
  --grouping-stroke-fallback: rgba(148,163,184,.25);
}

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

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

  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-content:flex-start;
  gap:16px;
  padding:12px 14px;
}

.grouping-drag-card{
  position:relative;
  min-width:220px;
  height:var(--grouping-card-h);
  padding:0 18px;

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

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

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

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

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

.grouping-drag-card.is-locked,
.grouping-drop-zone.is-correct .grouping-drag-card{
  background-image: var(--fib-slotcorrect-bg, var(--fib-slotblank-bg, none)) !important;
}

.grouping-drag-text{
  font-weight:900;
  font-size:var(--grouping-card-fs);
  line-height:1.05;
  color:var(--ui-text, var(--grouping-ui-text-fallback));
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:520px;
}

.grouping-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;
}

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

/* GROUP BOXES */
.grouping-groups{
  position:absolute;
  left:130px;
  top:var(--grouping-groups-top);
  width:1660px;
  height:var(--grouping-groups-h);

  display:grid;
  gap:18px;
  align-items:stretch;
}

.grouping-groups:has(.grouping-group-box:nth-child(1):last-child){
  grid-template-columns:1fr;
}
.grouping-groups:has(.grouping-group-box:nth-child(2):last-child){
  grid-template-columns:repeat(2, 1fr);
}
.grouping-groups:has(.grouping-group-box:nth-child(3):last-child){
  grid-template-columns:repeat(3, 1fr);
}
.grouping-groups:has(.grouping-group-box:nth-child(4):last-child){
  grid-template-columns:repeat(4, 1fr);
}

.grouping-group-box{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.grouping-group-title{
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  font-weight:900;
  font-size:30px;
  color:var(--ui-text, var(--grouping-ui-text-fallback));

  background-image: var(--fib-slot-bg, none);
  background-repeat:no-repeat;

  /* 🔥 DEĞİŞTİ */
  background-size: auto 100%;   /* width sabit kalır */
  background-position:center;

  margin-bottom:10px;
  padding:0 24px; /* biraz artırdık, daha güzel görünür */
}

.grouping-drop-zone{
  flex:1;
  min-height:220px;
  padding:14px;

  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  justify-content:center;
  gap:12px;

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

  overflow:auto;
}

.grouping-drop-zone.is-wrong{
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  outline:4px solid rgba(239,68,68,.45);
  outline-offset:2px;
  border-radius:20px;
}

.grouping-drop-zone.is-correct{
  outline:4px solid rgba(34,197,94,.35);
  outline-offset:2px;
  border-radius:20px;
}

.grouping-drop-zone.is-locked{
  pointer-events:none;
}

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

  width:210px;
  height:125px;

  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;
}

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

.grouping-check.is-disabled{
  opacity:.6;
  pointer-events:none;
}

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

/* editor parity */
.grouping-wrap.grouping-editor .grouping-drag-card{
  cursor:default;
  pointer-events:none;
}

.grouping-wrap.grouping-editor .grouping-drop-zone{
  pointer-events:none;
}