@import url("variables.css");

.ws-panel {
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-gray-200);
  background: var(--color-gray-50);
  padding: var(--space-5);
}

.ws-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

.ws-feedback {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.ws-feedback--ok {
  background: var(--color-success-soft);
  color: var(--color-success);
  border: 1px solid rgba(31, 138, 91, 0.25);
}

.ws-feedback--bad {
  background: rgba(197, 48, 48, 0.08);
  color: var(--color-danger);
  border: 1px solid rgba(197, 48, 48, 0.25);
}

.ws-mcq {
  display: grid;
  gap: var(--space-3);
}

.ws-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-200);
  background: white;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ws-option:hover {
  border-color: rgba(37, 99, 235, 0.45);
}

.ws-option.is-selected {
  border-color: rgba(37, 99, 235, 0.75);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.ws-option__hi {
  font-family: var(--font-hi);
  font-size: var(--fs-xl);
  font-weight: 700;
}

.ws-match {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

@media (max-width: 800px) {
  .ws-match {
    grid-template-columns: 1fr;
  }
}

.ws-list {
  display: grid;
  gap: var(--space-2);
}

.ws-pair-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

.ws-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-gray-200);
  background: white;
  cursor: pointer;
  font-family: var(--font-hi);
  font-weight: 600;
  transition: transform 0.12s ease, border-color 0.2s ease;
}

.ws-chip:hover {
  border-color: rgba(37, 99, 235, 0.45);
}

.ws-chip.is-picked {
  border-color: rgba(37, 99, 235, 0.85);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.ws-arrange {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.ws-token {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-200);
  background: white;
  cursor: pointer;
  font-family: var(--font-hi);
  font-weight: 700;
}

.ws-token.is-used {
  opacity: 0.35;
  cursor: not-allowed;
}

.ws-sentence-preview {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
  background: white;
  font-family: var(--font-hi);
  font-size: var(--fs-lg);
  min-height: 52px;
}

.ws-meta {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-gray-600);
}

.hero-letter {
  font-family: var(--font-hi);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.hero-word {
  font-family: var(--font-hi);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
}

.placeholder-img {
  height: 160px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-gray-200);
  background: repeating-linear-gradient(
    135deg,
    white,
    white 10px,
    var(--color-gray-50) 10px,
    var(--color-gray-50) 20px
  );
  display: grid;
  place-items: center;
  color: var(--color-gray-600);
  font-size: var(--fs-sm);
}