/* tasks/palet.css — the palette room (js/tasks/palet.js), Renk Dükkanı's back
   room on Sıfat Gezegeni. The rule of the room: every color name is printed IN
   the color it names, so reading the rack is already the lesson. The big
   swatch fills with whatever two chips make, and the name appears above it in
   the new color's own ink. */

.pal-room {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 8px 0 36px;
}

/* The mixing bench: two slots and the plus between them. A filled slot wears
   its color and hangs its name underneath in the same ink; tapping it hands
   the color back. */
.pal-bench {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 6px;
}

.pal-slot {
  min-width: 108px;
  height: 40px;
  border-radius: 999px;
  border: 1.5px dashed rgba(243, 234, 216, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.pal-slot.pal-filled {
  border-style: solid;
  border-color: rgba(243, 234, 216, 0.4);
}

.pal-plus {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem;
  color: #9A93B8;
  opacity: 0.7;
}

/* The output, underneath the bench: a short bar, then the scannable name. */
.pal-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 92px;
  padding-top: 6px;
}

.pal-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  min-height: 2.1rem;
  letter-spacing: 0.02em;
  color: #9A93B8;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.pal-swatch {
  width: 190px;
  height: 40px;
  border-radius: 999px;
  background: rgba(243, 234, 216, 0.05);
  border: 1px solid rgba(243, 234, 216, 0.18);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.3);
  transition: background 0.45s ease;
}

.pal-swatch.pal-pop { animation: palPop 0.5s ease; }
@keyframes palPop {
  0% { transform: scale(0.85); }
  55% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Mud: two colors that make nothing shake the swatch, not the learner. */
.pal-swatch.pal-shake { animation: palShake 0.4s ease; }
@keyframes palShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  60% { transform: translateX(5px); }
}

/* The rack. Each chip's border, label and glow all ride --pal, its own hex. */
.pal-rack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 560px;
}

.pal-chip {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--pal);
  border: 1.5px solid var(--pal);
  background: color-mix(in srgb, var(--pal) 13%, transparent);
  /* siyah must stay readable on the void: a faint cream lift under every label */
  text-shadow: 0 0 10px rgba(243, 234, 216, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pal-chip:hover { transform: translateY(-2px); }

.pal-chip.pal-on {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--pal) 45%, transparent);
}

/* The shelf of discoveries. */
.pal-found {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  min-height: 28px;
}

.pal-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  animation: palIn 0.5s ease forwards;
}
@keyframes palIn { to { opacity: 1; } }

.pal-mini-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(243, 234, 216, 0.25);
}

.pal-mini-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
}

/* The quiet tally: found / total, because Evren asked whether they can find
   them all, and a hunt deserves a scoreboard the size of a whisper. */
.pal-count {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: #9A93B8;
  opacity: 0.8;
}