/*
 * Nuzlocke — Pokémon & Route Cards
 *
 * All card variants: full pokemon card, compact box card, graveyard card,
 * opponent scouting card, route encounter cards, starter selection cards.
 */

/* =============================================
   POKEMON CARDS
   ============================================= */

.nz-card {
  background: var(--nz-elevated);
  border: 1px solid var(--nz-border);
  border-left: 2px solid var(--nz-accent);
  clip-path: var(--nz-clip-sm);
  box-shadow: var(--nz-shadow);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  width: var(--nz-card-w);
  transition: box-shadow 0.15s, transform 0.15s;
  position: relative;
}

.nz-card:hover {
  box-shadow: var(--nz-shadow-hover);
  transform: translateY(-1px);
}

.nz-card-sprite {}

.nz-card-nickname {
  font-size: 15px;
  font-weight: 700;
  color: var(--nz-text);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nz-card-species {
  font-family: var(--nz-font-mono);
  font-size: 12px;
  color: var(--nz-text-muted);
}

.nz-card-level {
  font-family: var(--nz-font-mono);
  font-size: 13px;
  color: var(--nz-accent);
  font-weight: 600;
}

.nz-card-types {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2px 0;
}

.nz-card-nature {
  font-size: 12px;
  color: var(--nz-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nz-card-subdesc {
  min-height: calc(3 * 1.4em + 2px);
  font-size: 12px;
  color: var(--nz-text-muted);
  line-height: 1.4;
  margin-top: 1px;
}

.nz-stat-nature-up {
  color: var(--nz-success) !important;
}

.nz-stat-nature-down {
  color: var(--nz-danger) !important;
}

/* Moves section inside a card (teambuilding) */
.nz-card-moves {
  width: 100%;
  border-top: 1px solid var(--nz-border-subtle);
  padding-top: 6px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nz-card-moves select {
  width: 100%;
  background: var(--nz-surface);
  border: 1px solid var(--nz-border);
  color: var(--nz-text);
  font-family: var(--nz-font-ui);
  font-size: 12px;
  padding: 3px 6px;
  border-radius: var(--nz-radius);
  outline: none;
}

.nz-card-moves select:focus {
  border-color: var(--nz-accent);
}

.nz-card-item {
  width: 100%;
  margin-top: 4px;
  border-top: 1px solid var(--nz-border-subtle);
  padding-top: 6px;
}

.nz-card-item select {
  width: 100%;
  background: var(--nz-surface);
  border: 1px solid var(--nz-border);
  color: var(--nz-text);
  font-family: var(--nz-font-ui);
  font-size: 12px;
  padding: 3px 6px;
  border-radius: var(--nz-radius);
  outline: none;
}

.nz-card-item select:focus {
  border-color: var(--nz-accent);
}

.nz-card-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  width: 100%;
}

.nz-card-error {
  font-size: 12px;
  color: var(--nz-danger);
  font-weight: 700;
  text-align: left;
  width: 100%;
  border-top: 1px solid var(--nz-danger);
  padding-top: 4px;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Card validation error state */
.nz-card-invalid {
  border-left-color: var(--nz-danger);
}

/* =============================================
   COMPACT BOX CARD
   ============================================= */

.nz-card-compact {
  width: var(--nz-card-compact-w);
  padding: 8px 10px;
}

.nz-card-compact .nz-card-sprite {
  width: 48px;
  height: 48px;
}

.nz-card-compact .nz-card-nickname {
  font-size: 13px;
}

/* =============================================
   GRAVEYARD CARD
   ============================================= */

.nz-card-dead {
  border-left-color: var(--nz-danger);
  filter: grayscale(0.75) brightness(0.65);
  position: relative;
  overflow: hidden;
}

.nz-card-dead::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(255, 68, 68, 0.08) 100%);
  pointer-events: none;
}

.nz-card-dead .nz-card-killed-by {
  font-size: 12px;
  color: var(--nz-danger);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  filter: none;
  margin-top: 3px;
  line-height: 1.3;
}

.nz-card-dead .nz-card-died-in {
  font-family: var(--nz-font-mono);
  font-size: 11px;
  color: var(--nz-text-dim);
  filter: none;
}

/* =============================================
   OPPONENT CARD (scouting)
   ============================================= */

.nz-card-opponent {
  border-left-color: var(--nz-danger);
  background: var(--nz-surface);
}

.nz-card-opponent .nz-card-level {
  color: var(--nz-danger);
}

.nz-card-opponent .nz-card-ability {
  font-size: 12px;
  color: var(--nz-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nz-card-opponent .nz-card-item {
  margin-top: 2px;
  border-top: none;
  padding-top: 0;
}

.nz-card-opponent .nz-card-item-label {
  font-family: var(--nz-font-mono);
  font-size: 12px;
  color: var(--nz-warning);
}

.nz-card-opponent .nz-card-move-list {
  font-size: 11px;
  color: var(--nz-text-muted);
  text-align: left;
  width: 100%;
  border-top: 1px solid var(--nz-border-subtle);
  padding-top: 4px;
  margin-top: 4px;
  line-height: 1.6;
}

/* =============================================
   STARTER CARDS
   ============================================= */

.nz-starter-card {
  background: var(--nz-elevated);
  border: 1px solid var(--nz-border);
  border-left: 2px solid transparent;
  clip-path: var(--nz-clip);
  padding: 16px 14px;
  width: var(--nz-starter-card-w);
  text-align: center;
  box-shadow: var(--nz-shadow);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.nz-starter-card:hover {
  border-color: var(--nz-accent);
  background: color-mix(in srgb, var(--nz-accent) 6%, var(--nz-elevated));
  box-shadow: 0 0 0 1px var(--nz-accent), var(--nz-shadow);
}

.nz-starter-card.nz-starter-card-selected,
.nz-starter-card.nz-starter-card-selected:hover {
  border-color: var(--nz-accent);
  border-left-color: var(--nz-accent);
  background: color-mix(in srgb, var(--nz-accent) 12%, var(--nz-elevated));
  box-shadow: 0 0 0 1px var(--nz-accent), var(--nz-shadow);
}

.nz-starter-sprite {
  display: flex;
  justify-content: center;
}

.nz-starter-sprite img {
  display: block;
  filter:
    drop-shadow(0 0 4px color-mix(in srgb, var(--nz-accent) 70%, transparent))
    drop-shadow(0 0 10px color-mix(in srgb, var(--nz-accent) 30%, transparent));
}

.nz-starter-stats {
  width: 100%;
  border-top: 1px solid var(--nz-border-subtle);
  padding-top: 8px;
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  text-align: center;
}

.nz-starter-stat {
  font-family: var(--nz-font-mono);
  font-size: 11px;
  color: var(--nz-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nz-starter-stat span {
  display: block;
  font-size: 13px;
  color: var(--nz-text);
  font-weight: 600;
}

@media (max-width: 800px) {
  /* Remove reserved 3-line height — on mobile cards stack so layout
     shifts aren't a concern and the blank space just wastes room. */
  .nz-card-subdesc {
    min-height: 0;
  }
}