.card-arena {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.05), transparent 60%),
    var(--arena-surface-01);
  border: 1px solid var(--arena-border);
  border-top: 1.5px solid rgba(0, 212, 255, 0.22);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 30px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  position: relative;
  color: var(--arena-text-primary);

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--arena-border);
  }

  .card-title,
  .card-body .card-title {
    display: block;
    margin-bottom: var(--sp-3);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .card-body {
    color: #fff;
  }
}

.badge-arena {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.badge-muted {
  background: var(--arena-surface-03);
  color: #fff;
}

.badge-green {
  background: rgba(34, 212, 126, 0.12);
  color: var(--arena-green);
}

.badge-warm {
  background: var(--arena-warm-glow);
  color: var(--arena-warm);
}

.badge-accent {
  background: var(--arena-accent-glow);
  color: var(--arena-accent);
}

.input-arena,
.form-control.input-arena,
textarea.input-arena {
  width: 100%;
  background: var(--arena-surface-02);
  border: 1px solid var(--arena-border);
  border-radius: var(--r-md);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;

  &::placeholder {
    color: rgba(255, 255, 255, 0.45);
  }

  &:focus {
    border-color: var(--arena-border-accent);
    background: var(--arena-surface-03);
    box-shadow: 0 0 0 3px var(--arena-accent-glow);
    color: #fff;
  }
}

textarea.input-arena {
  min-height: 88px;
  height: auto;
  resize: vertical;
}
