/* =============================================================================
   redeem.css - Promo code form and reward panel.

   Reference: `.docs/steps/7.md` point 3. The form reuses the shared `.field` and
   `.field__input` classes (declared in `css/views/opening.css` and
   `css/views/collection.css`); only the code-specific typography and the reward
   panel are defined here. Colors come from `css/themes.css`.
   ============================================================================= */

.redeem__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.redeem__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: end;
}

/* The code is short: a monospaced face makes it easy to compare with the code the player copied
   from somewhere else. The field is NOT upper-cased by CSS (that would also transform the
   placeholder); `RedeemView` writes the normalized value back into the input on submit, so the
   player still sees the exact code that was sent. */
.redeem__input {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}

.redeem__hint {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* --- Reward preview (confirmation modal) ---------------------------------- */

.redeem__rewards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.redeem__reward {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
}

.redeem__reward[data-type="booster"] {
  border-left-color: var(--color-accent);
}

.redeem__reward[data-type="card"] {
  border-left-color: var(--color-success);
}

.redeem__reward-image {
  flex: 0 0 auto;
  width: 3.5rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
}

.redeem__reward-line {
  margin: 0;
  font-weight: 700;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .redeem__form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .redeem__panel {
    max-width: 34rem;
  }
}