/* ═══════════════════════════════════════
    SENTENCE BUILDER
═══════════════════════════════════════ */
.sb-scene {
  text-align: center;
  margin-bottom: 18px;
}

.sb-scene-emoji {
  font-size: clamp(50px, 12vw, 68px);
  display: block;
  margin-bottom: 6px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
  transition: transform 0.4s var(--spring);
}

.sb-scene-emoji.pop {
  animation: emojiPop 0.5s var(--spring);
}

@keyframes emojiPop {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.22);
  }
}

.sb-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 12px 10px;
  background: var(--bg);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  transition: border-color 0.3s;
}

.sb-slots.ready {
  border-color: #4ade80;
  background: #f0fdf4;
  border-style: solid;
}

.sb-slots.wrong {
  animation: shake 0.45s var(--ease);
  border-color: #fca5a5;
}

.sb-chip {
  background: var(--primary);
  color: white;
  border-radius: 30px;
  padding: 8px 15px;
  font-family: "Baloo 2", "Noto Sans Hebrew", "Sora", sans-serif;
  font-weight: 800;
  font-size: clamp(13px, 3.5vw, 16px);
  cursor: pointer;
  transition:
    transform 0.2s var(--spring),
    box-shadow 0.2s;
  box-shadow: 0 3px 10px rgba(108, 79, 246, 0.3);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.sb-chip:active {
  transform: scale(0.93);
}

.sb-chip.correct-chip {
  background: #16a34a !important;
  animation: popBounce 0.4s var(--spring);
}

.sb-bank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  margin-bottom: 14px;
}

.sb-bank-chip {
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text);
  border-radius: 30px;
  padding: 9px 16px;
  font-family: "Baloo 2", "Noto Sans Hebrew", "Sora", sans-serif;
  font-weight: 800;
  font-size: clamp(13px, 3.5vw, 15px);
  cursor: pointer;
  transition: all 0.2s var(--spring);
  user-select: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.sb-bank-chip:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}

.sb-bank-chip:active {
  transform: scale(0.92);
}

.sb-bank-chip.used {
  opacity: 0.2;
  pointer-events: none;
}

.sb-hint {
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: 600;
  color: var(--text-soft);
  direction: rtl;
  margin-bottom: 14px;
  text-align: center;
}

.sb-hint .sb-hint-emoji {
  direction: ltr;
  display: inline-block;
  margin-left: 4px;
}

.sb-result {
  display: none;
  background: #f0fdf4;
  border: 2px solid #86efac;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 14px;
  text-align: center;
  animation: sectionIn 0.35s var(--ease);
}

.sb-result.show {
  display: block;
}

.sb-result-en {
  font-family: "Baloo 2", "Noto Sans Hebrew", "Sora", sans-serif;
  font-weight: 900;
  font-size: clamp(17px, 4vw, 22px);
  color: #16a34a;
  margin-bottom: 3px;
}

.sb-result-he {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  direction: rtl;
}