/* ── Nikud Match — Kid-friendly layout ── */

/* Full-height arena: zones on sides, letter in center */
.nm-arena {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(10px, 2.5dvmin, 20px);
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  min-height: clamp(280px, 55dvh, 460px);
  padding: clamp(10px, 2.5dvmin, 20px);
}

/* ── Nikud zones — big, tappable, colorful ── */
.nm-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2dvmin, 16px);
  background: var(--zone-color, #4f67ff);
  border-radius: clamp(20px, 5dvmin, 36px);
  padding: clamp(16px, 4dvmin, 32px);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  animation: ab-zone-in 0.4s ease-out both;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.nm-zone--left { animation-delay: 0s; }
.nm-zone--right { animation-delay: 0.1s; }

.nm-zone:active {
  transform: scale(0.96);
}

.nm-zone--hover {
  transform: scale(1.06);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.25);
}

.nm-zone--correct {
  box-shadow: 0 0 0 8px #00C896, 0 10px 32px rgba(0, 200, 150, 0.4) !important;
  transform: scale(1.04);
}

/* Nikud box uses shared ab-nikud-box from framework CSS */

/* Nikud name label */
.nm-zone__name {
  font-size: clamp(16px, 4dvmin, 26px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  font-family: 'Heebo', 'Arial Hebrew', Arial, sans-serif;
}

/* ── Center: the letter with nikud ── */
.nm-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.5dvmin, 12px);
  flex: 0 0 auto;
  min-width: clamp(100px, 24dvmin, 170px);
}

/* Hint arrows */
.nm-hint {
  font-size: clamp(22px, 6dvmin, 40px);
  color: #b0b8d4;
  animation: ab-hint-pulse 1.5s ease-in-out infinite;
}

.nm-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(100px, 26dvmin, 170px);
  height: clamp(100px, 26dvmin, 170px);
  background: #fff;
  border: 6px solid #c7d2fe;
  border-radius: clamp(20px, 5dvmin, 36px);
  font-size: clamp(54px, 18dvmin, 100px);
  font-weight: 900;
  color: #1a1a2e;
  font-family: 'Heebo', 'Arial Hebrew', Arial, sans-serif;
  cursor: grab;
  touch-action: none;
  user-select: none;
  box-shadow: 0 6px 24px rgba(79, 103, 255, 0.15);
  transition: box-shadow 0.15s;
  animation: ab-pop 0.35s ease-out both;
  animation-delay: 0.15s;
  z-index: 10;
  position: relative;
}

.nm-letter--dragging {
  cursor: grabbing;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
  z-index: 100;
}

.nm-letter--correct {
  border-color: #00C896;
  background: #e8faf5;
}

/* Animations: using framework @keyframes (ab-zone-in, ab-pop, ab-hint-pulse) from alefbet.css */

/* ── Mobile: stack vertically on narrow phones ─────────────────────────── */
@media (max-width: 480px) {
  .nm-arena {
    flex-direction: column;
    min-height: auto;
    gap: clamp(8px, 2dvmin, 14px);
    padding: clamp(8px, 2dvmin, 14px);
  }

  .nm-zone {
    flex-direction: row;
    padding: clamp(10px, 2.5dvmin, 18px);
    gap: clamp(6px, 1.5dvmin, 10px);
  }

  .nm-center {
    min-width: auto;
    flex-direction: row;
    gap: clamp(8px, 2dvmin, 14px);
  }

  .nm-hint {
    font-size: clamp(18px, 5dvmin, 28px);
  }

  .nm-letter {
    width: clamp(80px, 22dvmin, 120px);
    height: clamp(80px, 22dvmin, 120px);
    font-size: clamp(40px, 14dvmin, 72px);
  }
}